Archive for June, 2017

Using jQuery to Delete All Inline HTML Styling

Inline HTML styling (when the style attributes for a particular element are written within the HTML tag) is not something that’s considered a best practice when it comes to HTML and CSS, and it’s becoming less and less common. You don’t often come across inline styling unless a site’s code hasn’t been touched since the 90s or early 2000s, but it’s certainly not unheard of. If you find yourself trying to do a redesign of an older site that contains inline styling within the HTML, you’ll almost absolutely find that overriding the inline styling can be a huge pain.

Rather than go through every HTML file to remove inline styling, all of your inline styling woes can be eradicated using a very simple jQuery code snippet, which will completely get rid of all of the style attributes that can be found within your HTML tags. To see how it works, take a look at the code snippet below:

$("*[style]").attr("style", "");

The code snippet above uses jQuery to select every single style attribute (using the * selector in combination with the [style] attribute) and, using the .attr method, removes all of the values from the inline style elements by replacing the text with nothing (thanks to those empty quotation marks).

This is a super simple solution to getting rid of inline styling that can save you tons and tons of time and aggravation. If you’re working on a smaller site with less instances of style attributes within the HTML tags, then it might be wiser to just go through and remove them manually, but if you’ve got a big size with inline styling on every single page, then this is a great, super straightforward, and rather lightweight solution that will easily and quickly remove every single instance of inline style attributes so that the site in question can be updated to look its very best.

How to Use jQuery to Dynamically Open Links in New Tabs

Even if you’re a new or beginning developer, you probably know that you can easily make links open in new tabs by using the target attribute with your anchor tags. To make a link open in a new tab, all it takes is to make your HTML look like this:

<a href="/link/" target="_blank"></a>

The target=”_blank” attribute is all you need to make your links open in new tabs. But what if your anchor tags weren’t written this way, and you still want your links to open in new tabs? You can go back through your HTML and hand code it yourself, but if you’ve got a lot of anchor tags this could take you a really long time. Luckily, jQuery is here to save the day.

With jQuery,  you can use some really straightforward snippets to dynamically open all external links in new tabs without having to go through every line of your HTML with a fine-toothed comb. To see the snippet for yourself, check out the code below:

$('a[@rel$='external']').click(function(){
     this.target = "_blank";
});

That’s it. All it takes are two lines of  jQuery to make sure that all of your external links open in new tabs. The function is triggered by the .click() event method, so the function won’t run unless any of the external links are clicked on, so it’s a pretty lightweight solution. You can see that the snippet above uses the ‘a[@rel$=’external’]’ selector. This can be used to select all of the external links, and apply the target=”_blank” attribute to it. But, if you find yourself wanting to select all of the anchor tags on your page, you can remove the rel code and simply use ‘a’ as the selector. You can also use a similar concept to select all links of one class or ID type by placing the class or ID name in the selector.