Magic JavaScript

These docs are not guaranteed to be complete or accurate. They should be close though.

Review online documentation.
Download: .
Unzip and upload to your website.
Follow usage instructions below and as needed.

Usage

→ Review, tweak and add the code below inside your <head> tag:

Notes

Magic JS is built around HTML5's data- attribute – don't stuff your tags full of invalid code. :)
$m.construct() is passed an object full of settings. Below are descriptions for ones that aren't overly self-explanatory:
- global_debug - turns on global debugging via pop-up window.
- animations.use - determines if CSS/JavaScript transitions are used. Some $m.wand and $m.trick items use these and some don't.
- ajax.debug - turns on AJAX debugging, set to low or high and be sure global_debug is set to true.
- ajax.visual - determines if the CSS class ajax_visual is applied to the element making the request.
- ajax.timeout - determines how long Magic will wait before giving up on a request.
- send_timezone_to - after the page loads, Magic will insert a <script> tag with the src attribute set to this value along with ?tz= and the browser's timezone.
It's not required to include the wand..js on your page. However, all the built-in functionality for Easies, Forms and AJAX lives there.
Be sure to include a unique id attribute on tags you add the data-mjf to, otherwise the magic will probably not work the way you expect or want them to. Plus non-unique IDs aren't valid HTML.
The data-mjf values are followed like a chain and will return true, executing each event until finished. This includes the default element action – onclick, onsubmit, etc.
- For example, if you have <a href="http://www.google.com" data-mjf="lightswitch">, the href will be followed since it's the default action.
- To stop the default action, add data-mjf="MAGIC|return_false" to your tag. This should be noted throughout the examples.
- The data-mjf values also DO NOT act independently of one another with regards to return values. If one returns false, the remaining WILL NOT be executed.
Google Analytics will track the following by default: Darkroom, Dynamic Tabs, Open New Win and all AJAX requests if the site uses it.
- Add data-mjf_ga_track="false" if you don't want Google Analytics to track the particular item.

Contact

→ [email protected] ← seriously inquiries only, no jokers.

Easy examples of core functionality.

Examples

Confirm Click
$m.wand.confirm_click
CSS Class Update
$m.wand.css_class_update
Dropdown Menu
$m.wand.dropdown_menu
Dynamic Tabs
$m.wand.dynamic_tabs
Empty Element (via click)
$m.wand.empty_onclick
Fire Any Event
$m.wand.fire_event
Frame Reload
$m.wand.frame_reload
Google Analytics Click Tracking
$m.wand.ga_click_track
HTML5 Audio
$m.wand.html5_audio
HTML5 Video
$m.wand.html5_video
Image Rollovers
$m.wand.img_rollovers
Light Switch
$m.wand.lightswitch
Open New Windows
$m.wand.open_new_win
Print the Page (via click)
$m.wand.print_onclick
Print the Page (via load)
$m.wand.print_onload
Remove Element (via click)
$m.wand.remove_onclick
Simple Image Slideshow
$m.wand.img_slideshow
Text Resizer
$m.wand.text_resize
Tool Tips
$m.wand.tool_tip

Notes

Review the Multiple Magics to learn how to chain functionality.

Working with forms and fields.

Examples

Alerting the visitor when navigating away from a changed form
$m.wand.form_changed_alert
Change Field Type
$m.wand.change_field_type
Check All Checkboxes
$m.wand.check_all_boxes
Check Other On Focus
$m.wand.check_other_onfocus
Checked Picker
$m.wand.checked_picker
Clearing All Fields (via click)
$m.wand.clear_onclick
Clearing Individual Fields (via focus)
$m.wand.clear_onfocus
Clearing Individual Fields (via load)
$m.wand.clear_onload
Copying Fields from One to Another
$m.wand.copy_fields
Converting Fields to URL Friendly Fields
$m.wand.s2lcus
Enable/Disable Fields when Clicking Another Field
$m.wand.click_enable and $m.wand.click_disable
Form Submission (via click)
$m.wand.submit_onclick
Form Validation
$m.wand.form_required

Built-in AJAX magic.

Examples

Anchor On Click
$m.wand.ajax_click
Auto Polling
$m.wand.ajax_polling
Form Submission
$m.wand.ajax_submit
Form Submission (via click)
$m.wand.ajax_submit_link
Input On Keyup/Change
$m.wand.ajax_kc
Predefined JSON parsing
Magic can parse a returned JSON object if you want to do more advanced things with the returned data

Notes

AJAX support is turned off by default!

Change ajax : { use : false to ajax : { use : true in the $m.construct() method call at the top of your page to turn it on.
Requests will send a unique name/value pair to the server. This will be something like ajax_call=1322598771903.
Requests are queued for delivery based on the visitor's request order.
The data-mjf_ajax_XYZ attributes are:
- data-mjf_ajax_call_on_success="FUNCTION_NAME()"
  - custom JavaScript callback after a successful AJAX request
  - defaults to $m.ajax.simple_content_update()
  - use data-mjf_ajax_call_on_success="magic_json" to use the Predefined JSON parsing
- data-mjf_ajax_form_reset="true(OR)false"
  - applies only to Form Submit
  - defaults to false
- data-mjf_ajax_method="get(OR)post"
  - applies to everything but Form Submit
  - defaults to get
- data-mjf_ajax_query="NAME=VAR&NAME_2=VAR_2"
  - applies to everything but Form Submit
  - any query variables you'd like to pass to the server
- data-mjf_ajax_timeout="N"
  - With N being the number of seconds before the request times out and a message is appended to the data-mjf_ajax_update_id
  - defaults to ajax.timeout set in the main $m.construct() method.
- data-mjf_ajax_update_id="ELEMENT_ID"
  - the element id where the returned server data will be put
  - * required unless using data-mjf_ajax_call_on_success="magic_json"
- data-mjf_ajax_update_id_action="overwrite(OR)append(OR)prepend"
  - overwrite, append or prepend the current content in data-mjf_ajax_update_id
  - defaults to overwrite
- data-mjf_ajax_update_id_overwrite="true(OR)false" – deprecated
  - should we overwrite the current content in data-mjf_ajax_update_id or just add to it?
  - currently only MSIE will retain form field values if you append content
  - defaults to true
- data-mjf_ajax_update_id_scroll_top="true"
  - scroll to the top of the data-mjf_ajax_update_id after a successful AJAX request
    - useful if your update_id uses the CSS overflow property
  - defaults to false
- data-mjf_ajax_update_id_scroll_to="true"
  - scroll to the data-mjf_ajax_update_id after a successful AJAX request
  - defaults to false
- data-mjf_ajax_url="/PATH/TO/SERVER/SCRIPT/"
  - applies to everything but Form Submit
  - * required

Extending that core functionality.

Tricks

Darkroom ()
Showing all kinds of content in a pop-up
Drag N Drop ()
Move stuff around
1. Free Range Any Where Drag
2. Free Range Title Drag
3. Sorting Boxes
4. Sorting Boxes with Add (via click)
5. Sorting Boxes with Add (via drag in)
Magic Calendar ()
Save the date in a pop-up you can actually see
Magic Charts ()
All kinds of <canvas> charts
Magic Editor ()
Formatting content in a rich-text editor
Motion ()
Animation prototypes
1. Fade In and Out
  Fading in and out
2. Flick
  Up and down and up scrolling
3. Swipe
  Left to right to left scrolling
4. VScroller
  Vertical up scrolling
New Form Fields ()
Creating new form fields on the fly

Under the hood changes.

To Do

A loose list of what needs done.

→ Misc

Add Defaults CSS to MJS.

→ magic.src.js

Rewrite:
- top_msg for AJAX and other errors.
- Various pieces to optimize for browser features.
- Various pieces and don't put id into arrays when they're actually href - see Dynamic Tabs.
Test:
- AJAX JSON timeouts.
Build:
- User-defined AJAX JSON update delays.
- Local storage.
Document:
- Internal Magic methods and properties.

→ wand.src.js

Add:
- Option to $m.wand.ajax_click to append or replace data-mjf_ajax_query=""
Fix:
- Dynamic Tabs keyboard shortcuts in Opera.
Build:
- $m.h.confirm_unload.
- $m.h.ajax_unload.
- $m.h.password_checker.
- Elastic Textareas – padding, font-size, font-family, line-height, width.
Rewrite:
- Light Switch to use CSS3 transitions.
Finish:
- $m.h.table_rower.
- $m.h.geo_get.

→ more_form_magic.src.js

Review/update code.
Event handler to hide the pseudo drop down.
Write documentation.

→ ajax_lookup.src.js

Under heavy development - not for production use.

Review/update code.
Write documentation.

→ Sortable Table Data

Review/update code.
Write documentation.

API

Currently there isn't documentation to utilize the internal properties and methods of the global $m object.
Currently there isn't documentation on writing your own Tricks.
These will become a high priority in the future.
However, the code in the *.src.js files is fairly clean and should be easy to comprehend.

Misc Links

Use at your own risk!

Magic JavaScript document.write($m.versions.magic);

A simple to install, easy to use, JavaScript library/framework with loads of built-in functionality.

These docs are not guaranteed to be complete or accurate. They should be close though.

Easy examples of core functionality.

Working with forms and fields.

Built-in AJAX magic.

Extending that core functionality.

Under the hood changes.

A loose list of what needs done.

→ Misc

→ magic.src.js

→ wand.src.js

→ more_form_magic.src.js

→ ajax_lookup.src.js

→ Sortable Table Data

Magic JavaScript