Hi Guys,

 

Trying to make it so that users can click the 'request a call back' tab in the header, and it xhows that form. Then after that's been clicked, if it's click again, it hides again.

 

The show/hide is using margins to hide the form. Thanks guys!

 

Kew Law

jquery toggleclass might help you.

 

you could give the open function to one class and the close function to another.

 

give us until lunch and i'll try and knock you up an example unless someone else comes along first.

Can I animate with toggleclass?

at the moment you have

 

$(document).ready(
function(){

   $("#toggle").click(function(){
     $("#request").animate({ 
       marginTop: "-111px"
     }, 1500 );
   });

});

if you give #toggle a class of request_open you can then do

 

$(document).ready(
function(){

   $(".request_open").click(function(){
     $("#request").animate({ 
       marginTop: "-111px"
     }, 1500 );
    $(".request_open").toggleClass("request_close");
   });

$(".request_close").click(function(){
     $("#request").animate({ 
       marginTop: "0px"
     }, 1500 );
    $(".request_close").toggleClass("request_open");
   });

});

 

not sure if this works exactly but something similar.

Ah now that adds a class, but it doesn't replace 'request_open' ?

instead of

 

$(".request_open").toggleClass("request_close");

 

try

 

$(this).toggleClass("request_close");

 

should be better i think.

Still just adds or removes the class, but it doesn't animate.

Try adding the toggle class in a function.

 

Like

 

	  
$(".request_open").click(function(){
 $("#request").stop().animate({marginTop: "-111px"}, 1500, (function(){
   $(".request_open").toggleClass("request_close");
  })) return false;
 )}; 

 

 

Bit of a stab in the dark, but sometimes it solves my animations being cut off prematurely.

Is that code to replace all, or just one part?

It was just an example to replace part, you'll probably get syntax errors (i always miss colons and closing brackets ). I didn't test it.

I'm not sure what your trying to do with the show / hide button, but the function can be done with normal js and css

 

set the div for the form as display:none, then tell the js when clicking the link to change the css to display:block

 

example

 

the js

function profile_menu(id) {
 var d = document.getElementById(id);
 if(d.style.display == 'none') {
   d.style.display = 'block';
 } else {
   d.style.display = 'none';
 }
}

 

the css

.user_menu {
display:none;
width:125px;
height:100px;
background:#E5E5E8;
}

 

the html

<a href="#" onclick="profile_menu; return false;">Show / Hide</a>

 

I made this as a drop down menu like on Vbulletin forums,

 

 

It's not done via jquery but it gives a playing field to start on

But I'm not display:none or display:hide ing, I'm changing a margin value with an animation. Really, this isn't a show/hide, it's a move/move back.

you can change the code to suit then! I knew i missed something, but it should be pretty simple to show it

 

I think i know what you mean, like the function on here, the sidebar button that shows and hides the sidebar, but moves it from the side ?

Okay so I'm trying this;

 

$(document).ready(
function(){

   $(".request_open").click(function(){
     $("#request").animate({ 
       marginTop: "-111px"
     }, 1500 );
    $(this).removeClass("request_open");
 $(this).addClass("request_close");
   });

$(".request_close").click(function(){
     $("#request").animate({ 
       marginTop: "-11px"
     }, 1500 );
    $(this).removeClass("request_close");
 $(this).addClass("request_open");
   });


});

 

It replaces the class, but it doesn't allow activation after. It's live and updated on that link.

i've got as far with toggleClass. for some reason it won't do the second animation. i think i can sort it will get back to you.

looks like the easiest way is to use the jquery ui as it animates toggleClass.

jQuery UI?

link

How do I use this? :S

got it cracked

 

$(document).ready(
function() {
var up = true;
$('#toggle').click(function(){
if (up == true){
$('#request').animate({ 
       marginTop: "-111px"
     }, 1500 );
  up = false;

  }else{
$('#request').animate({ 
       marginTop: ""
     }, 1500 );
  up = true;  
  }

});
});

the ui is a bit like a plugin. you would download it and add it like you do with the jquery library or any other plugin.

You're a legend, thanks buddy!!!!

no worries always glad to help. it helps me learn/give me something else i can use in the future.

Take a look at the link now, working perfectly

i noticed you are linking externally for the jquery library. You might want to download it and have it internally.

i noticed you are linking externally for the jquery library. You might want to download it and have it internally.

 

The google hosted version is more likely to be pre-cached though, which means quicker loading, and the chances of google going down are pretty slim.

ooh i didn't know about that, sounds good.

Funnily enough. I was trying for ages last night to achieve this same effect on my new site. But after a lot of tinkering with the jQuery toggle feature I managed to get it working.

 

And yes, it's better to use the Google hosted version of jQuery (I was reading about this before) as Google use a CDN (content delivery network) to serve up the file from a location closest to you, meaning not having it only sent from a server which could be quite far away somewhere.

I tend to always use it locally (was an exception earlier as I was rushing to try to complete that effect) but I now seem to be utilizing it on every project. We at digital results may simply keep it hosted at www.digital-results.com/js/jquery.1.3.2.min.js for quick reference.

That website looks great russel