jimfog Posted November 15, 2011 Share Posted November 15, 2011 Following is a code that slidetoggles a given element while at the same time keeps other similar elements hidden: $(document).ready(function(){ $("div.show_hide").hide(); $(".testMenuItem1").click(function () {//$("div.show_hide").hide();// old//$("div.show_hide").slideUp("medium"); //old$("div.show_hide").not($(this).next("form").children("div.show_hide")).slideUp("medium"); // new//$("div.show_hide").not($(this).next("form").children("div.show_hide")).hide(); //new$(this).next("form").children("div.show_hide").slideToggle("slow"); }); }); I want to make the following changes and i do not know how to do them. I want a function firing when the open element closes, meaning on slide up, the .slidetoggle(since it encompasses both slideUp & Down ) effect does not give me the option ofadjusting this. SlideUp must used to do it. My original plan was to use slieddown to open/unhide the element and then use slideUp to close it and then fire the function. As i understand, i must first open the element(using slideDown) and then use an INNER function to apply the slideUp and bind a function to it. I know how closures work in theory but reality is a different thing. What is your opinion? How i should implement the logic described above? Link to comment Share on other sites More sharing options...
dsonesuk Posted November 15, 2011 Share Posted November 15, 2011 What any show_hide element that was open, and then closed? because you can close these elements by clicking currently opened trigger element, OR a different show_hide trigger element. Link to comment Share on other sites More sharing options...
jimfog Posted November 15, 2011 Author Share Posted November 15, 2011 Ok, let me clarify it. First of all, the script i am working on is the same as here: http://w3schools.invisionzone.com/index.php?showtopic=40420&hl=&fromsearch=1 I think that you must have understand this by now-since you contributed to the above a lot. WHen the user clicks an item, show_hide element, appears, i want when the same item is clicked again-on closing-a function to fire. A want a function to fire when the item closes(in jQyery terminology, when it slidesUp) I cannot attach a function to slideToggle since this will fire ALSO when the item slidesDown upon user clicking. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 15, 2011 Share Posted November 15, 2011 The only way i see this being done is to loop through all show_hide, and identify which is using display:block;, and as so is open, and will close next. The code is slightly different to the code I sent you before, but the code give you and idea on what i mean <!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" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/ $(document).ready(function() { //slideToggle $("div.show_hide").hide(); $(".testMenuItem1").click(function (){//find currenly open show_hide elementvar count=0;$("div.show_hide").each(function(){ if($("div.show_hide").eq(count).css("display")=="block"){var timetext=$("div.show_hide").eq(count).parent("form").prev("input").prev(".testMenuItem1").html()+" is Now Closed";$("#time_diff_close").html(timetext);}count++;}); //close all open eshow_hide element except current $("div.show_hide").not($(this).next("input").next("form").children("div.show_hide")).slideUp("medium"); // new // toggle the slideUp/slideDown of show_hide$(this).next("input").next("form").children("div.show_hide").slideToggle("slow"); }); //Time Difference Calculation var d = new Date(); $(".testMenuItem1").each(function(){ //loop through each element with class .testMenuItem1var hour_sec =$(this).html().split(":"); // split time of 09:00 into array of ('09','00') d = new Date( d.getUTCFullYear(),d.getUTCMonth(),d.getUTCDate(), hour_sec[0], hour_sec[1] ); // calculate to a 24hour period for today with value for setting hour and sec//$(this).next("input").val(d.getTime());$(this).next("input").val(d); // add the specfic time value to checkbox value}); $(".check_time").click(function () // on click of checkbox store values in times_array array { $("#time_diff").html(" "); var count=0; var times_array= []; $($(".check_time").get().reverse()).each(function() { if($(this).is(":checked")) // store value if selected { times_array[count]=$(this).val(); count++; } }); if(times_array.length >1 && times_array.length <3 ) //check how many checkboxes selected if two, run function to calculate time difference { var laterdate = new Date(times_array[0]); var earlierdate = new Date(times_array[1]); timeDifference(laterdate,earlierdate); } else if(times_array.length >2 ) // if more than two checkboxes selected alert with error message { $("#time_diff").html("too many selected").removeClass('ok' ).addClass('error' ); } }); }); function timeDifference(laterdate,earlierdate) { var difference = laterdate.getTime() - earlierdate.getTime(); var daysDifference = Math.floor(difference/1000/60/60/24); difference -= daysDifference*1000*60*60*24 var hoursDifference = Math.floor(difference/1000/60/60); difference -= hoursDifference*1000*60*60 var minutesDifference = Math.floor(difference/1000/60); difference -= minutesDifference*1000*60 var secondsDifference = Math.floor(difference/1000); $("#time_diff").html('difference = ' + daysDifference + ' day/s ' + hoursDifference + ' hour/s ' + minutesDifference + ' minute/s ' + secondsDifference + ' second/s ').removeClass( 'error').addClass('ok' ); } /*--*//*]]>*/</script> <style type="text/css">.error{ color:red;}.ok {color:#707070;}</style></head><body><div id="time_diff"> </div><div id="time_diff_close"> </div><a name="1" title="element1" class="testMenuItem1" id="id1">08:20</a><input type="checkbox" value="" class="check_time"/><form action="Proccess.php" method="post" id="form1"><div class="show_hide"> <table border="0"> <tr> <td >Name</td> <td><input type="text" name="name" maxlength="45" size="35" /></td> </tr> <tr> <td>Phone</td> <td><input type="text" name="phone" maxlength="45" size="35" /></td> </tr> <tr class="time"> <td>Time</td> <td><input type="text" name="time" maxlength="45" size="35" /></td> </tr> <tr> <td><input class="submit" type="submit" value="submit" maxlength="25" size="15" /></td> </tr> </table> </div></form><a name="1" title="element2" class="testMenuItem1" id="id2">09:00</a><input type="checkbox" value="" class="check_time"/> <form action="Proccess.php" method="post" id="form2"><div class="show_hide"> <table border="0"> <tr> <td>Name</td> <td><input type="text" name="name" maxlength="45" size="35" /></td> </tr> <tr> <td>Phone</td> <td><input type="text" name="phone" maxlength="45" size="35" /></td> </tr> <tr class="time"> <td>Time</td> <td><input type="text" name="time" maxlength="45" size="35" /></td> </tr> <tr> <td><input class="submit" type="submit" value="submit" maxlength="25" size="15" /></td> </tr> </table> </div></form><a name="1" title="element2" class="testMenuItem1" id="id3">10:00</a><input type="checkbox" value="" class="check_time"/> <form action="Proccess.php" method="post" id="form3"><div class="show_hide"> <table border="0"> <tr> <td>Name</td> <td><input type="text" name="name" maxlength="45" size="35" /></td> </tr> <tr> <td>Phone</td> <td><input type="text" name="phone" maxlength="45" size="35" /></td> </tr> <tr class="time"> <td>Time</td> <td><input type="text" name="time" maxlength="45" size="35" /></td> </tr> <tr> <td><input class="submit" type="submit" value="submit" maxlength="25" size="15" /></td> </tr> </table> </div></form> </body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted November 15, 2011 Share Posted November 15, 2011 The code above identifies any open show_hide, that is closed, on clicking any of the other trigger element links. The below will output a message of the current show_hide that is open, and whose own trigger element was clicked again to close it. //find currenly open show_hide elementvar current_trigger_index =$(this).index(".testMenuItem1");var count=0;$("#time_diff_close").html("");$("div.show_hide").each(function(){ if($("div.show_hide").eq(count).css("display")=="block" && count == current_trigger_index){var timetext=$("div.show_hide").eq(count).parent("form").prev("input").prev(".testMenuItem1").html()+" is Now Closed";$("#time_diff_close").html(timetext);}count++;}); Link to comment Share on other sites More sharing options...
jimfog Posted November 15, 2011 Author Share Posted November 15, 2011 Thanks for the hard work.I will study the code and get back to you. For a newbie like me I want see the code many times before making a comment Link to comment Share on other sites More sharing options...
jimfog Posted November 16, 2011 Author Share Posted November 16, 2011 Look, i tried your version of the code and the elements do not even open, on clicking. Instead, i tried sth else, look at it: $(document).ready(function() {$("div.show_hide").hide(); $(".testMenuItem1").click(function (){//$("div.show_hide").hide();// old//$("div.show_hide").slideUp("medium"); //old$("div.show_hide").not($(this).next("form").children("div.show_hide")).slideUp("medium"); // new//$("div.show_hide").not($(this).next("form").children("div.show_hide")).hide(); //new$(this).next("form").children("div.show_hide").slideDown("slow",changeclass());$(this).click(function(){$("div.show_hide").slideUp("slow")});}); });function changeclass (){var x=document.getElementsByTagName("a")[1]; $(x).removeClass("testMenuItem1").addClass("testMenuItem1booked")}; On start works as i want it. But, after i close the element(slideUp), which is on the second click,and go open it again(third click) then it again closes itself. From open state to close state. So, we are almost there. If i could find a solution to this second(undesirable part) then we would be ok. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 16, 2011 Share Posted November 16, 2011 I'm doing this in a bit of a rush, as i should be off out else about 10mins ago, you are removing the class$(x).removeClass("testMenuItem1")ref that$(".testMenuItem1").click(function () needs to operate the slide downvar x=document.getElementsByTagName("a")[1]; will target the second anchor found within the whole document if you wish to change the current anchor elements class, you would want something loike this $(this).next("form").children("div.show_hide").slideDown("slow",changeclass($(this)));function changeclass (current_clicked){ current_clicked.removeClass("testMenuItem1").addClass("testMenuItem1booked");};And a click() within a click()? sorry i don't think I have ever seen that before. Anyway got to go. Link to comment Share on other sites More sharing options...
jimfog Posted November 16, 2011 Author Share Posted November 16, 2011 And a click() within a click()? sorry i don't think I have ever seen that before. Anyway got to go. Yes it is strange,you are right, i just wanted to try sth, under these circumstances. Οκ, thanks for the help. It's a little difficult to get a meaning out of the above,as it is. When you are ready rewrite the code in its complete form, PLEASE. In one sentence, the purpose is to change the element class on completion of the slideUp class. And again thanks. See ya. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 17, 2011 Share Posted November 17, 2011 You have two options open_booked_on_click=false; will prevent the testMenuItem1booked element element sliding down and setting to true will obviously allow sliding of these class elements. <!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" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/var element_index;$(document).ready(function() { var open_booked_on_click=false; // Because classname changes we can't match specific anchor with its specific show_hide element, so we add a rel attribute which will hold the element index number [0], [1] and so on$(".testMenuItem1").each(function(){$(this).attr("rel",$(this).index(".testMenuItem1"));});$("div.show_hide").hide(); //hide all show_hide elements$(".testMenuItem1").click(function () // click of trigger element{element_index = $(this).attr("rel"); //retrieve index ref from rel attribute//find currenly open show_hide elementvar count=0;$("#time_diff_close").html("");$("div.show_hide").each(function() { //loop through each div.show_hide element and identify if it is open at present, its class is testMenuItem1, and its rel index ref match currently selected index ref if($("div.show_hide").eq(count).css("display")=="block" && $("div.show_hide").eq(count).parent("form").prev("input").prev("a").hasClass("testMenuItem1") && $("div.show_hide").eq(count).parent("form").prev("input").prev("a").attr("rel")==element_index) { //toggle close current opened show_hide using ref to it trigger element testMenuItem1 if(open_booked_on_click==false) { slide_toggle($(this).parent("form").prev("input").prev(".testMenuItem1")); } //change class of now current closed show_hide trigger element $(this).parent("form").prev("input").prev(".testMenuItem1").removeClass('testMenuItem1').addClass('testMenuItem1booked'); } count++; });//run slidetoogle to catch non current open show_hide and class = testMenuItem1 if(open_booked_on_click==true) { slide_toggle($(this)); } else { if($(this).hasClass("testMenuItem1")) { slide_toggle($(this)); } }}); //Time Difference Calculation var d = new Date(); $(".testMenuItem1").each(function(){ //loop through each element with class .testMenuItem1var hour_sec =$(this).html().split(":"); // split time of 09:00 into array of ('09','00')d = new Date( d.getUTCFullYear(),d.getUTCMonth(),d.getUTCDate(), hour_sec[0], hour_sec[1] ); // calculate to a 24hour period for today with value for setting hour and sec//$(this).next("input").val(d.getTime());$(this).next("input").val(d); // add the specfic time value to checkbox value});$(".check_time").click(function () // on click of checkbox store values in times_array array { $("#time_diff").html(" "); var count=0; var times_array= []; $($(".check_time").get().reverse()).each(function() { if($(this).is(":checked")) // store value if selected { times_array[count]=$(this).val(); count++; } }); if(times_array.length >1 && times_array.length <3 ) //check how many checkboxes selected if two, run function to calculate time difference { var laterdate = new Date(times_array[0]); var earlierdate = new Date(times_array[1]); timeDifference(laterdate,earlierdate); } else if(times_array.length >2 ) // if more than two checkboxes selected alert with error message { $("#time_diff").html("too many selected").removeClass('ok' ).addClass('error' ); } }); });function slide_toggle(current_elem){//close all open eshow_hide element except current$("div.show_hide").not(current_elem.next("input").next("form").children("div.show_hide")).slideUp("medium");//slideTogglecurrent_elem.next("input").next("form").children("div.show_hide").slideToggle("slow"); }function timeDifference(laterdate,earlierdate) { var difference = laterdate.getTime() - earlierdate.getTime(); var daysDifference = Math.floor(difference/1000/60/60/24); difference -= daysDifference*1000*60*60*24 var hoursDifference = Math.floor(difference/1000/60/60); difference -= hoursDifference*1000*60*60 var minutesDifference = Math.floor(difference/1000/60); difference -= minutesDifference*1000*60 var secondsDifference = Math.floor(difference/1000); $("#time_diff").html('difference = ' + daysDifference + ' day/s ' + hoursDifference + ' hour/s ' + minutesDifference + ' minute/s ' + secondsDifference + ' second/s ').removeClass( 'error').addClass('ok' ); } /*--*//*]]>*/</script><style type="text/css">.error{ color:red;}.ok {color:#707070;}.testMenuItem1booked {color:red;}</style></head><body><div id="time_diff"> </div><div id="time_diff_close"> </div><a name="1" title="element1" class="testMenuItem1" id="id1">08:20</a><input type="checkbox" value="" class="check_time"/><form action="Proccess.php" method="post" id="form1"><div class="show_hide"> <table border="0"> <tr> <td >Name</td> <td><input type="text" name="name" maxlength="45" size="35" /></td> </tr> <tr> <td>Phone</td> <td><input type="text" name="phone" maxlength="45" size="35" /></td> </tr> <tr class="time"> <td>Time</td> <td><input type="text" name="time" maxlength="45" size="35" /></td> </tr> <tr> <td><input class="submit" type="submit" value="submit" maxlength="25" size="15" /></td> </tr> </table> </div></form><a name="1" title="element2" class="testMenuItem1" id="id2">09:00</a><input type="checkbox" value="" class="check_time"/><form action="Proccess.php" method="post" id="form2"><div class="show_hide"> <table border="0"> <tr> <td>Name</td> <td><input type="text" name="name" maxlength="45" size="35" /></td> </tr> <tr> <td>Phone</td> <td><input type="text" name="phone" maxlength="45" size="35" /></td> </tr> <tr class="time"> <td>Time</td> <td><input type="text" name="time" maxlength="45" size="35" /></td> </tr> <tr> <td><input class="submit" type="submit" value="submit" maxlength="25" size="15" /></td> </tr> </table> </div></form><a name="1" title="element2" class="testMenuItem1" id="id3">10:00</a><input type="checkbox" value="" class="check_time"/><form action="Proccess.php" method="post" id="form3"><div class="show_hide"> <table border="0"> <tr> <td>Name</td> <td><input type="text" name="name" maxlength="45" size="35" /></td> </tr> <tr> <td>Phone</td> <td><input type="text" name="phone" maxlength="45" size="35" /></td> </tr> <tr class="time"> <td>Time</td> <td><input type="text" name="time" maxlength="45" size="35" /></td> </tr> <tr> <td><input class="submit" type="submit" value="submit" maxlength="25" size="15" /></td> </tr> </table> </div></form></body></html> Link to comment Share on other sites More sharing options...
jimfog Posted November 21, 2011 Author Share Posted November 21, 2011 Sorry for my late response. Look, i finally managed to pull it off, here is the callback that achieves what i want: function changeclass (){if ($("div.show_hide").css("display")=="block"){var x=document.getElementsByTagName("a")[1]; $(x).removeClass("testMenuItem1").addClass("testMenuItem1booked") } }; Nonetheless, your code is still valuable to me because it also addresses other issues in the application i am building, the time for example and the issue that when an item is booked it is not clickable anymore, something very important. I will send you a PM shortly-about it. For now, just make a comment about the callback above and if (most importantly) has a negative implication since it is not like your code-which as i said above takes the issue a "little further down the road." Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.