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. jQuery Abstract Lines Experiment
  2. HTML5 jQuery jqPanoramic Plugin Alpha
  3. Simple jQuery Flower Experiment
  4. WebGL TweetTank Built with C3DL Part 2
  5. WebGL TweetTank Built with C3DL Part 1

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 Next »
 
 

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

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

  • Monthly
  • Yearly
  • Links
  • August 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • 2010
  • 2009
  • 2008
  • 2007
  • 2006
  • 2005
  • agit8
  • Away3D
  • Ben Nadel
  • Bit-101
  • Bruce Jawn
  • Causecast
  • D.I.Y.
  • Dr Woohoo
  • draw.logic
  • Flight404
  • Flong
  • generatorX
  • gSkinner
  • haXe
  • Jonathan Snook
  • Joshua Davis
  • Jot
  • Kirupa
  • LifeHacker
  • Make
  • Minor White
  • Mr Doob
  • NihiLogic
  • NurseOnTheRun
  • octane42
  • OpenFrameWorks
  • Processing
  • PV3D
  • Senocular
  • Sephiroth
  • ShineDraw
  • Stroep
  • SWX
  • Tech News
  • Toxi
  • UnitZeroOne
  • World We Live In
  • ZeusLabs

Photos

lisa1

Recent Comments

  • seacloud9 on Tweet Tank in Away3D and Hype pt. 2
  • Brendon Smith on Tweet Tank in Away3D and Hype pt. 2

RSS LifeStream

  • Elysium
  • Giles Bowkett: Archaeopteryx: A Ruby MIDI Generator
  • Grant Nestor » Blog Archive » Generative music, huh?

Copyright © 2010 i-create | therefore-i am.