dynamic module dimensions (resolution dependent)

Discuss the development and implementation of Joomla! 1.0.x templates here.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Sat Feb 09, 2008 10:52 pm

dynamic module dimensions (resolution dependent)

Post by SliderOh » Sat Feb 09, 2008 11:07 pm


I am currently working on a small page, I'm using Joomla 1.0.13 and a modified version of gladibol template.

This template has fixed width. The person for whom I'm creating this side requested that it has dynamic width depending on the screen resolution. I have found a script and modified it and achieved the required effect. The resolution is detected and a different css stylesheet is used for each of the resolutions defined.

However, the site has the Random Image module placed as a banner and when the resolution is 1024 or higher, that module needs to be resized so that it fits the rest of the layout. So basically what I am looking for is a way to load different copy of the Random Image module based on the resolution (or maybe the css stylesheet used for particular resolution), for example, if resolution is 800x600, Random Image 1 width 200 is loaded in particular div, when the resolution is 1024x768, Random Image 2 width 400 is loaded instead of Random Image 1.

Is something like that possible? Any help will be much appreciated :)


SliderOh :)

Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Wed Dec 02, 2009 1:47 pm

Re: dynamic layout (resolution dependent)

Post by murrayzz1 » Sun Jul 10, 2011 11:19 am

Here's how to create a resolution dependent layout.

This code snippet uses Javascript to determine the screen size and save it as a cookie. If the cookie is present the Javascript doesn't run and the script takes the screen size from the cookie. It then stores the result in a variable $screen_res.

Code: Select all

	$screen_res = $_COOKIE["users_resolution"];
else //means cookie is not found set it using Javascript

<script language="javascript">

function setCookie() 
 var today = new Date();
 var the_date = new Date("December 31, 2023");
 var the_cookie_date = the_date.toGMTString();
 var the_cookie = "users_resolution="+ screen.width;
 var the_cookie = the_cookie + ";expires=" + the_cookie_date;
 location = 'get_resolution.php';
	echo "Your Screen resolution is set at ". $screen_res;
You can use this script, or variations of it, to create PHP that only includes certain code for specific screen resolutions.

Combine this with media queries to use different style sheets for different resolutions and what you have got is a complete dynamic layout that uses different CSS and creates different HTML depening on the screen width and resolution of the user's browser.

Read more at http://www.southamptonwebdesign.co.uk/dynamic-layout


Return to “Templates & CSS - 1.0.x”