#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    9
    Rep Power
    0

    return function value to CSS


    Please look at the following code:

    I want to return the name of a different file based on screen size. Works fine but I want to return the value of function to the CSS attribute, background-image in the <style> tags.
    Tried some methods and searched. Nothing works!
    Please Help!

    <script language="JavaScript">
    function filename()
    {
    switch (screen.width)
    {
    case 800:
    return "masthead1.jpg";
    break;
    case 640:
    return "masthead0.jpg";
    break;
    case 1024:
    return "masthead2.jpg";
    break;
    default:
    return "masthead1.jpg";
    break;
    }
    }
    document.writeln(filename());
    </script>
    <style type="text/css">
    body
    {
    background-image:url("masthead1.jpg");
    margin: 0em 0em 0em 0em;
    }
    </style>
  2. #2
  3. Über nübe
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Babylon 4
    Posts
    240
    Rep Power
    12
    In DOM 2, you can manipulate style sheets:

    http://www.csie.ntu.edu.tw/~b7506051...style_ref.html

    So once you've checked for the client's screen width, you can set the appropriate image for background.
    Hello, old friend...
  4. #3
  5. Über nübe
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Babylon 4
    Posts
    240
    Rep Power
    12
    Fooling around with it, I finally got this to work:

    Code:
    <html>
    <head>
    	<title>change CSS</title>
    
    	<style type="text/css">  /* this would be styleSheet.item(0) */
    	html, body {width:800px;}  /* this would be rules.item(0) */
    	</style>
    	
    </head>
    
    <body>
    
    	<script type="text/javascript">
    	var ss = document.styleSheets.item(0);
                    var rules = ss.cssRules || ss.rules;
    
    	rules.item(0).style.background = 'url(\'masthead1.jpg\')';  // here's where I set the bg image
    	</script>
    
    </body>
    </html>
    Hello, old friend...
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    9
    Rep Power
    0
    I am trying something like this and can't get it to work :-) What am i doing wrong?

    <html>
    <style type="text/css">
    body
    {width:640px;
    width:800px;
    width:1024px;
    margin: 0em 0em 0em 0em;
    }
    </style>

    <body>
    <script type="text/javascript">
    var ss = document.styleSheets.item(0);
    var rules = ss.cssRules || ss.rules;
    switch (screen.width)
    {
    case 800:
    rules.item(1).style.background = "url('masthead1.jpg')";
    break;
    case 640:
    rules.item(0).style.background = "url('masthead1.jpg')"; // here's where I set the bg image
    break;
    case 1024:
    rules.item(2).style.background = "url('masthead1.jpg')"; // here's where I set the bg image
    break;
    default:
    rules.item(1).style.background = "url('masthead1.jpg')"; // here's where I set the bg image
    break;
    }
    </script>
    </body>
    </html>
  8. #5
  9. Über nübe
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Babylon 4
    Posts
    240
    Rep Power
    12
    for starters, all of your cases should be rules.item(0)

    then, I forgot to eliminate the width attribute. Just leave the rule empty, like this:

    body {}

    because your screen width will determine that.

    next, you have to change the filename for each image, depending on the screen width. Right now, they all say masthead1.jpg



    Originally posted by subatta
    I am trying something like this and can't get it to work :-) What am i doing wrong?

    <html>
    <style type="text/css">
    body
    {width:640px;
    width:800px;
    width:1024px;
    margin: 0em 0em 0em 0em;
    }
    </style>

    <body>
    <script type="text/javascript">
    var ss = document.styleSheets.item(0);
    var rules = ss.cssRules || ss.rules;
    switch (screen.width)
    {
    case 800:
    rules.item(1).style.background = "url('masthead1.jpg')";
    break;
    case 640:
    rules.item(0).style.background = "url('masthead1.jpg')"; // here's where I set the bg image
    break;
    case 1024:
    rules.item(2).style.background = "url('masthead1.jpg')"; // here's where I set the bg image
    break;
    default:
    rules.item(1).style.background = "url('masthead1.jpg')"; // here's where I set the bg image
    break;
    }
    </script>
    </body>
    </html>
    Hello, old friend...
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    9
    Rep Power
    0

    Done!


    Thank you.

    I was in a hurry to get out and by the time I got back I figured my mistakes and saw your angel advice.

    Thanks once again!
  12. #7
  13. Über nübe
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Babylon 4
    Posts
    240
    Rep Power
    12
    np, glad I could help.
    Hello, old friend...
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    9
    Rep Power
    0
    it's me again.

    Any way i can return a function's value to an attribute like..

    <frameset border="0" cols="*,fwidth();">

    I want to set the width of frames based on screen size like before.
  16. #9
  17. Über nübe
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Babylon 4
    Posts
    240
    Rep Power
    12
    For that, you would need setAttribute: (DOM level 1)

    http://msdn.microsoft.com/library/de...tattribute.asp

    You're in luck, it applies to <FRAMESET>.

    Example of syntax: http://www.mozilla.org/docs/dom/domr..._el_ref57.html
    Last edited by khwang; November 22nd, 2003 at 10:56 PM.
    Hello, old friend...
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    9
    Rep Power
    0
    I found this link with the clue you provided by a search on google:

    http://dev.eclipse.org/viewcvs/index...p.jsp?rev=1.16

    and adapted the code to work with my requirements. No luck :-(

    Please see the code.. i really appreciate your input.


    ------------------------------------------------------
    <html>
    <head>
    <script type="text/javascript">
    var fs1 = document.getElementById('main1');
    var fs2 = document.getElementById('main2');
    function resizeme()
    {
    switch (screen.width)
    {
    case 640:
    fs1.setAttribute("cols", "*,72.4%");
    fs2.setAttribute("cols", "*,72.4%");
    break;
    case 800:
    fs1.setAttribute("cols", "*,76.4%");
    fs2.setAttribute("cols", "*,76.4%");
    break;
    case 1024:
    fs1.setAttribute("cols", "*,80.4%");
    fs2.setAttribute("cols", "*,80.4%");
    break;
    default:
    fs1.setAttribute("cols", "*,76.4%");
    fs2.setAttribute("cols", "*,76.4%");
    break;
    }
    }
    </script>
    </head>
    <frameset border="0" rows="20%,70%,10%">
    <frame noresize="noresize" src="header.htm">
    <frameset id="main1" border="0" cols="*,76.4%">
    <frame noresize="noresize" src="nav.htm">
    <frame noresize="noresize" src="main.htm" name="showframe">
    </frameset>
    <frameset id="main2" border="0" cols="*,76.4%">
    <frame noresize="noresize" src="footer.htm">
    <frame noresize="noresize" src="defaultfooter.htm" name="showfooter">
    </frameset>
    </frameset>
    <body></body>
    </html>
  20. #11
  21. Über nübe
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Babylon 4
    Posts
    240
    Rep Power
    12
    I couldn't get it to work with FRAMESET, but your code did work with a regular TABLE:

    Code:
    <html>
    <head>
    	<title>setAttribute test</title>
    	
    </head>
    
    <body>
    
    <table border="1">
    <tr>
    
    <td id="main1">stuff stuff stuff stuff stuff 
    stuff stuff stuff stuff stuff stuff stuff stuff 
    stuff stuff stuff stuff stuff stuff stuff stuff 
    stuff stuff stuff stuff stuff stuff stuff stuff 
    stuff stuff stuff stuff stuff stuff stuff stuff 
    stuff stuff stuff stuff stuff stuff </td>
    <td id="main2">stuff 2 stuff stuff stuff 
    stuff stuff stuff stuff stuff stuff stuff 
    stuff stuff stuff stuff stuff </td>
    
    </tr>
    </table>
    
    <script type="text/javascript">
    var fs1 = document.getElementById('main1');
    var fs2 = document.getElementById('main2');
    
    switch (screen.width)
    {
    case 640:
    fs1.setAttribute("width", "416");
    fs2.setAttribute("width", "200");
    break;
    case 800:
    fs1.setAttribute("width", "576");
    fs2.setAttribute("width", "200");
    break;
    case 1024:
    fs1.setAttribute("width", "800");
    fs2.setAttribute("width", "200");
    break;
    default:
    fs1.setAttribute("width", "75%");
    fs2.setAttribute("width", "25%");
    break;
    }
    </script>
    
    </body>
    </html>
    I'll keep plugging away with it, but I must ask: why do you want frames? I thought maybe you wanted to keep the left-hand frame at a constant width, but the percentages don't match up.
    Hello, old friend...
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    9
    Rep Power
    0
    if the left hand frame is navigation frame where i have a java menu. Since it is beyond my intel to try resizing it to screen res, I am trying to fit it in the left frame.

    I tried the fixed width idea but it looks the java menu is resizing to screen res, so i am forced to resize the frame it is in.

    I cannot use a table since pages loaded into content frame to the left are individual pages. the design was so..

    I think i will just fix the frame at 800x600 and forget the inconsistancy at 640x480.. works fine at 1024..

    In short, i am giving up and compromising.. I hope users will not complain.

    It is actually a browser app for a book. so, frames were chosen since different pages are loaded for navigation, content and footnotes.

    I really appreciate your input and i hope to keep this wonderful realtionship(god knows what they call it). It really helps to be in touch with experts like you.
  24. #13
  25. Über nübe
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Babylon 4
    Posts
    240
    Rep Power
    12
    I'm no expert, since I did not actually solve your problem.

    But I do think it's a good idea to go with 800 x 600, I see a lot of top e-commerce sites have adopted that approach.

    Be sure to post a link here, when it's done.

    Louis, I think this is the beginning of a beautiful friendship.
  26. #14
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    9
    Rep Power
    0

    navigation question


    Hi, it's me again.

    This time it's a navigation q.

    I have a footer page for every content page that is loaded on body load of content page each in their own frames.
    Problem is, when i use history.go(-1), i go to footer page. If i use -2, it is getting erratic and ending up on footer pages.

    Any way i can solve this..

    given thought of retrieving filename from history but no such methods in javascript that i know..

IMN logo majestic logo threadwatch logo seochat tools logo