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

JQuery plugin not working when used multiple times in a page

I am trying to write a JQuery plugin called grid2carousel which takes some content in a Bootstrap-style grid on desktop devices and becomes a carousel on smaller screens.
The plugin works fine if it is the only instance of it on a page but runs into some problems if there are more than one. I have created a Codepen here to demonstrate the issue:
http://codepen.io/decodedcreative/pen/BzdBpb
Try commenting out one of the components in the HTML section of the codepen, resizing the browser til it becomes a carousel, and then repeating this process again with it uncommented
The plugin works by running an internal function called SetupPlugin every time the browser width is below a breakpoint specified in a data attribute in the HTML. If the browser width exceeds this breakpoint a function called DestroyPlugin reverts the HTML back to its original state. Like so:
checkDeviceState = function(){
if($(window).width()>breakpointValue){
destroyPlugin();
}else{
if(!$element.hasClass('loaded')){
setupPlugin();
}
}
},
Below is my plugin code in its entirety. Could someone give me a pointer as to what I'm doing wrong here?
(function (window, $){
$.grid2Carousel = function (node, options){
var
options = $.extend({slidesSelector: '.g2c-slides', buttonsSelector: '.g2c-controls .arrow'}, {},options),
$element = $(node),
elementHeight = 0,
$slides = $element.find(options.slidesSelector).children(),
$buttons = $element.find(options.buttonsSelector),
noOfItems = $element.children().length + 1,
breakpoint = $element.data("bp"),
breakpointValue = 0;
switch(breakpoint){
case "sm":
breakpointValue = 767;
break;
case "md":
breakpointValue = 991;
break;
case "lg":
breakpointValue = 1199;
break;
}
setupPlugin = function(){
// Add loaded CSS class to parent element which adds styles to turn grid layout into carousel layout
$element.addClass("loaded");
// Get the height of the tallest child element
elementHeight = getTallestInCollection($slides)
// As the carousel slides are stacked on top of each other with absolute positioning, the carousel doesn't have a height. Set its height using JS to the height of the tallest item;
$element.height(elementHeight);
// Add active class to the first slide
$slides.first().addClass('active');
$buttons.on("click", changeSlide);
},
destroyPlugin = function(){
$element.removeClass("loaded");
$element.height("auto");
$buttons.off("click");
$slides.removeClass("active");
},
checkDeviceState = function(){
if($(window).width()>breakpointValue){
destroyPlugin();
}else{
if(!$element.hasClass('loaded')){
setupPlugin();
}
}
},
changeSlide = function(){
var $activeSlide = $slides.filter(".active"),
$nextActive = null,
prevSlideNo = $activeSlide.prev().index() + 1,
nextSlideNo = $activeSlide.next().index() + 1;
if($(this).hasClass('left')){
if(prevSlideNo !== 0){
$nextActive = $activeSlide.prev();
$nextActive.addClass('active');
$slides.filter(".active").not($nextActive).removeClass("active");
}else{
$nextActive = $slides.last();
$nextActive.addClass('active');
$slides.filter(".active").not($nextActive).removeClass("active");
}
}else if($(this).hasClass('right')){
if(nextSlideNo !== 0){
$nextActive = $activeSlide.next();
$nextActive.addClass('active');
$slides.filter(".active").not($nextActive).removeClass("active");
}else{
$nextActive = $slides.first();
$nextActive.addClass('active');
$slides.filter(".active").not($nextActive).removeClass("active");
}
}
},
getTallestInCollection = function(collection){
$(collection).each(function(){
if($(this).outerHeight() > elementHeight){
elementHeight = $(this).outerHeight();
}
});
return elementHeight;
};
setupPlugin();
checkDeviceState();
$(window).on("resize", checkDeviceState);
}
$.fn.grid2Carousel = function (options) {
this.each( function (index, node) {
$.grid2Carousel(node, options)
});
return this
}
})(window, jQuery);
Many thanks,
James

Please check line #30 in your plugin code,it looks that you've just forget to add var keyword so instead of creating local variables to store functions setupPlugin, destoryPlugin and so on you've created global variables and then each new initialization of your plugin is rewriting this functions to point to a newly created slider.
setupPlugin = function(){
should be
var setupPlugin = function(){
Updated code here.

Affect a div when is out of view?

Is there a way to affect a div that is out of view? Ex: when you scroll down the page and the div is no longer visible.
I have an embedded youtube video and I would like to mute it only when the video is no longer in view.

This will mute every video player that is not visible:
$(function() {
var $w = $(window), oldw = 0, oldh = 0, oldt = 0;
function checkVideoVisible() {
if (oldw !== $w.width() || oldh !== $w.height() ||
oldt !== $w.scrollTop()) {
oldw = $w.width();
oldh = $w.height();
oldt = $w.scrollTop();
var top = oldt, bottom = oldt + oldh;
$("video").each(function() {
var $this = $(this);
if ($this.offset().top + $this.height() >= top &&
$this.offset().top < bottom) {
$this.prop("muted", false);
} else {
$this.prop("muted", true);
}
});
}
}
Now to trigger the checking, you can either use a timer:
var timerId = setInterval(checkVideoVisible, 200);
}
Or handle the scroll event:
$w.on("scroll", checkVideoVisible);
}
In the latter case, you will also need to perform a check when any change is made to the dom.

Use this as its probably your best bet im guessing as you;ve posted no code that a pre-written lib will help you
JQ Visible Lib
To implement you need to give your element an id and reference it in script tags or in a js file like this:
$('#element').visible() will return true if visible.
You can then add the part to mute/pause the video based on that state.

Animating a view change in iPhone and Android

Im trying to make a "UINavigationController type animation" in a Titanium project, however currently when I do the animation it does sort of a "pop back" animation where the view "comes out" of where the other one "went to". I have managed to figure out what's the value that determines where the animation ends, that is, the left property of the animation, but how do I set where the animation starts?
code to control animation:
function hideOldWindow() {
window.animate(animateOut, function(){});
}
function showNewWindow() {
var old = views[currentView];
window.remove(old);
currentView = (currentView + 1) % views.length;
var win = views[currentView];
viewControllers[currentView].onBecomeVisible();
window.add(win);
window.animate(animateIn, function(){});
}
var animateIn = Titanium.UI.createAnimation();
animateIn.left = 0;
animateIn.duration = 250;
animateIn.curve = Ti.UI.ANIMATION_CURVE_EASE_OUT;
var animateOut = Titanium.UI.createAnimation();
animateOut.left = -screenWidth + 1;
animateOut.duration = 250;
animateOut.curve = Ti.UI.ANIMATION_CURVE_EASE_OUT;

I don't know how is UINavigationController type animation, but to control where the animation starts, you have to set the left property of the view (this works for views I didn't try it on windows).
For example, to animate a view to appear, from left of the screen to the center, you can change the showNewWindow method to this:
function showNewWindow() {
var old = views[currentView];
window.remove(old);
currentView = (currentView + 1) % views.length;
var win = views[currentView];
viewControllers[currentView].onBecomeVisible();
window.add(win);
// NEW LINE
window.left = -screenWidth + 1;
window.animate(animateIn, function(){});
}
Now, window would appear from -screenWidth + 1 to left = 0.
Maybe you have to add a timeout before you animate the window to get it works.
Hope it helps

jQuery reload function

Here's what I'm trying to achieve:
Scrolling marquee content (with flexible length) makes a complete journey from right to left of the screen
Once it has disappeared off the screen, bring up some generic messages
In the background during generic messages, check for any new scrolling content and load it
Only when the generic messages have finished displaying, start scrolling again (if there is new content), otherwise repeat the generic messages
http://jsfiddle.net/Vbmm5/
(function($) {
$.fn.marquee = function(options) {
return this.each(function() {
var o = $.extend({}, $.fn.marquee.defaults, options),
$this = $(this),
$marqueeWrapper,
containerWidth,
animationCss,
elWidth;
o = $.extend({}, o, $this.data());
o.gap = o.duplicated ? o.gap : 0;
$this.wrapInner('<div class="js-marquee"></div>');
var $el = $this.find('.js-marquee').css({
'margin-right': o.gap,
'float':'left'
});
if(o.duplicated) {
$el.clone().appendTo($this);
}
$this.wrapInner('<div style="width:100000px" class="js-marquee-wrapper"></div>');
elWidth = $this.find('.js-marquee:first').width() + o.gap;
$marqueeWrapper = $this.find('.js-marquee-wrapper');
containerWidth = $this.width();
o.speed = ((parseInt(elWidth,10) + parseInt(containerWidth,10)) / parseInt(containerWidth,10)) * o.speed;
var animate = function() {
if(!o.duplicated) {
$marqueeWrapper.css('margin-left', o.direction == 'left' ? containerWidth : '-' + elWidth + 'px');
animationCss = { 'margin-left': o.direction == 'left' ? '-' + elWidth + 'px' : containerWidth };
}
else {
$marqueeWrapper.css('margin-left', o.direction == 'left' ? 0 : '-' + elWidth + 'px');
animationCss = { 'margin-left': o.direction == 'left' ? '-' + elWidth + 'px' : 0 };
}
$marqueeWrapper.animate(animationCss, o.speed , 'linear', function(){
getUpdates();
});
};
setTimeout(animate, o.delayBeforeStart);
});
};
})(jQuery);
$(function(){
$('#scrollerContent').marquee({
speed: 3000,
gap: 50,
delayBeforeStart: 0,
direction: 'right',
duplicated: false,
pauseOnHover: false,
});
});
function getUpdates()
{
alert("Hello"); // This is where the jQuery get function would be to update the text
alert("Show Details"); // This is where the generic details would be displayed
marquee();
}
The problem is the scrolling element requires a width, which obviously changes with every new 'load' of messages. I tried putting the getUpdates() function inside the main jQuery function, which does work almost perfectly but doesn't update the containerWidth variable, so messages longer than the original start half-way through, and shorter messages take ages to appear.
What I need is for the whole of the function to be re-run, including the re-setting of the width after the #scrollerText paragraph has been changed.
How do I do this?

If you had used console.log() instead of alert() you would have had the console open and seen
Uncaught ReferenceError: marquee is not defined
In getUpdates() you're calling a function marquee(); that does not exist. The script terminates there.
Go back a few steps (undoing what you've removed) and where the code triggers the animation, add the code to update the text before that, or if you're getting data you need to wrap that bit of code.
So, if you were getting data from the server, theurl.php would return text new text and nothing else. Move the code that triggers the animation to go again within the $.get callback function.
http://jsfiddle.net/Vbmm5/4/
$marqueeWrapper.animate(animationCss, o.speed , 'linear', function(){
// clear the text to prevent it from hanging at the end of the
// marquee while the script gets new data from the server
$this.find('#scrollerText').text('');
// get new text
$.get('theurl.php', function(response){
$this.find('#scrollerText').text(response);
// update the width
elWidth = $this.find('.js-marquee:first').width();
//fire event
$this.trigger('finished');
//animate again
if(o.pauseOnCycle) {
setTimeout(animate, o.delayBeforeStart);
}
else {
animate();
}
});
});
(the URL and post data in the example on jsfiddle is jsfiddle's way of returning html)
I've used $this.find('#scrollerText').text(response); even though there should be only one id and $('#scrollerText').text(response); would be fine. If you were to have multiple marquees you would target each marquee's text using $this.find, so if you want more than one use classes instead $this.find('.scrollerText').text(response);