mhuang002-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
2007-Feb-11 04:10 UTC
Scriptaculous: OnClick Blindown to next page -- Can''t figure it out! Please help
I''m pretty new to scriptaculous and all I want to do is allow the user
to click the text and the blind down effect to kick in, then blind
down to the Page 2, then click and repeat to Page 3 and so on. I''m
using Behavior and linking it to a javascript named "rules". If anyone
knows how to fix this, please let me know!
And I did double check to make sure all my javascript files were in
the correct places.
====HTML file====<html>
<head>
<script type="text/javascript"
src="/js/prototype.js"></script>
<script type="text/javascript"
src="/js/scriptaculous.js"></script>
<script type="text/javascript"
src="/js/behaviour.js"></script>
<script type="text/javascript"
src="/js/rules.js"></script>
</script>
</head>
<body>
<div id="blind">Page 1.</div>
<div id="box2" style="display:none;">Page
2.</div>
<div id="box3" style="display:none;">Page
3.</div>
<div id="box4" style="display:none;">Page
4.</div>
<script type="text/javascript">
// <![CDATA[
// Behaviour Rules
Behaviour.register(myrules);
// ]]>
</script>
</body>
</html>
========END HTML======
=======rules.js========
var myrules = {
''#blind'' : function(element) {
element.onclick = function() {
var targetDiv = $(''box2'');
new Effect.BlindDown(targetDiv,{duration: 0.5});
}
}
''#box2'' : function(element) {
element.onclick = function() {
var targetDiv = $(''box3'');
new Effect.BlindDown(targetDiv,{duration: 0.5});
}
}
''#box3'' : function(element) {
element.onclick = function() {
var targetDiv = $(''box4'');
new Effect.BlindDown(targetDiv,{duration: 0.5});
}
}
''#box4'' : function(element) {
element.onclick = function() {
var targetDiv = $(''box1'');
new Effect.BlindDown(targetDiv,{duration: 0.5});
}
}
};
=======end rules.js=======
Thanks in advance,
Mike
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
caillou
2007-Feb-11 10:17 UTC
Re: Scriptaculous: OnClick Blindown to next page -- Can''t figure it out! Please help
hi mike, you might want to add commas between your properties (which is the kind of thing firebug tells you right away;) :> =======rules.js========> > var myrules = { > > ''#blind'' : function(element) { > element.onclick = function() { > var targetDiv = $(''box2''); > new Effect.BlindDown(targetDiv,{duration: 0.5}); > } > },// ^ here!> > ''#box2'' : function(element) { > element.onclick = function() { > var targetDiv = $(''box3''); > new Effect.BlindDown(targetDiv,{duration: 0.5}); > } > },// ^ here!> > ''#box3'' : function(element) { > element.onclick = function() { > var targetDiv = $(''box4''); > new Effect.BlindDown(targetDiv,{duration: 0.5}); > } > },// ^ here!> > ''#box4'' : function(element) { > element.onclick = function() { > var targetDiv = $(''box1''); > new Effect.BlindDown(targetDiv,{duration: 0.5}); > } > } > > }; > > =======end rules.js========--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Colin Mollenhour
2007-Feb-11 11:05 UTC
Re: Scriptaculous: OnClick Blindown to next page -- Can''t figure it out! Please help
myrules is an object, object properties must be comma separated. Check
your browser''s error console on page load and you should see a syntax
error. Firebug says "missing } after property list" and gives a line
number, but any browser should have an error console that you can enable
easily enough and monitor for errors such as this. I assume that if you
added the commas after each rule (except the last of course) then it
would work. However, you don''t seem very familiar with Prototype, so
please keep reading and let me help you out.
In your real usage scenario behaviour may be more useful, but in this
case it is completely unnecessary since you are using IDs. All you need
at the minimum is the following:
------------------------
Event.observe(''blind'',''click'',function(){
new Effect.BlindDown(''box2'',{duration: 0.5});
});
Event.observe(''box2'',''click'',function(){
new Effect.BlindDown(''box3'',{duration: 0.5});
});
Event.observe(''box3'',''click'',function(){
new Effect.BlindDown(''box4'',{duration: 0.5});
});
-----------------------
If you were applying to groups of elements where CSS selectors are
actually useful you could use Prototype''s $$ function with just as much
syntactical clarity.
However, this is still not good programming.
It''d be even better to identify or create a pattern and write one class
or function that can handle it all. Reasons for this off of the top of
my head:
- No repeated code. Repeated code is prone to silly errors, difficult
to update, takes longer to download, harder to debug, and on and on.
There are a million reasons not to use code that repeats itself.
- You can reuse it elsewhere with ease, redistribute it, add new
features to it later, etc..
- Carpel tunnel syndrome sucks.
- Save bandwidth.. check my solution at the bottom to see what I mean.
- It is just better. I don''t feel like coming up with any more reasons
right now..
Here''s an example of some better code to accomplish the same thing:
I''ve identified a simple pattern, that you have divs numbered with the
same prefix and each div opens another div, with the same name and the
subsequent number appended, when clicked.
Another pattern here is that each div opens the next div of the same
class name when clicked. This would let you not have to specify any ids,
but depending on your situation one method may be better than the
other.. In this example I am using the latter. Give some thought to
where you should use ids and where you should use class names.
There is quite possibly a better way to do this and everyone has
preferences, but this is off the top of my head and is a good
Prototype''ish solution.
-----------------------------
<html>
<head>
<script type="text/javascript"
src="/include/prototype/prototype.js"></script>
<script type="text/javascript"
src="/include/prototype/scriptaculous.js"></script>
</head>
<body>
<p>
<div class="page">Page 1.</div>
<div style="display:none;" class="page">Page
2.</div>
<div style="display:none;" class="page">Page
3.</div>
<div style="display:none;" class="page">Page
4.</div>
</p>
<div id="book">
<div>Book Page 1.</div>
<div style="display:none;">Book Page 2.</div>
<div style="display:none;">Book Page 3.</div>
<div style="display:none;">Book Page 4.</div>
</div>
<script type="text/javascript">
var Reader = Class.create(); //Protoype''s god-send to Javascript OO
Reader.prototype = {
initialize: function(selector){ //this function is called as a
constructor
this.selector = selector;
this.clickListener = this.nextPage.bindAsEventListener(this);
$$(this.selector).invoke(''observe'',
''click'', this.clickListener);
},
nextPage: function(event){
//match() doesn''t support children in the CSS selector, so skip to
the lowest level
var selector = this.selector.split(/\s+/).last();
var next = $(Event.element(event)).next(selector);
if(next && !next.visible()){ new Effect.BlindDown(next,{duration:
0.5}); }
},
dispose: function(){
$$(this.selector).invoke(''stopObserving'',
''click'', this.clickListener);
}
};
/* Create our readers */
//the dot here is the CSS class selector (all elements with class
''page'')
new Reader(''.page'');
//You could even use all div children of a specific element without the
need for classes
var bookReader = new Reader(''div#book div'');
//You can cleanup the bookReader like so if necessary:
//bookReader.dispose();
</script>
</body>
</html>
--------------------------
Note that solution would only work with clicks on the actual div, not
it''s children (e.g. if it contained links), which may or may not be
what
you want. If not, I got carried away and decided to try another
approach, this one is the shortest possible code to accomplish your goal
but it doesn''t support disposal which probably isn''t necessary
in your
case. It will respond to clicks on the div''s children like your
previous
code would have.
-------Shortest solution (paste over the other one in the same HTML
file)-----------
var Reader = {
create: function(selector){
var last = false;
$$(selector).each(function(element){
if(last) last.observe(''click'',
Reader.showPage.bind(element));
last = element;
});
},
showPage: function(){
if(!this.visible()){ new Effect.BlindDown(this,{duration: 0.5}); }
}
};
Reader.create(''.page'');
Reader.create(''div#book div'');
-------------------------------
The first one is more memory efficient since all elements call the same
observer function whereas the second solution creates a new function for
each element (bind uses a closure and returns a new function). Unless
you have thousands of divs to observe this isn''t going to make much
difference, but to do proper cleanup you''d have to store each one of
those functions in an array, or use my Event patch :)
http://dev.rubyonrails.org/ticket/7435/ -shameless plug
Well that is a really long answer to a simple problem, but hopefully it
is helpful in learning the Prototype way. :)
Colin
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Christophe Porteneuve
2007-Feb-11 13:46 UTC
Re: Scriptaculous: OnClick Blindown to next page -- Can''t figure it out! Please help
mhuang002-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org a écrit :> I''m pretty new to scriptaculous and all I want to do is allow the user > to click the text and the blind down effect to kick in, then blind > down to the Page 2, then click and repeat to Page 3 and so on. I''m > using Behavior and linking it to a javascript named "rules". If anyone > knows how to fix this, please let me know!Aside from the answers you got from caillou and Colin, if you''re just looking for a full-page effects-enabled result (like a slideshow thing), have a look at the pre-built Presentacular tech, based on S5 and script.aculo.us: http://labs.cavorite.com/presentacular/ I used it on a quite a few slideshows, works like a charm. -- Christophe Porteneuve a.k.a. TDD "[They] did not know it was impossible, so they did it." --Mark Twain Email: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
mhuang002-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
2007-Feb-11 15:47 UTC
Re: Scriptaculous: OnClick Blindown to next page -- Can''t figure it out! Please help
Thanks so much guys. I really appreciate it. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---