Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts

    can js tell css what to do?

    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 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:

    Code:
    <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 I'm working on

    and the js file I'm using is here

    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.
    Last edited by xelawho; 12-21-2010 at 11:24 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    apologies again... so where does this question belong?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,915
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    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 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.

    Code:
    <div class="info">content here</div>
    Code:
    .info {color: red;}
    .newinfo {font-weight: bold}
    Code:
    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. (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)

  • Users who have thanked VIPStephan for this post:

    xelawho (12-21-2010)

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    Quote Originally Posted by VIPStephan View Post
    Modern browsers allow to change the way a page looks with 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.

    (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...)
    Last edited by xelawho; 12-21-2010 at 05:53 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •