Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

javascript in css

Status
Not open for further replies.
Ricjd

Ricjd

Programmer
Sep 12, 2002
104
GB
can you have javascript in css file (ie main.css) as i have wrote a javascript to figure the size of border i want depending of the users screen size.

[tt]<SCRIPT language=JavaScript>

function getMargin() {
var Iwidth, Swidth, widthMargin;
Iwidth = &quot;750&quot;;
Swidth = screen.width
widthMargin = (screen.width - Iwidth)/2
return widthMargin+'px'
}

</SCRIPT>[/tt]

and now i want to use the number generated in this javascript to use in my css.

does anyone have any ideas, or could i rewrite this in css

thanking you in advance rick
 
Sort by date Sort by votes
You can't do this is a css file, but if you had the css (or even just that section) in the webpage itself, you could do this:

<SCRIPT language=JavaScript>

function getMargin() {
var Iwidth, Swidth, widthMargin;
Iwidth = &quot;750&quot;;
Swidth = screen.width
widthMargin = (screen.width - Iwidth)/2
document.write(&quot;<style type='text/css'>.class_name_with_the_border{border:&quot;+widthMargin+&quot;px;}</style>&quot;);

}

</SCRIPT>

Rick
 
Upvote 0 Downvote
im not to sure on how to use this?

where do i put it?

where do i call this from?

thanks for what you've said it meant it was going on the right path

rick
 
Upvote 0 Downvote
Keep the main.css page the same, only take out the part that has to do with the border. Then add this to the html page itself, in the <head>:

<SCRIPT language=JavaScript>

function getMargin() {
var Iwidth, Swidth, widthMargin;
Iwidth = &quot;750&quot;;
Swidth = screen.width
widthMargin = (screen.width - Iwidth)/2
document.write(&quot;<style type='text/css'>&quot;);
document.write(&quot;.class_to_add_the_border_to{&quot;);
document.write(&quot;border:&quot;+widthMargin+&quot;px;&quot;);
document.write(&quot;...other attributes&quot;);
document.write(&quot;}&quot;);
document.write(&quot;</style>&quot;);
}

</SCRIPT>

Rick
 
Upvote 0 Downvote
An alternative fragment that might work...

s = '.class_to_add_border_to {border: '
+ widthMargin + 'px }' ;
ssr = document.createStyleSheet();
ssr.cssText = s;

Bob
 
Upvote 0 Downvote
Hi ,
Wat Peakco advised is correct.
Since in other alternatives tht are mentioned above will
write into a new document or new window which is not the desired output.

Vishnu
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
710
Chris Miller
Chris Miller
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
686
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
355
pmonett
pmonett
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
411
spamjim
spamjim
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
281
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top