|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
November 21st, 2003, 09:52 PM
|
|||
|
|||
|
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
November 21st, 2003, 11:50 PM
|
||||
|
||||
|
In DOM 2, you can manipulate style sheets:
http://www.csie.ntu.edu.tw/~b750605..._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...
|
|
#3
November 21st, 2003, 11:57 PM
|
||||
|
||||
|
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>
|
|
#4
November 22nd, 2003, 07:19 AM
|
|||
|
|||
|
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>
|
|
#5
November 22nd, 2003, 10:45 AM
|
||||
|
||||
|
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 Quote:
|
|
#8
November 22nd, 2003, 08:29 PM
|
|||
|
|||
|
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.
|
|
#9
November 22nd, 2003, 09:53 PM
|
||||
|
||||
|
For that, you would need setAttribute: (DOM level 1)
http://msdn.microsoft.com/library/d...etattribute.asp You're in luck, it applies to <FRAMESET>. Example of syntax: http://www.mozilla.org/docs/dom/dom...m_el_ref57.html Last edited by khwang : November 22nd, 2003 at 09:56 PM.
|
|
#10
November 22nd, 2003, 10:37 PM
|
|||
|
|||
|
I found this link with the clue you provided by a search on google:
http://dev.eclipse.org/viewcvs/inde...lp.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>
|
|
#11
November 23rd, 2003, 12:28 AM
|
||||
|
||||
|
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.
|
|
#12
November 23rd, 2003, 09:19 AM
|
|||
|
|||
|
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.
|
|
#13
November 23rd, 2003, 09:52 AM
|
||||
|
||||
|
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. Quote:
|
|
#14
November 25th, 2003, 02:34 PM
|
|||
|
|||
|
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..
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > return function value to CSS |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
