SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Java push content down script?

    Hi,

    Im new to javascript. I want to add a similar function on my blog like on http://techcrunch.com/2011/08/04/gro...tartup-obtiva/ when you press on author. It is a drop down made with javascript. Anybody can help with a similar javascript as I was trying different implementations for the whole night with no luck.

    Maybe, anybody know a similar javascript online which I could modify?

    Thanks in advance!
    Last edited by Mittineague; Aug 9, 2011 at 14:42. Reason: OP forgot to turn off auto-title

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi Donatas.

    Something like that could be achieved quite easily using some very basic HTML and jQuery, steps involved are:

    • Have a clickable item (e.g. author name)
    • Below it have a div with all the information
    • On page load, hide the div with JavaScript( $(document).ready() in jQuery terms)
    • Add a click event to the clickable item to perform a slideToggle() on the div you've hidden.


    To get you started, your HTML would look something like this:
    Code HTML4Strict:
    <a id="btnAuthor">Author name</a>
    <div id="authorInfo"> <p>Info goes here</p> </div>

    And to start, put this in your JavaScript (Assuming your HTML page already includes a reference to jQuery)
    Code JavaScript:
    $(document).ready(function(){
      //Add a click handler for the link 
      //and perform a slideToggle inside of the callback function
    });
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Tags for this Thread

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
  •