EMB01

asked on 3/4/2011

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

JavaScriptWeb Development

Last Comment

EMB01

8/22/2022 - Mon

rawinnlnx9

3/4/2011

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

3/4/2011

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

3/4/2011

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?

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.

rwheeler23

leakim971

3/4/2011

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

3/4/2011

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

3/4/2011

You want it without jQuery ?

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

leakim971

3/4/2011

work for me :
leakim971-416501.flv

EMB01

3/4/2011

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

3/4/2011

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

EMB01

3/4/2011

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/

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat

William Peck

leakim971

3/4/2011

YOU put a long pause of 5000s...

leakim971

3/4/2011

5000ms

EMB01

3/4/2011

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.

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

leakim971

3/4/2011

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

EMB01

3/4/2011

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

3/4/2011

ASKER

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

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!

James Murphy

EMB01

3/4/2011

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

3/4/2011

0.1 ? You can replace the line 10 with :

showNextReview();

Open in new window

leakim971

3/4/2011

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

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

leakim971

3/4/2011

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

3/4/2011

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

3/4/2011

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

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!

Walt Forbes

EMB01

3/4/2011

ASKER

Nevermind, I fixed it.