<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
I'd like to show only one li at a time using slide effect, thats it. I'd like to avoid using plugins for something as simple as this.
Thanks in advance for your help.
i have made something simple up for you (based on your description), just to point you in the right direction:
check it out here:
http://jsfiddle.net/meo/ACenH/234/
function slider(container, delay){
$container = $(container) // select the container elements and store them in a variable
if ( !$container.length ){ return fasle; } // checks if the slider exists in your dom. if not the function ends here...
var slides = $container.length, // gives back the total LI's you have
slide = 0 // set the actual li to show
setInterval(function(){ // set a Interval for your main function
if (slide == slides - 1) { // if the actual slide is equal the total slides (-1 because eq is 0 based and length gives back the number of elements in the jQuery object) the slide counter is set to 0
$container.slideDown(); // and all slides a shown again
slide = 0;
} else {
$container.eq(slide).slideUp(); //slides the selected slide up i think you could think of a solution with .next() instead of eq()
slide++; // slide counter +1
}
}, delay)
}
slider('ul > li', 2000); // call your slider function
Your question already mentions jquery as the javascript framework of choice. The best place you can start is the jquery docs on hiding:
http://api.jquery.com/hide/
and sliding:
http://api.jquery.com/slideUp/
http://api.jquery.com/slideDown/
http://api.jquery.com/slideToggle/
Related
As you can see below $(nextDiv + ' > div').eq(i).fadeIn('slow'); does not work as it seems to be malformed. nextDiv is on inspection the div below the anchor, how do I achieve getting the two divs that sit inside it?
HTML:
Sub Click
<div>
<div>I want this to fade in on the click</div>
<div>Followed by this etc.</div>
</div>
Javascript:
function subClick(myAnchor)
{
var nextDiv = $(myAnchor).next();
function showDiv(i) {
if (i > 2) return;
setTimeout(function () {
$(nextDiv + ' > div').eq(i).fadeIn('slow');
showDiv(++i);
}, 50);
}
showDiv(0);
}
You are trying to concatenate a string with jQuery, that won't provide a valid selector. The concatenation would provide something like "[object Object] > div" which doesn't select any elements in your code.
Instead, get the div children using children() method on the jQuery nextDiv object.
nextDiv.children('div').eq(i).fadeIn('slow');
If there are only two divs then you can reduce the code using delay() method.
function subClick(myAnchor) {
var nextDivs = $(myAnchor).next().children();
// if you want to do the animation after the first then
// use the below code, where second animation initializing within
// the first animation success callback, which also provides a 50ms
// delay for second animation(avoid .delay(50) if you dont nedd that delay)
// nextDivs.eq(0).fadeIn('slow', function() {
// nextDivs.eq(1).delay(50).fadeIn('slow');
// });
// in case you just want to provide a 50ms delay
// between animation then use, your code does this
nextDivs.eq(0).fadeIn('slow');
nextDivs.eq(1).delay(50).fadeIn('slow');
}
var nextDiv = $(myAnchor).next(); then nextDiv is an object not a selector. If you want to access its div children use this:
nextDiv.children('div').eq(i).fadeIn('slow');
I am working in some exercise with Jquery that allows me to reorder some elements. The example I take to explain it here is based on the number inside some <li> tags like this:
<ul>
<li>4</li>
<li>5</li>
.
.
</ul>
Here I want to reorder and I think about some logic with this function, for each li element remove it and place it at the bottom.
$('li').each(function(){
$(this).parent().append(this);
reorder ($(this));
})
Then with this another function evaluate the value of the previous elementvar prev and if prev is lower then place the element above that one.
function reorder(p) {
var val = parseInt(p.text()),
prev = parseInt(p.prev().text());
if (val > prev) {
p.prev().before(p);
}
}
Now the question is I need if the statement is true reevaluate the values with the new prev element to consider the new position. Some this way:
if (val > prev) {
p.prev().before(p);
// And Run again the function to compare with the new prev element
}
Can someone show me the way to do this?
Here is a Fiddle Example
Pd: I now there are other options like This to get the reorder but the example goes more about the recall of the function.
Simply call it again (this is known as recursion):
if (val > prev) {
p.prev().before(p);
reorder (p);
}
Demonstration
how to create animation effect like ning home page (http://www.ning.com/) in jquery/JS/css? Iam talking about the curtain like animation for the text "Build and cultivate your own community of followers/fans/members/customers etc". Its a span element with class of "word"
You can create an array of words then loop through the array index with setInterval and use jQuery slideUp - slideDown for the animation.
html:
<p>Build and cultivate your own community of</p>
<div id="word">customers</div>
script:
var words = ['followers', 'fans', 'members', 'customers'];
var index = 0;//start with 0, first array index is 0
var $word = $('#word');
setInterval(function () {
if (index == words.length) {
//if current index is equal to the arrays length reset it to 0
index = 0;
}
//slideUp to hide
$word.slideUp(500, function () {
//on animation complete hidden change the text then slideDown to show
$word.text(words[index]).slideDown(500);
/*
It's always a good practice to separate increment/decrement
in a single line, as it might confuse some(especially new) programmers
*/
index++;
});
}, 2000);
See this jsfiddle.
You can use <span> but it will create a different effect because <span> is an inline element (check this jsfiddle). You need to set it to display:block to achieve the desired effects - jsfiddle demo.
Here's a solution. Made possible through the use of jQuery slideUp() and slideDown(). Additionally to allow for the animation to run every few seconds, I employed standard javascript setInterval().
HTML & JS
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<h1>Build something...</h1>
<h1 id="marqueeText">Testing</h1>
<button id="foo">Foo</button>
<script>
$(document).ready(function() {
// Drumroll, the main function that will start the rolling text.
var drumrollPlease = function() {
var index = 0;
var words = ['Awesome', 'Fun', 'Amazing'];
var marquee = $('#marqueeText');
// Key part here. This is the heart of the script, where your words will get rotated through,
// animating with slideup/slidedown and changing out your words based on the above words array.
window.setInterval(function () {
// Reset to the beginning once we reach end of our words list.
if (index >= words.length) {
index = 0;
}
// Set the marquee container to slide, update the word in our marquee container and then slide back down to reveal
// the new word.
marquee.slideUp('slow', function() {
marquee.html(words[index++]);
marquee.slideDown();
});
}, 2000); // Modify this duration in milliseconds as you please.
}
// I bound my button foo to illustrate how to trigger it. I could
// just as easily have called drumrollPlease() to have the function auto run
// when the document was in the ready state.
$('#foo').click(function() {
drumrollPlease();
});
});
</script>
</body>
</html>
See button activated plunker version: HERE
See automatic activated plunker version: HERE
You can use TweenlitMax
Includes
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/plugins/TextPlugin.min.js"></script>
HTML
<div>Build and cultivate your own community of</div>
<div id="compatibility">Followers</div>
Css:
#compatibility{
width:200px;
font-size:20px;
height:100px;
display:inline-block;
overflow:hidden;
position:absolute;
font-weight:bold;
}
JS:
$(document).ready(function(){
var tl = new TimelineLite({onComplete:onAnimationComplete});
text = $("#compatibility");
tl.fromTo(text,1,{height:0},{height:100})
.fromTo(text,1,{height:100},{height:0})
.set(text,{text:"fans"})
.fromTo(text,1,{height:0},{height:100})
.fromTo(text,1,{height:100},{height:0})
.set(text,{text:"members"})
.fromTo(text,1,{height:0},{height:100})
.fromTo(text,1,{height:100},{height:0});
function onAnimationComplete(){
tl.restart();
}
});
Check Fiddle
I am trying to create a news slider that consists of a big slide area (picture and heading) and a second area to the left which contains a simple list of all the slides.
I've managed to get the slider to work so that you can click on one of the list items and this then changes the slide.
However, I'd also like the slider to animate by default through all the slides. I'd like clicking on a list item to override the animation and make the animation loop go to the point in the loop at which the current slide is at. So if the user clicks slide 2, the next slide to be animated to will be slide 3. I'd also like hovering over a slide to pause the animation.
Any ideas how I can achieve the animation/hover part? I am new to jQuery so pretty confused.
This is what I've come up with so far:
var $newsitem = jQuery('.featured-news');
var $newsitem1 = jQuery('.featured-news.item-1');
var $newsitem2 = jQuery('.featured-news.item-2');
var $newsitem3 = jQuery('.featured-news.item-3');
var $newslistitem1 = jQuery( '.newslist.item-1' );
var $newslistitem2 = jQuery( '.newslist.item-2' );
var $newslistitem3 = jQuery( '.newslist.item-3' );
// click actions
$newslistitem1.click(function () {
$newsitem.hide();
$newsitem1.fadeIn();
});
$newslistitem2.click(function () {
$newsitem.hide();
$newsitem2.fadeIn();
});
$newslistitem3.click(function () {
$newsitem.hide();
$newsitem3.fadeIn();
});
// timed actions
animate();
function animate() {
$newsitem1.delay(4000).hide();
$newsitem2.delay(4000).fadeIn();
$newsitem2.delay(4000).hide();
$newsitem3.delay(4000).fadeIn();
}
HTML:
<ul>
<li class="newslist item-1">
News item 1
</li>
<li class="newslist item-2">
News item 2
</li>
<li class="newslist item-3">
News item 3
</li>
</ul>
<ul>
<li class="featured-news item-1">
<img src="http://placehold.it/350x150">
<br>News Story 1
</li>
<li class="featured-news item-2" style="display: none">
<img src="http://placehold.it/350x150">
<br>News Story 2
</li>
<li class="featured-news item-3" style="display: none">
<img src="http://placehold.it/350x150">
<br>News Story 3
</li>
</ul>
And here's a fiddle:
http://jsfiddle.net/HdDG6/
here is how I modified your code :
First, setup global variables :
var $newsitem = $('.featured-news');
// global variable of the current slide
var current = 0;
// global variable interval, which will call "nextSlide" func every 3s
var interval = setInterval(nextSlide, 3000);
I updated your slide list click function so it become general. You won't need to setup every slide click event now :
// attach event to every list item
$('.newslist').click(function () {
// clear the interval
clearInterval(interval);
// set it back to reset the timer
interval = setInterval(nextSlide,3000);
// set current slide var to .newslist item index (0, 1, 2,...)
current = $(this).index();
// hide every shown item
$newsitem.hide();
// show item which index = current slide index
$newsitem.eq(current).fadeIn();
});
Then I created the nextSlide function which will increment current before hiding every slides and showing the current one as $('.newslist').click function
function nextSlide () {
// if current slide is the last one, go back to the first, else increment
if (current == $newsitem.length - 1) {
current = 0;
} else {
current++;
}
// hide every slides and show the good one
$newsitem.hide();
$newsitem.eq(current).fadeIn();
}
Then I finally set the hover event, which simply clear the timer when mouse enter .featured-news and set it back on mouse leave :
$('.featured-news').hover(function(ev){
clearInterval(interval);
}, function(ev){
interval = setInterval(nextSlide,3000);
});
Here is a working fiddle : DEMO
This way you can add as many slides as you want without changing the code. You can also bind nextSlide function to any button or control (like arrow keys or a "next slide" button).
Hope I helped you :)
I have a nav set up that when a link is clicked, the page scrolls down to the corresponding item in a list, changing the class of the link when the item is reached.
<nav>
one
two </nav>
<ul>
<li id="one"></li>
<li id="two"></li>
</ul>
Here is a rather crude example
http://jsfiddle.net/FSk5Q/1/
I would also like to change the background colour of the item once it is reached (preferably fading to a new colour), and then restore it's original class when another item is scrolled to, then changing the next item's class.
I need this to happen when clicked to AND scrolled to, so the :target option is not really ideal.
Many thanks for an advice. Not too good in the js department.
Hopefully this can at least get you started. What I have done is check that the offset top is less than the document's scroll top (you could also do something like if it's within X number of pixels).
The color fading can be done with CSS3 transitions.
$(document).on('scroll', function () {
$("li").each(function () {
if ($(this).offset().top <= $(document).scrollTop()) {
$("li").removeClass('highlight');
$(this).addClass('highlight');
}
else {
$(this).removeClass('highlight');
}
});
});
http://jsfiddle.net/FSk5Q/6/
I did a fixed version based on Explosion Pills' one. Hope it's what you wanted.
$(document).on('scroll', function ()
{
$("nav a").removeClass('highlight'); // reset all menu items
temp = $();
$("li").each(function (i) // for each content blcok (you schould give them a class)
{
if ($(this).offset().top <= $(document).scrollTop()) // if it's position is above/at the page top
{
temp = $("nav a:nth-child("+(i+1)+")");
}
});
temp.addClass('highlight');
});
http://jsfiddle.net/maxmeuten/FSk5Q/8/