Available Javascript Functions
video_attributes
By default, this variable is set as follows: var video_attributes = "controls autoplay playsinline";
You can set the video_attributes variable to whatever you'd like - it basically sets the attributes of every video element in your presentation.
centerSlide()
Centers the slide both horizontally and vertically within the browser window.
disableNavButtons()
Disables the next and back buttons in the navigation bar.
enableNavButtons()
Enables the next and back buttons in the navigation bar.
getActiveElement()
Returns the object on the slide that was clicked (for use with the run a custom function option).
getPresentationTime()
Returns the amount of time, in seconds, that the user has been in the module.
getSlideCount()
Returns the total number of slides in a module.
getSlideNumber()
Returns the number of the slide the user is currently viewing.
getSlideTime()
Returns the amount of time, in seconds, that the user has been on the current slide. Note: if a user navigates away from a slide and returns, this value will reset back to 0 each time.
getViewMode()
Returns ‘course’ if it’s being viewed from inside a course, and ‘preview’ otherwise.
getSlideWasViewed( slide_number )
Returns true or false depending on whether or not the user has already viewed the slide (you indicate which slide you want the status of using the parameter slide_number, which is the slide number you want the status of).
getWindowSize( axis )
If “width” (in quotes) is specified for the axis parameter, this returns the width of the browser window in pixels. If “height” (in quotes) is specified for the axis parameter, this returns the height of the browser window in pixels.
hideButtonBar()
Use to hide the bottom-anchored button-bar. If you do this, you will have to add your own buttons on the slide to perform the same functions as those on the button bar (minimally the NEXT function) unless you just want your users to use the table of contents to navigate. You could also use the toggleButtonBar() function to toggle the button bar in and out of view.
hideToc()
Used to hide the Table of Contents.
moveElement ( items, top, left, speed )
Enables you to move an object to new coordinates (either instantly, or via animation).
items is a jQuery query/css selector.
top and left can either be a numeric value, the word 'current' (to not change that value), or a += or -= value (like +=100 to increase by 100 for example). Note these values will automatically scale lower/higher during runtime if the end user resizes the module.
The only required parameter is items.
top and left default to 'current', and speed defaults to 1500 (milliseconds) – which represents the total time to complete the move animation.
moveToSlide( slide_number )
Navigates the user to another slide. Pass “next” (in quotes) as slide_number to navigate to the next slide. Pass “back” (in quotes) as slide_number to navigate to the previous slide. Pass a slide number as slide_number (no quotes) to jump to that slide number.
pinToc()
Pins the Table of Contents window to the current spot on the screen so that it will no longer automatically disappear when the user navigates to another slide.
playAllScenes()
Plays all effect scenes for all objects on the current slide starting at scene 1 through scene 9 (just like if the slide was just brought into view – useful for replaying effects). This function should only be executed after all effects have completed – if you run it during the middle of existing scene animations, the results are not reliable.
playNarration()
Reloads/Restarts the narration for the current slide. The narration will only restart automatically if the narration has been configured to autoplay when the slide comes into view.
playSound ( url_of_mp3 )
Plays the .mp3 audio file located at url_of_mp3 in the background. If a narration is playing when the .mp3 audio file plays, both the narration and the audio file will play at the same time.
positionSlide( in_top, in_left )
Positions the slide in_top pixels from the top edge of the browser window and in_left pixels from the left edge of the browser window. This also turns off the auto-scaling function (where slide canvas stretches with window size) and keeps the size of the slide canvas fixed at 750x450. If you want to locate the slide canvas without turning off the scaling, use CSS to set the margin-top and margin-left of the slide_inner DOM element.
positionToc( top, left )
Positions the Table of Contents window top pixels from the top edge of the browser window and left pixels from the left edge of the browser window.
reloadVideo()
Reloads/Restarts any flash or YouTube videos on the current slide. The videos will only restart automatically if the inserted videos are configured to autoplay.
resizeElement ( items, width, height, speed )
Enables you to resize an object (either instantly, or via animation).
items is a jQuery query/css selector.
width and height can either be a numeric value, the word 'current' (to NOT change that value), or a += or -= value (like +=100 to increase by 100 for example). Note these values will automatically scale lower/higher during runtime if the end user resizes the module.
The only required parameter is items.
width and height default to 'current', and speed defaults to 1500 (milliseconds) – which represents the total time to complete the resize animation.
resizeToc( width, height )
Resizes the Table of Contents window to width pixels wide by height pixels high.
rotate ( items, to_value, increment_value, speed, starting_value )
Use this function to rotate (either instantly, or via a visual animation) objects on your slides.
The two required parameters are items (an unwrapped jQuery query like '.star' or '#slide_inner .slide_image'), and to_value (which is the degrees value to rotate items to). If 0 is passed as increment_value (or no increment value is passed at all), items will be rotated to to_value without animating.
The speed accepts value as milliseconds (1000 = 1 second), and defaults to 250 (milliseconds) if no value is passed. In this case, speed is how long in between each increment, not the overall speed.
The starting_value defaults to 0 (degrees) if no value is passed.
runEffect( effect_type, item_to_animate )
Run an effect of type effect_type on the object item_to_animate. Valid effect_type values are listed in the chart below. A valid item_to_animate value is any jQuery selector query (an object id, class, or any other valid jQuery selector). If you are using this function as a click event you do not need to specify item_to_animate, as it will automatically default to the clicked (active) object.
The available effect types are (you can see previews of each effect in the SlidePoint Editor under the Animate option of the Selection Click Events):
blind
blind_reappear
bounce
clip
clip_reappear
drop
drop_reappear
explode
explode_reappear
fade
fade_reappear
fold
fold_reappear
highlight
puff
puff_reappear
pulsate
scale
shake
size
slide
saveAndClose()
Saves the current progress and closes the module (replicates what Save/Exit button does).
scale ( items, multiplier, increment_value, speed, starting_value )
Use this function to scale (either instantly, or via a visual animation) objects on your slides.
The two required parameters are items (an unwrapped jQuery query like '.star' or '#slide_inner .slide_image'), and multiplier (which is how large/small to scale the item - .5 = ½ size, 2 = double size, etc).If 0 is passed as increment_value (or no increment value is passed at all), items will be scaled to to_value without animating. Usable values would be .01 to 1.
The speed accepts value as milliseconds (1000 = 1 second), and defaults to 250 (milliseconds) if no value is passed. In this case, speed is how long in between each increment, not the overall speed.
The starting_value defaults to 1 if no value is passed.
setBackButtonTimer( time_to_wait )
Disables the user from navigating to the previous slide until they have spent time_to_wait seconds on the current slide.
setDraggable( item_or_css_selector )
Enables you to set an object (or objects) to draggable/movable. The item_or_css_selector can either be ‘slide’ (the slide canvas), ‘toc’ (the table of contents), or any valid css selector (example: #slide_inner .slide_text).
setNextButtonTimer ( time_to_wait )
Disables the user from navigating to the next slide until they have spent time_to_wait seconds on the current slide.
setResizable( item_or_css_selector )
Enables you to set an object (or objects) to resizable. The item_or_css_selector can either be ‘slide’ (the slide canvas), ‘toc’ (the table of contents), or any valid css selector (example: #slide_inner .slide_text).
showMessage ( message_text, optional_title, optional_width, optional_height)
Displays a slide down modal window from the top of the browser window. The only required parameter is message_text, which is the message you would like to display to the user (can be plain text, or html markup). You can also set the title of the slide down window using optional_title and the width and height of the window in pixels by using optional_width and optional_height.
showButtonBar()
Used to re-display the bottom-anchored button-bar after previously calling the hideButtonBar() function (note – the button bar is visible by default). You could also use the toggleButtonBar() function to toggle the button bar in and out of view.
showToc()
Used to re-display the Table of Contents.
skew ( items, to_value, increment_value, speed, starting_value )
Use this function to skew (either instantly, or via a visual animation) objects on your slides.
The two required parameters are items (an unwrapped jQuery query like '.star' or '#slide_inner .slide_image'), and to_value (which is the degrees value to skew items to).
If 0 is passed as increment_value (or no increment value is passed at all), items will be skewed to to_value without animating.
The speed accepts value as milliseconds (1000 = 1 second), and defaults to 250 (milliseconds) if no value is passed. In this case, speed is how long in between each increment, not the overall speed.
The starting_value defaults to 0 (degrees) if no value is passed. The skew() function skews both the X and Y axis – you can skew just the X or just the Y axis by using skewX() and/or skewY() functions.
skewX ( items, to_value, increment_value, speed, starting_value )
Operates just like the skew() function, but only skews the X axis.
skewY ( items, to_value, increment_value, speed, starting_value )
Operates just like the skew() function, but only skews the Y axis.
stopRotations()
Use this function stop/halt any rotation animations that are currently running.
stopScale()
Use this function stop/halt any scale animations that are currently running.
stopSound()
Stops any currently playing sounds started by a Click Event on an object or by the playSound() function (but does not stop a slide narration)
stopSkew()
Use this function stop/halt any skew animations that are currently running.
stopSkewX()
Use this function stop/halt any skewX animations that are currently running.
stopSkewY()
Use this function stop/halt any skewY animations that are currently running.
toggleToc()
Used to show/hide the Table of Contents. Unlike the explicit showToc() and hideToc() functions, this one detects if table of contents is visible or not, and toggles that state.
toggleButtonBar()
Use to show/hide the bottom-anchored button-bar. Unlike the explicit showButtonBar() and hideButtonBar() functions, this one detects if the button bar is visible or not, and toggles that state.
unpinToc()
Unpins the Table of Contents window so that it will automatically disappear when the user navigates to another slide.
unsetDraggable( item_or_css_selector )
Enables you to unset an object (or objects) you previously set to draggable to not-draggable. The item_or_css_selector can either be "slide" (the slide canvas), "toc" (the table of contents), or any valid css selector (example: "#slide_inner .slide_text").
unsetResizable( item_or_css_selector )
Enables you to unset an object (or objects) you previously set to resizable to not-resizable. The item_or_css_selector can either be "slide" (the slide canvas), "toc" (the table of contents), or any valid css selector (example: "#slide_inner .slide_text").
video_attributes
By default, this variable is set as follows: var video_attributes = "controls autoplay playsinline";
You can set the video_attributes variable to whatever you'd like - it basically sets the attributes of every video element in your presentation.
centerSlide()
Centers the slide both horizontally and vertically within the browser window.
disableNavButtons()
Disables the next and back buttons in the navigation bar.
enableNavButtons()
Enables the next and back buttons in the navigation bar.
getActiveElement()
Returns the object on the slide that was clicked (for use with the run a custom function option).
getPresentationTime()
Returns the amount of time, in seconds, that the user has been in the module.
getSlideCount()
Returns the total number of slides in a module.
getSlideNumber()
Returns the number of the slide the user is currently viewing.
getSlideTime()
Returns the amount of time, in seconds, that the user has been on the current slide. Note: if a user navigates away from a slide and returns, this value will reset back to 0 each time.
getViewMode()
Returns ‘course’ if it’s being viewed from inside a course, and ‘preview’ otherwise.
getSlideWasViewed( slide_number )
Returns true or false depending on whether or not the user has already viewed the slide (you indicate which slide you want the status of using the parameter slide_number, which is the slide number you want the status of).
getWindowSize( axis )
If “width” (in quotes) is specified for the axis parameter, this returns the width of the browser window in pixels. If “height” (in quotes) is specified for the axis parameter, this returns the height of the browser window in pixels.
hideButtonBar()
Use to hide the bottom-anchored button-bar. If you do this, you will have to add your own buttons on the slide to perform the same functions as those on the button bar (minimally the NEXT function) unless you just want your users to use the table of contents to navigate. You could also use the toggleButtonBar() function to toggle the button bar in and out of view.
hideToc()
Used to hide the Table of Contents.
moveElement ( items, top, left, speed )
Enables you to move an object to new coordinates (either instantly, or via animation).
items is a jQuery query/css selector.
top and left can either be a numeric value, the word 'current' (to not change that value), or a += or -= value (like +=100 to increase by 100 for example). Note these values will automatically scale lower/higher during runtime if the end user resizes the module.
The only required parameter is items.
top and left default to 'current', and speed defaults to 1500 (milliseconds) – which represents the total time to complete the move animation.
moveToSlide( slide_number )
Navigates the user to another slide. Pass “next” (in quotes) as slide_number to navigate to the next slide. Pass “back” (in quotes) as slide_number to navigate to the previous slide. Pass a slide number as slide_number (no quotes) to jump to that slide number.
pinToc()
Pins the Table of Contents window to the current spot on the screen so that it will no longer automatically disappear when the user navigates to another slide.
playAllScenes()
Plays all effect scenes for all objects on the current slide starting at scene 1 through scene 9 (just like if the slide was just brought into view – useful for replaying effects). This function should only be executed after all effects have completed – if you run it during the middle of existing scene animations, the results are not reliable.
playNarration()
Reloads/Restarts the narration for the current slide. The narration will only restart automatically if the narration has been configured to autoplay when the slide comes into view.
playSound ( url_of_mp3 )
Plays the .mp3 audio file located at url_of_mp3 in the background. If a narration is playing when the .mp3 audio file plays, both the narration and the audio file will play at the same time.
positionSlide( in_top, in_left )
Positions the slide in_top pixels from the top edge of the browser window and in_left pixels from the left edge of the browser window. This also turns off the auto-scaling function (where slide canvas stretches with window size) and keeps the size of the slide canvas fixed at 750x450. If you want to locate the slide canvas without turning off the scaling, use CSS to set the margin-top and margin-left of the slide_inner DOM element.
positionToc( top, left )
Positions the Table of Contents window top pixels from the top edge of the browser window and left pixels from the left edge of the browser window.
reloadVideo()
Reloads/Restarts any flash or YouTube videos on the current slide. The videos will only restart automatically if the inserted videos are configured to autoplay.
resizeElement ( items, width, height, speed )
Enables you to resize an object (either instantly, or via animation).
items is a jQuery query/css selector.
width and height can either be a numeric value, the word 'current' (to NOT change that value), or a += or -= value (like +=100 to increase by 100 for example). Note these values will automatically scale lower/higher during runtime if the end user resizes the module.
The only required parameter is items.
width and height default to 'current', and speed defaults to 1500 (milliseconds) – which represents the total time to complete the resize animation.
resizeToc( width, height )
Resizes the Table of Contents window to width pixels wide by height pixels high.
rotate ( items, to_value, increment_value, speed, starting_value )
Use this function to rotate (either instantly, or via a visual animation) objects on your slides.
The two required parameters are items (an unwrapped jQuery query like '.star' or '#slide_inner .slide_image'), and to_value (which is the degrees value to rotate items to). If 0 is passed as increment_value (or no increment value is passed at all), items will be rotated to to_value without animating.
The speed accepts value as milliseconds (1000 = 1 second), and defaults to 250 (milliseconds) if no value is passed. In this case, speed is how long in between each increment, not the overall speed.
The starting_value defaults to 0 (degrees) if no value is passed.
runEffect( effect_type, item_to_animate )
Run an effect of type effect_type on the object item_to_animate. Valid effect_type values are listed in the chart below. A valid item_to_animate value is any jQuery selector query (an object id, class, or any other valid jQuery selector). If you are using this function as a click event you do not need to specify item_to_animate, as it will automatically default to the clicked (active) object.
The available effect types are (you can see previews of each effect in the SlidePoint Editor under the Animate option of the Selection Click Events):
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
saveAndClose()
Saves the current progress and closes the module (replicates what Save/Exit button does).
scale ( items, multiplier, increment_value, speed, starting_value )
Use this function to scale (either instantly, or via a visual animation) objects on your slides.
The two required parameters are items (an unwrapped jQuery query like '.star' or '#slide_inner .slide_image'), and multiplier (which is how large/small to scale the item - .5 = ½ size, 2 = double size, etc).If 0 is passed as increment_value (or no increment value is passed at all), items will be scaled to to_value without animating. Usable values would be .01 to 1.
The speed accepts value as milliseconds (1000 = 1 second), and defaults to 250 (milliseconds) if no value is passed. In this case, speed is how long in between each increment, not the overall speed.
The starting_value defaults to 1 if no value is passed.
setBackButtonTimer( time_to_wait )
Disables the user from navigating to the previous slide until they have spent time_to_wait seconds on the current slide.
setDraggable( item_or_css_selector )
Enables you to set an object (or objects) to draggable/movable. The item_or_css_selector can either be ‘slide’ (the slide canvas), ‘toc’ (the table of contents), or any valid css selector (example: #slide_inner .slide_text).
setNextButtonTimer ( time_to_wait )
Disables the user from navigating to the next slide until they have spent time_to_wait seconds on the current slide.
setResizable( item_or_css_selector )
Enables you to set an object (or objects) to resizable. The item_or_css_selector can either be ‘slide’ (the slide canvas), ‘toc’ (the table of contents), or any valid css selector (example: #slide_inner .slide_text).
showMessage ( message_text, optional_title, optional_width, optional_height)
Displays a slide down modal window from the top of the browser window. The only required parameter is message_text, which is the message you would like to display to the user (can be plain text, or html markup). You can also set the title of the slide down window using optional_title and the width and height of the window in pixels by using optional_width and optional_height.
showButtonBar()
Used to re-display the bottom-anchored button-bar after previously calling the hideButtonBar() function (note – the button bar is visible by default). You could also use the toggleButtonBar() function to toggle the button bar in and out of view.
showToc()
Used to re-display the Table of Contents.
skew ( items, to_value, increment_value, speed, starting_value )
Use this function to skew (either instantly, or via a visual animation) objects on your slides.
The two required parameters are items (an unwrapped jQuery query like '.star' or '#slide_inner .slide_image'), and to_value (which is the degrees value to skew items to).
If 0 is passed as increment_value (or no increment value is passed at all), items will be skewed to to_value without animating.
The speed accepts value as milliseconds (1000 = 1 second), and defaults to 250 (milliseconds) if no value is passed. In this case, speed is how long in between each increment, not the overall speed.
The starting_value defaults to 0 (degrees) if no value is passed. The skew() function skews both the X and Y axis – you can skew just the X or just the Y axis by using skewX() and/or skewY() functions.
skewX ( items, to_value, increment_value, speed, starting_value )
Operates just like the skew() function, but only skews the X axis.
skewY ( items, to_value, increment_value, speed, starting_value )
Operates just like the skew() function, but only skews the Y axis.
stopRotations()
Use this function stop/halt any rotation animations that are currently running.
stopScale()
Use this function stop/halt any scale animations that are currently running.
stopSound()
Stops any currently playing sounds started by a Click Event on an object or by the playSound() function (but does not stop a slide narration)
stopSkew()
Use this function stop/halt any skew animations that are currently running.
stopSkewX()
Use this function stop/halt any skewX animations that are currently running.
stopSkewY()
Use this function stop/halt any skewY animations that are currently running.
toggleToc()
Used to show/hide the Table of Contents. Unlike the explicit showToc() and hideToc() functions, this one detects if table of contents is visible or not, and toggles that state.
toggleButtonBar()
Use to show/hide the bottom-anchored button-bar. Unlike the explicit showButtonBar() and hideButtonBar() functions, this one detects if the button bar is visible or not, and toggles that state.
unpinToc()
Unpins the Table of Contents window so that it will automatically disappear when the user navigates to another slide.
unsetDraggable( item_or_css_selector )
Enables you to unset an object (or objects) you previously set to draggable to not-draggable. The item_or_css_selector can either be "slide" (the slide canvas), "toc" (the table of contents), or any valid css selector (example: "#slide_inner .slide_text").
unsetResizable( item_or_css_selector )
Enables you to unset an object (or objects) you previously set to resizable to not-resizable. The item_or_css_selector can either be "slide" (the slide canvas), "toc" (the table of contents), or any valid css selector (example: "#slide_inner .slide_text").