5 Replies - 5167 Views - Last Post: 28 July 2014 - 11:09 AM

#1 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 451
  • View blog
  • Posts: 1,947
  • Joined: 30-April 10

jQuery centering plugin

Post icon  Posted 24 July 2014 - 02:58 PM

This plugin will center an item on the window and makes it move on resize. Very basic but it gives a good idea on how to get it done.

// Plugin code


$.fn.centerMe = function () {
    //Create settings
    var settings = {
        me: $(this),
        myHeight: $(this).height(),
        myWidth: $(this).width(),
        win_height: $(window).height(),
        win_width: $(window).width()
    };

    var makeCenter = function () {
        //Update settings for window Height and Width
        settings.win_height = $(window).height();
        settings.win_width = $(window).width();
        //Change CSS
        settings.me.css({
            top: (settings.win_height / 2) - (settings.myHeight / 2),
            left: (settings.win_width / 2) - (settings.myWidth / 2)
        });
    }
    // Initial call to resize
    makeCenter();
    $(window).on('resize', makeCenter);


    // Return this for chainablity
    return this;
};



Example code:
HTML
<div id="centerDiv"></div>



CSS
#centerDiv {
    position: absolute;
    width: 150px;
    height: 100px;
    background-color: black;
}



jQuery/Javascript
$("#centerDiv").centerMe();



The code at this time is also on jsfiddle. Good luck and hope it helps you center your items on the page.

This post has been edited by laytonsdad: 27 July 2014 - 08:30 PM


Is This A Good Question/Topic? 0
  • +

Replies To: jQuery centering plugin

#2 Lightme  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 45
  • Joined: 06-March 10

Re: jQuery centering plugin

Posted 27 July 2014 - 06:59 PM

Just a noob question in jQuery. I make the Plugin code in Javascript file?
Was This Post Helpful? 0
  • +
  • -

#3 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 451
  • View blog
  • Posts: 1,947
  • Joined: 30-April 10

Re: jQuery centering plugin

Posted 27 July 2014 - 08:28 PM

Yes. The plugin is an addition of the jQuery library written in Javascript. All Javascript files will be saved with the file extension .js as any other Javascript file.

Note: The jQuery library must be loaded first, then the plugin. only after each of these are loaded can you begin to use the plug in. Also, this plugin is very basic and has very little changeability.

This post has been edited by laytonsdad: 27 July 2014 - 08:31 PM

Was This Post Helpful? 0
  • +
  • -

#4 Lightme  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 45
  • Joined: 06-March 10

Re: jQuery centering plugin

Posted 27 July 2014 - 10:37 PM

DO I need to download jQuery to my local server *or online server* and so yes where do I download this or wich link I need to load jQuery libary?
Was This Post Helpful? 0
  • +
  • -

#5 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 451
  • View blog
  • Posts: 1,947
  • Joined: 30-April 10

Re: jQuery centering plugin

Posted 28 July 2014 - 08:55 AM

You can read up on downloading jQuery on their page. I suggest you get some background knowledge before you begin.
Was This Post Helpful? 0
  • +
  • -

#6 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 451
  • View blog
  • Posts: 1,947
  • Joined: 30-April 10

Re: jQuery centering plugin

Posted 28 July 2014 - 11:09 AM

I also have a few quick start jquery posts in my blog.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1