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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    use javascript or Ajax to place content in div tag

    Hi,

    I am creating a webpage to display menu items in a div tag.
    The premis of my page is to use 4 div tags.
    1st div tag = company logo (top left)
    2nd div tag = img of restaurant and address (top right).
    3rd div tag = horizontal menu with text or buttons to call up menu items, for example: Lunch: Dinner: Beverages: Driving Directions, etc
    4th div to display content pages. For example, if the user clicks the Lunch button, it would call the lunch page and place it into the 4th div tag.

    I am able to do this with frames in HTML or content pages in ASP.net, but how would I do it using CSS and div tags.

    The best response I got was with AJAX, but I am not familiar with this language yet.

    Can I use JavaScript to do this?

    Any suggestions?

    Thank you,
    Paul

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    the one-trick pony rides again

    Code:
    <html>
    <head>
    
    <style>
    .hide{
    display:none;
    }
    </style>
    </head>
    
    <body>
    <input type="button" value="Lunch" onclick="changeDiv('lunch')"/>
    <input type="button" value="Dinner" onclick="changeDiv('dinner')"/>
    <input type="button" value="Directions" onclick="changeDiv('directions')"/>
    <div id="lunch" class="hide">Lunch</div>
    <div id="dinner" class="hide">Dinner</div>
    <div id="directions" class="hide">Directions</div>
    
    <script type="text/javascript">
    var shownDiv="";
    function changeDiv(thediv){ 
    if(shownDiv){document.getElementById(shownDiv).style.display="none" }
    document.getElementById(thediv).style.display="block"
    shownDiv=thediv;
     }
    </script>
    </body>
    </html>

  • Users who have thanked xelawho for this post:

    pmiller (02-04-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi,
    Thank you for your help.
    My problem is that I want to pull a web page into the div.
    You have written it so that it pulls up the word, lunch, or dinner, etc.
    How can I write the code so that when somenone clicks the button, it would call a web page into the div?
    For example, I create a web page called lunch.htm. How would I call that page into the div?
    Thank you,
    Paul

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    the contents of the divs are up to you. One way would be to put an iframe with each page into each div, but you might be better off having one iframe and using the button to change the src


  •  

    Posting Permissions

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