...

View Full Version : Making a DHTML menu/form with JS - im stuck.



kiwo123
03-17-2012, 11:23 AM
Hey guys!

First of all I dont want anyone to do it all for me, tho if u want to sure!
"Else please help me out with just saying where I should start." :)
I have done some simple dice games etc with JS and thats about it.

Anyways, Im trying to do a DHTML menu/form with JS, if u click on one option only the menu it self should change so u dont get into another HTML file coz I wanna put it all on the same file ( exept for the "SEND" link ).

(Check the pictures I uploaded)

If u press "contact" the menu it self should get larger with the contact adress bellow, And if u press SEND u should get into another contact form where u have to fill out ur information.
And when u filled out ur name the contact form should get even bigger with more questions to fill out. - Once again check the pictures I uploaded if u dont know what im talking about

pic1: http://i403.photobucket.com/albums/pp115/kyth1/send.jpg
pic2: http://i403.photobucket.com/albums/p...yth1/send2.jpg



Thx - / Jul

sunfighter
03-17-2012, 08:01 PM
You can make <div>s appear and disappear with javascript using these commands:

document.getElementById('THEdivID').style.display = 'none'; // to make it go away
document.getElementById('THEdivID').style.display = 'block'; // to make appear

You must use CSS to initialize them as not showing:


<style type="text/css">
#div1{
display:none;
}
</style>
What you want needs about four divs. You show the first and then make it go away and show the second. Then reveal 3 and 4.


<html>
<head>
<style type="text/css">
#div1{
display:none;
}
</style>
</head>
<body>
<input type="button" value="contact" onclick="document.getElementById('div1').style.display = 'block';"
<div id="div1">
Blabla name<br />
Phone<br />
Zip<br />
Big Street
<br /><br />
Questions?
<input type="button" value="SEND" onclick="GoToJSfunction"
</div>

</body>
</html>

Good luck and if you have problems write us back.

kiwo123
03-22-2012, 02:13 AM
Thx alot, i made this one aswell. but now I cant get a form into "function test4"


<body>
<div id="konsum">
<div id="menyn">
<ul>
<li><a onclick="test4(ptest)" href="#">kontakt</a></li>
<li><a onclick="test(ptest)" href="#">hej</a></li>
<li><a onclick="test2(ptest)" href="#">svejs</a></li>
<li><a onclick="test3(ptest)"href="#">om oss</a></li>

</ul>
</div>
<p id="ptest"></p>


</div>

JS --- --------- ------------------- ------------------------ --------->

var anchortext = "fråga";

function test(id)
{
id.innerHTML="fråga"+ anchortext.link("http://www.google.com/") ;
}

function test2(id)
{
id.innerHTML="hej" + "lol" ;
}

function test3(id)
{
id.innerHTML=" test" ;
}

function test4(id)
{
id.innerHTML=" HÄR SKA EN FORM VISAS" ; <-------
}



// Jul

Old Pedant
03-22-2012, 04:17 AM
Only MSIE allows you to use the id of an element to reference the element.

In all other browsers you need to use

document.getElementById("ptest")
to get a reference via the id "ptest" (and this code also works in MSIE, so you don't have to have two kinds of code).

So... *PROBABLY* you would normally do something like this:



<!-- notice the apostrophes around 'ptest' here -->
<li><a onclick="test4('ptest')" href="#">kontakt</a></li>
<li><a onclick="test('ptest')" href="#">hej</a></li>
<li><a onclick="test2('ptest')" href="#">svejs</a></li>
<li><a onclick="test3('ptest')"href="#">om oss</a></li>
...

function test4(id)
{
var element = document.getElementById(id);
element.innerHTML=" HÄR SKA EN FORM VISAS";
}

There are other ways to do this, of course, but the above is likely the most flexible.


[/code]

webdev1958
03-22-2012, 04:26 AM
So... *PROBABLY* you would normally do something like this:



<!-- notice the apostrophes around 'ptest' here -->
<li><a onclick="test4('ptest')" href="#">kontakt</a></li>
<li><a onclick="test('ptest')" href="#">hej</a></li>
<li><a onclick="test2('ptest')" href="#">svejs</a></li>
<li><a onclick="test3('ptest')"href="#">om oss</a></li>


Actually, I would probably do something like this:




<li><a onclick="test4('ptest');return false;" href="">kontakt</a></li>
<li><a onclick="test('ptest');return false;" href="">hej</a></li>
<li><a onclick="test2('ptest');return false;" href="">svejs</a></li>
<li><a onclick="test3('ptest');return false;"href="">om oss</a></li>
There is no actual need to redirect to the current page. You can stop the default action to navigate to the href's url after the function has run with the return false;

Old Pedant
03-22-2012, 04:33 AM
Well, if it comes to that, why not even more simply


<li onclick="test4('ptest')">kontakt</li>
<li onclick="test('ptest')">hej</li>
<li onclick="test2('ptest')">svejs</li>
<li onclick="test3('ptest')">om oss</li>

why do we need the <a> tags?

webdev1958
03-22-2012, 04:36 AM
why do we need the <a> tags?

You don't :thumbsup:

But if I do use them to run a function, that is how I would do it :)

Sometimes you need the extra element to create the css animations.

Old Pedant
03-22-2012, 04:41 AM
> Sometimes you need the extra element to create the css animations.

Yes. Or for other stylistic reasons. And in fact I almost changed the <a> tags to <span> just for that reason. Anything you could hook an <a> to you could as easily hook a <span>, or at least a <apan class="fake_link">, to.

webdev1958
03-22-2012, 04:44 AM
That's right.

So in the case when an <a> is used, I just wanted to show how many consider to be best practice when running javascript when an <a> is clicked :)

Old Pedant
03-22-2012, 04:49 AM
Oh, I absolutely agree with you. It was an omission on my part.

webdev1958
03-22-2012, 04:59 AM
Oh, I absolutely agree with you. It was an omission on my part.

glad we agree :thumbsup:

kiwo123
04-05-2012, 12:33 PM
Thanks alot guys! Sorry im a bit late



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum