[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2636
  • Last Modified:

Rollover DIV's using Scriptaculous's appear effect.

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.

Richard.
0
RichardMass
Asked:
RichardMass
  • 2
1 Solution
 
quincydudeCommented:
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

0
 
RichardMassAuthor Commented:
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.   :-)
0
 
quincydudeCommented:
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

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now