Quick Jump ↵
Your job…
Review, tweak and add the code below inside your <head> tag…
<head>
Magic JS is built around HTML5's data- attribute – don't stuff your tags full of invalid code. :)
data-
$m.construct() is passed an object full of settings. Below are descriptions for ones that aren't overly self-explanatory:
$m.construct()
global_debug
animations.use
$m.wand
$m.trick
ajax.debug
true
ajax.visual
ajax_visual
ajax.timeout
geo.use
geo.debug
geo.visual
geo_visual
send_timezone_to
<script>
src
?tz=
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.
wand..js
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.
id
data-mjf
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.
onclick
onsubmit
<a href="http://www.google.com" data-mjf="lightswitch">
href
data-mjf="MAGIC|return_false"
If the site uses Google Analytics, Magic JS will send click tracking for the following Darkroom, Dynamic Tabs, Open New Win and all AJAX requests by default.
data-mjf_ga_track="false"
hi@magicjs.com serious inquiries only, no jokers.
Confirm Click — Bring up an Ok or Cancel confirmation box $m.wand.confirm_click
Confirm Unload — Let the visitor know they're about to navigate away $m.wand.confirm_unload
CSS Class Update — Easily change an element's CSS class $m.wand.css_class_update
Deferred Load $m.wand.deferred_load
Dropdown Menu $m.wand.dropdown_menu
Dynamic Tabs $m.wand.dynamic_tabs
Empty Element (via click) — Clear an element's innerHTML $m.wand.empty_onclick
Fire Any Event $m.wand.fire_event
Frame Reload $m.wand.frame_reload
Geolocation $m.wand.geo_get
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) – Delete an element entirely from the DOM $m.wand.remove_onclick
Same Height — Resize a parent's kids to be the same height $m.wand.same_height
Smooth Scroll To $m.wand.smooth_scroll_to
Simple Image Slideshow $m.wand.img_slideshow
Text Resizer $m.wand.text_resize
Tool Tips $m.wand.tool_tip
Add Commas $m.wand.add_commas
Changed Form Alert – Alert 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 Another Field On Focus $m.wand.check_other_onfocus
Checked Picker $m.wand.checked_picker
Clear All Fields (via click) $m.wand.clear_onclick
Clear Individual Fields (via focus) $m.wand.clear_onfocus
Clear Individual Fields (via load) $m.wand.clear_onload
Copy Fields from One to Another $m.wand.copy_fields
Copy a Field's Value to another Element's innerHTML $m.wand.copy_value_to_html
Convert Fields to URL Friendly Fields $m.wand.s2lcus
Elastic Textareas $m.wand.elastic_textareas
Enable/Disable Fields when Clicking Another Field $m.wand.click_enable_disable
Form Submission (via click) $m.wand.submit_onclick
Form Validation $m.wand.form_required
Password Stength Checker $m.wand.password_strength_checker
AJAX On Change $m.wand.ajax_change
AJAX On Click $m.wand.ajax_click
AJAX On Load $m.wand.ajax_onload
AJAX Polling $m.wand.ajax_polling
AJAX Unload $m.wand.ajax_unload
Field Submission (via click) $m.wand.ajax_field_submit_click
Field Submission (via keyup/change) $m.wand.ajax_field_submit_kc
Form Submission $m.wand.ajax_submit
Form Submission (via click) $m.wand.ajax_submit_link
Form Submission (via keyup/change) $m.wand.ajax_submit_kc
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
Requests will send a unique name/value pair to the server. This will be something like ajax_call=1322598771903.
ajax_call=1322598771903
Requests are queued automatically for delivery by the browser based on the visitor's request order.
The data-mjf_ajax_XYZ attributes are…
data-mjf_ajax_XYZ
data-mjf_ajax_call_on_success="FUNCTION_NAME"
$m.ajax.simple_content_update
data-mjf_ajax_call_on_success="magic_json"
data-mjf_ajax_form_reset="true(OR)false"
false
data-mjf_ajax_method="get(OR)post"
get
data-mjf_ajax_query="NAME=VAR&NAME_2=VAR_2"
data-mjf_ajax_timeout="N"
N
data-mjf_ajax_update_id
data-mjf_ajax_update_id="ELEMENT_ID"
data-mjf_ajax_update_id_action="overwrite(OR)append(OR)prepend"
overwrite
data-mjf_ajax_update_id_scroll_top="true"
overflow
data-mjf_ajax_update_id_scroll_to="true"
data-mjf_ajax_username="USERNAME"
data-mjf_ajax_password="PASSWORD"
data-mjf_ajax_url="/PATH/TO/SERVER/SCRIPT/"
Darkroom () — Showing all kinds of content in a pop-up
Drag N Drop () — Move stuff around
Gmaps () — Talk to Google Maps
Magic Calendar () — Save the date in a pop-up you can actually see
Magic Charts () — Charting with <canvas> and <svg> coming soon
<canvas>
<svg>
Magic Editor () — Formatting content in a rich-text editor
Magic Ratings () — Star it like a pro
Motion () — Animation prototypes
New Form Fields () — Creating new form fields on the fly
String Deposit () — Insert text strings into the Magic Editor and other form fields
The older the version, the less likely the version notes will be accurate.
$m.media.supports.flash()
<video>
data-mjf_h5v_dims
color
date
datetime
datetime-local
email
month
number
search
tel
time
url
week
$m.tag.get_body(IN_PARENT)
body
$m.tag.get_head(IN_PARENT)
head
$m.tag.remove_children(TAG_ID)
$m.tag.html(IN_ID, IN_CONTENT, IN_HOW, IN_ENCODED)
IN_CONTENT
.lightswitch_block
.lightswitch_none
cursor:pointer !important
$m.storage
$m.app_cache.available
$m.vd.is_online
$m.tag.get_iframe_doc()
$m.storage.get.page_code(IN_STRING)
$m.storage.remove(IN_TABLE, IN_ID)
class
$m.config.basedir
$m.tag.replace(IN_OLD, IN_NEW)
$m.cursor.set(IN_ID, IN_POS)
$m.config.ajax.use
$m.selection.replace(IN_HTML, IN_DOCUMENT)
$m.insert_node_at_selection_point()
result_set
$m.tag.get_iframe_doc(in_id)
$m.tag.create(IN_PARENT, IN_TYPE, IN_ATTS, IN_HTML, IN_WHERE, IN_DOCUMENT)
document
data-mjf_resize_id=""
style
data-mjf_lswitch_animate_increments="0"
form action
$m.css_class.add(IN_ID, IN_CLASS)
console.log()
$m.event.get(IN_EVENT)
$m.event.get_target(IN_EVENT)
$m.get_query_string(IN_OBJECT)
$m.query_string.create(IN_OBJECT)
$m.query_string.parse(IN_STRING)
$m.tag.get_prev_sibling(IN_ID)
$m.tag.get_next_sibling(IN_ID)
$m.is.good_string(IN_OBJECT)
$m.storage.create.data_record(IN_ID, IN_COLUMN, IN_VALUE)
$m.storage.get.page_tiny_id(IN_STRING)
$m.ut.friendly_url(IN_STRING)
var my_ajax = new $m.ajax()
data-mjf_ajax_update_id_overwrite
window.localStorage
document.cookie
window.indexedDB
$m.cookies
style.opacity
1
images/icons/
/advertiser
NS_ERROR_NOT_AVAILABLE
$m.ut.add_commas(IN_STRING)
$m.h.animations.opaque.set()
style.filter
data-mjf_cf_only_empty="true"
data-mjf_asl_name_value="NAME=VALUE"
data-mjf_asl_action=""
<input>
$m.h.form_required.valid_forms[]
$m.de.throw_fatal(IN_MSG)
$m.attr.set()
$m.stop_bubble()
$m.css_class.add()
$m.ajax.update_queue()
$m.config.ajax.use === false
tool_tip_cont
$m.document
$m.ajax.request.update_id
.ajax_visual_content
magic.12.7.7.css
data-mjf_h5v_autoload="true"
data-mjf_h5v_autoplay="true"
method
data-mjf_err_parent="PARENT_ID"
window.event
css_versions
lang : "en_us"
en_us
basedir : "/PATH/TO/"
magic.src.js
$m.trim(IN_STRING)
$m.get_keycode(IN_KEYCODE)
$m.keycode.get(IN_KEYCODE)
$m.is_worthy_keycode(IN_KEYCODE)
$m.keycode.is_worthy(IN_KEYCODE)
$m.get_mouse_btn(IN_EVENT)
$m.mouse_btn.get(IN_EVENT)
$m.ev(IN_STRING)
$m.ev.all(IN_STRING)
$m.ev_script(IN_STRING)
$m.ev.script(IN_STRING)
wand.src.js
$m.wand.ajax_auto
$m.wand.ajax_polling
basedir : "/resources/javascript/magic/"
$m.find_baseurl()
/PATH/TO/magic/_versions.js
data-mjf_ajax_click_method
data-mjf_ajax_method
$m.wand.ajax_change
$m.wand.ajax_kc
onkeyup
$m.smooth_scroll.construct(IN_ID, IN_MINUS_PADDING_TOP, IN_MINUS_PADDING_LEFT)
IN_MINUS_PADDING_TOP
IN_MINUS_PADDING_LEFT
$m.tags.remove
$m.tags.remove.empty
$m.tag.clone()
$m.tag.replace()
$m.tag.remove()
Enter
Return
$m.ajax.just_html_update()
<input type="text">
<textarea>
<select>
setAttribute()
getAttribute()
$m.ajax.active.state
$m.ajax.active.msg
$m.shortcut
$m.ajax.request_failed()
$m.ev_script()
$m.smooth_scroll
$m.smooth_scroll_overflow
_gag
$m.scroll_to_id
$m.scroll_top
$m.element.attach()
addEventListener()
attachEvent()
$m.element.detach()
removeEventListener()
detachEvent()
$m.try_json_unpack()
JSON.parse()
$m.scroll_top()
scrollTop = 0
$m.de.get_tricks()
data-mjf_ajax_update_id_scroll_to
$m.scroll_to_id();
display: table-row
data-mjf_ajax_form_reset
$m.wand.ajax_submit
$m.wand.submit_onclick
.ajax_visual_form
mjf_config
magic.11.11.29.js
trick
$m.init_tag()
assist/json2.js
dropdown_menu.css
ajax_lookup.css
$m.strip_tags()
$m.strip_tags_from_id()
$m.ut.decode_entities()
mjf_config.send_timezone_to
motion.js
$m.wand.s2lcus
$m.wand.copy_fields
magic.10.12.20
<option value="">
mjf_config.animations.use
mjf_config.global_debug
"low"
"high"
$m.wand.clear_onclick
10.9.15
data-mjf_ga_track_ext
data-mjf_ga_track_ext_cat
/
$m.wand.change_field_type
wand
$m.wand.js
data-mjf_lswitch_use_css="false"
data-mjf_lswitch_cookie="false"
data-mjf_dr_hide="false"
$m.set_cursor = function(in_id, in_pos)
data-mjf_ajax_update_id_scroll_top
data-m="WHATEVER"
data-mjf="WHATEVER"
data-(!mjf)="WHATEVER"
data-(mjf_*)="WHATEVER"
data-mjf="|return_false"
$m.remove_tag()
new_form_fields.js
<a>
document.all[in_id].attributes[in_attribute].value
#
setTimeout()
<a href="/page.html">
<a href="http://www.domain.com/page.html">
.ajax_visual
var config = { }
pages.css
$m.de.construct()
this.new_document.close()
top_msg
Under heavy development - not for production use.
$m
*.src.js
Magic JavaScript