When and how can I use a JQuery function ? - easy one

Question

I want to know that when we have a function with parameters that

works like a VB procedures

When and how can I use this function ?

How can we call this ?

<script type="text/javascript">

function place(div, image_x, image_y )
{

    $("#"+div).css("position", "absolute") ;

    $("#"+div).css("left",image_x+"px");

    $("#"+div).css("top",image_y+"px"); 

}

When and how can I use this function ?

I tried to use this in several ways , but It seems that JQuery didn't activate .

some of my efforts to call this : (maybe funny)

(function($) {
    // $(document).ready( function(){

    $.fn.Place = function place(div, image_x, image_y) {
    }) (jQuery)
jQuery(function($) {
    place("pnlLinx", 700 , 500 ) ;
});

or simply :

place("pnlLinx", 700 , 85 ) ;

with no effect

thanks in advance

This should be a simple question for people knew the structure of JQuery I'm not totally familiar with the structure of JQuery but I used it different ways in my codes .

this example is just for learning one part of this structure , that I had problem .

Answer 1

I didn't completely get your question but here's what I can say,

$.fn.place = function (image_x, image_y) {
    this.css({
        position: 'absolute',
        left: image_x + 'px',
        top: image_y + 'px'
    });
};

Now you can do

$('#pnlLinx').place(700, 500);

Adding a function to the $.fn scope creates a jQuery method, that you can invoke on a jQuery object. And inside the method, this refers to the jQuery object the method is invoked on.

Edit: Is this what you need...

$( function ($) {

    function place(divId, image_x, image_y) {
        $('#' + divId).css({
            position: 'absolute',
            left: image_x + 'px',
            top: image_y + 'px'
        });
    }

    place('pnlLinx', 700, 500);

});

Edit 2: If you want the function under $,

$( function ($) {

    $.place = function (divId, image_x, image_y) {
        // ...
    }

    $.place('pnlLinx', 700, 500);

});

Good luck.

Answer 2

You left off using jQuery as a parameter to the anonymous function you're writing, and you're adding Place as a method then trying to use it as a static function.

(function($) {
    // $(document).ready( function(){

    $.fn.Place = function place(div, image_x, image_y) {
    }) (jQuery)
jQuery(function($) {
    place("pnlLinx", 700 , 500 ) ;
});

should be

(function($) {

  $.place = function place(div, image_x, image_y) {

    $("#"+div).css("position", "absolute") ;
    $("#"+div).css("left",image_x+"px");
    $("#"+div).css("top",image_y+"px");
  };

})(jQuery);

Then you can

$.place('mydiv', 700, 500);

Note, I used lowercase P, as this is the convention for method names in JavaScript.

Answer 3

Make sure jQuery library must included before any jquery code.

Answer 4

Hi, See this http://www.jsfiddle.net/ , that might help you in understand where to put that code. Also Code in Javascript section of jsfiddle link needs to wrapped in <script> tag

Complete Code

$.fn.place = function (image_x, image_y) {
    this.css({
        position: 'absolute',
        left: image_x + 'px',
        top: image_y + 'px'
    });
};

function place(divId, image_x, image_y) {
   $('#' + divId).css({
        position: 'absolute',
        left: image_x + 'px',
        top: image_y + 'px'
   });
}


$(document).ready(function(){

    $('#pnlLinx').place(50, 100);


    place('pnlLinx', 100, 150);


    $('#pnlLinx').animate({color:"#dddddd"}, 500, function(){
            $(this).place(50, 100);      
            $(this).animate({color:"#aaaaaa"}, 1000, function(){
                      place($(this).attr("id"), 100, 150);
            });
    });

});