thr3ads.net - Rails spinoffs - Scriptaculous: OnClick Blindown to next page -- Can''t figure it out! Please help [Feb 2007]

If this information is useful, please help other people find it:
Share via:

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

head link

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

head link

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

head link

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

head link

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
-~----------~----~----~----~------~----~------~--~---

Rails spinoffs - Feb 2007 - Scriptaculous: OnClick Blindown to next page -- Can't figure it out! Please help

Scriptaculous: OnClick Blindown to next page -- Can''t figure it out! Please help

Re: Scriptaculous: OnClick Blindown to next page -- Can''t figure it out! Please help

Re: Scriptaculous: OnClick Blindown to next page -- Can''t figure it out! Please help

Re: Scriptaculous: OnClick Blindown to next page -- Can''t figure it out! Please help

Re: Scriptaculous: OnClick Blindown to next page -- Can''t figure it out! Please help