Changing a DIV Width With JQuery Using Partial Matching

Recently I had to modify a site that has literally tens of thousands of pages with embedded videos where the videos have  fixed width. The old site width supported  a fixed width of 700px. The new site width only support s a pixel width of 600px.

Add to the mix every single player has a different ID associated with the DIV and even more fun the div is populated with JavaScript. To solve the problem I used jQuery.

Right out of the gate lets look at an example of what the code on the site looked like before. Each Player loads dynamically with JavaScript into a DIV that looks like so;

<div id="bolt-710881740553305"><div id="bolt-710881740553305-container"...

Every single one of those ID numbers changes based on which video is loading. So to automatically change the width from 700px to 600px I used some basic jQuery to find any DIV that have an ID field that starts with bolt and in doing so assigned them all a new width.

I am waiting until the page is done loading before I fire my code to be sure that the JS has had a chance to load and any other rules have been applied.  The very simple code that does the work is as follows;

$(document).ready(function()
{
$("div[id^='bolt']").width('100%'); 
});

There you have a very simple method of finding a div using regular expression where you are only matching part of the title and changing part of its css rules, in this case the width.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s