Jump to content
rootKID

jQuery news slideDown/slideUp problem...

Recommended Posts

Okay, title says it all... im needing a little help understanding a few things, but i think i have a hold of something.

 

My php code:

$HTMLOUT .= box_start_full_size("Latest News");//$HTMLOUT .= "LATEST NEWS...";	$res = mysql_query("SELECT * FROM news WHERE added + ( 3600 *24 *45 ) >".time()." ORDER BY added DESC LIMIT 2");if (mysql_num_rows($res) > 0){$button = "";$id = "";	while($array = mysql_fetch_assoc($res))	{		$id .= $array['nid'];		$HTMLOUT .= "<div id='index_newsbox".$id."'>";//ID for jQuery to work...				$HTMLOUT .= "<a href='#' id='toggle_all'>";			$HTMLOUT .= "Toggle All";		$HTMLOUT .= "</a>";					if (get_user_class() >= UC_ADMIN)			{				$button = "				<div style='float:right;'>					<a href='#'>Edit</a>						 					<a href='#'>Delete</a>				</div>";			}						$HTMLOUT .= "			<div class='news_headline'>				<span class='span_news_headline'>					{$array['headline']}n				</span>								{$button}			</div>n";						$HTMLOUT .= "<div style='display:none;' class='news_body'>";							$HTMLOUT .= "<span style='float:right;'>".get_date( $array['added'], 'TINY' ) . "</span>n";				$HTMLOUT .= nl2br( $array['body'] );						$HTMLOUT .= "</div>n";				$HTMLOUT .= "</div>";//end of news ID/jQuery...	}}$HTMLOUT .= box_end_full_size();

This is my jQuery/JS code:

$(document).ready(	function()	{		$('#index_newsbox').toggle(			function()			{				$('.news_body').slideDown();//specific news-body...			}, 			function()			{				$('.news_body').slideUp();//specific news-body...			});	});$(document).ready(	function()	{		$('#toggle_all').toggle(			function()			{				$('.news_body').slideDown();//all news-body...			}, 			function()			{				$('.news_body').slideUp();//all news-body...			});	});

I want 2 things here. First is to make a simple <a href> link that can toggle ALL news-body div classes to slidedown and up, (does not work yet).

 

next is simple, i wonna do this for each and one of the divs also. Meaning making some sort of ID to the jQuery/JS so it will chose the specific div-box to deal with...

 

now, as you see, i have maked an $id inside the PHP for the div (id from table inside DB). From here im stuck a little bit, coz this is my first kind of project with jQuery, i always used normal JS. This seemed a little bit more simpler, and yet, i stuck, how dramatic -.-'...

 

Anyhow, would be great if anyone could drop in with an idea on how to fix this one!

 

Thanks as always! :D

Share this post


Link to post
Share on other sites

Are you sure toggle() is the correct method? I thiink you may be using it incorrectly. I also think maybe slideToggle() is what you want.

 

I'm not really sure what your other question means.

Share this post


Link to post
Share on other sites

i found the jQuery method/code (most of it) here:

 

http://usingjquery.com/2010/10/using-jquerys-click-event/

 

so i think i got it right, it worket on the demo i downloaded from their website, and they only used div's there also. So i dont see the problem here.

 

Basicly, i wonna make 2 things.

 

First i wonna make a simple link in the top of the news div named toggle (or something like that), that link should then have a id so it could be used by JS. This link should now be able to un-slide ALL news div's at once in one click.

 

Next, i wonna make a link out from each and one news div named slide (or something like that), and then make it slide the current element it is on.

 

Hope you understood that one :)...

Share this post


Link to post
Share on other sites

Play with this. Notice that you can use the same class names as many times as you want. You don't need special id's.

 

<!DOCTYPE html><html>    <head>        <style type="text/css">            .slide {                display: none;                background-color: #ccc;                width: 100px;            }        </style>        <script type="text/javascript" src="jquery-1.9.1.min.js"></script>    </head>    <body>        <p class="trig">Slide</p>        <div class="slide">            <div>                <p>stuff</p>                <p>stuff</p>                <p>stuff</p>                <p>stuff</p>            </div>        </div>        <p class="trig">Slide</p>        <div class="slide">            <div>                <p>other stuff</p>                <p>other stuff</p>                <p>other stuff</p>                <p>other stuff</p>            </div>        </div>        <script type="text/javascript">            $(".trig").click(function () {                $(this).next().slideToggle("slow");            });        </script>    </body></html>

Share this post


Link to post
Share on other sites

So to get this straight, i dont need special id's to identifie them inbetween each and one that is selected? Oo...

 

what if i needed an image to change when dropping down? You know, plus to minus etc?...

 

Ideas on how to combine that part? Oo...

 

EDIT:

 

i have tried this js:

$(".news_headline").click(function (){	$('.news_body').next().slideToggle("slow");});

is it correct? And it does not work's still...

 

i need the class .news_body to fade-out once clicked on .news_headline (or the div)... is it because the div is not clickable? Or just me? Oo...

Edited by rootKID

Share this post


Link to post
Share on other sites

If you have several class names of .news_headline, and you click one using

$('.news_body').next().slideToggle("slow");

means it will target ALL '.news_body' to apply slide toggle, you need to target '.news_body' directly below the '.news_headline' that was clicked

$(".news_headline").click(function (){    $(this).next('.news_body').next().slideToggle("slow");});

next() targets the next sibling, from the current selector '.news_body', but you don't have a sibling following this?

are you targeting the child span? well because you have

<div style='display:none;' class='news_body'>

the slide toggle won't be shown because its parent above is hidden and does not change, maybe you mean

$(".news_headline").click(function (){    $(this).next('.news_body').slideToggle("slow");});

It should target the next sibling of ".news_headline", which WOULD be '.news_body' and will adjust display: value.

 

ALSO it SLIDES it does not fade.

Share this post


Link to post
Share on other sites

Hello, and sorry for late reply as always, lol x).

 

I have some few other projects running at same time, and tried to run jQuery on those also, for fun to see if it made a different. And it did not, not even your code worked...

 

So i stepped back a second and was thinking, i took at look at my codes for a while, and i (think) i found the solution.

 

My old code:

// JavaScript Document$(document).ready(	function()	{		$('#right_column').toggle(			function()			{				$('#right_content_wrapper').slideDown();			}, 			function()			{				$('#right_content_wrapper').slideUp();			});	});

The problem lies at line: 4

$('#right_column').toggle(

i changed like so:

$('#right_column').click(

Only problem now, is when i click on the right column, it DOES take it up, but for GOOD. Wont get down again when i click the damn column, any ideas?

 

Still working on it, but will go on vacation for 2 weeks tonight (turkey). So will take my laptop with me and check if i can get a internet working at my hotel, if so, i get online again if i find a solution :).

Share this post


Link to post
Share on other sites

You have to be careful in applying two events that apply toggle to the same elements (1 to slide up/down individually, one to slide up/down ALL) , as they individually store the state on which they are at after being clicked, as you WILL end up with open or closed conflict. You have to click the same link/button twice so to catches up to the correct state before moving onto the alternative state, so in this instance nothing seems to happen on the first click.

Share this post


Link to post
Share on other sites

Hey, writing from Turkey, so the net might be a little slow.Anyhow, so what you are saying is there might happend a conflict if clicked to much? Why? I mean, i dont quite understand.Should i add them individually? How can i recognize them from each and one so the script runs without error? Could i add a if/else statement in the script saying that if it's drop-down (the first click) has been made, then run drop down, else up?...And if so, any ideas how to write it? Oo...

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...