1

So i'm using cloud 9 to make a website. Right now i'm stuck at showing and hiding my form. I have a fixed sidebar with a "Contact" button. Pressing that button should toggle my div #page-wrapper which contains my form as a sort of popup window in the middle of the screen where you stand on the site. The contact form is linked with a php script which is currently not working, but that is another story.

I've tried multiple solutions and now i'm just lost.

https://jsfiddle.net/b6uwb4n3/

a piece of the code

$( "#contactBtn" ).click(function() {
$("#page-wrapper").hide( "slow", function() {
});
});

https://fjord-explorers-raademar.c9users.io/

link to my site

very much work in progress.

Mattias Rådemar
  • 72
  • 7

4 Answers4

0

You can use jQuery's toggleClass() function, and create a class that shows the div, and set the div to display: block. See fiddle: https://jsfiddle.net/b6uwb4n3/1/

kzhao14
  • 2,470
  • 14
  • 21
0

You can just use .toggle() function:

$( "#contactBtn" ).click(function() {
  $("#page-wrapper").toggle("slow");
});
Banzay
  • 9,310
  • 2
  • 27
  • 46
0

Looking at the linked site, you appear to have your contact button click event attached before the Document ready function. I would suggest moving the code

$( "#contactBtn" ).click(function() {
    $("#page-wrapper").hide( "slow", function() {
    });
});

to inside the $(function(){}) call.

Andrew
  • 163
  • 5
  • Looking at the site more in developer tools, this does indeed appear to be the problem. The form correctly has its event listener attached, but the contact button does not. – Andrew Feb 08 '17 at 17:42
  • 1
    oh I feel so silly.. Of course that worked like a charm.Thank you! – Mattias Rådemar Feb 08 '17 at 18:01
  • You're quite welcome! In case you're not aware of why that's important, or for the benefit of future people who read this question, the reason this matters is because that ready function (either $(document).ready or $(function(){})) is called _after_ the DOM is fully loaded. In this case, the code attempted to attach the event listener before loading up the button into the DOM, so it had nowhere to attach the listener. Always manipulate the DOM inside a ready function! – Andrew Feb 08 '17 at 18:05
0

And if I want the form to appear where I am on the page, i.e not have the form on a static location. Or get scrolled down to where the form is static located. How would I do that?

Mattias Rådemar
  • 72
  • 7