Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Making a DHTML menu/form with JS - im stuck.

    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

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,348
    Thanks
    23
    Thanked 618 Times in 617 Posts
    You can make <div>s appear and disappear with javascript using these commands:
    Code:
    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:

    Code:
    <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.

    Code:
    <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.

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,198
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    Only MSIE allows you to use the id of an element to reference the element.

    In all other browsers you need to use
    Code:
        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:

    Code:
        <!-- 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]
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by Old Pedant View Post
    So... *PROBABLY* you would normally do something like this:

    Code:
        <!-- 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:


    Code:
        <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;
    Last edited by webdev1958; 03-22-2012 at 03:30 AM.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,198
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    Well, if it comes to that, why not even more simply
    Code:
        <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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by Old Pedant View Post
    why do we need the <a> tags?
    You don't

    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.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,198
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    > 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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    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

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,198
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    Oh, I absolutely agree with you. It was an omission on my part.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by Old Pedant View Post
    Oh, I absolutely agree with you. It was an omission on my part.
    glad we agree

  • #12
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks alot guys! Sorry im a bit late


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •