issue creating sliders with jQuery - javascript

I'm currently working through this tutorial from helpingdev, but have come up against a brick wall - I've followed every step so far as i can tell and have the interface working - however when i run the page the image doesn't change, it simply stays on the first one.
the video is over three years old, so I'm guessing something in the syntax just need's to be changed - i just can't figure out what even with chrome dev tools.
Thanks for your help.
Here's the html, css, and js for the page:
html:
<!DOCTYPE>
<html>
<head>
<title>Slider example.</title>
<link rel="stylesheet" href="../css/slider.css">
</head>
<body>
<div class="wrapper">
<div id="slider">
<img id="1" src="../images/tromso.jpg">
<img id="2" src="../images/fjord.jpg">
<img id="3" src="../images/tromso_aerial.jpg">
<img id="4" src="../images/sognefjord.jpg">
</div>
Previous
Next
</div>
<script src="../js/jquery.js"></script>
<script src="../js/slider.js"></script>
</body>
</html>
css:
.wrapper {
width: 600px;
margin: 0 auto;
}
#slider {
width: 600px;
height: 400px;
overflow: hidden;
margin: 30px auto;
}
#slider > img {
width: 600px;
height: 600px;
float: left;
display: none;
}
a {
padding: 5px 10px;
background-color: #F0F0F0;
margin-top: 30px;
text-decoration: none;
color: #666;
}
a.left {
float: left;
}
a.right {
float: right;
}
js:
sliderInt = 1;
sliderNext = 2;
$(document).ready(function(){
$("#slider > img#1").fadeIn(300);
startSlider();
});
function startSlider(){
count = $("#slider > img").length;
loop = setInterval(function(){
if(sliderNext > count){
sliderNext = 1;
sliderInt = 1;
}
$("slider > img").fadeOut(300);
$("#slider > img#" + sliderNext).fadeIn(300);
sliderInt = sliderNext;
sliderNext = sliderNext + 1;
},3000);
}

This
$("slider > img").fadeOut(300);
Should be
$("#slider > img").fadeOut(300);
You missed a # in front of slider
Also remove the code loop = you are assigning a function to the loop variable but never executing it. So what you need is to run it rather than assigning it. Removing the assignment will execute that block of code.

Related

how to set jquery slider on auto instead of click or hover on thumbs

i am new learner of jquery and javaScript.
i want to create a slider with a big image section and a section of thumbs.
slider should slide automatically i have coded so far is working on click or hover but i dont know how to set it on auto please help me how to modify my code. code and slider screen shoot is given below.
slider image
$("document").ready(function()
{
$("#thumbs a").mouseenter(function()
{
var smallimgpath = $(this).attr("href");
$("#bigimage img").fadeOut(function()
{
$("#bigimage img").attr("src",smallimgpath);
$("#bigimage img").fadeIn();
});
return false;
});
});
</script>
#imagereplacement{
border: 1px solid red;
width:98%;
height:400px;
margin:auto;
padding-top:8px;
padding-left:10px;
}
#imagereplacement p{
text-align:inline;
}
#bigimage{
/* border: 1px solid green; */
margin:auto;
text-align:center;
float: left;
}
#thumbs{
/*border: 1px solid yellow;*/
margin: 110px 10px;
text-align:center;
width:29%;
float: right;
}
#thumbs img{
height:100px;
width:100px;
}
//This is where all the JQuery code will go
</head>
<body>
<div id="imagereplacement">
<p id="bigimage">
<img src="images/slider1.jpg">
</p>
<p id="thumbs">
<img src="images/slider1.jpg">
<img src="images/slider2.jpg">
<img src="images/slider3.jpg">
</p>
try with this example, please let me know in case of any more question from you :
$("document").ready(function(){
var pages = $('#container li'),
current = 0;
var currentPage, nextPage;
var timeoutID;
var buttonClicked = 0;
var handler1 = function() {
buttonClicked = 1;
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if ($(this).hasClass('prevButton')) {
if (current <= 0)
current = pages.length - 1;
else
current = current - 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", -604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {
currentPage.hide();
});
currentPage.animate({
marginLeft: 604
}, 800, function() {
$('#container .button').bind('click', handler1);
});
} else {
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
}
}
var handler2 = function() {
if (buttonClicked == 0) {
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
}
}
$('#container .button').click(function() {
clearTimeout(timeoutID);
handler1();
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
});
* {
margin: 0;
padding: 0;
}
#container {
width: 604px;
height: 453px;
position: relative;
}
#container .prevButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: left top;
left: 0
}
#container .prevButton:hover {
background-position: left bottom;
left: 0;
}
#container .nextButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: right top;
right: 0
}
#container .nextButton:hover {
background-position: right bottom;
right: 0;
}
#container ul {
width: 604px;
height: 453px;
list-style: none outside none;
position: relative;
overflow: hidden;
}
#container li:first-child {
display: list-item;
position: absolute;
}
#container li {
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<h1>HTML Slideshow AutoPlay (Slide Left/Slide Right)</h1>
<br />
<br />
<div id="container">
<ul>
<li><img src="http://vietlandsoft.com/images/picture1.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture2.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture3.jpg" width="604" height="453" /></li>
</ul>
<span class="button prevButton"></span>
<span class="button nextButton"></span>
</div>
</center>
Here an example i've created that create an auto slider CodePen Demo and JSFiddle Demo
I've used an object literal pattern to create slide variable just to avoid creating many global function and variable. Inside document.ready i've initialised my slider just by calling slide.init({....}) this way it makes it easy to reuse and work like plugin.
$.extend(slide.config,option)
this code in simple words override you're default configuration defined in config key
as i mentioned in my above comment make a function slider() and place seTimeout(slide,1000) at bottom of your function before closing
Here in this code its done in animate key of slide object it is passed with two parameter cnt and all image array, If cnt is greater then image array length then cnt is set to 0 i.e if at first when cnt keeps on increment i fadeout all image so when i make it 0 the next time the fadeToggle acts as switch
if On then Off
if Off the On
and calling function slider after a delay makes it a recursive call its just one way for continuously looping there are many other ways i guess for looping continuous you can try
well i haven't check if all images Loaded or not which is most important in slider well that you could try on your own.
var slide = {
'config': {
'container': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'linear'
},
init: function(option) {
$.extend(slide.config, option);
var imag = slide.getImages();
slide.animate(0, imag);
},
animate: function(cnt, imag) {
if (cnt >= imag.length) {
cnt = 0;
}
imag.eq(cnt).fadeToggle(slide.config.fade, slide.config.easing);
setTimeout(function() {
slide.animate(++cnt, imag);
}, slide.config.delay);
},
getImages: function() {
return slide.config.container.find('img');
}
};
$(document).ready(function() {
slide.init({
'contianer': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'swing'
});
})
body {
margin: 0;
padding: 0;
}
.contianer {
width: 100%;
height: 100%;
position: relative;
}
.container > div,
.container > div >img {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="slideX">
<div id="img1">
<img src="http://imgs.abduzeedo.com/files/articles/magical-animal-photography-gregory-colbert/5.jpg" />
</div>
<div id="img2">
<img src="http://cdn-5.webdesignmash.com/trial/wp-content/uploads/2010/10/great-dog-photography-016.jpg" />
</div>
<div id="img3">
<img src="http://onlybackground.com/wp-content/uploads/2014/01/marble-beautiful-photography-1920x1200.jpg" />
</div>
</div>

Hero Carousel Auto Navigation

I have a carousel Item Implemented by some one in a Webcenter Portal. I have the HTML code, CSS file of it and the JS.
The issue I have now occurs when the carousel has 5 Images and is auto sliding. Wait for the carousel to get to the fifth item and watch it scroll back to the first one. When it scrolls back, it cycles through all the Images rather than directly going to first.
The expected behavior is that it has to scroll from the 5th slide directly to 1st slide. I have no much experience with this particular JS and I would like to know where exactly I need to check for this particular behaviour and where exactly to do the changes.
Your question is simple. After 5 th slide next slide should be 1 st with continuation. Now it goes to 1 st but with reverse order and then cont. normally.
In this code you will get your solution.
Please try this code. jsfiddle
jquery code
$('document').ready(function () {
var width = 750;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
var $slider = $('.slider');
var $slideContainer = $slider.find('ul');
var $slides = $slideContainer.find('li');
setInterval(function () {
$slideContainer.animate({
'margin-left': '-=' + width + 'px'
}, animationSpeed, function () {
currentSlide++;
if (currentSlide >= $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
});
html
<body>
<div id="container">
<div id="header">
<h3>J-Slider</h3>
</div>
<div class="slider">
<ul>
<li>
<img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-1.jpg">
</li>
<li>
<img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-13.jpg">
</li>
<li>
<img width="750px" height="400px" src="http://th08.deviantart.net/fs70/PRE/f/2014/071/5/5/blue_space_by_whendell-d79zabi.jpg">
</li>
<li>
<img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-1.jpg">
</li>
</ul>
</div>
</div>
</body>
css
body {
font-family:Gerogia;
font-size:15px;
}
#container {
width:930px;
margin:50px auto 10px auto;
border-left:#666 solid 3px;
border-right:#666 solid 3px;
background:#f5f5f5;
padding:20px 30px;
}
#header {
padding:10px 0;
border-bottom:#ccc solid 1px;
overflow:hidden;
text-align:center;
}
h3 {
font-size: 30px;
text-transform: uppercase;
letter-spacing: 2px;
}
.slider {
width: 750px;
height: 400px;
padding-top: 10px;
margin-left: 75px;
overflow: hidden;
}
.slider ul {
width:8000px;
list-style-type:none;
}
.slider li {
float: left;
}

JS/jQuery code works in chrome but not IE/FF

I've only been coding a couple of months and I'm struggling to figure out why this JS/jQuery wont run on a simple website I've been trying to create. I'm using Adobe Brackets and the live preview uses Chrome. Everything runs smoothly in Chrome, but when I open the index file with IE/FF JS/jQuery doesn't run at all.
Code as follows:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> </script>
<script src="modernizr.custom.55043.js"></script>
<script type="text/javascript">
function testimonialcontainer() {
$(".testimonialcontainer #1").show("fade", 500);
$(".testimonialcontainer #1").delay(5500).hide("slide", {direction: 'left'}, 500);
var sc=$(".testimonialcontainer img").size();
var
count=2;
setInterval(function() {
$(".testimonialcontainer #" + count).show("slide", {direction: 'right'}, 500);
$(".testimonialcontainer #" + count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc) {
count = 1;
} else {
count = count + 1;
}
}, 6500);
};
</script>
HTML
<div class="testimonialcontainer">
<img src="testimonials/test1.png" id="1" />
<img src="testimonials/test2.png" id="2" />
<img src="testimonials/test3.png" id="3" />
</div>
CSS
.testimonialcontainer {
width: 795px;
height:175px;
position: absolute;
margin-top: 1000px;
margin-left: 102px;
border-top: 4px solid black;
border-bottom: 2px dotted black;
}
.testimonialcontainer img {
width: 756px;
height: 155px;
display: none;
padding: 10px;
}
Thanks in advance!
N
Numbers alone do not work as names for div's in IE/FF.

Jquery loop behaving strangely

Please be so good to take a look at my script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<link href="css.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$count = 4;
$row = 10;
function across() {
var $active = $('#slideshow .active .current');
var $next = $active.next();
$next.addClass('current');
$active.animate({left: '+=50px'},800,'swing').removeClass('current');
$row += 10;
$count--;
if($count == 0) {
$count = 4;
$row = 10;
$($active).stop();
$('#slideshow .active .bed').animate({left: '-=50px'},1);
$("#slideshow .div:first-child").addClass('active');
$(".div .bed:first-child").addClass('current');
down();
}
}
$count2 = 4;
function down() {
var $active = $('#slideshow .active');
var $next = $active.next();
$next.addClass('active');
$active.removeClass('active');
$count2--;
if($count2 == 0) {
$("#slideshow .div:first-child").addClass('active');
}
}
$(function() {
setInterval(across, 1000);
});
</script>
<style>
body {
background-color: black;
}
.active {
border: 1px solid white;
}
.current {
border: 1px solid white;
}
.div{
width: 200px;
height: 200px;
}
.alpha {
background-color: green;
}
.beta {
background-color: yellow;
}
.gamma {
background-color: red;
}
.delta {
background-color: pink;
}
.bed {
width: 50px;
height: 50px;
}
.one {
position: relative;
top: 0px;
background-color: orange;
}
.two {
position: relative;
top: 10px;
background-color: purple;
}
.three {
position: relative;
top: 20px;
background-color: grey;
}
</style>
</head><body>
<div id="slideshow">
<div class="div alpha active">
<div class="bed one current">s</div><div class="bed two">s</div><div class="bed three">s</div>
</div>
<div class="div beta">
<div class="bed one">s</div><div class="bed two">s</div><div class="bed three">s</div>
</div>
<div class="div gamma">
<div class="bed one">s</div><div class="bed two">s</div><div class="bed three">s</div>
</div>
<div class="div delta">
<div class="bed one">s</div><div class="bed two">s</div><div class="bed three">s</div>
</div>
</div>
</body></html>
http://jsfiddle.net/QSfgG/
It's working well, but as you can probably see, it loops really strangely! What I want is for the squares in the first block to all move individually and then slide back, then the squares in the second to do the same, then the third, then the fourth, and then for the whole thing to loop again, over and over ad infinitum.
Instead, the first block behaves correctly, then the second, and then the third, but then on the last the weirdness begins; blocks 2 and 4 begin to move together, then block 3, then blocks 2 and 4 again. Block 1 is missed out completely. Really weird.
I think the answer lies somewhere in function down.
Thanks for your time!
The problem is you're adding the 'active' class in two places. Given your code design, you should only be adding/removing it in the down() function.
Simply remove the line in across():
$("#slideshow .div:first-child").addClass('active');
Also, you need to reset $count2 to be 4 or it will only loop twice. Do that in down(), refer to my Fiddle for specifics.
Here's my own version of your Fiddle. I split out the HTML, CSS, and JavaScript so it was easier for me to debug.
Link: jsFiddle
Another suggestion is to remove $count2. Instead of checking for $count2 == 0, check for !$next.length. When it is 0, it will evaluate as truthy.
Link: jsFiddle without $count2

Scrolling Tabs in a table

I have a horizontal tab menu. These tabs are all li elements. I show always 5 of them at once. To the left and right I have buttons which scrolls these tabs to either side. I am just not sure how to achieve that. Can I put the next 5 tabs in a different div which will be shown on click? That wouldnt be the best solution, would it? Can I do this somehow with JavaScript or jQuery?
Thanks.
You can do this w/ jQuery. Easier if all of the tabs are the same width. You can position the UL inside a DIV that has overflow: hidden and position: relative. Then the UL can slide around inside the DIV using the animate() method (or the css() method). Check them out on http://api.jquery.com.
Here's an example:
<!DOCTYPE HTML>
<html>
<head>
<style>
* { margin: 0; padding: 0; }
body { padding: 30px; }
div#tabs { width: 360px; height: 30px; overflow: hidden; position: relative; }
ul { display: block; float: left; width: 1080px; position: absolute; left: -360px; }
li { display: block; float: left; width: 70px; height: 30px; font-size: 12px; border: 1px solid #333; }
button { float: left; width: 100px; margin: 20px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
var tabs_list = $("div#tabs > ul");
if($(this).is("#left"))
{
tabs_list.animate({ left: "-=360" }, 500);
}
else if($(this).is("#right"))
{
tabs_list.animate({ left: "+=360" }, 500);
}
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
<li>eleven</li>
<li>twelve</li>
<li>thirteen</li>
<li>fourteen</li>
<li>fifteen</li>
</ul>
</div>
<button id="left">scroll left</button>
<button id="right">scroll right</button>
</body>
</html>
This would need some more work in order to de-activate or hide the scroll buttons when you've reached the beginning or end of the tabs list, but this should get you started.
I like Elliot's solution. I have another one, which will work if the tabs are of different lengths. It does it by hiding and showing the individual "li"s as you click the "right" and "left" buttons. The code also takes care of moving the tabs 5 at a time, both left and right, and handles the end cases.
<!DOCTYPE HTML>
<html>
<head>
<style>
#left, #right {float: left; position: relative; margin: 0; padding: 0;}
#tabs {float: left; position: relative; list-style: none; margin: 0; padding: 0;}
#tabs li {float: left; display: none; border: 2px solid #000; width: 50px; text-align: center;};
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var tabs = $('#tabs li'), number_of_tabs = tabs.length;
var tabs_visible = Math.min(5, number_of_tabs), low_tab = 0, high_tab = (tabs_visible - 1);
$(tabs).filter(function(index){return (index < tabs_visible);}).show();
$('#left, #right').each(function(){
$(this).click(function(){
if ($(this).is('#right')) {
var high_tab_new = Math.min((high_tab + tabs_visible), (number_of_tabs - 1));
var low_tab_new = high_tab_new - tabs_visible + 1;
$(tabs).filter(function(index){
return (index >= low_tab) && (index < low_tab_new);
}).hide();
$(tabs).filter(function(index){
return (index > high_tab) && (index <= high_tab_new);
}).show();
low_tab = low_tab_new;
high_tab = high_tab_new;
} else {
var low_tab_new = Math.max((low_tab - tabs_visible), 0);
var high_tab_new = low_tab_new + tabs_visible - 1;
$(tabs).filter(function(index){
return (index > high_tab_new) && (index <= high_tab);
}).hide();
$(tabs).filter(function(index){
return (index >= low_tab_new) && (index < low_tab);
}).show();
low_tab = low_tab_new;
high_tab = high_tab_new;
}
});
});
</script>
</head>
<div id="nav3">
<button id="left">left</button>
<ul id="tabs">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
</ul>
<button id="right">right</button>
</div>
</body>
</html>
Though I am not sure how would the tab look like, I am assuming that with the 5 tabs you are showing different set of page content.
I am suggesting a simple solution (Design) with Javascript. See if it works.
Have a variable to store the current View index. e.g. _currentView.
Place the content of 5 tabs in 5 views (When I say views there are many ways to establish it, ranging from using div object to using .net multiview control).
By default keep their visibility off.
Create a method, that'll accept the _currentView as the parameter. In this method, just make the current view visible.
On the click of left and right arrow, increment or decrement the _currentView value and call the method that activates the current view.
Please see if this helps you.

Categories

Resources