SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Load div on click only

    Hello,
    I want a div to load only if you click a link. This way my site pages will load faster...

    <a href="#">load me</a>

    <div id="">
    lots of contents here to load on click
    </div>

    Pls help...

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Welcome to the forums

    Quote Originally Posted by trizh View Post
    I want a div to load only if you click a link. This way my site pages will load faster...
    This sounds like a job for AJAX.
    Are you using, or do you mind using jQuery?

  3. #3
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for ur reply sir
    I will use it into site hosted in blogger. I really don't know what's their difference... as long as it works it's fine with me

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Ok, well the difference is that jQuery is a library written in JavaScript, whereas JavaScript itself is a scripting language for browsers.
    jQuery is often overkill for small projects, but it does offer a simplified syntax for AJAX stuff, so I'll use it here.

    What we need to do is to make a HTML template, include the jQuery library and attach an event handler to the link that will be responsible for loading the content into the div.

    After that we need to create a file that will hold the content we will be loading.
    I'll call mine content.html.

    Then we can use jQuery's .load() method to load the content from content.html into the div.

    The whole thing looks like this:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>jQuery scaffold</title>
      </head>
      
      <body>
        <a href="#" id="myLink">Click me!</a>
        <div id="result">The text will get loaded here</div>
      
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
          $("#myLink").on("click", function(){
            $("#result").load("content.html");
          });
        </script>
      </body>
    </html>
    You might also find this useful: http://api.jquery.com/load/


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
  •