Class: Responsiveelement

Responsiville. Responsiveelement

Takes a casual element and makes it responsive. This way one can set different behaviour and styling to the element per breakpoint just as they do in a responsive web page as a whole.

new Responsiville.Responsiveelement(options)

responsiville.responsiveelement.js, line 41
Responsive elements utility.
Name Type Description
options Object The initialisation options of the module.
Properties:
Name Type Description
options Object The options that define the object behaviour.
Properties
Name Type Description
debug boolean Whether to print debug messages in the browser console.
slug boolean A special codename for the instance of the element, to be used as a class on its container and as a key in arrays where it is grouped with other elements of its kind.
breakpoints string List of name and width pairs that define the responsive breakpoints of this element.
element string The element to be enhanced with responsive behaviour.
enter string Comma separated list of breakpoints in which the module enters, which means it is enabled.
leave string Comma separated list of breakpoints in which the module leaves, which means it is disabled.
Author:
  • Nevma, info@nevma.gr
License:
  • Nevma Copyright (c) http://www.nevma.gr
Fires:

Extends

Members

staticResponsiville.Responsiveelement.AUTO_RUN

Properties:
Name Type Description
AUTO_RUN boolean Controls whether this module should run by default, without the developer calling it, using its default settings. Defaults to true.

staticResponsiville.Responsiveelement.defaults

Properties:
Name Type Description
defaults Object Default values for this module settings.

Methods

staticResponsiville.Responsiveelement.autoRun(){void}

responsiville.responsiveelement.js, line 232
Runs through the page and searches for elements that apply to the current module in order to apply it to them automatically. Useful for automatically creating elements with this module's behaviour just by setting up the predefined classes and data attributes in HTML elements of the page.
Returns:
Type Description
void

disable(){void}

responsiville.responsiveelement.js, line 346
Disables the responsive element.
Fires:
Returns:
Type Description
void

enable(){void}

responsiville.responsiveelement.js, line 306
Enables the responsive element.
Fires:
Returns:
Type Description
void

imageError(event){void}

responsiville.responsiveelement.js, line 434
Runs when an image inside the responsive element has aborted loading due to any error.
Name Type Description
event Event The image error event that originally fired.
Fires:
Returns:
Type Description
void

imageLoaded(event){void}

responsiville.responsiveelement.js, line 399
Callback that runs when an image inside the responsive element has successfully loaded.
Name Type Description
event Event The image loaded event that originally fired.
Fires:
Returns:
Type Description
void

processElement(){void}

responsiville.responsiveelement.js, line 493
Does whatever necessary on the element in order to satisfy its responsive behaviour. Runs on window resize events and on Responsiville resize and breakpoint change events.
Fires:
  • Responsiville.Responsiveelement#image.event:processing
  • Responsiville.Responsiveelement#image.event:change
  • Responsiville.Responsiveelement#image.event:processed
Returns:
Type Description
void

runBreakpointChangeCallbacks(){void}

responsiville.responsiveelement.js, line 467
Runs all the callback functions registered on the responsive element's breakpoint changes.
Returns:
Type Description
void

setupEvents(){void}

responsiville.responsiveelement.js, line 253
Sets up event handlers necessary for the object to function properly.
Returns:
Type Description
void

Events

change

responsiville.responsiveelement.js, line 610
Called after a breakpoint change has occured.

disabled

responsiville.responsiveelement.js, line 376
Called after the module has been disabled.

enabled

responsiville.responsiveelement.js, line 326
Called after the module has been enabled.

init

responsiville.responsiveelement.js, line 173
Called after the module has been initialised.

processing

responsiville.responsiveelement.js, line 495
Called before processing a responsive element.