Forum Moderators: open
probably something simple I have overlooked.(only new to this)
any help much appreciated.Heres the code:
<script language="JavaScript1.2">
<!--
/*
different style sheet depending upon resolution by STEVEN REAGAN.
*/
var foureighty='/stylesheet1.css'
var eighthundred='/stylesheet2.css'
var thoutwentyfour='/stylesheet3.css'
var bigger='/stylesheet4.css'
if (screen.width==640¦¦screen.height==480)
document.write('<link rel="stylesheet" type="text/css" href="'+ (foureighty) +'">')
else if (screen.width==800¦¦screen.height==600)
document.write('<link rel="stylesheet" type="text/css" href="'+ (eighthundred) +'">')
else if (screen.width==1024¦¦screen.height==768)
document.write('<link rel="stylesheet" type="text/css" href="'+ (thoutwentyfour) +'">')
else
document.write('<link rel="stylesheet" type="text/css" href="'+ (bigger) +'">')
//-->
</script>
What happens exacty?
/* comment here */
- and this is the way in JavaScript:
// comment here, linebreak marks end of comment
Also, i would try escaping your slashes "/" with a backslash, like this:
\/
Hope it helps.
/claus
Yes Sinner_G is right, didn't notice that, ifs should be done this way:
if (something¦¦something_else){
...
} else if (something) {
...
} else {
...
}Note the curly brackets.
will make the changes and see how it goes. :)
code:
<script language="JavaScript1.2">
<!--
//different style sheet depending upon resolution by STEVEN REAGAN.
var foureighty='\/stylesheet1.css'
var eighthundred='\/stylesheet2.css'
var thoutwentyfour='\/stylesheet3.css'
var bigger='\/stylesheet4.css'
if (screen.width==640¦¦screen.height==480) //if 640x480
{
document.write('<link rel="stylesheet" type="text/css" href="'+ (foureighty) +'">')
}
else if (screen.width==800¦¦screen.height==600) //if 800x600
{
document.write('<link rel="stylesheet" type="text/css" href="'+ (eighthundred) +'">')
}
else if (screen.width==1024¦¦screen.height==768) //if 1024x768
{
document.write('<link rel="stylesheet" type="text/css" href="'+ (thoutwentyfour) +'">')
}
else //if larger
{
document.write('<link rel="stylesheet" type="text/css" href="'+ (bigger) +'">')
}
//-->
</script>
I know I should not need it but I have nothing better to do at the moment(its practice).
<script type="text/javascript; version=1.2">
<!--
var foureighty = '/stylesheet1.css';
var eighthundred = '/stylesheet2.css';
var thoutwentyfour = '/stylesheet3.css';
var bigger = '/stylesheet4.css';
if ((screen.width==640) ¦¦ (screen.height==480)) {
document.write('<link rel="stylesheet" type="text/css" href="' + foureighty + '">');
}
else if ((screen.width==800) ¦¦ (screen.height==600)) {
document.write('<link rel="stylesheet" type="text/css" href="' + eighthundred + '">');
}
else if ((screen.width==1024) ¦¦ (screen.height==768)) {
document.write('<link rel="stylesheet" type="text/css" href="' + thoutwentyfour + '">');
}
else {
document.write('<link rel="stylesheet" type="text/css" href="' + bigger + '">');
}
//-->
</script>
Pointers:
1. Always specify a
typetypelanguagetypelanguage2. Every statement should end with a semi-colen. Most statements can be parsed without it -- some cannot (depends on the browser) -- you will never know which is which w/o hours of testing. The semi-colen is part of the formal JavaScript syntax and the browser has to add it when you don't (which is why some statements fail w/o it -- the browser has failed to add it), so you should get in the habit of adding it.
3. The boolean comparators -- ¦¦ and && -- must have distinct sets of data and the easiest way to ensure that they do is by encapsulating the right side and left side in parentheticals. ((foo) && (foo == 1)), or ((!foo) ¦¦ (foo!= 1)).
4. Nothing to do with JS, but here on WW the pipe ("¦") character (shifted "\" on the keyboard) is converted to a broken bar; be sure you change it back to the pipe in your code or it won't work.
HTH
Jordan
its hard to concentrate on syntax when your just learning(easy to forget things while remaining too focused on the structure of the program)
Anyway I have a pretty big grin because it worked(I will probably look back on this statement once I have learnt javascript properly and realize what a miniscule acheivement it really was) :)
I know what you mean about the content and syntax...I've worked for *literally* hours on a script and been at wits end when I would spot the one missing "!" or "+" or some other minor syntax thing, lol. But in the end I was grinning too. :))
Jordan
Stevenjm, when you declare variables outside of a function they are global meaning available to all other functions on the page. This is useful for allowing one function to know what another function has done. If variables don't need to be known by other functions it's better to make them local (inside a function). When variables are made local the browser only has to remember them while the function is running. When the function is complete they are released from memory. If your variables don't have to be global this would be a better way to run your script
function serveCSS()
{
var myVar, w = screen.width, h = screen.height; // declare variablesif (w == 640 ¦¦ h == 480) //if 640x480
{
myVar = '\/stylesheet1.css';
}
else if (w == 800 ¦¦ h == 600) //if 800x600
{
myVar = '\/stylesheet2.css';
}
else if (w == 1024 ¦¦ h == 768) //if 1024x768
{
myVar = '\/stylesheet3.css';
}
else //if larger
{
myVar = '\/stylesheet4.css';
}
document.write('<link rel="stylesheet" type="text/css" href="'+ myVar +'">');
}serveCSS()
I'm thinking this may interest you. It's DOM scripting and not backwards compatible, the new script part doesn't even work in Opera 7. But it's the future and alot more powerful.
<html>
<head>
<title></title>
<style type="text/css">body {
color: blue;
}</style>
<script type="text/javascript">function newCSS() {
var new_css = document.createElement('link');
new_css.rel = 'stylesheet';
new_css.type = 'text/css';
new_css.href = 'new.css';
document.getElementsByTagName('head')[0].appendChild(new_css)
}function newScript() {
var new_script = document.createElement('script');
new_script.type = 'text/javascript';
new_script.src = 'new.js';
document.getElementsByTagName('head')[0].appendChild(new_script)
}</script>
</head>
<body>
<input value="new style" type="button" onclick="newCSS()">
<input value="new script" type="button" onclick="newScript()">
<p>test text</p>
</body>
</html>
Put this in new.css
body {
color: black;
}
document.body.style.backgroundColor = 'silver';
Claus, javascript has 2 methods for creating comments:
// single line comments
/*
multi
line
comments
*/
Stevenjm, just re-reading what I wrote. I think "alot more powerful" could be miss leading. What I meant is JavaScript is alot more powerful than it was before the DOM.
[edited by: gph at 3:14 am (utc) on Sep. 2, 2003]
I did not put the variables in a function because it was just a simple script for the head. But I can now see why you would.
heres my tidier version - not sure if the mac part will work or not though.
<script type="text/javascript">
<!--
//different style sheet depending upon resolution by STEVEN REAGAN.
var mac=("macstyle.css");//mac
var foureighty=("style1.css");//640x480
var eighthundred=("style2.css");//600x800
var bigger=("style3.css");//1024x768 or larger
if (navigator.userAgent.indexOf("Mac")!=-1) // if apple mac
{
document.write('<link rel="stylesheet" type="text/css" href="'+ (mac) +'">');
}
else if ((screen.width==640)¦¦(screen.height==480)) //if 640x480
{
document.write('<link rel="stylesheet" type="text/css" href="'+ (foureighty) +'">');
}
else if ((screen.width==800)¦¦(screen.height==600)) //if 800x600
{
document.write('<link rel="stylesheet" type="text/css" href="'+ (eighthundred) +'">');
}
else if ((screen.width>=1024)¦¦(screen.height>=768)) //if 1024x768 or larger
{
document.write('<link rel="stylesheet" type="text/css" href="'+ (bigger) +'">');
}
else {
document.write('<link rel="stylesheet" type="text/css" href="'+ (eighthundred) +'">');//else use the standard 600x800
}
//-->
</script>
