Rollover DIV's using Scriptaculous's appear effect.

Posted on 2008-11-13
Last Modified: 2013-11-19
Hi everyone,

First off, thanks in advance to anyone that takes a look at this and second an even bigger thank you to anyone able to contribute to a solution.

I am trying to make a series of DIV's have a hover effect (one div shows with it's styling intact and then on rollover that div changes to another div with that div's styling intact).

If possible I was hoping to utilise the scriptactulous appear effect (fade over I believe is the best description, not fade out/in).

If anyone could point me in the right direction for this it would be greatly appreciated.

Question by:RichardMass
    LVL 15

    Expert Comment

    For the rollover thing, do you mean you have some links and when people hover on each and a DIV in the page will has it's style changed?

    say the div is like <div id="sample">

    and on the link you can have something like

    <a href="#" onmouseover="toSomeStyle();">toSomeStyle</a>

    and the script setting style of the div sample like
    function toSomeStyle()
        document.getElementById("sample").style.backgroundColor = "#FF0000";
        document.getElementById("sample").style.border="thick solid #0000FF";

    Open in new window

    LVL 1

    Author Comment

    That would probably do the trick though I was hoping to have something like below.

    <div id="div1" style="height:200px;width:200px;background-color:#ccc">Div one here</div>
    <div id="div2" style="height:200px;width:200px;background-color:#ddd;display:none">Div two here</div>

    #Div1 stays visible until user rollover it and then #Div2 fades in over the top. At this particular point your version will work as I don't need to change the contents of the DIV however the idea above means in the future I can have the rollover actually change what appears in the DIV as it is a new DIV over the top.

    Did that make any sense, I think I've confused myself.   :-)
    LVL 15

    Accepted Solution

    Then I think this is what you may need

    I didnt make the fade in thing as I m not familar with making it and it's still not a standard that has cross-browser support.
    function toDiv1()
        document.getElementById("div2").style.visibility = "hidden";
        document.getElementById("div1").style.visibility = "visible";
    function toDiv2()
        document.getElementById("div1").style.visibility = "hidden";
        document.getElementById("div2").style.visibility = "visible";

    Open in new window


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Suggested Solutions

    Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    Viewers will learn about the different types of variables in Java and how to declare them. Decide the type of variable desired: Put the keyword corresponding to the type of variable in front of the variable name: Use the equal sign to assign a v…
    The viewer will learn how to dynamically set the form action using jQuery.

    760 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

    15 Experts available now in Live!

    Get 1:1 Help Now