We Keep Coding

Javascript Slideshow slides overlapping when auto play

I was making this automatic slideshow and it got this issue. I got 4 slides. When autoplay the first time it's overlapping the slide 4 with slide 2 and 3, it's only happen one time after site load. when the slideshow goes for the second time and when I use the dots in the bottom it's working perfectly fine without any issues.
$(document).ready(function(){
$("#slideshow > div:gt(0)").hide();
var slidesl = $('.slideitem').length
var d = "<li class=\"dot active-dot\">•</li>";
for (var i = 1; i < slidesl; i++) {
d = d+"<li class=\"dot\">•</li>";
}
var dots = "<ul class=\"slider-dots\">" + d + "</ul\>";
$("#slideshow").append(dots);
$("#slideshow > div:gt(0)").hide();
var interval = setInterval(slide, 3000);
function intslide(func) {
if (func == 'start') {
interval = setInterval(slide, 3000);
} else {
clearInterval(interval);
}
}
function slide() {
sact('next',0, 1200);
}
function sact(a, ix, it) {
var currentSlide = $('.current');
var nextSlide = currentSlide.next('.slideitem');
var prevSlide = currentSlide.prev('.slideitem');
var reqSlide = $('.slideitem').eq(ix);
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
var prevDot = currentDot.prev();
var reqDot = $('.dot').eq(ix);
if (nextSlide.length == 0) {
nextDot = $('.dot').first();
nextSlide = $('.slideitem').first();
}
if (prevSlide.length == 0) {
prevDot = $('.dot').last();
prevSlide = $('.slideitem').last();
}
if (a == 'next') {
var Slide = nextSlide;
var Dot = nextDot;
}
else if (a == 'prev') {
var Slide = prevSlide;
var Dot = prevDot;
}
else {
var Slide = reqSlide;
var Dot = reqDot;
}
currentSlide.fadeOut(it).removeClass('current');
Slide.fadeIn(it).addClass('current');
currentDot.removeClass('active-dot');
Dot.addClass('active-dot');
}
$('.next').on('click', function(){
intslide('stop');
sact('next', 0, 400);
intslide('start');
});//next
$('.prev').on('click', function(){
intslide('stop');
sact('prev', 0, 400);
intslide('start');
});//prev
$('.dot').on('click', function(){
intslide('stop');
var index = $(this).index();
sact('dot', index, 400);
intslide('start');
});//prev
//slideshow
});
Here is the fiddle - https://jsfiddle.net/Udara_Samapth/c1zevrLj/23/

There are multiple things I noticed which are making your slides overlapping. Looking at your jquery/JS in a first place you are using jquery hide method but inside function sact() you are using fadeIn() and fadeOut() functions which adds opacity classes.
currentSlide.fadeOut(it).removeClass('current');
Slide.fadeIn(it).addClass('current');
That makes top and bottom items to start mixing at some point of opacity.
To handle this there are two solutions in my mind right now.
The easiest one is to add background color to item.
.slideshow .slideitem {
display: none;
background: #FFF;
}
Another effort is to control opacity timings which needs some work on your JS portion. you can do that by adding delay on fadeIn() and fadeOut() functions.
Here is the working link for you.
https://jsfiddle.net/liquidcharcoal/gqyjph1a/13/

Wordpress: Homepage js is conflicting with js of plugin of portfolio page

I've downloaded Awesome Filterable Portfolio plugin , It was working fine.. but when I added a js file for scrolling carousel on home page, The js of that plugin stoped working..
I've added my cr-scroll.js file in functions.php as given below:
wp_register_script('java1', get_template_directory_uri() . '/js/cr-scroll.js', array( 'jquery' ));
wp_enqueue_script( 'java1' );
What I've Tried:
$.noConflict();
Replaced $ with jquery
Wrap the code in
(function($){
$(document).ready(function(){
});
})(jQuery);
but nothing worked.
My js file is cr-scroll.js:
(function($){
$(document).ready(function($) {
$.fn.make_carousel = function() {
var speed = 0;
var scroll = 0;
var con = $(this);
var con_w = con.width();
var max_scroll = con[0].scrollWidth - con.outerWidth();
var prev_frame = new Date().getTime();
con.on('mousemove', function(e) {
var mouse_x = e.pageX - con.offset().left;
var mouseperc = 100 * mouse_x / con_w;
speed = mouseperc - 50;
}).on ( 'mouseleave', function() {
speed = 0;});
function updatescroll() {
var cur_frame = new Date().getTime();
var time_elapsed = cur_frame - prev_frame;
prev_frame = cur_frame;
if (speed !== 0) {
scroll += speed * time_elapsed / 50;
if (scroll < 0) scroll = 0;
if (scroll > max_scroll) scroll = max_scroll;
con.scrollLeft(scroll);
}
window.requestAnimationFrame(updatescroll);
}
window.requestAnimationFrame(updatescroll);
}
$("#carousel1").make_carousel();
$("#carousel2").make_carousel();
function reset(){
$('.maincontent').find('*').removeAttr('class');
document.getElementById('step1').setAttribute("class", "visible");
}
function back(){
var previous_class = $('.visible').data('previous');
if(previous_class != ''){
var current_class = $('.visible').attr('id');
document.getElementById(current_class).setAttribute("class","");
document.getElementById(previous_class).setAttribute("class","visible");
}
}
function show_next(current,next) {
document.getElementById(current).setAttribute("class", "hidden");
document.getElementById(next).setAttribute("class", "visible");
}
function show_hide(show_ele,hide_ele) {
document.getElementById(show_ele).style.display = "block";
document.getElementById(hide_ele).style.display = "none";
}
function load_after_sec(id) {
count = 0;
wordsArray = ["5", "4", "3", "2", "1"];
var timerID = setInterval(function () {
count++;
if(count == 5){
$("#"+id).show();
$("#seconds_counter").hide();
clearInterval(timerID);
} else {
$("#num_sec").fadeOut(400, function () {
$(this).text(wordsArray[count % wordsArray.length]).fadeIn(400);
});
}
}, 2000);
}
function showButton(){
document.getElementById("btn_repeat").style.display='block';
}
});
})(jQuery);
In home page go to portfolio section, it is scrolling because of js, and after clicking on visit portfolio button, you'll be redirected to portfolio page and the filters of portfolio is not clickable and changeable because of js confliction.
The console gives an error for that cr-scroll.js file that con[0] is undefined.
If I remove this file then plugin works fine, why it is conflicting?
Any help will be appreciated, Thank you in advance.

Unable to combine functions in to one file

I have two functions, one to show a gallery of images and one for a smooth scroll up icon. The problem is when I use them separately, both of them works. But when I put them in the same file only the first one works. I can t figure out the problem. I am using jquery-2.0.3
Here is my Code:
$(function() {
$('.demo li').picEyes();
// Caching the Scroll Top Element
// console.log("function move to top");
var ScrollButton = $("#scroll");
$(window).scroll(function() {
// console.log($(this).scrollTop());
if ($(this).scrollTop() >= 50) {
ScrollButton.show()
} else {
ScrollButton.hide();
}
});
// Click On Button To Scroll To Top Of The Page
ScrollButton.click(function() {
$("html,body").animate({
scrollTop: 0
}, 800);
});
});
the code of picEyes function:
(function($){
$.fn.picEyes = function(){
var $obj = this;
var num,zg = $obj.length - 1;
var win_w = $(window).width();
var win_h = $(window).height();
var eyeHtml = '<div class="picshade"></div>'
+'<a class="pictures_eyes_close" href="javascript:;"></a>'
+'<div class="pictures_eyes">'
+'<div class="pictures_eyes_in">'
+'<img src="" />'
+'<div class="next"></div>'
+'<div class="prev"></div>'
+'</div>'
+'</div>'
+'<div class="pictures_eyes_indicators"></div>';
$('body').append(eyeHtml);
$obj.click(function() {
$(".picshade").css("height", win_h);
var n = $(this).find("img").attr('src');
$(".pictures_eyes img").attr("src", n);
num = $obj.index(this);
popwin($('.pictures_eyes'));
});
$(".pictures_eyes_close,.picshade,.pictures_eyes").click(function() {
$(".picshade,.pictures_eyes,.pictures_eyes_close,.pictures_eyes_indicators").fadeOut();
$('body').css({'overflow':'auto'});
});
$('.pictures_eyes img').click(function(e){
stopPropagation(e);
});
$(".next").click(function(e){
if(num < zg){
num++;
}else{
num = 0;
}
var xx = $obj.eq(num).find('img').attr("src");
$(".pictures_eyes img").attr("src", xx);
stopPropagation(e);
popwin($('.pictures_eyes'));
});
$(".prev").click(function(e){
if(num > 0){
num--;
}else{
num = zg;
}
var xx = $obj.eq(num).find('img').attr("src");
$(".pictures_eyes img").attr("src", xx);
stopPropagation(e);
popwin($('.pictures_eyes'));
});
function popwin(obj){
$('body').css({'overflow':'hidden'});
var Pwidth = obj.width();
var Pheight = obj.height();
obj.css({left:(win_w - Pwidth)/2,top:(win_h - Pheight)/2}).show();
$('.picshade,.pictures_eyes_close').fadeIn();
indicatorsList();
}
function updatePlace(obj){
var Pwidth = obj.width();
var Pheight = obj.height();
obj.css({left:(win_w - Pwidth)/2,top:(win_h - Pheight)/2});
}
function indicatorsList(){
var indHtml = '';
$obj.each(function(){
var img = $(this).find('img').attr('src');
indHtml +='<img src="'+img+'"/>';
});
$('.pictures_eyes_indicators').html(indHtml).fadeIn();
$('.pictures_eyes_indicators a').eq(num).addClass('current').siblings().removeClass('current');
$('.pictures_eyes_indicators a').click(function(){
$(this).addClass('current').siblings().removeClass('current');
var xx = $(this).find('img').attr("src");
$(".pictures_eyes img").attr("src", xx);
updatePlace($('.pictures_eyes'));
});
}
function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}
}
})(jQuery);

You should add click event handler, when DOM will be ready, do like this:-
$(function () {
$('.demo li').picEyes();
// Caching the Scroll Top Element
// console.log("function move to top");
//var ScrollButton =ScrollButton.click
var ScrollButton = $("#scroll")
$(window).scroll(function () {
// console.log($(this).scrollTop());
if ($(this).scrollTop() >= 50) {
ScrollButton.show()
} else {
ScrollButton.hide();
}
});
// Click On Button To Scroll To Top Of The Page
ScrollButton.click(function () {
$("html,body").animate({
scrollTop: 0
}, 800);
});
});

I bet both scripts have own ScrollButton element, and while gallery is loaded it owerwrites behaviour of other ScrollButton element.

I put the call of picEyes function outside of the main function and somehow worked !

jQuery slider doesn't rotate

I have a slider rotator on my site but it doesn't rotate items automatically in the boxes - navigation works and rotate but I want it to rotate automatically, right after I enter the site.
This is my js:
$(document).ready(function() {
var nbr = 0;
$('.slider').each(function() {
var slider = $(this);
//get width and height of the wrapper and give it to the UL
var wrapperwidth = $(slider).width() * $(slider).find('ul > li').size();
$(slider).find('ul').css('width', wrapperwidth);
var wrapperheight = $(slider).height();
$(slider).find('ul').css('height', wrapperheight);
//set my li width
var width = $(slider).width();
$(slider).find('ul li').css('width', width);
//set my counter vars
var counter = $(slider).find('ul > li').size();
var decount = 1;
var autocount = 1;
if (counter > 1) {
//create my number navigation
var createNum = 1;
$(slider).after('<ul class="numbers"><li></li></ul>');
var numbers = $(slider).parent().find('.numbers');
$(numbers).find('li:first-child').html(createNum+'_'+nbr).addClass('activenum').attr('id', 'id1_'+nbr);
while ( createNum != counter) {
createNum++;
$(numbers).append("<li id='id"+createNum+"_"+nbr+"'>"+createNum+"_"+nbr+"</li>");
}
//get my number-width (number navigation should always be centered)
var numwidth = $(slider).find('.numbers li:first-child').width() * $(slider).find('.numbers li').size();
$(slider).find('.numbers').css('width', numwidth);
}
nbr++;
});
//make the number clickable
$(".numbers li").click(function() {
var slider = $(this).closest('.sliderWrapper');
var slider0 = $(slider).find('.slider');
var clickednum = $(this).html().split('_')[0] * - $(slider0).width() + $(slider0).width();
$(slider0).find('ul').animate({ left: clickednum }, 400, 'swing', function() { });
$(slider).find('.activenum').removeClass('activenum');
$(this).addClass('activenum');
decount = $(this).html();
});
rotateSwitch = function(sliderW, speed) {
var sliderWrap = sliderW;
play = setInterval(function() {
var nextNum = parseInt($($(sliderWrap).find(".numbers li.activenum")).html().split('_')[0])+1;
if (nextNum > $(sliderWrap).find(".numbers li").length) {
nextNum = 1;
}
//console.log("nextnum: "+nextNum+", numbers length: "+$(sliderWrap).find(".numbers li").length);
$(sliderWrap).find(".numbers li").each(function() {
if( parseInt($(this).html().split('_')[0]) == nextNum )
$(this).click();
});
}, speed);
};
makeAutoSlide = function(sliderWrap, speed) {
if ($(sliderWrap).length > 0 && $(sliderWrap).find(".numbers li").length > 1) {
rotateSwitch(sliderWrap, speed);
$(sliderWrap).find(".slider li").hover(function() {
if ($(sliderWrap).find(".numbers li").length > 1) {
clearInterval(play); //Stop the rotation
}
}, function() {
if ($(sliderWrap).find(".numbers li").length > 1) {
rotateSwitch(sliderWrap, speed); //Resume rotation timer
}
});
}
};
});
I'm not really sure if this is a problem with setInterval and clearInterval or I wrote something wrong.
I put code in jsFiddle, so you know how the structure looks like.
http://jsfiddle.net/gecbjerd/1/
I appreciate for help.
Cheers

jquery code does not work fine with differents urls

I have this jquery code:
$(function(){
var $win = $(window);
var $nav = $('.subnav');
var navTop = $('.subnav').length && $('.subnav').offset().top - 38;
var isFixed = 0;
processScroll();
$win.on('scroll', processScroll);
function processScroll() {
console.log('test');
var i, scrollTop = $win.scrollTop();
if (scrollTop >= navTop && !isFixed) {
isFixed = 1;
$nav.addClass('subnav-fixed');
} else if (scrollTop <= navTop && isFixed) {
isFixed = 0;
$nav.removeClass('subnav-fixed');
}
};
})
If I have this url for example:
http://mydomain.com/posts or http://mydomain.com or http://mydomain.com/post?utf8=✓&search=
the code does works fine, but if I have for example:
http://mydomain.com/post?utf8=✓&search=port or http://mydomain.com/post?utf8=✓&search=word
The code does not works fine...
Why if I pass a param for url with my search engine the code does not works fine?
Thank you very much!
Edited
I am using this sunspot solr for my as search engine
http://sunspot.github.com/

I found the fix in this question:
Replicating Bootstraps main nav and subnav
This is the code:
$(document).scroll(function(){
// If has not activated (has no attribute "data-top"
if (!$('.subnav').attr('data-top')) {
// If already fixed, then do nothing
if ($('.subnav').hasClass('subnav-fixed')) return;
// Remember top position
var offset = $('.subnav').offset()
$('.subnav').attr('data-top', offset.top);
}
if ($('.subnav').attr('data-top') - $('.subnav').outerHeight() <= $(this).scrollTop())
$('.subnav').addClass('subnav-fixed');
else
$('.subnav').removeClass('subnav-fixed');
});
Thank you