Welcome to WebmasterWorld Guest from 54.159.30.26

Forum Moderators: open

Message Too Old, No Replies

Help with javascript.

cannot get this script to work.

     
11:43 am on Sep 1, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:June 23, 2003
posts:145
votes: 0


Trying to write a script for different css files to be pulled in at different resolutions and cannot get it to work.

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>

11:51 am on Sept 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 27, 2002
posts:959
votes: 0


You are at least missing an end if at the end of your code. Not sure if that is the problem though.

What happens exacty?

11:54 am on Sept 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 15, 2003
posts:2412
votes: 5


This is the way to comment out a line in CSS files:

/* 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


added:

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.

12:06 pm on Sept 1, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:June 23, 2003
posts:145
votes: 0


Thanks for that everyone. The curly brackets were definately an oversight. It actually does nothing at the moment(no errors just nothing)

will make the changes and see how it goes. :)

12:15 pm on Sept 1, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:June 23, 2003
posts:145
votes: 0


still nothing doing.Any other ideas? (have a css file in the same directory with correct name):(

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>

12:26 pm on Sept 1, 2003 (gmt 0)

Full Member

10+ Year Member

joined:May 1, 2003
posts:340
votes: 0


You shouldn't really need serve different stylsheets to different resolutions if you use a liquid layout in your stylesheet.
12:29 pm on Sept 1, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:June 23, 2003
posts:145
votes: 0


Thanks guys it works. It did not like the way I was declaring variables should have used var=("sylesheet.css").

I know I should not need it but I have nothing better to do at the moment(its practice).

12:38 pm on Sept 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 0


<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

type
attribute on the script element, version can be included in the
type
value. IE is the only browser that uses the
language
attribute (to distinguish it from VBScript), and IE can understand the standard
type
attribute just fine w/o the
language
attribute.

2. 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

12:57 pm on Sept 1, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:June 23, 2003
posts:145
votes: 0


Thanks for the syntax help and advice.

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) :)

1:01 pm on Sept 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 0


No way! You'll still be grinning! That's part of the fun of always learning! ;)

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

gph

2:00 am on Sept 2, 2003 (gmt 0)

Full Member

10+ Year Member

joined:Jan 31, 2002
posts:285
votes: 0


Curly brackets aren't always required but I agree with Claus. Using them makes for ease of reading.

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 variables

if (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 didn't test this but I don't think you need to escape the forward slashes in your style sheet urls.

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>


To see what this does save it as anypage.htm then make 2 more files called new.css and new.js

Put this in new.css

body {
color: black;
}

and this in new.js

document.body.style.backgroundColor = 'silver';

gph

3:12 am on Sept 2, 2003 (gmt 0)

Full Member

10+ Year Member

joined:Jan 31, 2002
posts:285
votes: 0


P.S.

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]

3:13 am on Sept 2, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:June 23, 2003
posts:145
votes: 0


Thanks. That is interesting - especially the css function.

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>

gph

3:26 am on Sept 2, 2003 (gmt 0)

Full Member

10+ Year Member

joined:Jan 31, 2002
posts:285
votes: 0


The Mac sniffer looks fine and you've put it in the right location in your script.