-
Lil bit of help.
Hello all,
I am looking for a little bit of help with the following: -
HTML
Code:
<html>
<head>
<link href="lynxguide.css" rel="stylesheet" type="text/css" />
<title>
Online LYNX Guide Test
</title>
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "XP";
}
else {
ele.style.display = "block";
text.innerHTML = "XP";
}
}
</script>
<script language="javascript">
function toggle2() {
var ele = document.getElementById("toggleText2");
var text = document.getElementById("displayText1");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "VISTA";
}
else {
ele.style.display = "block";
text.innerHTML = "VISTA";
}
}
</script>
</head>
<body>
<form method="post" action="javascript:toggle();">
<input name="url" type="hidden" value="XP Guide">
<input type="submit" value="XP">
</form>
<form method="post" action="javascript:toggle2();">
<input name="url" type="hidden" value="Vista Guide">
<input type="submit" value="Vista" width="70px">
</form>
<br />
<br />
<div id="toggleText" style="display: none"><h1>XP</h1>
</div>
<div id="toggleText2" style="display: none"><h1>VISTA</h1>
</div>
</body>
</html>
CSS
Code:
body { background-color: #FFFFCC;
text-align:center;
}
#container {
width:90%;
height:70%;
background-color: #FFFFCC;
}
#testnav {
width:10%;
height:20%;
background-color: #336666;
padding:2px;
margin:auto;
}
#toggleText {
width:10%;
height:5%;
background-color: #999966;
align:right;
}
#toggleText2 {
width:10%;
height:5%;
background-color: #999966;
align:right;
}
#toggleText3 {
width:10%;
height:5%;
background-color: #999966;
align:right;
}
A:link {text-decoration: none; color:#000000;}
A:visited {text-decoration: none; color:#000000;}
A:active {text-decoration: none; color:#000000;}
A:hover {text-decoration: none; color:#000000;}
I am doing this for work and they use IE 6.0 (urgh!)
While I can generally align things fine with FireFox and later version's of IE, I am having trouble with the above.
I want the two button's plus one more to be on the same line, not one beneath the other.
On top of that, at the moment when I click "XP" it open's, I then have to click "XP" again to close it, however I want it so that if I click "XP" and it has opened then I click "Vista" the "XP" bit closes and the "Vista" one open's.
Sorry for being cheeky with a third question as well, at the moment when I click XP and it opens then I click Vista, the Vista one drop's below the XP, I would like it so that, when I click XP, then Vista, XP closes and Vista open's in the same position.
I haven't used JavaScript before so I have just taken my example of the Internet.
I am still working on the general styling however I want to make sure that the website/ button's function correctly before I complete the styling and such.
Sorry if I haven't explained myself very well, any questions just ask.
P.S: - Yes the colours do suck. But they have to match our intranet although those colours aren't quite there yet.
Cheers in advanced.
Disturbedguy (Anthony)
-
Re: Lil bit of help.
-
Re: Lil bit of help.
-
Re: Lil bit of help.
Hmmm, you're not using the best approach (which would be passing variables to a single function, rather than using 2), but if you want a quick dirty fix:
1) to have your buttons on one line don't use 2 forms. In fact, you don't really need a form at all: use buttons with the onclick attribute (<input type="button" onclick="toggle();">) - then you can line them up in a single div.
2) Neither of your functions contains code that controls the *other* div. You need to add this to switch the unnecessary div's style to "display: none;" if you want each button to "turn off" the other sets of text.
3) This is resoved by 2!
IMHO this would work better with 1 function that takes a parameter though - so you would declare the function toggle(type) { }. Then you would call it (using buttons) by onclick="toggle('XP');", and in the body of the function you'd write something like:
if (type=="XP") { /* show the XP div and hide the others */ }
I'd strongly recommend a Javascript teach-yourself book. I like the SAMS (24 hours / 21 days) series; they lead you through the topic sensibly and are also very easy to use as a back-reference later, particularly for languages you don't use very often.
-
Re: Lil bit of help.
Hey sorry, should have updated. I have this pretty much sorted now.
Thanks for the reply jim.
In all fairness I wasnt actually looking to learn anything, but it is something I may look into now..
