I am trying to figure out how to modify this code that I found on stackoverflow to work more like an actual slider.
http://jsfiddle.net/5Lc7cc7u/
1) If on last slider image, I want the next to go back to the first slide.
2) If on the first slider image, I want the back to go back to the last slider image.
3) Is there an easy way to add fade to this to where I can choose between slide and fade?
Thanks!
javascript:
$( "#move_left_button" ).click( function() {
move_left();
} );
$( "#move_right_button" ).click( function() {
move_right();
} );
function move_left() {
if( get_acct_left() >= -480 ) {
$( "#moving_part" ).animate( {
left: "-=480px"
}, 1000, function() {
if( get_acct_left() <= -480 * 2 ) {
$( "#moving_part" ).attr( "data-direction", "to_right" );
}
} );
}
}
function move_right() {
if( get_acct_left() < 0 ) {
$( "#moving_part" ).animate( {
left: "+=480px"
}, 1000, function() {
if( get_acct_left() >= 0 ) {
$( "#moving_part" ).attr( "data-direction", "to_left" );
}
} );
}
}
function get_acct_left() {
return parseInt( $( "#moving_part" ).css( "left" ) );
}
function move_to_next() {
if( $( "#moving_part" ).attr( "data-direction" ) === "to_left" ) {
move_left();
} else {
move_right();
}
}
setInterval( move_to_next, 4000 );
HTML:
<div id="images_holder">
<div id="move_left_button">LEFT</div>
<div id="move_right_button">RIGTH</div>
<div id="moving_part" data-direction="to_left">
<div class="image_holder">
<span>image 1</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder">
<span>image 2</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder">
<span>image 3</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
</div>
</div>
CSS:
#images_holder {
position: relative;
overflow: hidden;
width: 480px;
height: 360px;
color: red;
}
#moving_part {
position: absolute;
top: 0;
width: 1440px; /* image_width * number_of_images */
height: 360px;
left: 0;
}
.image_holder {
float: left;
width: 480px;
height: 360px;
position: relative;
}
.image_holder span {
position: absolute;
top: 20px;
left: 200px;
}
#move_left_button {
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
#move_right_button {
position: absolute;
top: 0;
right: 0;
z-index: 999;
}
jsBin demo
Whoever coded that code you shared... it's a total mi(e)ss.
Some constructive reasons:
z-indexing elements position can be avoided by properly formatting HTML placing elements in a more natural order.
<OVERLAY element> >> BUT WHY?
<underlay element>
-------------------------------
<underlay element>
<OVERLAY element> >> CORRECT
There's no mean to hardcode the sliding DIV width inside the CSS. Should be dynamic
The slide interval should be stopped while the gallery is operated by the user. Clear the interval on gallery hover
Spaghetti code should be avoided. Count slides. Count widths. Separate your logic into functions.
Images should have an alt attribute with the image description. That alt attribute is available to the user from every decent CMS editor. So why not use that data instead of hardcoding it? (Just a suggestion)
Don't create separate code for the fade effect. With a proper HTML and CSS setup it's just about a couple of lines of jQuery to change the gallery effect (see var efx in the example below) and the related animate code.
"good UI = UX up". All users are already accustomed to a widely (properly) used gallery animation logic, and that's if you click on NEXT button > animates the container to the left. (reverse for PREV)
Here you go, simply change the efx variable and see it happen:
jQuery(function( $ ){
var efx = "fade", // "slide" || "fade"
animationTime = 600, // Modify mSeconds as desired
pauseTime = 4000,
$gal = $("#images_holder"), // Cache your elements
$mov = $("#moving_part"),
$sli = $mov.find("> div"),
$btn = $("#prev, #next"),
$dsc = $("#description"),
w = $gal.width(), // Calculate the gallery width!
n = $sli.length, // Get the number of slides
c = 0, // Counter // Start index
itv; // Interval
$mov.width(w*n); // Dynamically set the width
// SETUP (fade or slide?)
if(efx==="fade") $sli.css({position:"absolute", left:0}).fadeOut(0).eq(c).fadeIn(0);
function populateDescription() {
$dsc.text( $sli.eq(c).find("img").attr("alt") );
}
function anim() {
c = c<0 ? n-1 : c%n; // loop-back counter if exceeds
populateDescription();
if (efx==="fade") {
$sli.fadeOut(animationTime).eq(c).stop().fadeIn(animationTime);
}else if(efx==="slide") {
$mov.stop().animate({left: -c*w});
}
}
function auto() {
$btn.stop().fadeOut(); // Hide buttons while autosliding
$dsc.stop().fadeOut(); // Hide descriptions while autosliding
itv = setInterval(function(){
++c; // Increment (just like we do on NEXT click)
anim(); // and animate!
}, pauseTime); // Do every "pause" mSeconds
}
function pause() {
$btn.stop().fadeIn();
$dsc.stop().fadeIn();
return clearInterval( itv ); // Clear any ongoing interval!
}
$gal.hover(pause, auto);
$btn.on("click", function(){
c = this.id==="next" ? ++c : --c; // If next>increment, else decrement
anim(); // Animate!
});
populateDescription(); // Init the first slide description
auto(); // Start the autoslide!
});
#images_holder {
background: red;
position: relative;
overflow: hidden;
height: 360px;
width: 480px;
}
#moving_part {
position: absolute;
height: inherit;
left: 0;
}
#moving_part > div {
position: relative;
height: inherit;
width: 480px;
float: left;
}
#moving_part > div img{
width: 100%;
}
#prev, #next {
position: absolute;
cursor: pointer;
top: 47%;
display: none; /* hide initially */
-webkit-user-select: none;
user-select: none;
}
#next{
right: 0px;
}
#description{
color: #fff;
background: rgba(0,0,0,0.4);
text-align: center;
position: absolute;
padding: 15px;
right: 0;
left: 0;
display: none; /* hide initially */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="images_holder">
<div id="moving_part">
<div>
<img alt="Image 1" src="//placehold.it/400x300/c7a&text=1">
</div>
<div>
<img alt="Image description 2" src="//placehold.it/400x300/ac7&text=2">
</div>
<div>
<img alt="Image 3" src="//placehold.it/400x300/7ca&text=3">
</div>
</div>
<div id="prev">PREV</div>
<div id="next">NEXT</div>
<div id="description">Test</div>
</div>
Want to add navigation buttons to the code above? No problem:
It's easy to do it cause of the way we used functions. Style your span buttons inside CSS, Inside HTML just create a parent element like <div id="navigation"></div>.
With jQuery we'll automagically append span buttons to it:
var $nav = $("#navigation"); // Our buttons parent
var $navBtns; // Later, our SPAN buttons
var spans = "";
for(var i=0; i<n; i++) { // `n` is the number of slides!
spans += "<span>"+ (i+1) +"</span>";
}
// Finally append our generated buttons:
$nav.append( spans );
// Retrieve the created buttons and do something on click
$nav.find("span").on("click", function(){
c = $(this).index(); // Set our counter to the clicked SPAN index
anim(); // Animate. That easy.
});
Demo with navigation buttons
here you go: from last it goes back to first (since point 1 is done there is no case 2)
number and size of image holder is no longer hardcoded in js
$( "#move_left_button" ).click( function() {
move_left();
} );
$( "#move_right_button" ).click( function() {
move_right();
} );
var imgNum=$('.image_holder').length;
var imgWidth=parseInt($('.image_holder').css( "width"));
$( "#moving_part" ).css( "width" ,imgNum*imgWidth +"px" );
function move_left() {
if( get_acct_left() >= -imgWidth*imgNum) {
$( "#moving_part" ).animate( {
left: '-='+imgWidth
}, 1000, function() {
if( get_acct_left() <=( -imgWidth * ((imgNum)-1)) ) {
$( "#moving_part" ).attr( "data-direction", "to_right" );
}
} );
}
}
function move_right() {
if( get_acct_left() < 0 ) {
$( "#moving_part" ).animate( {
left: '+='+imgWidth
}, 1000, function() {
if( get_acct_left() >= 0 ) {
$( "#moving_part" ).attr( "data-direction", "to_left" );
}
} );
}
}
function get_acct_left() {
return parseInt( $( "#moving_part" ).css( "left" ) );
}
function move_to_next() {
if( $( "#moving_part" ).attr( "data-direction" ) === "to_left" ) {
move_left();
} else {
move_right();
}
}
setInterval( move_to_next, 4000 );
#images_holder {
position: relative;
overflow: hidden;
width: 480px;
height: 360px;
color: red;
}
#moving_part {
position: absolute;
top: 0;
width: 480px;
height: 360px;
left: 0;
}
.image_holder {
float: left;
width: 480px;
height: 360px;
position: relative;
}
.image_holder span {
position: absolute;
top: 20px;
left: 200px;
}
#move_left_button {
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
#move_right_button {
position: absolute;
top: 0;
right: 0;
z-index: 999;
}
<div id="images_holder">
<div id="move_left_button">LEFT</div>
<div id="move_right_button">RIGTH</div>
<div id="moving_part" data-direction="to_left">
<div class="image_holder">
<span>image 1</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder">
<span>image 2</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder">
<span>image 3</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder">
<span>image 4</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
</div>
</div>
http://jsfiddle.net/5Lc7cc7u/8/
enjoy
Fade version
$("#move_left_button").click(function () {
move_left();
});
$("#move_right_button").click(function () {
move_right();
});
var imgNum = $('.image_holder').length;
var imgWidth = parseInt($('.image_holder').css("width"));
$("#moving_part").css("width", imgNum * imgWidth + "px");
function move_left() {
if (get_acct_left() >= -imgWidth * imgNum) {
$("#moving_part").fadeOut(500, function () {
$("#moving_part").css("left", (get_acct_left() - imgWidth))
if (get_acct_left() <= (-imgWidth * ((imgNum) - 1))) {
$("#moving_part").attr("data-direction", "to_right");
}
$("#moving_part").fadeIn(500, function () {});
});
}
}
function move_right() {
if (get_acct_left() < 0) {
$("#moving_part").fadeOut(500, function () {
$("#moving_part").css("left", (0))
$("#moving_part").attr("data-direction", "to_left");
$("#moving_part").fadeIn(500, function () {});
});
}
}
function get_acct_left() {
return parseInt($("#moving_part").css("left"));
}
function move_to_next() {
if ($("#moving_part").attr("data-direction") === "to_left") {
move_left();
} else {
move_right();
}
}
setInterval(move_to_next, 4000);
#images_holder {
position: relative;
overflow: hidden;
width: 480px;
height: 360px;
color: red;
}
#moving_part {
position: absolute;
top: 0;
width: 480px;
height: 360px;
left: 0;
}
.image_holder {
float: left;
width: 480px;
height: 360px;
position: relative;
}
.image_holder span {
position: absolute;
top: 20px;
left: 200px;
}
#move_left_button {
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
#move_right_button {
position: absolute;
top: 0;
right: 0;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="images_holder">
<div id="move_left_button">LEFT</div>
<div id="move_right_button">RIGTH</div>
<div id="moving_part" data-direction="to_left">
<div class="image_holder"> <span>image 1</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder"> <span>image 2</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder"> <span>image 3</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder"> <span>image 4</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
</div>
</div>
http://jsfiddle.net/h3cnn0xv/
Related
Hi I have a question regarding the issue as title.
There is Page 1 with jQuery controlling to show the div, section 1 and section 2, as below.
$('.section2,.click1').fadeOut(0);
$('.click2').on('click', function() {
$(this).fadeOut(0);
$('.section1').fadeOut();
$('.section2, .click1').fadeIn();
});
$('.click1').on('click', function() {
$(this).fadeOut(0);
$('.section2').fadeOut();
$('.section1, .click2').fadeIn();
});
a {
display:block;
}
.section-wrapper {
position: relative;
width:400px;
height: 140px;
}
.section-box {
width: 100%;
height: 100%;
}
.section1 {
background: red;
}
.section2 {
position: absolute;
top: 0;
left: 0;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="click2">Click to section2.</a>
<a class="click1">Click to section1.</a>
<div class="section-wrapper">
<div class="section-box section1">
I am section 1, default section.
</div>
<div class="section-box section2" id="Section2">
I am section 2.
</div>
</div>
However, when I am at Page 2, there's a button need to link me to the section 2.
Go to Page 1 Section 2
How can I call the jquery function to show the section 2 and hide the section 1?
This is more generic
$(function() {
$('.click').on('click', function() {
let sectionNumber = $(this).data("section");
$(".click").show();
$(this).fadeOut(0);
$('.section-box').not(".section"+sectionNumber).fadeOut();
$('.section'+sectionNumber).fadeIn()
});
let hash = "#section2" // change to location.hash when happy
let section = hash ? hash.substring(1).replace("scrolldown&","") : "section1";
if (hash) {
let sectionNumber = hash.replace(/\D+/,"");
$("[data-section="+sectionNumber+"]").click()
}
});
a {
display: block;
}
.section-wrapper {
position: relative;
width: 400px;
height: 140px;
}
.section-box {
width: 100%;
height: 100%;
}
.section1 {
background: red;
}
.section2 {
position: absolute;
top: 0;
left: 0;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="click" data-section="2">Click to section 2.</a>
<a class="click" data-section="1">Click to section 1.</a>
<div class="section-wrapper">
<div class="section-box section1">
I am section 1, default section.
</div>
<div class="section-box section2" id="Section2">
I am section 2.
</div>
</div>
You could check for hash tag in page url and show/hide the element.
Edited
$(document).ready(function(){
if(window.location.hash) {
var hashVal = window.location.hash.substring(1);
if(hashVal == "Section2"){
var divId = "#"+hashVal; //id of the section 2 element
$('.section1').fadeOut();
$('.section2, .click1').fadeIn();
var pos = $(divId).offset().top; //top position relative to the document
$('body, html').animate({scrollTop: pos});
}
} else {
// No hash value
}
});
I am trying to achieve an effect of looping through images if a div is hovered or not.
If mouseenter div then cycle through images
if mouseleave div then stop cycling through images and remove all images (only background image will be visible).
currently I am using a setTimeout to fire itself recursively but I am having trouble with jquery on detecting if the mouse is hovering or left the object.
function logoImageLoop() {
$(".one-box .social_gallery .social_img:first").show().next(".social_img").hide().end().appendTo(".one-box .social_gallery");
};
var oneBoxIsHover = false;
$(".one-box").mouseenter(function(){
timeout();
function timeout() {
setTimeout(function(){
logoImageLoop();
timeout();
}, 100);
};
});
Here is a codepen for reference: http://codepen.io/H0BB5/pen/xEpqbv
A similar effect I am trying to achieve can be seen when hovering the cargo logo on this website: http://cargocollective.com/
You just need to clear the timer on mouseleave.
var timer = null;
$(".one-box").mouseenter(function(){
timeout();
function timeout() {
timer = setTimeout(function(){
logoImageLoop();
timeout();
}, 100);
};
}).mouseleave(function(){
clearTimeout(timer);
});
Here's a codepen: http://codepen.io/anon/pen/rrpwYJ
I would use an interval, and the JQuery .hover() functionality. Simply replacing your $(".one-box").mouseenter() with this will run the loop while you're hovered and remove it once your mouse leaves the area.
The important bit:
var imageChangeInterval;
$(".one-box").hover(function() {
imageChangeInterval = setInterval(function() {
logoImageLoop();
}, 100);
}, function() {
clearInterval(imageChangeInterval);
});
Full example:
function logoImageLoop() {
$(".one-box .social_gallery .social_img:first").show().next(".social_img").hide().end().appendTo(".one-box .social_gallery");
};
var oneBoxIsHover = false;
// New code:
var imageChangeInterval;
$(".one-box").hover(function() {
imageChangeInterval = setInterval(function() {
logoImageLoop();
}, 100);
}, function() {
clearInterval(imageChangeInterval);
});
.one-box {
position: relative;
height: 300px;
width: 300px;
}
.one-box a {
width: 100%;
}
.one-box a img {
max-width: 100%;
}
/* .social_img { display: none; } */
a#social_logo {
background-image: url(https://s3-us-west-2.amazonaws.com/staging-site-assets/one-method/instagram-logo.png);
background-repeat: no-repeat;
background-position: 0 0;
display: block;
position: absolute;
width: 73px;
height: 73px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.one_box .social_gallery {
position: absolute;
left: 0;
top: 0;
opacity: 1;
display: none;
}
.nav_logo .social_gallery .social_img {
position: absolute;
float: none;
margin: 0;
opacity: 1;
filter: alpha(opacity=100);
overflow: hidden;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one-box nav_logo">
<a id="social_logo" href="#" alt=""></a>
<div class="social_gallery img_wall gallery">
<div class="social_img wall_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=222&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
<div class="social_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=fb2&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
<div class="social_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=777&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
<div class="social_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=fb2&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
</div>
<div>
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>
I'm not getting used to write some code in jquery but trying hard.
Making an poll application and I want to show different backgrounds to user when their click one of two button in my page.
div tag
<div id="soruBtnSol" class="bgsol">
<!-- solbuttonbg -->
<a class="sorubtn<?=$i?>1" href="javascript:;" rel="<?=$i?>">
<span id="userCevap" class="sorubtnTxtSol">
<em class="<?php echo $soruCevapId[0]; ?>" style="visibility:visible">
<?=$question[0]?>
</em>
</span>
</a>
</div>
jquery
$('#soruBtnSol').on('click', function(e){ // FORM GONDER BUTTON EVENT
var grupid = 'groupId='+$("#groupIdd").attr('class');
var cevapid = 'cevapId='+$("#cevapIdd").attr('class');
var usercevapid = 'userCevap='+$("#userCevap").find('em').attr('class');
console.log(grupid); //example : 45
console.log(cevapid);
console.log(usercevapid);
if(cevapid != usercevapid) {
$( "#soruBtnSol" ).removeClass( "bgsol" ).addClass( "fail" );
}
if(cevapid == usercevapid) {
$( "#soruBtnSol" ).removeClass( "bgsol" ).addClass( "success" );
currentskor = 5;
}
});
EDIT : CSS ADDED
#soruBtnSol {
position: absolute;
top: 50%;
left: 80px;
width: 192px;
height: 75px;
margin-left: -75px;
z-index: 3;
float: left;
}
.bgsol {
background: url("../img/btn-left.png") no-repeat;
}
.fail {
position: absolute;
background: url("../img/fail.png") no-repeat;
z-index: 4;
}
.success {
position: absolute;
background: url("../img/success.png") no-repeat;
z-index: 4;
}
I want to change <div id="soruBtnSol" class="bgsol"> into <div id="soruBtnSol" class="fail"> if users gave wrong answer. if not, class will be success.
I do might have some issues in if() condition in jquery.
Any suggestions?
Try this
$('#soruBtnSol').on('click', function(e){ // FORM GONDER BUTTON EVENT
var grupid = 'groupId='+$("#groupIdd").prop('class');
var cevapid = 'cevapId='+$("#cevapIdd").prop('class');
var usercevapid = 'userCevap='+$("#userCevap").find('em').attr('class');
console.log(grupid); //example : 45
console.log(cevapid);
console.log(usercevapid);
if(cevapid != usercevapid) {
$(this).removeClass("bgsol").addClass("fail");
}
if(cevapid == usercevapid) {
$(this).removeClass("bgsol").addClass("success");
currentskor = 5;
}
});
I have 2 <div>s with ids A and B. div A has a fixed width, which is taken as a sidebar.
The layout looks like diagram below:
The styling is like below:
html, body {
margin: 0;
padding: 0;
border: 0;
}
#A, #B {
position: absolute;
}
#A {
top: 0px;
width: 200px;
bottom: 0px;
}
#B {
top: 0px;
left: 200px;
right: 0;
bottom: 0px;
}
I have <a id="toggle">toggle</a> which acts as a toggle button. On the toggle button click, the sidebar may hide to the left and div B should stretch to fill the empty space. On second click, the sidebar may reappear to the previous position and div B should shrink back to the previous width.
How can I get this done using jQuery?
$('button').toggle(
function() {
$('#B').css('left', '0')
}, function() {
$('#B').css('left', '200px')
})
Check working example at http://jsfiddle.net/hThGb/1/
You can also see any animated version at http://jsfiddle.net/hThGb/2/
See this fiddle for a preview and check the documentation for jquerys toggle and animate methods.
$('#toggle').toggle(function(){
$('#A').animate({width:0});
$('#B').animate({left:0});
},function(){
$('#A').animate({width:200});
$('#B').animate({left:200});
});
Basically you animate on the properties that sets the layout.
A more advanced version:
$('#toggle').toggle(function(){
$('#A').stop(true).animate({width:0});
$('#B').stop(true).animate({left:0});
},function(){
$('#A').stop(true).animate({width:200});
$('#B').stop(true).animate({left:200});
})
This stops the previous animation, clears animation queue and begins the new animation.
You can visit w3school for the solution on this the link is here and there is another example also available that might surely help,
Take a look
The following will work with new versions of jQuery.
$(window).on('load', function(){
var toggle = false;
$('button').click(function() {
toggle = !toggle;
if(toggle){
$('#B').animate({left: 0});
}
else{
$('#B').animate({left: 200});
}
});
});
Using Javascript
var side = document.querySelector("#side");
var main = document.querySelector("#main");
var togg = document.querySelector("#toogle");
var width = window.innerWidth;
window.document.addEventListener("click", function() {
if (side.clientWidth == 0) {
// alert(side.clientWidth);
side.style.width = "200px";
main.style.marginLeft = "200px";
main.style.width = (width - 200) + "px";
togg.innerHTML = "Min";
} else {
// alert(side.clientWidth);
side.style.width = "0";
main.style.marginLeft = "0";
main.style.width = width + "px";
togg.innerHTML = "Max";
}
}, false);
button {
width: 100px;
position: relative;
display: block;
}
div {
position: absolute;
left: 0;
border: 3px solid #73AD21;
display: inline-block;
transition: 0.5s;
}
#side {
left: 0;
width: 0px;
background-color: red;
}
#main {
width: 100%;
background-color: white;
}
<button id="toogle">Max</button>
<div id="side">Sidebar</div>
<div id="main">Main</div>
$('#toggle').click(function() {
$('#B').toggleClass('extended-panel');
$('#A').toggle(/** specify a time here for an animation */);
});
and in the CSS:
.extended-panel {
left: 0px !important;
}
$(document).ready(function () {
$(".trigger").click(function () {
$("#sidebar").toggle("fast");
$("#sidebar").toggleClass("active");
return false;
});
});
<div>
<a class="trigger" href="#">
<img id="icon-menu" alt='menu' height='50' src="Images/Push Pin.png" width='50' />
</a>
</div>
<div id="sidebar">
</div>
Instead #sidebar give the id of ur div.
This help to hide and show the sidebar, and the content take place of the empty space left by the sidebar.
<div id="A">Sidebar</div>
<div id="B"><button>toggle</button>
Content here: Bla, bla, bla
</div>
//Toggle Hide/Show sidebar slowy
$(document).ready(function(){
$('#B').click(function(e) {
e.preventDefault();
$('#A').toggle('slow');
$('#B').toggleClass('extended-panel');
});
});
html, body {
margin: 0;
padding: 0;
border: 0;
}
#A, #B {
position: absolute;
}
#A {
top: 0px;
width: 200px;
bottom: 0px;
background:orange;
}
#B {
top: 0px;
left: 200px;
right: 0;
bottom: 0px;
background:green;
}
/* makes the content take place of the SIDEBAR
which is empty when is hided */
.extended-panel {
left: 0px !important;
}