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 wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Javascript in <Style>

Status
Not open for further replies.
jaydy

jaydy

MIS
Nov 9, 2003
27
PH
hi, i need help with this, i'm just changing the width of the menu if the resolution is lower.. I was wondering if this would work, or is there another way without using different style sheets because this is the only style i'm putting in... Thanks!


<SYTLE>
<SCRIPT language="JavaScript">
<!--
if ((screen.width>=1024) && (screen.height>=768))
{
.menu {
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-TOP: 3px; PADDING-BOTTOM: 3px; Z-INDEX: 10; VISIBILITY: hidden; POSITION: absolute; WIDTH: 900; left: 125px; top: 80px; BACKGROUND-COLOR: #000099; LAYER-BACKGROUND-COLOR: #000099
}
}
else
{
.menu {
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-TOP: 3px; PADDING-BOTTOM: 3px; Z-INDEX: 10; VISIBILITY: hidden; POSITION: absolute; WIDTH: 680; left: 125px; top: 80px; BACKGROUND-COLOR: #000099; LAYER-BACKGROUND-COLOR: #000099
}

}
//-->
</SCRIPT>
</STYLE>
 
Sort by date Sort by votes
You can't put script into a style declaration like that.

What you can do however, is access the [tt]document.styleSheets[/tt] collection and set the styles as a call from the [tt]onload[/tt] event.

Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.
 
Upvote 0 Downvote
You can always use:

<SCRIPT language="JavaScript">
<!--
document.write('<STYLE>\n');

if ((screen.width>=1024) && (screen.height>=768))
{
document.write('.menu {PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-TOP: 3px; PADDING-BOTTOM: 3px; Z-INDEX: 10; VISIBILITY: hidden; POSITION: absolute; WIDTH: 900; left: 125px; top: 80px; BACKGROUND-COLOR: #000099; LAYER-BACKGROUND-COLOR: #000099');
}
else
{
document.write('.menu {PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-TOP: 3px; PADDING-BOTTOM: 3px; Z-INDEX: 10; VISIBILITY: hidden; POSITION: absolute; WIDTH: 680; left: 125px; top: 80px; BACKGROUND-COLOR: #000099; LAYER-BACKGROUND-COLOR: #000099');
}
document.write('</style>');

}
//-->
</SCRIPT>
 
Upvote 0 Downvote
With this method, users with Javascript turned off (about 10%) won't see any styles. This is how I would do it:

Code: 
<html>
<head>
<title>Menu</title>
<<style>
<!--

.menu {
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-TOP: 3px; PADDING-BOTTOM: 3px; Z-INDEX: 10; VISIBILITY: hidden;  POSITION: absolute; WIDTH: 680; left: 125px; top: 80px; BACKGROUND-COLOR: #000099; LAYER-BACKGROUND-COLOR: #000099
}

-->
</STYLE>
<script type="text/javascript">
<!-- hide
function resize()
{
  var obj = document.getElementById("menu");
  if ((screen.width>=1024) && (screen.height>=768))
  {
    obj.width = 900;
  }
}
// end hide -->
</head>
<body>
<div class="menu" id="menu" name="menu">
<!-- ... -->
</div>
</body>
</html>

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
805
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
399
Daniel K
Daniel K
Marclem
  • Locked
  • Question
javascript:navigator.registerProtocolHandler
Replies
1
Views
386
Marclem
Marclem
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top