FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Help needed with Javascript and overflow

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


LukeakaDanish
Problem solved!


I searched google for a while and found no solution to my problem:

For people with decent resolutions like 1024*768 i need my page to have "overflow-x: hidden;" which I of course have done in my stylesheet HOWEVER this makes my page useless in 800*600 which i would prefer it to work in.

My idea was to change the overflow attribute with javascript after testing whether the innerWidth attribute was less than 900

The testing bit is fine (see code below) however I cant figure a way to change the overflow attribute!

Thanks in advance for any help

Code:

if (window.innerWidth < 950) {
   //Here i need to change the "overflow-x" attribute of my <body> tag to "auto" or something
}


Last edited by LukeakaDanish on Mon Apr 17, 2006 11:16 pm; edited 2 times in total
Kaneda
LukeakaDanish wrote:
The testing bit is fine (see code below) however I cant figure a way to change the overflow attribute!

Thanks in advance for any help


I'm not really sure, as long as you only want to change the overflow-x attribute, and not both. Normally it would be element.style.overflowX, but that probably doesn't work. Some other possibilities:

Code:
element.style["overflow-x"] = "auto";


Or one that certainly should work... CSS like this:

Code:
body {
  ...
  overflow-x: hidden;
}

body.narrow {
  overflow-x: auto;
}


... and then simply change the class of the <body> tag through javascript:

Code:
element.className = "narrow";
LukeakaDanish
how do i "comunicate" with the body though...

through document.getElementsByTagName or...do i give the body an id or somehting stupid like that... Confused

Mange tak for hjælpen Very Happy

Luke
Kaneda
LukeakaDanish wrote:
how do i "comunicate" with the body though...

through document.getElementsByTagName or...do i give the body an id or somehting stupid like that... Confused

Mange tak for hjælpen Very Happy

Luke


I'd do:

Code:
document.body.className = "narrow";


document.body, contrary to popular belief, is a W3C recommendation (unlike the dreaded document.all). It's also more widely supported than document.getElementsByTagName (which as far as I recall won't work in, say, IE 5 - if anyone cares... Wink). Should work in all modern browsers - and a lot of old ones.

I tend to prefer the className approach in most cases, no matter what element I'm dealing with, since:
- It's easier to apply more style changes if I find out I need to.
- I prefer editing styles as CSS, rather than looking through javascript to find them.
- The class can be applied statically to the HTML, so it's easy to test without having to perform the user interaction that triggers the JS event
- It can be applied to any other elements with one line of Javascript.

Og det var så lidt. Smile
LukeakaDanish
Problem solved! Close plz mr. admin Very Happy

10frih$ donated to kaneda because of his quick responce and helpfulness
Kaneda
LukeakaDanish wrote:
10frih$ donated to kaneda because of his quick responce and helpfulness


I'll never get the point of Frih$, but thanks anyway Wink
mathiaus
closing by request

-close-
This topic is locked: you cannot edit posts or make replies.    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.