Question

I’m basically trying to do a dropdown jquery plugin.

HTML

<script type='text/javascript' src='script.js'></script>
<div id="clickDiv">Click Me</div>
<div id="nav">
    <span>settings</br></span>
    <span>Preferences</br></span>
    <span>Logout</br></span>        
</div>

Script (script.js)

$('#clickDiv').click(function() {
   $('#nav').dDown({
          parent : '#clickDiv'; 
   });  
});

Plugin script

$.fn.dDown = function(parent) { 
    var options = {
        parent : ''
    };

    if(parent) {
        $x = $(parent);
        console.log($x.css('top'));  //Get the top position of the #clickDiv
    }
};

How can i get the properties of the element .. line $x.css(‘top’) throws error

Answer 1

The parent variable is an object, like options. You have to use:

$.fn.dDown = function(options) {  //<--- Renamed "parent" to "options"
    options = jQuery.extend({
        parent : ''
    }, options);                  //<--- Implementing default values

    var $x = $(options.parent);
    if ($x.length) { // <-- Check if the selectors matches anything
        console.log($x.css('top'));  //Get the top position of the #clickDiv
    }
};

The code works well, but you should not define it as a jQuery plugin, since it does nothing with the this object. Propery defined jQuery plugins are often chainable, and act on all elements in the jQuery collection.