http://www.teachhub.com/sevcik-tester-ooyala
Fancybox close event is not removing the dark overlay in Chrome and IE. Firefox works great. I'm using fancybox 2. The commented out items below, I've tried forcing the close event and it's not working. The main window closes, but the dark overlay remains.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery.noConflict();
});
</script>
<div style="width: 312px;">
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("a.videolink").fancybox({
closeClick : true,
helpers : {
overlay : {closeClick: true}
},
'afterClose': function () {
videoPlayer.pause();
//jQuery("#fancybox-wrap").hide();
//jQuery("#fancybox-wrap").empty();
//jQuery("#fancybox-overlay").hide();
//jQuery("#fancybox-overlay").empty();
//jQuery('#fancybox-overlay').unbind();
}
});
});
</script>
<script src='http://player.ooyala.com/v3/apikey'></script>
<p style="font-weight: bold; color: red; font-size: 18px; line-height: 21px; margin-bottom: 10px; margin-left: 10px;">Welcome to TeachHUB.com</p>
<!-- The Video Thumbnail -->
<a class="videolink" href="#videocontainer" title="">
<img src="/sites/default/files/homepage-video-player.jpg" style="float: left; padding: 0px 15px 15px 10px;"/>
</a>
<!-- The Video Object -->
<div id="videocontainer">
<div id='playerwrapper' style='width:480px;height:360px;'></div>
<script>
var videoPlayer = OO.Player.create('playerwrapper','R0ZjB2NTqDw3YRWba9RIpRnF6D9lRYKP', {
// additional params go here
});
videoPlayer.play();
</script>
</div>
After you close fancybox in Chrome, it triggers 1500+ js errors .... it's most likely a loop.
try loading a single instance of jQuery (ideally the latest version) ... so far, I have found 3 different versions (v1.7.2, v1.4.4 and v1.3.1).
Related
I have many image icon on my page which have Tooltip on it and show different text in tooltip. I want to show each tooltips when user click on its image icon not on hover. and also when user click on any other place or area of page tooltip also hide or disappear.
<img style="width:26px; height: 23px;" class="customTooltip" data-toggle="tooltip" data-html="true" title="" src="/images/alert.png" data-original-title="Number Typ and Service Type:">
You can do it using bootstrap
<b-button id="tooltip-target-1">
Click Me
</b-button>
<b-tooltip target="tooltip-target-1" triggers="click">
I am tooltip <b>component</b> content!
</b-tooltip>
No need to reinvent the wheel. You can use third party library like TippyJs:
tippy(".item", {
trigger: 'click',
content: `item info`,
allowHTML: true,
animation: 'fade',
onShow(instance) {
let element = instance.reference;
instance.setContent(element.getAttribute('data-info'));
//console.log(instance);
},
});
img {
margin: 2rem
}
<script src="https://unpkg.com/#popperjs/core#2"></script>
<script src="https://unpkg.com/tippy.js#6"></script>
<img class='item' src="https://picsum.photos/id/4/150/100" data-info="item info 1">
<img class='item' src="https://picsum.photos/id/2/150/100" data-info="item info 2">
My JQuery solution without any other js libs for custom tooltip:
<script>
$(document).ready(function() {
var noHideTooltip = false;
$(document).click(function(e) {
if (!noHideTooltip) {
$('.tooltip-box-show').removeClass('tooltip-box-show');
}
});
$(document).on('click', '.tooltip-box', function(e) {
$('.tooltip-box-show').removeClass('tooltip-box-show');
$(this).addClass('tooltip-box-show');
noHideTooltip = true;
setTimeout(function() { noHideTooltip = false; }, 0);
});
});
</script>
.tooltip-text {display:none; background:#ccc;}
.tooltip-box-show ~ .tooltip-text {display:block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/OOjs_UI_icon_alert_destructive.svg/120px-OOjs_UI_icon_alert_destructive.svg.png" class="tooltip-box"><span class="tooltip-text">Text here..</span
Just add your css tooltip style
TODO: Create an AngularJS directive to display list of images in an endless, smooth left to right scrolling loop. To keep it simple you can assume the fixed height/width for the images indicated above.the work should be done in the directive and styles without adding supporting libraries or plugins.
angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
// list of images to scroll, each image is 280px x 200px
$scope.images = [
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost®%20Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Premium Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Convertible]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Premium Convertible]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby® GT350R]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby GT350®]/EXT/4/vehicle.png'];
})
.directive('myScroller', function () {
return {
// >> your directive code <<
};
});
.container {
width: 700px;
margin: 0 auto 100px;
padding: 20px;
overflow: hidden;
}
.container .image-list {
height:200px;
width:2240px;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div class="container">
<h1>Static Images</h1>
<div class="image-list">
<img ng-repeat="image in images" ng-src="{{image}}" />
</div>
</div>
<div class="container">
<h1>Scrolling Images</h1>
<!-- use my scroller directive, see script.js file for directions -->
<div my-scroller="images"></div>
</div>
</div>
</div>
</body>
</html>
I have used a Masonry view plugin but when the images load through the ajax call, they seem to be displayed one below another (like a list)
HTML
<div id="masonryView" data-ng-repeat="image in images">
<div class="item">
<a target="_blank" href="">
<img src="{{image.imageSourceURL}}" alt="" width="250">
</a>
<div class="desc">{image.description}</div>
</div>
</div>
Ajax
$(window).load(function(){
var $container = $('#masonryView').masonry();
$container.imagesLoaded( function() {
$container.masonry();
});
});
CSS
#masonryView {
position: relative;
}
.item {
margin: 10px;
width: 100px;
}
Does there seem to be a problem that could explain why the images are displayed one below another?
I'm not seeing any AJAX in your posted code labeled "AJAX" but you should call masonry in this way, by setting your itemSelector:
$(window).load(function(){
var $container = $('#masonryView').masonry();
$container.imagesLoaded( function() {
$container.masonry({itemSelector: '.item'});
});
});
Here is what i want:
Now in more detail:
I have 2 iframes, one on top of the other. the one above has 4 buttons/images, the one below is where a url/link will be displayed when one of these buttons/images gets clicked. i got this working...
what i want now is to have those buttons change image from inactive (ie. light pink) to active (ie. red) state when they are clicked. also, when i click on another of the 4 buttons it will turn red and the previous active (red) button/image must turn back to its inactive state (light pink). so i want 2 images here: (1) active.png and (2) inactive.png.
ALSO, i want the buttons to change to active.png when i hover over them. this i was able to manage with onmouseover and onmouseout effect. its just the ACTIVE part is what i cant figure out.
do i need javascript or can i do without it in case some user has it disabled?
i was also thinking about maybe using radio buttons and then skinning them with my active.png and inactive.png using css or something, but i dont know how to do this either :P i dont know what is the best and simplest way to go?
------------UPDATE-----------
ok i got something working but im not all the way there yet. it might not even be the way to go, but what i've done is create 4 links and given them all an id (ie.button1, button2..)
then in css i did this for each:
button1 { width: 66px; height: 70px; display: block; background-image:url(images/inactive1.png); }
button1:hover { width: 66px; height: 70px; display: block; background-image:url(images/active1.png); }
button1:focus{ width: 66px; height: 70px; display: block; background-image:url(images/active1.png); }
but i dont want it to loose focus unless another one of the buttons is clicked. cuz now its loosing focus if i click anywhere on the page :( how can i fix this?
I made these two files that cover all:
<!DOCTYPE html>
<html>
<head runat="server">
<title>Deep East Music</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
.buttons { float:left; width:60px; height:25px; margin:10px 0 0 5px; cursor:pointer; }
.buttons[isselected = "true"] { background-color:#ff7373; }
.buttons[isselected = "false"] { background-color:#cccccc; }
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#button1").click(function () {
$(".buttons").attr("isselected", "false");
$(this).attr("isselected", "true");
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173");
});
$("#button2").click(function () {
$(".buttons").attr("isselected", "false");
$(this).attr("isselected", "true");
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F37674430");
////Use one of these if you need to reload the iframe
//$('#myiframe').contentWindow.location.reload(true);
//$("#myiframe").attr("src", $("#myiframe").attr("src"));
});
$("#button3").click(function () {
$(".buttons").attr("isselected", "false");
$(this).attr("isselected", "true");
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3442336");
});
$("#button4").click(function () {
$(".buttons").attr("isselected", "false");
$(this).attr("isselected", "true");
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38359257");
});
});
function ClickedButton1 () {
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173");
return false;
};
function ClickedButton2 () {
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F37674430");
return false;
};
function ClickedButton3 () {
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3442336");
return false;
};
function ClickedButton4 () {
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38359257");
return false;
};
</script>
</head>
<body>
<div>
<div id="button1" class="buttons" isselected="true">button1</div>
<div id="button2" class="buttons" isselected="false">button2</div>
<div id="button3" class="buttons" isselected="false">button3</div>
<div id="button4" class="buttons" isselected="false">button4</div>
<iframe id="mybuttonsiframe" width="100%" height="60" scrolling="no" frameborder="no" src="buttons.htm"></iframe>
<iframe id="myiframe" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173"></iframe>
</div>
</body>
</html>
And buttons.htm looks like:
<!DOCTYPE html>
<html>
<head runat="server">
<title>Deep East Music</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
/* CSS Here */
.iframebuttons { float:left; width:100px; height:25px; margin:10px 0 0 5px; cursor:pointer; }
.iframebuttons[isselected = "true"] { background-color:#ff7373; }
.iframebuttons[isselected = "false"] { background-color:#cccccc; }
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#iframebutton1").click(function () {
$(".iframebuttons").attr("isselected", "false");
$(this).attr("isselected", "true");
parent.ClickedButton1();
});
$("#iframebutton2").click(function () {
$(".iframebuttons").attr("isselected", "false");
$(this).attr("isselected", "true");
parent.ClickedButton2();
});
$("#iframebutton3").click(function () {
$(".iframebuttons").attr("isselected", "false");
$(this).attr("isselected", "true");
parent.ClickedButton3();
});
$("#iframebutton4").click(function () {
$(".iframebuttons").attr("isselected", "false");
$(this).attr("isselected", "true");
parent.ClickedButton4();
});
});
</script>
</head>
<body>
<input type="button" id="iframebutton1" class="iframebuttons" isselected="true" value="iframebutton1" />
<input type="button" id="iframebutton2" class="iframebuttons" isselected="false" value="iframebutton2" />
<input type="button" id="iframebutton3" class="iframebuttons" isselected="false" value="iframebutton3" />
<input type="button" id="iframebutton4" class="iframebuttons" isselected="false" value="iframebutton4" />
</body>
</html>
The only way to do this without JS, is to create four static pages as mentioned in the comment to your original post.
Your body markup would look like this:
<ul id="nav">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<iframe src="www.url.com">
</iframe>
The list above is your Navigation. You do not need a separate iframe, since you have four static pages. In each static page, the li-element containing the link to the active static page gets a class called "active".
The iframe stores the url, you want to be displayed in there.
In your css file, you can style your navigation like that:
#nav a {background: url('images/inactive.png');}
#nav a:hover,
#nav li.active a{
background: url('images/active1.png');
}
This should work, but a solution using JS would be much more elegant.
I'm using a show/hide function to reveal the Gmaps google maps plugin but when the onclick is executed the Gmap is shown but part of the map is missing and is greyed out.
I've looked online at various sites for a solution and only found the option to use "gmap.checkResize()" but not sure how to go about to use this with my code, and if it will even work for my problem...
I've added the code below and am looking for assistance with getting the whole map to show when onclicked.
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAL7_5Aste4KkbgvT91y3k9xQo4D0inr193z9lVfCY1TNJb6Lz5RQJyM7R-PR3bMS1i_GvwioUrJMaXw" type="text/javascript"></script>
<script type="text/javascript" src="javascripts/jquery-1.7.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.gmap-1.1.0-min.js"></script>
</head>
<style>
#map{
position:relative;
float:left;
width:450px;
height:400px;
}
.PlaceHeading{
color: #C6688D;
font-family: Arial;
font-size: 15px;
margin-bottom:-13px;
}
#content{
text-align:center;
}
a{
color: #C6688D;
}
.PlaceAddress{
color: #666666;
font-family: Arial,Georgia,sans-serif;
font-size: 12px;
font-weight: normal;
}
</style>
<script type="text/javascript">
$(function() {
$("#map").gMap({ markers: [{ address: "809 1st Ave. N.E. Calgary, Alberta",
html:'<div id="content"><center>'+
'<h1 class="PlaceHeading">Blue Star Diner</h1>'+ //*Title of location
'<p class="PlaceAddress">809 1st Ave. N.E.<br />'+ //*Street address of location
'Calgary, AB <br />'+ //*City and Province of location
'403-261-9998 <br/>'+ //*Phone number of location
'<a href="http://maps.google.com/maps?saddr=809 1st Ave. N.E.+Calgary,AB+Canada" target="_blank">' //*Enter Address info in url where appropriate to link to Google directions page
+'Get directions</a> <b>|</b> <a href="http://www.bluestardiner.ca/" target="_blank">' + //*Enter place url here
'Visit website </a> </p></center>' +
'</div>',
icon: { image: "mapPage/images/marker1.png",
iconsize: [25, 41],
iconanchor: [9, 34],
infowindowanchor: [9, 2] }
}],
zoom: 13 });
});
</script>
<script language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
document.getElementById("expandMap").src="mapPage/images/minus.jpg";
document.getElementById("mapText").innerHTML="Hide map";
}
else
{
document.getElementById(divId).style.display = 'none';
document.getElementById("expandMap").src="mapPage/images/plus.jpg";
document.getElementById("mapText").innerHTML="View map";
}
}
</script>
<body>
<a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" ><img src="/mapPage/images/plus.jpg" id="expandMap"alt="" style="float:left;" /><p id="mapText">View map</p></a>
<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
<div id="map"> </div>
</div>
display: none; means that the element is taking up no space on the page which seems to cause the GMap size calculations to not work properly. Using visibility: hidden; instead is one way to fix it. position: absolute; can probably help you out if the element taking up space is an issue.