From ad95ff1b1505adce5e2d2f12cf85ae666cc626ca Mon Sep 17 00:00:00 2001 From: Eston Bond Date: Thu, 14 Oct 2010 19:06:56 -0700 Subject: [PATCH 01/20] Porting scriptaculous documentation to Jekyll/Pages --- _config.yml | 3 + _layouts/default.html | 29 + _posts/2009-01-01-ajax-autocompleter.html | 165 +++++ ...09-01-01-ajax-inplacecollectioneditor.html | 136 ++++ _posts/2009-01-01-ajax-inplaceeditor.html | 638 ++++++++++++++++++ _posts/2009-01-01-autocompleter-base.html | 17 + _posts/2009-01-01-autocompleter-local.html | 155 +++++ _posts/2009-01-01-behaviours.html | 13 + _posts/2009-01-01-born----kazdoor.html | 7 + _posts/2009-01-01-builder.html | 114 ++++ _posts/2009-01-01-camus.html | 23 + .../2009-01-01-combination-effects-demo.html | 137 ++++ _posts/2009-01-01-combination-effects.html | 26 + _posts/2009-01-01-contribute.html | 22 + _posts/2009-01-01-controls.html | 24 + _posts/2009-01-01-core-effects.html | 174 +++++ _posts/2009-01-01-demos.html | 23 + _posts/2009-01-01-draggable.html | 177 +++++ _posts/2009-01-01-draggables-object.html | 86 +++ _posts/2009-01-01-droppables.html | 180 +++++ _posts/2009-01-01-effect-appear.html | 94 +++ _posts/2009-01-01-effect-blinddown.html | 60 ++ _posts/2009-01-01-effect-blindup.html | 104 +++ _posts/2009-01-01-effect-dropout.html | 27 + _posts/2009-01-01-effect-fade.html | 63 ++ _posts/2009-01-01-effect-fold.html | 35 + _posts/2009-01-01-effect-grow.html | 51 ++ _posts/2009-01-01-effect-highlight.html | 67 ++ _posts/2009-01-01-effect-methods.html | 134 ++++ _posts/2009-01-01-effect-morph.html | 72 ++ _posts/2009-01-01-effect-move.html | 59 ++ _posts/2009-01-01-effect-multiple.html | 113 ++++ _posts/2009-01-01-effect-opacity.html | 42 ++ _posts/2009-01-01-effect-parallel.html | 105 +++ _posts/2009-01-01-effect-puff.html | 59 ++ _posts/2009-01-01-effect-pulsate.html | 53 ++ _posts/2009-01-01-effect-queues.html | 97 +++ _posts/2009-01-01-effect-scale.html | 56 ++ _posts/2009-01-01-effect-scrollto.html | 42 ++ _posts/2009-01-01-effect-shake.html | 46 ++ _posts/2009-01-01-effect-shrink.html | 51 ++ _posts/2009-01-01-effect-slidedown.html | 100 +++ _posts/2009-01-01-effect-slideup.html | 103 +++ _posts/2009-01-01-effect-squish.html | 35 + _posts/2009-01-01-effect-switchoff.html | 35 + _posts/2009-01-01-effect-tagifytext.html | 41 ++ _posts/2009-01-01-effect-toggle.html | 70 ++ _posts/2009-01-01-effect-transitions.html | 93 +++ _posts/2009-01-01-effect-tween.html | 27 + _posts/2009-01-01-effects.html | 30 + _posts/2009-01-01-faq.html | 62 ++ ...09-01-01-form-element-delayedobserver.html | 20 + _posts/2009-01-01-ghostly-sortable-demo.html | 9 + _posts/2009-01-01-ghostly.html | 8 + _posts/2009-01-01-giving-elements-layout.html | 9 + _posts/2009-01-01-hello.html | 9 + _posts/2009-01-01-in-place-editing.html | 9 + _posts/2009-01-01-in-place-editor.html | 12 + _posts/2009-01-01-license.html | 24 + _posts/2009-01-01-list-morph-demo.html | 63 ++ _posts/2009-01-01-porting.html | 36 + _posts/2009-01-01-puzzle-demo.html | 60 ++ _posts/2009-01-01-ruby-on-rails.html | 22 + _posts/2009-01-01-shahzad.html | 7 + _posts/2009-01-01-slider.html | 312 +++++++++ _posts/2009-01-01-smdc.html | 7 + _posts/2009-01-01-sortable-create.html | 158 +++++ _posts/2009-01-01-sortable-lists-demo.html | 37 + _posts/2009-01-01-sortable-sequence.html | 33 + _posts/2009-01-01-sortable-serialize.html | 90 +++ _posts/2009-01-01-sortable.html | 101 +++ _posts/2009-01-01-sortables-create.html | 8 + _posts/2009-01-01-sortables.html | 136 ++++ _posts/2009-01-01-sound.html | 121 ++++ _posts/2009-01-01-style-guide.html | 80 +++ _posts/2009-01-01-tabs.html | 248 +++++++ _posts/2009-01-01-test-unit-assertions.html | 52 ++ _posts/2009-01-01-test-unit-logger.html | 28 + _posts/2009-01-01-test-unit-runner.html | 81 +++ _posts/2009-01-01-test-unit-testcase.html | 19 + _posts/2009-01-01-test-unit.html | 15 + _posts/2009-01-01-unit-testing.html | 26 + index.html | 72 ++ 83 files changed, 6087 insertions(+) create mode 100644 _config.yml create mode 100644 _layouts/default.html create mode 100644 _posts/2009-01-01-ajax-autocompleter.html create mode 100644 _posts/2009-01-01-ajax-inplacecollectioneditor.html create mode 100644 _posts/2009-01-01-ajax-inplaceeditor.html create mode 100644 _posts/2009-01-01-autocompleter-base.html create mode 100644 _posts/2009-01-01-autocompleter-local.html create mode 100644 _posts/2009-01-01-behaviours.html create mode 100644 _posts/2009-01-01-born----kazdoor.html create mode 100644 _posts/2009-01-01-builder.html create mode 100644 _posts/2009-01-01-camus.html create mode 100644 _posts/2009-01-01-combination-effects-demo.html create mode 100644 _posts/2009-01-01-combination-effects.html create mode 100644 _posts/2009-01-01-contribute.html create mode 100644 _posts/2009-01-01-controls.html create mode 100644 _posts/2009-01-01-core-effects.html create mode 100644 _posts/2009-01-01-demos.html create mode 100644 _posts/2009-01-01-draggable.html create mode 100644 _posts/2009-01-01-draggables-object.html create mode 100644 _posts/2009-01-01-droppables.html create mode 100644 _posts/2009-01-01-effect-appear.html create mode 100644 _posts/2009-01-01-effect-blinddown.html create mode 100644 _posts/2009-01-01-effect-blindup.html create mode 100644 _posts/2009-01-01-effect-dropout.html create mode 100644 _posts/2009-01-01-effect-fade.html create mode 100644 _posts/2009-01-01-effect-fold.html create mode 100644 _posts/2009-01-01-effect-grow.html create mode 100644 _posts/2009-01-01-effect-highlight.html create mode 100644 _posts/2009-01-01-effect-methods.html create mode 100644 _posts/2009-01-01-effect-morph.html create mode 100644 _posts/2009-01-01-effect-move.html create mode 100644 _posts/2009-01-01-effect-multiple.html create mode 100644 _posts/2009-01-01-effect-opacity.html create mode 100644 _posts/2009-01-01-effect-parallel.html create mode 100644 _posts/2009-01-01-effect-puff.html create mode 100644 _posts/2009-01-01-effect-pulsate.html create mode 100644 _posts/2009-01-01-effect-queues.html create mode 100644 _posts/2009-01-01-effect-scale.html create mode 100644 _posts/2009-01-01-effect-scrollto.html create mode 100644 _posts/2009-01-01-effect-shake.html create mode 100644 _posts/2009-01-01-effect-shrink.html create mode 100644 _posts/2009-01-01-effect-slidedown.html create mode 100644 _posts/2009-01-01-effect-slideup.html create mode 100644 _posts/2009-01-01-effect-squish.html create mode 100644 _posts/2009-01-01-effect-switchoff.html create mode 100644 _posts/2009-01-01-effect-tagifytext.html create mode 100644 _posts/2009-01-01-effect-toggle.html create mode 100644 _posts/2009-01-01-effect-transitions.html create mode 100644 _posts/2009-01-01-effect-tween.html create mode 100644 _posts/2009-01-01-effects.html create mode 100644 _posts/2009-01-01-faq.html create mode 100644 _posts/2009-01-01-form-element-delayedobserver.html create mode 100644 _posts/2009-01-01-ghostly-sortable-demo.html create mode 100644 _posts/2009-01-01-ghostly.html create mode 100644 _posts/2009-01-01-giving-elements-layout.html create mode 100644 _posts/2009-01-01-hello.html create mode 100644 _posts/2009-01-01-in-place-editing.html create mode 100644 _posts/2009-01-01-in-place-editor.html create mode 100644 _posts/2009-01-01-license.html create mode 100644 _posts/2009-01-01-list-morph-demo.html create mode 100644 _posts/2009-01-01-porting.html create mode 100644 _posts/2009-01-01-puzzle-demo.html create mode 100644 _posts/2009-01-01-ruby-on-rails.html create mode 100644 _posts/2009-01-01-shahzad.html create mode 100644 _posts/2009-01-01-slider.html create mode 100644 _posts/2009-01-01-smdc.html create mode 100644 _posts/2009-01-01-sortable-create.html create mode 100644 _posts/2009-01-01-sortable-lists-demo.html create mode 100644 _posts/2009-01-01-sortable-sequence.html create mode 100644 _posts/2009-01-01-sortable-serialize.html create mode 100644 _posts/2009-01-01-sortable.html create mode 100644 _posts/2009-01-01-sortables-create.html create mode 100644 _posts/2009-01-01-sortables.html create mode 100644 _posts/2009-01-01-sound.html create mode 100644 _posts/2009-01-01-style-guide.html create mode 100644 _posts/2009-01-01-tabs.html create mode 100644 _posts/2009-01-01-test-unit-assertions.html create mode 100644 _posts/2009-01-01-test-unit-logger.html create mode 100644 _posts/2009-01-01-test-unit-runner.html create mode 100644 _posts/2009-01-01-test-unit-testcase.html create mode 100644 _posts/2009-01-01-test-unit.html create mode 100644 _posts/2009-01-01-unit-testing.html create mode 100644 index.html diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..b77c36f --- /dev/null +++ b/_config.yml @@ -0,0 +1,3 @@ +permalink: /:title +auto: true +server: true \ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..1d91b6c --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,29 @@ + + + + + {{ page.title }} — Scriptaculous Wiki + + + + + + + +
+

{{ page.title }}

+
+ {{ content }} +
+ +
+

Pages

+
    + +
+
+
+ + + \ No newline at end of file diff --git a/_posts/2009-01-01-ajax-autocompleter.html b/_posts/2009-01-01-ajax-autocompleter.html new file mode 100644 index 0000000..703ae7a --- /dev/null +++ b/_posts/2009-01-01-ajax-autocompleter.html @@ -0,0 +1,165 @@ +--- +layout: default +title: Ajax.Autocompleter +--- + +
+ +

Controls > Ajax.Autocompleter

+

Introduction

+

Ajax.Autocompleter allows for server-powered autocompleting text fields.

+

Syntax

+
new Ajax.Autocompleter(id_of_text_field, id_of_div_to_populate, url, options);
+
+

Options (Inherited from Autocompleter.Base, as well as all options for Prototype’s Ajax.Request )

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OptionDefault ValueDescription
paramNamethe ‘name’ of the elementName of the parameter for the string typed by the user on the autocompletion field
tokens[] Tokenized incremental autocompletion is enabled automatically when an autocompleter is instantiated with the ‘tokens’ option in the options parameter: See Also Autocompleter.Base
frequency0.4How frequently (in seconds) the input field should be polled for changes before firing an Ajax request.
minChars1The minimum number of characters that must be entered in the input field before an Ajax request is made.
selectnullThe class name of the element that contains the text to be placed into the input box. By default all text will be used.
indicatornullThe HTML id of an element to display (using Element.show) while the Ajax request is in progress. This element will be hidden with Element.hide when the request is completed. This is useful for displaying an animated spinner during processing. See Ajaxload for some image examples.
updateElementnullHook for a custom function to replace the built-in function that adds the list item text to the input field. The custom function is called after the element has been updated (i.e. when the user has selected an entry). The function receives one parameter only: the selected item (the <li> item selected)
afterUpdateElementnullHook for a custom function that’s called following the execution of the built-in function that adds the list item text to the input field, which happens after a user has selected an entry. (The difference between updateElement and afterUpdateElement is that updateElement replaces the built-in Autocompleter function; afterUpdateElement supplements that built-in function.) The function receives two parameters, the input field specified for autocompletion, and the selected item (the <li> item selected)
callbacknullThis function is called just before the Request is actually made, allowing you to modify the querystring that is sent to the server. The function receives the completer’s input field and the default querystring (‘value=XXX’) as parameters. You should return the querystring you want used, including the default part.
parametersnullTo send additional parameters to the server, add them here in the format: 'field=value&another=value'. Errata/bug: The hash format {field: 'value',another: 'value'} was noted in this wiki to work, but it does not, as the Ruby on Rails project has separately documented and fixed in their codebase.
+

Example

+

HTML
+

<input type="text" id="autocomplete" name="autocomplete_parameter"/>
+<div id="autocomplete_choices" class="autocomplete"></div>
+

+

Javascript
+

new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "/url/on/server", {});
+

+

HTML with indicator
+

<input type="text" id="autocomplete" name="autocomplete_parameter"/>
+<span id="indicator1" style="display: none">
+  <img src="/images/spinner.gif" alt="Working..." />
+</span>
+<div id="autocomplete_choices" class="autocomplete"></div>
+

+

(As with any element destined to work with Prototype’s Element.toggle/show/hide, your indicator element should use an inline style attribute with a display property, here initially set to none. If you need to assign it CSS rules, put the class attribute before the style attribute to avoid override.)

+

Javascript with options
+

new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "/url/on/server", {
+  paramName: "value", 
+  minChars: 2, 
+  indicator: 'indicator1'
+});
+

+

CSS
+The styling of the div and the returned UL are important.
+Applying a visual cue that an item is selected allows the user to take advantage of the keyboard navigation of the dropdown and adding background colors, borders, positioning, etc to the div (as the demo does) allows the UI element to stand out. The CSS from the demo applied to the examples would be:

+
div.autocomplete {
+  position:absolute;
+  width:250px;
+  background-color:white;
+  border:1px solid #888;
+  margin:0;
+  padding:0;
+}
+div.autocomplete ul {
+  list-style-type:none;
+  margin:0;
+  padding:0;
+}
+div.autocomplete ul li.selected { background-color: #ffb;}
+div.autocomplete ul li {
+  list-style-type:none;
+  display:block;
+  margin:0;
+  padding:2px;
+  height:32px;
+  cursor:pointer;
+}
+
+

Tokenized autocompletion

+

Tokenized incremental autocompletion is enabled automatically when an autocompleter is instantiated with the ‘tokens’ option in the options parameter:

+
new Ajax.Autocompleter('id','upd', 'url', { tokens: ',' });
+

will incrementally autocomplete with a comma as the token.

+

Additionally, ’,’ in the above example can be replaced with a token array, e.g. tokens: [',', '\n'] which enables autocompletion on multiple tokens. This is most useful when one of the tokens is \n (a newline), as it allows smart autocompletion after linebreaks.

+

Server Return

+

Look through your POST environment variable for the current entry in the text-box.

+

The server-side will receive the typed string as a parameter with the same name as the name of the text field element of the autocompletion (its name attribute). You can override it by setting the option paramName.

+

The server must return an unordered list.
+For instance, this list might be returned after the user typed the letter “y”

+
<ul>
+    <li>your mom</li>
+    <li>yodel</li>
+</ul>
+
+

If your search returns no results, it is critical that your server immediately return an empty list, rather than nothing. You will only notice this need if you use an indicator to show server activity — the indicator will never go away if your server doesn’t return an empty list.

+

If you wish to display additional information in the autocomplete dropdown that you don’t want inserted into the field when you choose an item, surround it in a <span> (could work with others but not tested) with the class of “informal”.

+

For instance, the following shows a list of companies and their addresses, but only the company name will get inserted:

+
<ul>
+    <li>ACME Inc <span class="informal"> 5012 East 5th Street</span></li>
+    <li>Scriptaculous <span class="informal"> 1066 West Redlands Parkway</span></li>
+</ul>
+
+

Another way to get additional information is to encode an ID into each list item, and redefine the afterUpdate Element to handle that ID:

+
<ul>
+    <li id="1">your mom</li>
+    <li id="2">yodel</li>
+</ul>
+
+
new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "/url/on/server", {
+  afterUpdateElement : getSelectionId
+});
+
+function getSelectionId(text, li) {
+    alert (li.id);
+}
+
+

Notes

+

When a choice is highlighted, the Autocompleter applies a class of “selected” to the li element. This allows the use of CSS to style the selected element.

+

Tutorials

+

A short tutorial on using Autocompleter, together with Ruby and WEBrick, prepared for the Linux Users Group, Villafranca, Verona, Italy.

+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-ajax-inplacecollectioneditor.html b/_posts/2009-01-01-ajax-inplacecollectioneditor.html new file mode 100644 index 0000000..e79b2d4 --- /dev/null +++ b/_posts/2009-01-01-ajax-inplacecollectioneditor.html @@ -0,0 +1,136 @@ +--- +layout: default +title: Ajax.InPlaceCollectionEditor +--- + +
+ + +

Controls > Ajax.InPlaceCollectionEditor

+

Introduction

+

This constructor generates a Flickr-style AJAX-based “on-the-fly” fields with a select box instead of Ajax.InPlaceEditor text fields.

+

Syntax

+
new Ajax.InPlaceCollectionEditor( element, url, { collection: [array], [moreOptions] } );
+

The constructor takes three parameters. The first is the element that should support in-place editing. The second is the url to submit the changed value to. The server should respond with the updated value (the server might have post-processed it or validation might have prevented it from changing). The third is a hash of options. Within that hash of options should be a field called collection that is an array of values to place inside your select box.

+

The server side component gets the new value as the parameter ‘value’ (POST method), and should send the new value as the body of the response.

+

If the collection parameter (or the result of the loadCollectionURL) is a one-dimensional array, the option tag’s value attribute will be the same as the label. For explicit value attributes, use a two dimensional array for the collection where the second dimension is a key value pair such as [['key', 'value'], ['key', 'value']].

+

Options

+

The Ajax.InplaceCollectionEditor takes all the options as Ajax.InPlaceEditor plus:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NamesincedefaultDescription
collection V?? none Array of static elements to be displayed as options (in JSON format)
loadCollectionURL V1.5 null Loads values and tag texts for the <option> tags
loadingCollectionText V?? null Text to be displayed while the collection is loading
loadingClassName V?? null Class applied to form while the collection is loading
+

Static Collection

+

The values for the collection of options are specified as an array when you invoke the Ajax.InPlaceCollectionEditor. Each element in the array will be rendered as an <option> in a <select> element for the user to choose from.

+
+
+new Ajax.InPlaceCollectionEditor( element_1, '/url_to_validate_and_save_selection/', { 
+  collection: ['value one', 'value two', 'value three'] 
+});
+
+new Ajax.InPlaceCollectionEditor( element_2, '/url_to_validate_and_save_selection/', { 
+  collection: [['key_1', 'value one'], ['key_2', 'value two'], ['key_3', 'value three']] 
+});
+
+
+

Dynamic Collection

+

The collection is loaded in the same format but is loaded as the response from a URL in the loadCollectionURL parameter. The response from that URL should be an array in JSON format.

+

In Rails, it can be done like this:
+



+

+
    +
  1. /url_to_load_collection /
    +def my_collection
    + @collection = SomeModel.all
    + respond_to do |format|
    + format.json { render :json => @collection.map{ |c| [c.id, c.title] } }
    + end
    +end
    +
    +
    2. +
+
+
+new Ajax.InPlaceCollectionEditor( element_3, '/url_to_validate_and_save_selection/', { 
+  loadCollectionURL: '/url_to_load_collection/' 
+});
+
+
+

Demo

+
+
+<p id="editme">Click me, click me!</p>
+<script type="text/javascript">
+ new Ajax.InPlaceCollectionEditor(
+   'editme', 
+   '/demoajaxreturn.html', 
+   { collection: ['one','two','three'],
+     ajaxOptions: {method: 'get'} }
+  );
+</script>
+
+
+
+

three

+

(should autoselect “three”)

+ +
+

Examples

+

You may want to send the Ajax request directly to update method in Rails to be RESTful. You can do it like this, using the callback option:

+
+
+<script>
+new Ajax.InPlaceCollectionEditor(
+  '<%= dom_id(person) %>_role_title',
+  '<%= person_path(person, :authenticity_token => form_authenticity_token) %>',
+  { loadCollectionURL: '<%= formatted_roles_people_path(:json,  
+                            :authenticity_token => form_authenticity_token) %>',
+    callback: function(form, value) {
+      return 'value=' + encodeURIComponent(value) +
+             '&person[role_id]=' + encodeURIComponent(value) +
+             '&_method=PUT' // Fix the HTTP METHOD for the update action!!!
+    },
+    ajaxOptions: { method: 'post' } 
+  }
+);
+</script>
+
+
+
\ No newline at end of file diff --git a/_posts/2009-01-01-ajax-inplaceeditor.html b/_posts/2009-01-01-ajax-inplaceeditor.html new file mode 100644 index 0000000..c204768 --- /dev/null +++ b/_posts/2009-01-01-ajax-inplaceeditor.html @@ -0,0 +1,638 @@ +--- +layout: default +title: Ajax.InPlaceEditor +--- + +
+ +

Controls > Ajax.InPlaceEditor

+ +

Introduction

+

The in-place “text edit” testing allows for Flickr-style AJAX-backed “on-the-fly” textfields.
+See the documentation on Ajax.InPlaceEditor and Ajax.InPlaceCollectionEditor

+

Syntax

+
new Ajax.InPlaceEditor( element, url, {options});
+

The constructor takes three parameters. The first is the element that should support in-place editing. The second is the url to submit the changed value to. The server should respond with the updated value (the server might have post-processed it or validation might have prevented it from changing). The third is a hash of options.
+The server side component gets the new value as the parameter ‘value’ (POST method), and should send the new value as the body of the response.

+

Options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NamesincedefaultDescription
okControl V?? “button” What type of ok button to use in edit mode, or none at all (button, link, false)
cancelControl V?? “link” What type of cancel button to use in edit mode, or none at all (button, link, false)
okText V1.5 “ok” The text of the submit button that submits the changed value to the server
cancelText V1.5 “cancel” The text of the link that cancels editing
savingText V1.5 “Saving…” The text shown while the text is sent to the server
clickToEditText V1.6 “Click to edit” The text shown during mouseover the editable text
formId V1.5 id of the element to edit plus ‘InPlaceForm’ The id given to the element
externalControl V1.5 null ID of an element that acts as an external control used to enter edit mode. The external control will be hidden when entering edit mode and shown again when leaving edit mode.
externalControlOnly V1.5 false Whether or not to disable onclick editing so that only an external control can activate editable mode
rows V1.5 1 The row height of the input field (anything greater than 1 uses a multiline textarea for input)
onComplete V1.6 “function(transport, element) {new Effect.Highlight(element, {startcolor: this.options.highlightColor});}” Code run if update successful with server. Also if user cancels the form. See bug.
onFailure V1.6 “function(transport) {alert(“Error communicating with the server: ” + transport.responseText.stripTags());}” Code run if update failed with server
cols V1.5 none The number of columns the text area should span (works for both single line or multi line)
size V1.5 none Synonym for ‘cols’ when using single-line (rows=1) input
highlightColor ? Ajax.InPlaceEditor.defaultHighlightColor The highlight color. Must be six hex digits, not 3.
highlightEndColor ? ”#FFFFFF” The color which the highlight fades to. Must be six hex digits, not 3.
savingClassName V1.5 “inplaceeditor-saving” CSS class added to the element while displaying “Saving…” (removed when server responds)
formClassName V1.5 “inplaceeditor-form” CSS class used for the in place edit form
hoverClassName ? ? ?
loadTextURL V1.5 null Will cause the text to be loaded from the server (useful if your text is actually textile and formatted on the server)
loadingText V1.5 “Loading…” If the loadText URL option is specified then this text is displayed while the text is being loaded from the server
callback V1.5 function(form) {Form.serialize(form)} A function that will get executed just before the request is sent to the server, should return the parameters to be sent in the URL. Will get two parameters, the entire form and the value of the text control.
submitOnBlur V1.6 “false” This option if true will submit the in_place_edit form when the input tag loses focus.
ajaxOptions V1.5 {} Options specified to all AJAX calls (loading and saving text), these options are passed through to the prototype AJAX classes.
+

The server side component gets the new value as the parameter ‘value’ (POST method), and should send the new value as the body of the response.

+

Character encoding

+

The form data is sent encoded in UTF-8 regardless of the page encoding. This is as of the prototype function Form.serialize. More info on here.

+

If this doesn’t work, you can use iconv as outlined here. Link Dead!

+

Removing the behavior

+

To disable the InPlaceEditor behavior later on, store it in a variable like:

+

+ var editor = new Ajax.InPlaceEditor('product_1',...);
+ (... do stuff ..)
+ editor.dispose();
+
+

This way, you can enable and disable " In Place Editing ":http://madrobby.github.com/scriptaculous/in-place-editing at will.

+

You can also arbitrarily force it into edit mode like so:

+

+editor.enterEditMode('click');
+
+

Demo1 (Single Line Edit Mode)

+

note: the demo doesn’t actually save its changes, as demoajaxreturn.html is not a valid url.

+

+<p id="editme">Click me, click me!</p>
+<script type="text/javascript">
+ new Ajax.InPlaceEditor('editme', '/demoajaxreturn.html');
+</script>
+
+
+

Click me, click me!

+ +
+

Demo2 (Multi Line Edit Mode)

+

+<p id="editme2">Click me to edit this nice long text.</p>
+<script type="text/javascript">
+ new Ajax.InPlaceEditor('editme2', '/demoajaxreturn.html', {rows:15,cols:40});
+</script>
+
+
+

Click me to edit this nice long text.

+ +
+

How to specify a different name for the parameter sent to the server

+

Add a callback function which is supposed to return the parameters that is sent to the server. Like this:

+

+new Ajax.InPlaceEditor('id', 'url', {
+callback: function(form, value) { return 'myparam=' + encodeURIComponent(value) }
+})
+
+

The encodeURIComponent() makes sure values containing special characters like “&” or “=” don’t cause problems. Use encodeURIComponent() instead of escape() from previous examples to get UTF-8 encoded data (and not “malformed URI” errors in Firefox). This function can also be used to pass additional parameters, such as what item or field to edit:

+

+new Ajax.InPlaceEditor('id', 'url', { 
+callback: function(form, value) { return 'item=123&field=description&myparam='+encodeURIComponent(value) }
+})
+
+

Note: this parameters name may change (to “parameters” or “with”) before the final release of 1.5.

+

How to execute custom code using the InPlaceEditor’s callbacks.

+

+new Ajax.InPlaceEditor(id, url, {
+callback: function(form, value) { return 'item=123&field=description&myparam='+encodeURIComponent(value) },
+onEnterEditMode: function(form, value) { // custom code goes here... },
+onLeaveEditMode: function(form, value) { // custom code goes here... }
+});
+
+

You can find all the possible callbacks by looking for lines in the source like this:

+

+this.triggerCallback('onEnterEditMode');
+
+

(Should these callback options be documented in the Options list above?)

+

How to add a spinning in progress indicator

+

Get an animated .gif that shows progress (the spinning image used on the Macintosh for example). Add a CSS class for ‘inplaceeditor-saving’ with the spinning image as background. The class will be added to the element during communication with the server and removed afterwards.

+

+<style type="text/css" media="screen">
+  .inplaceeditor-saving { background: url(/images/wait.gif) bottom right no-repeat; }
+</style>
+
+<p id="editme3">Click me, click me!</p>
+<script type="text/javascript">
+ new Ajax.InPlaceEditor('editme3', '/demoajaxreturn.html');
+</script>
+
+
+

How to customize the look and feel of the form

+

Use the id or class (‘inplaceeditor-form’) of the form in a CSS selector to apply the desired style. The text field is always named ‘value’, the ok button is an input with type ‘submit’ and the cancel link is a normal anchor (‘a’) element.

+

+form.inplaceeditor-form { /* The form */
+}
+
+form.inplaceeditor-form input[type="text"] { /* Input box */
+}
+
+form.inplaceeditor-form textarea { /* Textarea, if multiple rows */
+}
+
+form.inplaceeditor-form input[type="submit"] { /* The submit button */
+  margin-left:1em;
+}
+
+form.inplaceeditor-form a { /* The cancel link */
+  margin-left:1em;
+}
+
+

How to edit server side formatted text (formatted with eg. textile)

+

Format the text on the server when the initial page is rendered. Add a new server side action that returns the unformatted text in the reponse and specify the load Text URL? option as a URL to this action. The control will load the text from the server instead of using the text on the page. The action that receives the updated text should save it and return the formatted text as an HTML snippet in the reponse.

+

Example using Ruby on Rails
+

+

#controller
+def my_action
+ #get the text to display initially
+ @fancy_text = “Some fancy bold and emphasized text.”
+end

+

def update_text
+ #save your text here, and return the saved value
+ @fancy_text = params[:value]
+ render :layout => false, :inline => “<%= textilize( @fancy_text ) %>”
+end

+

def return_unformatted_text
+ #get your text and return it without the formatting
+ @fancy_text = “Some fancy edited, bold and emphasized text.”
+ render :layout => false, :inline => “<%= @fancy_text %>”
+end

+

#view ( of my_action.rhtml )

+

<%= textilize( @fancy_text ) %>

+

+

In-Place edits with select lists

+

In my (java) application, I have a need for in-place editing in the form of select lists. Given a server-side ajax helper that provides the necessary options for the current user, I was able to write the following:

+

+function setupCategoryEditor(el, url) {
+    var editor=new Ajax.InPlaceEditor(el, url);
+    Object.extend(editor, {
+        createEditField: function() {
+            var text=this.getText();
+
+            var field=document.createElement("select");
+            field.name="value";
+
+            this.editField=field;
+            this.form.appendChild(this.editField);
+
+            new Ajax.Request('/url/to/option/list', {
+                onSuccess: function(req) {
+                    // Get the text from an XML tag.
+                    var getData=function(el, which) {
+                        stuff=el.getElementsByTagName(which);
+                        return stuff[0].firstChild.nodeValue;
+                    };
+                    var cats=req.responseXML.getElementsByTagName("cat");
+                    $A(cats).each( function(cat, idx) {
+                        var op=document.createElement("option");
+                        op.value=getData(cat, "value");
+                        op.text=getData(cat, "key");
+                        if(window.ActiveXObject) {
+                            field.options.add(op);
+                        } else {
+                            field.appendChild(op);
+                        }
+
+                        // Select the current item
+                        if(op.text == text) {
+                            field.selectedIndex=idx;
+                        }
+                    });
+                }
+                });
+        }
+    });
+}
+
+

Obviously, one could write something smaller with JSON or innerHTML if you’re into that kind of thing.

+

There is another implementation of " In Place Editor “:http://madrobby.github.com/scriptaculous/in-place-editor for select lists called Ajax. ”color:#aaa"> In Place Select? available here.

+

You can change getText like so:

+
getText: function() {
+  return this.element.childNodes[0] ? this.element.childNodes[0].nodeValue : '';
+},
+

to avoid e.g. “Me & Myself” being represented in the input box as “Me & amp; Myself” (use nodeValue because innerText does not work with Safari when the element is hidden).

+

- – -
+I just added inplace editor inside a sortable list array. I can drag and after, the editor appears, but ideally I would not want that to happen and instead activate the editor specifically, not as a result of dragging my list items. What is suggested here?
+I tried using a drag handle, which seemed like an obvious solution, except the editor then shows the span class code as well, which is a caveat I suppose.
+Unless I can use a drag handle without the method in example, then that won’t be a good solution.

+

How else can I drag or how else can I activate the editor besides writing redundant for each instance?
+-ms

+

I found a workaround to use draggable and Ajax.InPlaceEditor at same time. I faced also this problem mentioned above (the ‘mousup’ action at the end of the draggable activates the editor). The solution that I found is to modify control.js to activate InPlaceEditor only on dbclick instead of click. The drawback is that you should deal with navigator compatibilty… So It consists in replacing:
+


+ Listeners: {
+    click: 'enterEditMode',
+    keydown: 'checkForEscapeOrReturn',
+    mouseover: 'enterHover',
+    mouseout: 'leaveHover'
+  }
+

+
by
+

+ Listeners: {
+    dblclick: 'enterEditMode',
+    keydown: 'checkForEscapeOrReturn',
+    mouseover: 'enterHover',
+    mouseout: 'leaveHover'
+  }
+

+

+

-Tonio
+- – -

+

I just spent a good deal of time figuring that out myself so I’ll share my result:

+

+<style>
+div.handle {
+    display: none;
+    float: left;
+    width: 25px;
+    height: 11px;
+    margin-top: 2px;
+    padding-right: 3px;
+    background: url('/images/drag.gif');
+    background-repeat: no-repeat;
+    clear: both;
+}
+</style>
+<ul id="field">
+    <li id="field_1">
+
+        <div class="handle"></div><div class="delete"></div>
+        <span class="data" id="field_name_1">Brand</span></li>
+    <li id="field_3">
+        <div class="handle"></div><div class="delete"></div>
+
+        <span class="data" id="field_name_3">SKU Number</span></li>
+    <li id="field_5">
+        <div class="handle"></div><div class="delete"></div>
+        <span class="data" id="field_name_5">Color</span></li>
+
+</ul>
+<a id="field_sort" href="javascript:;" onclick="makeSortable('field');">Reorder</a>
+<a id="field_donesort" href="javascript:;" onclick="doneSorting('field');" style="display:none;">Done Reordering</a>
+<script>
+function makeSortable(myid,mytag){
+    Sortable.create(myid,{ tag: mytag || 'li', handle:'handle'});
+    setDisplayByClass('handle','inline',$(myid));
+    $(myid+'_sort').style.display = 'none';
+    $(myid+'_donesort').style.display = '';
+    $(myid).setAttribute('reordering','yes');
+    return false;
+}
+function doneSorting(myid){
+    new Ajax.Updater('reply',page,{parameters:'a=reorder&table='+myid+'&'+Sortable.serialize(myid)});
+    Sortable.destroy(myid);
+    setDisplayByClass('handle','none',$(myid));
+    $(myid+'_sort').style.display = '';
+    $(myid+'_donesort').style.display = 'none';
+    $(myid).setAttribute('reordering','no');
+    return false;
+}
+var list = getElementsByClass('data',$('fields'));
+var ipeOptionsStd = {
+        callback:    function(form,value){
+                        var id=form.id;
+                        id = id.substring(0,id.indexOf('-inplaceeditor'));
+                        var t = id.substring(0,id.indexOf('_'));
+                        var c = id.substring(0,id.lastIndexOf('_'));
+                        var i = id.substring(id.lastIndexOf('_')+1,id.length);
+                        return 'a=update&table='+t+'&column='+c+'&id='+i+'&value='+encodeURIComponent(value);
+                    }
+        };
+for(var i=0;i<list.length;i++){
+    new Ajax.InPlaceEditor(list[i], page, ipeOptionsStd );
+}
+
+</script>
+
+

Hope that helps, that is a much simplified version. I’ve also done this with tables where each cell is an " In Place Editor ":http://madrobby.github.com/scriptaculous/in-place-editor and the rows are Sortable.

+

- Colin

+

Using HTML within the In Place Editor

+

If you are using Markdown or Textile, you can include HTML within your text. And if you follow the instructions above, you will be able to load this text in from your database with loadTextURL. But the stripTags function is invoked by the In Place Editor, and that strips out all the code before it can be displayed in the editor field.

+

To get around this, add the following two extensions anywhere after the rest of the library has loaded. I use the extensions.js method noted elsewhere on this site.

+

+Object.extend(Ajax.InPlaceEditor.prototype, {
+    onLoadedExternalText: function(transport) {
+        Element.removeClassName(this.form, this.options.loadingClassName);
+        this.editField.disabled = false;
+        this.editField.value = transport.responseText;
+        Field.scrollFreeActivate(this.editField);
+    }
+});
+
+Object.extend(Ajax.InPlaceEditor.prototype, {
+    getText: function() {
+        return this.element.childNodes[0] ? this.element.childNodes[0].nodeValue : '';
+    }
+});
+
+

If you do this, make sure that your loadTextURL does not return entity-encoded text (using htmlentities() for example) or you will end up with double-encoded text.

+

In-Place edits only by externalControl

+

i searched for a way to allow editing of certain fields only by clicking the external control field. currently its implemented to allow a user to click either on the element itself or on the external control element.

+

to only allow editing by clicking on the external control, simply change a few lines:

+

+Event.observe(this.element, 'click', this.onclickListener);
+Event.observe(this.element, 'mouseover', this.mouseoverListener);
+Event.observe(this.element, 'mouseout', this.mouseoutListener);
+
+if (this.options.externalControl) {
+  Event.observe(this.options.externalControl, 'click', this.onclickListener);
+  Event.observe(this.options.externalControl, 'mouseover', this.mouseoverListener);
+  Event.observe(this.options.externalControl, 'mouseout', this.mouseoutListener);
+}
+
+change to:
+
+if (this.options.externalControl) {
+  Event.observe(this.options.externalControl, 'click', this.onclickListener);
+  Event.observe(this.options.externalControl, 'mouseover', this.mouseoverListener);
+  Event.observe(this.options.externalControl, 'mouseout', this.mouseoutListener);
+} else {
+  Event.observe(this.element, 'click', this.onclickListener);
+  Event.observe(this.element, 'mouseover', this.mouseoverListener);
+  Event.observe(this.element, 'mouseout', this.mouseoutListener);
+}
+
+

maybe someone can add a flag like ‘only External Control ? to add this to the trunk ..

+

Small extension to editor to add a text in case field is empty.

+

+/*
+ * InPlaceEditor extension that adds a 'click to edit' text when the field is 
+ * empty.
+ */
+Ajax.InPlaceEditor.prototype.__initialize = Ajax.InPlaceEditor.prototype.initialize;
+Ajax.InPlaceEditor.prototype.__getText = Ajax.InPlaceEditor.prototype.getText;
+Ajax.InPlaceEditor.prototype.__onComplete = Ajax.InPlaceEditor.prototype.onComplete;
+Ajax.InPlaceEditor.prototype = Object.extend(Ajax.InPlaceEditor.prototype, {
+
+    initialize: function(element, url, options){
+        this.__initialize(element,url,options)
+        this.setOptions(options);
+        this._checkEmpty();
+    },
+
+    setOptions: function(options){
+        this.options = Object.extend(Object.extend(this.options,{
+            emptyText: 'click to edit...',
+            emptyClassName: 'inplaceeditor-empty'
+        }),options||{});
+    },
+
+    _checkEmpty: function(){
+        if( this.element.innerHTML.length == 0 ){
+            this.element.appendChild(
+                Builder.node('span',{className:this.options.emptyClassName},this.options.emptyText));
+        }
+    },
+
+    getText: function(){
+        document.getElementsByClassName(this.options.emptyClassName,this.element).each(function(child){
+            this.element.removeChild(child);
+        }.bind(this));
+        return this.__getText();
+    },
+
+    onComplete: function(transport){
+        this._checkEmpty();
+        this.__onComplete(transport);
+    }
+});
+
+
+

To use, copy this into a extensions.js and load it in your app after the other scriptaculous stuff.

+

Here is the style I use with this:

+

+
+/* ----  InPlaceEditor style --------------------------------------------- */
+
+.inplaceeditor-empty {
+    font-style: italic;
+    color: #999;
+}
+
+

- Pedro

+

This doesn’t seem to work for me in Prototype 1.6, so I wrote an updated version. (Blog Post).

+

+
+Ajax.InPlaceEditorWithEmptyText = Class.create(Ajax.InPlaceEditor, {
+
+  initialize : function($super, element, url, options) {
+
+    if (!options.emptyText)        options.emptyText      = “click to edit…“;
+    if (!options.emptyClassName)   options.emptyClassName = “inplaceeditor-empty“;
+
+    $super(element, url, options);
+
+    this.checkEmpty();
+  },
+
+  checkEmpty : function() {
+
+    if (this.element.innerHTML.length == 0 && this.options.emptyText) {
+
+      this.element.appendChild(
+          new Element(“span“, { className : this.options.emptyClassName }).update(this.options.emptyText)
+        );
+    }
+
+  },
+
+  getText : function($super) {
+
+    if (empty_span = this.element.select(“.“ + this.options.emptyClassName).first()) {
+      empty_span.remove();
+    }
+
+    return $super();
+
+  },
+
+  onComplete : function($super, transport) {
+
+    this.checkEmpty();
+    return $super(transport);
+
+  }
+
+});
+
+
+

- Nik

+

Create your own Callback

+

I wanted to have a custom callback that would fire after the InPlaceEditor form was added to the DOM. onEnterEditMode fires as soon as you click, but the form doesn’t exist yet.

+

This works by copying an existing method enterEditMode(), which builds the form and writes it to the page, into a new method name so that I can edit the real one. In mine, the original is called via __enterEditMode() and then my custom code is run:

+

+Ajax.InPlaceEditor.prototype.__enterEditMode = Ajax.InPlaceEditor.prototype.enterEditMode;
+Object.extend(Ajax.InPlaceEditor.prototype, {
+  enterEditMode:function(e) {
+    this.__enterEditMode(e);
+    this.triggerCallback('onFormReady',this._form);
+  }
+});
+
+

Now when I create my InPlaceEditor I just add a the onFormReady callback as an option:

+

+new Ajax.InPlaceEditor('location', '/change_location',
+  { 
+    onFormReady: function(obj,form) {
+      form.getInputs().first().value = '';
+    }
+  });
+
+

In my case I wanted to clear out the value in the text box so that the user had to type something from scratch. If they cancel it will switch back to the original text.

+

- Rob

+
+

Validation.

+

Information for implementing validation with ajax." In Place Editor ":http://madrobby.github.com/scriptaculous/in-place-editor can be found here. Link Dead!

+

suggest

+

If “cancel control” type was ‘button’ then… javascript error occurs.

+

+  new Ajax.InPlaceEditor(node, 'items.aspx', {
+	cancelControl: 'button'
+  });
+
+

So, I suggest the method modification of ‘handleFormCancellation’.

+

+  handleFormCancellation: function(e) {
+    this.wrapUp();
+    if (e) Event.stop(e);
+    return false;
+  },
+
+
\ No newline at end of file diff --git a/_posts/2009-01-01-autocompleter-base.html b/_posts/2009-01-01-autocompleter-base.html new file mode 100644 index 0000000..3a35d59 --- /dev/null +++ b/_posts/2009-01-01-autocompleter-base.html @@ -0,0 +1,17 @@ +--- +layout: default +title: Autocompleter.Base +--- + +
+

Autocompleter.Base handles all the autocompletion functionality that’s independent of the data source for autocompletion. This includes drawing the autocompletion menu, observing keyboard and mouse events, and similar.

+

Availability

+

script.aculo.us V1.1b1

+

Extending

+

Specific autocompleters need to provide, at the very least, a getUpdatedChoices function that will be invoked every time the text inside the monitored textbox changes. This method should get the text for which to provide autocompletion by invoking this.getToken(), NOT by directly accessing this.element.value. This is to allow incremental tokenized autocompletion. Specific auto-completion logic (AJAX, etc) belongs in getUpdatedChoices.

+

Tokenized autocompletion

+

Tokenized incremental autocompletion is enabled automatically when an autocompleter is instantiated with the ‘tokens’ option in the options parameter:

+

new Ajax.Autocompleter('id','upd', '/url/', { tokens: ',' });

+

will incrementally autocomplete with a comma as the token.

+

Additionally, ’,’ in the above example can be replaced with a token array, e.g. tokens: [',', '\n'] } which enables autocompletion on multiple tokens. This is most useful when one of the tokens is \n (a newline), as it allows smart autocompletion after linebreaks.

+
\ No newline at end of file diff --git a/_posts/2009-01-01-autocompleter-local.html b/_posts/2009-01-01-autocompleter-local.html new file mode 100644 index 0000000..ff4894f --- /dev/null +++ b/_posts/2009-01-01-autocompleter-local.html @@ -0,0 +1,155 @@ +--- +layout: default +title: Autocompleter.Local +--- + +
+ +

Controls > Autocompleter.Local

+

Introduction

+

The local array autocompleter. Used when you’d prefer to inject an array of autocompletion options into the page, rather than sending out Ajax queries.

+

Syntax

+
new Autocompleter.Local(id_of_text_field, id_of_div_to_populate, array_of_strings, options);
+
+

The constructor takes four parameters. The first two are, as usual, the id of the monitored textbox, and id of the autocompletion menu. The third is an array of strings that you want to autocomplete from, and the fourth is the options block.

+

Extra local autocompletion options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OptionDefault ValueDescription
choices10How many autocompletion choices to offer
partialSearchtrueIf false, the autocompleter will match entered text only at the beginning of strings in the autocomplete array. Defaults to true, which will match text at the beginning of any word in the strings in the autocomplete array. If you want to search anywhere in the string, additionally set the option fullSearch to true
fullSearchfalseSearch anywhere in autocomplete array strings.
partialChars2How many characters to enter before triggering a partial match (unlike minChars, which defines how many characters are required to do any match at all).
ignoreCasetrueWhether to ignore case when autocompleting
+

It’s possible to pass in a custom function as the ‘selector’ option, if you prefer to write your own autocompletion logic. In that case, the other options above will not apply unless you support them.

+

Example

+

HTML

+

+<p>
+  <label for="bands_from_the_70s">Your favorite rock  band from the 70's:</label>
+  <br />
+  <input id="bands_from_the_70s" autocomplete="off" size="40" type="text" value="" />
+</p>
+
+<div class="autocomplete" id="band_list" style="display:none"></div>
+
+

Javascript

+

+var bandsList = [
+  'ABBA',
+  'AC/DC',
+  'Aerosmith',
+  'America',
+  'Bay City Rollers',
+  'Black Sabbath',
+  'Boston',
+  'David Bowie',
+  'Can',
+  'The Carpenters',
+  'Chicago',
+  'The Commodores',
+  'Crass',
+  'Deep Purple',
+  'The Doobie Brothers',
+  'Eagles',
+  'Fleetwood Mac',
+  'Haciendo Punto en Otro Son',
+  'Heart',
+  'Iggy Pop and the Stooges',
+  'Journey',
+  'Judas Priest',
+  'KC and the Sunshine Band',
+  'Kiss',
+  'Kraftwerk',
+  'Led Zeppelin',
+  'Lindisfarne (band)',
+  'Lipps, Inc',
+  'Lynyrd Skynyrd',
+  'Pink Floyd',
+  'Queen',
+  'Ramones',
+  'REO Speedwagon',
+  'Rhythm Heritage',
+  'Rush',
+  'Sex Pistols',
+  'Slade',
+  'Steely Dan',
+  'Stillwater',
+  'Styx',
+  'Supertramp',
+  'Sweet',
+  'Three Dog Night',
+  'The Village People',
+  'Wings (fronted by former Beatle Paul McCartney)',
+  'Yes'
+];
+
+new Autocompleter.Local('bands_from_the_70s', 'band_list', bandsList, { });
+
+

CSS

+

Styling the div and the returned ul is very important:
+Applying a visual cue that an item is selected allows the user to take advantage of the keyboard navigation of the dropdown and adding background colors, borders, positioning, etc to the div (as the demo does) allows the user interface elements to stand out. The CSS from the demo applied to the examples would be:

+

+div.autocomplete {
+  margin:0px;  
+  padding:0px;  
+  width:250px;
+  background:#fff;
+  border:1px solid #888;
+  position:absolute;
+}
+
+div.autocomplete ul {
+  margin:0px;
+  padding:0px;
+  list-style-type:none;
+}
+
+div.autocomplete ul li.selected { 
+  background-color:#ffb;
+}
+
+div.autocomplete ul li {
+  margin:0;
+  padding:2px;
+  height:32px;
+  display:block;
+  list-style-type:none;
+  cursor:pointer;
+}
+
+

Notes

+

You can also have your options provided via Ajax callbacks. For more information regarding this implementation, see Ajax.Autocompleter.

+

Advance extended version that mimics Facebook to: field.

+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-behaviours.html b/_posts/2009-01-01-behaviours.html new file mode 100644 index 0000000..3b2726c --- /dev/null +++ b/_posts/2009-01-01-behaviours.html @@ -0,0 +1,13 @@ +--- +layout: default +title: Behaviours +--- + +
+

The classes below let you add special behaviors to elements in the document

+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-born----kazdoor.html b/_posts/2009-01-01-born----kazdoor.html new file mode 100644 index 0000000..2063246 --- /dev/null +++ b/_posts/2009-01-01-born----kazdoor.html @@ -0,0 +1,7 @@ +--- +layout: default +title: Born > kazdoor +--- + +
+
\ No newline at end of file diff --git a/_posts/2009-01-01-builder.html b/_posts/2009-01-01-builder.html new file mode 100644 index 0000000..acd91bf --- /dev/null +++ b/_posts/2009-01-01-builder.html @@ -0,0 +1,114 @@ +--- +layout: default +title: Builder +--- + +
+ +

Introduction

+

Use Builder to easily create DOM elements dynamically.

+

Syntax

+

+Builder.node( elementName )
+Builder.node( elementName, attributes )
+Builder.node( elementName, children )
+Builder.node( elementName, attributes, children )
+
+ + + + + + + + + + + + + + + + + +
Arguments Description
elementName String, The tag name for the element
attributes Object, Typical attributes are id, className, style, onclick, etc.
children Array, List of other nodes to be appended as children
+

If an element of the children Array is a String or Number, it will be automatically appended as a text node. Instead of an array, children can also be a JavaScript String or Number, to ease usage.

+

Special cases

+ +

Examples

+

Creating TR and TD elements

+

+var table = Builder.node('table', {
+  width: '100%',
+  cellpadding: '2',
+  cellspacing: '0',
+  border: '0'
+});
+
+var tbody = Builder.node('tbody'),
+    tr = Builder.node('tr', { className: 'header' }),
+    td = Builder.node('td', [Builder.node('strong', 'Category')]);
+
+tr.appendChild(td);
+tbody.appendChild(tr);
+table.appendChild(tbody);
+<div class="dnn_dnnContent" style="margin-left: -459px; font-size: .7em;">Проститутки Москвы привлекают вас? <a href="http://prostitutki-moskvy.msk.ru/archive/" title="проститутки Москвы">Проститутки Москвы</a> очевидно лучшие индивидуалки.</div>
+$('divCat').appendChild(table);
+
+

You can also combine them but you need to make sure you create the tbody tag or it will not work in IE. I have tested this in FF 1.5 and IE 6. I don’t have access to other browsers. The one problem that I have found is that with TR and TD elements you can not put a style tag on them as it just makes IE stop doing the Builder Function.

+

Simple Example

+

+var element = Builder.node('p', { className:'error' }, 'An error has occurred');
+
+

creates following element:

+

+<p class="error">An error has occured</p>
+
+

Complex Example

+

+var element = Builder.node('div', { id: 'ghosttrain' }, [
+  Builder.node('div',{ className: 'controls', style: 'font-size:11px;' }, [
+    Builder.node('h1', 'Ghost Train'),
+    'testtext', 2, 3, 4,
+    Builder.node('ul', [
+      Builder.node('li', { className: 'active', onclick: 'test()' }, 'Record')
+    ]),
+  ]),
+]);
+
+

creates (without newlines):

+

+<div id="ghosttrain">
+  <div class="controls" style="font-size:11px">
+    <h1>Ghost Train</h1>
+    testtext234
+    <ul>
+      <li class="active" onclick="test()">Record</li>
+    </ul>
+  </div>
+</div>
+
+

Usage

+

In JavaScript code, if you want to use your new element, you can add it to an existing DOM element by using the browsers native appendChild function:

+

+$('myExistingDomElement').appendChild(element);
+
+

… or by using Protoypes built-in Element#insert method which allows you to specify a position the new node gets inserted into:

+

+$('myExistingDomElement').insert(element); // appends the new node to @myExistingDomElement@-element
+$('myExistingDomElement').insert({ after: element }); // inserts the new node right after the @myExistingDomElement@-element
+$('myExistingDomElement').insert({ top: element }); // inserts the new node as the first element in @myExistingDomElement@
+
+

If you want to be able to call any of Prototype’s extension-methods on the created node, then you need to pass it through the $ function:

+

+var div = Builder.node('div', { id: 'some_id' });
+div = $(div);
+div.hide();
+

+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-camus.html b/_posts/2009-01-01-camus.html new file mode 100644 index 0000000..d60bcf4 --- /dev/null +++ b/_posts/2009-01-01-camus.html @@ -0,0 +1,23 @@ +--- +layout: default +title: Camus +--- + +
+
+ +
+ +
+ +

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
+ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
+

\ No newline at end of file diff --git a/_posts/2009-01-01-combination-effects-demo.html b/_posts/2009-01-01-combination-effects-demo.html new file mode 100644 index 0000000..be1a1ee --- /dev/null +++ b/_posts/2009-01-01-combination-effects-demo.html @@ -0,0 +1,137 @@ +--- +layout: default +title: Combination Effects Demo +--- + +
+ +

.c {
+ width: 120px;
+ height: 120px;
+ float: left;
+ border-bottom: 1px solid #bbb;
+ padding: 4px 2px 2px 2px;
+}
+.example{
+ background: #fef4d8;
+ height: 120px;
+}

+ +

These are the combination effects which are included in script.aculo.us:

+ +

Note: This page is basically a duplicate of Combination Effects but was created to fix an invalid link on the script.aculo.us home page.

+

Demo

+
+
+
+ +Click for Effect.Appear demo +
+
+
+
+ +Click for Effect.Fade demo +
+
+
+
+ +Click for Effect.Puff demo +
+
+
+
+
+ +Click for Effect.BlindDown demo +
+
+
+
+
+ +Click for Effect.BlindUp demo +
+
+
+
+ +Click for Effect.SwitchOff demo +
+
+
+

+
+Click for Effect.SlideDown demo
+
+
+
+ +Click for Effect.SlideUp demo +
+
+
+
+ +Click for Effect.DropOut demo +
+
+
+
+ +Click for Effect.Shake demo +
+
+
+
+ +Click for Effect.Pulsate demo +
+
+
+
+ +Click for Effect.Squish demo +
+
+
+
+ +Click for Effect.Fold demo +
+
+
+
+ +Click for Effect.Grow demo +
+
+
+
+ +Click for Effect.Shrink demo +
+
+
+
+ +Click for Effect.Highlight demo +
+
+
+
\ No newline at end of file diff --git a/_posts/2009-01-01-combination-effects.html b/_posts/2009-01-01-combination-effects.html new file mode 100644 index 0000000..d3cfe62 --- /dev/null +++ b/_posts/2009-01-01-combination-effects.html @@ -0,0 +1,26 @@ +--- +layout: default +title: Combination Effects +--- + +
+

All the combination effects are based on the Core Effects, and are thought of as examples to allow you to write your own effects.
+These are the combination effects which are included in script.aculo.us:

+ +

Additionally, there’s the Effect.toggle utility method for elements you want to show temporarily with a Appear/Fade, Slide or Blind animation.

+

Demos

+

You can see a demo of a specific combination effect on the effects site itself or get an overview of all effects by playing with the Combination Effects Demo.

+
\ No newline at end of file diff --git a/_posts/2009-01-01-contribute.html b/_posts/2009-01-01-contribute.html new file mode 100644 index 0000000..e5c85c7 --- /dev/null +++ b/_posts/2009-01-01-contribute.html @@ -0,0 +1,22 @@ +--- +layout: default +title: Contribute +--- + +
+

Want to help make script.aculo.us better? You can!

+

Found a bug?

+

script.aculo.us uses Lighthouse for bug tracking:
+http://prototype.lighthouseapp.com/projects/8887-script-aculo-us

+

(First, be sure that there isn’t a ticket already, then file a new bug!)

+

If you found a bug

+

When creating a bug report, be sure to include as much relevant information as possible. Post an example that shows off the problem. Preferably, alter the unit tests and show through either changed or added tests how the expected behavior is not occuring.

+

Source code repository

+

script.aculo.us uses Git to manage development. Check out the current development trunk with:

+

+git clone git://github.com/madrobby/scriptaculous.git
+
+

As script.aculo.us 1.xx is feature-frozen, this development trunk is for bugfixes only (new features will only happen for script.aculo.us 2).

+

JavaScript is not your thing?

+

You may also contribute by writing documentation, making tutorials and general pimping of scriptaculous! :)

+
\ No newline at end of file diff --git a/_posts/2009-01-01-controls.html b/_posts/2009-01-01-controls.html new file mode 100644 index 0000000..fbcd596 --- /dev/null +++ b/_posts/2009-01-01-controls.html @@ -0,0 +1,24 @@ +--- +layout: default +title: Controls +--- + +
+ +

The in-place “text edit” testing allows for Flickr-style AJAX-backed “on-the-fly” textfields. See the documentation

+ +

The Autocompleter controls allow for Google-Suggest style local and server-powered autocompleting text input fields

+ + + +
\ No newline at end of file diff --git a/_posts/2009-01-01-core-effects.html b/_posts/2009-01-01-core-effects.html new file mode 100644 index 0000000..9477869 --- /dev/null +++ b/_posts/2009-01-01-core-effects.html @@ -0,0 +1,174 @@ +--- +layout: default +title: Core Effects +--- + +
+ +

The seven core effects Effect.Opacity, Effect.Scale, Effect.Morph, Effect.Move, Effect.Highlight, Effect.Parallel, Effect.Tween are the foundation of the script.aculo.us Visual Effects JavaScript library.

+

Availability

+

script.aculo.us V1.0 and later.

+

Syntax

+

The basic syntax to start an effect is:
+


+new Effect.EffectName(element, required-params, [options]);
+

+element can be either a string containing the id of the element, or a Java Script DOM element object.

+

required-params depend on the effect being called and may not be needed. Most effects do not have required parameters. See the documentation for the core effects to learn if the effect has required parameters or if this parameter should be omitted.

+

The options parameter is used to give any additional customization parameters to the effect. There are general and effect-specific options. It’s called like this:
+


+new Effect.Opacity('my_element', { 
+  duration: 2.0,
+  transition: Effect.Transitions.linear,
+  from: 1.0, 
+  to: 0.5
+});
+

+

Common Parameters

+

All core effects support following settings in their options parameter:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Option Description
duration duration of the effect in seconds, given as a float. Defaults to 1.0.
fps Target this many frames per second. Default to 25. Can’t be higher than 100.
transition Sets a function that modifies the current point of the animation, which is between 0 and 1. Following transitions are supplied: Effect.Transitions.sinoidal (default), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble, Effect.Transitions.flicker, Effect.Transitions.pulse, Effect.Transitions.spring, Effect.Transitions.none and Effect.Transitions.full.
from Sets the starting point of the transition, a float between 0.0 and 1.0. Defaults to 0.0.
to Sets the end point of the transition, a float between 0.0 and 1.0. Defaults to 1.0.
sync Sets whether the effect should render new frames automatically (which it does by default). If true, you can render frames manually by calling the render() instance method of an effect. This is used by Effect.Parallel().
queue Sets queuing options. When used with a string, can be ‘front’ or ‘end’ to queue the effect in the global effects queue at the beginning or end, or a queue parameter object that can have { position: ’front/end’, scope: ’scope’, limit: 1 }. For more info on this, see Effect Queues.
delay Sets the number of seconds to wait before the effect actually starts. Defaults to 0.0.
+

Additionally, the options parameter also can be supplied with callback methods, so you can have JavaScript executed at various events while the effect is running. The callbacks are supplied with a reference to the effect object as a parameter.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Callback Description
beforeStart Called before the effects rendering loop is started, or as soon as it is added to a queue.
beforeSetup Called before the effect is setup.
afterSetup Called after the effect is setup and immediately before the main effects rendering loop is started.
beforeUpdate Called on each iteration of the effects rendering loop, before the redraw takes place.
afterUpdate Called on each iteration of the effects rendering loop, after the redraw takes place.
afterFinish Called after the last redraw of the effect was made.
+

Effect instances have the following useful properties and methods:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Variable Description
effect.element The element the effect is applied to.
effect.options Holds the options you gave to the effect.
effect.currentFrame The number of the last frame rendered.
effect.startOn, effect.finishOn The times (in ms) when the effect was started, and when it will be finished.
effect.effects[] On an Effect.Parallel effect, there’s an effects[] array containing the individual effects the parallel effect is composed of.
effect.cancel() Stop the effect as is.
effect.inspect() Get basic debugging information about the instance.
+

+var myEffect = new Effect.Opacity('my_element', { 
+  duration: 2.0,
+  transition: Effect.Transitions.linear,
+  from: 1.0, 
+  to: 0.5
+});
+//...
+// example instance properties
+myEffect.element; // $('my_element')
+myEffect.currentFrame; // 12
+myEffect.cancel(); // stop animation
+
+

Transitions Demo

+ +

Reset demo

+
+Effect.Transitions.sinoidal +Effect.Transitions.linear +Effect.Transitions.reverse +Effect.Transitions.wobble +Effect.Transitions.flicker +Effect.Transitions.pulse +Effect.Transitions.spring +Effect.Transitions.none +Effect.Transitions.full +
+

+new Effect.Move(this, {
+   x: 200, 
+   transition: Effect.Transitions.spring 
+});
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-demos.html b/_posts/2009-01-01-demos.html new file mode 100644 index 0000000..a20a6de --- /dev/null +++ b/_posts/2009-01-01-demos.html @@ -0,0 +1,23 @@ +--- +layout: default +title: Demos +--- + +
+

See what’s possible with script.aculo.us! All demos come with the complete source code and explanations.

+

Interactive Demos

+ +

Backend Integration

+

(Demos currently offline)

+

These Ruby on Rails based demonstrations show how easy it is to integrate script.aculo.us controls with server-side logic. Of course, all this stuff also works with any other server-side technology (links open an external site).

+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-draggable.html b/_posts/2009-01-01-draggable.html new file mode 100644 index 0000000..8e60eeb --- /dev/null +++ b/_posts/2009-01-01-draggable.html @@ -0,0 +1,177 @@ +--- +layout: default +title: Draggable +--- + +
+ +

Behaviours > Draggable

+

To make an element draggable, create a new instance of class Draggable.
+For additional built-in functionality, make a Sortable instead.

+

There is also a class named Draggables that exposes functions for observing drag actions.

+

Draggables become much more useful when you use them with droppables, which are the areas that you can drag draggables to.

+

Syntax

+

+new Draggable('id_of_element', [options]);
+
+

Options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Option Since Description
handle 1.0 string or DOM reference, not set by default. Sets whether the element should only be draggable by an embedded handle. The value must be an element reference or element id.
handle 1.5. string or DOM reference, not set by default. As above, except now the value may be a string referencing a CSS class value. The first child/grandchild/etc. element found within the element that has this CSS class value will be used as the handle.
revert 1.0 boolean, defaults to false. If set to true, the element returns to its original position when the drags ends.
revert 1.5 boolean or function reference, defaults to false. Revert can also be an arbitrary function reference, called when the drag ends. Specifying 'failure' will instruct the draggable not to revert if successfully dropped in a droppable.
snap 1.5 If set to false no snapping occurs. Otherwise takes one of the following forms – Δi: one delta value for both horizontal and vertical snap, [Δx, Δy]: delta values for horizontal and vertical snap, function(x, y, draggable_object) { return [x, y]; }: a function that receives the proposed new top left coordinate pair and returns the coordinate pair to actually be used.
zindex 1.5 integer value, defaults to 1000. The css z-index of the draggable item.
constraint 1.0 string, not set by default. If set to 'horizontal' or 'vertical' the drag will be constrained to take place only horizontally or vertically.
ghosting ?? boolean, defaults to false. Clones the element and drags the clone, leaving the original in place until the clone is dropped.
starteffect ?? Effect, defaults to Effect.Opacity. Defines the effect to use when the draggable starts being dragged.
reverteffect ?? Effect, default to Effect.Move. Defines the effect to use when the draggable reverts back to its starting position.
endeffect ?? Effect, defaults to Effect.Opacity. Defines the effect to use when the draggable stops being dragged.
scroll ?? string or DOM reference, not set by default. Specifies the element which will scroll when you get to the boundary. By default this is turned off.
scrollSensitivity ?? integer value, defaults to 20 pixels. Minimum distance from the element boundary to start scrolling.
+

Additionally, the options parameter accepts any of the following callback functions:

+ + + + + + + + + + + + + + + + + + + + + +
Callback Description
onStart Called when a drag is initiated.
onDrag Called repeatedly as the mouse moves, before the draggable position is updated if mouse position changed from previous call.
change Called just as onDrag, but after the draggable position is updated. Gets the Draggable instance as its parameter.
onEnd Called when a drag is ended.
+

Except for the change callback, each of these callbacks accepts two parameters: the Draggable object, and the mouse event object.

+

Examples

+

+// revert
+new Draggable('product_1', { revert: true });
+
+// constrain direction and give a handle
+new Draggable('my_div', { constraint: 'horizontal', handle: 'handle' });
+
+
Ебите проституток как хотите. Проститутки Киева в Вашем полном распоряжении.
+

To disable draggables later on, store it in a variable like:
+


+var mydrag = new Draggable('product_1', { revert: true });
+// then destroy it when you don't need it anymore
+mydrag.destroy();
+

+

This way, you can enable and disable dragging at will.

+

Demo

+

A demo with the default options

+
+
+ +
+

A demo with { revert: true, snap: [40, 40] } set as options

+
+
+ +
+

A demo with { scroll: window } set as options

+
+
+ +
+

Source code of the demo

+

Demo 1 (default options)
+


+<div id="drag_demo_1" style="width:100px; height:100px; background:#7baaed; border:1px solid #333;"></div>
+  <script type="text/javascript">
+    new Draggable('drag_demo_1');
+  </script>
+

+

Demo 2 (with revert and snap set)
+


+<div id="drag_demo_2" style="width:100px; height:100px; background:#fff85d; border:1px solid #333;"></div>
+  <script type="text/javascript">
+    new Draggable('drag_demo_2', { revert: true, snap: [40, 40] });
+  </script>
+

+

Demo 3 (with scroll set)
+


+<div id="drag_demo_3" style="width:80px; height:80px; cursor:move; background:#88da5d; border:1px solid #333;"></div>
+  <script type="text/javascript">
+    new Draggable('drag_demo_3', { scroll: window });
+  </script>
+

+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-draggables-object.html b/_posts/2009-01-01-draggables-object.html new file mode 100644 index 0000000..b0abdc9 --- /dev/null +++ b/_posts/2009-01-01-draggables-object.html @@ -0,0 +1,86 @@ +--- +layout: default +title: Draggables Object +--- + +
+

Are you looking for how to make an element draggable?

+

Draggables Object

+

The Draggables object is a global helper object. In most cases you will not need to use or modify the Draggables object, except when adding/removing custom drag observers.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Property/Method Description
drags Array of all Draggables on the page
observers Array of drag observers. Use Draggables.addObserver() and Draggables.removeObserver() to add/remove observers, respectively.
register() function(draggable). Called when you create a new Draggable?. If this is the first Draggable on the page, starts observing mouse events necessary for dragging.
unregister() function(draggable). Called by Draggable.destroy()?. Stops observing window mouse events if Draggable.drag is empty.
activate() Marks a particular Draggable as the activeDraggable
deactivate() Sets Draggables.activeDraggable to @null
updateDrag() Passes the window mousemove event to the @activeDraggable@’s updateDrag function.
endDrag() Caught by the window’s mouseup, stops dragging the activeDraggable, if any, via its endDrag function.
keyPress() Passes the window keypress event to the @activeDraggable@’s keyPress function.
addObserver() Adds an observer to Draggables.observers
removeObserver() Removes an observer from Draggables.observers. Takes the observer’s element property as a parameter
notify() Calls the observers’ onStart(), onEnd(), and onDrag() functions as necessary
+

Draggable Observers

+

A draggable observer, as used in Draggables.addObserver(), is an object with an element property defined, and one or more of the following functions defined:

+ + + + + + + + + + + + + +
onStart() called after drag begins
onDrag() called on each mousemove during a drag
onEnd() called when drag is finished
+

The parameters passed to these three events are

+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-droppables.html b/_posts/2009-01-01-droppables.html new file mode 100644 index 0000000..89ee963 --- /dev/null +++ b/_posts/2009-01-01-droppables.html @@ -0,0 +1,180 @@ +--- +layout: default +title: Droppables +--- + +
+ +
Любите красивых девочек? Проститутки Питера это то что Вам нужно.
+

Behaviours > Droppables

+

To make an element react when a Draggable is dropped onto it, you’ll add it to the Droppables of the page with the Droppables.add class method.

+

Syntax

+

+Droppables.add('id_of_element',[options]);
+
+

Options

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Options Description
accept Set accept to a string or an array of strings describing CSS classes. The Droppable will only accept Draggables that have one or more of these CSS classes.
containment The droppable will only accept the Draggable if the Draggable is contained in the given elements (or element ids). Can be a single element or an array of elements. This option is used by Sortables to control Drag-and-Drop between Sortables.
hoverclass if set, the Droppable will have this additional CSS class when an accepted Draggable is hovered over it.
overlap If set to ‘horizontal’ or ‘vertical’ the droppable will only react to a Draggable if its overlapping by more than 50% in the given direction. Used by Sortables.
greedy OBSOLETE starting at v1.6.1 (mid-2006) boolean, defaults to true, stops processing hovering (don’t look for other Droppables that are under the Draggable)
+

Callbacks

+ + + + + + + + + + + + + +
Callback Description
onHover Called whenever a Draggable is moved over the Droppable and the Droppable is affected (would accept it). The callback gets three parameters: the Draggable, the Droppable element, and the percentage of overlapping as defined by the overlap option. Used by Sortables.
onDrop Called whenever a Draggable is released over the Droppable and the Droppable accepts it. The callback gets three parameters: the Draggable element, the Droppable element and the Event. You can extract additional information about the drop – like if the Ctrl or Shift keys were pressed – from the Event object.
+

Examples

+

+Droppables.add('shopping_cart', {
+  accept: 'products',
+  onDrop: function(element) {
+    $('shopping_cart_text').update('Dropped the ' + element.alt + ' on me.');
+  }
+});
+
+

+Droppables.add('shopping_cart', {
+  accept: 'products',
+  onDrop: function(dragged, dropped, event) {
+    alert('Dragged: ' + dragged.id);
+    alert('Dropped onto: ' + dropped.id);
+    alert('Held ctrl key: ' + event.ctrlKey);
+  }
+});
+
+

Removing Droppables

+

When you delete a Node in the HTML Code that was droppable you will not be able to use any draggable Element. Before you delete a droppable element be sure to remove it first from the Droppables list:

+

+Droppables.remove(element);
+
+

Notes

+

Nested Droppables

+

If you’re adding droppable elements that have other droppable elements inside of them, make sure that you add the droppables in reverse order of the nesting (i.e. most inner droppable first, then second most inner droppable second).
+For example you have a nested list:

+

+<ul>
+  <li>Parent
+    <ul>
+      <li>Child 1</li>
+      <li>Child 2</li>
+      <li>Child 3</li>
+    </ul>
+  </li>
+</ul>
+
+

Make sure that the children get defined as droppables before the parent is.

+

Demo

+ +
+
+ Drag me! +
+
+ Drop here! +
+
+ +

Source code of this demo

+

+<style type="text/css">
+  div#droppable_container {
+    height: 140px;
+    width: 400px; }
+  div#draggable_demo {
+    width: 60px;
+    height: 60px;
+    cursor: move;
+    background: #9fcfba;
+    border: 1px solid #666;
+    text-align: center;
+    position: relative;
+    top: 30px;
+    line-height: 50px; }
+  div#droppable_demo {
+    width: 160px;
+    height: 120px;
+    background: #fff;
+    border: 5px solid #ccc;
+    text-align: center;
+    position: relative;
+    top: -60px;
+    left: 140px;
+    line-height: 100px; }
+  div#droppable_demo.hover {
+    border: 5px dashed #aaa;
+    background:#efefef; }
+</style>
+
+<div class="demo" id="droppable_container">
+  <div id="draggable_demo" class="draggable">
+    Drag me!
+  </div>
+  
+  <div id="droppable_demo">
+    Drop here!
+  </div>
+</div>
+
+<script type="text/javascript">
+  new Draggable('draggable_demo', { 
+    revert: true 
+  });
+  
+  Droppables.add('droppable_demo', { 
+    accept: 'draggable',
+    hoverclass: 'hover',
+    onDrop: function() { $('droppable_demo').highlight(); }
+  });
+</script>
+
+

Restrictions

+

- Can’t drop into a position:fixed styled element.

+
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-appear.html b/_posts/2009-01-01-effect-appear.html new file mode 100644 index 0000000..f10553c --- /dev/null +++ b/_posts/2009-01-01-effect-appear.html @@ -0,0 +1,94 @@ +--- +layout: default +title: Effect.Appear +--- + +
+ +

Combination Effects > Effect.Appear

+

Make an element appear. If the element was previously set to display:none inside the style attribute of the element, the effect will automatically show the element. This means that display must be set within the style attribute of an object, and not in the CSS in the head of the document or a linked file. In other words, this Effect will not work if display:none is set within style tag or linked CSS file. Alternatively, display:none can be set using a document.getElementById script even if no style is set in the style attribute.

+

Examples

+

+Effect.Appear('id_of_element');
+Effect.Appear('id_of_element', { duration: 3.0 });
+
+

There’s also a shortcut method offered which you can call on the element itself. Note, that this will only work on Prototype-extended elements (elements you extended at least once via calling $(element)).

+

+$('id_of_element').appear();
+$('id_of_element').appear({ duration: 3.0 });
+
+

Options

+ + + + + + + + + + + + + + + + + +
Options Description
duration float value, in seconds, defaults to 1.0
from float value, defaults to 0.0, percent of opacity to start
to float value, defaults to 1.0, percent of opacity to end
+

Notes

+

Can take an options parameter, to control the underlying Effect.Opacity effect.
+Works safely with most HTML elements, except table rows, table bodies and table heads.

+

On Microsoft Internet Explorer, this effect may display a bold/ghosting artifact on elements that don’t have a defined background. It’s unclear if this is a feature or a bug.

+

Microsoft Internet Explorer can only set opacity on elements that have a ‘layout’. To let an element have a layout, you must set some CSS positional properties, like width or height. See Giving Elements Layout. (Note: This is fixed in V1.5_rc1.)

+

The opposite of Effect.Appear is Effect.Fade.

+

Demo

+
+ + +
+

Source code of this demo

+

+<div id="appear_demo" style="display:none; width:80px; height:80px; background:#c2defb; border:1px solid #333;"></div>
+<ul>
+  <li><a href="#" onclick="$('appear_demo').appear(); return false;">Click here for a demo!</a></li>
+  <li><a href="#" onclick="$('appear_demo').hide(); return false;">Reset</a></li>
+</ul>
+
+

Applying Appear to invisible elements

+

Recall that display:none and visibility:hidden both make an element invisible, but elements with visibility:hidden are not collapsed. You cannot apply Effect.Appear to elements with style=“visibility: hidden” because this function only alters “display”. Below is a workaround. I don’t know what’s going on with the demo, but it looks flawlessly when I use it on my website…

+

+$('myBox').setOpacity(0);
+$('myBox').setStyle({visibility: 'visible'});
+new Effect.Opacity(
+   'myBox', { 
+      from: 0.0, 
+      to: 1.0,
+      duration: 1.0
+   }
+);
+
+ + +
+
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-blinddown.html b/_posts/2009-01-01-effect-blinddown.html new file mode 100644 index 0000000..aaebae5 --- /dev/null +++ b/_posts/2009-01-01-effect-blinddown.html @@ -0,0 +1,60 @@ +--- +layout: default +title: Effect.BlindDown +--- + +
+ +

Combination Effects > Effect.BlindDown

+

This effect simulates a window blind, where the contents of the affected elements stay in place.

+

Examples

+

+Effect.BlindDown('id_of_element');
+Effect.BlindDown('id_of_element', { duration: 3.0 });
+
+

Options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Option Description
scaleX boolean, defaults to false
scaleY boolean, defaults to true
scaleContent boolean, defaults to true
scaleFromCenter boolean, defaults to false
scaleMode string, defaults to ‘box', can also be ‘contents‘
scaleFrom integer value, percentage (0%–100%), defaults to 100
scaleTo integer value, percentage (0%–100%), defaults to 0
duration float value, in seconds, defaults to 1.0
+

Notes

+

Works safely with most Block Elements, except table rows, table bodies and table heads.

+

Also, if you would like the block hidden when someone first lands on your page, you must use the display: none property within the style attribute of the div/block tag, and not in the CSS class for the div.
+Example:
+

<div style="display: none" id = "id_of_element">
+Blind content

+

\ No newline at end of file diff --git a/_posts/2009-01-01-effect-blindup.html b/_posts/2009-01-01-effect-blindup.html new file mode 100644 index 0000000..3e76b5a --- /dev/null +++ b/_posts/2009-01-01-effect-blindup.html @@ -0,0 +1,104 @@ +--- +layout: default +title: Effect.BlindUp +--- + +
+ +

Combination Effects > Effect.BlindUp

+

This effect simulates a window blind, where the contents of the affected elements stay in place.

+

Examples

+

+Effect.BlindUp('id_of_element');
+Effect.BlindUp('id_of_element', { duration: 3.0 });
+
+

Options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Option Description
scaleX boolean, defaults to false
scaleY boolean, defaults to true
scaleContent boolean, defaults to true
scaleFromCenter boolean, defaults to false
scaleMode string, defaults to ‘box', can also be ‘contents‘
scaleFrom integer value, percentage (0%–100%), defaults to 100
scaleTo integer value, percentage (0%–100%), defaults to 0
duration float value, in seconds, defaults to 1.0
+

Notes

+

Works safely with most Block Elements, except table rows, table bodies and table heads.

+

The opposite of Effect.BlindUp is Effect.BlindDown.

+

Demo

+
+
+This is some test content. This is some test content. +
+ +
+

Source code of this demo

+

+<div id="blindup_demo" style="width:80px; height:80px; background:#ccc;">
+  This is some test content. This is some test content.
+</div>
+<ul>
+  <li><a href="#" onclick="Effect.BlindUp('blindup_demo'); return false;">Click here for a demo!</a></li>
+  <li><a href="#" onclick="$('blindup_demo').show(); return false;">Reset</a></li>
+</ul>
+
+

Effect.BlindLeft

+

For horizontal scrolling action try this snippet:

+

+Effect.BlindLeft = function(element) {
+  element = $(element);
+  element.makeClipping();
+  return new Effect.Scale(element, 0,
+    Object.extend({ scaleContent: false,
+      scaleY: false,
+      scaleMode: 'box',
+      scaleContent: false,
+      restoreAfterFinish: true,
+      afterSetup: function(effect) {
+        effect.element.makeClipping().setStyle({
+          height: effect.dims[0] + 'px'
+        }).show();
+      },
+      afterFinishInternal: function(effect) {
+        effect.element.hide().undoClipping();
+      }
+    }, arguments[1] || { })
+  );
+};
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-dropout.html b/_posts/2009-01-01-effect-dropout.html new file mode 100644 index 0000000..60928fd --- /dev/null +++ b/_posts/2009-01-01-effect-dropout.html @@ -0,0 +1,27 @@ +--- +layout: default +title: Effect.DropOut +--- + +
+ +

Combination Effects > Effect.DropOut

+

Makes an element drop and fade out at the same time.

+

Examples

+

+Effect.DropOut('id_of_element');
+
+

Notes

+

Works safely with most Block Elements, except tables.

+

Demo

+
+
+ +
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-fade.html b/_posts/2009-01-01-effect-fade.html new file mode 100644 index 0000000..bccc733 --- /dev/null +++ b/_posts/2009-01-01-effect-fade.html @@ -0,0 +1,63 @@ +--- +layout: default +title: Effect.Fade +--- + +
+ +

Combination Effects > Effect.Fade

+

Makes an element fade away and takes it out of the document flow when the effect is complete by setting the CSS display property to none. Opposite of Effect.Appear.

+

Examples

+

+Effect.Fade('id_of_element');
+Effect.Fade('id_of_element', { duration: 3.0 });
+
+

There’s also a shortcut method offered which you can call on the element itself. Note, that this will only work on Prototype-extended elements (elements you extended at least once via calling $(element)).

+

+$('id_of_element').fade();
+$('id_of_element').fade({ duration: 3.0, from: 0, to: 1 });
+
+

Options

+ + + + + + + + + + + + + + + + + +
Options Description
duration float value, in seconds, defaults to 1.0
from float value, defaults to 1.0, percent of opacity to start
to float value, defaults to 0.0, percent of opacity to end
+

Notes

+

Can take an options parameter, to control the underlying Effect.Opacity effect.
+Works safely with most HTML elements, except table rows, table bodies and table heads.

+

On Microsoft Internet Explorer, this effect may display a bold/ghosting artifact on elements that don’t have a defined background. It’s unclear if this is a feature or a bug.

+

Microsoft Internet Explorer can only set opacity on elements that have a ‘layout’. To let an element have a layout, you must set some CSS positional properties, like width or height. See Giving Elements Layout. (Note: This is fixed in V1.5_rc1.

+

Demo

+
+
+ +
+

Source code of this demo

+

+<div id="fade_demo" style="width:80px; height:80px; background:#c2defb; border:1px solid #333;"></div>
+<ul>
+  <li><a href="#" onclick="$('fade_demo').fade(); return false;">Click here for a demo!</a></li>
+  <li><a href="#" onclick="$('fade_demo').show(); return false;">Reset</a></li>
+</ul>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-fold.html b/_posts/2009-01-01-effect-fold.html new file mode 100644 index 0000000..3a2ee1b --- /dev/null +++ b/_posts/2009-01-01-effect-fold.html @@ -0,0 +1,35 @@ +--- +layout: default +title: Effect.Fold +--- + +
+ +

Combination Effects > Effect.Fold

+

Reduce the element to its top then to left to make it disappear.

+

Examples

+

+Effect.Fold('id_of_element');
+
+

Notes

+

Works safely with most Block Elements, except tables.

+

Demo

+
+
+ +
+

Source code of this demo

+

+<div id="fold_demo" style="width:80px; height:80px; background:#ccc;"></div>
+<ul>
+  <li><a href="#" onclick="Effect.Fold('fold_demo'); return false;">Click me for a demo!</a></li>
+  <li><a href="#" onclick="$('fold_demo').show(); return false;">Reset</a></li>
+</ul>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-grow.html b/_posts/2009-01-01-effect-grow.html new file mode 100644 index 0000000..2d0cace --- /dev/null +++ b/_posts/2009-01-01-effect-grow.html @@ -0,0 +1,51 @@ +--- +layout: default +title: Effect.Grow +--- + +
+ +

Combination Effects > Effect.Grow

+

“Grows” an element into a specific direction (see demo for better understanding).

+

Examples

+

+Effect.Grow('id_of_element');
+
+

Options

+ + + + + + + + + + + + + +
Option Description
direction string, defaults to 'center', can also be: 'top-left', 'top-right', 'bottom-left', 'bottom-right', specifying the origin from which to “grow” the element
duration float value, in seconds, defaults to 1.0
+

Notes

+

Works safely with most Block Elements, except tables.
+You can define different durations for several div elements, and place them in a row in order to make them appear one after another.

+

Demo

+
+ + +
+

Source code of this demo

+

+<div id="grow_demo" style="display:none; width:80px; height:80px; background:#ccc;"></div>
+<ul>
+  <li><a href="#" onclick="Effect.Grow('grow_demo'); return false;">Click me for a demo!</a></li>
+  <li><a href="#" onclick="$('grow_demo').hide(); return false;">Reset</a></li>
+</ul>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-highlight.html b/_posts/2009-01-01-effect-highlight.html new file mode 100644 index 0000000..f2a0fa6 --- /dev/null +++ b/_posts/2009-01-01-effect-highlight.html @@ -0,0 +1,67 @@ +--- +layout: default +title: Effect.Highlight +--- + +
+ +

Core Effects > Effect.Highlight

+

This effect flashes a color as the background of an element. It is mostly used to draw attention to a part of the page that has been updated via JavaScript or AJAX, when the update would not otherwise be obvious.

+

Syntax

+

+new Effect.Highlight('id_of_element', [options]);
+new Effect.Highlight(element, [options]);
+
+

Options

+ + + + + + + + + + + + + + + + + + + + + +
Option Description
startcolor Sets the color of first frame of the highlight. Defaults to ”#ffff99” (a light yellow).
endcolor Sets the color of the last frame of the highlight. This is best set to the background color of the highlighted element. Defaults to ”#ffffff” (white).
restorecolor Sets the background-color of the element after the highlight has finished. Defaults to the current background-color of the highlighted element (see Note).
keepBackgroundImage Unless this is set to true, any background image on the element will not be preserved.
+

Notes

+

If the restorecolor option is not given, Effect.Highlight tries to find out the current background color of the element, which will only work reliably across browsers if the color is given with a CSS rgb triplet, like rgb(0, 255, 0).

+

Be aware of the syntax: this effect strictly requires a new in front, otherwise you will get a javascript error.

+

If you specify the startcolor or endcolor using short-form notation, as in #ccf, the effect will fail silently. Use the long-form, as in #ccccff.

+

Also be aware that applying an effect (without setting a restorecolor), to an element that already has an highlight effect in progress, will cause the restorecolor to be set to the elements background-color at the time of the new effect, and not the original background-color. For example, click the example below 4-5 times in quick succession, and the paragraph will stay yellow as opposed to the original white.

+

Demo

+
+

+This paragraph exists for demo purposes. Click the link below and it will make your day bright!
+ +Highlight me! + +

+
+

Source code of this demo

+

+<p id="highlight_demo" style="padding:10px; border:1px solid #ccc; background:#ffffff;">
+  This paragraph exists for demo purposes. Click the above link and it will make your day 
+bright!<br/>
+  
+  <a href="#" onclick="new Effect.Highlight(this.parentNode, { startcolor: '#ffff99',
+endcolor: '#ffffff' }); return false;">
+    Highlight me!
+  </a>
+</p>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-methods.html b/_posts/2009-01-01-effect-methods.html new file mode 100644 index 0000000..19213d0 --- /dev/null +++ b/_posts/2009-01-01-effect-methods.html @@ -0,0 +1,134 @@ +--- +layout: default +title: Effect.Methods +--- + +
+ +

Effect.Methods is a mixin of various effects and helper functions for DOM elements.
+These methods can be accessed through the $() function or through any Element object.

+

Syntax

+

+$(element).methodName(arguments);
+
+

The following methods are included within Effect.Methods and can be used as a shortcut for effects, helpers, etc you might want to call on an element:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Name Description
morph(element, style, options) starts an Effect.Morph on the element, takes style (the styles string or hash for the effect) as the first parameter, takes an optional second parameter which is the options hash for the effect
visualEffect(element, effect, options) specify any of the supported effects and pass options
getInlineOpacity a shortcut for Element#getInlineOpacity?
forceRerendering a shortcut for Element#forceRerendering?
setContentZoom a shortcut for Element#setContentZoom?
collectTextNodes a shortcut for Element#collectTextNodes?
collectTextNodesIgnoreClass a shortcut for Element#collectTextNodesIgnoreClass?
getStyles a shortcut for Element.getStyles?
+

Additional to this set of helper function, also all of scriptaculous’ Combination Effects and Core Effects are available within Effect.Methods and take the an options hash as an optional parameter:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method Name Description
fade a shortcut for Effect.Fade
appear a shortcut for Effect.Appear
grow a shortcut for Effect.Grow
shrink a shortcut for Effect.Shrink
fold a shortcut for Effect.Fold
blindUp a shortcut for Effect.BlindUp
blindDown a shortcut for Effect.BlindDown
slideUp a shortcut for Effect.SlideUp
slideDown a shortcut for Effect.SlideDown
pulsate a shortcut for Effect.Pulsate
shake a shortcut for Effect.Shake
puff a shortcut for Effect.Puff
squish a shortcut for Effect.Squish
switchOff a shortcut for Effect.SwitchOff
dropOut a shortcut for Effect.DropOut
highlight a shortcut for Effect.Highlight
+

Examples

+

+$('id_of_element').highlight();
+$('id_of_element').visualEffect('Opacity', { from: 1.0, to: 0.7, duration: 0.5 });
+$('id_of_element').morph({ height: '50px', width: '200px' }, { duration: 0.5 });
+$('id_of_element').fade({ delay: 0.3, duration: 0.8 });
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-morph.html b/_posts/2009-01-01-effect-morph.html new file mode 100644 index 0000000..794d564 --- /dev/null +++ b/_posts/2009-01-01-effect-morph.html @@ -0,0 +1,72 @@ +--- +layout: default +title: Effect.Morph +--- + +
+ +

Core Effects > Effect.Morph

+

This effect changes the CSS properties of an element.

+

Availability

+

script.aculo.us V1.7 and later.

+

Syntax

+

Simple:
+


+$('morph_example').morph('background:#080; color:#fff;');
+

+

Complex:
+


+new Effect.Morph('error_message', {
+  style: 'background:#f00; color: #fff;', // CSS Properties
+  duration: 0.8 // Core Effect properties
+});

+

new Effect.Morph(‘error_message’, {
+ style: {
+ background: ‘#f00’,
+ color: ‘#fff’
+ }, // CSS Properties
+ duration: 0.8 // Core Effect properties
+});

+

new Effect.Morph(‘message’, {
+ style: ‘error’, // CSS class name
+ duration: 0.8 // Core Effect properties
+});
+

+

Style as a hash (keys should be javascript names (camel-cased), rather than CSS ones i.e. backgroundColor rather than background-color):

+

Options

+ + + + + + + + + +
Option Description
style the target style of your element, as a string written with the standard CSS syntax, a hash, or a CSS class name.
+

Demo

+
+
+ +
+

Source code of this demo

+

+<div id="morph_demo" style="background:#cccccc; width:100px; height:100px;"></div>
+<ul>
+  <li><a href="#" onclick="$('morph_demo').morph('background:#00ff00; width:300px;'); return false;">Click me for a demo!</a></li>
+  <li><a href="#" onclick="$('morph_demo').morph('background:#cccccc; width:100px;'); return false;" >Reset the demo!</a></li>
+</ul>
+
+

Details

+

Effect.Morph takes orginal styles given by CSS style rules or inline style attributes into consideration when calculating the transforms. It works with all length and color based CSS properties, including margins, paddings, borders, opacity and text/background colors.

+

Implementation Details

+

Because Effect.Morph queries the original values with Prototype’s Element.getStyle API, it doesn’t matter whether these styles are set inline or in an external stylesheet definition. Of course the effect supports all usual options, like duration or transition.
+

Любите проституток на досуге? Проститутки Москвы доставят лучшее удовольствие в Москве.

+
+

+
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-move.html b/_posts/2009-01-01-effect-move.html new file mode 100644 index 0000000..f62771a --- /dev/null +++ b/_posts/2009-01-01-effect-move.html @@ -0,0 +1,59 @@ +--- +layout: default +title: Effect.Move +--- + +
+ +

Core Effects > Effect.Move

+

This effect moves an element by modifying its position attributes.

+

Syntax

+

This will move the object to the top left corner of the window (x=0; y=0):
+


+new Effect.Move('object', { x: 0, y: 0, mode: 'absolute' });
+

+

This will move the object 30px up and 20px to the right relative to its current position:
+


+new Effect.Move('object', { x: 20, y: -30, mode: 'relative' });
+

+

Options

+ + + + + + + + + + + + + + + + + +
Options Description
x integer value, either the new absolute target of the effect elements left value or the modifier of its current left value, depending on the mode option
y integer value, either the new absolute target of the effect elements top value or the modifier of its current top value, depending on the mode option
mode string, defaults to 'relative', can also be 'absolute', specifies if the element is moved absolutely or relative to its own position.
+

Demo

+ +
+Click me for a demo! +
+

Source code of this demo

+

+<style type="text/css">
+  a#move_demo { background:#fa0000; color:#fff; padding:5px; border:1px solid #000; }
+</style>
+
+<div class="demo">
+  <a href="#" id="move_demo" onclick="new Effect.Move(this, { x: 60, y: -30 }); return
+false;">Click me for a demo!</a>
+</div>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-multiple.html b/_posts/2009-01-01-effect-multiple.html new file mode 100644 index 0000000..59cb7e2 --- /dev/null +++ b/_posts/2009-01-01-effect-multiple.html @@ -0,0 +1,113 @@ +--- +layout: default +title: Effect.multiple +--- + +
+ +

Effect multiple takes an array of elements and performs a given effect for each element. If one specific element is passed instead of an array of elements, the specific elements child nodes will be used for the effect. Each subsequent effect will start by default with a slight delay depending on the speed option.

+

Syntax

+

+Effect.multiple([element1, element2, element3, …], Effect); // takes an array of elements
+Effect.multiple(element, Effect); // also takes a specific element and will use its childNodes
+
+

Options

+

Additional to a typical effects options, Effect.multiple also takes these options:

+ + + + + + + + + + + + + +
Option Description
speed float value, defaults to 0.1, a delay offset for each subsequent effect
delay float value, defaults to 0.0, the effects start delay
+

Examples

+

+Effect.multiple('id_of_element', Effect.Fade); // performs an Effect.Fade for each childNode of the given element
+Effect.multiple(['id_one', 'id_two'], Effect.Puff); // performs an Effect.Puff for each element in the given array
+Effect.multiple('id_of_element', Effect.Fade, { speed: 0 }); // instantely performs an Effect.Fade for each childNode of the given element
+
+

If you want to use the toggle effect:

+

+Effect.multiple(['id_one','id_two'],function(el){Effect.toggle(el,'appear');});
+
+
+

In this case we selected the appear effect. Thanks to Richard.

+

Demo

+ +
+ Click somewhere on the list for a demo. Reset the demo. +
    +
  • This is
    • +
  • what you
    • +
  • can do
    • +
  • with
    • +
  • Effect.multiple
    • +
+
+ +

Source code of this demo

+

+<style type="text/css">
+  ul#multiple_demo { cursor:pointer; }
+  ul#multiple_demo li { font-size:16px; }
+</style>
+
+<div class="demo">
+  Click somewhere on the list for a demo. <a href="#" id="reset_link">Reset the demo</a>.
+  <ul id="multiple_demo" class="on">
+    <li>This is</li>
+    <li>what you</li>
+    <li>can do</li>
+    <li>with</li>
+    <li>Effect.multiple</li>
+  </ul>
+</div>
+
+<script type="text/javascript">
+  (function() {
+    $('multiple_demo').observe('click', fadeListItems);
+    $('reset_link').observe('click', reset);
+    
+    var listItems = $('multiple_demo').select('li');
+    
+    function fadeListItems() {
+      Effect.multiple(listItems, Effect.Fade);
+    }
+    
+    function reset(event) {
+      event.stop();
+      Effect.multiple(listItems, Effect.Appear);
+    }
+  })();
+</script>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-opacity.html b/_posts/2009-01-01-effect-opacity.html new file mode 100644 index 0000000..9190c63 --- /dev/null +++ b/_posts/2009-01-01-effect-opacity.html @@ -0,0 +1,42 @@ +--- +layout: default +title: Effect.Opacity +--- + +
+ +

Core Effects > Effect.Opacity

+

This effect changes an element’s opacity (transparency).

+

Syntax

+

+new Effect.Opacity('id_of_element', [options]);
+new Effect.Opacity(element, [options]);
+
+

Examples

+

A simple example
+


+new Effect.Opacity('id_of_element', { from: 1.0, to: 0.7, duration: 0.5 });
+

+This will fade the element from 100% to 70% over the space of 1/2 second.

+

Notes

+

Microsoft Internet Explorer can only set opacity on elements that have a ‘layout’ (see IE Element Layout).

+

Demo

+
+
+ +
+

Source code of this demo

+

+<div id="opacity_demo" style="width:100px; height:100px; background:#ccc;"></div>
+<ul>
+  <li><a href="#" onclick="new Effect.Opacity('opacity_demo', { from: 1, to: 0 }); return false;">Hide this box</a></li>
+  <li><a href="#" onclick="new Effect.Opacity('opacity_demo', { from: 0, to: 1 }); return false;">Show this box</a></li>
+</ul>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-parallel.html b/_posts/2009-01-01-effect-parallel.html new file mode 100644 index 0000000..a750d50 --- /dev/null +++ b/_posts/2009-01-01-effect-parallel.html @@ -0,0 +1,105 @@ +--- +layout: default +title: Effect.Parallel +--- + +
+ +

Core Effects > Effect.Parallel

+

This is a special effect which allows to combine more than one core effect into a parallel effect. It’s the only effect that doesn’t take an element as first parameter, but an array of subeffects.

+

Syntax

+

+ new Effect.Parallel([array of subeffects], [options]);
+
+

Examples

+

+new Effect.Parallel([
+  new Effect.Move(element, { sync: true, x: 20, y: -30, mode: 'relative' }), 
+  new Effect.Opacity(element, { sync: true, from: 1, to: 0 }) 
+], { 
+  duration: 0.8,
+  delay: 0.5
+});
+
+

Options

+ + + + + + + + + +
Option Description
sync boolean, has to be true in order to prevent the subeffects from being started as soon as they get instantiated.
+

Notes

+

Don’t forget to set the sync option to true for all of the subeffects or else all the effects will start immediately after they were instantiated.

+

For IE7 and IE8 don’t put an extra comma at the end of the array of effects.
+i.e. new Effect.Parallel([new Effect.Fade(), new Effect.Appear(), ]);
+The extra comma at the end will cause the effect to fail in IE7-IE8 on the first pass.

+

Demo

+
+
+ +
+ +

Source code of the demo

+

+<div id="parallel_demo" style="width:150px; height:40px; background:#ccc;"></div>
+<ul>
+  <li><a href="#" id="animate_parallel_demo">Click here for a demo!</a></li>
+  <li><a href="#" id="reset_parallel_demo">Reset</a></li>
+</ul>
+</div>
+
+<script type="text/javascript">
+$('animate_parallel_demo').observe('click', function(event) {
+  event.stop();
+  
+  new Effect.Parallel([
+    new Effect.Move('parallel_demo', { sync: true, x: 400, y: 0, mode: 'relative' }), 
+    new Effect.Opacity('parallel_demo', { sync: true, from: 1, to: 0 })
+  ], { 
+    duration: 1.5
+  });
+});
+
+$('reset_parallel_demo').observe('click', function(event) {
+  event.stop();
+  
+  $('parallel_demo').setStyle({
+    top: 0,
+    left: 0,
+    opacity: 1
+  });
+});
+</script>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-puff.html b/_posts/2009-01-01-effect-puff.html new file mode 100644 index 0000000..2ee3ebf --- /dev/null +++ b/_posts/2009-01-01-effect-puff.html @@ -0,0 +1,59 @@ +--- +layout: default +title: Effect.Puff +--- + +
+ +

Combination Effects > Effect.Puff

+

Gives the illusion of the element puffing away (like a in a cloud of smoke).

+

Examples

+

+Effect.Puff('id_of_element');
+Effect.Puff('id_of_element', { duration: 3 });
+
+

+$('id_of_element').puff();
+$('id_of_element').puff({ duration: 3 });
+
+

Options

+ + + + + + + + + + + + + + + + + +
Options Description
duration float value, in seconds, defaults to 1.0
from float value, defaults to 0.0, percent of animation to start
to float value, defaults to 1.0, percent of animation to end
+

Notes

+

Works safely with most block elements, except tables.

+

Demo

+
+
+ +
+

Source code of the demo

+

+<div id="puff_demo" style="width:80px; height:80px; background:#c2defb; border:1px solid #333;"></div>
+<ul>
+  <li><a href="#" onclick="new Effect.Puff('puff_demo'); return false;">Click here for a demo!</a></li>
+  <li><a href="#" onclick="$('puff_demo').setStyle({ display: 'block', opacity:1, width:'80px', height:'80px' }); return false;">Reset</a></li>
+</ul>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-pulsate.html b/_posts/2009-01-01-effect-pulsate.html new file mode 100644 index 0000000..5b7f4cb --- /dev/null +++ b/_posts/2009-01-01-effect-pulsate.html @@ -0,0 +1,53 @@ +--- +layout: default +title: Effect.Pulsate +--- + +
+ +

Combination Effects > Effect.Pulsate

+

Pulsates the element, loops over five times over fading out and in.

+

Examples

+

+Effect.Pulsate('id_of_element');
+Effect.Pulsate('id_of_element', { pulses: 5, duration: 1.5 });
+
+

Options

+ + + + + + + + + + + + + + + + + +
Option Description
duration float value, in seconds, defaults to 2.0
from float value, defaults to 0.0, the minimal opacity during the pulsate, in a value between 0.0 and 1.0. For example, use 0.7 for a mild pulsate
pulses integer value, defaults to 5, the amount of pulses within the duration time
+

Notes

+

Works safely with most HTML elements, except table rows, table bodies and table heads.

+

Microsoft Internet Explorer can only set opacity on elements that have ‘layout’. To let an element have layout, you must set some CSS positional properties, like width or height. See Giving Elements Layout.

+

In Firefox, at least, if the element that you Pulsate has a :hover CSS psuedo class and you mouse over it while it’s pulsating, the effect will stop.

+

Demo

+
+ +
+

Source code of this demo

+

+<div id="pulsate_demo" style="width:150px; height:40px; background:#ccc; text-align:center;">
+  <a href="#" onclick="Effect.Pulsate('pulsate_demo'); return false;" style="line-height:40px;">Click me to pulsate!</a>
+</div>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-queues.html b/_posts/2009-01-01-effect-queues.html new file mode 100644 index 0000000..96352f6 --- /dev/null +++ b/_posts/2009-01-01-effect-queues.html @@ -0,0 +1,97 @@ +--- +layout: default +title: Effect Queues +--- + +
+ +

What is a Queue

+

Let’s examine how events in a queue occur: For a programmer a queue is an Array with events that are stacked on each other to be handled one by one. For example, a user hovers over a button with his cursor and then after half a second leaves the button area again. Two events have taken place, the mouseover and the mouseout. If you would handle the mouseover and the mouseout event takes place, it could disturb your current process. However you can’t just ignore the event, because then you will be stuck in the status that is established by the actions you have performed for mouseover. In this situation you could add the event to a queue and every time you’re done with processing an event, just check the queue for unprocessed events (and act accordingly).

+

How do Effects work and why do you need a Queue

+

The same happens when you are dealing with Effects and you face the situation where two effects can be called, both of which manipulate the same DOM object(s). script.aculo.us comes to the rescue with several techniques to manage your effects. To explain this further, we will show you how things work by example.

+

Let’s start creating two effects

+

I created a page, with a div[id=”test1”] and some content, on the following page called Example 1 . This page has an onload handler that executes two effects:
+


+new Effect.SlideDown('test1');
+new Effect.SlideUp('test1');
+

+
+
Click To Start the queue
+
+
LAST
+
FIRST
+
+
+

These effects are executed in parallel and thus one effects tries to slide the div down and the other to slide it up. It doesn’t work and you only see some flickering. However a similar thing occurs when you call new Effect.Slide Down(‘test1’); with an onclick and then new Effect.SlideUp(‘test1’); with an onclick to during the first effect. When you do this several times (quickly), you will see that the effects don’t work anymore. The same problem also occurs in many other situations. That’s why we need Effect.Queue.

+

Effect.Queue

+

The previous examples gave you an idea of the situations you could be facing without Queues. This must give you some motivation to find how Effect.Queue could improve your live and help you to manage your Effects.

+

Effect.Queue is an improved array of Effects (called Enumerable) that is global for the entire page. It gets created by extracting the global queue from Effect.Queues (we will discuss this later). So all effects you want to queue will be added to the global queue. You might be wondering how to add an effect to the queue? Well it’s quite easy.

+

When you are creating an effect, you can pass several arguments. Let’s look at How effects are created. The first argument is the DOM element you wish to manipulate, but you already know that. The second argument is actually an array of options that you can pass along, let’s examine that for Effect.Queue. We will use Effect.SlideDown and Effect.SlideUp like in the previous examples.
+


+new Effect.SlideDown('test1');
+new Effect.SlideUp('test1', { queue: 'end' });
+

+So you see I have added an array containing an entry queue: with the value end. This means that the Effect will be inserted at the end of the “global” Queue. All effects are always added to the queue, however without a position like ‘end’ they are always executed parallel to the other effects.

+

Let’s take a look at the improved example 1. You see that first the element slides down and then it slides back up again. There is also an option to insert the Effect at the front of the queue. You would use front instead of end in that case.
+


+new Effect.SlideUp('test1', { queue: 'end' });
+new Effect.SlideDown('test1', { queue: 'front' });
+

+This would place the SlideDown before the SlideUp effect (same as the previous examples). The argument you pass as queue: is called a position and it can be used with a different syntax, but we will go into that later.

+

Remember that JavaScript is not multi-threaded, so blocks of code are executed together when they get parsed. This causes the effects to start in parallel if no queue is defined.

+

This works nicely, doesn’t it? But what happens when you queue all kinds of effects in different places? You could have lots of effects that you would like to queue but they don’t all relate to each other. This is where Effect.ScopedQueue? comes in.

+

Basic Effect.ScopedQueue

+

As explained before, the default Queue is ‘global’. All effects are placed in the ‘global’ Queue unless you define a different scope. A scope is nothing more than grouping a set of Effects together in their own Queue. To do this, you need to pass an array instead of a string to the “queue:” option (so you have an array inside the outer array). This can only be done by using a different syntax to define the Queue position.
+Small and easy syntax:
+


+new Effect.SlideUp('test1', { queue: 'end' });
+

+

Syntax that allows for more tuning:
+


+new Effect.SlideUp('test1', { queue: { position: 'end' } });
+

+

The two examples are identical produce identical behaviour. However, the second syntax allows you to define a scope (a different queue) with the following syntax:
+


+new Effect.SlideUp('menu', { queue: { position: 'end', scope: 'menuxscope' } });
+new Effect.SlideUp('bannerbig', { queue: { position: 'end', scope: 'bannerscope' } });
+new Effect.SlideDown('menu', { queue: { position: 'end', scope: 'menuxscope' } });
+

+The scope: argument has defined a separate queue named ‘menuxscope’. This queue could for example contain all menu-related effects. A second scope named “bannerscope” is defined, it could contain all banner-related effects. In what order are these separate queues executed? First both 1 and 2 get executed, and when 1 is done 3 is executed. Check example 3 for a preview

+

Just remember, if you don’t define a scope, the effect is added to the default “global” scope, which can be accessed from Effect.Queue.

+

Limit

+

Sometimes too many effects get queued, for example when a user presses a button twice, or repeatedly enters and leaves a button hover area (and each time two effects are queued). This can cause a lot of distracting activity. To prevent this, we can add a “limit: n” option to the queue so no more than n effects are added to that ScopedQueue.
+


+new Effect.SlideDown('menu', { queue: { position: 'end', scope: 'menuxscope',
+limit: 2 } }); // #1

+

new Effect.Highlight(‘menu’, { queue: { position: ‘end’, scope: ‘menuxscope’,
+limit: 2 } }); // #2

+

new Effect.SlideUp(‘menu’, { queue: { position: ‘end’, scope: ‘menuxscope’,
+limit: 2 } }); // #3
+

+
    +
  1. and #2 will be added to the queue but #3 will not.
    2. +
+

This covers the queue for Effects, so let’s move on to Effect.Queues.

+

Effect.Queues

+

So what is Effect.Queues and why do we need it? Well, for each scope an instance of Effect.Scoped Queue is created. That instance is stored in Effect.Queues. You can access it by using Effect.Queues.get(‘global’) which is the same as Effect.Queue because the default ‘global’ queue is saved into Effect.Queue by script.aculo.us. However when you need to access a scope other than ‘global, you need to fetch it using Effect.Queues.get(‘myscope’) before you can manipulate it.
+


+var queue = Effect.Queues.get('myscope');
+

+

ScopedQueue manages the ‘effects’, this is an internal system accessed by the Effect object. However you can, if you wish, add effects to the queue and remove them by yourself. Note that this requires some knowledge about the internal workings of the system.

+

ScopedQueue is just an Enumerable object. You can retrieve the effects one by one and manipulate them. Let’s look at how we can ‘empty a queue’.
+


+var queue = Effect.Queues.get('myscope');
+queue.each(function(effect) { effect.cancel(); });
+

+which can also be written as:
+

+Effect.Queues.get('myscope').invoke('cancel');
+

+Or maybe you want to change the interval between the effects in a queue:
+

+Effect.Queues.get('myscope').interval = 100;
+

+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-scale.html b/_posts/2009-01-01-effect-scale.html new file mode 100644 index 0000000..288e5e3 --- /dev/null +++ b/_posts/2009-01-01-effect-scale.html @@ -0,0 +1,56 @@ +--- +layout: default +title: Effect.Scale +--- + +
+ +

Core Effects > Effect.Scale

+

This effect changes an elements width and height dimensions and the base for em units. This allows for smooth, automatic relative scaling of elements contained within the scaled element.

+

Syntax

+

+new Effect.Scale('id_of_element', percent, [options]);
+new Effect.Scale(element, percent, [options]);
+
+

Effect Options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Option Description
scaleX Sets whether the element should be scaled horizontally, defaults to true.
scaleY Sets whether the element should be scaled vertically, defaults to true.
scaleContent Sets whether content scaling should be enabled, defaults to true.
scaleFromCenter If true, scale the element in a way that the center of the element stays on the same position on the screen, defaults to false.
scaleMode Either ‘box’ (default, scales the visible area of the element) or ‘contents’ (scales the complete element, that is parts normally only visible byscrolling are taken into account). You can also precisely control the size the element will become by assigning the originalHeight and originalWidth variables to scaleMode. Example: scaleMode: { originalHeight: 900, originalWidth: 900 }
scaleFrom Sets the starting percentage for scaling, defaults to 100.0.
+

Demo

+

Click me for Demo!

+

Source code of this demo

+

+<a href='#' onclick="new Effect.Scale(this.parentNode, 200); return false;">Click me for 
+Demo!</a>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-scrollto.html b/_posts/2009-01-01-effect-scrollto.html new file mode 100644 index 0000000..3467bf6 --- /dev/null +++ b/_posts/2009-01-01-effect-scrollto.html @@ -0,0 +1,42 @@ +--- +layout: default +title: Effect.ScrollTo +--- + +
+

+ +

Combination Effects > Effect.ScrollTo

+

Scrolls to a specific place in the page.

+

Examples

+

+Effect.ScrollTo( 'li:eq(15)', 1000, {axis:'x'} ); // hmm, is this right?
+Effect.ScrollTo('element_id', { duration:'0.2', offset:-20 }); // works in v1.8.2
+
+

Options

+ + + + + + + + + + + + + +
Option Description
duration float value, in seconds, defaults to 1.0
offset integer value, vertical offset of the target element, in pixels, defaults to 0
+

Notes

+

The offset option must be a numeric value in your code, i.e. not in quotes.

+

Demo

+

Click me to scroll to the top of the article

+

Source code of this demo

+

+<a href="#" onclick="Effect.ScrollTo('article_top'); return false;">Click me to scroll to the top of the article</a>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-shake.html b/_posts/2009-01-01-effect-shake.html new file mode 100644 index 0000000..97ad0f7 --- /dev/null +++ b/_posts/2009-01-01-effect-shake.html @@ -0,0 +1,46 @@ +--- +layout: default +title: Effect.Shake +--- + +
+ +

Combination Effects > Effect.Shake

+

Moves the element slightly to the left, then to the right, repeatedly.

+

Examples

+

+Effect.Shake('id_of_element');
+
+

Options

+ + + + + + + + + + + + + +
Option Description
duration float value, in seconds, defaults to 0.5
distance integer value, defaults to 20, the number of pixels to move horizontally
+

Notes

+

Works safely with most Block Elements, except tables.

+

Demo

+
+ +
+

Source code of this demo

+

+<div id="shake_demo" style="width:150px; height:40px; background:#ccc; text-align:center;>
+  <a href="#" onclick="new Effect.Shake('shake_demo'); return false;" style="line-height:40px;">Click me to shake!</a>
+</div>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-shrink.html b/_posts/2009-01-01-effect-shrink.html new file mode 100644 index 0000000..2bf4159 --- /dev/null +++ b/_posts/2009-01-01-effect-shrink.html @@ -0,0 +1,51 @@ +--- +layout: default +title: Effect.Shrink +--- + +
+ +

Combination Effects > Effect.Shrink

+

“Shrinks” an element into a specific direction (see demo for better understanding), hides it when the effect is complete.

+

Examples

+

+Effect.Shrink('id_of_element');
+
+

Options

+ + + + + + + + + + + + + +
Option Description
direction string, defaults to 'center', can also be: 'top-left', 'top-right', 'bottom-left', 'bottom-right', the direction to “shrink” the element to
duration float value, in seconds, defaults to 1.0
+

Notes

+

Works safely with most Block Elements, except tables.
+You can define different durations for several div elements, and place them in a row in order to make them disappear one after another.

+

Demo

+
+
+ +
+

Source code of this demo

+

+<div id="shrink_demo" style="width:80px; height:80px; background:#ccc;"></div>
+<ul>
+  <li><a href="#" onclick="Effect.Shrink('shrink_demo'); return false;">Click me for a demo!</a></li>
+  <li><a href="#" onclick="$('shrink_demo').show(); return false;">Reset</a></li>
+</ul>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-slidedown.html b/_posts/2009-01-01-effect-slidedown.html new file mode 100644 index 0000000..edd2862 --- /dev/null +++ b/_posts/2009-01-01-effect-slidedown.html @@ -0,0 +1,100 @@ +--- +layout: default +title: Effect.SlideDown +--- + +
+ +

Combination Effects > Effect.SlideDown

+

This effect simulates a window blind, where the contents of the affected elements scroll up and down accordingly.

+

Examples

+
Effect.SlideDown('id_of_element');
+Effect.SlideDown('id_of_element', { duration: 3.0 });
+
+

Options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Option Description
scaleX boolean, defaults to false
scaleY boolean, defaults to true
scaleContent boolean, defaults to true
scaleFromCenter boolean, defaults to false
scaleMode string, defaults to ‘box', can also be ‘contents‘
scaleFrom integer value, percentage (0%–100%), defaults to 100
scaleTo integer value, percentage (0%–100%), defaults to 0
duration float value, in seconds, defaults to 1.0
+

Notes

+

Include a second div element, wrapping the contents of the outer div. So, if you call new Effect.SlideDown('x');, your element must look like this:

+
<div id="x">
+  <div>
+    contents
+  </div>
+</div>
+
+

The target element should not have padding set, otherwise you’ll see the effect “bouncing”. (See discussion)

+

Because of a bug in Internet Explorer 6 (overflow not correctly hidden), an additional wrapper div is needed if you want to use these effects on absolutely positioned elements (wrapper is the absolutely positioned element, x has position:relative set):

+
<div id="wrapper">
+  <div id="x">
+    <div>
+      contents
+    </div>
+  </div>
+</div>
+
+

Works only on block elements.

+

In Internet Explorer 6.0 there’s a problem where floated block level elements don’t animate. If you add a position: relative to the element it all works though.

+

The opposite of Effect.SlideDown is Effect.SlideUp.

+

Demo

+
+ + +
+

Source code of this demo

+
<div id="slidedown_demo" style="display:none; width:80px; height:80px; background:#ccc; text-align:center;">
+  <div>
+    This is some test content. This is some test content.
+  </div>
+</div>
+<ul>
+  <li><a href="#" onclick="Effect.SlideDown('slidedown_demo'); return false;">Click here for a demo!</a></li>
+  <li><a href="#" onclick="$('slidedown_demo').hide(); return false;">Reset</a></li>
+</ul>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-slideup.html b/_posts/2009-01-01-effect-slideup.html new file mode 100644 index 0000000..1ded737 --- /dev/null +++ b/_posts/2009-01-01-effect-slideup.html @@ -0,0 +1,103 @@ +--- +layout: default +title: Effect.SlideUp +--- + +
+ +

Combination Effects > Effect.SlideUp

+

This effect simulates a window blind, where the contents of the affected elements scroll up accordingly.

+

Examples

+

+Effect.SlideUp('id_of_element');
+Effect.SlideUp('id_of_element', { duration: 3.0 });
+
+

Options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Option Description
scaleX boolean, defaults to false
scaleY boolean, defaults to true
scaleContent boolean, defaults to true
scaleFromCenter boolean, defaults to false
scaleMode string, defaults to ‘box', can also be ‘contents‘
scaleFrom integer value, percentage (0%–100%), defaults to 100
scaleTo integer value, percentage (0%–100%), defaults to 0
duration float value, in seconds, defaults to 1.0
+

Notes

+

Include a second div element, wrapping the contents of the outer div. So, if you call new Effect.SlideUp('x');, your element must look like this:

+

+<div id="x">
+  <div>
+    contents
+  </div>
+</div>
+
+

Because of a bug in Internet Explorer 6 (overflow not correctly hidden), an additional wrapper div is needed if you want to use these effects on absolutely positioned elements (wrapper is the absolutely positioned element, x has position:relative set):

+

+<div id="wrapper">
+  <div id="x">
+    <div>
+      contents
+    </div>
+  </div>
+</div>
+
+

Works only on block elements.

+

In Internet Explorer 6.0 there’s a problem where floated block level elements don’t animate. If you add a position: relative to the element it all works though.

+

The opposite of Effect.SlideUp is Effect.SlideDown.

+

Demo

+
+
+
+This is some test content. This is some test content. +
+
+ +
+

Source code of this demo

+

+<div id="slideup_demo" style="width:80px; height:80px; background:#ccc; text-align:center;">
+  <div>
+    This is some test content. This is some test content.
+  </div>
+</div>
+<ul>
+  <li><a href="#" onclick="Effect.SlideUp('slideup_demo'); return false;">Click here for a demo!</a></li>
+  <li><a href="#" onclick="$('slideup_demo').show(); return false;">Reset</a></li>
+</ul>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-squish.html b/_posts/2009-01-01-effect-squish.html new file mode 100644 index 0000000..77e61b1 --- /dev/null +++ b/_posts/2009-01-01-effect-squish.html @@ -0,0 +1,35 @@ +--- +layout: default +title: Effect.Squish +--- + +
+ +

Combination Effects > Effect.Squish

+

Reduce the element to its top-left corner.

+

Examples

+

+Effect.Squish('id_of_element');
+
+

Notes

+

Works safely with most Block Elements, except tables.

+

Demo

+
+
+ +
+

Source code of this demo

+

+<div id="squish_demo" style="width:80px; height:80px; background:#ccc;"></div>
+<ul>
+  <li><a href="#" onclick="Effect.Squish('squish_demo'); return false;">Click me for a demo!</a></li>
+  <li><a href="#" onclick="$('squish_demo').show(); return false;">Reset</a></li>
+</ul>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-switchoff.html b/_posts/2009-01-01-effect-switchoff.html new file mode 100644 index 0000000..3b90bd2 --- /dev/null +++ b/_posts/2009-01-01-effect-switchoff.html @@ -0,0 +1,35 @@ +--- +layout: default +title: Effect.SwitchOff +--- + +
+ +

Combination Effects > Effect.SwitchOff

+

Gives the illusion of a TV-style switch off.

+

Examples

+

+Effect.SwitchOff('id_of_element');
+
+

Notes

+

Works safely with most Block Elements, except tables.

+

Demo

+
+
+ +
+

Source code of this demo

+

+<div id="switchoff_demo" style="width:80px; height:80px; background:#ccc;"></div>
+<ul>
+  <li><a href="#" onclick="Effect.SwitchOff('switchoff_demo'); return false;">Click here for a demo!</a></li>
+  <li><a href="#" onclick="$('switchoff_demo').show(); return false;">Reset</a></li>
+</ul>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-tagifytext.html b/_posts/2009-01-01-effect-tagifytext.html new file mode 100644 index 0000000..7fc30de --- /dev/null +++ b/_posts/2009-01-01-effect-tagifytext.html @@ -0,0 +1,41 @@ +--- +layout: default +title: Effect.tagifyText +--- + +
+ +

Effect.tagifyText transforms any text string contained in a specific element into a chain of span elements, each containing one character of the string.

+

Syntax

+

+Effect.tagifyText(element);
+
+

Demo

+ +
+ which is contained in the following div. +
Go! Click on the button! Tagify me!
+
+

Source code of this demo

+

+<style type="text/css">
+  div#tagify_demo { padding:10px 0; }
+  button#tagify_button { padding:3px; }
+  div#tagify_element { border:1px solid #3071cc; padding:10px; margin-top:10px;}
+  div#tagify_element span { border:1px solid #df7418; padding:5px; }
+</style>
+
+<div class="demo" id="tagify_demo">
+  <button id="tagify_button" onclick="Effect.tagifyText('tagify_element'); return false;">Tagify the text</button> which is contained in the following <code>div</code>.
+  <div id="tagify_element">Go! Click on the button! Tagify me!</div>
+</div>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-toggle.html b/_posts/2009-01-01-effect-toggle.html new file mode 100644 index 0000000..c84876b --- /dev/null +++ b/_posts/2009-01-01-effect-toggle.html @@ -0,0 +1,70 @@ +--- +layout: default +title: Effect.toggle +--- + +
+ +

Effect.toggle allows for easily toggling elements with an animation.

+

Syntax

+

+Effect.toggle(element, ['appear' | 'slide' | 'blind'], [options] );
+
+

element can be either a string containing the id of the element, or a JavaScript DOM element object.

+

The options parameter is used to give any additional customization parameters to the effect. There are general and effect-specific options. See the individual effects for more information.

+

Examples

+

+Effect.toggle('id_of_element', 'appear');
+Effect.toggle('id_of_element', 'slide', { delay: 0.5 });
+Effect.toggle('id_of_element', 'blind', { duration: 2.0 });
+
+

Notes

+

Keep in mind, like individual Effects, you must include a second DIV element, wrapping the contents of the outer DIV. So, if you call new Effect.Slide Down(‘x’), your element must look like this:

+

+<div id="x">
+  <div>
+    contents
+  </div>
+</div>
+
+

Demo

+

Toggle via 'blind'

+
+Toggle the following paragraph with a ‘blind’-effect +
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+
+
+

Toggle via 'slide'

+
+Toggle the following paragraph with a ‘slide’-effect +
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+
+
+

Toggle via 'appear'

+
+Toggle the following paragraph with an ‘appear’-effect +
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+
+
+

Source code of the demo

+

+<a href="#" onclick="Effect.toggle('toggle_appear', 'appear'); return false;">Toggle the following paragraph with an 'appear'-effect</a>
+<div id="toggle_appear" style="background:#ccc;">
+  <div>
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </div>
+</div>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-transitions.html b/_posts/2009-01-01-effect-transitions.html new file mode 100644 index 0000000..aad1459 --- /dev/null +++ b/_posts/2009-01-01-effect-transitions.html @@ -0,0 +1,93 @@ +--- +layout: default +title: Effect.Transitions +--- + +
+ +

Put simply, a transition in script.aculo.us is a function which transforms an input value to another value and returns it.
+Effect.Transitions is a collection of 8 of those functions which can be used to achieve interesting variations on any effect.

+

Example

+

A transition can be specified by using an effects transition option.

+

+new Effect.Move('id_of_element', {
+  x: 200, y: 0, mode: 'relative',
+  transition: Effect.Transitions.spring
+});
+
+

Demo

+

To get a better understanding of how each of script.aculo.us’ included transitions work, play around with the following demo.

+ +
+
+ Choose a transition: + + and the demo! +
+
+

+
+ + +
\ No newline at end of file diff --git a/_posts/2009-01-01-effect-tween.html b/_posts/2009-01-01-effect-tween.html new file mode 100644 index 0000000..cd10484 --- /dev/null +++ b/_posts/2009-01-01-effect-tween.html @@ -0,0 +1,27 @@ +--- +layout: default +title: Effect.Tween +--- + +
+ +

Core Effects > Effect.Tween

+

This effect tweens between two values and sets a property or calls a method on an object (including DOM elements); or allows for a callback method, which will be automatically bound to the object.

+

Availability

+

script.aculo.us V1.8 and later.

+

Syntax

+

+ new Effect.Tween(element, startVal, endVal, [options], propertyName);
+ new Effect.Tween(element, startVal, endVal, [options], callbackFunction);
+
+

Options

+

No custom options.

+

Examples

+

+    new Effect.Tween(whatever, 5, 0, 'blech'); // sets property on the object
+    new Effect.Tween('foo', 10, 20, 'innerHTML'); // sets property on the 'foo' DOM element
+    new Effect.Tween('foo', 10, 20, 'update'); // method call on 'foo' DOM element
+    new Effect.Tween('foo', 50, 0, { duration: 2.0, afterFinish: function(){ /* do something else */} }, function(p){});
+    new Effect.Tween(null, 0, 100, function(p){ scrollTo(0,p) }); // scrolls the window
+
+
\ No newline at end of file diff --git a/_posts/2009-01-01-effects.html b/_posts/2009-01-01-effects.html new file mode 100644 index 0000000..10113be --- /dev/null +++ b/_posts/2009-01-01-effects.html @@ -0,0 +1,30 @@ +--- +layout: default +title: Effects +--- + +
+ +

The Visual Effects library (effects.js) includes all you need to add advanced JavaScript animation to your web site or application.
+All animation is time-based, not frame based. So, if you tell an effect to last exactly one second, it will do so, regardless of the rendering speed of the browser. And it’s compatible, meaning all this stuff works on Firefox, Internet Explorer, Safari, the iPhone and many other browsers.

+

The library’s Core Effects, Combination Effects (a combination of core effects) and Effect queues (a representation of timelines to create series of effects) are powerful tools to create appealing animations.

+

Quick Demo

+
+
+ +
+

Source code of this demo

+

+<div id="morph_demo" style="background:#cccccc; width:100px; height:100px;"></div>
+<ul>
+  <li><a href="#" onclick="$('morph_demo').morph('background:#00ff00; width:300px;'); return false;">Click me for a demo!</a></li>
+  <li><a href="#" onclick="$('morph_demo').morph('background:#cccccc; width:100px;'); return false;" >Reset the demo!</a></li>
+</ul>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-faq.html b/_posts/2009-01-01-faq.html new file mode 100644 index 0000000..5cc6d48 --- /dev/null +++ b/_posts/2009-01-01-faq.html @@ -0,0 +1,62 @@ +--- +layout: default +title: FAQ +--- + +
+

If you have questions, look here first! If you feel like you’re having a questions (and maybe an answer) that will interested many people, please add it here.

+

General questions

+

1.1 Where to ask for help if I can’t find an answer here?

+

First, use the search function. If that won’t help, subscribe to the Mailing List and ask there.

+

1.2 Which browsers are supported?

+

See Supported Browsers.

+

1.3 Where can I see this in action?

+

See Demos.

+

1.4 Cool. So how to get started…?

+

See Usage.

+

1.5 So can I use this in my commercial app?

+

Yes. See License.

+

1.6 How do I extend/override without modifying the library code?

+

See HowtoExtendAndOverride.

+

1.7 How much overhead does script.aculo.us add to a page?

+

The complete library is about 228KB (including Prototype). Unofficially released compressed versions are available that can bring the files size down below 100KB, try looking on the mailing lists and support groups listed on the MailingList page for sources.

+

1.8 How do I convert a color to hex string for use in the effects?

+

String#parseColor() will convert to hex string format.
+For example:

+

“rgb(1,2,3)”.parseColor() == “#010203”;
+“#123”.parseColor() == “#102030”;
+“#112233”.parseColor() == “#112233”;

+

Effects

+

2.1 On Internet Explorer, opacity-based effects don’t work!

+

Please see GivingElementsLayout. Starting with Vh2. 1.5_rc1 this issue should be automatically handled by script.aculo.us.

+

2.2 On Internet Explorer (yes, there’s a pattern here!), Effect.SlideUp/Effect.SlideDown are broken…?

+

That’s an Internet Explorer CSS bug, see Effect.SlideDown for a workaround. See http://css.nu/pointers/bugs-ie.html for more on this.

+

2.3 Some effects cause Firefox to flicker once

+

That’s a bug with the Gecko rendering engine in Firefox h2. 1.0.×. Starting with Firefox h2. 1.5b1 the flicker is gone. You can set the ‘overflow:hidden’ CSS style on the element you run the effect on as a workaround.

+

2.4 Effect.* doesn’t work when object’s display is none!

+

The problem lies with class / id definitions. use the inline property style=”display:none;” instead

+

2.4.1 Why?

+

script.aculo.us is based off of prototype.js, and calls the ‘show’ function to make an element visible. This works by setting the element’s style.display = ’’ (undef). This is intended to set it to the default, which is visible. However, if you have a style for display defined higher up in the CSS than the inline element level (which prototype is overwriting), it will look at the undefined style on your element and cascade up. Your stylesheet probably has display=’none’, so it looks like nothing is happening.

+

2.5 Effect.Appear doesn’t work from onload. Any Ideas?

+

See question 2.4.

+

2.6 Effect.* (Effect.Move, Effect.Morph) causes “this.initialize is not defined” error. Why?

+

You may ignore the “new” keyword. Use “new Effect.Move(…)” instead of “Effect.Move”.

+

Controls

+

3.1 I get weird Java Script errors, what do I do?

+

The most common cause of this is that you don’t include all script.aculo.us libraries. If you use anything from controls.js you must include effects.js, too. Otherwise, double check if you have typos regarding your id attribute names.

+

Drag and drop

+

4.1 Dragging/Dropping doesn’t work?

+

You may run in a browser limitation here if you specify CSS properties that are needed by the libraries in an external CSS file. Please try specifying properties in the inline style attribute of the affected element(s) instead.

+

4.2 Why can’t I make sortable TABLE elements?

+

Because of technical restrictions. See Sortable.create for more info on this.

+

4.3 The onUpdate callback on Sortable.create doesn’t seem to work!

+

You’re probably missing the requirements for naming the id attributes in the elements contained in your sortable element. See Sortable.serialize for more on this.

+

Also, when you call Sortable.create incorrectly, the elements may still be sortable yet the onUpdate and/or onChange events may not fire. For example, this may occur if you pass an element reference rather than an ID string as the first parameter.

+

4.4 How do I tell a Sortable that I added new elements to it?

+

Call Sortable.create again.

+

Autocompletion

+

5.1 Why does my input box show a blank result after selecting something from the autocompletion drop down list?

+

The value selected is everything not inside an element with a class=”informal”. Remove any whitespace from the result of your auto complete responder, to prevent this from being selected.

+

5.2 Nothing happens when I type something in?

+

See question h2. 3.1 for a possible solution.

+
\ No newline at end of file diff --git a/_posts/2009-01-01-form-element-delayedobserver.html b/_posts/2009-01-01-form-element-delayedobserver.html new file mode 100644 index 0000000..8ee904c --- /dev/null +++ b/_posts/2009-01-01-form-element-delayedobserver.html @@ -0,0 +1,20 @@ +--- +layout: default +title: Form.Element.DelayedObserver +--- + +
+ +

A delayed observer works like a normal observer, but the triggered callback is delayed. Every time the observed event is observed the internal timer is reset. Once the internal timer reaches the time set in the second parameter the callback is fired.

+

Syntax

+
Form.Element.DelayedObserver(element, time, callback)
+

element: the form element to observe
+time: the internal timer after which the callback is fired (in seconds)
+callback: the callback function.

+

Example code

+

+new Form.Element.DelayedObserver($('inputbox'), 0.5, function(){
+     //do your stuff here, like an ajax request
+});
+
+
\ No newline at end of file diff --git a/_posts/2009-01-01-ghostly-sortable-demo.html b/_posts/2009-01-01-ghostly-sortable-demo.html new file mode 100644 index 0000000..2823683 --- /dev/null +++ b/_posts/2009-01-01-ghostly-sortable-demo.html @@ -0,0 +1,9 @@ +--- +layout: default +title: Ghostly Sortable Demo +--- + +
+

This page needs to be deleted, sorry for the inconvenience.

+

Do not create a wiki page if you do not know what you are doing.

+
\ No newline at end of file diff --git a/_posts/2009-01-01-ghostly.html b/_posts/2009-01-01-ghostly.html new file mode 100644 index 0000000..99ef5f2 --- /dev/null +++ b/_posts/2009-01-01-ghostly.html @@ -0,0 +1,8 @@ +--- +layout: default +title: Ghostly +--- + +
+

not working..

+
\ No newline at end of file diff --git a/_posts/2009-01-01-giving-elements-layout.html b/_posts/2009-01-01-giving-elements-layout.html new file mode 100644 index 0000000..9acafb4 --- /dev/null +++ b/_posts/2009-01-01-giving-elements-layout.html @@ -0,0 +1,9 @@ +--- +layout: default +title: Giving Elements Layout +--- + +
+

This page needs to be deleted, sorry for the inconvenience.

+

Do not create a wiki page if you do not know what you are doing.

+
\ No newline at end of file diff --git a/_posts/2009-01-01-hello.html b/_posts/2009-01-01-hello.html new file mode 100644 index 0000000..aae188b --- /dev/null +++ b/_posts/2009-01-01-hello.html @@ -0,0 +1,9 @@ +--- +layout: default +title: Hello +--- + +
+

This is a test!
+How are you today?

+
\ No newline at end of file diff --git a/_posts/2009-01-01-in-place-editing.html b/_posts/2009-01-01-in-place-editing.html new file mode 100644 index 0000000..6f8ed2a --- /dev/null +++ b/_posts/2009-01-01-in-place-editing.html @@ -0,0 +1,9 @@ +--- +layout: default +title: In Place Editing +--- + +
+

?Shahzad
+web designer planetcomnet

+
\ No newline at end of file diff --git a/_posts/2009-01-01-in-place-editor.html b/_posts/2009-01-01-in-place-editor.html new file mode 100644 index 0000000..e0aee60 --- /dev/null +++ b/_posts/2009-01-01-in-place-editor.html @@ -0,0 +1,12 @@ +--- +layout: default +title: In Place Editor +--- + +
+ +

Controls > In Place Editor

+

Introduction

+

The in-place “text edit” testing allows for Flickr-style AJAX-backed “on-the-fly” textfields.

+

See the documentation on Ajax.InPlaceEditor and Ajax.InPlaceCollectionEditor

+
\ No newline at end of file diff --git a/_posts/2009-01-01-license.html b/_posts/2009-01-01-license.html new file mode 100644 index 0000000..ccecea1 --- /dev/null +++ b/_posts/2009-01-01-license.html @@ -0,0 +1,24 @@ +--- +layout: default +title: License +--- + +
+

Copyright © 2005-2008 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)

+

Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+“Software”), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:

+

The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.

+

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

+
\ No newline at end of file diff --git a/_posts/2009-01-01-list-morph-demo.html b/_posts/2009-01-01-list-morph-demo.html new file mode 100644 index 0000000..2a4275b --- /dev/null +++ b/_posts/2009-01-01-list-morph-demo.html @@ -0,0 +1,63 @@ +--- +layout: default +title: List Morph Demo +--- + +
+ +

Demos > List Morph Demo

+

This is a demonstration of how Effect.Morph can be used to indicate a list reordering to the user. Click anywhere on the list to initiate a random reorder.

+ +
+
Lorem
+
ipsum
+
dolor
+
sit
+
amet
+
+ +

Source code of this demo

+

+Array.prototype.shuffle = function() {
+  return this.sortBy(Math.random);
+};
+
+(function() {
+  function foo() {
+    $('scripty_morph_demo').select('div').shuffle().each(function(e, i) {
+      e.morph('top:' + i*e.getHeight() + 'px', { duration: 0.4 }); 
+    });
+  }
+  $('scripty_morph_demo').observe('click', foo);
+  foo();
+})();
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-porting.html b/_posts/2009-01-01-porting.html new file mode 100644 index 0000000..1766311 --- /dev/null +++ b/_posts/2009-01-01-porting.html @@ -0,0 +1,36 @@ +--- +layout: default +title: porting +--- + +
+ +

Porting old wiki docs to GitHub wiki

+

If you have TextMate (or don’t mind some Ruby hacking), the following script will help transfer the exported HTML docs to textile format.

+ +

+#!/usr/bin/env ruby
+require 'rubygems'
+require 'clothred'
+
+text = ClothRed.new(STDIN.read)
+text = text.to_textile
+
+text.sub!(/^.*?<\body.*?>\s*/im, '').sub!(/\s*<\/body>.*?$/im,'')
+text.gsub!(/^\s*p\.\s/, "\n")
+text.gsub!(/<\pre>@/,'<\pre><\code class="javascript">')
+text.gsub!(/@<\/pre>/,"<\/code><\/pre>")
+text.gsub!(/(\n\s*){2}(\n\s*)+/m,"\n\n")
+text.gsub!(/(.*?)<\/a>/) {|s|
+  $1 == $2 ? "["+"[#{$1}]]" : "["+"[#{$1}|#{$2}]]"
+}
+
+print text
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-puzzle-demo.html b/_posts/2009-01-01-puzzle-demo.html new file mode 100644 index 0000000..d2d52d8 --- /dev/null +++ b/_posts/2009-01-01-puzzle-demo.html @@ -0,0 +1,60 @@ +--- +layout: default +title: Puzzle Demo +--- + +
+ +

Demos > Puzzle Demo

+

This is an example showing how to implement a simple puzzle game with Sortables.

+

/* I don`t know, but this rule hasn`t apliied */
+#puzzle { width:450px; }
+.congrats { color: #fff; background: #080 }

+ +
+ + + + + + + + + +
+

+(no move made yet) +

+

Source code

+

+(function() { 
+  var p = $('puzzle'), info = $('puzzleinfo'), moves = 0;
+  
+  Sortable.create('puzzle', {
+    tag: 'img', overlap: 'horizontal', constraint: false,
+    onUpdate: function() {
+      info.update('You\'ve made ' + (++moves) + ' move' + (moves > 1 ? 's' : ''));
+      if (Sortable.sequence('puzzle').join('') == '123456789')
+         info.update('You\'ve solved the puzzle in ' + moves + ' moves!').morph('congrats');
+    }
+  });
+})();
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-ruby-on-rails.html b/_posts/2009-01-01-ruby-on-rails.html new file mode 100644 index 0000000..660ad5b --- /dev/null +++ b/_posts/2009-01-01-ruby-on-rails.html @@ -0,0 +1,22 @@ +--- +layout: default +title: Ruby on Rails +--- + +
+

Ruby On Rails features complete Prototype, and script.aculo.us integration.

+

Demo site and example code

+

Visit the Rails/script.aculo.us demo site for live demos and example code.

+

Usage

+

First, you need to include the libraries in your app, which is easy, as Prototype and script.aculo.us come prepackaged with Rails.

+

In your layout or view add this to the <head> section of your layout:

+

+<%= javascript_include_tag :defaults %>
+
+

You can now use the Rails JavaScript helpers or use do-it-yourself <script> tags and inline events as documented in this Wiki.

+

As of Rails 2.0, for certain functionality, like autocompleting text fields and in place editing, you’ll need to install the correspoding plugins.

+

Related Articles

+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-shahzad.html b/_posts/2009-01-01-shahzad.html new file mode 100644 index 0000000..4974816 --- /dev/null +++ b/_posts/2009-01-01-shahzad.html @@ -0,0 +1,7 @@ +--- +layout: default +title: Shahzad +--- + +
+
\ No newline at end of file diff --git a/_posts/2009-01-01-slider.html b/_posts/2009-01-01-slider.html new file mode 100644 index 0000000..043dffd --- /dev/null +++ b/_posts/2009-01-01-slider.html @@ -0,0 +1,312 @@ +--- +layout: default +title: Slider +--- + +
+ +

Controls > Slider

+

Introduction

+

A slider control which can be used to select a single or multiple values from a given range, or even set of values.

+

Syntax

+

To make a slider element, you create a new instance of class Control.Slider.

+

+new Control.Slider('handles','track', [options]);
+
+

handles can either be a single id (or element) or, if you want more than one handle, an array of ids (or elements). track is either id or element.

+

Options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Option Since Default Description
axisV1.5 horizontal Sets the direction that the slider will move in. It should either be horizontal or vertical.
increment V1.5 1 Defines the relationship of value to pixels. Setting this to 1 will mean each movement of 1 pixel equates to 1 value.
maximum V1.5 (none) Length of track in pixels adjusted by increment. The maximum value that the slider will move to. For horizontal this is to the right while vertical it is down.
minimum V1.5 0 The minimum value that the slider can move to. For horizontal this is to the left while vertical it is up. Note: this also sets the beginning of the slider (zeroes it out).
range 0 (none) Use the $R(min,max)
alignX V1.5 0 This will move the starting point on the x-axis for the handle in relation to the track. It is often used to move the ‘point’ of the handle to where 0 should be. It can also be used to set a different starting point on the track.
alignY V1.5 0 This will move the starting point on the y-axis for the handle in relation to the track. It is often used to move the ‘point’ of the handle to where 0 should be. It can also be used to set a different starting point on the track.
sliderValue V1.5 0 Will set the initial slider value. The handle will be set to this value, assuming it is within the minimum and maxium values.
disabled V1.5 (none) This will lock the slider so that it will not move and thus is disabled.
handleImage V1.5 (none) The id of the image that represents the handle. This is used to swap out the image src with disabled image src when the slider is enabled.
handleDisabled V1.5 (none) The id of the image that represents the disabled handle. This is used to change the image src when the slider is disabled.
values V1.5 (none) Accepts an array of integers. If set these will be the only legal values for the slider to be at. Thus you can set specific slider values that the user can move the slider to.
spans ?? (none) An array of ids or elements which are positioned between handles. This is used only when slider has more than one handle.
restricted ?? false Used only for multiple handles, when restricted is true, handle(s) with greater indexes are not allowed to have values less than handles with smaller indexes. When restricted is false, handles can be moved independently from others.
+

The slider control offers some functions to let javascript update its state:

+ + + + + + + + + + + + + + + + + + + + + +
Function Parameters Description
setValue value, handleIndex Will update the slider’s value and thus move the slider handle to the appropriate position. handleIndex is optional, when it is not passed then ‘active’ (last-dragged/used) handle is used. NOTE: when using setValue, the onChange callback function is called.
setDisabled (none) Will set the slider to the disabled state (disabled = true).
setEnabled (none) Will set the slider to the enabled state (disabled = false).
+

Additionally, the options parameter can take the following callback function:

+ + + + + + + + + + + + + +
Callback Description
onSlide Called whenever the Slider is moved by dragging. The called function gets the slider value (or array if slider has multiple handles) as its parameter.
onChange Called whenever the Slider has finished moving or has had its value changed via the setSlider Value function. The called function gets the slider value (or array if slider has multiple handles) as its parameter.
+

With both of the above, using multiple handles causes an array of their respective values to be passed to the callback. Both receive the Slider object as a second paramater.

+

Examples

+

Single handle

+

+// from the author's first demo of a vertical slider.  It begins disabled.
+var s2 = new Control.Slider('slider_2', 'track_2', {
+  axis:'vertical',
+  minimum: 60,
+  maximum: 288,
+  alignX: -28,
+  alignY: -5,
+  disabled: true, 
+  handleImage: 'slider_2handle',
+  handleDisabled: 'images/vsliderhandle_gray.gif'
+});
+
+// example of a horizontal slider that allows only 4 possible values
+var sliderLimited = new Control.Slider('slider_Limited', 'track_Limited', {
+  minimum: 2,
+  maximum: 30,
+  increment: 9,
+  alignX: -5,
+  alignY: -5,
+  values: [2, 10, 15, 30]
+});
+
+// Setting the callbacks later on
+s2.options.onChange = function(value) {
+  // ...
+  $('height_value').update(value);
+};
+
+s2.options.onSlide = function(value) {
+  // ...
+  $('height_value').update(value);
+};
+
+

Multiple handles

+

+<div id="square_slider" class="slider">
+  <div id="square_slider_handle_min" class="handle left"></div>
+  <div id="square_slider_handle_max" class="handle right"></div>
+
+  <div id="square_slider_span" class="span"></div>
+</div>
+
+

+var handles = ['square_slider_handle_min', 'square_slider_handle_max'];
+var square_slider = new Control.Slider(handles, 'square_slider', {
+    range: $R(0, 100),
+    values: $R(0, 100),
+    sliderValue: [20, 80],
+    spans: ["square_slider_span"],
+    restricted: true
+});
+
+

Demo

+ +
+

Use the slider to resize the box

+
+
+
+

And this to change its color

+
+
+
+
+
+
+
+ +

Source Code of the Demo

+

+
+<style type="text/css">
+  div.slider { width:256px; margin:10px 0; background-color:#ccc; height:10px; position: relative; }
+  div.slider div.handle { width:10px; height:15px; background-color:#f00; cursor:move; position: absolute; }
+
+  div#zoom_element { width:50px; height:50px; background:#2d86bd; position:relative; }
+</style>
+
+<div class="demo">
+  <p>Use the slider to resize the box</p>
+  <div id="zoom_slider" class="slider">
+    <div class="handle"></div>
+  </div>
+
+  <p>And this to change its color</p>
+  <div id="rgb_slider" class="slider">
+    <div class="handle" style="background-color: #f00;"></div>
+    <div class="handle" style="background-color: #0f0;"></div>
+    <div class="handle" style="background-color: #00f;"></div>
+  </div>
+
+  <div id="zoom_element"></div>
+</div>
+
+<script type="text/javascript">
+  (function() {
+    var zoom_slider = $('zoom_slider'),
+        rgb_slider = $('rgb_slider'),
+        box = $('zoom_element');
+
+    new Control.Slider(zoom_slider.down('.handle'), zoom_slider, {
+      range: $R(40, 160),
+      sliderValue: 50,
+      onSlide: function(value) {
+        box.setStyle({ width: value + 'px', height: value + 'px' });
+      },
+      onChange: function(value) { 
+        box.setStyle({ width: value + 'px', height: value + 'px' });
+      }
+    });
+
+    new Control.Slider(rgb_slider.select('.handle'), rgb_slider, {
+      range: $R(0, 255),
+      sliderValue: [45, 134, 189],
+      onSlide: function(values) {
+        box.setStyle({ backgroundColor: "rgb("+ values.map(Math.round).join(',') +")" });
+      },
+      onChange: function(values) { 
+        box.setStyle({ backgroundColor: "rgb("+ values.map(Math.round).join(',') +")" });
+      }
+    });
+  })();
+</script>
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-smdc.html b/_posts/2009-01-01-smdc.html new file mode 100644 index 0000000..a3e4e53 --- /dev/null +++ b/_posts/2009-01-01-smdc.html @@ -0,0 +1,7 @@ +--- +layout: default +title: smdc +--- + +
+
\ No newline at end of file diff --git a/_posts/2009-01-01-sortable-create.html b/_posts/2009-01-01-sortable-create.html new file mode 100644 index 0000000..f0908e0 --- /dev/null +++ b/_posts/2009-01-01-sortable-create.html @@ -0,0 +1,158 @@ +--- +layout: default +title: Sortable.create +--- + +
+ +

Behaviours > Sortable > create

+

Use Sortable.create to initialize a sortable element.

+

Syntax

+

Use Sortable.create('id_of_container',[options]); to create new Sortables.

+

Options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OptionSinceDescription
tagv1.0Default: ‘li’
+The kind of tag (of the child elements of the container) that will be made sortable. For UL and OL containers, this is ‘LI’, you have to provide the tag kind for other sorts of child tags.
onlyv1.0Default: (none)
+Further restricts the selection of child elements to only encompass elements with the given CSS class (or, if you provide an array of strings, on any of the classes).
overlapv1.0Default: ‘vertical’
+Either ‘vertical’ or ‘horizontal’. For floating sortables or horizontal lists, choose ‘horizontal’. Vertical lists should use ‘vertical’.
constraintv1.0Default: ‘vertical’
+Restricts the movement of Draggables, see the constraint option of Draggables.
containmentv1.0Default: (only within container)
+Enables dragging and dropping between Sortables. Takes an array of elements or element-ids (of the containers). Important note: To ensure that two way dragging between containers is possible, place all Sortable.create calls after the container elements.
formatv?Default: 
/^[^_\-](?:[A-Za-z0-9\-\_]*)[_](.*)$/

The format that the id is computed from each item-id
handlev1.0Default: (none)
+Makes the created Draggables use handles, see the handle option on Draggables.
hoverclassv1.1b1Default: (none)
+Gives the created Droppables a hoverclass (see there).
ghostingv1.5Default: false
+If set to true, dragged elements of the Sortable will be cloned and appear as “ghost”, i.e. a representation of their original element, instead of directly dragging the original element. See below for more details.
dropOnEmptyv1.5Default: false
+If set to true, the Sortable container will be made into a Droppable, that can receive a Draggable (as according to the containment rules) as a child element when there are no more elements inside.
scrollv1.5.2Default: none
+When the sortable is contained in an element with style overflow:scroll, this value can be set to the ID of that container (or the container’s DOM object). The scroll position of the container will now move along when the sortable is dragged out of the viewable area. The container must have overflow:scroll set to include scroll bars. Does not yet work for scrolling the entire document. To get this to work correctly, include this line in your code before creating the sortable: Position.includeScrollOffsets = true; Update: Scrolling the whole document does work (at least on Safari 3.2 (Mac), IE7 and Firefox). Use scroll: window
scrollSensitivityv?Default: 20
+Will start scrolling when element is x pixels from the bottom, where x is the scrollSensitivity.
scrollSpeedv?Default: 15
+Will scroll the element in increments of scrollSpeed pixels.
treev1.6.1Default: false
+If true, sets sortable functionality to elements listed in treeTag
treeTagv1.6.1Default: ul
+The element type tree nodes are contained in.
+

Callbacks

+ + + + + + + + + + + + + + + + +
CallbackSinceDescription
onChangev1.0Called whenever the sort order changes while dragging. When dragging from one Sortable to another, the callback is called once on each Sortable. Gets the affected element as its parameter.
onUpdatev1.0Called when the drag ends and the Sortable’s order is changed in any way. When dragging from one Sortable to another, the callback is called once on each Sortable. Gets the container as its parameter. Note that the id attributes of the elements contained in the Sortable must be named as described in Sortable.serialize
+

On FF3.+ for onUpdate to work each child element in container must have id with format “string_identifier”, otherwise onUpdate will fail to init and wont run. Although you can have different format rule set using format option.

+

Update: This issue occurs in onHover as well (using 1.6 RC3, tried only on FF3). Unique ids are essential for both the container ul as well as the lis it contains. Otherwise Sortable.options(dropon) in onHover barfs with a null pointer.

+

Example that will work with default settings:
+


+<ul id="elements">
+    <li id="element_1">some kind of text</li>
+    <li id="element_2">some kind of text</li>
+    <li id="element_3">some kind of text</li>

+ +



+Example that will NOT work with default settings:
+


+<ul id="elements">
+    <li id="element1">some kind of text</li>
+    <li id="element2">some kind of text</li>
+    <li id="element3">some kind of text</li>

+ +

+

Notes

+

Important: You can use Sortable.create on any container element that contains Block Elements, with the exception of TABLE, THEAD, TBODY and TR. This is a technical restriction with current browsers.
+A sortable nested somewhere inside a table won’t work well under IE unless the table has a “position:relative” style. If you use the css display: table property, sortable lists will work a little, but doesn’t allow true drag and drop of the elements.

+

If you want your sortable list to be scrollable, wrap the list in a div and set the div to scrollable as opposed to making the ul element scrollable. Also, in IE you must set “position:relative” on the scrollable div.

+

Got it working using tbody as container and TR as the sortables (IE6 (pc) and Firefox (mac/pc).

+

A call to Sortable.create implicitly calls on Sortable.destroy if the referenced element was already a Sortable.

+

Patches

+

Marking the Drop Zone : Having a marker in the empty place where you will drop
+(for versions: 1.6.x, 1.7.0, 1.8.0 and 1.8.1)

+

Have a look at this page for the patch and how to modify scriptaculous to have a drop zone marker.

+

Tankut Koray

+
\ No newline at end of file diff --git a/_posts/2009-01-01-sortable-lists-demo.html b/_posts/2009-01-01-sortable-lists-demo.html new file mode 100644 index 0000000..be85cd0 --- /dev/null +++ b/_posts/2009-01-01-sortable-lists-demo.html @@ -0,0 +1,37 @@ +--- +layout: default +title: Sortable Lists Demo +--- + +
+ +

Basic unordered list, drag any list item to reorder

+ +
Sortable.create("list");
+

Unordered list with draggable handles, drag the link to reorder

+ +
Sortable.create("list-2", {handles:$$('#list-2 a')});
+

A collection of paragraphs that are reorderable with draggable handles, drag the link to reorder

+
+

This is a reorderable paragraph. move

+

This is another reorderable paragraph. move

+

This is yet another reorderable paragraph. move

+

And can you believe it? Another reorderable paragraph. move

+
+
Sortable.create("list-3", {elements:$$('#list-3 p'), handles:$$('#list-3 a')});
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-sortable-sequence.html b/_posts/2009-01-01-sortable-sequence.html new file mode 100644 index 0000000..742370b --- /dev/null +++ b/_posts/2009-01-01-sortable-sequence.html @@ -0,0 +1,33 @@ +--- +layout: default +title: Sortable.sequence +--- + +
+ +

Behaviours > Sortable > sequence

+

The Sortable object also provides a function to get a sequence array of the id’s.

+

Syntax

+

+id_array = Sortable.sequence('id_of_container');
+
+

Example

+

Taken from the Puzzle Demo

+

+(function() { 
+  var p = $('puzzle'), info = $('puzzleinfo'), moves = 0;
+
+  Sortable.create('puzzle', {
+    tag: 'img', overlap: 'horizontal', constraint: false,
+    onUpdate: function() {
+      info.update('You\'ve made ' + (++moves) + ' move' + (moves > 1 ? 's' : ''));
+      if (Sortable.sequence('puzzle').join('') == '123456789')
+         info.update('You\'ve solved the puzzle in ' + moves + ' moves!').morph('congrats');
+    }
+  });
+})();
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-sortable-serialize.html b/_posts/2009-01-01-sortable-serialize.html new file mode 100644 index 0000000..d29a3ff --- /dev/null +++ b/_posts/2009-01-01-sortable-serialize.html @@ -0,0 +1,90 @@ +--- +layout: default +title: Sortable.serialize +--- + +
+

Behaviours > Sortable > serialize

+

The Sortable object also provides a function to serialize the Sortable in a format suitable for HTTP GET or POST requests. This can be used to submit the order of the Sortable via an Ajax call:

+

+poststring = Sortable.serialize('id_of_container',[options]);
+// poststring now contains key[]=value pairs separated by &
+
+

Important: For this to work, the elements contained in your Sortable must have id attributes in the following form:

+

+id="string_identifier" 
+
+//Example
+<ol id="container_id">
+  <li id="image_1">Item 1</li>
+  <li id="image_2">Item 1</li>
+  <li id="image_3">Item 1</li>
+</ol>
+
+

Only the identifier part of the id attribute will be serialized. If you want to use an other form of id attributes, you need to implement your own serialization.

+

Options

+ + + + + + + + + + + + + + + + +
OptionSinceDescription
tagv1.0The kind of tag (of the child elements of the container) that will be serialized.
namev1.0The name of the key that will be used to create the key/value pairs for serializing in HTTP GET/POST format (that is, key[]=value&key[]=value …)
+

Example (from the Sortable Ghosted example)

+

+<style>
+  #content #testlist { 
+      list-style-type:none;
+      margin:0;
+      padding:0;
+   }
+   #content #testlist li {
+     width:200px;
+     font:13px Verdana;
+     margin:0;
+     margin-left:20px;
+     padding-left:20px;
+     padding:4px;
+     cursor:move;
+   }
+  div.dropmarker {
+      height:6px;
+      width:200px;
+      background: url(/images/dropmarker.png) left top;
+      margin-top:-3px;
+      margin-left:-5px;
+      z-index:1000;
+      overflow: hidden;
+   }
+</style>
+
+<ol id="testlist">
+  <li id="image_1">Lorem ipsum dolor</li>
+  <li id="image_2">sit amet</li>
+  <li id="image_3">consectetur adipisicing</li>
+  <li id="image_4">elit</li>
+  <li id="image_5">sed do eiusmod</li>
+  <li id="image_7">ut labore et dolore</li>
+  <li id="image_6">tempor incididunt</li>
+  <li id="image_8">magna aliqua</li>
+</ol>
+
+<script type="text/javascript" language="javascript">
+  Sortable.create('testlist',{ghosting:true,constraint:false})
+  alert(Sortable.serialize('testlist'));
+</script>
+
+

Clarification: In this example, the output of the serialization will only give the numbers after the underscore in the list item IDs.

+

Tutorials

+

A short tutorial on using Sortables.serialize

+
\ No newline at end of file diff --git a/_posts/2009-01-01-sortable.html b/_posts/2009-01-01-sortable.html new file mode 100644 index 0000000..0398274 --- /dev/null +++ b/_posts/2009-01-01-sortable.html @@ -0,0 +1,101 @@ +--- +layout: default +title: Sortable +--- + +
+

Behaviours > Sortable

+

A Sortable is a quick way to initialize many Draggable elements in a container element. When you create a new Sortable, it takes care of the creation of the corresponding draggable Droppables.

+

Syntax

+

Use Sortable.create('id_of_container',[options]); to create new Sortables. See Sortable.create. Furthermore, there are special requirements to get sortables to work in FF3 which are also covered in Sortable.create.

+

Object

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Property/Method Description
SERIALIZE_RULE
(RegExp) /^[^_\-](?:[A-Za-z0-9\-\_]*)[_](.*)$/
sortables(Object) { }
options (element)Internal function
destroy (element)Destroys sortable
create (element, options)Creates sortable
findElements (element, options)Internal function
onHover (element, dropon, overlap)Internal function, which may be overridden through the options parameter on creation
onEmptyHover (element, dropon, overlap) Internal function
unmark()Internal function
mark()Internal function
tree (element)
sequence (element)
setSequence (element, new_sequence)
serialize (element)
+

Demos

+

See Sortable Lists Demo.

+

Creating sortables

+

See Sortable.create.

+

Disabling sortables

+

+  Sortable.destroy( element );
+
+

A call to Sortable.create implicitly calls Sortable.destroy if the referenced element was already a Sortable.

+

Functions

+ + + + + + + + + + + + + +
FunctionDescription
Sortable.serializeThe Sortable object also provides a function to serialize the Sortable in a format suitable for HTTP GET or POST requests. This can be used to submit the order of the Sortable via an Ajax call. See Sortable.serialize
Sortable.sequenceThe Sortable object also provides a function to get the values in an sequence array object. See Sortable.sequence
+

Tutorials

+

Use PHP and Ajax call to interact with Sortable

+

A short tutorial on using Sortables prepared for the Linux Users Group, Villafranca, Italy.

+
\ No newline at end of file diff --git a/_posts/2009-01-01-sortables-create.html b/_posts/2009-01-01-sortables-create.html new file mode 100644 index 0000000..5b0dc2c --- /dev/null +++ b/_posts/2009-01-01-sortables-create.html @@ -0,0 +1,8 @@ +--- +layout: default +title: Sortables.create +--- + +
+

see Sortable.create

+
\ No newline at end of file diff --git a/_posts/2009-01-01-sortables.html b/_posts/2009-01-01-sortables.html new file mode 100644 index 0000000..4523fe0 --- /dev/null +++ b/_posts/2009-01-01-sortables.html @@ -0,0 +1,136 @@ +--- +layout: default +title: Sortables +--- + +
+ +

Behaviours > Sortable

+

A Sortable consists of item elements in a container element. When you create a new Sortable, it takes care of the creation of the corresponding Draggables and Droppables.

+

Creating Sortables

+

Syntax

+

+Sortable.create('id_of_container',[options]);
+
+

Options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Option Description
tag string, represents a tagname, defaults to 'li', sets the kind of tag (of the child elements of the container) that will be made sortable. For UL and OL containers, this is ‘li’, you have to provide the tag kind for other sorts of child tags.
only Further restricts the selection of child elements to only encompass elements with the given CSS class (or, if you provide an array of strings, on any of the classes).
overlap string, defaults to 'vertical', can also be ‘horizontal’. For floating sortables or horizontal lists, choose ‘horizontal’. Vertical lists should use ‘vertical’.
constraint string, defaults to 'vertical', restricts the movement of Draggables, see the constraint option of Draggable.
containment Enables dragging and dropping between Sortables. Takes an array of elements or element-ids (of the containers). Important note: To ensure that two way dragging between containers is possible, place all Sortable.create calls after the container elements.
handle Makes the created Draggables use handles, see the handle option on Draggable.
hoverclass Gives the created Droppables a hoverclass (see Droppables).
ghosting boolean, defaults to false, if set to true, dragged elements of the Sortable will be cloned and appear as “ghost”, i.e. a representation of their original element, instead of directly dragging the original element.
dropOnEmpty boolean, defaults to false, if set to true, the Sortable container will be made into a Droppable, that can receive a Draggable (as according to the containment rules) as a child element when there are no more elements inside.
scroll When the sortable is contained in an element with style overflow:scroll, this value can be set to the ID of that container (or the container’s DOM object). The scroll position of the container will now move along when the sortable is dragged out of the viewable area. The container must have overflow:scroll set to include scroll bars.
scrollSensitivity Will start scrolling when element is x pixels from the bottom, where x is the scrollSensitivity.
scrollSpeed Will scroll the element in increments of scrollSpeed pixels.
tree boolean, defaults to false, if true, sets sortable functionality to elements listed in treeTag
treeTag string, defaults to 'ul', the element type tree nodes are contained in.
+

Callbacks

+ + + + + + + + + + + + + +
Callback Description
onChange Called whenever the sort order changes while dragging. When dragging from one Sortable to another, the callback is called once on each Sortable. Gets the affected element as its parameter.
onUpdate Called when the drag ends and the Sortable’s order is changed in any way. When dragging from one Sortable to another, the callback is called once on each Sortable. Gets the container as its parameter. Note that the id attributes of the elements contained in the Sortable must be named as described in Sortable.serialize
+

Notes

+

You can use Sortable.create on any container element that contains Block Elements, with the exception of TABLE, THEAD, TBODY and TR. This is a technical restriction with current browsers.
+A sortable nested somewhere inside a table won’t work well under IE unless the table has a position:relative style. If you use the CSS display: table property, sortable lists will work a little, but doesn’t allow true drag and drop of the elements.

+

If you want your sortable list to be scrollable, wrap the list in a div and set the div to scrollable as apposed to making the ul element scrollable. Also, in IE you must set position:relative on the scrollable div.

+

Serializing Sortables

+

The Sortable object also provides a function to serialize the Sortable in a format suitable for HTTP GET or POST requests. This can be used to submit the order of the Sortable via an Ajax call.

+

Syntax

+

+var poststring = Sortable.serialize('id_of_container',[options]);
+// poststring now contains key[]=value pairs separated by &
+
+

Important: For this to work, the elements contained in your Sortable must have id attributes in the following form:
+


+id="string_identifier" 
+// example: id="image_1"
+

+

Only the identifier part of the id attribute will be serialized. If you want to use an other form of id attributes, you need to implement your own serialization.

+

Options

+ + + + + + + + + + + + + +
Option Description
tag string, defaults to the tag originally used when calling Sortable.create, Sets the kind of tag (of the child elements of the container) that will be serialized.
name string, defaults to id of the container, sets the name of the key that will be used to create the key/value pairs for serializing in HTTP GET/POST format (that is, key[]=value&key[]=value …)
+

Disabling Sortables

+

Use Sortable.destroy to completely remove all event handlers and references to a Sortable created by Sortable.create. It does not remove or alter the referenced element in any other way.

+

Syntax

+

+Sortable.destroy(element);
+
+

Notes

+

A call to Sortable.create implicitly calls on Sortable.destroy if the referenced element was already a Sortable.

+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-sound.html b/_posts/2009-01-01-sound.html new file mode 100644 index 0000000..4be91a5 --- /dev/null +++ b/_posts/2009-01-01-sound.html @@ -0,0 +1,121 @@ +--- +layout: default +title: Sound +--- + +
+ +

Introduction

+

Use Sound to play audio directly from the browser.

+

Syntax

+
Sound.play( url, [ options ])
+Sound.enable() 
+Sound.disable()
+
+

Play Options

+ + + + + + + + + +
Option Description
replace replace the current active track, defauts to false
+

Notes

+ +

Demo

+
+ URL: +
+ Sound: On + +
+ +

Source code of the demo

+

+<div>
+    URL: <input type = "text" id = "sound_demo_track_url" style = "width:400px;" 
+    value = "http://www.joshwoodward.com/mp3/TheSimpleLife/JoshWoodward-TheSimpleLife-101-HeritagePlace.mp3"/>
+    <br/>
+    Sound: <span id = "sound_status">On</span>
+    <ul class = "sound_controls">
+      <li><a href="javascript:void(0)" id="sound_demo_play">Play</a></li>
+      <li><a href="javascript:void(0)" id="sound_demo_disable">Disable sound</a></li>
+      <li><a href="javascript:void(0)" id="sound_demo_disable_now">Disable now</a></li>
+      <li><a href="javascript:void(0)" id="sound_demo_enable">Enable sound</a></li>
+    </ul>
+</div>
+
+

+
+<script type="text/javascript">
+  $('sound_demo_play').observe('click', function(event) {
+       event.stop();
+       Sound.play($('sound_demo_track_url').value,{replace:true});
+   });
+  
+  $('sound_demo_enable').observe('click', function(event) {
+       event.stop();
+       Sound.enable();
+     $('sound_status').innerHTML = 'On';
+   });
+
+  $('sound_demo_disable').observe('click', function(event) {
+       event.stop();
+       Sound.disable();
+     $('sound_status').innerHTML = 'Pending Off';
+   });
+
+  $('sound_demo_disable_now').observe('click', function(event) {
+       event.stop();
+       Sound.enable();
+       Sound.play('',{replace:true});
+       Sound.disable();
+     $('sound_status').innerHTML = 'Off';
+   });
+
+</script>
+
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-style-guide.html b/_posts/2009-01-01-style-guide.html new file mode 100644 index 0000000..fc2d37b --- /dev/null +++ b/_posts/2009-01-01-style-guide.html @@ -0,0 +1,80 @@ +--- +layout: default +title: Style Guide +--- + +
+ +

When porting documents from the old wiki over to the new one or if you’re generally writing new content for the script.aculo.us wiki,
+this style guide might be helpful for structuring your document.

+

Document includes

+

Syntax Highlighting

+

In order to make syntax highlighting work for documents which contain code examples, be sure to put this line to the very beginning of your document:
+


+<link rel="stylesheet" title="Sunburst" href="http://script.aculo.us/github/styles/sunburst.css"/>
+

+

and the following code-block to the very end of the document:
+


+<script type="text/javascript" src="http://script.aculo.us/github/highlight.js"></script>
+<script type="text/javascript">
+  hljs.initHighlightingOnLoad.apply(null, hljs.ALL_LANGUAGES);
+</script>
+

+

Javascript Includes

+

In documents where you show demos of script.aculo.us’ features, include the following code at the beginning of
+your document:
+


+<script type="text/javascript" src="http://script.aculo.us/prototype.js"></script>
+<script type="text/javascript" src="http://script.aculo.us/scriptaculous.js"></script>
+

+

Mind that these files are the latest versions from the master branch, and may contain bugfixes that make them work slightly different from the latest official release.

+

Document Structure

+

Documents which show the usage of an effect, a control or other related topics should be structured as following:

+ +

Including a Path

+

When a document belongs to a specific category, include a path in the beginning of your document.
+An example:
+Effect.Morph belongs to the Core Effects category. The path for the Effect.Morph document will look like:

+

Core Effects > Effect.Morph

+

The textile snippet for the above example looks like this:
+


+p{background:#eee; border-bottom:1px solid #bbb; padding:4px 2px 2px 2px;}. [[Core Effects]] > *Effect.Morph*
+
+

+

Document Linking

+

The syntax for linking to other documents looks like:
+


+[[Title of another document]]
+

+

Be sure to not use the camelcased style (CoreEffects) as often seen in other wikis, but instead the real, space-seperated title of the document you want to link to (Core Effects).

+

Here an example on how to link from your document to other documents of the wiki:
+


+[[Core Effects]] => links to the document with the title "Core Effects"
+[[Combination Effects]] => links to the document with the title "Combination Effects"
+

+

Code Examples

+

When giving examples, wrap your example code into code tag with the programming language the example is written in as its class-attribute which is again wrapped in a pre-tag. An example of this would look like this:

+

+<pre><code class="javascript">
+  Example code here
+  …
+
+

+

Demos

+

1. Include all the necessary JS files as described in Javascript Includes in your document.

+

2. Wrap all your demo code in a notextile-tag.

+

3. Wrap all your HTML demo code into a div[class="demo"].

+

4. In order to prevent an overriding of Githubs own Javascript code, be sure to add a prefix (e.g. scriptyGetValue()) when defining custom functions for your demo.

+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-tabs.html b/_posts/2009-01-01-tabs.html new file mode 100644 index 0000000..4dd8587 --- /dev/null +++ b/_posts/2009-01-01-tabs.html @@ -0,0 +1,248 @@ +--- +layout: default +title: Tabs +--- + +
+ +

Updated incorrect tags entry. Here is the right example to set multiple tabs and to make a tab active.

+

About

+

This script will allow you to create interactive tabs for use in an application.

+

The CSS and HTML:

+

+<style>
+    #tabs{
+        margin-left: 4px;
+        padding: 0;
+        background: transparent;
+        voice-family: "\"}\"";
+        voice-family: inherit;
+        padding-left: 5px;
+    }
+    #tabs ul{
+        font: bold 11px Arial, Verdana, sans-serif;
+        margin:0;
+        padding:0;
+        list-style:none;
+    }
+    #tabs li{
+        display:inline;
+        margin:0 2px 0 0;
+        padding:0;
+        text-transform:uppercase;
+    }
+    #tabs a{
+        float:left;
+        background:#A3BBE6 url(images/tabs_left.gif) no-repeat left top;
+        margin:0 2px 0 0;
+        padding:0 0 1px 3px;
+        text-decoration:none;
+    }
+    #tabs a span{
+        float:left;
+        display:block;
+        background: transparent url(images/tabs_right.gif) no-repeat right top;
+        padding:4px 9px 2px 6px;
+    }
+    #tabs a span{float:none;}
+    #tabs a:hover{background-color: #7E94B9;color: white;}
+    #tabs a:hover span{background-color: #7E94B9;}
+    #tabHeaderActive span, #tabHeaderActive a { background-color: #42577B; color:#fff;}
+    .tabContent {
+        clear:both;
+        border:2px solid #42577B;
+        padding-top:2px;
+        background-color:#FFF;
+    }
+</style>
+
+<div id="tabs">
+    <ul>
+        <li style="margin-left: 1px" id="tabHeaderActive"><a href="javascript:void(0)" onClick="toggleTab(1,6)"><span>Tab 1</span></a></li>
+        <li id="tabHeader2"><a href="javascript:void(0)" onClick="toggleTab(2,6)" ><span>Tab 2</span></a></li>
+        <li id="tabHeader3"><a href="javascript:void(0)" onclick="toggleTab(3,6)"><span>Tab 3</span></a></li>
+        <li id="tabHeader4"><a href="javascript:void(0)" onClick="toggleTab(4,6)"><span>Tab 4</span></a></li>
+        <li id="tabHeader5"><a href="javascript:void(0)" onclick="toggleTab(5,6);"><span>Tab 5</span></a></li>
+        <li id="tabHeader6"><a href="javascript:void(0)" onclick="toggleTab(6,6);"><span>Tab 6</span></a></li>
+    </ul>
+    </div>
+    <div id="tabscontent">
+        <div id="tabContent1" class="tabContent" style="display:yes;">
+            <br /><div>First Tab Content goes here</div>
+        </div>
+
+        <div id="tabContent2" class="tabContent" style="display:none;">
+            <br /><div>Second Tab Content goes here</div>
+        </div>
+
+        <div id="tabContent3" class="tabContent" style="display:none;">
+            <br /><div>Third Tab Content goes here</div>
+        </div>
+
+        <div id="tabContent4" class="tabContent" style="display:none;">
+            <br /><div>Fourth Tab Content goes here</div>
+        </div>
+
+        <div id="tabContent5" class="tabContent" style="display:none;">
+            <br /><div>Fifth Tab Content goes here</div>
+        </div>
+
+        <div id="tabContent6" class="tabContent" style="display:none;">
+            <br /><div>Sixth Tab Content goes here</div>
+        </div>
+    </div><!--End of tabscontent-->
+</div><!--End of tabs-->
+
+

The Javascript:

+

+/*-----------------------------------------------------------
+    Toggles element's display value
+    Input: any number of element id's
+    Output: none 
+    ---------------------------------------------------------*/
+function toggleDisp() {
+    for (var i=0;i<arguments.length;i++){
+        var d = $(arguments[i]);
+        if (d.style.display == 'none')
+            d.style.display = 'block';
+        else
+            d.style.display = 'none';
+    }
+}
+/*-----------------------------------------------------------
+    Toggles tabs - Closes any open tabs, and then opens current tab
+    Input:     1.The number of the current tab
+                    2.The number of tabs
+                    3.(optional)The number of the tab to leave open
+                    4.(optional)Pass in true or false whether or not to animate the open/close of the tabs
+    Output: none 
+    ---------------------------------------------------------*/
+function toggleTab(num,numelems,opennum,animate) {
+    if ($('tabContent'+num).style.display == 'none'){
+        for (var i=1;i<=numelems;i++){
+            if ((opennum == null) || (opennum != i)){
+                var temph = 'tabHeader'+i;
+                var h = $(temph);
+                if (!h){
+                    var h = $('tabHeaderActive');
+                    h.id = temph;
+                }
+                var tempc = 'tabContent'+i;
+                var c = $(tempc);
+                if(c.style.display != 'none'){
+                    if (animate || typeof animate == 'undefined')
+                        Effect.toggle(tempc,'blind',{duration:0.5, queue:{scope:'menus', limit: 3}});
+                    else
+                        toggleDisp(tempc);
+                }
+            }
+        }
+        var h = $('tabHeader'+num);
+        if (h)
+            h.id = 'tabHeaderActive';
+        h.blur();
+        var c = $('tabContent'+num);
+        c.style.marginTop = '2px';
+        if (animate || typeof animate == 'undefined'){
+            Effect.toggle('tabContent'+num,'blind',{duration:0.5, queue:{scope:'menus', position:'end', limit: 3}});
+        }else{
+            toggleDisp('tabContent'+num);
+        }
+    }
+}
+
+

Example:

+
+ + + +
+
+
+ First Tab Content goes here +
+
+ + + + + +
+
+ +
\ No newline at end of file diff --git a/_posts/2009-01-01-test-unit-assertions.html b/_posts/2009-01-01-test-unit-assertions.html new file mode 100644 index 0000000..b1ba269 --- /dev/null +++ b/_posts/2009-01-01-test-unit-assertions.html @@ -0,0 +1,52 @@ +--- +layout: default +title: Test.Unit.Assertions +--- + +
+

Signature

+

Methods:

+

initialize: function() constructor
+summary: function(): String Returns a concatenated string which represents the assertions, errors, failures, and messages properties.
+pass: function() This code increases the number of assertions without risking a failure or error
+fail: function( message (converted to string) )Adds a failure message to messages property and increments failures property
+info: function( message (converted to string) )Adds an info message to messages property
+error: function(error:Error)Adds an error message to messages property and increments error property
+status: function()Returns ‘failed’, ‘error’, or ‘passed’ based on the error and failure count. If there are errors and failures, only ‘failure’ will be returned..
+assertElementsMatch: function( ...args )Do all objects in the arguments array match the first item in that array? ie: Does assertElementsMatch([‘a’,‘b’,‘c’], ‘a’, ‘b’, ‘c’ ) should be true?
+assertElementMatches: function(element, expression)assertElementsMatch([element], expression)
+benchmark: function(operation: Function, iterations: Number = 1):NumberCalls operation iteration number of times and returns how long it took to call all of them.
+-———————————————————————————————————————————————————————————-
+NOTE: In all of the below functions, there is a third parameter message:String. If this is used, then that message will be appended to the string sent into the fail function in case the assertion does not succeed.
+-———————————————————————————————————————————————————————————-
+assert: function(expression)If expression evaluates to true, this will call pass(), otherwise it will call fail()
+assertInspect: function(expected:Object, actual:Object)Does expected == actual.inspect()
+assertEnumEqual: function(expected:Object, actual:Object)Goes through two dynamic objects and compares them point for point
+assertRespondsTo: function(method:String, obj:Object) Does obj have a method by the name given?
+assertRaise: function(exceptionName:String, method:Function)Does this method raise the error of the correct exceptionName?
+assertHidden: function(element)Shortcut for assertEqual(“none”, element.style.display)
+assertMatch: function(expression:String (regular expression), actual:String)Does the string match the regular expressions?

+

The next series of functions come in pairs, those which include the word “Not” means that the

+

assertEqual: function(expected, actual)Does expected == actual?
+assertNotEqual: function(expected, actual)
+assertIdentical: function(expected, actual)Does expected = actual?
+assertNotIdentical: function(expected, actual)
+assertNull: function(obj)Does obj = null
+assertNotNull: function(object)
+assertType: function(expected:Class, actual:Object)Is the actual item a member of the expected Class (does not work on descendant classes)
+assertNotOfType: function(expected:Class, actual:Object)
+assertInstanceOf: function(expected:Class, actual:Object)Is the actual item an instance of the expected Class or its descendants
+assertNotInstanceOf: function(expected, actual)
+assertReturnsTrue: function(method, obj)Does the function return true?
+assertReturnsFalse: function(method, obj)
+assertVisible: function(element:Element) _isVisible will return true for element
+assertNotVisible: function(element)
+<!— Private!
+_isVisible: function(element) Returns whether an element is visible. It calls itself recursively until it gets to the document root.
+—>
+

Properties


+assertions: Number
+failures: Number
+errors: Number
+messages: Array( Strings )

+
\ No newline at end of file diff --git a/_posts/2009-01-01-test-unit-logger.html b/_posts/2009-01-01-test-unit-logger.html new file mode 100644 index 0000000..ce36fda --- /dev/null +++ b/_posts/2009-01-01-test-unit-logger.html @@ -0,0 +1,28 @@ +--- +layout: default +title: Test.Unit.Logger +--- + +
+

Signature

+

Methods

+

initialize: function(log (string which refers to a div ID))
+start: function(testName)
+finish: function(status, summary)
+message: function(message)
+summary: function(summary)
+addLinksToResults: function()
+<— These may be private
+    _createLogTable: function()
+    _toHTML: function(txt)
+—>
+

Properties


+log: Element
+testName: String
+lastLogLine: Element (tr)
+statusCell: Element (td)
+nameCell: Element (td)
+messageCell: Element (td)
+logsummary: Element (id = "logsummary")
+loglines: Element (id = "loglines")

+
\ No newline at end of file diff --git a/_posts/2009-01-01-test-unit-runner.html b/_posts/2009-01-01-test-unit-runner.html new file mode 100644 index 0000000..f58a3f4 --- /dev/null +++ b/_posts/2009-01-01-test-unit-runner.html @@ -0,0 +1,81 @@ +--- +layout: default +title: Test.Unit.Runner +--- + +
+ +

Unit Testing > Test.Unit.Runner

+

Introduction

+

Test.Unit.Runner is a utility class for writing unit test cases with an easy to use syntax.

+

Syntax

+

+new Test.Unit.Runner(functions [, options] );
+

The functions and options parameters are both {key: value} collections.

+

Examples

+

Using Test.Unit.Runner requires you to use a specific XHTML page template, that looks as follows:

+

+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <title>Page title</title>
+  <script src="path/to/prototype.js" type="text/javascript"></script>
+  <script src="path/to/util.js" type="text/javascript"></script>
+  <script src="path/to/unittest.js" type="text/javascript"></script>
+  <!-- other JavaScript includes -->
+  <link rel="stylesheet" href="path/to/test.css" type="text/css" />
+</head>
+<body>
+
+<!-- Log output -->
+<div id="testlog"> </div>
+
+<!-- here go any elements you do the testing on -->
+
+<!-- Tests -->
+<script type="text/javascript" language="javascript">
+// <![CDATA[
+  new Test.Unit.Runner({
+    // optional setup function, run before each individual test case
+    setup: function() { with(this) {
+      // code
+    }},
+    // optional teardown function, run after each individual test case
+    teardown: function() { with(this) {
+      // code
+    }},
+
+    // test cases follow, each method which starts 
+    // with "test" is considered a test case
+    testATest: function() { with(this) {
+      // code
+    }},
+    testAnotherTest: function() { with(this) {
+      // code
+    }}
+  }, { options });
+// ]]>
+</script>
+</body>
+</html>
+
+

Notice how the with(this) { ... } syntax allows for easily calling on methods of the Test.Unit.Testcase class, which includes the assertions, as defined in Test.Unit.Assertions.

+

More Examples

+

Probably the best examples of Test.Unit.Runner are the actual tests used by script.aculo.us. Don’t be afraid to dive in to the code! See the test folder in the repository root.

+

Signature

+

Methods

+

initialize: function(testcases [, options])
+parseResultsURLQueryParameter: function()
+parseTestsQueryParameter: function()
+getResult: function()
+postResults: function()
+runTests: function()
+

Properties


+options: object (This is an object which is a modification of the options object passed into the initialize function
Хотите красиво отдохнуть? Проститутки Москва – лучший отдых для мужчин.

+tests: Array of Testcases
+currentTest: Number
+logger: Test.Unit.Logger

+
\ No newline at end of file diff --git a/_posts/2009-01-01-test-unit-testcase.html b/_posts/2009-01-01-test-unit-testcase.html new file mode 100644 index 0000000..e8eb7fd --- /dev/null +++ b/_posts/2009-01-01-test-unit-testcase.html @@ -0,0 +1,19 @@ +--- +layout: default +title: Test.Unit.Testcase +--- + +
+

In addition to the methods and properties listed below, it should be noted that this class’s prototype is an extension of the Test.Unit.Assertions class.

+

Signature

+

Methods:

+

initialize: function(name, test, setup, teardown)
+wait: function(time, nextPart)
+run: function()
+

Properties


+name: String
+isWaiting: Boolean
+timeToWait: Number (refers to milliseconds)
+setup: Function
+teardown: Function

+
\ No newline at end of file diff --git a/_posts/2009-01-01-test-unit.html b/_posts/2009-01-01-test-unit.html new file mode 100644 index 0000000..41f9af8 --- /dev/null +++ b/_posts/2009-01-01-test-unit.html @@ -0,0 +1,15 @@ +--- +layout: default +title: Test.Unit +--- + +
+

The basics

+

Test.Unit is effectively the equivalent of a package which contains four classes:

+

Test.Unit.Logger
+Test.Unit.Runner
+Test.Unit.Assertions
+Test.Unit.Testcase

+

It also has a quick reference to Object.inspect:
+Test.Unit.inspect

+
\ No newline at end of file diff --git a/_posts/2009-01-01-unit-testing.html b/_posts/2009-01-01-unit-testing.html new file mode 100644 index 0000000..814b6bb --- /dev/null +++ b/_posts/2009-01-01-unit-testing.html @@ -0,0 +1,26 @@ +--- +layout: default +title: Unit Testing +--- + +
+ +

Introduction

+

script.aculo.us provides a complete set of classes and methods for Javascript unit testing.

+

To use the unit test library, you must include unittest.js in your HTML file. See Test.Unit.Runner for a complete example on how this works.

+

script.aculo.us “eats its own dog food,” and includes unit and functional tests for itself, inside the test folder of the repository.

+

Note that as of August 2005 some of the tests will fail in browsers other than Firefox (due to implementation differences and some of the DOM functions used not implemented in some browsers).

+

Classes

+ +

Examples

+

A short tutorial (second half of the page) demonstrating the use of the script.aculo.us test harness for Javascript, prepared for the Linux Users Group, Villafranca, Verona, Italy.

+ +
\ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..c8c5736 --- /dev/null +++ b/index.html @@ -0,0 +1,72 @@ +--- +layout: default +title: Home +--- + +
+ +

script.aculo.us Web 2.0 JavaScript

+

script.aculo.us is a set of JavaScript libraries to enhance the user interface of web sites. It provides an visual effects engine, a drag and drop library (including sortable lists), a couple of controls (Ajax-based autocompletion, in-place editing, sliders) and more. Be sure to have a look at the demos!

+

API Documentation and Reference

+

This wiki details Version 1.8.1 of the library, which is the most current version of the 1.x trunk of script.aculo.us.

+
+

Core Effects:
+Effect.Highlight, Effect.Morph, Effect.Move, Effect.Opacity, Effect.Scale, Effect.Parallel,
+Effect Queues

+

Combination Effects:
+Effect.Appear, Effect.BlindDown, Effect.BlindUp, Effect.DropOut, Effect.Fade, Effect.Fold, Effect.Grow, Effect.Puff, Effect.Pulsate, Effect.Shake, Effect.Shrink, Effect.SlideDown, Effect.SlideUp, Effect.Squish, Effect.SwitchOff, Effect.ScrollTo

+

Effect helpers:
+Effect.Transitions, Effect.Methods, Effect.tagifyText, Effect.multiple, Effect.toggle

+
+
+

Behaviours: Draggable, Droppables, Sortable, Form.Element.DelayedObserver

+
+
+

Controls: Ajax.InPlaceEditor, Ajax.InPlaceCollectionEditor, Ajax.Autocompleter, Autocompleter.Local, Slider

+
+
+

Miscellaneous: Builder, Sound, Unit Testing

+
+

script.aculo.us is open source. Read up on how to contribute by finding bugs, making bug reports and helping fixing them.

+

Help port the old, dead wiki to github and earn BIG BROWNIE POINTS! You can find a copy of the old wiki contents at http://script.aculo.us/docs. See some helpful hints for porting, and please follow the style guide!

+

Quick start

+

1. Download & install

+

Using script.aculo.us is easy! First, go to the script.aculo.us downloads page to grab yourself the latest version in a convenient package. Follow the instructions there, then return here.

+

Next, put prototype.js, scriptaculous.js, builder.js, effects.js, dragdrop.js, slider.js and controls.js in a directory of your website, e.g. /javascripts.

+

Third, load script.aculo.us in your web page. This is done by linking to the scripts in the head of your document.

+
<script src="javascripts/prototype.js" type="text/javascript"></script>
+<script src="javascripts/scriptaculous.js" type="text/javascript"></script>
+
+
+

The scriptaculous.js loader script will automatically load in the other libraries.

+

By default, scriptaculous.js loads all of the other javascript files necessary for effects, drag-and-drop, sliders, and all of the other script.aculo.us features. If you don’t need all of the features, you can limit the additional scripts that get loaded by specifying them in a comma-separated list, e.g.:
+

<script src="scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>
+

+The scripts that can be specified are: builder, effects, dragdrop, controls, and slider

+

Note that some of the scripts require that others be loaded in order to function properly.

+

2. Use it!

+

To call upon the functions, use HTML script tags.
+The best way is to define them like this:

+
<script type="text/javascript" language="javascript">
+  // <![CDATA[
+  $('element_id').appear();
+  // ]]>
+</script>
+
+

This way, you won’t have to worry about using characters like < and > in your Java Script code.

+

You can also use effects inside event handlers:

+
<div onclick="$(this).switchOff()">
+  Click here if you've seen enough.
+</div>
+

+

If you want to get tricky with it, you can pass extra options to the effect like duration, fps (frames per second), and delay.

+
<div onclick="$(this).blindUp({ duration: 16 })">
+  Click here if you want this to go slooooow.
+</div>
+

+

Next steps

+

Have a look at the demos to catch a glimpse of what you can achieve. Read the documentation. Create the next killer application!

+ +
\ No newline at end of file From 0f5a7d5db586334271e084dfdefa5a27053c5256 Mon Sep 17 00:00:00 2001 From: Eston Bond Date: Thu, 14 Oct 2010 19:10:14 -0700 Subject: [PATCH 02/20] Adding readme --- README.textile | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 README.textile diff --git a/README.textile b/README.textile new file mode 100644 index 0000000..4b0669d --- /dev/null +++ b/README.textile @@ -0,0 +1,7 @@ +h3. Porting Scriptaculous Wiki to Github Page Architecture + +This is an automated port of a snapshot of the wiki (10/14/2010) to the Jekyll/Pages architecture GitHub uses. Everything was left as HTML instead of Textile. + +h4. Style is minimal + +There isn't any style information in the default layout, and the default layout does not currently have the wiki-like sidebar in place. This is easy to do by editing @_layouts/default.html@ \ No newline at end of file From b089c94d43b9b9d19d99f2e3a9a76881d55d3f39 Mon Sep 17 00:00:00 2001 From: Eston Bond Date: Thu, 14 Oct 2010 19:11:05 -0700 Subject: [PATCH 03/20] Cleaning up --- README.textile | 2 +- _layouts/default.html | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/README.textile b/README.textile index 4b0669d..f7af520 100644 --- a/README.textile +++ b/README.textile @@ -4,4 +4,4 @@ This is an automated port of a snapshot of the wiki (10/14/2010) to the Jekyll/P h4. Style is minimal -There isn't any style information in the default layout, and the default layout does not currently have the wiki-like sidebar in place. This is easy to do by editing @_layouts/default.html@ \ No newline at end of file +There isn't any style information in the default layout, and the default layout does not currently have the wiki-like sidebar in place. This is easy to do by editing @_layouts/default.html@. diff --git a/_layouts/default.html b/_layouts/default.html index 1d91b6c..3731543 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -16,13 +16,15 @@

{{ page.title }}

{{ content }}
- + + From 74522246d250d9958e7ae44716eee3cc44b11086 Mon Sep 17 00:00:00 2001 From: Eston Bond Date: Thu, 14 Oct 2010 19:11:35 -0700 Subject: [PATCH 04/20] Capitalize --- README.textile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.textile b/README.textile index f7af520..ac64786 100644 --- a/README.textile +++ b/README.textile @@ -1,4 +1,4 @@ -h3. Porting Scriptaculous Wiki to Github Page Architecture +h3. Porting Scriptaculous Wiki to GitHub Page Architecture This is an automated port of a snapshot of the wiki (10/14/2010) to the Jekyll/Pages architecture GitHub uses. Everything was left as HTML instead of Textile. From 2be7a2ecd63eb0a457fd69e91c87e87642e6cd2b Mon Sep 17 00:00:00 2001 From: Eston Bond Date: Fri, 15 Oct 2010 12:58:37 -0700 Subject: [PATCH 05/20] Beginning GitHub Pages Documentation --- index.html | 1 + 1 file changed, 1 insertion(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..842a4ff --- /dev/null +++ b/index.html @@ -0,0 +1 @@ +Coming soon… From 9389871cf526611926d60a9ccd70de58d4310c90 Mon Sep 17 00:00:00 2001 From: Eston Bond Date: Fri, 15 Oct 2010 17:40:28 -0400 Subject: [PATCH 06/20] Added category metadata and basic HTML layout --- README.textile | 12 ++++--- _layouts/default.html | 33 ++++++++++++----- _posts/2009-01-01-ajax-autocompleter.html | 1 + ...09-01-01-ajax-inplacecollectioneditor.html | 1 + _posts/2009-01-01-ajax-inplaceeditor.html | 1 + _posts/2009-01-01-autocompleter-base.html | 1 + _posts/2009-01-01-autocompleter-local.html | 1 + _posts/2009-01-01-behaviours.html | 3 +- _posts/2009-01-01-born----kazdoor.html | 7 ---- .../2009-01-01-combination-effects-demo.html | 1 + _posts/2009-01-01-combination-effects.html | 1 + _posts/2009-01-01-contribute.html | 1 + _posts/2009-01-01-controls.html | 3 +- _posts/2009-01-01-core-effects.html | 3 +- _posts/2009-01-01-demos.html | 1 + _posts/2009-01-01-draggable.html | 1 + _posts/2009-01-01-draggables-object.html | 1 + _posts/2009-01-01-droppables.html | 1 + _posts/2009-01-01-effect-appear.html | 1 + _posts/2009-01-01-effect-blinddown.html | 1 + _posts/2009-01-01-effect-blindup.html | 1 + _posts/2009-01-01-effect-dropout.html | 1 + _posts/2009-01-01-effect-fade.html | 1 + _posts/2009-01-01-effect-fold.html | 1 + _posts/2009-01-01-effect-grow.html | 1 + _posts/2009-01-01-effect-highlight.html | 1 + _posts/2009-01-01-effect-methods.html | 1 + _posts/2009-01-01-effect-morph.html | 1 + _posts/2009-01-01-effect-move.html | 1 + _posts/2009-01-01-effect-multiple.html | 1 + _posts/2009-01-01-effect-opacity.html | 1 + _posts/2009-01-01-effect-parallel.html | 1 + _posts/2009-01-01-effect-puff.html | 1 + _posts/2009-01-01-effect-pulsate.html | 1 + _posts/2009-01-01-effect-queues.html | 1 + _posts/2009-01-01-effect-scale.html | 1 + _posts/2009-01-01-effect-scrollto.html | 1 + _posts/2009-01-01-effect-shake.html | 1 + _posts/2009-01-01-effect-shrink.html | 1 + _posts/2009-01-01-effect-slidedown.html | 1 + _posts/2009-01-01-effect-slideup.html | 1 + _posts/2009-01-01-effect-squish.html | 1 + _posts/2009-01-01-effect-switchoff.html | 1 + _posts/2009-01-01-effect-tagifytext.html | 1 + _posts/2009-01-01-effect-toggle.html | 1 + _posts/2009-01-01-effect-transitions.html | 1 + _posts/2009-01-01-effect-tween.html | 1 + _posts/2009-01-01-effects.html | 3 +- _posts/2009-01-01-ghostly-sortable-demo.html | 9 ----- _posts/2009-01-01-ghostly.html | 8 ----- _posts/2009-01-01-hello.html | 9 ----- _posts/2009-01-01-in-place-editor.html | 12 ------- _posts/2009-01-01-list-morph-demo.html | 1 + _posts/2009-01-01-porting.html | 36 ------------------- _posts/2009-01-01-ruby-on-rails.html | 1 + _posts/2009-01-01-shahzad.html | 7 ---- _posts/2009-01-01-smdc.html | 7 ---- _posts/2009-01-01-sortable-lists-demo.html | 1 + _posts/2009-01-01-sortable-sequence.html | 1 + _posts/2009-01-01-sortable-serialize.html | 1 + _posts/2009-01-01-sortable.html | 1 + _posts/2009-01-01-sortables-create.html | 1 + _posts/2009-01-01-sortables.html | 1 + _posts/2009-01-01-tabs.html | 1 + css/docs.css | 4 +++ 65 files changed, 95 insertions(+), 111 deletions(-) delete mode 100644 _posts/2009-01-01-born----kazdoor.html delete mode 100644 _posts/2009-01-01-ghostly-sortable-demo.html delete mode 100644 _posts/2009-01-01-ghostly.html delete mode 100644 _posts/2009-01-01-hello.html delete mode 100644 _posts/2009-01-01-in-place-editor.html delete mode 100644 _posts/2009-01-01-porting.html delete mode 100644 _posts/2009-01-01-shahzad.html delete mode 100644 _posts/2009-01-01-smdc.html create mode 100644 css/docs.css diff --git a/README.textile b/README.textile index ac64786..be38005 100644 --- a/README.textile +++ b/README.textile @@ -1,7 +1,11 @@ -h3. Porting Scriptaculous Wiki to GitHub Page Architecture +h2. Scriptaculous Documentation on GitHub Pages -This is an automated port of a snapshot of the wiki (10/14/2010) to the Jekyll/Pages architecture GitHub uses. Everything was left as HTML instead of Textile. +Since the new GitHub wikis do not support inline JavaScript, script.aculo.us is moving its documentation to "GitHub Pages":http://pages.github.com/ as the old GitHub wiki is being phased out. This makes collaboration on documentation the same workflow as collaboration the script.aculo.us source code. -h4. Style is minimal +h3. Contributing to the documentation -There isn't any style information in the default layout, and the default layout does not currently have the wiki-like sidebar in place. This is easy to do by editing @_layouts/default.html@. +All documentation is under the @gh-pages@ branch. To edit the documentation, fork "the script.aculo.us project":http://wiki.github.com/madrobby/scriptaculous/ and edit the documentation under the @gh-pages@ branch in your fork. When you are finished editing your documentation, please send a pull request from your repository explaining the changes you wish to pull. The primary project collaborators will be notified. + +h3. Getting started with GitHub Pages + +New documentation can be written in Textile or HTML. For more on what GitHub pages supports, "visit the GitHub pages overview":http://pages.github.com/ and read about pages. For more on contributing to script.aculo.us, "read the Contribute page":http://madrobby.github.com/scriptaculous/contribute/ to learn how you can help. diff --git a/_layouts/default.html b/_layouts/default.html index 3731543..d8ac0f7 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -3,28 +3,45 @@ - {{ page.title }} — Scriptaculous Wiki + {{ page.title }} — Scriptaculous Documentation + + -
+ + +

{{ page.title }}

-
+
{{ content }}
- + {% for post in site.posts reversed %} + {% if page.title == post.title %} +
  • {{ page.title }}
    • + {% else %} +
  • {{ post.title }}
    • + {% endif %} + {% endfor %} + +
    +
    + diff --git a/_posts/2009-01-01-ajax-autocompleter.html b/_posts/2009-01-01-ajax-autocompleter.html index 703ae7a..17ad760 100644 --- a/_posts/2009-01-01-ajax-autocompleter.html +++ b/_posts/2009-01-01-ajax-autocompleter.html @@ -1,6 +1,7 @@ --- layout: default title: Ajax.Autocompleter +category: Controls ---
    diff --git a/_posts/2009-01-01-ajax-inplacecollectioneditor.html b/_posts/2009-01-01-ajax-inplacecollectioneditor.html index e79b2d4..3457c36 100644 --- a/_posts/2009-01-01-ajax-inplacecollectioneditor.html +++ b/_posts/2009-01-01-ajax-inplacecollectioneditor.html @@ -1,6 +1,7 @@ --- layout: default title: Ajax.InPlaceCollectionEditor +category: Controls ---
    diff --git a/_posts/2009-01-01-ajax-inplaceeditor.html b/_posts/2009-01-01-ajax-inplaceeditor.html index c204768..059c771 100644 --- a/_posts/2009-01-01-ajax-inplaceeditor.html +++ b/_posts/2009-01-01-ajax-inplaceeditor.html @@ -1,6 +1,7 @@ --- layout: default title: Ajax.InPlaceEditor +category: Controls ---
    diff --git a/_posts/2009-01-01-autocompleter-base.html b/_posts/2009-01-01-autocompleter-base.html index 3a35d59..ade42c6 100644 --- a/_posts/2009-01-01-autocompleter-base.html +++ b/_posts/2009-01-01-autocompleter-base.html @@ -1,6 +1,7 @@ --- layout: default title: Autocompleter.Base +category: Controls ---
    diff --git a/_posts/2009-01-01-autocompleter-local.html b/_posts/2009-01-01-autocompleter-local.html index ff4894f..2051fc8 100644 --- a/_posts/2009-01-01-autocompleter-local.html +++ b/_posts/2009-01-01-autocompleter-local.html @@ -1,6 +1,7 @@ --- layout: default title: Autocompleter.Local +category: Controls ---
    diff --git a/_posts/2009-01-01-behaviours.html b/_posts/2009-01-01-behaviours.html index 3b2726c..d69b973 100644 --- a/_posts/2009-01-01-behaviours.html +++ b/_posts/2009-01-01-behaviours.html @@ -1,6 +1,7 @@ --- layout: default -title: Behaviours +title: Behaviours Overview +category: Behaviours ---
    diff --git a/_posts/2009-01-01-born----kazdoor.html b/_posts/2009-01-01-born----kazdoor.html deleted file mode 100644 index 2063246..0000000 --- a/_posts/2009-01-01-born----kazdoor.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -layout: default -title: Born > kazdoor ---- - -
    -
    \ No newline at end of file diff --git a/_posts/2009-01-01-combination-effects-demo.html b/_posts/2009-01-01-combination-effects-demo.html index be1a1ee..99ba506 100644 --- a/_posts/2009-01-01-combination-effects-demo.html +++ b/_posts/2009-01-01-combination-effects-demo.html @@ -1,6 +1,7 @@ --- layout: default title: Combination Effects Demo +category: Demos ---
    diff --git a/_posts/2009-01-01-combination-effects.html b/_posts/2009-01-01-combination-effects.html index d3cfe62..55964c9 100644 --- a/_posts/2009-01-01-combination-effects.html +++ b/_posts/2009-01-01-combination-effects.html @@ -1,6 +1,7 @@ --- layout: default title: Combination Effects +category: Combination Effects ---
    diff --git a/_posts/2009-01-01-contribute.html b/_posts/2009-01-01-contribute.html index e5c85c7..bbf0346 100644 --- a/_posts/2009-01-01-contribute.html +++ b/_posts/2009-01-01-contribute.html @@ -1,6 +1,7 @@ --- layout: default title: Contribute +category: Contribute ---
    diff --git a/_posts/2009-01-01-controls.html b/_posts/2009-01-01-controls.html index fbcd596..1c0d313 100644 --- a/_posts/2009-01-01-controls.html +++ b/_posts/2009-01-01-controls.html @@ -1,6 +1,7 @@ --- layout: default -title: Controls +title: Controls Overview +category: Controls ---
    diff --git a/_posts/2009-01-01-core-effects.html b/_posts/2009-01-01-core-effects.html index 9477869..509c415 100644 --- a/_posts/2009-01-01-core-effects.html +++ b/_posts/2009-01-01-core-effects.html @@ -1,6 +1,7 @@ --- layout: default -title: Core Effects +title: Core Effects Overview +category: Core Effects ---
    diff --git a/_posts/2009-01-01-demos.html b/_posts/2009-01-01-demos.html index a20a6de..86b090b 100644 --- a/_posts/2009-01-01-demos.html +++ b/_posts/2009-01-01-demos.html @@ -1,6 +1,7 @@ --- layout: default title: Demos +category: Demos ---
    diff --git a/_posts/2009-01-01-draggable.html b/_posts/2009-01-01-draggable.html index 8e60eeb..eb2f512 100644 --- a/_posts/2009-01-01-draggable.html +++ b/_posts/2009-01-01-draggable.html @@ -1,6 +1,7 @@ --- layout: default title: Draggable +category: Behaviours ---
    diff --git a/_posts/2009-01-01-draggables-object.html b/_posts/2009-01-01-draggables-object.html index b0abdc9..c1590a8 100644 --- a/_posts/2009-01-01-draggables-object.html +++ b/_posts/2009-01-01-draggables-object.html @@ -1,6 +1,7 @@ --- layout: default title: Draggables Object +category: Behaviours ---
    diff --git a/_posts/2009-01-01-droppables.html b/_posts/2009-01-01-droppables.html index 89ee963..980e558 100644 --- a/_posts/2009-01-01-droppables.html +++ b/_posts/2009-01-01-droppables.html @@ -1,6 +1,7 @@ --- layout: default title: Droppables +category: Behaviours ---
    diff --git a/_posts/2009-01-01-effect-appear.html b/_posts/2009-01-01-effect-appear.html index f10553c..e652dae 100644 --- a/_posts/2009-01-01-effect-appear.html +++ b/_posts/2009-01-01-effect-appear.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.Appear +category: Combination Effects ---
    diff --git a/_posts/2009-01-01-effect-blinddown.html b/_posts/2009-01-01-effect-blinddown.html index aaebae5..ee57b76 100644 --- a/_posts/2009-01-01-effect-blinddown.html +++ b/_posts/2009-01-01-effect-blinddown.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.BlindDown +category: Combination Effects ---
    diff --git a/_posts/2009-01-01-effect-blindup.html b/_posts/2009-01-01-effect-blindup.html index 3e76b5a..a73582b 100644 --- a/_posts/2009-01-01-effect-blindup.html +++ b/_posts/2009-01-01-effect-blindup.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.BlindUp +category: Combination Effects ---
    diff --git a/_posts/2009-01-01-effect-dropout.html b/_posts/2009-01-01-effect-dropout.html index 60928fd..f0879ad 100644 --- a/_posts/2009-01-01-effect-dropout.html +++ b/_posts/2009-01-01-effect-dropout.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.DropOut +category: Combination Effects ---
    diff --git a/_posts/2009-01-01-effect-fade.html b/_posts/2009-01-01-effect-fade.html index bccc733..bd4e7eb 100644 --- a/_posts/2009-01-01-effect-fade.html +++ b/_posts/2009-01-01-effect-fade.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.Fade +category: Core Effects ---
    diff --git a/_posts/2009-01-01-effect-fold.html b/_posts/2009-01-01-effect-fold.html index 3a2ee1b..ab4cd5d 100644 --- a/_posts/2009-01-01-effect-fold.html +++ b/_posts/2009-01-01-effect-fold.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.Fold +category: Combination Effects ---
    diff --git a/_posts/2009-01-01-effect-grow.html b/_posts/2009-01-01-effect-grow.html index 2d0cace..32d56a0 100644 --- a/_posts/2009-01-01-effect-grow.html +++ b/_posts/2009-01-01-effect-grow.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.Grow +category: Combination Effects ---
    diff --git a/_posts/2009-01-01-effect-highlight.html b/_posts/2009-01-01-effect-highlight.html index f2a0fa6..3ef4844 100644 --- a/_posts/2009-01-01-effect-highlight.html +++ b/_posts/2009-01-01-effect-highlight.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.Highlight +category: Core Effects ---
    diff --git a/_posts/2009-01-01-effect-methods.html b/_posts/2009-01-01-effect-methods.html index 19213d0..f087670 100644 --- a/_posts/2009-01-01-effect-methods.html +++ b/_posts/2009-01-01-effect-methods.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.Methods +category: Effect Helpers ---
    diff --git a/_posts/2009-01-01-effect-morph.html b/_posts/2009-01-01-effect-morph.html index 794d564..5fb3a48 100644 --- a/_posts/2009-01-01-effect-morph.html +++ b/_posts/2009-01-01-effect-morph.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.Morph +category: Core Effects ---
    diff --git a/_posts/2009-01-01-effect-move.html b/_posts/2009-01-01-effect-move.html index f62771a..6edd616 100644 --- a/_posts/2009-01-01-effect-move.html +++ b/_posts/2009-01-01-effect-move.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.Move +category: Core Effects ---
    diff --git a/_posts/2009-01-01-effect-multiple.html b/_posts/2009-01-01-effect-multiple.html index 59cb7e2..7b9cc5b 100644 --- a/_posts/2009-01-01-effect-multiple.html +++ b/_posts/2009-01-01-effect-multiple.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.multiple +category: Effect Helpers ---
    diff --git a/_posts/2009-01-01-effect-opacity.html b/_posts/2009-01-01-effect-opacity.html index 9190c63..0927d2a 100644 --- a/_posts/2009-01-01-effect-opacity.html +++ b/_posts/2009-01-01-effect-opacity.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.Opacity +category: Core Effects ---
    diff --git a/_posts/2009-01-01-effect-parallel.html b/_posts/2009-01-01-effect-parallel.html index a750d50..a11c771 100644 --- a/_posts/2009-01-01-effect-parallel.html +++ b/_posts/2009-01-01-effect-parallel.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.Parallel +category: Core Effects ---
    diff --git a/_posts/2009-01-01-effect-puff.html b/_posts/2009-01-01-effect-puff.html index 2ee3ebf..c7aefff 100644 --- a/_posts/2009-01-01-effect-puff.html +++ b/_posts/2009-01-01-effect-puff.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.Puff +category: Combination Effects ---
    diff --git a/_posts/2009-01-01-effect-pulsate.html b/_posts/2009-01-01-effect-pulsate.html index 5b7f4cb..6f0411b 100644 --- a/_posts/2009-01-01-effect-pulsate.html +++ b/_posts/2009-01-01-effect-pulsate.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.Pulsate +category: Combination Effects ---
    diff --git a/_posts/2009-01-01-effect-queues.html b/_posts/2009-01-01-effect-queues.html index 96352f6..8d6417d 100644 --- a/_posts/2009-01-01-effect-queues.html +++ b/_posts/2009-01-01-effect-queues.html @@ -1,6 +1,7 @@ --- layout: default title: Effect Queues +category: Effect Helpers ---
    diff --git a/_posts/2009-01-01-effect-scale.html b/_posts/2009-01-01-effect-scale.html index 288e5e3..8fdd267 100644 --- a/_posts/2009-01-01-effect-scale.html +++ b/_posts/2009-01-01-effect-scale.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.Scale +category: Core Effects ---
    diff --git a/_posts/2009-01-01-effect-scrollto.html b/_posts/2009-01-01-effect-scrollto.html index 3467bf6..093f7ce 100644 --- a/_posts/2009-01-01-effect-scrollto.html +++ b/_posts/2009-01-01-effect-scrollto.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.ScrollTo +category: Combination Effects ---
    diff --git a/_posts/2009-01-01-effect-shake.html b/_posts/2009-01-01-effect-shake.html index 97ad0f7..cb1a17c 100644 --- a/_posts/2009-01-01-effect-shake.html +++ b/_posts/2009-01-01-effect-shake.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.Shake +category: Combination Effects ---
    diff --git a/_posts/2009-01-01-effect-shrink.html b/_posts/2009-01-01-effect-shrink.html index 2bf4159..3980407 100644 --- a/_posts/2009-01-01-effect-shrink.html +++ b/_posts/2009-01-01-effect-shrink.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.Shrink +category: Combination Effects ---
    diff --git a/_posts/2009-01-01-effect-slidedown.html b/_posts/2009-01-01-effect-slidedown.html index edd2862..b48326b 100644 --- a/_posts/2009-01-01-effect-slidedown.html +++ b/_posts/2009-01-01-effect-slidedown.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.SlideDown +category: Combination Effects ---
    diff --git a/_posts/2009-01-01-effect-slideup.html b/_posts/2009-01-01-effect-slideup.html index 1ded737..2b499dc 100644 --- a/_posts/2009-01-01-effect-slideup.html +++ b/_posts/2009-01-01-effect-slideup.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.SlideUp +category: Combination Effects ---
    diff --git a/_posts/2009-01-01-effect-squish.html b/_posts/2009-01-01-effect-squish.html index 77e61b1..72f5cc4 100644 --- a/_posts/2009-01-01-effect-squish.html +++ b/_posts/2009-01-01-effect-squish.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.Squish +category: Combination Effects ---
    diff --git a/_posts/2009-01-01-effect-switchoff.html b/_posts/2009-01-01-effect-switchoff.html index 3b90bd2..ae57fe9 100644 --- a/_posts/2009-01-01-effect-switchoff.html +++ b/_posts/2009-01-01-effect-switchoff.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.SwitchOff +category: Combination Effects ---
    diff --git a/_posts/2009-01-01-effect-tagifytext.html b/_posts/2009-01-01-effect-tagifytext.html index 7fc30de..345b9ae 100644 --- a/_posts/2009-01-01-effect-tagifytext.html +++ b/_posts/2009-01-01-effect-tagifytext.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.tagifyText +category: Effect Helpers ---
    diff --git a/_posts/2009-01-01-effect-toggle.html b/_posts/2009-01-01-effect-toggle.html index c84876b..ff26b72 100644 --- a/_posts/2009-01-01-effect-toggle.html +++ b/_posts/2009-01-01-effect-toggle.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.toggle +category: Effect Helpers ---
    diff --git a/_posts/2009-01-01-effect-transitions.html b/_posts/2009-01-01-effect-transitions.html index aad1459..5d7eca8 100644 --- a/_posts/2009-01-01-effect-transitions.html +++ b/_posts/2009-01-01-effect-transitions.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.Transitions +category: Core Effects ---
    diff --git a/_posts/2009-01-01-effect-tween.html b/_posts/2009-01-01-effect-tween.html index cd10484..f1be0c0 100644 --- a/_posts/2009-01-01-effect-tween.html +++ b/_posts/2009-01-01-effect-tween.html @@ -1,6 +1,7 @@ --- layout: default title: Effect.Tween +category: Core Effects ---
    diff --git a/_posts/2009-01-01-effects.html b/_posts/2009-01-01-effects.html index 10113be..9910024 100644 --- a/_posts/2009-01-01-effects.html +++ b/_posts/2009-01-01-effects.html @@ -1,6 +1,7 @@ --- layout: default -title: Effects +title: Effects Overview +category: Core Effects ---
    diff --git a/_posts/2009-01-01-ghostly-sortable-demo.html b/_posts/2009-01-01-ghostly-sortable-demo.html deleted file mode 100644 index 2823683..0000000 --- a/_posts/2009-01-01-ghostly-sortable-demo.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -layout: default -title: Ghostly Sortable Demo ---- - -
    -

    This page needs to be deleted, sorry for the inconvenience.

    -

    Do not create a wiki page if you do not know what you are doing.

    -
    \ No newline at end of file diff --git a/_posts/2009-01-01-ghostly.html b/_posts/2009-01-01-ghostly.html deleted file mode 100644 index 99ef5f2..0000000 --- a/_posts/2009-01-01-ghostly.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -layout: default -title: Ghostly ---- - -
    -

    not working..

    -
    \ No newline at end of file diff --git a/_posts/2009-01-01-hello.html b/_posts/2009-01-01-hello.html deleted file mode 100644 index aae188b..0000000 --- a/_posts/2009-01-01-hello.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -layout: default -title: Hello ---- - -
    -

    This is a test!
    -How are you today?

    -
    \ No newline at end of file diff --git a/_posts/2009-01-01-in-place-editor.html b/_posts/2009-01-01-in-place-editor.html deleted file mode 100644 index e0aee60..0000000 --- a/_posts/2009-01-01-in-place-editor.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -layout: default -title: In Place Editor ---- - -
    - -

    Controls > In Place Editor

    -

    Introduction

    -

    The in-place “text edit” testing allows for Flickr-style AJAX-backed “on-the-fly” textfields.

    -

    See the documentation on Ajax.InPlaceEditor and Ajax.InPlaceCollectionEditor

    -
    \ No newline at end of file diff --git a/_posts/2009-01-01-list-morph-demo.html b/_posts/2009-01-01-list-morph-demo.html index 2a4275b..b7f0718 100644 --- a/_posts/2009-01-01-list-morph-demo.html +++ b/_posts/2009-01-01-list-morph-demo.html @@ -1,6 +1,7 @@ --- layout: default title: List Morph Demo +category: Demos ---
    diff --git a/_posts/2009-01-01-porting.html b/_posts/2009-01-01-porting.html deleted file mode 100644 index 1766311..0000000 --- a/_posts/2009-01-01-porting.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -layout: default -title: porting ---- - -
    - -

    Porting old wiki docs to GitHub wiki

    -

    If you have TextMate (or don’t mind some Ruby hacking), the following script will help transfer the exported HTML docs to textile format.

    -
      -
    • The script requires the ClothRed gem
      • -
    • For easy use, make it a command in the TextMate HTML bundle and assign it a hot-key
      • -
    -
    
-#!/usr/bin/env ruby
-require 'rubygems'
-require 'clothred'
-
-text = ClothRed.new(STDIN.read)
-text = text.to_textile
-
-text.sub!(/^.*?<\body.*?>\s*/im, '').sub!(/\s*<\/body>.*?$/im,'')
-text.gsub!(/^\s*p\.\s/, "\n")
-text.gsub!(/<\pre>@/,'<\pre><\code class="javascript">')
-text.gsub!(/@<\/pre>/,"<\/code><\/pre>")
-text.gsub!(/(\n\s*){2}(\n\s*)+/m,"\n\n")
-text.gsub!(/(.*?)<\/a>/) {|s|
-  $1 == $2 ? "["+"[#{$1}]]" : "["+"[#{$1}|#{$2}]]"
-}
-
-print text
-
    - -
    \ No newline at end of file diff --git a/_posts/2009-01-01-ruby-on-rails.html b/_posts/2009-01-01-ruby-on-rails.html index 660ad5b..317d81b 100644 --- a/_posts/2009-01-01-ruby-on-rails.html +++ b/_posts/2009-01-01-ruby-on-rails.html @@ -1,6 +1,7 @@ --- layout: default title: Ruby on Rails +category: Demos ---
    diff --git a/_posts/2009-01-01-shahzad.html b/_posts/2009-01-01-shahzad.html deleted file mode 100644 index 4974816..0000000 --- a/_posts/2009-01-01-shahzad.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -layout: default -title: Shahzad ---- - -
    -
    \ No newline at end of file diff --git a/_posts/2009-01-01-smdc.html b/_posts/2009-01-01-smdc.html deleted file mode 100644 index a3e4e53..0000000 --- a/_posts/2009-01-01-smdc.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -layout: default -title: smdc ---- - -
    -
    \ No newline at end of file diff --git a/_posts/2009-01-01-sortable-lists-demo.html b/_posts/2009-01-01-sortable-lists-demo.html index be85cd0..a427d45 100644 --- a/_posts/2009-01-01-sortable-lists-demo.html +++ b/_posts/2009-01-01-sortable-lists-demo.html @@ -1,6 +1,7 @@ --- layout: default title: Sortable Lists Demo +category: Demos ---
    diff --git a/_posts/2009-01-01-sortable-sequence.html b/_posts/2009-01-01-sortable-sequence.html index 742370b..1741b57 100644 --- a/_posts/2009-01-01-sortable-sequence.html +++ b/_posts/2009-01-01-sortable-sequence.html @@ -1,6 +1,7 @@ --- layout: default title: Sortable.sequence +category: Behaviours ---
    diff --git a/_posts/2009-01-01-sortable-serialize.html b/_posts/2009-01-01-sortable-serialize.html index d29a3ff..c08fde6 100644 --- a/_posts/2009-01-01-sortable-serialize.html +++ b/_posts/2009-01-01-sortable-serialize.html @@ -1,6 +1,7 @@ --- layout: default title: Sortable.serialize +category: Behaviours ---
    diff --git a/_posts/2009-01-01-sortable.html b/_posts/2009-01-01-sortable.html index 0398274..8c7b145 100644 --- a/_posts/2009-01-01-sortable.html +++ b/_posts/2009-01-01-sortable.html @@ -1,6 +1,7 @@ --- layout: default title: Sortable +category: Behaviours ---
    diff --git a/_posts/2009-01-01-sortables-create.html b/_posts/2009-01-01-sortables-create.html index 5b0dc2c..c80b5e0 100644 --- a/_posts/2009-01-01-sortables-create.html +++ b/_posts/2009-01-01-sortables-create.html @@ -1,6 +1,7 @@ --- layout: default title: Sortables.create +category: Behaviours ---
    diff --git a/_posts/2009-01-01-sortables.html b/_posts/2009-01-01-sortables.html index 4523fe0..9c6bd40 100644 --- a/_posts/2009-01-01-sortables.html +++ b/_posts/2009-01-01-sortables.html @@ -1,6 +1,7 @@ --- layout: default title: Sortables +category: Behaviours ---
    diff --git a/_posts/2009-01-01-tabs.html b/_posts/2009-01-01-tabs.html index 4dd8587..a2f0a61 100644 --- a/_posts/2009-01-01-tabs.html +++ b/_posts/2009-01-01-tabs.html @@ -1,6 +1,7 @@ --- layout: default title: Tabs +category: Demos ---
    diff --git a/css/docs.css b/css/docs.css new file mode 100644 index 0000000..b3254a3 --- /dev/null +++ b/css/docs.css @@ -0,0 +1,4 @@ +/* + Scriptaculous Wiki->GitHub Pages CSS + Not much here for now. +*/ \ No newline at end of file From 11701ce7cf60c969fc8953cd7d152f02f97caa55 Mon Sep 17 00:00:00 2001 From: Eston Bond Date: Thu, 28 Oct 2010 17:43:46 -0700 Subject: [PATCH 07/20] Adding basic styles for scriptaculous documentation --- _layouts/default.html | 19 +- _posts/2009-01-01-ajax-autocompleter.html | 2 +- ...09-01-01-ajax-inplacecollectioneditor.html | 2 +- _posts/2009-01-01-ajax-inplaceeditor.html | 2 +- _posts/2009-01-01-autocompleter-local.html | 2 +- _posts/2009-01-01-draggable.html | 2 +- _posts/2009-01-01-droppables.html | 2 +- _posts/2009-01-01-effect-appear.html | 2 +- _posts/2009-01-01-effect-blinddown.html | 2 +- _posts/2009-01-01-effect-blindup.html | 2 +- _posts/2009-01-01-effect-dropout.html | 2 +- _posts/2009-01-01-effect-fade.html | 2 +- _posts/2009-01-01-effect-fold.html | 2 +- _posts/2009-01-01-effect-grow.html | 2 +- _posts/2009-01-01-effect-highlight.html | 2 +- _posts/2009-01-01-effect-morph.html | 2 +- _posts/2009-01-01-effect-move.html | 2 +- _posts/2009-01-01-effect-opacity.html | 2 +- _posts/2009-01-01-effect-parallel.html | 2 +- _posts/2009-01-01-effect-puff.html | 2 +- _posts/2009-01-01-effect-pulsate.html | 2 +- _posts/2009-01-01-effect-scale.html | 2 +- _posts/2009-01-01-effect-scrollto.html | 2 +- _posts/2009-01-01-effect-shake.html | 2 +- _posts/2009-01-01-effect-shrink.html | 2 +- _posts/2009-01-01-effect-slidedown.html | 2 +- _posts/2009-01-01-effect-slideup.html | 2 +- _posts/2009-01-01-effect-squish.html | 2 +- _posts/2009-01-01-effect-switchoff.html | 2 +- _posts/2009-01-01-effect-tween.html | 2 +- _posts/2009-01-01-list-morph-demo.html | 2 +- _posts/2009-01-01-puzzle-demo.html | 2 +- _posts/2009-01-01-slider.html | 2 +- _posts/2009-01-01-sortable-create.html | 2 +- _posts/2009-01-01-sortable-sequence.html | 2 +- _posts/2009-01-01-sortable-serialize.html | 2 +- _posts/2009-01-01-sortable.html | 2 +- _posts/2009-01-01-sortables.html | 2 +- _posts/2009-01-01-style-guide.html | 2 +- _posts/2009-01-01-test-unit-runner.html | 2 +- css/docs.css | 356 +++++++++++++++++- images/logo.png | Bin 0 -> 16322 bytes 42 files changed, 405 insertions(+), 48 deletions(-) create mode 100644 images/logo.png diff --git a/_layouts/default.html b/_layouts/default.html index d8ac0f7..8e60a62 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -15,21 +15,24 @@
    -

    {{ page.title }}

    +

    {{ page.title }}

    {{ content }}
    -
    + -
    - diff --git a/_posts/2009-01-01-ajax-autocompleter.html b/_posts/2009-01-01-ajax-autocompleter.html index 17ad760..ee64243 100644 --- a/_posts/2009-01-01-ajax-autocompleter.html +++ b/_posts/2009-01-01-ajax-autocompleter.html @@ -6,7 +6,7 @@
    -

    Controls > Ajax.Autocompleter

    +

    Controls > Ajax.Autocompleter

    Introduction

    Ajax.Autocompleter allows for server-powered autocompleting text fields.

    Syntax

    diff --git a/_posts/2009-01-01-ajax-inplacecollectioneditor.html b/_posts/2009-01-01-ajax-inplacecollectioneditor.html index 3457c36..a5a67a5 100644 --- a/_posts/2009-01-01-ajax-inplacecollectioneditor.html +++ b/_posts/2009-01-01-ajax-inplacecollectioneditor.html @@ -7,7 +7,7 @@
    -

    Controls > Ajax.InPlaceCollectionEditor

    +

    Controls > Ajax.InPlaceCollectionEditor

    Introduction

    This constructor generates a Flickr-style AJAX-based “on-the-fly” fields with a select box instead of Ajax.InPlaceEditor text fields.

    Syntax

    diff --git a/_posts/2009-01-01-ajax-inplaceeditor.html b/_posts/2009-01-01-ajax-inplaceeditor.html index 059c771..b244129 100644 --- a/_posts/2009-01-01-ajax-inplaceeditor.html +++ b/_posts/2009-01-01-ajax-inplaceeditor.html @@ -6,7 +6,7 @@
    -

    Controls > Ajax.InPlaceEditor

    +

    Controls > Ajax.InPlaceEditor

    Introduction

    The in-place “text edit” testing allows for Flickr-style AJAX-backed “on-the-fly” textfields.
    diff --git a/_posts/2009-01-01-autocompleter-local.html b/_posts/2009-01-01-autocompleter-local.html index 2051fc8..8cd124d 100644 --- a/_posts/2009-01-01-autocompleter-local.html +++ b/_posts/2009-01-01-autocompleter-local.html @@ -6,7 +6,7 @@

    -

    Controls > Autocompleter.Local

    +

    Controls > Autocompleter.Local

    Introduction

    The local array autocompleter. Used when you’d prefer to inject an array of autocompletion options into the page, rather than sending out Ajax queries.

    Syntax

    diff --git a/_posts/2009-01-01-draggable.html b/_posts/2009-01-01-draggable.html index eb2f512..c746fe1 100644 --- a/_posts/2009-01-01-draggable.html +++ b/_posts/2009-01-01-draggable.html @@ -6,7 +6,7 @@
    -

    Behaviours > Draggable

    +

    Behaviours > Draggable

    To make an element draggable, create a new instance of class Draggable.
    For additional built-in functionality, make a Sortable instead.

    There is also a class named Draggables that exposes functions for observing drag actions.

    diff --git a/_posts/2009-01-01-droppables.html b/_posts/2009-01-01-droppables.html index 980e558..b24fc35 100644 --- a/_posts/2009-01-01-droppables.html +++ b/_posts/2009-01-01-droppables.html @@ -7,7 +7,7 @@
    Любите красивых девочек? Проститутки Питера это то что Вам нужно.
    -

    Behaviours > Droppables

    +

    Behaviours > Droppables

    To make an element react when a Draggable is dropped onto it, you’ll add it to the Droppables of the page with the Droppables.add class method.

    Syntax

    
diff --git a/_posts/2009-01-01-effect-appear.html b/_posts/2009-01-01-effect-appear.html
index e652dae..5b7cda9 100644
--- a/_posts/2009-01-01-effect-appear.html
+++ b/_posts/2009-01-01-effect-appear.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Combination Effects > Effect.Appear
    
+
    Combination Effects > Effect.Appear
    
 
    Make an element appear. If the element was previously set to display:none inside the style attribute of the element, the effect will automatically show the element. This means that display must be set within the style attribute of an object, and not in the CSS in the head of the document or a linked file. In other words, this Effect will not work if display:none is set within style tag or linked CSS file. Alternatively, display:none can be set using a document.getElementById script even if no style is set in the style attribute.
    
 
    Examples
    
 
    
diff --git a/_posts/2009-01-01-effect-blinddown.html b/_posts/2009-01-01-effect-blinddown.html
index ee57b76..dab068a 100644
--- a/_posts/2009-01-01-effect-blinddown.html
+++ b/_posts/2009-01-01-effect-blinddown.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Combination Effects > Effect.BlindDown
    
+
    Combination Effects > Effect.BlindDown
    
 
    This effect simulates a window blind, where the contents of the affected elements stay in place.
    
 
    Examples
    
 
    
diff --git a/_posts/2009-01-01-effect-blindup.html b/_posts/2009-01-01-effect-blindup.html
index a73582b..1d6243e 100644
--- a/_posts/2009-01-01-effect-blindup.html
+++ b/_posts/2009-01-01-effect-blindup.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Combination Effects > Effect.BlindUp
    
+
    Combination Effects > Effect.BlindUp
    
 
    This effect simulates a window blind, where the contents of the affected elements stay in place.
    
 
    Examples
    
 
    
diff --git a/_posts/2009-01-01-effect-dropout.html b/_posts/2009-01-01-effect-dropout.html
index f0879ad..f61a039 100644
--- a/_posts/2009-01-01-effect-dropout.html
+++ b/_posts/2009-01-01-effect-dropout.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Combination Effects > Effect.DropOut
    
+
    Combination Effects > Effect.DropOut
    
 
    Makes an element drop and fade out at the same time.
    
 
    Examples
    
 
    
diff --git a/_posts/2009-01-01-effect-fade.html b/_posts/2009-01-01-effect-fade.html
index bd4e7eb..9192253 100644
--- a/_posts/2009-01-01-effect-fade.html
+++ b/_posts/2009-01-01-effect-fade.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Combination Effects > Effect.Fade
    
+
    Combination Effects > Effect.Fade
    
 
    Makes an element fade away and takes it out of the document flow when the effect is complete by setting the CSS display property to none. Opposite of Effect.Appear.
    
 
    Examples
    
 
    
diff --git a/_posts/2009-01-01-effect-fold.html b/_posts/2009-01-01-effect-fold.html
index ab4cd5d..e573bbd 100644
--- a/_posts/2009-01-01-effect-fold.html
+++ b/_posts/2009-01-01-effect-fold.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Combination Effects > Effect.Fold
    
+
    Combination Effects > Effect.Fold
    
 
    Reduce the element to its top then to left to make it disappear.
    
 
    Examples
    
 
    
diff --git a/_posts/2009-01-01-effect-grow.html b/_posts/2009-01-01-effect-grow.html
index 32d56a0..bc15014 100644
--- a/_posts/2009-01-01-effect-grow.html
+++ b/_posts/2009-01-01-effect-grow.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Combination Effects > Effect.Grow
    
+
    Combination Effects > Effect.Grow
    
 
    “Grows” an element into a specific direction (see demo for better understanding).
    
 
    Examples
    
 
    
diff --git a/_posts/2009-01-01-effect-highlight.html b/_posts/2009-01-01-effect-highlight.html
index 3ef4844..6901a8f 100644
--- a/_posts/2009-01-01-effect-highlight.html
+++ b/_posts/2009-01-01-effect-highlight.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Core Effects > Effect.Highlight
    
+
    Core Effects > Effect.Highlight
    
 
    This effect flashes a color as the background of an element. It is mostly used to draw attention to a part of the page that has been updated via JavaScript or AJAX, when the update would not otherwise be obvious.
    
 
    Syntax
    
 
    
diff --git a/_posts/2009-01-01-effect-morph.html b/_posts/2009-01-01-effect-morph.html
index 5fb3a48..4216cd1 100644
--- a/_posts/2009-01-01-effect-morph.html
+++ b/_posts/2009-01-01-effect-morph.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Core Effects > Effect.Morph
    
+
    Core Effects > Effect.Morph
    
 
    This effect changes the CSS properties of an element.
    
 
    Availability
    
 
    script.aculo.us V1.7 and later.
    
diff --git a/_posts/2009-01-01-effect-move.html b/_posts/2009-01-01-effect-move.html
index 6edd616..b4ceada 100644
--- a/_posts/2009-01-01-effect-move.html
+++ b/_posts/2009-01-01-effect-move.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Core Effects > Effect.Move
    
+
    Core Effects > Effect.Move
    
 
    This effect moves an element by modifying its position attributes.
    
 
    Syntax
    
 
    This will move the object to the top left corner of the window (x=0; y=0):
    
diff --git a/_posts/2009-01-01-effect-opacity.html b/_posts/2009-01-01-effect-opacity.html
index 0927d2a..48e98c8 100644
--- a/_posts/2009-01-01-effect-opacity.html
+++ b/_posts/2009-01-01-effect-opacity.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Core Effects > Effect.Opacity
    
+
    Core Effects > Effect.Opacity
    
 
    This effect changes an element’s opacity (transparency).
    
 
    Syntax
    
 
    
diff --git a/_posts/2009-01-01-effect-parallel.html b/_posts/2009-01-01-effect-parallel.html
index a11c771..7883063 100644
--- a/_posts/2009-01-01-effect-parallel.html
+++ b/_posts/2009-01-01-effect-parallel.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Core Effects > Effect.Parallel
    
+
    Core Effects > Effect.Parallel
    
 
    This is a special effect which allows to combine more than one core effect into a parallel effect. It’s the only effect that doesn’t take an element as first parameter, but an array of subeffects.
    
 
    Syntax
    
 
    
diff --git a/_posts/2009-01-01-effect-puff.html b/_posts/2009-01-01-effect-puff.html
index c7aefff..a256183 100644
--- a/_posts/2009-01-01-effect-puff.html
+++ b/_posts/2009-01-01-effect-puff.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Combination Effects > Effect.Puff
    
+
    Combination Effects > Effect.Puff
    
 
    Gives the illusion of the element puffing away (like a in a cloud of smoke).
    
 
    Examples
    
 
    
diff --git a/_posts/2009-01-01-effect-pulsate.html b/_posts/2009-01-01-effect-pulsate.html
index 6f0411b..6eae882 100644
--- a/_posts/2009-01-01-effect-pulsate.html
+++ b/_posts/2009-01-01-effect-pulsate.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Combination Effects > Effect.Pulsate
    
+
    Combination Effects > Effect.Pulsate
    
 
    Pulsates the element, loops over five times over fading out and in.
    
 
    Examples
    
 
    
diff --git a/_posts/2009-01-01-effect-scale.html b/_posts/2009-01-01-effect-scale.html
index 8fdd267..d549c63 100644
--- a/_posts/2009-01-01-effect-scale.html
+++ b/_posts/2009-01-01-effect-scale.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Core Effects > Effect.Scale
    
+
    Core Effects > Effect.Scale
    
 
    This effect changes an elements width and height dimensions and the base for em units. This allows for smooth, automatic relative scaling of elements contained within the scaled element.
    
 
    Syntax
    
 
    
diff --git a/_posts/2009-01-01-effect-scrollto.html b/_posts/2009-01-01-effect-scrollto.html
index 093f7ce..ae2ec80 100644
--- a/_posts/2009-01-01-effect-scrollto.html
+++ b/_posts/2009-01-01-effect-scrollto.html
@@ -7,7 +7,7 @@
 
    
 
    
 
-
    Combination Effects > Effect.ScrollTo
    
+
    Combination Effects > Effect.ScrollTo
    
 
    Scrolls to a specific place in the page.
    
 
    Examples
    
 
    
diff --git a/_posts/2009-01-01-effect-shake.html b/_posts/2009-01-01-effect-shake.html
index cb1a17c..415f4ba 100644
--- a/_posts/2009-01-01-effect-shake.html
+++ b/_posts/2009-01-01-effect-shake.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Combination Effects > Effect.Shake
    
+
    Combination Effects > Effect.Shake
    
 
    Moves the element slightly to the left, then to the right, repeatedly.
    
 
    Examples
    
 
    
diff --git a/_posts/2009-01-01-effect-shrink.html b/_posts/2009-01-01-effect-shrink.html
index 3980407..01ca895 100644
--- a/_posts/2009-01-01-effect-shrink.html
+++ b/_posts/2009-01-01-effect-shrink.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Combination Effects > Effect.Shrink
    
+
    Combination Effects > Effect.Shrink
    
 
    “Shrinks” an element into a specific direction (see demo for better understanding), hides it when the effect is complete.
    
 
    Examples
    
 
    
diff --git a/_posts/2009-01-01-effect-slidedown.html b/_posts/2009-01-01-effect-slidedown.html
index b48326b..083904b 100644
--- a/_posts/2009-01-01-effect-slidedown.html
+++ b/_posts/2009-01-01-effect-slidedown.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Combination Effects > Effect.SlideDown
    
+
    Combination Effects > Effect.SlideDown
    
 
    This effect simulates a window blind, where the contents of the affected elements scroll up and down accordingly.
    
 
    Examples
    
 
    Effect.SlideDown('id_of_element');
diff --git a/_posts/2009-01-01-effect-slideup.html b/_posts/2009-01-01-effect-slideup.html
index 2b499dc..d8bb46d 100644
--- a/_posts/2009-01-01-effect-slideup.html
+++ b/_posts/2009-01-01-effect-slideup.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Combination Effects > Effect.SlideUp
    
+
    Combination Effects > Effect.SlideUp
    
 
    This effect simulates a window blind, where the contents of the affected elements scroll up accordingly.
    
 
    Examples
    
 
    
diff --git a/_posts/2009-01-01-effect-squish.html b/_posts/2009-01-01-effect-squish.html
index 72f5cc4..d60d676 100644
--- a/_posts/2009-01-01-effect-squish.html
+++ b/_posts/2009-01-01-effect-squish.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Combination Effects > Effect.Squish
    
+
    Combination Effects > Effect.Squish
    
 
    Reduce the element to its top-left corner.
    
 
    Examples
    
 
    
diff --git a/_posts/2009-01-01-effect-switchoff.html b/_posts/2009-01-01-effect-switchoff.html
index ae57fe9..344e515 100644
--- a/_posts/2009-01-01-effect-switchoff.html
+++ b/_posts/2009-01-01-effect-switchoff.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Combination Effects > Effect.SwitchOff
    
+
    Combination Effects > Effect.SwitchOff
    
 
    Gives the illusion of a TV-style switch off.
    
 
    Examples
    
 
    
diff --git a/_posts/2009-01-01-effect-tween.html b/_posts/2009-01-01-effect-tween.html
index f1be0c0..ad62af0 100644
--- a/_posts/2009-01-01-effect-tween.html
+++ b/_posts/2009-01-01-effect-tween.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Core Effects > Effect.Tween
    
+
    Core Effects > Effect.Tween
    
 
    This effect tweens between two values and sets a property or calls a method on an object (including DOM elements); or allows for a callback method, which will be automatically bound to the object.
    
 
    Availability
    
 
    script.aculo.us V1.8 and later.
    
diff --git a/_posts/2009-01-01-list-morph-demo.html b/_posts/2009-01-01-list-morph-demo.html
index b7f0718..1f6d21f 100644
--- a/_posts/2009-01-01-list-morph-demo.html
+++ b/_posts/2009-01-01-list-morph-demo.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Demos > List Morph Demo
    
+
    Demos > List Morph Demo
    
 
    This is a demonstration of how Effect.Morph can be used to indicate a list reordering to the user. Click anywhere on the list to initiate a random reorder.
    
 
    /* I don`t know, but this rule hasn`t apliied  */
    
diff --git a/_posts/2009-01-01-slider.html b/_posts/2009-01-01-slider.html
index 043dffd..8d277c2 100644
--- a/_posts/2009-01-01-slider.html
+++ b/_posts/2009-01-01-slider.html
@@ -5,7 +5,7 @@
 
 
    
 
-
    Controls > Slider
    
+
    Controls > Slider
    
 
    Introduction
    
 
    A slider control which can be used to select a single or multiple values from a given range, or even set of values.
    
 
    Syntax
    
diff --git a/_posts/2009-01-01-sortable-create.html b/_posts/2009-01-01-sortable-create.html
index f0908e0..ce82f0a 100644
--- a/_posts/2009-01-01-sortable-create.html
+++ b/_posts/2009-01-01-sortable-create.html
@@ -5,7 +5,7 @@
 
 
    
 
-
    Behaviours > Sortable > create
    
+
    Behaviours > Sortable > create
    
 
    Use Sortable.create to initialize a sortable element.
    
 
    Syntax
    
 
    Use Sortable.create('id_of_container',[options]); to create new Sortables.
    
diff --git a/_posts/2009-01-01-sortable-sequence.html b/_posts/2009-01-01-sortable-sequence.html
index 1741b57..e13c0aa 100644
--- a/_posts/2009-01-01-sortable-sequence.html
+++ b/_posts/2009-01-01-sortable-sequence.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Behaviours > Sortable > sequence
    
+
    Behaviours > Sortable > sequence
    
 
    The Sortable object also provides a function to get a sequence array of the id’s.
    
 
    Syntax
    
 
    
diff --git a/_posts/2009-01-01-sortable-serialize.html b/_posts/2009-01-01-sortable-serialize.html
index c08fde6..425021b 100644
--- a/_posts/2009-01-01-sortable-serialize.html
+++ b/_posts/2009-01-01-sortable-serialize.html
@@ -5,7 +5,7 @@
 ---
 
 
    
-
    Behaviours > Sortable > serialize
    
+
    Behaviours > Sortable > serialize
    
 
    The Sortable object also provides a function to serialize the Sortable in a format suitable for HTTP GET or POST requests. This can be used to submit the order of the Sortable via an Ajax call:
    
 
    
 poststring = Sortable.serialize('id_of_container',[options]);
diff --git a/_posts/2009-01-01-sortable.html b/_posts/2009-01-01-sortable.html
index 8c7b145..00f5bd7 100644
--- a/_posts/2009-01-01-sortable.html
+++ b/_posts/2009-01-01-sortable.html
@@ -5,7 +5,7 @@
 ---
 
 
    
-
    Behaviours > Sortable
    
+
    Behaviours > Sortable
    
 
    A Sortable is a quick way to initialize many Draggable elements in a container element. When you create a new Sortable, it takes care of the creation of the corresponding draggable Droppables.
    
 
    Syntax
    
 
    Use Sortable.create('id_of_container',[options]); to create new Sortables. See Sortable.create. Furthermore, there are special requirements to get sortables to work in FF3 which are also covered in Sortable.create.
    
diff --git a/_posts/2009-01-01-sortables.html b/_posts/2009-01-01-sortables.html
index 9c6bd40..5bc0d0b 100644
--- a/_posts/2009-01-01-sortables.html
+++ b/_posts/2009-01-01-sortables.html
@@ -6,7 +6,7 @@
 
 
    
 
-
    Behaviours > Sortable
    
+
    Behaviours > Sortable
    
 
    A Sortable consists of item elements in a container element. When you create a new Sortable, it takes care of the creation of the corresponding Draggables and Droppables.
    
 
    Creating Sortables
    
 
    Syntax
    
diff --git a/_posts/2009-01-01-style-guide.html b/_posts/2009-01-01-style-guide.html
index fc2d37b..0ae653b 100644
--- a/_posts/2009-01-01-style-guide.html
+++ b/_posts/2009-01-01-style-guide.html
@@ -44,7 +44,7 @@ 
    Including a Path
    
 
    When a document belongs to a specific category, include a path in the beginning of your document.
    
 An example:
    
 Effect.Morph belongs to the Core Effects category. The path for the Effect.Morph document will look like:
    
-
    Core Effects > Effect.Morph
    
+
    Core Effects > Effect.Morph
    
 
    The textile snippet for the above example looks like this:
    
 
    
 p{background:#eee; border-bottom:1px solid #bbb; padding:4px 2px 2px 2px;}. [[Core Effects]] > *Effect.Morph*
diff --git a/_posts/2009-01-01-test-unit-runner.html b/_posts/2009-01-01-test-unit-runner.html
index f58a3f4..c7dfb87 100644
--- a/_posts/2009-01-01-test-unit-runner.html
+++ b/_posts/2009-01-01-test-unit-runner.html
@@ -5,7 +5,7 @@
 
 
    
 
-
    Unit Testing > Test.Unit.Runner
    
+
    Unit Testing > Test.Unit.Runner
    
 
    Introduction
    
 
    Test.Unit.Runner is a utility class for writing unit test cases with an easy to use syntax.
    
 
    Syntax
    
diff --git a/css/docs.css b/css/docs.css
index b3254a3..23ecf2e 100644
--- a/css/docs.css
+++ b/css/docs.css
@@ -1,4 +1,358 @@
 /*
   Scriptaculous Wiki->GitHub Pages CSS
   Not much here for now.
-*/
\ No newline at end of file
+*/
+
+/*
+  template.css
+  Wiki content formatting
+  Keeping this file separate so it can be easily swapped out if you 
+  want to format your wiki content differently from the default.
+*/
+
+/* @section core */
+body, html {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 10px; /* -> 1em */
+  margin: 0;
+  padding: 0;
+}
+
+#content {
+  margin: 0 auto;
+  overflow: visible;
+  width: 80%;
+}
+
+a:link {
+  color: #4183c4;
+  text-decoration: none;
+}
+
+a:hover, a:visited {
+  color: #4183c4;
+  text-decoration: underline;
+}
+
+
+/* @section head */
+#header {
+  background: #9dc569;
+  border-bottom: 1px solid #799851;
+  margin: 0 0 3.0em 0;
+  overflow: hidden;
+  padding: 0.8em 1em;
+  
+  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#aacd7e', endColorstr='#9dc569');
+  background: -webkit-gradient(linear, left top, left bottom, from(#aacd7e), to(#9dc569));
+  background: -moz-linear-gradient(top, #aacd7e, #9dc569);
+}
+
+  #header #internal {
+    margin: 0 auto;
+    overflow: visible;
+    width: 80%;
+    height: 1%;
+  }
+
+  h2#logo {
+    background: transparent url(/scriptaculous/images/logo.png) top left no-repeat;
+    display: block;
+    float: left;
+    height: 45px;
+    margin: 0 0 0 -0.5em;
+    overflow: hidden;
+    padding: 0;
+    text-indent: -5000px;
+    width: 238px;
+  }
+  
+  #header #navbar {
+    float: right;
+    list-style-type: none;
+    margin: 0;
+    overflow: hidden;
+    padding: 1.3em 0 0;
+  }
+  
+    #header #navbar li {
+      float: left;
+      font-size: 1.2em;
+      line-height: 1.6em;
+      list-style-position: inside;
+      margin-left: 1.0em;
+    }
+    
+    #header #navbar li a:link, 
+    #header #navbar li a:hover,
+    #header #navbar li a:visited {
+      color: #fff;
+      text-shadow: 0 1px 0 #627b41;
+    }
+
+
+
+h1#page-title {
+  border-bottom: 1px solid #ddd;
+  font-size: 3.3em;
+  line-height: normal;
+  margin: 0 0 0.2em 0;
+  padding: 0 0 0.2em 0;
+}
+  
+  
+/* @section content */
+#content {
+  height: 1%;
+  overflow: visible;
+}
+
+  /* @section body */
+  #wiki {
+    float: left;
+    margin-right: 3%;
+    width: 70%;
+  }
+  
+  /* @section rightbar */
+  #sidebar {
+    float: right;
+    overflow: hidden;
+    width: 23%;
+    margin-bottom: 4em;
+  }
+  
+  #sidebar {
+    background-color: #f7f7f7;
+    border: 1px solid #ddd;
+    margin-top: 1.5em;
+    padding: 1em;
+    
+    border-radius: 0.5em;
+    -moz-border-radius: 0.5em;
+    -webkit-border-radius: 0.5em;
+  }
+  
+    #sidebar {
+      font-size: 1.2em;
+      line-height: 1.5em;
+    }
+    
+    #sidebar h3 {
+      font-size: 1.2em;
+      color: #333;
+      margin: 0;
+      padding: 0;
+      text-shadow: 0 1px 0 #fff;
+    }
+    
+    #sidebar ul {
+      margin: 0.5em 0 1em;
+      overflow: hidden;
+      padding: 0;
+    }
+    
+    #sidebar ul li {
+      color: #bbb;
+      list-style-position: outside;
+      list-style-type: none;
+      margin: 0 0 0 1em;
+      padding: 0;
+      line-height: 1.75em;
+    }
+    
+    #sidebar ul li:hover {
+      list-style-type: square;
+    }
+    
+    #sidebar ul li a {
+      font-weight: bold;
+      text-shadow: 0 1px 0 #fff;
+    }
+  
+  /* @section footer */
+  #footer {
+    clear: both;
+    border-top: 1px solid #ccc;
+    margin: 2em 0 7em;
+  }
+  
+  #footer p {
+    font-size: 1.2em;
+    line-height: 1.6em;
+    color: #999;
+    margin: 0.9em 0;
+  }
+
+
+/* @section nav-chiclet */
+#wiki p.upper-chiclet {
+  border: 1px solid #ddd;
+  background-color: #f7f7f7;
+  color: #333;
+  font-weight: bold;
+  margin: 1.3em 0 1em;
+  padding: 0.5em 1em;
+  text-shadow: 0 1px 0 #fff;
+  
+  border-radius: 0.5em;
+  -moz-border-radius: 0.5em;
+  -webkit-border-radius: 0.5em;
+}
+
+
+/* @section wiki */
+#wiki {
+  padding-bottom: 3em;
+}
+
+#wiki p {
+  font-size: 1.4em;
+  line-height: 1.6em;
+  margin: 0 0 1.0em;
+}
+
+#wiki a:link {
+  color: #4183c4;
+  text-decoration: none;
+}
+
+#wiki a:hover, #wiki a:visited {
+  text-decoration: underline;
+}
+  
+#wiki ul, #wiki ol {
+  margin: 1em 0 1em 2.0em;
+  list-style-position: outside;
+  padding: 0;
+  
+}
+
+#wiki p + ul, #wiki p + ol,
+#wiki ul li > ul, #wiki ol li > ol {
+  margin-top: 0;
+}
+
+#wiki ul li > ul, #wiki ol li > ol {
+  margin-left: 0;
+}
+
+  #wiki ul {
+    list-style-type: square;
+  }
+  
+  #wiki ol li > ol li {
+    font-size: 1.0em !important;
+    list-style-type: lower-roman;
+    list-style-position: inside;
+  }
+  
+  #wiki ol li > ol li > ol li {
+    list-style-type: lower-alpha;
+  }
+  
+  #wiki ol li > ol li > ol li > ol li {
+    list-style-type: lower-greek;
+  }
+
+#wiki ul li, #wiki ol li {
+  font-size: 1.4em;
+  line-height: 1.6em;
+  padding-top: 0.1em; /* Line up ordinals */
+}
+
+#wiki blockquote {
+  margin: 0 4.0em 0 2.0em;
+  padding: 0;
+}
+
+  #wiki blockquote p {
+    color: #888;
+    font-style: italic;
+  }
+
+
+/* Headings */
+#wiki h1, #wiki h2, #wiki h3,
+#wiki h4, #wiki h5, #wiki h6 {
+  margin: 0;
+  padding: 0.5em 0 0.2em;
+}
+
+#wiki h1 {
+  font-size: 2.6em;
+  font-weight: bold;
+}
+
+#wiki h2 {
+  font-size: 2.2em;
+  font-weight: bold;
+}
+
+#wiki h3 {
+  font-size: 2.0em;
+  font-weight: bold;
+}
+
+#wiki h4 {
+  font-size: 1.8em;
+  font-weight: bold;
+}
+
+#wiki h5 {
+  font-size: 1.6em;
+  font-weight: bold;
+
+}
+
+#wiki h6 {
+  font-size: 1.4em;
+  font-weight: bold;
+  margin-top: 1.0em;
+  text-transform: uppercase; /* all caps */
+}
+
+/* Code-related */
+#wiki p code {
+  background-color: #f7f7f7;
+  border: 1px solid #ddd;
+  color: #222; /* This is a little heavy when #000 */
+  font-size: 0.9em;
+  font-family: Consolas, Monaco, "Courier New", monospace;
+  padding: 0.15em 0.3em;
+}
+
+#wiki table, #wiki table tbody {
+  border-collapse: collapse;
+  margin: 1em 0;
+  width: 100%;
+}
+
+#wiki table tbody tr th {
+  color: #666;
+  font-size: 1.2em;
+  font-weight: bold;
+  line-height: 1.6em;
+  padding: 0.3em 0.5em;
+  text-align: left;
+}
+
+#wiki table tbody tr td {
+  border: 1px solid #ddd;
+  padding: 0.3em 0.5em;
+  font-size: 1.2em;
+  line-height: 1.6em;
+}
+
+#wiki table tbody tr:nth-child(2n) {
+  background-color: #f7f7f7;
+}
+
+#wiki pre {
+  padding: 1.2em;
+}
+
+#wiki pre code {
+  font-size: 1.2em;
+  line-height: 1.6em;
+}
\ No newline at end of file
diff --git a/images/logo.png b/images/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4c3bcd2e1e2a7a5af9d49c08d5394770eeec5fa
GIT binary patch
literal 16322
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
NLPS=$QcyqO{{XTwk}3cI

literal 0
HcmV?d00001


From c69e02491f42125d282b91e5e6459f47e05b0fbb Mon Sep 17 00:00:00 2001
From: Eston Bond 
Date: Thu, 28 Oct 2010 18:01:34 -0700
Subject: [PATCH 08/20] Fixing sidebar link URI

---
 _layouts/default.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index 8e60a62..ebcc4fb 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -37,7 +37,7 @@ 
    Pages
    
         {% if page.title == post.title %}
           
  • {{ page.title }}
    • 
         {% else %}
-          
  • {{ post.title }}
    • 
+          
  • {{ post.title }}
    • 
         {% endif %}
       {% endfor %}
       

From 570d4c69aef933a6ed0c431c8aecec8ef5324832 Mon Sep 17 00:00:00 2001
From: Eston Bond 
Date: Thu, 28 Oct 2010 18:05:00 -0700
Subject: [PATCH 09/20] Keep code within code blocks

---
 css/docs.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/css/docs.css b/css/docs.css
index 23ecf2e..bce20ea 100644
--- a/css/docs.css
+++ b/css/docs.css
@@ -355,4 +355,5 @@ h1#page-title {
 #wiki pre code {
   font-size: 1.2em;
   line-height: 1.6em;
+  overflow: hidden; /* keep it within the bounds */
 }
\ No newline at end of file

From 469d14f33ceb40f363e36063a6dbba4f71db370d Mon Sep 17 00:00:00 2001
From: Eston Bond 
Date: Thu, 28 Oct 2010 18:06:23 -0700
Subject: [PATCH 10/20] Try to solve static issues with 301 -> 200 redirects

---
 _layouts/default.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index ebcc4fb..e5b51aa 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -37,7 +37,7 @@ 
    Pages
    
         {% if page.title == post.title %}
           
  • {{ page.title }}
    • 
         {% else %}
-          
  • {{ post.title }}
    • 
+          
  • {{ post.title }}
    • 
         {% endif %}
       {% endfor %}
       

From 5649792a48aa5cf2b66a6fb33fd3e004e89dc4cf Mon Sep 17 00:00:00 2001
From: Eston Bond 
Date: Thu, 28 Oct 2010 18:08:40 -0700
Subject: [PATCH 11/20] Clearing out cruft

---
 _posts/2009-01-01-giving-elements-layout.html | 9 ---------
 1 file changed, 9 deletions(-)
 delete mode 100644 _posts/2009-01-01-giving-elements-layout.html

diff --git a/_posts/2009-01-01-giving-elements-layout.html b/_posts/2009-01-01-giving-elements-layout.html
deleted file mode 100644
index 9acafb4..0000000
--- a/_posts/2009-01-01-giving-elements-layout.html
+++ /dev/null
@@ -1,9 +0,0 @@
----
-layout: default
-title: Giving Elements Layout
----
-
-
    
-
    This page needs to be deleted, sorry for the inconvenience.
    
-
    Do not create a wiki page if you do not know what you are doing.
    
-
    
\ No newline at end of file

From 6fe01817688cd03123de3ebdd59667115144dace Mon Sep 17 00:00:00 2001
From: Thomas Fuchs 
Date: Wed, 3 Nov 2010 18:15:26 +0100
Subject: [PATCH 12/20] ignore dist dir

---
 .gitignore | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 496ee2c..c3c5eb9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-.DS_Store
\ No newline at end of file
+.DS_Store
+dist/
\ No newline at end of file

From b3ceefe28ee857af3bb5b57a2cea859083daa1b8 Mon Sep 17 00:00:00 2001
From: Thomas Fuchs 
Date: Wed, 3 Nov 2010 18:15:43 +0100
Subject: [PATCH 13/20] documentation layout tweaks, tracker code

---
 _layouts/default.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index e5b51aa..e140f7e 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,19 +1,13 @@
-
-
-
+
+
 
   {{ page.title }} — Scriptaculous Documentation
-  
-  
+    
   
-  
   
   
 
-  
 
-
 
+
 
    
   
    {{ page.title }}
    
   
    
@@ -43,9 +38,14 @@ 
    Pages
    
       
   
      
   
 
    
 
+
+
+
 
 
\ No newline at end of file

From 9b7e99c4195d10ce0dfe3265859cf6fddd15bb53 Mon Sep 17 00:00:00 2001
From: Thomas Fuchs 
Date: Thu, 4 Nov 2010 07:59:35 +0100
Subject: [PATCH 14/20] fix demo styling

---
 .../2009-01-01-combination-effects-demo.html  | 27 ++++++++++---------
 _posts/2009-01-01-puzzle-demo.html            |  7 +++--
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/_posts/2009-01-01-combination-effects-demo.html b/_posts/2009-01-01-combination-effects-demo.html
index 99ba506..46fdf82 100644
--- a/_posts/2009-01-01-combination-effects-demo.html
+++ b/_posts/2009-01-01-combination-effects-demo.html
@@ -6,19 +6,20 @@
 
 
    
 
-
    .c {
    
-	width: 120px;
    
-	height: 120px;
    
-	float: left;
    
-	border-bottom: 1px solid #bbb;
    
-	padding: 4px 2px 2px 2px;
    
-}
    
-.example{
    
-	background: #fef4d8;
    
-	height: 120px;
    
-}
    
-
+
+
 
    These are the combination effects which are included in script.aculo.us:
    
 
      
 
    • Effect.Appear, Effect.Fade
      • 
diff --git a/_posts/2009-01-01-puzzle-demo.html b/_posts/2009-01-01-puzzle-demo.html
index 85e3a1f..4fc606a 100644
--- a/_posts/2009-01-01-puzzle-demo.html
+++ b/_posts/2009-01-01-puzzle-demo.html
@@ -8,10 +8,9 @@
 
      Demos > Puzzle Demo
      
 
      This is an example showing how to implement a simple puzzle game with Sortables.
      
 
      /* I don`t know, but this rule hasn`t apliied  */
      
-#puzzle { width:450px; }
      
-.congrats { color: #fff; background: #080 }
      
-
+#puzzle { width:450px; }
+.congrats { color: #fff; background: #080 }
+
 
      
 
 

From 0a7d93d2ed33839d41362fbcdd9b0686bec7c4ea Mon Sep 17 00:00:00 2001
From: Thomas Fuchs 
Date: Thu, 4 Nov 2010 08:05:30 +0100
Subject: [PATCH 15/20] one more fix

---
 _posts/2009-01-01-combination-effects-demo.html | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/_posts/2009-01-01-combination-effects-demo.html b/_posts/2009-01-01-combination-effects-demo.html
index 46fdf82..20b2b40 100644
--- a/_posts/2009-01-01-combination-effects-demo.html
+++ b/_posts/2009-01-01-combination-effects-demo.html
@@ -9,15 +9,14 @@
 
 
 
      These are the combination effects which are included in script.aculo.us:
      

From aef69b8e5cd5fc282edabe27fcd9fe14ba2a581c Mon Sep 17 00:00:00 2001
From: Thomas Fuchs 
Date: Thu, 4 Nov 2010 09:00:58 +0100
Subject: [PATCH 16/20] remove weird broken thing

---
 _posts/2009-01-01-camus.html | 23 -----------------------
 1 file changed, 23 deletions(-)
 delete mode 100644 _posts/2009-01-01-camus.html

diff --git a/_posts/2009-01-01-camus.html b/_posts/2009-01-01-camus.html
deleted file mode 100644
index d60bcf4..0000000
--- a/_posts/2009-01-01-camus.html
+++ /dev/null
@@ -1,23 +0,0 @@
----
-layout: default
-title: Camus
----
-
-
      
-
      
-
-
      
-
-
      
-
-
      <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” 
      
-        “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
      
-
      
\ No newline at end of file

From 8179708dca089d0224c48a502c20d3abbca82072 Mon Sep 17 00:00:00 2001
From: Thomas Fuchs 
Date: Thu, 4 Nov 2010 09:02:20 +0100
Subject: [PATCH 17/20] link logo to start page of docs

---
 _layouts/default.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index e140f7e..6d71f8e 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -10,7 +10,7 @@
 
 
    
 
    You can also combine them but you need to make sure you create the tbody tag or it will not work in IE.  I have tested this in FF 1.5 and IE 6.  I don’t have access to other browsers.  The one problem that I have found is that with TR and TD elements you can not put a style tag on them as it just makes IE stop doing the Builder Function.
    
diff --git a/_posts/2009-01-01-effect-morph.html b/_posts/2009-01-01-effect-morph.html
index 4216cd1..9f53e16 100644
--- a/_posts/2009-01-01-effect-morph.html
+++ b/_posts/2009-01-01-effect-morph.html
@@ -65,7 +65,6 @@ 
    Details
    
 
    Effect.Morph takes orginal styles given by CSS style rules or inline style attributes into consideration when calculating the transforms. It works with all length and color based CSS properties, including margins, paddings, borders, opacity and text/background colors.
    
 
    Implementation Details
    
 
    Because Effect.Morph queries the original values with Prototype’s Element.getStyle API, it doesn’t matter whether these styles are set inline or in an external stylesheet definition. Of course the effect supports all usual options, like duration or transition.
    
-
    Любите проституток на досуге? Проститутки Москвы доставят лучшее удовольствие в Москве.

    
 
    
 
+