Loading...
 
Skip to main content

Features / Usability

Forum List Topic List

 
Thread actions
Print this page
  • Print all pages

    • resolution

    Posted by syberjj

    is there a way of displaying 2 (or more) diferent layouts for 2 (or more) resolutions?

    thanks

    Reads: 1328

    Posted by syberjj

    nice!

    but i need some help with this ^^

    Copy to clipboard
    function checkBrowserWidth()
{
	var theWidth = getBrowserWidth();
	
	if (theWidth == 0)
	{
		var resolutionCookie = document.cookie.match(/(^|;)tmib_res_layout[^;]*(;|$)/);

		if (resolutionCookie != null)
		{
			setStylesheet(unescape(resolutionCookie[0].split("=")[1]));
		}
		
		addLoadListener(checkBrowserWidth);
		
		return false;
	}

	if (theWidth > 800)
	{
		setStylesheet("1024 x 768");
		document.cookie = "tmib_res_layout=" + escape("1024 x 768");
	}
	else
	{
		setStylesheet("");
		document.cookie = "tmib_res_layout=";
	}
	
	return true;
};




function getBrowserWidth()
{
	if (window.innerWidth)
	{
		return window.innerWidth;
	}
	else if (document.documentElement && document.documentElement.clientWidth != 0)
	{
		return document.documentElement.clientWidth;
	}
	else if (document.body)
	{
		return document.body.clientWidth;
	}
	
	return 0;
};




function setStylesheet(styleTitle)
{
	var currTag;

	if (document.getElementsByTagName)
	{
		for (var i = 0; (currTag = document.getElementsByTagName("link")[i]); i++)
		{
			if (currTag.getAttribute("rel").indexOf("style") != -1 && currTag.getAttribute("title"))
			{
				currTag.disabled = true;

				if(currTag.getAttribute("title") == styleTitle)
				{
					currTag.disabled = false;
				}
			}
		}
	}
	
	return true;
};


    if I am right this is the needed code for the template swaping.
    but how can i integrate this with tikiwiki and what script parts need editing?

    thanks

    Posted by Rick Sapir / Tiki for Smarties

    I'm not 100% sure, but you should be able to simply include the stuff in your header.tpl. First you'll need to link to your 1024x768 size-specific sytle sheet:

    <link rel="alternate stylesheet" type="text/css" href="styles/features_1024.css" title="1024 x 768" />

    Because style sheets cascade, you simply need to define the items that are different than your base CSS.

    Next add the scripts:

    <script type="text/javascript" src="scripts/event_listeners.js">
    <script type="text/javascript" src="scripts/resolution.js">

    Finally FTP the actual CSS and JS files to your site. Voilà (maybe.... let me know).

    -RickQuestion


    Posted by syberjj
    i'll give it a try

    Posted by syberjj

    i'll give it a try
    thanks!