www.webdeveloper.com
Results 1 to 8 of 8

Thread: Css/Javascript Hide/Show <div> ?

  1. #1
    Join Date
    Mar 2012
    Posts
    4

    Css/Javascript Hide/Show <div> ?

    Hey,

    first off I'm sorry to ask for such basic things but i looked at w3school but I couldn't find what I'm searching for.


    I stumbled upon this website:
    http://www.nukklear.com


    when you click on a link in the top navbar it loads the content without reloading the website.

    Where can I find tutorials how to do that or can anyone give me the definition of this "style" of showing content?

  2. #2
    Join Date
    May 2005
    Location
    Dirty Jersey
    Posts
    1,402
    this method of updating information on a site without reloading is done with AJAX.

    relatively speaking, it isn't very basic. here's a w3schools tutorial for your digestion.

    http://www.w3schools.com/ajax/default.asp

    1. If you reply to my post, and your reply would then appear directly beneath my post, DON'T QUOTE MY ENTIRE POST!!! IT'S REDUNTANT!!! IT'S ASININE!!!! IT'S REDUNDANTLY ASININE!!!!! DON'T DO IT!!!!
    2. jQuery extends the functionality of JavaScript. If you don't know JavaScript, give up on that jQuery script and learn JavaScript. You'll save yourself a lot of frustration, I promise.
    3. Use the [code][/code] tags. Otherwise, you may be left wondering why no one responded to your eyesore of a thread.


  3. #3
    Join Date
    Mar 2012
    Posts
    4
    Thank you for your quick response.

    I can see now that it is far from "basic".

    It does work in a similiar way but I have 2 problems at the moment.

    Every Ajax "button" need its own function? currently it looks like that:

    Code:
    <script type="text/javascript">
    function loadXMLDoc()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","ajax_info.txt",true);
    xmlhttp.send();
    }
    
    function loadXMLDoc2()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","test.txt",true);
    xmlhttp.send();
    }
    2 Functions with a different "GET", to display two different text files. Is there a proper way to display multiple files? I feel that having 2 huge functions where only the get request is different is a "waste"?

    My second problem is that...
    Code:
    <a OnClick="loadXMLDoc2();" class="mlink" href="#myNews">
    this adds #myNews to the URL for example "domain.com/#myNews"
    but if I copy this url and send it to a friend he sees the usual homepage without the div called #myNews shown.

    Any way to make this ajax content "bookmarkable" and that those URLs work?

    the w3school doesnt offer much explanation and more examples
    Last edited by shadoom; 03-12-2012 at 08:52 AM.

  4. #4
    Join Date
    May 2005
    Location
    Dirty Jersey
    Posts
    1,402
    Quote Originally Posted by shadoom View Post
    Every Ajax "button" need its own function?
    not necessarily... it would be better to modify the load function to accept parameters, and the parameter would be the file you want AJAX to GET. you'd replace that hardcoded "ajax_info.txt" or "text.txt" string with the variable you passed in as a parameter.

    do you want the user to press one button to receive two files? if so, you'd have to make the AJAX load somewhat recursive, or you'd have to dispatch two AJAX requests at the same time.

    Quote Originally Posted by shadoom View Post
    My second problem is that...
    Code:
    <a OnClick="loadXMLDoc2();" class="mlink" href="#myNews">
    this adds #myNews to the URL for example "domain.com/#myNews"
    but if I copy this url and send it to a friend he sees the usual homepage without the div called #myNews shown.

    Any way to make this ajax content "bookmarkable" and that those URLs work?
    errr... there may be some confusion here..? that code above makes it so that if a user clicks that link, it will both fire the onclick event and then take the user to the "myNews" anchor on the page.

    any element on a webpage (to my knowledge) can be anchored. it's up to you to ensure that the content in that element is populated when the anchor is called. beyond that, im not sure i understand what you want to do with this bookmark stuff.

    1. If you reply to my post, and your reply would then appear directly beneath my post, DON'T QUOTE MY ENTIRE POST!!! IT'S REDUNTANT!!! IT'S ASININE!!!! IT'S REDUNDANTLY ASININE!!!!! DON'T DO IT!!!!
    2. jQuery extends the functionality of JavaScript. If you don't know JavaScript, give up on that jQuery script and learn JavaScript. You'll save yourself a lot of frustration, I promise.
    3. Use the [code][/code] tags. Otherwise, you may be left wondering why no one responded to your eyesore of a thread.


  5. #5
    Join Date
    Mar 2012
    Posts
    4
    I planned on making several buttons which all show different content just like on the page I posted above (http://www.nukklear.com/)


    About the href=#myNews confusion:

    for example I give you this link:
    http://www.nukklear.com/#en/The_Team

    This takes you to the website of nukklear with the content shown just like you have clicked the "The Team" button on top even though it is ajax

    I apologize my lack of proper explanation.

  6. #6
    Join Date
    Nov 2007
    Posts
    412
    If you are not averse to adding jQuery to your site, the code is very simple:

    suppose you have 3 buttons:
    Code:
    <input type="button" value="Item1" name="Item1" id="Item1" onclick="btnClick(this)"/><br/>
    <input type="button" value="Item2" name="Item2" id="Item2" onclick="btnClick(this)"/><br/>
    <input type="button" value="Item3" name="Item3" id="Item3" onclick="btnClick(this)"/><br/>
    And the dynamic content is contained in HTML files (or ASP, PHP, etc.) named "Item1.html", "Item2.html", and "Item3.html"

    And let's presume the dynamic area of your page is:
    Code:
    <div id="dynamicContent"></div>
    Your AJAX function in jQuery is as simple as this:
    Code:
    function btnClick(theButton){
      $('#dynamicContent').load(theButton.id + '.html')
    }
    This line of code:
    theButton.id + '.html'
    will be "theButton.id" which will be any of 'Item1', 'Item2', or 'Item3', concatenated with '.html', so you get "Item1.html", etc.

    .load(), tells the page to load the page

    $('#DynamicContent') tells it where to load it.

    So you get
    "set the contents of the DIV 'dynamicContent' to whatever is in the HTML page named the same as the ID of the button I just clicked".

    Of course, you can rejigger this many different ways, and you don't need to use jQuery either... but the above should be enough of a working sample that you could use it to parameterize your AJAX call if you wish to do so.

  7. #7
    Join Date
    May 2005
    Location
    Dirty Jersey
    Posts
    1,402
    Quote Originally Posted by shadoom View Post
    I planned on making several buttons which all show different content just like on the page I posted above
    (http://www.nukklear.com/)
    when you trigger the AJAX function, id either pass the function a special variable to identify which file AJAX should get, or use the name of the button (the "this.name" property passed as an argument to your AJAX code) to identify the button that was clicked and retrieve the proper AJAX page.

    Quote Originally Posted by shadoom View Post
    About the href=#myNews confusion:

    for example I give you this link:
    http://www.nukklear.com/#en/The_Team

    This takes you to the website of nukklear with the content shown just like you have clicked the "The Team" button on top even though it is ajax
    i didn't dig into the code, but they probably are just using the '#' sign instead of the '?' for accessing what are called "query strings". they parse the URL when the page loads, check for the # sign, and then AJAXally load the appropriate content based on whatever follows the # sign. actually, now that i think of it, it's brilliant.. you can still use the question mark to pass in "real" query strings...

    anyway, it's a "faux" bookmark. the javascript does all the work.

    1. If you reply to my post, and your reply would then appear directly beneath my post, DON'T QUOTE MY ENTIRE POST!!! IT'S REDUNTANT!!! IT'S ASININE!!!! IT'S REDUNDANTLY ASININE!!!!! DON'T DO IT!!!!
    2. jQuery extends the functionality of JavaScript. If you don't know JavaScript, give up on that jQuery script and learn JavaScript. You'll save yourself a lot of frustration, I promise.
    3. Use the [code][/code] tags. Otherwise, you may be left wondering why no one responded to your eyesore of a thread.


  8. #8
    Join Date
    Mar 2012
    Posts
    4
    Thank you nap0leon it works like a charm

    Quote Originally Posted by Angry Black Man View Post


    i didn't dig into the code, but they probably are just using the '#' sign instead of the '?' for accessing what are called "query strings". they parse the URL when the page loads, check for the # sign, and then AJAXally load the appropriate content based on whatever follows the # sign. actually, now that i think of it, it's brilliant.. you can still use the question mark to pass in "real" query strings...

    anyway, it's a "faux" bookmark. the javascript does all the work.
    Thanks for that tip I will read into querystrings to find out how it works, if anyone however has a nice simple sample for it i'd appreciate

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles