CODEWITHSUNDEEP
javascripthtmlcss
karthic
karthic

Reputation: 1

apply classname (css) based on screen resolution

I have a problem when I am working on resolution base application.

If I have 1024 by 768 resolution my application should be 100% (table Layout). If I have above 1024 by 768 resolution the application should be in center align (table width is 80%).

function MOSTRA() {
    var SCR = screen.availWidth;
    var BRW = window.outerWidth;
    if (BRW < SCR) {
        document.getElementById('sample').className = 'maintable';
    } else {
        document.getElementById('sample').className = 'maintable1';
    }
}
window.onresize = MOSTRA;
window.onload = MOSTRA;

I have used the above code but this is not working.

Hi all i have checked with putting alert in required place. Now i know where the problem is occurring in window.outerWidth it seems because when i alert in that area i am getting undefined in IE. It seems Ie is not supporting outerwidth. I have taken the above code from the below link.

http://jsfiddle.net/Guffa/q56WM/

Please helpe me.

This is a urgent issue

Thanks in advance

Upvotes: 0

Views: 438

Answers (2)

ComFreek
ComFreek

Reputation: 29444

Use CSS3 Media Queries: 

@media screen and (min-width: 1024px) and (min-width: 768px)
{
  /* Center table! */
}

Also possible:

<link rel="stylesheet" media="screen and (min-width: 1024px) and (min-width: 768px)" href="example.css" />

JS variant (because OP didn't want CSS 3): 

if (window.screen.width >= 1024 && window.screen.width >= 768) {
  document.head.innerHTML += '<link rel="stylesheet" href="centerTable.css" type="text/css" />'
}

Upvotes: 2

circusdei
circusdei

Reputation: 1967

Pragmatically include style-sheets based on display width, media type: http://www.w3.org/TR/css3-mediaqueries/

Upvotes: 0

Related Questions