Link to home
Create AccountLog in
Avatar of EMB01
EMB01Flag for United States of America

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

Avatar of rawinnlnx9
rawinnlnx9
Flag of United States of America image

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");
Avatar of 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?
Avatar of 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

Avatar of 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.
You want it without jQuery ?
Avatar of 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
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of 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/
YOU put a long pause of 5000s...
5000ms
Avatar of 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.
>it waits a long time before it shows the first item.
Yes, your code at line 10, it wait 5000ms
Avatar of 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"); });
    }


Avatar of EMB01

ASKER

I changed it to 0.1 and that's close enough.  Thanks for your great help.
Avatar of 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.
0.1 ? You can replace the line 10 with :
showNextReview();

Open in new window

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

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

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

Avatar of 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
Avatar of EMB01

ASKER

Nevermind,  I fixed it.