I've got a set of elements where when I click on a specific button, I want to animate one element at a time using jquery.
This is my html markup.
<ul class="image-wrapper">
<li class="image">
<img src="images/slider-image-1.jpg">
</li>
<li class="image">
<img src="images/slider-image-1.jpg">
</li>
<li class="image">
<img src="images/slider-image-1.jpg">
</li>
</ul>
<div class="left-arrow"></div>
<div class="right-arrow"></div>
<div class="overlay"></div>
<div class="menu"></div>
This is my jquery code for animate each element.
$('.left-arrow').click(function(){
$('.image').first().animate({
width:'0px'
},1000);
})
But the problem is after the first animation, I cannot continue with the rest! how can I loop through the elements to slide in each element.
you need to keep and index
var index = 0, $imgs = $('.image');
$('.left-arrow').click(function(){
$imgs.eq(index ).animate({
width:'0px'
},1000);
index = index == 0 ? $imgs.length - 1 : index - 1 ;
})
Demo: Fiddle
Try jquery's .each(),
$('.left-arrow').click(function(){
$('.image').each(function(){
$(this).animate({
width:'0px'
},1000);
})
Related
I'm using the Superslides script to create a responsive slideshow for a site. I have created a basic caption box that I want to be hidden and then slide in from the bottom when the slide going with the caption is display.
In the Superslide script the current slide gets a higher z-index (of 2, otherwise it is set to 0) and a display: block (otherwise 'none') change to it when it's coming into view.
I am not very good with Javascript so I am having a bit of trouble targeting my captions to animate in at the right time. I put together a script that is supposed to evaluate all the li tags (each li is a different slide) and if it has a z-index of 2 it changes the bottom margin of the caption div so it slides into view. My problem is that my script only targets the very first li instead of running through all of them. For the first li it works great, I just need it to run though the rest of the li's as well. Any suggestions are appreciated!
Script:
var li = document.querySelector('li[style]'),
inlinezIndex = li.style.zIndex;
console.log(inlinezIndex);
if(inlinezIndex == 2){
document.getElementById('caption').style.bottom = '300px';
$('#caption').css({'transition': '10s'});
}
else{
document.getElementById('caption').style.bottom = '0px';
}
HTML:
<div id="slides">
<ul class="slides-container">
<li class="slide1">
<img src="images/people.jpeg" alt="Cinelli">
<div id="caption">
<h1>Hello</h1>
<h2>This is a test</h2>
<p>To see if I can get this to work1</p>
</div>
</li>
<li class="slide1">
<img src="images/surly.jpeg" width="1024" height="682" alt="Surly">
<div id="caption">
<h1>Hello</h1>
<h2>This is a test</h2>
<p>To see if I can get this to work1</p>
</div>
</li>
<li class="slide1">
<img src="images/cinelli-front.jpeg" width="1024" height="683" alt="Cinelli">
<div id="caption">
<h1>Hello</h1>
<h2>This is a test</h2>
<p>To see if I can get this to work2</p>
</div>
</li>
<li class="slide1">
<img src="images/affinity.jpeg" width="1024" height="685" alt="Affinity">
<div id="caption">
<h1>Hello</h1>
<h2>This is a test</h2>
<p>To see if I can get this to work3</p>
</div>
</li>
<li class="slide1">
<img src="images/cinelli-front.jpeg" width="1024" height="683" alt="Cinelli">
<div id="caption">
<h1>Hello</h1>
<h2>This is a test</h2>
<p>To see if I can get this to work4</p>
</div>
</li>
</ul>
<nav class="slides-navigation">
<i class="icon-chevron-right"></i>
<i class="icon-chevron-left"></i>
</nav>
</div>
Try using querySelectorAll instead of querySelector.
You could then loop through the li's and apply your styling, etc.
Also I see you are using multiple elements with the same id ("caption") and this is bad practice. Actually, I think it's invalid HTML according to the HTML5 specification as id's are supposed to be unique (look at this stackoverflow thread).
Example
var list = document.querySelectorAll('.slides-container li');
for (var i = 0; i < list.length; i++) {
var li = list[i];
var zIdx = li.style.zIndex;
// Use a class instead of id for captions
var caption = li.querySelector('.caption');
if (zIdx == 2) {
caption.style.bottom = '300px';
} else {
caption.style.bottom = '0px';
}
}
I'd also put css transitions in css (handy-dandy transitions):
.caption {
transition: bottom 10s;
}
I am trying to select the .next() div to work within a carousel.
However, it seems to be returning all .children() rather than the .next()
HTML
<nav class="slider-navigation">
<div class="left-arrow"></div>
<div class="right-arrow"></div>
</nav>
<div class="slides">
<div class="slide" id="slide1"></div>
<div class="slide" id="slide2"></div>
<div class="slide" id="slide3"></div>
<div class="slide" id="slide4"></div>
</div>
JQUERY
$(".left-arrow").click(function () {
var currentSlide = $(this).parent().siblings(".slides").children().next();
// Do something with currentSlide.
});
When I console.log(currentSlide) in the browser it returns all 4 children of .slides.
The same happens for $(".right-arrow").click() I just did not want to add duplicate code
Any help?
Thanks
another option is to set the first element to the "current" class and use it to start the navigation between the slides.
*on prev control click, if there is no element before this one so nothing will happen and vice versa, so that's ok but if you want it to change direction after the last/first element got the "current" class so tell me and i will update the code...
Here it is:
HTML:
<nav class="slider-navigation">
<div class="left-arrow">left</div>
<div class="right-arrow">right</div>
</nav>
<div class="slides">
<div class="slide current" id="slide1"></div>
<div class="slide" id="slide2"></div>
<div class="slide" id="slide3"></div>
<div class="slide" id="slide4"></div>
</div>
Jquery:
$(document).ready(function(){
$(".left-arrow").click(function(){
$('.current').prev().addClass('current');
$('.current:first').next().removeClass('current');
});
$(".right-arrow").click(function(){
$('.current').next().addClass('current');
$('.current:last').prev().removeClass('current');
});
});
live example: http://jsfiddle.net/spvLpjct (i've put some CSS to help you understand it).
If the current slide is visible and the rest are hidden you could use:
$(".left-arrow").click(function () {
var currentSlide = $(".slides > .slide:visible").next();
// Do something with currentSlide.
});
The problem:
I have a jQuery var setup like so:
var count = $("#gallery li:visible").length;
alert(count);
This finds all the gallery li's that are currently visible on the page. The number changes when the pagination is triggered, as people can select categories.
I want to be able to use this count to then look at the 3rd item of every count and addClass of end_item (as i have 3 in a row)
My HTML:
<ul id="gallery">
<li class="gallery_image" data-id="" data-type="">
<img src=""/><div class="thumb_bg"></div>
<img src="" data-original="" />
</li>
<li class="gallery_image" data-id="" data-type="">
<img src=""/><div class="thumb_bg"></div>
<img src="" data-original="" />
</li>
<li class="gallery_image" data-id="" data-type="">
<img src=""/><div class="thumb_bg"></div>
<img src="" data-original="" />
</li>
<li class="gallery_image" data-id="" data-type="">
<img src=""/><div class="thumb_bg"></div>
<img src="" data-original="" />
</li>
</ul>
Currently trying:
$('#gallery li').each( function(count) {
if( count % 3 != 2 )
return
$(this).addClass('end')
})
I am not going to have exactly 3 on the page, it could be anything from 2 - 12, so i need to find EVERY 3rd item currently visible
EDIT:
My code seems to work... however only when the page first loads. If i use a filter item on my gallery, the code is counting the hidden items, even though i am re-calling the jQuery once a filter is clicked.
Give this a shot:
FIDDLE
$('#gallery li:visible').each(function(i) {
if (i % 3 == 2) $(this).addClass('end_item');
});
When you load more, just be sure to do this:
$('.end_item').removeClass('end_item');
//then execute code from above
I missed it but could be useful (in future)
$('#gallery li:visible').filter(function(i){ return i % 3 == 2; }).addClass('end');
DEMO.
$('#gallery li:visible').each( function(count) {
if( (count + 1) % 3 == 0 ) {
$(this).addClass('end');
}
});
http://jsfiddle.net/mGZmy/1/
I want to show a div when a user hovers the element. I want that when you hover over div named distinguished the div class prod-desc changes it's opacity to 1.
Please help me and thank you in advantage!
Here's the HTML:
<section id="distinguished" class="four columns"> <a class="dist-img" href="#" alt="" border="0" > <img src="images/e1.png" onClick="window.location='#Url.Action("Details", "Item", new { id = section["Id"], storeid = section["PortalId"], name = section["ProductTitle"] })'"/> </a>
<div class="descContent">
<div class="distinguished-bar"> <a class="categoryMain" href="#Url.Action("Details", "Item", new { id = section["Id"], storeid = section["PortalId"], name = section["ProductTitle"] })'"></a> <a class="btAdd" href="#" title="ADD"><span class="iconAdd"></span>
<p>ADD</p>
</a> </div>
<div class="infoContent">
<div class="prod-desc ">
<p>Category</p>
<p>Title</p>
<p>Description</p>
</div>
<div class="prod-price">
<div>
<p class="priceTitle">Precio</p>
<span class="priceRegular">$300</span></div>
</div>
<div class="buttonsBox"> <a class="btAddLarge hom2" id="addToCart" href="/Cart/AddToCart">
<p>#this.Message("Add")</p>
</a> </div>
</div>
</div>
</section>
Here's the jQuery:
$('.prod-desc').hover(function () {
$('.prod-desc', this).stop().animate({
"opacity": 1
});
}, function () {
$('.prod-desc', this).stop().animate({
"opacity": 0
});
});
Try using mouseover and mouseleave instead:
$('.prod_desc').mouseover(function() {
$(this).stop().clearQueue().animate({
"opacity": 1
});
$('.prod_desc').mouseleave(function() {
$(this).stop().clearQueue().animate({
"opacity": 0
});
});
});
You can see it in action in this fiddle: http://jsfiddle.net/svNpQ/3/
It's easy, just use in your code:
$('#distinguished').hover(function() {
$('.prod-desc').animate({"opacity": 1});
});
Here is the example: jsFiddle Demo
In your case you must refer to the element by id, which is 'distinguished'. Then you define the action which is hover and inside of the function you specify which element and what to do, in your case '.prod-desc' animate (change css property) to 1.
Remember to set initial css opacity property of .prod-desc to something lower than 1 to see the difference.
Target the element you wish to attach the event handler to, not the element that will have the fading effect :
$('#distinguished').hover(function() {
$('.prod-desc', this).stop().animate({"opacity": 1});
},function() {
$('.prod-desc', this).stop().animate({"opacity": 0});
});
FIDDLE
I am trying to create a content div with button links on a right sidebar. When the user is not hovering over any of the buttons, the content should rotate through each of the five button topics (I've accomplished this). Also, when the user hovers over a specific button, what should happen is a) stop the rotation and b) display only the content topic related to that button.
Currently all I can make it do is rotate through the topics (with a Javascript function) and make content appear and disappear on hover (in HTML). Help please?
<script>
function rotatecontent(){
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1
futcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex+1
messages[prevcontentindex].style.display="none"
messages[curcontentindex].style.display="block"
messages[futcontentindex].style.display="none"
}
window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent")
setInterval("rotatecontent()", 1000)
}
}
$('#container li').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval("rotatecontent()", 1000);
});
</script>
HTML:
<body>
<ul id="container">
<li><a href="#">
<img src="image1.jpg" width="250" height="100" class="Bab-
image"></a></li>
<li><a href="#"><img src="image2.jpg" class="sluotr-image
</a></li>
<li><a href="#"><img src="image3.jpg"
class="blogs-image"></a></li>
<li><a href="#"><img src="image4.jpg" class="chat-
image"></a></li>
<li><a href="#"><img src="image5.jpg"
class="view-image"></a>
</li>
</ul>
<div class="dyncontent">
<div id="div1">Content 1</div>
<div id="div2" style="display:none">Content 2</div>
<div id="div3" style="display:none">Content 3</div>
<div id="div4" style="display:none">Content 4</div>
<div id="div5" style="display:none">Content 5</div>
</div>
</body>
</html>
Here's a jsfiddle rotates until you hover over one of the hyperlinks, then resumes when you leave: http://jsfiddle.net/58pms/11/ (updated jsfiddle, original only went through one rotation)
I feel like it's hard to say what's wrong with your original code since I had to add some variable declarations and HTML that were missing from your sample. I also took out the event handlers that would show the item you were hovering over for simplicity since I don't think that was your main question.
The HTML:
<ul id="container" overflow:hidden>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
<div class="dyncontent">
<div id="div1">Be A Billiken</div>
<div id="div2" style="display:none">Be A Billiken 2</div>
<div id="div3" style="display:none">Be A Billiken 3</div>
<div id="div4" style="display:none">Be A Billiken 4</div>
<div id="div5" style="display:none">Be A Billiken 5</div>
</div>
And the script:
var messages;
var curcontentindex = 0;
var prevcontentindex;
var futcontentindex;
var i;
function rotatecontent() {
messages.hide();
curcontentindex = (curcontentindex < messages.length - 1) ? curcontentindex + 1 : 0;
messages.get(curcontentindex).style.display = "block";
}
$(function() {
messages = $('.dyncontent').find('div');
i = setInterval(rotatecontent, 1000);
$('#container li').hover(function() {
clearInterval(i);
}, function() {
i = setInterval(rotatecontent, 1000);
});
});
Just declare the variable interval outside of window.onload function to make it a global variable (so it can be accessed by other functions), i.e.
var interval=0;
window.onload=function(){
// other code goes here
interval=setInterval(rotatecontent, 1000); // use the variable here
}
or make overall changes as follows
<script type="text/javascript">
function rotatecontent(){
// Your function's code here
}
$(document).ready(function(){
var interval=setInterval(rotatecontent, 1000);
$('#container li img').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(rotatecontent, 1000);
});
});
</script>
Don't use window.onload when you're already using jQuery. Use
$(function() { } );
instead.