SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    showing a div in page only when clicked

    hey folks,
    new to JS, but i have a call of nature. my current requirement is there are two tabs they are like
    Code HTML4Strict:
    <ul>
    <li>Personal Info</li>
    <li>History<li>
    </ul>
    now, what i want is that when a person come on a page ofcourse its a personal info page but when he click history. the page stays the page but another div loads. like switching pages. only in this one div is hiding and other will show. can anyone help me write a little code to help me.
    thanks in advance
    All those who wander aren't lost.

  2. #2
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll need to use AJAX to get the content from the external page or show/hide a div that is already on the page and has info in it. I would prefer the AJAX route. Look into jQuery, you can have this up and running in no time.

    Jquery: You can user $.get, a much simpler option is this $("#myDiv").load("somepage.htm")

    Check out the following 2 threads, these have example code and help links to utilize and learn jQuery:
    http://www.sitepoint.com/forums/showthread.php?t=639320
    http://www.sitepoint.com/forums/showthread.php?t=633180
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    a simple example in JS will help
    All those who wander aren't lost.

  4. #4
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,629
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here's a simple example page where all the data is loaded in one go (i.e. NOT the AJAX method).

    Code HTML4Strict:
    <html>
    <head>
    <title>JS Div Show/Hide</title>
    <script type="text/javascript">
    function hide (div) {
    	div.style.visibility = "hidden";
    }
    function show (div) {
    	div.style.visibility = "visible";
    }
    function showme (div) {
    // Hide all DIVs, then show just the one required
    	var divs = document.getElementsByTagName ('div');
    	for (var i=0;i<divs.length;++i) {
    		if (divs[i].id) { // The DIV has an id="" attribute
    			var el = document.getElementById (divs[i].id)
    			hide (el);
    		}
    	}
    	var el = document.getElementById (div);
    	show (el);
    	return false;
    }
    window.onload = function () {
    // On display load, hide all DIVs then just show Personal
    	var divs = document.getElementsByTagName ('div');
    	for (var i=0;i<divs.length;++i) {
    		if (divs[i].id) { // The DIV has an id="" attribute
    			var el = document.getElementById (divs[i].id)
    			hide (el);
    		}
    	}
    	var el = document.getElementById ('Personal');
    	show (el);
    }
    </script>
    </head>
    <body>
    <div id="Personal"><p>Some Personal text goes here</p><p><a href="#" onclick="showme ('History')">Show History</a></p></div>
    <div id="History"><p>Some History other text goes here</p><p><a href="#" onclick="showme ('Personal')">Show Personal</a></p></div>
    </body>
    </html>
    Ian Anderson
    www.siteguru.co.uk

  5. #5
    SitePoint Member kabeerg512's Avatar
    Join Date
    Jun 2010
    Location
    Mumbai,India
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can include script ajax.js into head and than you can use function javascript getdata() wherever you want in document, all you need is to have named <div> areas, for example like this:

    <a href=”#” onclick=”getdata(‘page_to_load‘,’where_to_put_it‘);”>Click here</a>

  6. #6
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,629
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That might be helpful if you said what ajax.js contains or linked where to find it.
    Ian Anderson
    www.siteguru.co.uk


Bookmarks

Posting Permissions

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