This article will walk you through the steps to add a little box to the top of your web pages for your Joomla site. This little box will display the current screen width, even as your change the width of the browser window or view your site on a tablet or phone. This is an invaluable tool for adding @media styles to your style sheet for narrow screen widths.

screenwidth

If you narrow down or expand your browser window, or view your site on other devices, the number in the box will change accordingly.

The screen width is obtained using the jQuery $(window).width() function.

You will need to:

  • create a JavaScript document in a text editor and upload the document to the js folder for your template
  • add some styles to your style sheet
  • edit the index.php for your template in a text editor

Once you are done with your site development, you can simply add display: none to the styles for this element. If you need to view this information later on, simply remove or comment out the display: none property. The element that contains this number will have a position: fixed. This way it will always be displayed, even as you scroll down the page and it won't interfere with the layout of your page.

Add a JavaScript file

In your text editor, open up a blank document. Enter the following lines:

(function($) {
    $(document).ready(function() {
        var openWidth = $(window).width();
        $("#screenwidth").html('<p>Screen: ' + openWidth + 'px</p>');
        $( window ).resize(function() {
            var newWidth = $(window).width();
            $("#screenwidth").html('<p>Screen: ' + newWidth + 'px</p>');
        });
    })
})(jQuery);

To explain what is happening with this code:


(function($) { ... })(jQuery);

The jQuery code is wrapped in this function so it works with no-conflict mode.


var openWidth = $(window).width();

This sets up a variable to hold the information provided by the jQuery function of .width(); The term window refers to the DOM element window, which is the window of the screen. This will display on tablets and phones as well.


$("#screenwidth").html('<p>Screen: ' + openWidth + 'px</p>');

This uses jQuery's .html() function to populate the <div> we will set up in index.php with the information about the screen width.


$( window ).resize(function() {

This uses jQuery's .resize() function to be able to change the value inside the <div> as the screen is narrowed or expanded.


Save this document as screenwidth.js. Upload it to the js folder for your template. Make a folder if you template does not already have one.

Add styling for this new element

Open up your custom stylesheet, or add the following to the end of the stylesheet for your template. Remember, if you upgrade your template, you may have to replace these lines.

#screenwidth {position: fixed; top: 20px; right: 20px; width: 100px; padding:2px 5px 0 5px;height: 25px;z-index: 100; background: #fff;}

This styles the <div id="screenwidth"> to be fixed in the upper right corner of your browser window.

Edit index.php, add a link to the .js file and add the element to the HTML to display the number

Make a safety backup of the index.php file in the root of your templates folder before editing the original. Also keep in mind that if you upgrade your template, you will need to repeat these changes.

Open up the index.php file in a text editor. Find the last ?> in the top PHP section of the page. Add the following PHP lines just before the ?>:

/*****CUSTOM*****/
$doc->addScript('templates/' . $this->template . '/js/screenwidth.js');
/*****END CUSTOM*****/

What this line does is use the Joomla API to link to a JavaScript file in the js folder for your template.

Farther down, go into the <html> section of index.php. Look for the opening <body> tag. Just below this tag, add the following lines:

<!--- CUSTOM -->
<div id="screenwidth"></div>
<!--- END CUSTOM -->

This will add an <div> to hold the information. Note how comments in the HTML section have <!---  ---> surrounding them.

Test your work

Now test this out by opening your site in a browser. You should see a little white box in the upper right corner of your site. The box should display your current screen width. Reduce the width of the browser and see if this number changes. If it isn't working, go back and check your code. If is still isn't working, you should also verify that the JavaScript file is loading with a tool like Firebug.

Remove this box for the live site

To remove this box when you af finished with styling your site, edit the style sheet. Add the style display: none; to the styles for #screenwidth.


Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.