Solved

Change jQuery function to use elements inside DIV instead...

Posted on 2011-03-04
23
458 Views
Last Modified: 2012-06-27
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

0
Comment
Question by:EMB01
  • 11
  • 10
  • 2
23 Comments
 
LVL 9

Expert Comment

by:rawinnlnx9
ID: 35038675
0
 
LVL 9

Expert Comment

by:rawinnlnx9
ID: 35038704
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");
0
 
LVL 14

Author Comment

by:EMB01
ID: 35038719
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?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35039039
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

0
 
LVL 14

Author Comment

by:EMB01
ID: 35039143
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.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35039167
You want it without jQuery ?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35039210
work for me :
leakim971-416501.flv
0
 
LVL 14

Author Comment

by:EMB01
ID: 35039243
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?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 35039450
Maybe :


<!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!"}]};
		$("p", "#reviews").css({"position":"absolute","top":"0px","left":"0px"}).removeClass("active").hide();
		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"); });
	}

</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

0
 
LVL 14

Author Comment

by:EMB01
ID: 35039486
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/
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35039585
YOU put a long pause of 5000s...
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 82

Expert Comment

by:leakim971
ID: 35039589
5000ms
0
 
LVL 14

Author Comment

by:EMB01
ID: 35039628
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.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35039644
>it waits a long time before it shows the first item.
Yes, your code at line 10, it wait 5000ms
0
 
LVL 14

Author Comment

by:EMB01
ID: 35039819
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"); });
    }


0
 
LVL 14

Author Closing Comment

by:EMB01
ID: 35039830
I changed it to 0.1 and that's close enough.  Thanks for your great help.
0
 
LVL 14

Author Comment

by:EMB01
ID: 35039866
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
 
LVL 82

Expert Comment

by:leakim971
ID: 35039875
0.1 ? You can replace the line 10 with :
showNextReview();

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 35039896
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

0
 
LVL 82

Expert Comment

by:leakim971
ID: 35039904
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

0
 
LVL 82

Expert Comment

by:leakim971
ID: 35039908
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

0
 
LVL 14

Author Comment

by:EMB01
ID: 35039963
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
0
 
LVL 14

Author Comment

by:EMB01
ID: 35040308
Nevermind,  I fixed it.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now