Rectangle 27 344

1) Add/remove a predetermined class

You'd think this would be a simple question to answer, with everything else that jQuery can do. Unfortunately, the problem comes down to a technical issue: css :after and :before rules aren't part of the DOM, and therefore can't be altered using jQuery's DOM methods.

There are ways to manipulate these elements using JavaScript and/or CSS workarounds; which one you use depends on your exact requirements.

I'm going to start with what's widely considered the "best" approach:

In this approach, you've already created a class in your CSS with a different :after or :before style. Place this "new" class later in your stylesheet to make sure it overrides:

p:before {
    content: "foo";
}
p.special:before {
    content: "bar";
}

Then you can easily add or remove this class using jQuery (or vanilla JavaScript):

$('p').on('click', function() {
    $(this).toggleClass('special');
});
$('p').on('click', function() {
      $(this).toggleClass('special');
    });
  • Cons: CSS must be pre-written, so the content of :before or :after isn't completely dynamic

It's possible to use JavaScript to add styles directly to the document stylesheet, including :after and :before styles. jQuery doesn't provide a convenient shortcut, but fortunately the JS isn't that complicated:

var str = "bar";
document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');
.addRule()
.insertRule()

As a variation, you can also use jQuery to add an entirely new stylesheet to the document, but the necessary code isn't any cleaner:

var str = "bar";
$('<style>p.special:before{content:"'+str+'"}</style>').appendTo('head');
var str = "bar";
$('<style>p.special:before{content:"' + str + '"}</style>').appendTo('head');
p:before {
  content: "foo";
  color: red;
}

If we're talking about "manipulating" the values, not just adding to them, we can also read the existing :after or :before styles using a different approach:

var str = window.getComputedStyle($('p')[0], ':before').getPropertyValue('content');
console.log(str);

document.styleSheets[0].addRule('p.special:before', 'content: "' + str+str + '";');
p:before {
    content:"foo";
    color: red;
}

We can replace document.querySelector('p') with $('p')[0] when using jQuery, for slightly shorter code.

  • Pros: any string can be dynamically inserted into the style
  • Cons: original styles aren't altered, just overridden; repeated (ab)use can make the DOM grow arbitrarily large

You can also to use attr() in your CSS to read a particular DOM attribute. (If a browser supports :before, it supports attr() as well.) By combining this with content: in some carefully-prepared CSS, we can change the content (but not other properties, like margin or color) of :before and :after dynamically:

p:before {
    content: attr(data-before);
    color: red;
    cursor: pointer;
}
$('p').on('click', function () {
    $(this).attr('data-before','bar');
});
p:before {
    content: attr(data-before);
    color: red;
    cursor: pointer;
}

This can be combined with the second technique if the CSS can't be prepared ahead of time:

var str = "bar";

document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');

$('p').on('click', function () {
    $(this).attr('data-before', str);
});
var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before) !important;');

$('p').on('click', function() {
  $(this).attr('data-before', str);
});
p:before {
  content: "foo";
  color: red;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
  • Cons: attr in CSS can only apply to content strings, not URLs or RGB colors

I'm trying to dynamically set glyphicon values (i.e., via their hex values) in ::after psedo. content: element (e.g., content: "\e043";). it doesn't seem to work for me so I'm assuming it doesn't work for hex values for glyphicons either?

@user2101068 You should post that as a new question. I'd have to see all the code you're using.

Blazemonger, thanks for the quick reply..unfortunately there is a quite a bit of code and it would take quite a bit of effort to snip out the relevant code. I've already spent 12+ hours trying to get this work and this was my last gasp effort to get it to work. I need to cut my losses. I was hoping you might be able to just verify my assumption re: hex values when using the technique you described in #3 above (before code snippet). I can insert hex string in content element but it displays text for glyphicon hex value rather than the actual glyphicon. Impression without seeing all code?

@user2101068 Don't use the hex string; instead, copy and paste the actual Unicode character into the HTML attribute. jsfiddle.net/mblase75/Lcsjkc5y

regarding solution 2. & 3. actually you can prevent stylesheet from (over)growing if you use: document.styleSheets[0].insertRule(rule, index), then using this index you can remove the rules when not needed: document.styleSheets[0].deleteRule(index)

javascript - Selecting and manipulating CSS pseudo-elements such as ::...

javascript jquery css jquery-selectors pseudo-element
Rectangle 27 250

Using a standard <input type="text"> and some HTML elements:

Add a type="search" to your input The support is pretty decent but will not work in IE<10

<input type="search">
<span class="clearable">
  <input type="text" name="" value="" placeholder="">
  <i class="clearable__clear">&times;</i>
</span>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

set a class="clearable" and play with it's background image:

/**
 * Clearable text inputs
 */
function tog(v){return v?'addClass':'removeClass';} 
$(document).on('input', '.clearable', function(){
    $(this)[tog(this.value)]('x');
}).on('mousemove', '.x', function( e ){
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');
}).on('touchstart click', '.onX', function( ev ){
    ev.preventDefault();
    $(this).removeClass('x onX').val('').change();
});

// $('.clearable').trigger("input");
// Uncomment the line above if you pre-fill values from LS or server
/* Clearable text inputs */
.clearable{
  background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center;
  border: 1px solid #999;
  padding: 3px 18px 3px 4px;     /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  transition: background 0.4s;
}
.clearable.x  { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; }              /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */
<input class="clearable" type="text" name="" value="" placeholder="" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The trick is to set some right padding (I used 18px) to the input and push the background-image right, out of sight (I used right -10px center). That 18px padding will prevent the text hide underneath the icon (while visible). jQ will add the class x (if input has value) showing the clear icon. Now all we need is to target with jQ the inputs with class x and detect on mousemove if the mouse is inside that 18px "x" area; if inside, add the class onX. Clicking the onX class removes all classes, resets the input value and hides the icon.

data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=

I took the liberty of borrowing some of the ideas in this code to make a tag cloud generator (with pure css tags and upvote and downvote buttons). I hope it looks ok in your browser; check it out at jsfiddle.net/7PnKS

Wow, really nice solution. That's what I am looking for. Thank you. But, how can I change the "x" image to using the Bootstrap 3 glyphicon? Because the glyphicon is font, therefore, it display better when it zoom out.

Nice, but the background image can clash with other CSS. The answer below by wldaunfr refers to a neat jQuery plug-in: plugins.jquery.com/clearsearch

.on('touchstart click', '.onX', ...
.on('touchstart click', '.onX, .x', ...

javascript - Clear icon inside input text - Stack Overflow

javascript jquery html css
Rectangle 27 241

Using a standard <input type="text"> and some HTML elements:

Add a type="search" to your input The support is pretty decent but will not work in IE<10

<input type="search">
<span class="clearable">
  <input type="text" name="" value="" placeholder="">
  <i class="clearable__clear">&times;</i>
</span>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

set a class="clearable" and play with it's background image:

/**
 * Clearable text inputs
 */
function tog(v){return v?'addClass':'removeClass';} 
$(document).on('input', '.clearable', function(){
    $(this)[tog(this.value)]('x');
}).on('mousemove', '.x', function( e ){
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');
}).on('touchstart click', '.onX', function( ev ){
    ev.preventDefault();
    $(this).removeClass('x onX').val('').change();
});

// $('.clearable').trigger("input");
// Uncomment the line above if you pre-fill values from LS or server
/* Clearable text inputs */
.clearable{
  background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center;
  border: 1px solid #999;
  padding: 3px 18px 3px 4px;     /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  transition: background 0.4s;
}
.clearable.x  { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; }              /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */
<input class="clearable" type="text" name="" value="" placeholder="" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The trick is to set some right padding (I used 18px) to the input and push the background-image right, out of sight (I used right -10px center). That 18px padding will prevent the text hide underneath the icon (while visible). jQ will add the class x (if input has value) showing the clear icon. Now all we need is to target with jQ the inputs with class x and detect on mousemove if the mouse is inside that 18px "x" area; if inside, add the class onX. Clicking the onX class removes all classes, resets the input value and hides the icon.

data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=

I took the liberty of borrowing some of the ideas in this code to make a tag cloud generator (with pure css tags and upvote and downvote buttons). I hope it looks ok in your browser; check it out at jsfiddle.net/7PnKS

Wow, really nice solution. That's what I am looking for. Thank you. But, how can I change the "x" image to using the Bootstrap 3 glyphicon? Because the glyphicon is font, therefore, it display better when it zoom out.

Nice, but the background image can clash with other CSS. The answer below by wldaunfr refers to a neat jQuery plug-in: plugins.jquery.com/clearsearch

.on('touchstart click', '.onX', ...
.on('touchstart click', '.onX, .x', ...

javascript - Clear icon inside input text - Stack Overflow

javascript jquery html css
Rectangle 27 24

Simple version (does not send images)

<form action="/my/ajax/url" class="my-form">
...
</form>
<script>
    (function($){
        $("body").on("submit", ".my-form", function(e){
            e.preventDefault();
            var form = $(e.target);
            $.post( form.attr("action"), form.serialize(), function(res){
                console.log(res);
            });
        });
    )(jQuery);
</script>
  • You can run this before the document is ready
  • You can remove and re-add the form and it will still work
  • It will post to the same location as the normal form, specified in the form's "action" attribute
jQuery(document).submit(function(e){
    var form = jQuery(e.target);
    if(form.is("#form-id")){ // check if this is the form that you want (delete this check to apply this to all forms)
        e.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: form.serialize(), // serializes the form's elements.
            success: function(data) {
                console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
            }
        });
    }
});

I wanted to edit Alfrekjv's answer but deviated too much from it so decided to post this as a separate answer.

Does not send files, does not support buttons, for example clicking a button (including a submit button) sends its value as form data, but because this is an ajax request the button click will not be sent.

To support buttons you can capture the actual button click instead of the submit.

jQuery(document).click(function(e){
    var self = jQuery(e.target);
    if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){
        e.preventDefault();
        var form = self.closest('form'), formdata = form.serialize();
        //add the clicked button to the form data
        if(self.attr('name')){
            formdata += (formdata!=='')? '&':'';
            formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
        }
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: formdata, 
            success: function(data) {
                console.log(data);
            }
        });
    }
});
HTTP_X_REQUESTED_WITH

PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //is ajax
}

How would this work if you DID want to send a file with this form?

@YamiMedina that's not a simple solution, you need to send the entire request in a different format (multipart format) with the file data

javascript - jQuery AJAX submit form - Stack Overflow

javascript jquery ajax submit html-form
Rectangle 27 24

Simple version (does not send images)

<form action="/my/ajax/url" class="my-form">
...
</form>
<script>
    (function($){
        $("body").on("submit", ".my-form", function(e){
            e.preventDefault();
            var form = $(e.target);
            $.post( form.attr("action"), form.serialize(), function(res){
                console.log(res);
            });
        });
    )(jQuery);
</script>
  • You can run this before the document is ready
  • You can remove and re-add the form and it will still work
  • It will post to the same location as the normal form, specified in the form's "action" attribute
jQuery(document).submit(function(e){
    var form = jQuery(e.target);
    if(form.is("#form-id")){ // check if this is the form that you want (delete this check to apply this to all forms)
        e.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: form.serialize(), // serializes the form's elements.
            success: function(data) {
                console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
            }
        });
    }
});

I wanted to edit Alfrekjv's answer but deviated too much from it so decided to post this as a separate answer.

Does not send files, does not support buttons, for example clicking a button (including a submit button) sends its value as form data, but because this is an ajax request the button click will not be sent.

To support buttons you can capture the actual button click instead of the submit.

jQuery(document).click(function(e){
    var self = jQuery(e.target);
    if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){
        e.preventDefault();
        var form = self.closest('form'), formdata = form.serialize();
        //add the clicked button to the form data
        if(self.attr('name')){
            formdata += (formdata!=='')? '&':'';
            formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
        }
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: formdata, 
            success: function(data) {
                console.log(data);
            }
        });
    }
});
HTTP_X_REQUESTED_WITH

PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //is ajax
}

How would this work if you DID want to send a file with this form?

@YamiMedina that's not a simple solution, you need to send the entire request in a different format (multipart format) with the file data

javascript - jQuery AJAX submit form - Stack Overflow

javascript jquery ajax submit html-form
Rectangle 27 24

Simple version (does not send images)

<form action="/my/ajax/url" class="my-form">
...
</form>
<script>
    (function($){
        $("body").on("submit", ".my-form", function(e){
            e.preventDefault();
            var form = $(e.target);
            $.post( form.attr("action"), form.serialize(), function(res){
                console.log(res);
            });
        });
    )(jQuery);
</script>
  • You can run this before the document is ready
  • You can remove and re-add the form and it will still work
  • It will post to the same location as the normal form, specified in the form's "action" attribute
jQuery(document).submit(function(e){
    var form = jQuery(e.target);
    if(form.is("#form-id")){ // check if this is the form that you want (delete this check to apply this to all forms)
        e.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: form.serialize(), // serializes the form's elements.
            success: function(data) {
                console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
            }
        });
    }
});

I wanted to edit Alfrekjv's answer but deviated too much from it so decided to post this as a separate answer.

Does not send files, does not support buttons, for example clicking a button (including a submit button) sends its value as form data, but because this is an ajax request the button click will not be sent.

To support buttons you can capture the actual button click instead of the submit.

jQuery(document).click(function(e){
    var self = jQuery(e.target);
    if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){
        e.preventDefault();
        var form = self.closest('form'), formdata = form.serialize();
        //add the clicked button to the form data
        if(self.attr('name')){
            formdata += (formdata!=='')? '&':'';
            formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
        }
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: formdata, 
            success: function(data) {
                console.log(data);
            }
        });
    }
});
HTTP_X_REQUESTED_WITH

PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //is ajax
}

How would this work if you DID want to send a file with this form?

@YamiMedina that's not a simple solution, you need to send the entire request in a different format (multipart format) with the file data

javascript - jQuery AJAX submit form - Stack Overflow

javascript jquery ajax submit html-form
Rectangle 27 24

Simple version (does not send images)

<form action="/my/ajax/url" class="my-form">
...
</form>
<script>
    (function($){
        $("body").on("submit", ".my-form", function(e){
            e.preventDefault();
            var form = $(e.target);
            $.post( form.attr("action"), form.serialize(), function(res){
                console.log(res);
            });
        });
    )(jQuery);
</script>
  • You can run this before the document is ready
  • You can remove and re-add the form and it will still work
  • It will post to the same location as the normal form, specified in the form's "action" attribute
jQuery(document).submit(function(e){
    var form = jQuery(e.target);
    if(form.is("#form-id")){ // check if this is the form that you want (delete this check to apply this to all forms)
        e.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: form.serialize(), // serializes the form's elements.
            success: function(data) {
                console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
            }
        });
    }
});

I wanted to edit Alfrekjv's answer but deviated too much from it so decided to post this as a separate answer.

Does not send files, does not support buttons, for example clicking a button (including a submit button) sends its value as form data, but because this is an ajax request the button click will not be sent.

To support buttons you can capture the actual button click instead of the submit.

jQuery(document).click(function(e){
    var self = jQuery(e.target);
    if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){
        e.preventDefault();
        var form = self.closest('form'), formdata = form.serialize();
        //add the clicked button to the form data
        if(self.attr('name')){
            formdata += (formdata!=='')? '&':'';
            formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
        }
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: formdata, 
            success: function(data) {
                console.log(data);
            }
        });
    }
});
HTTP_X_REQUESTED_WITH

PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //is ajax
}

How would this work if you DID want to send a file with this form?

@YamiMedina that's not a simple solution, you need to send the entire request in a different format (multipart format) with the file data

javascript - jQuery AJAX submit form - Stack Overflow

javascript jquery ajax submit html-form
Rectangle 27 24

Simple version (does not send images)

<form action="/my/ajax/url" class="my-form">
...
</form>
<script>
    (function($){
        $("body").on("submit", ".my-form", function(e){
            e.preventDefault();
            var form = $(e.target);
            $.post( form.attr("action"), form.serialize(), function(res){
                console.log(res);
            });
        });
    )(jQuery);
</script>
  • You can run this before the document is ready
  • You can remove and re-add the form and it will still work
  • It will post to the same location as the normal form, specified in the form's "action" attribute
jQuery(document).submit(function(e){
    var form = jQuery(e.target);
    if(form.is("#form-id")){ // check if this is the form that you want (delete this check to apply this to all forms)
        e.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: form.serialize(), // serializes the form's elements.
            success: function(data) {
                console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
            }
        });
    }
});

I wanted to edit Alfrekjv's answer but deviated too much from it so decided to post this as a separate answer.

Does not send files, does not support buttons, for example clicking a button (including a submit button) sends its value as form data, but because this is an ajax request the button click will not be sent.

To support buttons you can capture the actual button click instead of the submit.

jQuery(document).click(function(e){
    var self = jQuery(e.target);
    if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){
        e.preventDefault();
        var form = self.closest('form'), formdata = form.serialize();
        //add the clicked button to the form data
        if(self.attr('name')){
            formdata += (formdata!=='')? '&':'';
            formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
        }
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: formdata, 
            success: function(data) {
                console.log(data);
            }
        });
    }
});
HTTP_X_REQUESTED_WITH

PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //is ajax
}

How would this work if you DID want to send a file with this form?

@YamiMedina that's not a simple solution, you need to send the entire request in a different format (multipart format) with the file data

javascript - jQuery AJAX submit form - Stack Overflow

javascript jquery ajax submit html-form
Rectangle 27 27

"No-omg-never!" comes to mind when I see this method of element access. The problem with this is that it assumes that the DOM is a normal data structure (e.g.: an array) wherein the element order is static, consistent or reliable in anyway. We know that 99.9999% of the time, that this is not the case. Reordering or input elements within the form, adding another form to the page before the form in question, or moving the the form in question are all cases where this code breaks. Short story: this is very fragile. As soon as you add or move something, it's going to break.

id
document.getElementById("myform").foo;

My main issue with this method is that the name attribute is useless when applied to a form. The name is not passed to the server as part of the POST/GET and doesn't work for hash style bookmarks.

In my opinion, this is the most preferable method. Direct access is the most concise and clear method.

I just so happened to be watch a video from Douglas Crockford and he weighed in on this very subject. The point of interest is at -12:00. To summarize:

  • Document collections (document.anchor, document.form, etc) are obsolete and irrelevant (method 1).
  • The name attribute is used to name things, not to access them. It is for naming things like windows, input fields, and anchor tags.
  • "ID is the thing that you should use to uniquely identify an element so that you can get access to it. They (name and ID) used to be interchangeable, but they aren't anymore."

So there you have it. Semantically, this makes the most sense.

So is this just a hack? document.getElementById("myform").foo; After studying the DOM quite a bit, I'm unclear as to why this even works. My guess is the form object is also an array of it's child elements indexed on the html name attribute...

Also you mention "the name is not passed to the server as part of the POST/GET and doesn't work for hash style bookmarks". Isn't this precisely what IS passed to the server? When you are working with PHP, it's the name attribute that is your index in the $_POST global.

@Justin, it's the name attribute that gets passed to the server.

document.aForm.foo
HTMLFormElement
caller getter any namedItem(in DOMString name);

@both you guys: "...the name attribute is useless when applied to a form..." I'm not talking about the name attribute of an input or select, I'm talking about the name attribute of a form. The name attribute of a form does not get passed to the server.

javascript - Best Practice: Access form elements by HTML id or name at...

javascript html forms dom
Rectangle 27 64

Custom Tooltips with pure CSS - no JavaScript needed:

As an alternative to the default title attribute tooltips, you can make your own custom CSS tooltips using :before/:after pseudo elements and HTML5 data-* attributes.

Using the provided CSS, you can add a tooltip to an element using the data-tooltip attribute.

You can also control the position of the custom tooltip using the data-tooltip-position attribute (accepted values: top/right/bottom/left).

For instance, the following will add a tooltop positioned at the bottom of the span element.

<span data-tooltip="Custom tooltip text." data-tooltip-position="bottom">Custom bottom tooltip.</span>

You can display the custom tooltips with pseudo elements by retrieving the custom attribute values using the attr() function.

[data-tooltip]:before {
    content: attr(data-tooltip);
}

In terms of positioning the tooltip, just use the attribute selector and change the placement based on the attribute's value.

Full CSS used in the example

[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: help;
    padding: 4px;
}
/* Tooltip styling */
[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.4;
    min-width: 100px;
    text-align: center;
    border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
    bottom: 100%;
    margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
    left: 100%;
    margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
    top: 100%;
    margin-top: 6px;
}
[data-tooltip-position="left"]:before {
    right: 100%;
    margin-right: 6px;
}

/* Tooltip arrow styling/placement */
[data-tooltip]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
    left: 50%;
    margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
    top: 50%;
    margin-top: -6px;
}
[data-tooltip-position="top"]:after {
    bottom: 100%;
    border-width: 6px 6px 0;
    border-top-color: #000;
}
[data-tooltip-position="right"]:after {
    left: 100%;
    border-width: 6px 6px 6px 0;
    border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
    top: 100%;
    border-width: 0 6px 6px;
    border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
    right: 100%;
    border-width: 6px 0 6px 6px;
    border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}

This was great except doesn't work in IE10 :/

Yes I just tested it and also wasn't surprised it didn't work .Good old IE! ;)

@JoshCrozier it helped a lot

html - How do I add a tool tip to a span element? - Stack Overflow

html css
Rectangle 27 64

Custom Tooltips with pure CSS - no JavaScript needed:

As an alternative to the default title attribute tooltips, you can make your own custom CSS tooltips using :before/:after pseudo elements and HTML5 data-* attributes.

Using the provided CSS, you can add a tooltip to an element using the data-tooltip attribute.

You can also control the position of the custom tooltip using the data-tooltip-position attribute (accepted values: top/right/bottom/left).

For instance, the following will add a tooltop positioned at the bottom of the span element.

<span data-tooltip="Custom tooltip text." data-tooltip-position="bottom">Custom bottom tooltip.</span>

You can display the custom tooltips with pseudo elements by retrieving the custom attribute values using the attr() function.

[data-tooltip]:before {
    content: attr(data-tooltip);
}

In terms of positioning the tooltip, just use the attribute selector and change the placement based on the attribute's value.

Full CSS used in the example

[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: help;
    padding: 4px;
}
/* Tooltip styling */
[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.4;
    min-width: 100px;
    text-align: center;
    border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
    bottom: 100%;
    margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
    left: 100%;
    margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
    top: 100%;
    margin-top: 6px;
}
[data-tooltip-position="left"]:before {
    right: 100%;
    margin-right: 6px;
}

/* Tooltip arrow styling/placement */
[data-tooltip]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
    left: 50%;
    margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
    top: 50%;
    margin-top: -6px;
}
[data-tooltip-position="top"]:after {
    bottom: 100%;
    border-width: 6px 6px 0;
    border-top-color: #000;
}
[data-tooltip-position="right"]:after {
    left: 100%;
    border-width: 6px 6px 6px 0;
    border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
    top: 100%;
    border-width: 0 6px 6px;
    border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
    right: 100%;
    border-width: 6px 0 6px 6px;
    border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}

This was great except doesn't work in IE10 :/

Yes I just tested it and also wasn't surprised it didn't work .Good old IE! ;)

@JoshCrozier it helped a lot

html - How do I add a tool tip to a span element? - Stack Overflow

html css
Rectangle 27 111

Short and simple: Because the elements you are looking for do not exist in the document (yet).

getElementsByTagName
querySelector

There are two reasons why an element might not exist:

An element with the passed ID really does not exist in the document. You should double check that the ID you pass to getElementById really matches an ID of an existing element in the (generated) HTML and that you have not misspelled the ID (IDs are case-sensitive!).

Incidentally, in the majority of contemporary browsers, which implement querySelector() and querySelectorAll() methods, CSS-style notation is used to retrieve an element by its id, for example: document.querySelector('#elementID'), as opposed to the method by which an element is retrieved by its id under document.getElementById('elementID'); in the first the # character is essential, in the second it would lead to the element not being retrieved.

getElementById

The latter case is quite common. Browsers parse and process the HTML from top to bottom. That means that any call to a DOM element which occurs before that DOM element appears in the HTML, will fail.

Consider the following example:

<script>
    var element = document.getElementById('my_element');
</script>

<div id="my_element"></div>

The div appears after the script. At the moment the script is executed, the element does not exist yet and getElementById will return null.

The same applies to all selectors with jQuery. jQuery won't find elements if you misspelled your selector or you are trying to select them before they actually exist.

An added twist is when jQuery is not found because you have loaded the script without protocol and are running from file system:

<script src="//somecdn.somewhere.com/jquery.min.js"></script>

this syntax is used to allow the script to load via HTTPS on a page with protocol https:// and to load the HTTP version on a page with protocol http://

It has the unfortunate side effect of attempting and failing to load file://somecdn.somewhere.com...

Before you make a call to getElementById (or any DOM method for that matter), make sure the elements you want to access exist, i.e. the DOM is loaded.

This can be ensured by simply putting your JavaScript after the corresponding DOM element

<div id="my_element"></div>

<script>
    var element = document.getElementById('my_element');
</script>

in which case you can also put the code just before the closing body tag (</body>) (all DOM elements will be available at the time the script is executed).

Other solutions include listening to the load [MDN] or DOMContentLoaded [MDN] events. In these cases it does not matter where in the document you place the JavaScript code, you just have to remember to put all DOM processing code in the event handlers.

window.onload = function() {
    // process DOM elements here
};

// or

// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
    // process DOM elements here
});

First make sure that jQuery is loaded properly. Use the browser's developer tools to find out whether the jQuery file was found and correct the URL if it wasn't (e.g. add the http: or https: scheme at the beginning, adjust the path, etc.)

Listening to the load/DOMContentLoaded events is exactly what jQuery is doing with .ready() [docs]. All your jQuery code that affects DOM element should be inside that event handler.

In fact, the jQuery tutorial explicitly states:

As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.

To do this, we register a ready event for the document.

$(document).ready(function() {
   // do stuff when DOM is ready
});

Alternatively you can also use the shorthand syntax:

$(function() {
    // do stuff when DOM is ready
});

Would it be worth amending the last bit about the ready event to reflect the "newer" preferred syntax, or is it better to leave it as-is so that it works across older versions?

For jQuery, is it worth also adding in the alternative $(window).load() (and possibly syntactic alternatives to the $(document).ready(), $(function(){})? It seems related, but it feels slightly tangential to the point you're making.

@David: Good point with .load. Regarding syntax alternatives, they could be looked up in the documentation but since answers should be self contained, it might actually be worth adding them. Then again, I'm pretty sure this specific bit about jQuery was answered already and is probably covered in another answers and linking to it might suffice.

@David: I have to revise: Apparently .load is deprecated: api.jquery.com/load-event. I don't know if it's for images only or window as well.

@David: No worries :) Even if you are not sure, it's good that you mentioned it. I will probably add just some simple code snippets to show the usage. Thanks for your input!

javascript - Why does jQuery or a DOM method such as getElementById no...

javascript jquery dom
Rectangle 27 109

Short and simple: Because the elements you are looking for do not exist in the document (yet).

getElementsByTagName
querySelector

There are two reasons why an element might not exist:

An element with the passed ID really does not exist in the document. You should double check that the ID you pass to getElementById really matches an ID of an existing element in the (generated) HTML and that you have not misspelled the ID (IDs are case-sensitive!).

Incidentally, in the majority of contemporary browsers, which implement querySelector() and querySelectorAll() methods, CSS-style notation is used to retrieve an element by its id, for example: document.querySelector('#elementID'), as opposed to the method by which an element is retrieved by its id under document.getElementById('elementID'); in the first the # character is essential, in the second it would lead to the element not being retrieved.

getElementById

The latter case is quite common. Browsers parse and process the HTML from top to bottom. That means that any call to a DOM element which occurs before that DOM element appears in the HTML, will fail.

Consider the following example:

<script>
    var element = document.getElementById('my_element');
</script>

<div id="my_element"></div>

The div appears after the script. At the moment the script is executed, the element does not exist yet and getElementById will return null.

The same applies to all selectors with jQuery. jQuery won't find elements if you misspelled your selector or you are trying to select them before they actually exist.

An added twist is when jQuery is not found because you have loaded the script without protocol and are running from file system:

<script src="//somecdn.somewhere.com/jquery.min.js"></script>

this syntax is used to allow the script to load via HTTPS on a page with protocol https:// and to load the HTTP version on a page with protocol http://

It has the unfortunate side effect of attempting and failing to load file://somecdn.somewhere.com...

Before you make a call to getElementById (or any DOM method for that matter), make sure the elements you want to access exist, i.e. the DOM is loaded.

This can be ensured by simply putting your JavaScript after the corresponding DOM element

<div id="my_element"></div>

<script>
    var element = document.getElementById('my_element');
</script>

in which case you can also put the code just before the closing body tag (</body>) (all DOM elements will be available at the time the script is executed).

Other solutions include listening to the load [MDN] or DOMContentLoaded [MDN] events. In these cases it does not matter where in the document you place the JavaScript code, you just have to remember to put all DOM processing code in the event handlers.

window.onload = function() {
    // process DOM elements here
};

// or

// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
    // process DOM elements here
});

First make sure that jQuery is loaded properly. Use the browser's developer tools to find out whether the jQuery file was found and correct the URL if it wasn't (e.g. add the http: or https: scheme at the beginning, adjust the path, etc.)

Listening to the load/DOMContentLoaded events is exactly what jQuery is doing with .ready() [docs]. All your jQuery code that affects DOM element should be inside that event handler.

In fact, the jQuery tutorial explicitly states:

As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.

To do this, we register a ready event for the document.

$(document).ready(function() {
   // do stuff when DOM is ready
});

Alternatively you can also use the shorthand syntax:

$(function() {
    // do stuff when DOM is ready
});

Would it be worth amending the last bit about the ready event to reflect the "newer" preferred syntax, or is it better to leave it as-is so that it works across older versions?

For jQuery, is it worth also adding in the alternative $(window).load() (and possibly syntactic alternatives to the $(document).ready(), $(function(){})? It seems related, but it feels slightly tangential to the point you're making.

@David: Good point with .load. Regarding syntax alternatives, they could be looked up in the documentation but since answers should be self contained, it might actually be worth adding them. Then again, I'm pretty sure this specific bit about jQuery was answered already and is probably covered in another answers and linking to it might suffice.

@David: I have to revise: Apparently .load is deprecated: api.jquery.com/load-event. I don't know if it's for images only or window as well.

@David: No worries :) Even if you are not sure, it's good that you mentioned it. I will probably add just some simple code snippets to show the usage. Thanks for your input!

javascript - Why does jQuery or a DOM method such as getElementById no...

javascript jquery dom
Rectangle 27 107

Short and simple: Because the elements you are looking for do not exist in the document (yet).

getElementsByTagName
querySelector

There are two reasons why an element might not exist:

An element with the passed ID really does not exist in the document. You should double check that the ID you pass to getElementById really matches an ID of an existing element in the (generated) HTML and that you have not misspelled the ID (IDs are case-sensitive!).

Incidentally, in the majority of contemporary browsers, which implement querySelector() and querySelectorAll() methods, CSS-style notation is used to retrieve an element by its id, for example: document.querySelector('#elementID'), as opposed to the method by which an element is retrieved by its id under document.getElementById('elementID'); in the first the # character is essential, in the second it would lead to the element not being retrieved.

getElementById

The latter case is quite common. Browsers parse and process the HTML from top to bottom. That means that any call to a DOM element which occurs before that DOM element appears in the HTML, will fail.

Consider the following example:

<script>
    var element = document.getElementById('my_element');
</script>

<div id="my_element"></div>

The div appears after the script. At the moment the script is executed, the element does not exist yet and getElementById will return null.

The same applies to all selectors with jQuery. jQuery won't find elements if you misspelled your selector or you are trying to select them before they actually exist.

An added twist is when jQuery is not found because you have loaded the script without protocol and are running from file system:

<script src="//somecdn.somewhere.com/jquery.min.js"></script>

this syntax is used to allow the script to load via HTTPS on a page with protocol https:// and to load the HTTP version on a page with protocol http://

It has the unfortunate side effect of attempting and failing to load file://somecdn.somewhere.com...

Before you make a call to getElementById (or any DOM method for that matter), make sure the elements you want to access exist, i.e. the DOM is loaded.

This can be ensured by simply putting your JavaScript after the corresponding DOM element

<div id="my_element"></div>

<script>
    var element = document.getElementById('my_element');
</script>

in which case you can also put the code just before the closing body tag (</body>) (all DOM elements will be available at the time the script is executed).

Other solutions include listening to the load [MDN] or DOMContentLoaded [MDN] events. In these cases it does not matter where in the document you place the JavaScript code, you just have to remember to put all DOM processing code in the event handlers.

window.onload = function() {
    // process DOM elements here
};

// or

// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
    // process DOM elements here
});

First make sure that jQuery is loaded properly. Use the browser's developer tools to find out whether the jQuery file was found and correct the URL if it wasn't (e.g. add the http: or https: scheme at the beginning, adjust the path, etc.)

Listening to the load/DOMContentLoaded events is exactly what jQuery is doing with .ready() [docs]. All your jQuery code that affects DOM element should be inside that event handler.

In fact, the jQuery tutorial explicitly states:

As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.

To do this, we register a ready event for the document.

$(document).ready(function() {
   // do stuff when DOM is ready
});

Alternatively you can also use the shorthand syntax:

$(function() {
    // do stuff when DOM is ready
});

Would it be worth amending the last bit about the ready event to reflect the "newer" preferred syntax, or is it better to leave it as-is so that it works across older versions?

For jQuery, is it worth also adding in the alternative $(window).load() (and possibly syntactic alternatives to the $(document).ready(), $(function(){})? It seems related, but it feels slightly tangential to the point you're making.

@David: Good point with .load. Regarding syntax alternatives, they could be looked up in the documentation but since answers should be self contained, it might actually be worth adding them. Then again, I'm pretty sure this specific bit about jQuery was answered already and is probably covered in another answers and linking to it might suffice.

@David: I have to revise: Apparently .load is deprecated: api.jquery.com/load-event. I don't know if it's for images only or window as well.

@David: No worries :) Even if you are not sure, it's good that you mentioned it. I will probably add just some simple code snippets to show the usage. Thanks for your input!

javascript - Why does jQuery or a DOM method such as getElementById no...

javascript jquery dom
Rectangle 27 106

Short and simple: Because the elements you are looking for do not exist in the document (yet).

getElementsByTagName
querySelector

There are two reasons why an element might not exist:

An element with the passed ID really does not exist in the document. You should double check that the ID you pass to getElementById really matches an ID of an existing element in the (generated) HTML and that you have not misspelled the ID (IDs are case-sensitive!).

Incidentally, in the majority of contemporary browsers, which implement querySelector() and querySelectorAll() methods, CSS-style notation is used to retrieve an element by its id, for example: document.querySelector('#elementID'), as opposed to the method by which an element is retrieved by its id under document.getElementById('elementID'); in the first the # character is essential, in the second it would lead to the element not being retrieved.

getElementById

The latter case is quite common. Browsers parse and process the HTML from top to bottom. That means that any call to a DOM element which occurs before that DOM element appears in the HTML, will fail.

Consider the following example:

<script>
    var element = document.getElementById('my_element');
</script>

<div id="my_element"></div>

The div appears after the script. At the moment the script is executed, the element does not exist yet and getElementById will return null.

The same applies to all selectors with jQuery. jQuery won't find elements if you misspelled your selector or you are trying to select them before they actually exist.

An added twist is when jQuery is not found because you have loaded the script without protocol and are running from file system:

<script src="//somecdn.somewhere.com/jquery.min.js"></script>

this syntax is used to allow the script to load via HTTPS on a page with protocol https:// and to load the HTTP version on a page with protocol http://

It has the unfortunate side effect of attempting and failing to load file://somecdn.somewhere.com...

Before you make a call to getElementById (or any DOM method for that matter), make sure the elements you want to access exist, i.e. the DOM is loaded.

This can be ensured by simply putting your JavaScript after the corresponding DOM element

<div id="my_element"></div>

<script>
    var element = document.getElementById('my_element');
</script>

in which case you can also put the code just before the closing body tag (</body>) (all DOM elements will be available at the time the script is executed).

Other solutions include listening to the load [MDN] or DOMContentLoaded [MDN] events. In these cases it does not matter where in the document you place the JavaScript code, you just have to remember to put all DOM processing code in the event handlers.

window.onload = function() {
    // process DOM elements here
};

// or

// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
    // process DOM elements here
});

First make sure that jQuery is loaded properly. Use the browser's developer tools to find out whether the jQuery file was found and correct the URL if it wasn't (e.g. add the http: or https: scheme at the beginning, adjust the path, etc.)

Listening to the load/DOMContentLoaded events is exactly what jQuery is doing with .ready() [docs]. All your jQuery code that affects DOM element should be inside that event handler.

In fact, the jQuery tutorial explicitly states:

As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.

To do this, we register a ready event for the document.

$(document).ready(function() {
   // do stuff when DOM is ready
});

Alternatively you can also use the shorthand syntax:

$(function() {
    // do stuff when DOM is ready
});

Would it be worth amending the last bit about the ready event to reflect the "newer" preferred syntax, or is it better to leave it as-is so that it works across older versions?

For jQuery, is it worth also adding in the alternative $(window).load() (and possibly syntactic alternatives to the $(document).ready(), $(function(){})? It seems related, but it feels slightly tangential to the point you're making.

@David: Good point with .load. Regarding syntax alternatives, they could be looked up in the documentation but since answers should be self contained, it might actually be worth adding them. Then again, I'm pretty sure this specific bit about jQuery was answered already and is probably covered in another answers and linking to it might suffice.

@David: I have to revise: Apparently .load is deprecated: api.jquery.com/load-event. I don't know if it's for images only or window as well.

@David: No worries :) Even if you are not sure, it's good that you mentioned it. I will probably add just some simple code snippets to show the usage. Thanks for your input!

javascript - Why does jQuery or a DOM method such as getElementById no...

javascript jquery dom
Rectangle 27 106

Short and simple: Because the elements you are looking for do not exist in the document (yet).

getElementsByTagName
querySelector

There are two reasons why an element might not exist:

An element with the passed ID really does not exist in the document. You should double check that the ID you pass to getElementById really matches an ID of an existing element in the (generated) HTML and that you have not misspelled the ID (IDs are case-sensitive!).

Incidentally, in the majority of contemporary browsers, which implement querySelector() and querySelectorAll() methods, CSS-style notation is used to retrieve an element by its id, for example: document.querySelector('#elementID'), as opposed to the method by which an element is retrieved by its id under document.getElementById('elementID'); in the first the # character is essential, in the second it would lead to the element not being retrieved.

getElementById

The latter case is quite common. Browsers parse and process the HTML from top to bottom. That means that any call to a DOM element which occurs before that DOM element appears in the HTML, will fail.

Consider the following example:

<script>
    var element = document.getElementById('my_element');
</script>

<div id="my_element"></div>

The div appears after the script. At the moment the script is executed, the element does not exist yet and getElementById will return null.

The same applies to all selectors with jQuery. jQuery won't find elements if you misspelled your selector or you are trying to select them before they actually exist.

An added twist is when jQuery is not found because you have loaded the script without protocol and are running from file system:

<script src="//somecdn.somewhere.com/jquery.min.js"></script>

this syntax is used to allow the script to load via HTTPS on a page with protocol https:// and to load the HTTP version on a page with protocol http://

It has the unfortunate side effect of attempting and failing to load file://somecdn.somewhere.com...

Before you make a call to getElementById (or any DOM method for that matter), make sure the elements you want to access exist, i.e. the DOM is loaded.

This can be ensured by simply putting your JavaScript after the corresponding DOM element

<div id="my_element"></div>

<script>
    var element = document.getElementById('my_element');
</script>

in which case you can also put the code just before the closing body tag (</body>) (all DOM elements will be available at the time the script is executed).

Other solutions include listening to the load [MDN] or DOMContentLoaded [MDN] events. In these cases it does not matter where in the document you place the JavaScript code, you just have to remember to put all DOM processing code in the event handlers.

window.onload = function() {
    // process DOM elements here
};

// or

// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
    // process DOM elements here
});

First make sure that jQuery is loaded properly. Use the browser's developer tools to find out whether the jQuery file was found and correct the URL if it wasn't (e.g. add the http: or https: scheme at the beginning, adjust the path, etc.)

Listening to the load/DOMContentLoaded events is exactly what jQuery is doing with .ready() [docs]. All your jQuery code that affects DOM element should be inside that event handler.

In fact, the jQuery tutorial explicitly states:

As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.

To do this, we register a ready event for the document.

$(document).ready(function() {
   // do stuff when DOM is ready
});

Alternatively you can also use the shorthand syntax:

$(function() {
    // do stuff when DOM is ready
});

Would it be worth amending the last bit about the ready event to reflect the "newer" preferred syntax, or is it better to leave it as-is so that it works across older versions?

For jQuery, is it worth also adding in the alternative $(window).load() (and possibly syntactic alternatives to the $(document).ready(), $(function(){})? It seems related, but it feels slightly tangential to the point you're making.

@David: Good point with .load. Regarding syntax alternatives, they could be looked up in the documentation but since answers should be self contained, it might actually be worth adding them. Then again, I'm pretty sure this specific bit about jQuery was answered already and is probably covered in another answers and linking to it might suffice.

@David: I have to revise: Apparently .load is deprecated: api.jquery.com/load-event. I don't know if it's for images only or window as well.

@David: No worries :) Even if you are not sure, it's good that you mentioned it. I will probably add just some simple code snippets to show the usage. Thanks for your input!

javascript - Why does jQuery or a DOM method such as getElementById no...

javascript jquery dom
Rectangle 27 106

Short and simple: Because the elements you are looking for do not exist in the document (yet).

getElementsByTagName
querySelector

There are two reasons why an element might not exist:

An element with the passed ID really does not exist in the document. You should double check that the ID you pass to getElementById really matches an ID of an existing element in the (generated) HTML and that you have not misspelled the ID (IDs are case-sensitive!).

Incidentally, in the majority of contemporary browsers, which implement querySelector() and querySelectorAll() methods, CSS-style notation is used to retrieve an element by its id, for example: document.querySelector('#elementID'), as opposed to the method by which an element is retrieved by its id under document.getElementById('elementID'); in the first the # character is essential, in the second it would lead to the element not being retrieved.

getElementById

The latter case is quite common. Browsers parse and process the HTML from top to bottom. That means that any call to a DOM element which occurs before that DOM element appears in the HTML, will fail.

Consider the following example:

<script>
    var element = document.getElementById('my_element');
</script>

<div id="my_element"></div>

The div appears after the script. At the moment the script is executed, the element does not exist yet and getElementById will return null.

The same applies to all selectors with jQuery. jQuery won't find elements if you misspelled your selector or you are trying to select them before they actually exist.

An added twist is when jQuery is not found because you have loaded the script without protocol and are running from file system:

<script src="//somecdn.somewhere.com/jquery.min.js"></script>

this syntax is used to allow the script to load via HTTPS on a page with protocol https:// and to load the HTTP version on a page with protocol http://

It has the unfortunate side effect of attempting and failing to load file://somecdn.somewhere.com...

Before you make a call to getElementById (or any DOM method for that matter), make sure the elements you want to access exist, i.e. the DOM is loaded.

This can be ensured by simply putting your JavaScript after the corresponding DOM element

<div id="my_element"></div>

<script>
    var element = document.getElementById('my_element');
</script>

in which case you can also put the code just before the closing body tag (</body>) (all DOM elements will be available at the time the script is executed).

Other solutions include listening to the load [MDN] or DOMContentLoaded [MDN] events. In these cases it does not matter where in the document you place the JavaScript code, you just have to remember to put all DOM processing code in the event handlers.

window.onload = function() {
    // process DOM elements here
};

// or

// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
    // process DOM elements here
});

First make sure that jQuery is loaded properly. Use the browser's developer tools to find out whether the jQuery file was found and correct the URL if it wasn't (e.g. add the http: or https: scheme at the beginning, adjust the path, etc.)

Listening to the load/DOMContentLoaded events is exactly what jQuery is doing with .ready() [docs]. All your jQuery code that affects DOM element should be inside that event handler.

In fact, the jQuery tutorial explicitly states:

As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.

To do this, we register a ready event for the document.

$(document).ready(function() {
   // do stuff when DOM is ready
});

Alternatively you can also use the shorthand syntax:

$(function() {
    // do stuff when DOM is ready
});

Would it be worth amending the last bit about the ready event to reflect the "newer" preferred syntax, or is it better to leave it as-is so that it works across older versions?

For jQuery, is it worth also adding in the alternative $(window).load() (and possibly syntactic alternatives to the $(document).ready(), $(function(){})? It seems related, but it feels slightly tangential to the point you're making.

@David: Good point with .load. Regarding syntax alternatives, they could be looked up in the documentation but since answers should be self contained, it might actually be worth adding them. Then again, I'm pretty sure this specific bit about jQuery was answered already and is probably covered in another answers and linking to it might suffice.

@David: I have to revise: Apparently .load is deprecated: api.jquery.com/load-event. I don't know if it's for images only or window as well.

@David: No worries :) Even if you are not sure, it's good that you mentioned it. I will probably add just some simple code snippets to show the usage. Thanks for your input!

javascript - Why does jQuery or a DOM method such as getElementById no...

javascript jquery dom
Rectangle 27 12

Add the attribute autocomplete="off" to each of your form elements.

This is not part of the W3C HTML standard, but it does work in both Mozilla & IE browsers.

In which standard is this defined? In which browser is this implemented?

It is not defined in any standard, but I haven't seen a browser that does autocomplete that does not obey this tag.

javascript - how to avoid listing previously entered values in certain...

php javascript html
Rectangle 27 2962

To change all classes for an element:

Modern browsers have added classList which provides methods to make it easier to manipulate classes without needing a library:

Unfortunately, these do not work in Internet Explorer prior to v10, though there is a shim to add support for it to IE8 and IE9, available from this page. It is, though, getting more and more supported.

The standard JavaScript way to select an element is using document.getElementById("Id"), which is what the following examples use - you can of course obtain elements in other ways, and in the right situation may simply use this instead - however, going into detail on this is beyond the scope of the answer.

To replace all existing classes with one or more new classes, set the className attribute:

(You can use a space-delimited list to apply multiple classes.)

To add a class to an element, without removing/affecting existing values, append a space and the new classname, like so:

To remove a single class to an element, without affecting other potential classes, a simple regex replace is required:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

An explanation of this regex is as follows:

(?:^|\s) # Match the start of the string, or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be end of string or a space)

The g flag tells the replace to repeat as required, in case the class name has been added multiple times.

The same regex used above for removing a class can also be used as a check as to whether a particular class exists:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

Whilst it is possible to write JavaScript directly inside the HTML event attributes (such as onclick="this.className+=' MyClass'") this is not recommended behaviour. Especially on larger applications, more maintainable code is achieved by separating HTML markup from JavaScript interaction logic.

The first step to achieving this is by creating a function, and calling the function in the onclick attribute, for example:

The second step is to move the onclick event out of the HTML and into JavaScript, for example using addEventListener

<script type="text/javascript">
    function changeClass()
    {
        // Code examples from above
    }

    window.onload = function()
    {
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

(Note that the window.onload part is required so that the contents of that function are executed after the HTML has finished loading - without this, the MyElement might not exist when the JavaScript code is called, so that line would fail.)

The above code is all in standard JavaScript, however it is common practise to use either a framework or a library to simplify common tasks, as well as benefit from fixed bugs and edge cases that you might not think of when writing your code.

Whilst some people consider it overkill to add a ~50KB framework for simply changing a class, if you are doing any substantial amount of JavaScript work, or anything that might have unusual cross-browser behaviour, it is well worth considering.

The examples above have been reproduced below using jQuery, probably the most commonly used JavaScript library (though there are others worth investigating too).

(Note that $ here is the jQuery object.)

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

In addition, jQuery provides a shortcut for adding a class if it doesn't apply, or removing a class that does:

$('#MyElement').toggleClass('MyClass');
$('#MyElement').click(changeClass);
$(':button:contains(My Button)').click(changeClass);

Great answer Peter. One question... why is it better to do with with JQuery than Javascript? JQuery is great, but if this is all you need to do - what justifies including the entire JQuery libray instead of a few lines of JavaScript?

@mattstuehler 1) the phrase "better yet x" often means "better yet (you can) x". 2) To get to the heart of the matter, jQuery is designed to aid in accessing/manipulating the DOM, and very often if you need to do this sort of thing once you have to do it all over the place.

One bug with this solution: When you click on your button multiple times, it will add the Class of " MyClass" to the element multiple times, rather than checking to see if it already exists. Thus you could end up with an HTML class attribute looking something like this: class="button MyClass MyClass MyClass"

If you're trying to remove a class 'myClass' and you have a class 'prefix-myClass' the regex you gave above for removing a class will leave you with 'prefix-' in your className :O

Wow, three years and 183 upvotes and nobody spotted that until now. Thanks jinglesthula, I've corrected the regex so it wont incorrectly remove parts of class names. // I guess this is a good example of why a Framework (like jQuery) is worth using - bugs like this are caught and fixed sooner, and don't require changes to normal code.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

html - Change an element's class with JavaScript - Stack Overflow

javascript html dom
Rectangle 27 2955

To change all classes for an element:

Modern browsers have added classList which provides methods to make it easier to manipulate classes without needing a library:

Unfortunately, these do not work in Internet Explorer prior to v10, though there is a shim to add support for it to IE8 and IE9, available from this page. It is, though, getting more and more supported.

The standard JavaScript way to select an element is using document.getElementById("Id"), which is what the following examples use - you can of course obtain elements in other ways, and in the right situation may simply use this instead - however, going into detail on this is beyond the scope of the answer.

To replace all existing classes with one or more new classes, set the className attribute:

(You can use a space-delimited list to apply multiple classes.)

To add a class to an element, without removing/affecting existing values, append a space and the new classname, like so:

To remove a single class to an element, without affecting other potential classes, a simple regex replace is required:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

An explanation of this regex is as follows:

(?:^|\s) # Match the start of the string, or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be end of string or a space)

The g flag tells the replace to repeat as required, in case the class name has been added multiple times.

The same regex used above for removing a class can also be used as a check as to whether a particular class exists:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

Whilst it is possible to write JavaScript directly inside the HTML event attributes (such as onclick="this.className+=' MyClass'") this is not recommended behaviour. Especially on larger applications, more maintainable code is achieved by separating HTML markup from JavaScript interaction logic.

The first step to achieving this is by creating a function, and calling the function in the onclick attribute, for example:

The second step is to move the onclick event out of the HTML and into JavaScript, for example using addEventListener

<script type="text/javascript">
    function changeClass()
    {
        // Code examples from above
    }

    window.onload = function()
    {
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

(Note that the window.onload part is required so that the contents of that function are executed after the HTML has finished loading - without this, the MyElement might not exist when the JavaScript code is called, so that line would fail.)

The above code is all in standard JavaScript, however it is common practise to use either a framework or a library to simplify common tasks, as well as benefit from fixed bugs and edge cases that you might not think of when writing your code.

Whilst some people consider it overkill to add a ~50KB framework for simply changing a class, if you are doing any substantial amount of JavaScript work, or anything that might have unusual cross-browser behaviour, it is well worth considering.

The examples above have been reproduced below using jQuery, probably the most commonly used JavaScript library (though there are others worth investigating too).

(Note that $ here is the jQuery object.)

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

In addition, jQuery provides a shortcut for adding a class if it doesn't apply, or removing a class that does:

$('#MyElement').toggleClass('MyClass');
$('#MyElement').click(changeClass);
$(':button:contains(My Button)').click(changeClass);

Great answer Peter. One question... why is it better to do with with JQuery than Javascript? JQuery is great, but if this is all you need to do - what justifies including the entire JQuery libray instead of a few lines of JavaScript?

@mattstuehler 1) the phrase "better yet x" often means "better yet (you can) x". 2) To get to the heart of the matter, jQuery is designed to aid in accessing/manipulating the DOM, and very often if you need to do this sort of thing once you have to do it all over the place.

One bug with this solution: When you click on your button multiple times, it will add the Class of " MyClass" to the element multiple times, rather than checking to see if it already exists. Thus you could end up with an HTML class attribute looking something like this: class="button MyClass MyClass MyClass"

If you're trying to remove a class 'myClass' and you have a class 'prefix-myClass' the regex you gave above for removing a class will leave you with 'prefix-' in your className :O

Wow, three years and 183 upvotes and nobody spotted that until now. Thanks jinglesthula, I've corrected the regex so it wont incorrectly remove parts of class names. // I guess this is a good example of why a Framework (like jQuery) is worth using - bugs like this are caught and fixed sooner, and don't require changes to normal code.

html - Change an element's class with JavaScript - Stack Overflow

javascript html dom