Develop Reference

jQUery/JavaScriptHow --> to convert image SlideShow into Words Slideshow

How to convert THIS image slideshow --> https://jsfiddle.net/ukrkw4nb/19/ into TEXT slideshow so that list itemst (li's) show in loop the following 3 words: 1.Users, 2.Leads 3. Sales This is my attempt https://jsfiddle.net/ukrkw4nb/90/
Code below:
$(function() {
var slides = $('.slideShow>li');
var slideCount = 0;
var totalSlides = slides.length;
var slideCache = [];
(function preloader() {
if (slideCount < totalSlides){
slideCache[slideCount] = new Image();
slideCache[slideCount].src = slides.eq(slideCount).find('img').attr('src');
slideCache[slideCount].onload = function() {
slideCount++;
preloader();
}
} else {
// Run the slideshow
slideCount = 0;
SlideShow();
}
}());
function SlideShow() {
slides.eq(slideCount).fadeIn(1000).delay(2000).fadeOut(1000, function() {
slideCount < totalSlides - 1 ? slideCount ++ : slideCount = 0;
SlideShow();
});
}
});

I think I have it working the way you'd like.
I edited this a bit: my grasp of jQuery could be better and it threw me: the preloader function was to deal with using images, and is unnecessary for a text slideshow. Just write the html you want, remove the preloader function, and then call the SlideShow function.
$(function() {
var slides = $('.slideShow>li');
var slideCount = 0;
var totalSlides = slides.length;
var slideCache = [];
function SlideShow() {
slides.eq(slideCount).fadeIn(1000).delay(2000).fadeOut(1000, function() {
slideCount < totalSlides - 1 ? slideCount ++ : slideCount = 0;
SlideShow();
});
}
SlideShow();
});
* {
margin:0;
padding:0;
}
li {
display:none;
}
li:first-of-type {
display:block;
}
div {
position:absolute;
width:200px;
height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideShowContainer">
<ul class="slideShow">
<li>Users</li>
<li>Leads</li>
<li>Sales</li>
</ul>
</div>

How to add prev and next button in a JQuery slideshow code

I have jQuery code for a slideshow below. It works perfectly in the project I am working on right now. Although, I would like to implement a previous and next button in the same code if it's possible. Any help would be really appreciated.
<script type="text/javascript">
function() {
$(".slider #1").show("fade",500);
$(".slider #1").delay(5500).hide("slide",{direction:"left"},500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function(){
$(".slider #"+count).show("slide",{direction:"right"},500);
$(".slider #"+count).delay(5500).hide("slide",{direction:"left"},500);
if(count == sc){
count = 1;
}
else
{
count=count+1;
}
},6500);
}
</script>
<div class="slider">
<img id="1" src="images/slider/slide1.jpg" border="0" alt="primeira" />
<img id="2" src="images/slider/slide2.jpg" border="0" alt="segunda" />
<img id="3" src="images/slider/slide3.jpg" border="0" alt="terceira" />
</div>
<style>
.slider {
width: 800px;
height: 349px;
overflow:hidden;
margin: 30px auto;
background-image: url(images/slider/load.GIF);
background-repeat: no-repeat;
background-position: center;
}
.slider img {
width: 800px;
height: 349px;
display: none;
}
</stile>

You can do the following:
var sc;
var count = 1;
$(document).ready(function() {
sc = $(".slider img").size();
$(".slider #1").show("fade",500);
setInterval(function(){
switchPanel(1);
},5500);
$("#prev").click(function(){switchPanel(-1)});
$("#next").click(function(){switchPanel(1)});
});
function switchPanel(direction)
{
var hide, show;
if (direction == 1)
{
show = "right";
hide = "left";
}
else if (direction == -1)
{
show = "left";
hide = "right";
}
$(".slider #"+count).hide("slide",{direction:hide},500);
count = count + direction;
if(count == sc + 1) count = 1;
else if(count == 0) count = sc;
$(".slider #"+count).show("slide",{direction:show},500);
}
What's left for you is to add the previous (#prev) and next (#next) buttons.

This should be works.
$(".slider #1").show("fade",500);
$(".slider #1").delay(5500).hide("slide",{direction:"left"},500);
var sc = $(".slider img").size();
var count = 2;
var hideImage;
var slideshow;
var slideImage = function(isNext) {
var showDirection;
if (isNext){
showDirection = "right";
} else {
showDirection = "left";
}
$(".slider #"+count).show("slide",{direction:showDirection},500);
hideImage = setTimeout(function(){
$(".slider #"+count).hide("slide",{direction:"left"},500);
count = (count+1) > sc ? 1 : count+1;
}, 5500);
}
// Start the slideshow
slideshow = setInterval(function(){
slideImage(true);
},6500);
var manualSlide = function(isNext) {
// Stop the slideshow
clearTimeout(hideImage);
clearInterval(slideshow);
// Force hide current image
var hideDirection = isNext ? "left" : "right";
$(".slider #"+count).hide("slide",{direction:hideDirection},500);
if(isNext) {
count = (count+1) > sc ? 1 : count+1;
} else {
count = (count-1) == 0 ? sc : count-1;
}
setTimeout(function(){
slideImage(isNext);
// Start the slideshow again
slideshow = setInterval(function(){
slideImage(true);
},6500);
}, 1000);
}
$("#prev").on("click", function() { manualSlide(false); });
$("#next").on("click", function() { manualSlide(true); });
This is the result: FIDDLE
Note: I have to change delay into setTimeout because we can't cancel delay.

Horizontal scroll only if necessary

I'm having a horizontal scrolling page where arrows are indicated to scroll. I'm using the following code which works fine.
HTML:
<div id="container">
<div id="parent">
<div class="contentBlock">1</div>
<div class="contentBlock">2</div>
<div class="contentBlock">3</div>
<div class="contentBlock">4</div>
<div class="contentBlock">5</div>
</div>
<span id="panLeft" class="panner" data-scroll-modifier='-1'>Left</span>
<span id="panRight" class="panner" data-scroll-modifier='1'>Right</span>
CSS:
#container{
width:600px;
overflow-x:hidden;
}
#parent {
width:6000px;
}
.contentBlock {
font-size:10em;
text-align:center;
line-height:400px;
height:400px;
width:500px;
margin:10px;
border:1px solid black;
float:left;
}
.panner {
border:1px solid black;
display:block;
position:fixed;
width:50px;
height:50px;
top:45%;
}
.active {
color:red;
}
#panLeft {
left:0px;
}
#panRight {
right:0px;
}
Javascript:
(function () {
var scrollHandle = 0,
scrollStep = 5,
parent = $("#container");
//Start the scrolling process
$(".panner").on("mouseenter", function () {
var data = $(this).data('scrollModifier'),
direction = parseInt(data, 10);
$(this).addClass('active');
startScrolling(direction, scrollStep);
});
//Kill the scrolling
$(".panner").on("mouseleave", function () {
stopScrolling();
$(this).removeClass('active');
});
//Actual handling of the scrolling
function startScrolling(modifier, step) {
if (scrollHandle === 0) {
scrollHandle = setInterval(function () {
var newOffset = parent.scrollLeft() + (scrollStep * modifier);
parent.scrollLeft(newOffset);
}, 10);
}
}
function stopScrolling() {
clearInterval(scrollHandle);
scrollHandle = 0;
}
}());
You can also view the code in a WordPress-Installation right here: http://ustria-steila.ch/test
The arrows and the scroll works really well - but I have different sites with different amounts of text and images. So some pages need a horizontal scroll and some not. How can I add some kind of if-condition to display the arrows only if there is a horizontal overflow?

Your JavaScript code should go like this:
(function () {
var scrollHandle = 0,
scrollStep = 5,
parent = $("#container");
if(checkOverflow()){
$(".panner").show();
}
else
$(".panner").hide();
//Start the scrolling process
$(".panner").on("mouseenter", function () {
var data = $(this).data('scrollModifier'),
direction = parseInt(data, 10);
$(this).addClass('active');
startScrolling(direction, scrollStep);
});
//Kill the scrolling
$(".panner").on("mouseleave", function () {
stopScrolling();
$(this).removeClass('active');
});
//Actual handling of the scrolling
function startScrolling(modifier, step) {
if (scrollHandle === 0) {
scrollHandle = setInterval(function () {
var newOffset = parent.scrollLeft() + (scrollStep * modifier);
parent.scrollLeft(newOffset);
}, 10);
}
}
function stopScrolling() {
clearInterval(scrollHandle);
scrollHandle = 0;
}
function checkOverflow()
{
var el=document.getElementById('container');
var curOverflow = el.style.overflowX;
if ( !curOverflow || curOverflow === "visible" )
el.style.overflowX = "hidden";
var isOverflowing = el.clientWidth < el.scrollWidth;
el.style.overflowX = curOverflow;
return isOverflowing;
}
}());

jQuery window scroll turn back on after off

I have a script that changes the way my menu looks when you scroll past a certain point, to stop it repeating my animation over and over again I have put in a $(window).off("scroll"); so it only executes once. I need the menu to change back again when I scroll back past the same point again, but once I have turned off scroll, is there a way I can turn it back on at certain point?
This is what I have so far:
var Header = $('#header');
var Navbar = $('.navbar');
var links = $(".navbar ul.nav > li > a");
var HeaderH = Header.height();
var NavbarH = Navbar.height();
$(window).on("scroll", function(){
if ($(this).scrollTop() === (HeaderH + 64)) {
$(window).off("scroll");
Navbar.addClass('navbar-fixed-top')
links.css('padding', '10px 20px 10px 20px');
Header.css('margin-bottom', '64px');
$('.navbar-fixed-top').css('top', '-64px')
$('.navbar-fixed-top').animate({'top' : '0'}, 1000);
}
});

Just toggle a custom class :
var Header = $('#header');
var Navbar = $('.navbar');
var links = $(".navbar ul.nav > li > a");
var HeaderH = Header.height();
var NavbarH = Navbar.height();
$(window).on("scroll", function(){
if ($(this).scrollTop() >= (HeaderH + 64)) {
if (!Navbar.hasClass('myclass')) {
Navbar.addClass('navbar-fixed-top myclass')
$('.navbar-fixed-top').stop().animate({'top' : '0'}, 1000);
}
} else {
Navbar.removeClass('navbar-fixed-top myclass');
}
});
And CSS :
.myclass {
padding: 10px 20px;
margin-bottom: 64px;
top: -64px;
}

Losing hover when animating with jQuery (without moving mouse)

I have this row of thumbnails that I am animating with jQuery.
Each of these thumbnails has a hover and active class.
They work fine but when I animate the list, the new thumbnail under the mousecursor does not apply the hover? I have to move the mouse a little bit after each click?
It's kinda difficult to exaplain.. I have made a fiddle here: http://jsfiddle.net/nZGYA/
When you start clicking after thumb 3 without moving the mouse you see what I mean...
It works fine in FireFox, NOT Safari, Chrome, IE etc.
Is there something I can do about this?
For reference here is my code:
<style type="text/css">
.container { position: relative; overflow: hidden; width: 140px; height: 460px; float: left; margin-right: 100px; background: silver; }
ul { position: absolute; top: 10; list-style: none; margin: 10px; padding: 0; }
li { margin-bottom: 10px; width: 120px; height: 80px; background: gray; }
#list-2 li a { display: block; width: 120px; height: 80px; outline: none; }
#list-2 li a:hover { background: teal; }
#list-2 li a.active { background: navy; }
</style>
$(document).ready(function() {
var idx_2 = 0;
$('#list-2 li a')
.click(function() {
$('#list-2 > li a').removeClass('active');
$(this).addClass('active');
var id = $('#list-2 li a.active').data('index') - 2;
idy = Math.max(0, id * 90);
$(this).parent().parent().animate({ 'top' : -idy + 'px' });
return false;
})
.each(function() {
$(this).data('index', idx_2);
++idx_2;
});
});
<div class="container">
<ul id="list-2">
<li><a class="active" href="#"></a></li>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
</ul>
</div>

I only worked on the top list but I think I got it all working. let me know if it is what you are looking for.
Here is the fiddler
var idx = 0;
$('#list-1 li').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
}).click
(function() {
var currentindex = $('.active').index();
var selectedindex = $(this).index();
var nexthoverindex = selectedindex + (selectedindex - currentindex);
//counter for starting on index 1
if(currentindex === 1 && selectedindex > 2){
nexthoverindex = nexthoverindex - 1;
}
//counter for starting on index 0
if(currentindex === 0 && selectedindex > 2){
nexthoverindex = nexthoverindex - 2;
}
//make sure the selection never goes below 0
if(nexthoverindex < 0){
nexthoverindex = 0;
}
$('#list-1 > li').removeClass('active');
$(this).addClass('active');
var id = $('#list-1 li.active').data('index') - 2; // take scroll param and subtract 2 to keep selected image in the middle
idy = Math.max(0, id * 90);
$(this).parent().animate({
'top': -idy + 'px'
},200, function(){
$('.hover').removeClass('hover');
if(currentindex > 2 || selectedindex > 2){
$('#list-1 > li').eq(nexthoverindex).addClass('hover');
}
});
return false;
}).css('cursor', 'pointer').each(function() {
$(this).data('index', idx);
++idx;
});

I've got a solution that works in Chrome and IE (haven't tested in Safari). Basically I trigger the mouseover() event of the element under the mouse in the animate() callback event if the thumbnails have moved. The solution is only implemented for list-1.
// list 1
var idx = 0;
$('#list-1 li').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
}).click(function() {
$('#list-1 > li').removeClass('active');
var $active = $(this);
$active.addClass('active');
var id = $('#list-1 li.active').data('index') - 2; // take scroll param and subtract 2 to keep selected image in the middle
var moveAmount = 90;
idy = Math.max(0, id * moveAmount);
var oldPos = $active.parent().position().top;
$active.parent().animate({
'top': -idy + 'px'
}, function(){
var newPos = $(this).position().top;
// Check if we moved
if(oldPos - newPos != 0)
{
var movement = (oldPos - newPos) / moveAmount;
$($(this).children()[$active.index() + movement])
.trigger("mouseover");
}
});
return false;
}).css('cursor', 'pointer').each(function() {
$(this).data('index', idx);
++idx;
});
And here's the link to my fork in jsfiddle if you wan't to test it out over there - http://jsfiddle.net/jimmysv/3tzAt/15/