rootKID Posted July 1, 2013 Share Posted July 1, 2013 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! Link to comment Share on other sites More sharing options...
jeffman Posted July 1, 2013 Share Posted July 1, 2013 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. Link to comment Share on other sites More sharing options...
rootKID Posted July 1, 2013 Author Share Posted July 1, 2013 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 ... Link to comment Share on other sites More sharing options...
jeffman Posted July 1, 2013 Share Posted July 1, 2013 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> Link to comment Share on other sites More sharing options...
rootKID Posted July 2, 2013 Author Share Posted July 2, 2013 (edited) 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 July 2, 2013 by rootKID Link to comment Share on other sites More sharing options...
dsonesuk Posted July 2, 2013 Share Posted July 2, 2013 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. Link to comment Share on other sites More sharing options...
rootKID Posted July 3, 2013 Author Share Posted July 3, 2013 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 . Link to comment Share on other sites More sharing options...
dsonesuk Posted July 3, 2013 Share Posted July 3, 2013 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. Link to comment Share on other sites More sharing options...
rootKID Posted July 4, 2013 Author Share Posted July 4, 2013 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... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now