Showing a div when an image in a slider is active - javascript

I am working with a plugin image slider and am attempting to show specific text that will be associated with image. For instance, image 1 will show paragraph 1, image 2 will show paragraph 2, etc.
I was going to upload a snippet showing what I am doing, but the plugin code was too much. Therefore, here is a jsfiddle link that shows what I am doing. The main code in question is at the bottom of the javascript and the text that I want to show is at the bottom of the html. This code:
$(document).ready(function() {
$('.ma5slider').ma5slider();
var court = $('#slide-1');
var activeSlide = $('.slide--active') == true;
if(court == activeSlide) {
court.show();
console.log('It is working');
}
});
I have the text set at display: none; on page load and then when the specific image is displaying (I believe I narrowed this down to the class .slide--active), that text set to show().
Does anyone see what I am doing wrong?

This is because you are not targeting the right active class when each slide takes turn to slide in, I have amended your code below:
$(document).ready(function() {
$('.ma5slider').ma5slider();
var court = $('.slide');
var activeSlideClassName = 'slide--active';
setInterval(function(){
if(court.hasClass(activeSlideClassName)){
console.log('It is working');
}
}, 1000);
});
Also your slide will need to have a callback function to capture the event whenever the new slide comes in. In this case I have used setInterval() to monitor the DOM, it isn't the best solution but you get the idea....
Working code here

you can check it $('.ma5slider').on('ma5.activeSlide') same as below :
jsfiddle

Related

Group of script calls for buttons in a .js using wheelzoom

I have 12 buttons each with an ID, i'm using this script for the action.
$(document).ready(function() {
$("#WEyear18000").click(function() {
$("#WEtextarea").load("Files/Docs/y18000.txt");
$('#WEimage_view').html('<img src="Files/Image/treesimages/PalaeoGlaciolMaps.jpg" >');
$('#WEee244f5837 .PullZone').click();
wheelzoom(document.querySelectorAll('img'));
});
});
WEyear18000, is the id of button, WEtextarea, is the id of the div where txt is displayed on button click, WEimage_view, is the id of the div where new image displayed on same button click, WEee24f5837, is the id to close a collapsible panel where buttons are located.
There are 12 of these script statements in a .js file.
It all works but it causes some strange effects after the 2nd or another button is clicked, all the images on the page disappear but the one on the button click. Page is here, page with issue
Any suggestion on how to stream line script wanted. I a newbe to scripting but managed to hodgepodge this to work but has and adverse affect on the rest of the pages images. Suggestion and samples to jsfiddle. Thanks in advance.
<div id="wrapper">
<div id="WEtextarea"> </div>
<div id="WEimage_view"></div>
</div>
CSS controls size and all aspects of div.
I tried all your menu items... And did not notice such a bug.
So, while your're here... I have a suggestion to reduce your long script made of a small chunk repeated 12 times.
I would define the maps as objects, like this:
var maps = [
{
buttonId: "WEyear18000",
text: "Files/Docs/y18000.txt",
image: "Files/Image/treesimages/PalaeoGlaciolMaps.jpg"
},
{
// other 11 objects using the same structure...
}
];
And I would just add a class to each items, in the HTML, like this:
<div id="WEyear18000" class="BaseDiv RBoth OEWELinkButton OESK_WELinkButton_Default OECenterAH clickHandlerClass" style="z-index:1">
Then, I would use a shorter function like this one:
$(document).ready(function() {
$(".clickHandlerClass").click(function(){
// Get the id of the clicked menu item
var thisId = $(this).attr("id");
// Find its related object
var mapIndex = -1;
for(i=0;i<maps.length;i++){
if( maps[i].buttonId == thisId ){
mapIndex = i;
}
}
if(mapIndex != -1){
// Use the object infos in the page elements.
$("#WEtextarea").load(maps[mapIndex].text);
$('#WEimage_view').html('<img src="'+maps[mapIndex].image+'" >');
$('#WEee244f5837 .PullZone').click();
wheelzoom(document.querySelectorAll('img'));
}else{
console.log("Undefined map or id error...");
}
});
});
The array of objects is way easier to maintain... And an additional button easier to add.
You can use another class name than "clickHandlerClass".
;)
The wheelzoom looked like the only possible source of error to me. So I looked for its source, and found:
Wheelzoom replaces an img's background-image with its src. Then the src is set to a transparent image.
So, on the first wheelzoom, you get src transeparent, and on the second, you get a transparent background-image as well.
You can fix this by calling wheelzoom only on your new image:
$(document).ready(function() {
$("#WEyear18000").click(function() {
$("#WEtextarea").load("Files/Docs/y18000.txt");
$('#WEimage_view').html('<img src="Files/Image/treesimages/PalaeoGlaciolMaps.jpg" >');
$('#WEee244f5837 .PullZone').click();
//wheelzoom(document.querySelectorAll('img'));
wheelzoom(document.querySelectorAll('#WEimage_view img'));
});
to fix your bug you need to replace:
wheelzoom(document.querySelectorAll('img'));
with:
wheelzoom(document.querySelectorAll('#WEimage_view img'))
So only the images in the #WEimage_view will be affected by wheelzoom

jQuery Hide/Show DIV on change of anchor text

I have one page website which changes URL #id or anchor text on scrolling and on navigation click. I have an image positioned fixed at the center of the site. The site is divided in different sections and the image shows in all the sections. I do not want to show the image on the first section as it is unrelated to the content of the 1st section but will be showed in all next sections. How can I make it work?
What I have tried till now but not working:
$(document).ready(function(){
$(".phone").hide();
var idSample = window.location.href.split("#");
var id = "#"+idSample[1];
if($(id) == "second"){
$(".phone").show();
}else{
$(".phone").hide();
}
});
Rest in Fiddle: https://jsfiddle.net/shubhamjha1000/vh7bu32q/
I don't want that phone to be seen on 1st section but on rest of the sections. Please help me guys!
You can use the answer written in this question to listen to changes in the window see what url you are on and show or hide the phone accordingly....
Example:
$(function(){
// Bind the event.
$(window).hashchange(hashchanged);
// Trigger the event (useful on page load).
hashchanged();
});
function hashchanged(){
var hash = location.hash.replace( /^#/, '' );
//your code
if(hash == "#first") {
// Hide element
} else {
// Show element
}
}
But still even though what you are planning to do will work with that solution I think it would still look bad on the app it self and instead of a hovering phone maybe you can create the phone as an img inside the relevant containers and hide and show with id...
You can simply use a substring on your location.hash for get your hash tag
$(document).ready(function(){
$(".phone").hide();
var id = window.location.hash.substr(1);
if($(id) == "second"){
$(".phone").show();
}else{
$(".phone").hide();
}
});

Hovering over <a> and displaying images based on value

I am currently displaying pictures when an tag is hover over. I have been able to workout the main problem of displaying the picture. The problem is that it has a glitch when hovering occurs quickly. Is there away to avoid that? Also how can i set a default image to display when page is loaded? JSFIDDLE
HTML
<div id="links">
Cheeseburger »
Tacos »
Salads »
Bread Sticks »
Dessert »
</div>
Jquery
$("div#links > a").hover(
function(){
var ID = $(this).data("content");
$("div#images").children("img#" + ID).fadeIn("slow");
},
function() {
var ID = $(this).data("content");
$("div#images").children("img#" + ID).hide();
}
);​
Glitch
The problem is that it has a glitch when hovering occurs quickly. Is
there away to avoid that?
This is not a glitch. fadeIn is using animation. As you are hovering over the links faster than the animations complete your experiencing that "glitch".
To ensure you are not clashing with the previous running animation you have to stop any current and any queued animation.
Replace
$("div#images").children("img#" + ID).fadeIn("slow");
with
$("div#images").children("img#" + ID).stop(true, true).fadeIn("slow");
DEMO - Clearing the animation queue before starting the next one
how can i set a default image to display when page is loaded?
I added the code to show a default image as well. To prevent any odd visuals when hovering over a menu item the first time when using a default image. The code checks if we are showing a default image and if we are it will further check if the image for the current menu is the default image.
If it is, it won't hide it as it is showing it anyway but if it is not, it will ide the default image before fading in the new one.
Hope this makes sense, see the full code and DEMO below.
// Indicates if default image is shown
var showingDefaultImage = true;
var $images = $("div#images");
var $defaultImage = $images.children("img#tacos");
// Display a default image
$defaultImage.show();
$("div#links > a").hover(
function() {
var ID = $(this).data("content");
var $image = $images.children("img#" + ID);
if (showingDefaultImage) {
showingDefaultImage = false;
if (!$image.is($defaultImage)) {
$defaultImage.hide();
}
}
$image.stop(true, true).fadeIn("slow");
}, function() {
$images.children().hide();
});​
DEMO - Showing a default image
The code in the above DEMO is also a little more optimized by caching the selectors.
would it be possible to leave up the most recent image from the last
hovered tag ?(instead of hiding the image and leaving a blank)
If I understood you correctly you don't want to hide the image when you leave menu with your mouse but instead want to leave the image of the menu you last hovered over visible.
To do that you remove the second function of the hover and as it is no longer needed you can now attach the mouseenter event instead.
var $images = $("div#images");
var $currentImage = $images.children("img#tacos");
$currentImage .show();
$("div#links > a").mouseenter(function() {
var ID = $(this).data("content");
var $image = $images.children("img#" + ID);
if (!$image.is($currentImage)) {
$currentImage.hide();
}
$currentImage = $image;
$image.stop(true, true).fadeIn("slow");
});
DEMO - Fading in images on mouseenter and leaving last image visible
The above code includes caching of selectors for optimisation and the logic to ensure no "flickering" occurs when the new hovered menu item is the same as the last one which was hovered.
See http://jsfiddle.net/7Wp9z/7/
As François Wahl said, use stop to stop the animations. But instead of using data-content and IDs, I think that you could use index:
HTML:
<div id="links">
Cheeseburger »
Tacos »
Salads »
Bread Sticks »
Dessert »
</div>
<div id="images">
<img src="http://media.smashingmagazine.com/wp-content/uploads/images/brand-ux/cb.jpg">
<img src="http://adventuresoflittlemiss.files.wordpress.com/2012/07/tacos.jpg">
<img src="http://www.growingappetite.com/wp-content/uploads/2011/05/chicken-salad1.jpg">
<img src="http://afflictor.com/wp-content/uploads/2010/10/breadsticks1.jpg">
<img src="http://1.bp.blogspot.com/-IaURSrV70LI/T4YzPubl9EI/AAAAAAAAGSg/AEdd-eLuJUk/s1600/Cooking+Weekly.jpg">
</div>
JavaScript:
$("div#links > a").hover(
function(){
$("#images>img")
.hide()
.stop(true,true)
.eq($(this).index()).fadeIn("slow");
},
function() {
$("#images>img").hide();
}
);
Have you tried not specifying which children should hide on the mouse-out portion?
$("div#links > a").hover(
function(){
var ID = $(this).data("content");
$("div#images").children("img#" + ID).fadeIn("slow");
},
function() {
$("div#images").children().hide();
}
);​
The glitch probably occurs because the image isn't loaded yet, you should look up some preloading technique. You will always have to wait for the relevant images to be loaded though before you can show them.
But you could enhance the user experience by either indicating that the images are getting loaded or by simply not activating the hovering effect until the images are loaded.
I'd probably go with the last case since I'm lazy but thats just me.
A simple preloading technique is to declare several id's with different background images and then changing the id dynamically using javascript and thus showing the image.
$("#id-of-element").attr('id','preloaded-bg-div');

Stuck: hide/show divs with next button, redirect last div

Here's what I have so far, which allows the user to click an image to open a new window and go to a location. When that click occurs, the image in the parent window is replaced with the next div.
Example: http://jsfiddle.net/rzTHw/
Here's the working code so far...
<div class = "box"><img src="http://placehold.it/300x150/cf5/&text=img+1"></div>
<div class = "box"><img src="http://placehold.it/300x150/f0f/&text=img+1"></div>
<div class = "box"><img src="http://placehold.it/300x150/fb1/&text=img+1"></div>
<div class = "box"><img src="http://placehold.it/300x150/444/&text=img+1"></div>​
Jquery:
$('.box').not(':first').hide();
$('.box a').click(
function(e){
e.preventDefault();
var newWin = window.open(this.href,'newWindow'),
that = $(this).closest('.box'),
duration = 1200;
if (that.next('.box').length){
that.fadeOut(duration,
function(){
that.next('.box').fadeIn(duration);
});
}
});
What I am having trouble with is:
Creating a "next" button so the user can cycle through to the next div without having the click the image, thus avoiding having to open a new window to get to the next image.
Having a click on the last div redirect the window location to a URL, while still doing the normal function of opening a new window to the a href location if the image is clicked. Otherwise if clicking the "next" button when the last div is shown, simply redirect the user.
What's the best way to go about this? Thanks!
Here is my attempt at tweaking your code to allow for a next button, and my best guess at what you want to happen for the last image:
var redirectUrl = 'http://www.google.com'; // replace in your code
function next(event, duration) {
duration = duration || 1200; // default value
var that = $('.box:visible');
if (that.next('.box').length) {
that.fadeOut(duration, function() {
that.next('.box').fadeIn(duration);
});
} else {
window.location.href = redirectUrl;
// the above line doesn't work inside jsFiddle, but should on your page
}
return false;
}
$('.box').not(':first').hide();
$('.box a').click(
function(e) {
e.preventDefault();
var newWin = window.open(this.href, 'newWindow'),
duration = 1200;
next(e, duration);
});
$('.next').click(next);
jsFiddle example here. Note the redirect is prevented in some browsers since it is running inside an iframe. But it should work in a normal page.
Perhaps look at a slideshow jquery plugin. JQuery Cycle being just one example. There are plenty. Just google jquery Slideshow or jquery cycle and pick the one that suites you best. The cycle plugin itself has a number of "pager" examples that let you change the contents of the displayed picture without leaving the page.
Most of them offer having the contents be html and not just a simple picture so you can play around with what exactly you want.
There's also Fancybox, lightbox, colorbox, etc. if that's what you're trying to accomplish.

jQuery blinking mouseOver issue

I have a image that has a caption displayed on it. The caption floats over the image and is displayed at the bottom.
I have a jQuery event that when you rollover the image, it displays the caption. Like so:
function showCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeIn('200');
}
And when you roll out:
function hideCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeOut('200');
}
However, when you rollover the caption, it thinks that you have rolled out of the image and fades out. Is there anyway to fix this?
Here's a link: Example
Thanks, Coulton
I took a look at your JS but I couldn't find what triggers the display of the caption - you should be binding the event to the parent div of the image, that way it won't fade out. If it is currently bound to just the image, that's your problem. P.S - it always helps to include a code example.
Here is a fiddle that shows an example of how you could do it. It simply calls stop on the caption element when the mouse enters that element:
$("#caption").mouseover(function() {
$(this).stop();
});
The stop function cancels any animation that is running on the selected element (in this case, the caption element).

Categories

Resources