Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

Solved

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

Posted on 2011-03-04

1 solution

Medium Priority

480 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 2000 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

AJAX form submission with customized server field validation

Article by: Julian

This article discusses how to implement server side field validation and display customized error messages to the client.

Understanding Web Applications

Article by: Andrew

Without even knowing it, most of us are using web applications on a daily basis. In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…

Should Your Business Accept Bitcoin?

Video by: Terry

Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:

Adding a Business to Google Maps

Video by: doug

This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…