Solved

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

Posted on 2011-03-04

1 solution

463 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

Comment

Question by:EMB01

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

23 Comments

LVL 9

Expert Comment

by:rawinnlnx9

ID: 350386752011-03-04

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/

LVL 9

Expert Comment

by:rawinnlnx9

ID: 350387042011-03-04

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

LVL 14

Author Comment

by:EMB01

ID: 350387192011-03-04

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?

LVL 82

Expert Comment

by:leakim971

ID: 350390392011-03-04

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

LVL 14

Author Comment

by:EMB01

ID: 350391432011-03-04

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.

LVL 82

Expert Comment

by:leakim971

ID: 350391672011-03-04

You want it without jQuery ?

LVL 82

Expert Comment

by:leakim971

ID: 350392102011-03-04

work for me :
leakim971-416501.flv

LVL 14

Author Comment

by:EMB01

ID: 350392432011-03-04

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?

LVL 82

Accepted Solution

by:leakim971

leakim971 earned 500 total points

ID: 350394502011-03-04

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

LVL 14

Author Comment

by:EMB01

ID: 350394862011-03-04

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/

LVL 82

Expert Comment

by:leakim971

ID: 350395852011-03-04

YOU put a long pause of 5000s...

LVL 82

Expert Comment

by:leakim971

ID: 350395892011-03-04

5000ms

LVL 14

Author Comment

by:EMB01

ID: 350396282011-03-04

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.

LVL 82

Expert Comment

by:leakim971

ID: 350396442011-03-04

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

LVL 14

Author Comment

by:EMB01

ID: 350398192011-03-04

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

LVL 14

Author Closing Comment

by:EMB01

ID: 350398302011-03-04

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

LVL 14

Author Comment

by:EMB01

ID: 350398662011-03-04

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.

LVL 82

Expert Comment

by:leakim971

ID: 350398752011-03-04

0.1 ? You can replace the line 10 with :

showNextReview();

Open in new window

LVL 82

Expert Comment

by:leakim971

ID: 350398962011-03-04

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

LVL 82

Expert Comment

by:leakim971

ID: 350399042011-03-04

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

LVL 82

Expert Comment

by:leakim971

ID: 350399082011-03-04

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

LVL 14

Author Comment

by:EMB01

ID: 350399632011-03-04

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

LVL 14

Author Comment

by:EMB01

ID: 350403082011-03-04

Nevermind, I fixed it.

Featured Post

Question has a verified solution.

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

Have Questions about DevOps? Get them answered at The Agility Tour 2017.

Article by: xMatters

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…

Website Security Monitoring by Monitis

Article by: Anush

When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…

How to Add a Watermark to an Image Using PHP (Part 2)

Video by: Marco

This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.