I am trying to learn Jquery and tried to tackle this one. I figured you must identify id and class, then rename each after a movement.
This seems to work ok - but I am sure there is a more elegent way to do it. <!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"; xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>moving boxes experiment 1.2.1</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3.2/jquery.min.js"></script> <style> body { font:13px/20px 'Trebuchet MS', Arial, Helvetica, sans-serif; } a { text-decoration:none; color: #333; } </style> </head> <body> <div id="header" style="height:100px; text-align: left; padding-top: 40px; background-color:#eee;"> <div style="position: relative;"> Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header </div> </div> <br style="clear:both;" /> <br /> <div id="content" style="width:890px; margin:0 auto;"> <p>a.</p> <div id="pane" class="1" style="background-color:yellow; color:#000; border:1px solid #000;"><a id="arrowup" class="1" href="#up">▲</a> <a id="arrowdown" class="1" href="#down">▼</a></div> <div id="pane" class="2" style="background-color:green; color:#000; border:1px solid #000;"><a id="arrowup" class="2" href="#up">▲</ a> <a id="arrowdown" class="2" href="#down">▼</a></div> <div id="pane" class="3" style="background-color:blue; color:#000; border:1px solid #000;"><a id="arrowup" class="3" href="#up">▲</ a> <a id="arrowdown" class="3" href="#down">▼</a></div> <div id="pane" class="4" style="background-color:red; color:#000; border:1px solid #000;"><a id="arrowup" class="4" href="#up">▲</ a> <a id="arrowdown" class="4" href="#down">▼</a></div> <p> </p> <!-- javascript coding --> <script type="text/javascript"> $(document).ready(function() { $("*[id^=arrowdown].4").css("visibility","hidden"); $("*[id^=arrowup].1").css("visibility","hidden"); //------------------- $("*[id^=arrowdown]").click(function() { var whichOne=$(this).attr('class'); var whichButton = $(this).attr('id'); whichpane = $(this).parents("#pane").attr('class'); var newamount2 = parseInt(whichOne)+1; var temp = 9; //Move Panes $("*[id^=pane]."+whichOne).slideUp("slow",function(){ $("*[id^=pane]."+whichOne).insertAfter($("* [id^=pane]."+newamount2)).slideDown("slow"); //Give current row a temp number $("*[id^=pane]."+whichOne).attr('class',temp); //reset row 2 values $("*[id^=pane]."+newamount2).attr('class',whichOne); //reset row 1 values $("*[id^=pane]."+temp).attr('class',newamount2); // Change class of href $("*[id^=arrow]."+whichOne).attr('class',temp); $("*[id^=arrow]."+newamount2).attr('class',whichOne); $("*[id^=arrow]."+temp).attr('class',newamount2); //Turn off buttons $("*[id^=arrow]").css("visibility","visible"); $("*[id^=arrowdown].4").css("visibility","hidden"); $("*[id^=arrowup].1").css("visibility","hidden"); }); return false; }); /////////////////////////////////////////////////////////////////////////////// $("*[id^=arrowup]").click(function() { var whichOneB=$(this).attr('class'); var newamountB = parseInt(whichOneB)-1; var tempB = 8; //Move Panes $("*[id^=pane]."+whichOneB).slideUp("slow",function(){ $("*[id^=pane]."+whichOneB).insertBefore($("* [id^=pane]."+newamountB)).slideDown("slow"); //Give current row a temp number $("*[id^=pane]."+whichOneB).attr('class',tempB); //reset row 2 values $("*[id^=pane]."+newamountB).attr('class',whichOneB); //reset row 1 values $("*[id^=pane]."+tempB).attr('class',newamountB); // Change class of href $("*[id^=arrow]."+whichOneB).attr('class',tempB); $("*[id^=arrow]."+newamountB).attr('class',whichOneB); $("*[id^=arrow]."+tempB).attr('class',newamountB); //Turn off buttons $("*[id^=arrow]").css("visibility","visible"); $("*[id^=arrowdown].4").css("visibility","hidden"); $("*[id^=arrowup].1").css("visibility","hidden"); }); return false; }); });// end document.ready </script> </div> <div id="footer" style="height:135px; background-color: #3B3B3B; color:#fff; position:relative; margin:0 auto; clear:both; padding:75px 0 0;"> <div style="width:700px; position:relative; margin:0 auto;"> Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer </div> </div> </body> </html> On Dec 10, 6:39 pm, Abbey <i.am.wait...@gmail.com> wrote: > Hello, > > I have basic js knowledge, and just started playing with jQuery. > > I am doing an experiment where when you click an UP/DOWN ARROW link, > the box will slide up/down throughout the page. > > I found a generic swap function online and modified it for jQuery use. > Now I want to refine it more. > > I'd like to: > 1) When the box is under the HEADER make the UP ARROW disappear, > because we don't want this box to go farther than that. > 2) Same when the box is above the FOOTER, make the DOWN ARROW > disappear so it won't go down anymore on the page. > > Here is my test page:http://bit.ly/7uN0ly > > The jQuery code is at the bottom if you view the source. > > Additional Notes: > I know I can make the ARROW disappear if I add $(this).css > ("visibility","hidden"); > > How come I can't do $(this).parents().prev("div").is("#footer") to > detect the footer div? > > The header will always be the first div inside the body, the footer > will always be the last div inside the body. > > Thanks for any help! I'm just stuck trying to detect these edge divs. > ~Abbey
