Thursday, March 28, 2024

Modifying CSS Width Attributes with jScript So It Works!

In a previous article, you learned how to get and set CSS attributes on a web page using jQuery. There are a few cases where you might find that the results you expect, are not what you get. One such example is when you are setting the width or height on an HTML element.

Consider the code in listing 1. What would you expect it to do when you click the buttons? If you believe it will increase and decrease the width of the text on the page, then you agree with many other people, who are also wrong!

Listing 1: Using jQuery to get and set width on an element

<html>
<head>
 <style type="text/css">
    p  {
         width: 300px;
       }
 </style>

 <script src="http://www.google.com/jsapi" type="text/javascript"></script>
 <script type="text/javascript">google.load("jquery", "1.3.2");</script>
 <script>
    function increase_p_width () 
    {
       var pWidth = $('p').css('width');
       pWidth = pWidth + 50;

       $('p').css('width', pWidth);
       alert("pWidth = " + pWidth);
    } 
    function decrease_p_width () 
    {
       var pWidth = $('p').css('width');
       pWidth = pWidth - 50;
    
       if (pWidth < 0 )
       {
          pWidth = 0;
       }
       $('p').css('width', pWidth);
       alert("pWidth = " + pWidth);
    } 
 </script>
</head>

<body>
<h1>This is our fun, little example page! </h1>
<p>This is a bit of text followed by a bit more text. It is 
simply here as an example for showing how to change the width
using CSS with jQuery!</p>
<p>This is a bit of additional text following the above text!</p>

<hr width="400" />

<button onclick="increase_p_width()" >Increase Width</button>
<button onclick="decrease_p_width()" >Decrease Width</button>
</body>
</html>

When you display this listing, you will see something similar to Figure 1.


Figure 1: The Sample listing

Listing 1 is doing exactly what was shown in the previous article, where the value of the P tag is being accessed and manipulated. When you click the buttons, however, nothing changes. The width remains the same 300 pixels.

The issue is in the value of the width; attribute. The first time you access the width; of the P tag, you expect to get a value representing 300 pixels since this the value set in the CSS at the beginning of the listing. While the value you obtained does represent 300 pixels, the value placed in pWidth; when you call the css(); method is not 300!

If you add the following line of code to the end of each of the two functions:

alert("pWidth = " + pWidth); 

Listing 2 shows the new increase_p_width () function with the alert added.

Listing 2: The new increase_p_width function

 function increase_p_width () 
    {
       var pWidth = $('p').css('width');
       pWidth = pWidth + 50;

       $('p').css('width', pWidth);
       alert("pWidth = " + pWidth);
    }

You should reload the page and click the buttons to execute the updated functions with the alert. When you do, you should see a message box (as long as you aren’t blocking pop-ups), similar to what is shown in Figure 2.


Figure 2: The real value of pWidth

As you can see, the value of pWidth; contains “300px50”. This is because the value returned for pWidth; from the call to css(); is “300px” and not just 300. The returned value is a string with an indicator of the measurement being used for the width, in this case pixels identified as “px”.

In order to change the value of the width in this manner, you would need to parse the string value that was returned in order to pull out the number. You can do this by calling a function such as parseFloat(); as shown in the updated functions shown in Listing 3

Listing 3: Using parseFloat() to get the numerical width value

<script>
    function increase_p_width () 
    {
       var pWidth = $('p').css('width');
       var newWidth = parseFloat(pWidth) + 50;

       $('p').css('width', newWidth);
    } 
    function decrease_p_width () 
    {
       var pWidth = $('p').css('width');
       var newWidth = parseFloat(pWidth) - 50;
    
       if (newWidth < 50 )
       {
          newWidth = 50;
       }
       $('p').css('width', newWidth);
    } 
 </script>

When you use the code shown in Listing 3, you should find that the width of the p tag is adjusted appropriately.

Of course, now that you’ve seen a solution, if you are using jQuery, there is actually an even simpler way to accomplish this! jQuery provides the width(); method that can be used. The width(); method is used in the same manner as the call to css(). To get the width of the p tag as a number, you could have done the following single line of code:

var pWidth = $('p').width();

This will return from this call will be the numeric value, so there will be no need to call a parse function. This format should work with any HTML tag that has a width. Similarly, there is a height() method that can also be used. The basic format of both methods is:

$(selector).width(property);
$(selector).height(property); 

Listing 4 shows the final, full listing using the width() method. If you display this listing and click the buttons, it should work as expected!

Listing 4: Using the width(); method

<html>
<head>
 <style type="text/css">
    p  {
         width: 300px;
       }
 </style>

 <script src="http://www.google.com/jsapi" type="text/javascript"></script>
 <script type="text/javascript">google.load("jquery", "1.3.2");</script>
 <script>
    function increase_p_width () 
    {
       var pWidth = $('p').width();

       pWidth = pWidth + 50;
       $('p').css('width', pWidth);
    } 
    function decrease_p_width () 
    {
       var pWidth = $('p').width();

       pWidth = pWidth - 50;
       if (pWidth < 50 )
       {
          pWidth = 50;
       }
       $('p').css('width', pWidth);
    } 
 </script>
</head>

<body>
<h1>This is our fun, little example page! </h1>
<p>This is a bit of text followed by a bit more text. It is 
simply here as an example for showing how to change the width
using CSS with jQuery!</p>
<p>This is a bit of additional text following the above text!</p>

<hr width="400" />

<button onclick="increase_p_width()" >Increase Width</button>
<button onclick="decrease_p_width()" >Decrease Width</button>

</body>
</html>

Download the code

In Conclusion

There are a number of issues that people run into when using dynamic CSS in their code. Using the width(); and height(); methods, you now know how to get around the issue with changing the values on the width and height elements within your pages!

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured