EMB01
asked on
Change jQuery function to use elements inside DIV instead...
How can I change the attached code to, instead of using variables from "data," use all <p> elements that it finds in the DIV. For instance, I want one <p> element to fade in, then fade out, and then the next <p> fades in and out, and so on. Here's the HTML:
<div id="reviews">
<p>This should fade in first and then fade out</p>
<p>This should fade in once the first one fades out and so on...</p>
</div>
<div id="reviews">
<p>This should fade in first and then fade out</p>
<p>This should fade in once the first one fades out and so on...</p>
</div>
$(document).ready(function () {
var data = {
reviews: [
{
review: "It was okay..."
},
{
review: "Poor, 0 stars"
},
{
review: "Beyond Excellent, 10 stars!"
}
]
};
$.each(data.reviews,function(i,itemData){
var p = $('<p>').text('"'+itemData.review+'"');
if (i == 0) p.addClass('active');
else p.css({opacity: 0.0});
$('#reviews').append(p);
});
function showNextReview() {
var $active = $('#reviews p.active');
if ( $active.length == 0 ) $active = $('#reviews p:last');
var $next = $active.next().length ? $active.next() : $('#reviews p:first');
$active.removeClass('active').animate({opacity: 0.0}, 1000, function(){
$active.hide();
$next.show().addClass('active').animate({opacity: 1.0}, 1000);
});
}
setInterval(showNextReview, 5000 );
});
This will find all p children of a DIV and set them to a gray border as an example:
$("div > p").css("border", "1px solid gray");
$("div > p").css("border", "1px solid gray");
ASKER
Is there anyway to adapt that to my script. For instance:
var data = $("div > p")
... I don't think that will work, but you get where I'm going with this?
var data = $("div > p")
... I don't think that will work, but you get where I'm going with this?
Check this :
<!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" />
<script language="javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script language="javascript">
$(document).ready(function() {
var data = { "reviews": [{ "review":"It was okay..." }, { "review": "Poor, 0 stars" }, { "review": "Beyond Excellent, 10 stars!"}]};
/*
$.each(data.reviews,function(i,itemData){
var p = $('<p>').text('"'+itemData.review+'"');
if (i == 0) p.addClass('active'); else p.css({opacity: 0.0});
$('#reviews').append(p);
});
*/
$("p:first", "#reviews").addClass("active").css({"opacity":1.0});
$("p:not(:first)", "#reviews").removeClass("active").css({"opacity":0.0});
setInterval("showNextReview();", 5000 );
});
function showNextReview() {
$("p.active").animate({"opacity":0.0}, 1000, function() {
if( $(this).removeClass("active").next().length != 0 ) {
$(this).removeClass("active").next().addClass('active').animate({"opacity": 1.0}, 1000);
}
else {
$(this).removeClass("active");
$("p:first").addClass('active').animate({"opacity": 1.0}, 1000);
}
});
}
</script>
</head>
<body>
<div id="reviews">
<p>This should fade in first and then fade out</p>
<p>This should fade in once the first one fades out and so on...</p>
<p>This should fade in once the second one fades out and so on...</p>
</div>
</body>
</html>
ASKER
As you can see here:
http://jsfiddle.net/LNmma/1/
It doesn't seem to work. Thanks for trying, I hope you can get it to work.
http://jsfiddle.net/LNmma/1/
It doesn't seem to work. Thanks for trying, I hope you can get it to work.
You want it without jQuery ?
work for me :
leakim971-416501.flv
leakim971-416501.flv
ASKER
Sorry, I don't know how to use jsfiddle.com.
Question: Can you make it so that they dissapear and reappear on the same line. It looks like they are:
Line 1: (fades in and out) This should fade in once...
Line 2: (fades in and out) This should fade in once...
Line 3: (fades in and out) This should fade in once...
Can you, instead, put them on one line?
Question: Can you make it so that they dissapear and reappear on the same line. It looks like they are:
Line 1: (fades in and out) This should fade in once...
Line 2: (fades in and out) This should fade in once...
Line 3: (fades in and out) This should fade in once...
Can you, instead, put them on one line?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks, that seems to work much better. But, can you fix the long pause in the beginning?
Here's what it looks like:
http://jsfiddle.net/LNmma/10/
Here's what it looks like:
http://jsfiddle.net/LNmma/10/
YOU put a long pause of 5000s...
5000ms
ASKER
No, I just mean in the beginning. The pausing in between is good. In the beginning, it waits a long time before it shows the first item.
>it waits a long time before it shows the first item.
Yes, your code at line 10, it wait 5000ms
Yes, your code at line 10, it wait 5000ms
ASKER
I tried changing it to zero, but now it doesn't fade in at all...
$(document).ready(function () {
$("p", "#reviews").css({"position ":"absolut e","top":" 0px","left ":"0px"}). removeClas s("active" ).hide();
setInterval("showNextRevie w();", 0 );
});
function showNextReview() {
$active = ($("p.active").length>0)?$ ("p.active "):$("p:fi rst");
$next = ($active.next().length>0)? $active.ne xt():$("p: first");
$active.fadeOut(1000, function() { $(this).removeClass("activ e"); });
$next.fadeIn(1000, function() { $(this).addClass("active") ; });
}
$(document).ready(function
$("p", "#reviews").css({"position
setInterval("showNextRevie
});
function showNextReview() {
$active = ($("p.active").length>0)?$
$next = ($active.next().length>0)?
$active.fadeOut(1000, function() { $(this).removeClass("activ
$next.fadeIn(1000, function() { $(this).addClass("active")
}
ASKER
I changed it to 0.1 and that's close enough. Thanks for your great help.
ASKER
Actually, I made a mistake... It only does one fade then stops... Can you help fix this? Otherwise, let me know so I can open a new question. I'd appeciate it if you could fix since it relates to this question only.
0.1 ? You can replace the line 10 with :
showNextReview();
put the timer inside showNextReview function :
$(document).ready(function() {
$("p", "#reviews").css({"position":"absolute","top":"0px","left":"0px"}).removeClass("active").hide();
showNextReview();
});
function showNextReview() {
$active = ($("p.active").length>0)?$("p.active"):$("p:first");
$next = ($active.next().length>0)?$active.next():$("p:first");
$active.fadeOut(1000, function() { $(this).removeClass("active"); });
$next.fadeIn(1000, function() { $(this).addClass("active"); });
setInterval("showNextReview();", 5000);
}
better :
$(document).ready(function() {
$("p", "#reviews").css({"position":"absolute","top":"0px","left":"0px"}).removeClass("active").hide();
showNextReview();
});
function showNextReview() {
$active = ($("p.active").length>0)?$("p.active"):$("p:first");
$next = ($active.next().length>0)?$active.next():$("p:first");
$active.fadeOut(1000, function() { $(this).removeClass("active"); });
$next.fadeIn(1000, function() { $(this).addClass("active"); });
setTimeout("showNextReview();", 5000);
}
or :
$(document).ready(function() {
$("p", "#reviews").css({"position":"absolute","top":"0px","left":"0px"}).removeClass("active").hide();
showNextReview();
setInterval("showNextReview();", 5000);
});
function showNextReview() {
$active = ($("p.active").length>0)?$("p.active"):$("p:first");
$next = ($active.next().length>0)?$active.next():$("p:first");
$active.fadeOut(1000, function() { $(this).removeClass("active"); });
$next.fadeIn(1000, function() { $(this).addClass("active"); });
}
ASKER
Thanks for continuing to help after points.
I have another problem, though: I changed the position to relative because I'm trying to put this into a web page. But now, the animation is messed up. I attached a photo so you can see what I mean. I also tried add "overflow: hidden" to my "reviews" DIV, but it still shows...
ss030411.jpg
I have another problem, though: I changed the position to relative because I'm trying to put this into a web page. But now, the animation is messed up. I attached a photo so you can see what I mean. I also tried add "overflow: hidden" to my "reviews" DIV, but it still shows...
ss030411.jpg
ASKER
Nevermind, I fixed it.
This is a very good tutorial that includes p tags.
http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/