Develop Reference

Javascript slider shows white screens

Hi i'm building a javascript slider for my portfolio with Javascript. The slides work properly but when i add a fading transition i keep getting a white flash between the 2 slides. Anyone knows how to create a smooth fade between them?
I added a JSfiddle down below.
Here's my javascript:
$(function () {
var theInterval; // Slide speed
var images = new Array();
var counter = 1;
var defaultSettings = {
"sliderContainer": "#slider" // SliderContainer
, "pauseWithMouse": true // Turn on/off pause with mouse
, "sliderSpeed": 3000 // Slide speed
, "transitionSpeed": 200 // transition speed
};
// intialize slider
// if myImages exists then
images = myImages;
if (images.length > 0) {
$(defaultSettings.sliderContainer).append('<img id="sliderImg" width="900" src="' + images[0] + '" />');
startSlide(images);
}
function cycleImages(images) {
if (counter >= images.length) {
counter = 0;
}
console.log(counter);
document.getElementById("sliderImg").src = images[counter];
counter++;
var images = $('#sliderImg')
var now = images.filter(':visible')
var next = now.next().length ? now.next() : images.first()
var speed = defaultSettings.transitionSpeed; //Transition speed
now.fadeOut(speed);
next.fadeIn(speed);
}
function startSlide() {
console.log('start');
theInterval = setInterval(function () {
cycleImages(images);
}, defaultSettings.sliderSpeed);
// Set interval time
};
var stopSlide = function () { // Stop slides on hover
console.log('stop');
if (defaultSettings.pauseWithMouse) {
clearInterval(theInterval);
}
};
$('#sliderImg').on('mouseover', function () { // Stop slides on mouseover
stopSlide();
});
$('#sliderImg').on('mouseout', function () { // Continue with slides on mouseout
startSlide();
});
});
The JS Fiddle Link

This is happening because there is no background while the fade in occurs. The easiest way to fix this is to add a z-index property to the image or the slide.
For example give the first image an z-index of 1 and the second one a z-index of 2
Here is the code that you should implement:
var subs = $(this).find('#sliderImg');
var index = subs.eq(0).css('z-index');
subs.gt(0).each(function() {
$(this).css('z-index', ++index);
});
The idea is to access each element of the array via the tag you provided #sliderImg and using the jQuery method each to increase the z-index css property with 1.
Here is a working fiddle: Working Fiddle

How to Delay The First FadeIn Event On Slider

I am currently modifying this piece of code as apart of a project, it works fine for what I need it to do, however I want a relatively short transition period,but the initial div element only display for a brief moment and the fade process starts.
I was wondering if anyone could help me to correct this. Ideally I would like to set the initial slider timeframe or delay it from triggering the process,
var divs = $('.fade');
function fade() {
var current = $('.current');
var currentIndex = divs.index(current),
nextIndex = currentIndex + 1;
if (nextIndex >= divs.length) {
nextIndex = 0;
}
var next = divs.eq(nextIndex);
current.stop().fadeOut(500, function() {
$(this).removeClass('current');
setTimeout(fade, 5000);
});
next.stop().fadeIn(500, function() {
$(this).addClass('current');
});
}
fade();

To delay the function fade() from starting right away just do:
var divs = $('.fade');
function fade() {
....
}
setTimeout(fade, 5000); //here is the only change
At the end of your code fade() is executed right away. Just add a timeout to it. 5000 is in milliseconds, just switch that to the delay time you want.
Apart from your question, if you wanted to apply the fade function to objects only after you clicked them, you could do this.
$('.fade').on('click',function(){//instead of click you could use any event ex. mouseover
fade();//call fade function
});

jQuery Slideshow Using Timer Plugin - How to Change Slide?

I'm making a jQuery slider (so cliche), and I'm having an issue getting the slide to change when you click one of the bullets in the controls. Other than that, it's fully functional. I found the jQuery timer plugin and swapped it out with the 'setInterval()' function I was using.
So, problem, I can't seem to figure out how to get the slide to change when you click on a bullet in the controls... I tried passing the clicked bullet value (slide#) to the timer function and that didn't work (the way I did it). I don't know much about methods or jQuery plugin formats, so this has proven difficult for me.
And the link on my server (working): http://www.horsepowerfreaks.com/plugins/responsiveSlider/demo.html
Here is the jsFiddle (not working for some reason...): http://jsfiddle.net/derekfoulk/yUqKJ/
Files:
Slider plugin (where the issue is)
http://www.horsepowerfreaks.com/plugins/responsiveSlider/rSlider.jquery.js
Stylesheet
http://www.horsepowerfreaks.com/plugins/responsiveSlider/style.css
Plugin Documentation/Demo:
https://github.com/jchavannes/jquery-timer
http://jchavannes.com/jquery-timer/demo
A portion of my attempt:
/* Bullets - Here is my problem. This is not working the way I need it to.
Basically, when the user clicks a bullet, the slider should make the referenced
slide active and then reset the timer */
else if (action === "bullet"){
// If user clicks on active bullet
if ($(this).hasClass("active")){
// Play/Pause (timer)
Slider.toggleGallery();
}
else {
/* Change slide (by referencing the 'data-slide' attribute of the bullet,
then find the slide using that same value for its 'data-slide' attribute
and make it the active slide and reset the timer */
imageId = $(this).attr("data-slide");
$(".active",$controls).removeClass("active");
$(this).addClass("active");
Slider.changeSlide(imageId);
}
}
...Further down the file...
Slider = new (function() {
var $galleryImages,
$timeRemaining,
incrementTime = options.pause,
/* I am pretty sure this function needs to be fed the slide number that was selected
when the user clicks a bullet. If it is the first run through, then the value of
'imageId' should be '-1'. I would rather have the imageId value be set to '1'
initially, but the configuration below is what worked for me... If I set the imageId
to '0', numSlides to '$galleryImages.length' and the imageId inside the if statement
to 0, then I get slide 2 for imageId 1, slide 3 for imageId 2, slide 4 for imageId 3,
and slide 1 for imageId 4? If there is a way to have the active image (imageId)
iterate '1,2,3,4' instead of '0,1,2,3' that would be awesome. */
imageId = -1, // Which image is being shown
updateTimer = function() {
$galleryImages.eq(imageId).stop(true,true).removeClass("active");
imageId++;
console.log(imageId);
var numSlides = $galleryImages.length - 1;
if (imageId >= numSlides) {
imageId = -1;
}
$galleryImages.eq(imageId).stop(true,false).addClass("active");
},
init = function() {
$galleryImages = $(".slider").find('li');
Slider.Timer = $.timer(updateTimer, incrementTime, true).once();
};
this.toggleGallery = function() {
if (this.Timer.isActive) {
this.Timer.pause();
var remaining = this.Timer.remaining / 1000;
}
else {
this.Timer.play();
}
};
$(init);
});

In Responsive Web Design, how can I use Javascript or jQuery to stop a function and reset when the users downsizes their window?

I have a responsive layout and I've created a fading panels animated element with jQuery. I set the jQuery function to only activate if the user is above a certain screen size. However, if I scale the window down, the function still runs.
Here's what I'd like to achieve:
When the user scrolls bellow a browser width of 1440px, stop that fading panels animation.
Once the animation is stopped, I want to reset the area to display the 1st panel.
If the user scrolls back up above that screen size, start the animation again.
Here is my code, thanks in advance for your time:
// Get the viewport size!
var viewport = $(document).width();
if (viewport >= 1140) {
var InfiniteRotator =
{
init: function()
{
// hard set height of container
$('#circles').height('286.717px');
// initial fade-in time
var initialInterval = 3000;
// interval between items
var itemInterval = 5000;
// cross-fade time
var fadeTime = 2000;
// count number of items
var numberOfItem = $('.rotating-item').length;
// set current item
var currentItem = 0;
// create loop
var infiniteLoop = setInterval(function() {
// initial fade out
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
// set counter
if (currentItem == numberOfItem -1) {
currentItem = 0;
} else {
currentItem++;
}
// next item fade in
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
}
// go Go GO!
InfiniteRotator.init();
}
Please note: I used this great tutorial to create the fading panels: http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/

window.onresize = function() {
clearInterval(infiniteLoop)
}
Note that you must still be in your init function in order to get the infiniteLoop variable.

You can use
window.onresize = function(){ ... }

$(window).resize(function() {
//stop and reset animation in here.
});

Javascript Conflict with 2 scripts - Need Help!

If someone could help with a jscript issue I'd be very grateful! I have two scripts for different sections of the page which I'm placing in the head, but are in conflict on the same page and just can't seem to get them to work together. Both are as follows:
<script type="text/javascript">
jQuery.noConflict();
function updatesubcat() {
$category = $('topcat').options[$('topcat').selectedIndex].value;
if ($category.match(' redir')) {
jQuery('#subcategory').html('');
window.location.href='/<%=server.HTMLEncode(Session("PublicFranchiseName"))%>/' + $category.replace(' redir','') + '.html';
} {
PagetoDiv("/ajax/home_subcategory.asp?c="+$category,"subcategory");
}
}
</script>
**AND:**
<script type="text/javascript">
$(document).ready(function() {
//Execute the slideShow, set 4 seconds for each images
slideShow(4000);
});
function slideShow(speed) {
//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');
//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});
//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));
//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});
//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);
//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
//Hide the caption first, and then set and display the caption
$('#slideshow-caption').slideToggle(300, function () {
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').slideToggle(500);
});
//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
</script>
This editor is not allowing the script tags - but they are placed obviously at the top and bottom of each script
Any help much appreciated!
Thanks,

If you use jQuery.noConflict(); (as i know) You must use jQuery() instead of $()
or
jQuery(document).ready(function($) {
$(selectors).actions
}

The $ is a variable that references the jQuery object. I'm guessing the other scripts on the page also use the $ for a variable and this is causing the problem. You'll want to use the jQuery.noConflict() method, but you must assign it to a variable that you'll replace in your code.
var jq = jQuery.noConflict();
This will change your usage from:
$category = $('topcat').options[$('topcat').selectedIndex].value;
to something like this:
$category = jq('topcat').options[$('topcat').selectedIndex].value;
You don't have to use jq like I did, any variable should do the trick. Hope this helps.