Home > 技術 > jQueryで画面の中央に要素を表示する方法

• Newer
• Older

jQueryで画面の中央に要素を表示する方法

• 2008-07-23 (水)
• 技術

jQueryで画面の中央に要素を表示する方法 レイヤーを表示する場合なんかに有効な方法ですが、画面の中央にダイアログやボックスを表示する場合 jQueryを使うとかなり簡単に書けました。

以下のコードはwindowオブジェクトをjQueryの引数に渡してwidthメソッドやheightメソッドで取得しています。

jQueryのwidthメソッド・heightメソッドを使う

$(function(){ var left = Math.floor(($(window).width() - $("#hoge").width()) / 2); var top = Math.floor(($(window).height() - $("#hoge").height()) / 2); $("#hoge") .css({ "top": top, "left": left, "opacity": 0 }) .animate({opacity: "1"},{queue: true, duration: 4000, easing: "linear", complete: function(){}}); });
#hogeというのは中央に表示したい要素のidになります。
animateでアニメーションさせるとちょっぴりかっこよくなりました。

Firefox3とIE7で確認しましたが、ちゃんと真ん中に来てました！
これは助かります。

ちなみに画面全体（スクロールする部分も含む）の幅や高さを取得したい場合は
$(function(){ var left = $(document).width(); var top = $(document).height(); });
とすると取得が可能です。

jQueryを使わずに自前でやってみる

クロスブラウザで泣きを見るパターンですが、画面の幅や高さを取得する方法は
各ブラウザによってさまざまです。
なのでレイヤー関連を扱う場合には以下のように、クロスブラウザ対応で取得する必要があります。
var obj = document.getElementById("hoge"); var pageSize = getPageSize(); var emSize = getElementSize(obj); var left = Math.floor((pageSize.width - emSize.width) / 2); var top = Math.floor((pageSize.height - emSize.height) / 2); obj.style.left = left + 'px'; obj.style.top = top + 'px'; function getPageSize() { return { width: window.innerWidth || (document.documentElement && document.documentElement.clientWidth) || document.body.clientWidth, height: window.innerHeight || (document.documentElement && document.documentElement.clientHeight) || document.body.clientHeight }; } function getElementSize(obj) { return { width: obj.offsetWidth || obj.style.pixelWidth, height: obj.offsetHeight || obj.style.pixelHeight }; }
う～ん、あんまり見やすいコードではないですが、jQueryを使えない縛りがある場合には
こんな感じで書く必要がありますね。

上記コードは

• Firefox1.5～3
• IE6.0
• IE7.0
• Netscape7.1
• Opera9
• Safari3.1

などなどに対応している感じです。

■関連リンク
ブラウザの表示領域のサイズを取得する方法。 - Enjoy*Study
を参考にさせていただきました。
どうもありがとうございます！

• Newer: ボクが入れているFirefoxアドオン12個
• Older: Syntaxhighlighterでコードにシンタックスハイライトを付ける

Trackback:0

TrackBack URL for this entry

http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1068

Listed below are links to weblogs that reference

jQueryで画面の中央に要素を表示する方法 from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > jQueryで画面の中央に要素を表示する方法

Search

HouseTect, JavaScriptな情報をあなたに内の検索

Ads

書いてる人について

author：hisasann.com
lab : lab.hisasann.com
twitter : フォローミー
facebook : Hisa Yoshi

Javascriptをメインに使っているプログラマーの技術ブログです。ちょっぴりアートでちょっぴりオモシロイものを作ってます。
記事の内容はjQuery、jQueryMobile、HTML5、CSS3などなど…

是非こちらからRSSの登録をお願いいたします！
損はさせないぜっ！

• RSS Feedを登録する

作ったもの :

• products

他に運営しているサイト：

• NoTechnoNoLife, フェティッシュな情報をあなたに
• DigitalGrounder, クリエイティブな情報をあなたに

人気のエントリー

JavaScript本

誰もが通る道… それはサイ本。

JavaScriptだけでなく、CSSやフロントエンドのパフォーマンスアップがぎっしりと詰まっててすばらしい良書です。

執筆されたのは結構前なのですが、いろいろなJavaScriptの手法が書いてあるステキな本。特にJohn ResigがjQueryの初期を制作しているときの本なので、英語ですがコードだけでも追うと面白いと思います。

書評 - jQuery Mobileポケットリファレンスで書評を書きました。

Recent Entries

• Vimをちゃんと使い始めてみる
• さくらVPSでnginxをインストールしたときのメモ
• 書評 - jQuery Mobileポケットリファレンス
• iDance - Thank you Steve.
• さくらVPSにApacheをインストールする方法
• さくらVPSを使うときの初期設定メモ
• jQueryMobileのXSSに関する調査メモ
• jQueryMobileのかゆいところに手が届くお作法メモ
• jQueryMobileを使ってのスマートフォンサイトの構築メモ
• 新しいMacbook Proにインストールしたものメモ Part2

Tag cloud

ActionScript addon Ads Ajax Algorithm Amazing Android Anime Apache AppleScript Application Aptana baby Blog Bloger BlogParts Book Book Review Bookmark Bookmarklet bot Box2d browser Camera Canvas Catalyst Chrome CM Communication Cool CPAN CSS CSS3 DB design Dinner DJ DOM DS Eclipse Editor Electro Emulator Engineer English Firebug Firefox Flash Flex Flickr Food Freesoft Funny Gadget Game Geek Generator git Google Google Wave GoogleAnlytics Greasemonkey Grow Hacker Haml hatena HTML HTML5 iBatis IDE Idea IE IE6 IE7 IE8 Image ImageMagick Interface iPad iPhone iPod IT Item iTunes Java JavaScript jQuery jQueryMobile jsDeferred JsUnit Keyboard Lanch Language LifeHack Lightbox Mac MacBookPro MacPorts Mash-up MeCab Mobile Monitor MOO Motivation Movalble Type Movie Music MySql Netscape News nginx Nikki node.js OpenSource Opera Oracle Papervision3D Pasta PC Perl Photoshop PHP PL/SQL Plugin Presentation Program Progression prototypeJS Python QUnit Ramen Rhino RSS Ruby Ruby On Rails Safari Sakura Sanitizing Search Seasar2 Security SEO Shell Shortcut Sinatra Skill Smartphone SMO SNS Spring SQL SSH SSL Struts SVN Test TextMate Tomcat Tool Tumblr Twitter Unix Vim Vista VMware VPS Web Web2.0 Webkit WebService Wii Wiki Windows Word WordPress Work Workshop WTP XAMPP XCode XMLHttpRequest2 XSS XUL Yahoo YouTube YUI Zen-Coding

カテゴリー

• Firefox
• Lifehack
• Mac
• News
• Photoshop
• Web
• アイテム
• ガジェット
• ゲーム
• サービス
• デザイン
• ブログ
• 技術
• 映像
• 本
• 画像
• 考え方
• 言葉
• 雑記

月別アーカイブ

月を選択 2012年1月 2011年10月 2011年7月 2011年6月 2011年2月 2011年1月 2010年12月 2010年11月 2010年10月 2010年9月 2010年8月 2010年6月 2010年5月 2010年3月 2010年2月 2010年1月 2009年12月 2009年11月 2009年10月 2009年9月 2009年8月 2009年7月 2009年6月 2009年5月 2009年4月 2009年3月 2009年2月 2009年1月 2008年12月 2008年11月 2008年10月 2008年9月 2008年8月 2008年7月 2008年6月 2008年5月 2008年4月 2008年3月 2008年2月 2008年1月 2007年12月 2007年11月 2007年10月 2007年9月 2007年8月 2007年7月 2007年6月 2007年5月

Powered by

Powered by
Movable Type Commercial 4.261