How to smoothly show a div by doing a scroll over page content

Posted on 2011-05-08
Last Modified: 2012-05-11
Dear Expert:

I have a web which shows information about a city. I would like to add a link at the top for showing/hiding a map of the city. When pressing the "show" link I would like the map to be shown progressively, i.e. by scrolling the bellow content and adding the map as if there was a powerpoint transition.

I think I have seen somewhere on a web. Is this possible ? Do you have an example for doing this ?

Thank you.
Question by:gplana
    LVL 9

    Expert Comment

    You will probably want to look into jQuery ( as it can show/hide elements by using animations (like the image 'pulling down'. See:

    You may find that you get more hits for this in Javascript rather than JScript.

    LVL 15

    Author Comment

    Thank you for your help. I'm using Joomla for my site. Do you know if Jquery can be used on Joomla ? (as I think Joomla uses mootools).

    Thank you.
    LVL 9

    Accepted Solution

    I've never used Joomla, so I can't say for sure; However, appears to be what you want. It hides and shows content, moving the content below it up/down.
    LVL 15

    Author Closing Comment


    Thank you very much.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now