Other Websites

  • SeaCloud9 Interactive
  • SeaCloud9 Commercial Development
  • i-os
  • stArcade9

Brendon Smith Social Networks

  • On Linkedin
  • Bookmarks
  • On Twitter
  • On Facebook
Open ↓ Close ↑
  • Home
  • Subscribe
Browse: Home / 3d, JavaScript, QuickTip / jQuery CenterIT
i-create | therefore-i am
i-create | therefore i-am | a blog about opensource technology and rich internet applications
 

jQuery CenterIT

By Brendon Smith on February 7, 2010

 

Have you ever had to deal with the hassle of centering modal windows? I made this function to automagically center windows I call this function after I load a modal and it centers the object perfectly for every browser. It takes the hassle of wondering if something is perfectly center in every browser. The only thing I do to use it is send it the main containing div that the object should be centered in and the div that I want to be centered. It grabs the offset does a little basic math and that’s it. No more hassle with centering now it will be perfectly centered.

function CenterIT(mainModal, mainContainer) {
    var modalW = $(mainModal).width() / 2;
    var windowW = $(mainContainer).width() / 2;
    var modalH = $(mainModal).height() / 2;
    var windowH = $(mainContainer).height() / 2;
    var centerPointW = windowW - modalW;
    var centerPointH = windowH - modalH;
    var myPoint = $(mainContainer).offset();
    centerPointW = myPoint.left + centerPointW;
    centerPointH = myPoint.top + centerPointH;
    $(mainModal).css('left', centerPointW);
    $(mainModal).css('top', centerPointH);   
}

Some Useful/Interesting Flash Links:
Prefab – Highly useful tool when it comes to 3D in flash with Away3D
Snook on HTML5 and Adobe

Some Useful/Interesting JavaScript Links:
Javascript RayCaster
Burst Engine for SVG in JavaScript
Canvas 3D
JS3D library
Parallax in CSS
WebGL Example

  • Share/Bookmark

Related posts:

  1. When Pigs Fly With jQuery Here is yet another tutorial. This tutorial demonstrates numerous JQuery...

Related posts brought to you by Yet Another Related Posts Plugin.

Posted in 3d, JavaScript, QuickTip | Tagged JavaScript, JavaScript programming language, JQuery, quick tip, QuickTip, webGL

Brendon Smith

GUI Development, Action Script, Java Script, .NET, AJAX, Java, PHP, CakePHP, Mashup Development, Flash, Silverlight, C#, XML, SQL, Apache, IIS, Photoshop, Fireworks,etc.. Oh, and Biking and Camping

blog comments powered by Disqus
« Previous
 
 

3d ActionScript Adobe Air Android Apollo Apple art as3 ASP.NET Blend C# CakePHP CSS Experiment Flash Flash Develop Flex Games Generative Design Google Informatics JavaScript Joshua Davis JSON Life Lingo Linux MashUp Open Source OpenSource PaperVision3D PC History Processing quick tip RIA Silverlight Technology/Internet travel twitter Web Web 3.0 Webware XML Yahoo Pipes

WP Cumulus Flash tag cloud by Roy Tanck and Luke Morton requires Flash Player 9 or better.

  • Monthly
  • Yearly
  • Links
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • 2010
  • 2009
  • 2008
  • 2007
  • 2006
  • 2005
  • agit8
  • Bit-101
  • D.I.Y.
  • draw.logic
  • Flight404
  • Flong
  • generatorX
  • haXe
  • Jonathan Snook
  • Joshua Davis
  • Jot
  • Kirupa
  • LifeHacker
  • Make
  • NurseOnTheRun
  • octane42
  • PV3D
  • Senocular
  • Sephiroth
  • ShineDraw
  • SWX
  • Tech News
  • Toxi
  • ZeusLabs

Brendon's Photos

Montery1.JPG

Recent Comments

  • morganae23 on Processing JS
  • morganae23 on Processing JS

RSS LifeStream

  • WePad is yet another Android tablet that will be supporting Flash 10.1
  • Highly Interactive Software with Java and Flex
  • Using SketchFlow to Prototype for Windows Phone #silverlight