...

View Full Version : Resolved can js tell css what to do?



xelawho
12-21-2010, 02:32 PM
Hi,

I am cross posting this on the html/css branch because it seems to me it involves both css and js. Apologies if that's bad practice - if so, please let me know where it should be and I'll delete the other one.

Anyway, here's the thing: I made a nice little navigation bar out of divs that looks fine on my screen (1280 x 720) but my friend told me that it runs off-screen on his screen (1024 x 600) and then my other friend said that on his screen (1920 x 1080) it barely reaches halfway across.

Obviously I'd like it to look more or less the same on most computers.

So after looking around for a bit, I found this (http://javascript.about.com/library/blscreen1.htm) page which talks about a js code that basically measures the screen space.

Now, being that the only way I can find to make the navigation bar "fit" in different screen resolutions is to change the font size of the text inside the divs, I figured that something like this:


<script type="text/javascript">
if (pageWidth() > 600) {
<style type="text/css">
.navbar {font-size:40%;}
</style>
}
</script>

added to the body of the document might have some effect, but it seems not.

here's the page (http://www.xelawho.com/map/navtest.htm) I'm working on

and the js file I'm using is here (http://www.xelawho.com/map/getscreen.js)

So, to my question (finally): am I writing the code wrong, or is it not possible to control text size in this way?

Or is there a better way to go about this?

thanks for any suggestions.

abduraooft
12-21-2010, 03:04 PM
I am cross posting this on the html/css branch because it seems to me it involves both css and js. Apologies if that's bad practice Yes, it is!
See http://www.codingforums.com/rules.htm and http://www.codingforums.com/postguide.htm

xelawho
12-21-2010, 03:06 PM
apologies again... so where does this question belong?

VIPStephan
12-21-2010, 03:30 PM
This would be more of a JavaScript question since you’re asking whether JavaScript can influence (theoretically any kind of) CSS.

And the answer to the question is: yes, it can, but not the way you’re doing it. There is a specific JS style object (http://www.javascriptkit.com/jsref/style.shtml) but that’s not the best practice. Modern approach to web development is separating content, style, and functionality as much as possible. The content is marked up with plain HTML, styles are applied to the HTML with (external) stylesheets, and enhanced functionality is added through (external) JavaScripts. It all comes together in the HTML document.

Now, instead of manipulating the style through JavaScript you would manipulate the DOM tree (i. e. the HTML) so that you don’t mix CSS with JS. Therefore, to apply a different style to the same element you would manipulate, for example, the class name of an HTML element, and the CSS is adressing that class name.



<div class="info">content here</div>



.info {color: red;}
.newinfo {font-weight: bold}



document.getElementsByClassName('.info').className = 'newinfo';


This way you change the class through JS and the CSS is applied accordingly without you having to mess around with inline styles. So if you decide to change the way .newinfo looks, you don’t change the JS but rather the CSS, as it should be.

However: Modern browsers allow to change the way a page looks with CSS media queries (http://css-tricks.com/css-media-queries/). (resize the browser window using a modern browser like latest Firefox or Safari with that linked page open and you see how the layout changes based on the viewport width)

xelawho
12-21-2010, 04:09 PM
Modern browsers allow to change the way a page looks with CSS media queries (http://css-tricks.com/css-media-queries/). (resize the browser window using a modern browser like latest Firefox or Safari with that linked page open and you see how the layout changes based on the viewport width)

Interesting. I think I might eschew the first option (which looks way too complicated for me) in favor of the above - took me about 2 minutes to set up and it seems to be working great. :thumbsup:

(and if I were an irony fan I guess I would enjoy the fact that the js forum provided a purely css solution that nobody on the css branch offered...)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum