CODEWITHSUNDEEP
jquery
user1508519
user1508519

Reputation:

jQuery remove class that hides content

I have a div that 'overlays' on top of the main container using the position absolute within a relatively positioned container thing. I'm trying to get it so that when I click on a button, it appears by removing the hide class. It seemingly has no effect, even though in the console I get no errors (and newThread isn't hidden.) 

<div id='newThread' class='hide'>
    <form>
        <textarea></textarea>
    </form>
</div>

 #container { position: relative; }

 #newThread { 
 position: absolute;
 top: 50px;
 background-color: rgba(239, 239, 239, 0.9);
 left: 50px; width: 600px;
 min-height: 480px; border-radius: 5px;
 box-shadow: 5px 2px 5px #888; 
 }

 .hide { display: none; }

 $('#sidebar').html('<h1>Welcome to the forum!</h1><div class="container"><button class="btn btn-default" id="newThreadButton">New Topic</button><br /><button class="btn btn-default">Log out</button></div>');
 $('#sidebar').fadeIn();
 $('#newThreadButton').click(function() {
     $('#newThread').removeClass('hide');                       
 });

alert($('#newThread').hasClass('hide')); outputs false.

http://jsfiddle.net/YBqMn/

Upvotes: 0

Views: 112

Answers (4)

Bart Calixto
Bart Calixto

Reputation: 19705

The animations are probabilly doing style="display:none;" on element. Try, instead of removing class hide, do $(element).show();

After seeing fiddle, you have z-index: -1 on #newThread. Change that to z-index: 2000 and you will see the overlay. (not sure if this is what you want)

I updated your fiddle : http://jsfiddle.net/YBqMn/1/

Upvotes: 1

user1508519
user1508519

Reputation:

My mistake was that I had put newThread in the same container that I was wiping upon the ajax call, and so that the element didn't exist when I updated the sidebar. I figured this out when it was outputting fine upon document load, but undefined when the sidebar animation started. I had to add a wrapper around the forms to separate that from the newThread div. I also had to remove z-index: -1 as that was causing issues.

Upvotes: 0

DanielDMO
DanielDMO

Reputation: 86

THe element #NewThreadButton does not exist.

one alternative is

$('#newThread button, #newThread submit').click(function() {
     $('#newThread').removeClass('hide');                       
});

that will be triggered if you click any BUTTON or SUBMIT element inside the form.

make sure you have at least one BUTTON or SUBMIT inside the form.

Upvotes: 0

user2443795
user2443795

Reputation: 138

You're assign function to element that doesn't exist on page. You can write into first line:

<button class="btn btn-default" onclick="$('#newThread').removeClass('hide')">

Upvotes: 0

Related Questions