Click to See Complete Forum and Search --> : Javascript n00b question


digital_nomad
04-18-2003, 01:43 PM
I'm new here, and new to Javascript as well. I have a question for a script.

I'm helping my father make a web site, and on the index page, I have an image map with a link to the "main" page. What I WANT it to do, is when you click the link, it will detect the screen resolution, and go to the proper page. Can anyone help me?

DrDaMour
04-18-2003, 01:54 PM
screen.width
screen.height

those are the integers of the W & H

khalidali63
04-18-2003, 01:58 PM
ad an onclickevent attribute in the img tag e.g
onclick="redirect()"

in the javascript code section define this method as below
function redirect(){
var sX = window.screen.availWidth;
var sY = window.screen.availHeight;

then you can test these heights such as

if (sX==800)then
.....

and such

}

:D

digital_nomad
04-18-2003, 01:58 PM
Umm, thanks for posting, but could you kind of go more in depth, like where I should put the script, and what all I should put into it? That would help a lot.

Thanks
oops, this was supposed to go in between the drDaMour and Kalid posts. I'm too slow :D

digital_nomad
04-18-2003, 02:12 PM
umm, well, like I said, I'm a n00b to javascript, so that stuff makes less sense than ancient Greek to me... :)

If I add the onClick to the image, then that means that if someone clicks ANYWHERE on the image it will go to the page? It's a big image (of a castle), and I have the link on the castle gates (an image map). Is it even possible to do that, or should I just do a fake image map instead (as in seperate images put together)? Now that I thinkk of it, that would be easier...

Anyway, I hate to be a nuisance, but could someone just put like, the whole script I should use, or at least a template?

I really appreciate any and all help...

dmason165
04-21-2003, 03:08 PM
Hey!

I may have your answer, but not quite sure. I've only started answering posts recently. I have finally grasped SOME understanding to this fun but complicated language. Anyhow, if it doesn't work, just post again, but it should get you really close to what you're looking for.

<head>
<title>Castle Doom</title>
<script language="JavaScript" type="text/JavaScript">
<!--
var sX = window.screen.availWidth;

function redirect() {
if (sX==800) {//if the user's available screen width is 800px;
window.location= "castleentrance800px.htm";//page for screens of 800px
}
else {//for all other screen widths
window.location= "castleentrance.htm";//page for other resolutions (I'm assuming 1024 or higher?)
}
}
-->
</script>
<body>
<img src="castlegates.gif" onClick="redirect()" alt="Enter castle here!">
.
.
.
</body>

</html>

Let me know how it goes!

~Darron

Charles
04-21-2003, 03:29 PM
Keep in mind that a good ten percent of users do not use JavaScript at all and that while you can get the size of the screen of the users that do use JavaScript, you cannot get the size of the browser window. The proper way to make a web page is to make it work on all screen resolutions and window sizes and for those users who have no screen at all. You'll have to adjust your thinking a little, but it's actually a good bit easier.

Instead of worrying about how the page looks, start out by "marking up" what all of the stuff on the page does. Mark up your main heading as "h1" and sub headings as "h2" or "h3" as appropriate. Use "p" for paragraphs and "blockquote" only for block quotations. Do not use "i" but use "em" to indicate emphasis and "cite" for citations. When you are done you page should validate as HTML 4.01 Strict (http://validator.w3.org/).

At this point you will have a page that will work on every browser that there is. It'll be a little drab for most, but it will work. So now we use CSS (http://www.w3.org/TR/REC-CSS2/) to add color and fonts and such and even positioning. (It is very bad to use tables for your page layout.) The trick is to impliment your layout so that everything flows nicely as the window or fonts are resized.