Question

Note: I’ve found the causant of my problem. See below for more info.

I’ll be concise. Here’s my scenario:

The HTML file:

<form id="login">
<label for="editable">i'm a label for editable</label>
<input id="editable" type="text" />
</form>

The CSS file:

#login label { display: block }

The JS file:

$(document).ready(function() {
  $('#login label').hide().show();
});

The desired behavior is to show the element again with the same CSS properties (display: block), but in the DOM it seems that the label element gets another (maybe the default?) ones (in this case, display: inline). Note: I’ve checked the HTML and CSS files. Everything is correct. The problem is in the javascript file.

Seen on jQuery’s API docs, concerning .hide() method:

With no parameters, the .hide() method is the simplest way to hide an element:

$(‘.target’).hide();

The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css(‘display’, ‘none’), except that the value of the display property is saved in jQuery’s data cache so that display can later be restored to its initial value. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

Seen on jQuery’s API docs, concerning .show() method:

With no parameters, the .show() method is the simplest way to display an element:

$(‘.target’).show();

The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css(‘display’, ‘block’), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

Am I missing something? I’m wrong? Or is just a not desired behavior?

Thanks in advance.

Solution

Include the CSS first, then the JS later.

Answer 1

Include the CSS first, then the JS later.