Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Scriptaculous: appear on onmouseover, fade on onmouseout

Posted on 2008-10-29
10
5,152 Views
Last Modified: 2010-08-05
Hi,

I´m kinda new at the prototype/scriptaculous libraries.

My problem is this.

I have a menu, a few divs that I want to "appear" a background-image in when I mouse over and "fade" the image when I mouse out.

So when I hover the <a> in the <div class="menuItem"> I want the <div id="hover"> to appear once and stay that way until I move the mouse away. Then I want the <div id="hover"> to fade out.

Very thankful for all the help I can get
//HTML
<div id="menuContainer">
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover'));" onmouseout="fadeThis($('hover1'));">menu item 1</a>
        <div id="hover1"></div>
    </div>
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover'));" onmouseout="fadeThis($('hover2'));">menu item 2</a>
        <div id="hover2"></div>
    </div>
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover'));" onmouseout="fadeThis($('hover3'));">menu item 3</a>
        <div id="hover3"></div>
    </div>
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover'));" onmouseout="fadeThis($('hover4'));">menu item 4</a>
        <div id="hover4"></div>
    </div>            
</div>
 
//JAVASCRIPT
function appearThis(target) {
    new Effect.Appear(target, {duration: 0.2});
}
function fadeThis(target) {
    new Effect.Fade(target, {duration: 0.2});
}

Open in new window

0
Comment
Question by:Gonzmachine
  • 5
  • 4
10 Comments
 
LVL 39

Accepted Solution

by:
Roger Baklund earned 250 total points
ID: 22835688
There is no <div id="hover">, but you have <div id="hover1">, <div id="hover2">, <div id="hover3"> and <div id="hover4">

Change the four "appearThis($('hover'));" into "appearThis($('hover1'));",  "appearThis($('hover2'));" and so on.
0
 
LVL 15

Expert Comment

by:Tomarse111
ID: 22835705
all you mouseovers reference appearThis($('hover')); but there is no div with the id hover as far as i can see? each one is hover1, hover2 etc?
0
 

Author Comment

by:Gonzmachine
ID: 22835752
Ah, my bad, my example wasn´t correct.

The problem is not to trig the functions but the appear/fade to work properly.
//HTML
<div id="menuContainer">
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover1'));" onmouseout="fadeThis($('hover1'));">menu item 1</a>
        <div id="hover1"></div>
    </div>
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover2'));" onmouseout="fadeThis($('hover2'));">menu item 2</a>
        <div id="hover2"></div>
    </div>
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover3'));" onmouseout="fadeThis($('hover3'));">menu item 3</a>
        <div id="hover3"></div>
    </div>
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover4'));" onmouseout="fadeThis($('hover4'));">menu item 4</a>
        <div id="hover4"></div>
    </div>            
</div>
 
//JAVASCRIPT
function appearThis(target) {
    new Effect.Appear(target, {duration: 0.2});
}
function fadeThis(target) {
    new Effect.Fade(target, {duration: 0.2});
}

Open in new window

0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:Gonzmachine
ID: 22836015
New core, kinda working...

I use a  observer to go over the div with the class .hoverable.

What I need help with Is to get the right div to appear and fade on the right mouseover/mouseout.
//HTML
<div id="globalTopMenu" class="hoverable">            
    <div class="menuItem">
        <div id="hover" style="display: none;"><a href="#">item 1</div>
        <a href="#">item 1</a>                    
    </div>
    <div class="menuItem">
        <div id="hover" style="display: none;"><a href="#">item 2</div>
        <a href="#">item 2</a>                    
    </div>
    <div class="menuItem">
        <div id="hover" style="display: none;"><a href="#">item 3</div>
        <a href="#">item 3</a>                    
    </div>
    <div class="menuItem">
        <div id="hover" style="display: none;"><a href="#">item 4</div>
        <a href="#">item 4</a>                    
    </div>
</div>
 
//JAVASCRIPT (with comments)
Event.observe(window, 'load', function() {
  $$('.hoverable > *').each(function (e) {
    Event.observe(e, 'mouseover', function() {
        //fade in the child <div.hover> under current parent <div.menuItem) (and stay there)
    });  
 
    Event.observe(e, 'mouseout', function() {
        //fade out that same child
    });
  });
});

Open in new window

0
 
LVL 39

Expert Comment

by:Roger Baklund
ID: 22837381
You got the answer, then you change the question? That is not very nice... are you sure you got it right this time? You really want multiple divs with id="hover"? Or did you mean <div class="hover"> ? I suggest you ask a new question.
0
 

Author Comment

by:Gonzmachine
ID: 22838684
cxr: Well, the first code I wrote was just a sample of how my html/js looks. So the experts on this page could get a feeling of what I wanted to do and maybe help me with a solution.

I did not know that I wasn´t allowed to add information to the question. I thought that anyway and are very eager to learn a solution to my problem.



0
 
LVL 39

Expert Comment

by:Roger Baklund
ID: 22839294
You are of course allowed to add information, but that is not what you did. You asked a new question after you got the correct answer on the original question. Why can't you use the working solution we provided? Why do it a different way?

http://www.experts-exchange.com/questionTips.jsp#qt7
0
 

Author Comment

by:Gonzmachine
ID: 22839391
cxr: The solution is not correct, the mouseover works, but doesn´t behave like it should.

I understrand that my question was badly written. I probably should have asked for the right way of solving this type of problem instead of writing example code that didn´t work.

I´ll try to write a better question next time.
0
 

Author Closing Comment

by:Gonzmachine
ID: 31511385
I´ll be more precise with my next question, sorry for the misunderstanding.
0
 
LVL 39

Expert Comment

by:Roger Baklund
ID: 22840296
It works on my computer.  You must of course include the prototype and scriptacolous scripts, and have some content in the divs, and the divs must be hidden initially. Complete code:
<html>
<head>
<title>scriptaculous hover</title>
 
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/effects.js"></script>
 
<script type="text/javascript">
function appearThis(target) {
    new Effect.Appear(target, {duration: 0.2});
}
function fadeThis(target) {
    new Effect.Fade(target, {duration: 0.2});
}
</script>
</head>
<body>
<div id="menuContainer">
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover1'));" onmouseout="fadeThis($('hover1'));">menu item 1</a>
        <div id="hover1" style="display:none">hover1</div>
    </div>
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover2'));" onmouseout="fadeThis($('hover2'));">menu item 2</a>
        <div id="hover2" style="display:none">hover2</div>
    </div>
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover3'));" onmouseout="fadeThis($('hover3'));">menu item 3</a>
        <div id="hover3" style="display:none">hover3</div>
    </div>
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover4'));" onmouseout="fadeThis($('hover4'));">menu item 4</a>
        <div id="hover4" style="display:none">hover4</div>
    </div>
</div>
</body>
</html>

Open in new window

0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jquery datable hidden section doesn't submit 2 15
Json Schema 8 32
How  can  I extract  Id  from a  URL  using  Javascript? 12 29
send email part1 9 23
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

808 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