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>

$(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 ); 
});

Open in new window

rawinnlnx9

Here is this: http://stackoverflow.com/questions/3976121/jquery-selector-needed-to-select-all-p-tags-in-a-table-row

This is a very good tutorial that includes p tags.
http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

rawinnlnx9

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");

EMB01

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?

leakim971

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>

Open in new window

EMB01

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.

leakim971

You want it without jQuery ?

leakim971

work for me :
leakim971-416501.flv

EMB01

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?

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

EMB01

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/

leakim971

YOU put a long pause of 5000s...

leakim971

5000ms

EMB01

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.

leakim971

>it waits a long time before it shows the first item.
Yes, your code at line 10, it wait 5000ms

EMB01

ASKER

I tried changing it to zero, but now it doesn't fade in at all...

$(document).ready(function() {
$("p", "#reviews").css({"position":"absolute","top":"0px","left":"0px"}).removeClass("active").hide();
setInterval("showNextReview();", 0 );
});

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"); });
}

EMB01

ASKER

I changed it to 0.1 and that's close enough. Thanks for your great help.

EMB01

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.

leakim971

0.1 ? You can replace the line 10 with :

showNextReview();

Open in new window

leakim971

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);
    }

Open in new window

leakim971

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);
    }

Open in new window

leakim971

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"); });
    }

Open in new window

EMB01

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

EMB01

ASKER

Nevermind, I fixed it.