PDA

View Full Version : Intro to JavaScripting and i dont know WTF i did wrong or what to do.


Lionx
10-05-2004, 08:30 AM
Ok my assignment that i need to do is basically:


• Detect which Browser plus version you are using to view this page
• Change the graphic color background automatically
• Run a "banner" across the web page of at least three graphics or text messages…you might use the Word Art from Microsoft Word to create the graphics.

and what i put in as my base source code so far is:


<HTML>
<HEAD>
<TITLE>Javascript Assignment #3 :O</TITLE>


:love::love::love::love::love::love::love::love: langauge = "Javascript">
function checkchoice(choice)

{

if (choice == "backcolor" )
{
document.bgcolor = "green";
}
}
</script>

</HEAD>

<BODY BGCOLOR="red">

<input Type ="checkbox" name = "checkselect" value = "backcolor" onclick="checkchoice(this.value)">Change Background to a different color<BR>

OMG THIS IS TOO CONFUSING!
</BODY>

</HTML>

First i dont know how to change the color of the background..it makes absolutely no sense, i copied most of this from the video instructions my instructor gave me for this online course..and it ends up in error...-_- So i dont even get a ballpark idea on what to do. Second of all...the rest of the stuff i have no idea what to put since he didnt demonstrate it on the videos...i really need help on this i spent 5 $#@%ing hours on this and i STILL dont get it reviewing all the stuff he taught in his video...what am i doing wrong here? ;-; How can i make this so it fulfills his requirements? :(
o_O
10-05-2004, 10:40 AM
I don't quite understand what you mean by " run a banner." Does it need to be a scrolling banner, and does it have to be Javascript?
Marquees will work fine for that, but only in IE.

To change the colour of the background, I'd just use an onClick or an :bou::bou::bou::bou::bou::bou::bou:Over event.

As for the browser and browser version info, you can use navigator.appName and navigator.appVersion, respectively.

Here is a little page I threw together in about five minutes; I'm not sure if it's at all what you're trying to do though. :p I'd happily change it for you though.

<div style="font-size: 11px;">
<pre>
&lt;html>
&lt;head>
&lt;title>hi2u&lt;/title>
&lt;style type="text/css">
body { font-family: Tahoma, Verdana;
color: 9b89bd;
}
&lt;/style>
&lt;/head>

&lt;body bgcolor="#000000">

&lt;center>
&lt;a style="color: 68569a; font-family: Tahoma, Verdana; font-size: 20px; cursor: hand;" onClick="document.bgColor='white';">Change the background colour&lt;/a>
&lt;br>&lt;br>&lt;br>
&lt;a style="color: 68569a; font-family: Tahoma, Verdana; font-size: 20px; cursor: hand;" onClick="document.bgColor='black';">Change it back&lt;/a>
&lt;br>&lt;br>
&lt;center>

&lt;script type="text/javascript">
var name = navigator.appName
var ver = navigator.appVersion
document.write
("You are using " + name + ", " + ver + ".");
&lt;/script>

&lt;marquee scrollamount="7" width="100%" direction="left">Hi there.&lt;/marquee>
&lt;marquee scrollamount="7" width="100%" direction="right">This only works&lt;/marquee>
&lt;marquee scrollamount="7" width="100%" direction="left">in IE.&lt;/marquee>

&lt;/body>
&lt;/html>
</pre>
</div>
Rostum
10-05-2004, 11:15 AM
I was trying to go through it with Lionx, but all I know is Visual Basics - which I studied around a year ago so sometimes it's a bit vague to me. Anyways, I think the background changing thing is what Lionx wanted...

...but I'm not sure about the others. I think he wanted to know how to do an image flip (it cycles through different images) and to tell the viewer of the website the version and name of the browser they are using.

Correct me if I'm wrong Lionx. ^^
o_O
10-05-2004, 11:34 AM
I think he wanted to know how to do an image flip (it cycles through different images)

Hmm, like a random ad banner that's displayed on loading the page, or a mouseover image flip, which will flip between two image :bou::bou::bou::bou::bou::bou::bou:Over? :p
Rostum
10-05-2004, 11:42 AM
Hmm, like a random ad banner that's displayed on loading the page, or a mouseover image flip, which will flip between two image :bou::bou::bou::bou::bou::bou::bou:Over? :p

I'm guessing through a time interval.
Lionx
10-05-2004, 12:16 PM
I think the first one is to somehow use javascript's built in functions to automatically display the version of your browser...i have no idea how to do that..he never told me.

second one is the background color change. where i check a box, it changes color..then uncheck it goes back.

Third is like...an automatic slide show i think...one pic stays there 5 secs...next one appears...and then repeats.

I am going to try the above code later...late here...if you guys have ANY sugguestions at all please do help...i am tearing my hair off with this..i just dont know what i did wrong at all..
o_O
10-06-2004, 04:17 AM
Ah, a slide show is fairly easy to do. Forget those marquees I posted before then, they aren't what you're looking for. :p
Give me a couple of hours and I'll write you a slide show; I'm at school right now so I can't do it.
Do you need to write a function for the background change? It's much quicker to use an onClick event and define the change inline.
Lionx
10-06-2004, 04:40 AM
I need to make a checkbox and then when i click it, it changes the color of the background...i am having alot of headache with this along with other classes...so i really really appreciate the help.. m(_ _)m Thanks so much.
o_O
10-06-2004, 06:45 AM
Ok, here's a page I've made; the slideshow script is a bit temperamental, but I managed to get it going in Firefox and IE. :p

Hope it helps. :)
Lionx
10-07-2004, 03:29 AM
All i have to say is..your god..x-x

thanks so much, you are going to help me so much by letting me look at what you did and stuff...*bows* m(_ _)m
Rostum
10-07-2004, 08:34 AM
Yeah, Face is awesome, just cause... he is He. Hope that helps you out Lionxy, I am sorry I couldn't help earlier. ^^
o_O
10-07-2004, 09:11 AM
Heh, no problem.

The best piece of advice I can give about Javascript is to learn the hierachy of elements. That and to think logically in terms of order of things that need to happen; eg. for that slide show, the first step was to preload the images, the second was to define the function, the third was to place the image on the page, etc.

Glad I could help. :)
Lionx
10-18-2004, 04:59 AM
Now he tells me that he needs it to change during the load time..-_- o shiet..so d00med..>>
o_O
10-18-2004, 09:30 AM
xD How so?

It sounds like something you'd need to put in the &lt;head> tag.

Does it actually have to change while the page is loading, and display it? That would be pretty hard to do if the page was stored locally, unless you used some sort of loop to slow it down. :p
Lionx
10-18-2004, 11:52 AM
Load > Change color auto...i aint sure...he put a pop up window and you have to press ok to change it..>>
o_O
10-19-2004, 08:38 AM
Oh, colour change, that's pretty easy. :p I thought you meant you needed the slideshow to start during the loading time. xD

Give me a few minutes; I'll have something then. :p

EDIT:
Here's the function. This goes in the &lt;head> of the document, because that is the first to be processed by the browser, and we want it to change colour during the loading time:
<div style="font-size: 9px; color: #CCCCCC; font-weight:bold;">
&lt;script type="text/javascript">
function omghi()
{
alert('Now changing colour');
document.bgColor='red';
}
&lt;/script>
</div>
That says "when you call the function omghi(), alert the user, then change the colour of the background to red.

Next, we need to call the function. We want it to trigger automatically, so we have to use the :bou::bou::bou::bou::bou::bou: event, which calls a function when the page loads. The :bou::bou::bou::bou::bou::bou: event should be placed inside the &lt;body> tag, because this is what is displayed on the page, and thus, the content whose loading time we are using:
<div style="font-size: 9px; color: #CCCCCC; font-weight:bold;">
&lt;body :bou::bou::bou::bou::bou::bou:="omghi()">
</div>

Then all we need to do is combine them into a page:
<div style="font-size: 9px; color: #CCCCCC; font-weight:bold;">
&lt;html>
&lt;head>
&lt;title>Hello&lt;/title>
&lt;/head>
&lt;body :bou::bou::bou::bou::bou::bou:="omghi()">
&lt;/body>
&lt;/html>
</div>

And there you have it. :p