toggle(ShowOrHide) how to distinguish

[JKG]

Hi

I need a bit of help with a spot of jquery, not my strong point.

i have a slider that i have made all working well. basically i would just like to iron out a fine point.

<script type="text/javascript">

$(document).ready(function(){
   	$("#toggle-button").click(
   	function () {
		$("#contact-info").toggle("slow");
		window.scrollBy(0, 999);
	});	
	});	
</script>

is there any way i can use toggle(ShowOrHide) so when closing (Hide) it doesnt include window.scrollBy(0, 999);

 

everything i have written now just breaks it!

 

thanks guys.

[jcanker]

Not quite sure exactly what effect you're shooting for:  do you only want it to scroll when #toggle-button becomes visible?

 

.toggle can use a callback function, so you might consider moving the scroll into that depending on what you're trying to do, exactly.

 

Beyond that, you can use ('#toggle-button').is(":visible") as a check to determine whether or not to include the scroll.  Again, depending on the effect you're shooting for, you might want to include that in the callback for your .toggle()

[JKG]

yeah i just had a slider in the footer of the page, and you couldnt tell if it had been toggled or not cos it was after the fold.

this window.scroll makes sure the user can see the majority of the content, but when closing the slider it takes you to the bottom of the page again, which isnt necessary...

im not good with jquery but http://api.jquery.com/toggle/ says that toggle(ShowOrHide) is akin to this:

if ( showOrHide == true ) {
  $('#foo').show();
} else if ( showOrHide == false ) {
  $('#foo').hide();
}

 

therefore i want

if ( showOrHide == true ) {
  $("#contact-info").toggle("slow");
  window.scrollBy(0, 999);
} else if ( showOrHide == false ) {
  $("#contact-info").toggle("slow");
}

but that doesnt seem to work!

i dont know jquery! :s

[jcanker]

Wouldn't this get the same effect you're describing?

 

$(document).ready(function(){
     $("#toggle-button").click(function () {
             $("#contact-info").toggle("slow",function(){
                  if($('#toggle-button').is(':visible'))
                  {  window.scrollBy(0, 999);} 
             });
      });
});

 

 

Also, I never use show or hide (I just use code similar to the above), but I believe the showorhide is used like .toggle(show == true). 

[JKG]

yay! thanks jcanker!!

it needed this small change

$(document).ready(function(){
     $("#toggle-button").click(function () {
             $("#contact-info").toggle("slow",function(){
                  if($('#contact-info').is(':visible')){window.scrollBy(0, 999);} 
             });
      });
});

because it was the contact-info div that was being toggled by toggle-button.

thanks for pointing me in the right direction, sorry the xml thing is over my head when it comes to js as you can see! haha.

 

[jcanker]

Just to explain a bit further for your own education:

 

when you want actions to happen explicitly after an action/check has occurred, put it in the callback function.  Working with queued/stacked events can get messy and usually provides unexpected results, esp when you add animations to the show/hide.  Placing it the callback helps keep those actions squared away.