Ultimately, I want to switch the dropdown menu when I click on the image. I want to use the open / close function, which is defined in the jQuery user library, but cannot figure out how to access the open function.
Question: How do I access the "open" or "close" function defined in the jQuery user library? (In more detail below - note that I have no experience using jQuery prototypes, which is a big part of this problem - I'm not even sure that I can access the object properly.)
Any help / suggestions or recommendations appreciated
I am using Codrops Simple Effects for Dropdowns for reference.
In particular, I refer to Demo # 4 in my example / question.
The example uses the jQuery custom library for styles and animations of drop-down menus:
It is pretty simple:
First you post your HTML select markup (dropdown)
<select id="cd-dropdown" class="cd-select"> <option value="-1" selected>Choose an animal</option> <option value="1" class="icon-monkey">Monkey</option> <option value="2" class="icon-bear">Bear</option> <option value="3" class="icon-squirrel">Squirrel</option> <option value="4" class="icon-elephant">Elephant</option> </select>
(After including all the necessary project files) You can call your plugin function
$( '#cd-dropdown' ).dropdown();
The function then converts our "select" markup to the following structure
<div class="cd-dropdown"> <span>Choose an animal</span> <input type="hidden" name="cd-dropdown"> <ul> <li data-value="1"><span class="icon-monkey">Monkey</span></li> <li data-value="2"><span class="icon-bear">Bear</span></li> <li data-value="3"><span class="icon-squirrel">Squirrel</span></li> <li data-value="4"><span class="icon-elephant">Elephant</span></li> </ul> </div>
The function then responds to the click event, as indicated in their documentation:
When we click on the first interval, we will apply the cd-active class to its parent element, dividing it with the cd-dropdown class. If you select the option, the corresponding interval will be inserted into the first.
Then the jquery.dropdown.js file contains all the definitions that are built using the "prototype" method, which, as I mentioned earlier, I have zero experience with. I will not include the entire file (as there is a link), but I will include two functions that I am trying to get, and where I THINK that it is initialized.
Open function
open : function() { var self = this; this.dd.toggleClass( 'cd-active' ); this.listopts.css( 'height', ( this.optsCount + 1 ) * ( this.size.height + this.options.gutter ) ); this.opts.each( function( i ) { $( this ).css( { opacity : 1, top : self.options.rotated ? self.size.height + self.options.gutter : ( i + 1 ) * ( self.size.height + self.options.gutter ), left : self.options.random ? Math.floor( Math.random() * 11 - 5 ) : 0, width : self.size.width, marginLeft : 0, transform : self.options.random ? 'rotate(' + Math.floor( Math.random() * 11 - 5 ) + 'deg)' : self.options.rotated ? self.options.rotated === 'right' ? 'rotate(-' + ( i * 5 ) + 'deg)' : 'rotate(' + ( i * 5 ) + 'deg)' : 'none', transitionDelay : self.options.delay && Modernizr.csstransitions ? self.options.slidingIn ? ( i * self.options.delay ) + 'ms' : ( ( self.optsCount - 1 - i ) * self.options.delay ) + 'ms' : 0 } ); } ); this.opened = true; },
Close function
close : function() { var self = this; this.dd.toggleClass( 'cd-active' ); if( this.options.delay && Modernizr.csstransitions ) { this.opts.each( function( i ) { $( this ).css( { 'transition-delay' : self.options.slidingIn ? ( ( self.optsCount - 1 - i ) * self.options.delay ) + 'ms' : ( i * self.options.delay ) + 'ms' } ); } ); } this._positionOpts( true ); this.opened = false; }
Challenge of all
$.fn.dropdown = function( options ) { var instance = $.data( this, 'dropdown' ); if ( typeof options === 'string' ) { var args = Array.prototype.slice.call( arguments, 1 ); this.each(function() { instance[ options ].apply( instance, args ); }); } else { this.each(function() { instance ? instance._init() : instance = $.data( this, 'dropdown', new $.DropDown( options, this ) ); }); } return instance; };
Function Setting - Initial Definition
( function( $, window, undefined ) { 'use strict'; $.DropDown = function( options, element ) { this.$el = $( element ); this._init( options ); }; // the options $.DropDown.defaults = { speed : 300, easing : 'ease', gutter : 0, // initial stack effect stack : true, // delay between each option animation delay : 0, // random angle and positions for the options random : false, // rotated [right||left||false] : the options will be rotated to thr right side or left side. // make sure to tune the transform origin in the stylesheet rotated : false, // effect to slide in the options. value is the margin to start with slidingIn : false, onOptionSelect : function(opt) { return false; } }; $.DropDown.prototype = { _init : function( options ) { // options this.options = $.extend( true, {}, $.DropDown.defaults, options ); this._layout(); this._initEvents(); },
Hope this makes sense to someone and they can help me.
Conclusion
In general, I want to click on the image on the page that will launch the same functions / effects that are / are executed when you click on the drop-down menu itself.
I'm not sure I'm asking the right question, so I will ask both:
- How can I access the function object defined in the prototype?
- How can I execute a popup function when clicking on another element? (* Note. This will not work as a normal drop-down menu, which, as I know, is difficult, if not impossible, to force open. I think that I just have to perform the same function that is performed when clicking on the drop-down list.)
Thank you for your patience and help in this matter.