[Proto-Scripty] Re: Hovering Div Shows a Hidden Div - jQuery to Prototype Conversion
Oh and I just had another thought.
I have multiple instances of the same html. Around 10 I think. So
like:
div class=recent-question
img src=images/new/img-sample.gif alt= width=70 height=60 /
div class=question-text
h3Heading/h3
pa href=#Yadda Yadda Yadda/p
/div
div class=interact style=display:none;
ul
lia href=#Choice1/a/li
lia href=#Choice2/a/li
lia href=#Choice3/a/li
/ul
/div
/div
div class=recent-question
img src=images/new/img-sample.gif alt= width=70 height=60 /
div class=question-text
h3Heading/h3
pa href=#Yadda Yadda Yadda/p
/div
div class=interact style=display:none;
ul
lia href=#Choice1/a/li
lia href=#Choice2/a/li
lia href=#Choice3/a/li
/ul
/div
/div
div class=recent-question
img src=images/new/img-sample.gif alt= width=70 height=60 /
div class=question-text
h3Heading/h3
pa href=#Yadda Yadda Yadda/p
/div
div class=interact style=display:none;
ul
lia href=#Choice1/a/li
lia href=#Choice2/a/li
lia href=#Choice3/a/li
/ul
/div
/div
div class=recent-question
img src=images/new/img-sample.gif alt= width=70 height=60 /
div class=question-text
h3Heading/h3
pa href=#Yadda Yadda Yadda/p
/div
div class=interact style=display:none;
ul
lia href=#Choice1/a/li
lia href=#Choice2/a/li
lia href=#Choice3/a/li
/ul
/div
/div
And so on... Would that cause any issues?
On May 7, 10:28 am, T.J. Crowder t...@crowdersoftware.com wrote:
Hi,
Haven't we already been talking about this over
here?http://groups.google.com/group/prototype-scriptaculous/browse_thread/...
Here's a rough, untested translation -- but again, there is no
substitute for sitting down and reading the API[1] front to back. It
really does not take very long.
document.observe(dom:loaded, function(){
// Hook up handlers for `mouseenter` and `mouseleave`
$$(.recent-question).each(function(element) {
element.observe('mouseenter', recentQuestionEnter);
element.observe('mouseleave', recentQuestionLeave);
});
// The `mouseenter` handler
function recentQuestionEnter() {
// Call script.aculo.us' #appear on each child .interact
element
this.select(.interact).invoke('appear', {duration: 2.0});
}
// The `mouseleave` handler
function recentQuestionLeave() {
// Call script.aculo.us' #fade on each child .interact element
this.select(.interact).invoke('fade', {duration: 2.0});
}
});
That uses these Prototype functions
* document.observe
* $$
* Enumerable#each
* Element#observe (which is just a wrapper for Event.observe)
* Element#select
* Enumerable#invoke
...and these script.aculo.us functions:
* Effect.Appear (as Element#appear)[2]
* Effect.Fade (as Element#fade)[3]
[1]http://api.prototypejs.org
[2]http://wiki.github.com/madrobby/scriptaculous/effect-appear
[3]http://wiki.github.com/madrobby/scriptaculous/effect-fade
HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / comwww.crowdersoftware.com
On May 7, 6:04 pm, Pixelflips philliplovel...@gmail.com wrote:
I may get killed for this but I have been trying for a few days using
Prototype to show a hidden div when hovering over another div. I have
this working fine in jquery but I could use some help porting it over
to prototype.
The code sample:
script type=text/javascript
$(document).ready(function(){
$(.recent-question).hover(function(){
$(this).find(.interact).fadeIn(2.0);
}, function(){
$(this).find(.interact).fadeOut(2.0);
});});
/script
div class=recent-question
img src=images/new/img-sample.gif alt= width=70 height=60 /
div class=question-text
h3Heading/h3
[Proto-Scripty] Re: Hovering Div Shows a Hidden Div - jQuery to Prototype Conversion
Hi,
I have multiple instances of the same html. Around 10 I think. So
like:
No, both your jQuery and my translation handle that.
I have
tried the awesome solution you put together and while I don't get any
errors, I also don't get any action on the page.
Can you put together a self-contained, minimalist test case?[1] (See
the link for what I mean, and the rationale.)
[1] http://proto-scripty.wikidot.com/self-contained-test-page
HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com
On May 7, 7:37 pm, Pixelflips philliplovel...@gmail.com wrote:
Oh and I just had another thought.
I have multiple instances of the same html. Around 10 I think. So
like:
div class=recent-question
img src=images/new/img-sample.gif alt= width=70 height=60 /
div class=question-text
h3Heading/h3
pa href=#Yadda Yadda Yadda/p
/div
div class=interact style=display:none;
ul
lia href=#Choice1/a/li
lia href=#Choice2/a/li
lia href=#Choice3/a/li
/ul
/div
/div
div class=recent-question
img src=images/new/img-sample.gif alt= width=70 height=60 /
div class=question-text
h3Heading/h3
pa href=#Yadda Yadda Yadda/p
/div
div class=interact style=display:none;
ul
lia href=#Choice1/a/li
lia href=#Choice2/a/li
lia href=#Choice3/a/li
/ul
/div
/div
div class=recent-question
img src=images/new/img-sample.gif alt= width=70 height=60 /
div class=question-text
h3Heading/h3
pa href=#Yadda Yadda Yadda/p
/div
div class=interact style=display:none;
ul
lia href=#Choice1/a/li
lia href=#Choice2/a/li
lia href=#Choice3/a/li
/ul
/div
/div
div class=recent-question
img src=images/new/img-sample.gif alt= width=70 height=60 /
div class=question-text
h3Heading/h3
pa href=#Yadda Yadda Yadda/p
/div
div class=interact style=display:none;
ul
lia href=#Choice1/a/li
lia href=#Choice2/a/li
lia href=#Choice3/a/li
/ul
/div
/div
And so on... Would that cause any issues?
On May 7, 10:28 am, T.J. Crowder t...@crowdersoftware.com wrote:
Hi,
Haven't we already been talking about this over
here?http://groups.google.com/group/prototype-scriptaculous/browse_thread/...
Here's a rough, untested translation -- but again, there is no
substitute for sitting down and reading the API[1] front to back. It
really does not take very long.
document.observe(dom:loaded, function(){
// Hook up handlers for `mouseenter` and `mouseleave`
$$(.recent-question).each(function(element) {
element.observe('mouseenter', recentQuestionEnter);
element.observe('mouseleave', recentQuestionLeave);
});
// The `mouseenter` handler
function recentQuestionEnter() {
// Call script.aculo.us' #appear on each child .interact
element
this.select(.interact).invoke('appear', {duration: 2.0});
}
// The `mouseleave` handler
function recentQuestionLeave() {
// Call script.aculo.us' #fade on each child .interact element
this.select(.interact).invoke('fade', {duration: 2.0});
}
});
That uses these Prototype functions
* document.observe
* $$
* Enumerable#each
* Element#observe (which is just a wrapper for Event.observe)
* Element#select
* Enumerable#invoke
...and these script.aculo.us functions:
* Effect.Appear (as Element#appear)[2]
* Effect.Fade (as Element#fade)[3]
[1]http://api.prototypejs.org
[2]http://wiki.github.com/madrobby/scriptaculous/effect-appear
[3]http://wiki.github.com/madrobby/scriptaculous/effect-fade
HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / comwww.crowdersoftware.com
On May 7, 6:04 pm,
