締切済み

タブに地図を入れたら、中心がずれました。

2011/04/05 12:39

タブに地図を入れたら、中心がずれました。タブはないとき、ずれないです。あれこれ試しましたが、どうも修正できませんでした。教えてください。お願いします。下はソースです。 <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script src="http://5am.jp/common/js/jquery-1.3.1.min.js" type="text/javascript"></script> <script src="http://5am.jp/common/js/ui.core.js" type="text/javascript"></script> <script src="http://5am.jp/common/js/ui.tabs.js" type="text/javascript"></script> <link type="text/css" rel="stylesheet" href="http://5am.jp/common/css/ui.tabs.css"> <script type="text/javascript"> $(function() {$('#container-1 > ul').tabs();}); </script> </head> <body> <div id="container-1"> <ul> <li><a href="#fragment-1"><span>タブ1</span></a></li> <li><a href="#fragment-2"><span>タブ2</span></a></li> <li><a href="#fragment-3"><span>タブ3</span></a></li> </ul> <div class="Clear"> <div id="fragment-1"> <p>タブ1の内容</p> </div> <div id="fragment-2"> <p>タブ2の内容</p> </div> <div id="fragment-3"> <table width="705" border="0" cellpadding="0" cellspacing="0"> <tr><td class="button-area"><div align="center"> </div></td> </tr> <tr><td> </td> </tr> </table> <div id="map_canvas" style="width: 705px; height:375px"></div> <script src="http://maps.google.co.jp/maps?file=api&v=1&key=ABQIAAAAQzfW6rb5jraVXMAQHx8W2hRz0pttuSXoxOtnDzBeMrT8H_GbDhS6TtNcJU1K_O_fBt6-ziKGKvN9gg" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> if (GBrowserIsCompatible()) { var map = new GMap(document.getElementById("map_canvas")); var point = new GLatLng(35.778976, 139.725286) map.setCenter(point, 15); var marker = new GMarker(point); map.addOverlay(marker); map.addControl(new GLargeMapControl()); marker.openInfoWindowHtml('東京都北区赤羽2-5-7 '); } </script> </div></div></div></body></html>

htaccess_sss
お礼率25% (3/12)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

みんなの回答

fujillin
ベストアンサー率61% (1594/2576)

2011/04/05 14:45 回答No.1

使ったことはないですが、確か地図をロードする前に、対象要素が非表示になっていると位置がずれるという現象が発生したような… 　http://okwave.jp/qa/q6250162.html 　http://okwave.jp/qa/q6258704.html でも、ご提示のコードでは「v=1」とありますが、v1も同じなのか不明。（v1ではないのかな？）試しに、ご提示のコードのtabs設定の部分をコメントアウトしてみると、ちゃんとずれずに表示されますよね？（どれが、ずれていない状態なのかわかりませんけれど、多分ずれていなさそうに思えます） tabsの設定の中で、要素をdisplay:noneにしているのだと想像しますが、非表示にする方法を別の方法に変えれば確かOKだったように思います。例えば、マイナスのマージンで画面外に表示させておくとか、あるいはz-indexの制御で重なり順を変えるとか、あるいは直接要素の順番を入替えてやるとか…

関連するQ&A

jQueryのタブにスクロールバーをつけたい
jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身１(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか？？
- ベストアンサー
- JavaScript
jqueryの tabを使用して外部リンクをしたい
jqueryの tabを使用して外部リンクをしたいこのサイトの下の方のマウスオーバーで切り替えを使用しているのですがタブをマウスオーバーで切り替えつつ、タブ部分をクリックしたら外部にリンクさせるようするにはどうしたらいいでしょうか？ http://5am.jp/jquery/jquery_ui_tabs/ 以下タグです。初心者で大変申し訳ありませんが、ご教授ください。とても困っています。よろしくお願いいたします。 ************************************************************* <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <head>  <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="/jquery-ui-1.8.12.custom.min.js"></script> </head> <body> <script type="text/javascript">  </script> <div id="jquery-ui-tabs"> <ul> <li><a href="#jquery-ui-tabs-1">タブ１</a></li> <li><a href="#jquery-ui-tabs-2">タブ2</a></li> <li><a href="#jquery-ui-tabs-3">タブ2</a></li> </ul> <div id="tab_area"> <div id="jquery-ui-tabs-1"> <ul> <li>タブ１内容</li> </ul> </div> <div id="jquery-ui-tabs-2"> <ul> <li>タブ2内容</li> </ul> </div> <div id="jquery-ui-tabs-3"> <ul> <li>タブ3内容</li> </ul> </div> </div> </div> </body> </html>
- 締切済み
- JavaScript
jquery ulのtab切り替えについて
昨日からjqueryを使ってみたのですが、どうしてもうまく表現できません。書籍のwebcreators６月号を参考にしてほぼそのままのソースを打ち込んだのですが、CSSとJavascriptが機能していません。ソースは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <link href="../js/jquery.ui/themes/flora/flora.all.css" rel="stylesheet" type="text/css" title="Flora(Default)" /> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/ui/ui.tabs.js"></script> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/jquery-1.2.6.js"></script> <script type"text/javascript"> $(window) .bind ('load',function(){ $('#container-1>ul').tabs(); }); </script> <title>無題ドキュメント</title> </head> <body> <div id="container-1" > <ul> <li><a href="#fragment-1"><span>ホワイト</span></a> </li> <li><a href="#fragment-2"><span>ブラック</span></a></li> </ul> <div id="fragment-1"> <p>ページ１</p> <p>ダミー</p> </div> <div id="fragment-2" style="margin-top:150px;"> <p>ページ２</p> <p>ダミー</p> </div> </div> </body> </html> となっています。 javascriptについてはあまり知識がないので、どの部分が悪いのか教えて頂けないでしょうか？皆様お忙しい中ご迷惑をおかけしますが、よろしくお願いいたします。
- 締切済み
- JavaScript
ui.tabs.jsとjScrollPane.jsの連動について
いつもお世話になっております。先日質問させていただいた内容に補足させていただきます。 Ui.Tabs.jsとjQuery1.2.6.jsを使ってタブを動作させ、そのコンテンツが表示領域に収まらなかった場合、jScrollPane.jsを使用してスクロールバーを表示したいと考えています。それぞれ一応動作するまでには到っているのですが、タブを切り替えた時にスクロールバーの長さがリサイズされず、タブの変移にjScrollPaneが対応してくれません。そこでタブをクリックしたときにjScrollPaneを再度読み込むようにしてみたのですが、下記記述だとクリック前のコンテンツの長さに対応したスクロールバーが表示されてしまいます。 Ui.Tabs.jsの動作の完了後にjScrollPaneを再度読み込むように（クリック後のコンテンツの長さに対応したスクロールバーが表示されるように）スクリプトを組むことはできないでしょうか。ご教授よろしくお願い致します。 #layer1 { height: 500px; width: 600px; position: relative; top: 110px; overflow: auto; visibility: visible; } <script type="text/javascript"> $(function(){ $('#tab > ul').tabs({ fx:{ opacity: 'toggle',duration:500 } }); $('#layer1').jScrollPane({scrollbarWidth: 12}); $('#nor1,#mor12,#ho1,#hov12').click(function(){ $('#layer1').jScrollPane({scrollbarWidth: 12}); }); }); </script> </head> <body> <div id="tab"> <ul> <li><a href="#fragment-1"><span><img id="mon1" src="../diary/2009/1/diary-1mon-nor.png" alt=""/></span></a></li> <li><a href="#fragment-2"><span><img id="mon2" src="../diary/2009/2/diary-12mon-nor.png" alt=""/></span></a></li> <li><a href="#fragment-3"><span><img id="mon3" src="../diary/2009/3/diary-1mon.png" alt=""/></span></a></li> <li><a href="#fragment-4"><span><img id="mon4" src="../diary/2009/4/diary-12mon.png" alt=""/></span></a></li> </ul> <div id="layer1"> <div id="fragment-1"><img src="../2009/1/content-diary-1.png" alt="" width="520" height="950" border="0" /> </div> <div id="fragment-2"><img src="../2009/2/content-diary-2.png" alt="" width="520" height="453" border="0" /> </div> <div id="fragment-3"><img src="../2009/3/content-diary-3.png" alt="" width="520" height="1150" border="0" /> </div> <div id="fragment-4"><img src="../2009/4/content-diary-4.png" alt="" width="520" height="1150" border="0" /> </div> </div> </div> </body>
- ベストアンサー
- JavaScript
タブメニューを上下に設置
下記サイトを参考にタブメニューを作成しました。 http://5am.jp/jquery/jquery_ui_tabs/ こちらのタブを上下に配置し、selectされた状態も連動させたいと思っています。スクリプトをどのようにすればいいかお分かりの方がおられましたらご教授頂けませんでしょうか。 <script type="text/javascript"> $(function() { $('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'normal' } }); }); </script> <div id="tabs"> <ul> <li><a href="#tab1"><span>タブ1</span></a></li> <li><a href="#tab2"><span>タブ2</span></a></li> <li><a href="#tab3"><span>タブ3</span></a></li> </ul> <div id="tab1"> <p>タブ1の内容</p> </div> <div id="tab2"> <p>タブ2の内容</p> </div> <div id="tab3"> <p>タブ3の内容</p> </div> 　　　　　　<ul　class="bottom_tab"> <li><a href="#tab1"><span>タブ1</span></a></li> <li><a href="#tab2"><span>タブ2</span></a></li> <li><a href="#tab3"><span>タブ3</span></a></li> </ul> </div> どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
jQueryでスクロールボックスを・・・
添付画像のような縦の自動スライドショーを作ったのですがスクロールボックスのバーがそのままなのが非常に気になります。そこで自動スライドと共にスクロールバーもそのイメージに合わせて自動スクロールさせたいのですがどうすればいいでしょうか？プラグイン、もしくはＪavaScriptの記述例を教えていただけると幸いです。宜しくお願いします。【一部ソース】 ▼script <script type="text/javascript"> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000, true); }); </script> ▼html <div id="featured"> <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"></li> <li class="ui-tabs-nav-item" id="nav-fragment-2"></li> <li class="ui-tabs-nav-item" id="nav-fragment-3"></li> ：繰り返し： </ul> <div id="fragment-1" class="ui-tabs-panel" > <img src="img/no.jpg" alt="" width="250" /> <div class="info" > <h2></h2> </div> </div> ：繰り返し： </div>
- ベストアンサー
- JavaScript
カテゴリページ内　複数タブ
wordpressでサイト作っています idの番号を変えることで１ページ内に#numの連番で複数タブを置ける様にはしたのですが、 while文のなかで番号に連番を振るやり方がわかりません。初心者ですいませんが、よろしくお願いします <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/ … <script type="text/javascript"> $.hoge = function( target ) { //Default Action target.find(".tab_content").hide(); //Hide all content target.find("ul.tabs li:first").addClass("active").show(); //Activate first tab target.find(".tab_content:first").show(); //Show first tab content //On Click Event target.find("ul.tabs li").click(function() { target.find("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab target.find(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content activeTab = activeTab.replace( '#', '.' ); target.find(activeTab).fadeIn(); //Fade in the active content return false; }); }// $.hoge // -------------------------------------- $(function() { $.hoge( $('#num1') ); $.hoge( $('#num2') ); }); </script> </head> <body> <div id="num1" class="container"> <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div class="tab1 tab_content"> <h2>Gallery</h2> </div> <div class="tab2 tab_content"> <h2>Submit</h2> </div> </div> </div> <div id="num2" class="container"> <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div class="tab1 tab_content"> <h2>Gallery</h2> </div> <div class="tab2 tab_content"> <h2>Submit</h2> </div> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
Ajaxを使った検索サイト作成
今、Ajaxを用いてカスタム検索サイトを作成しています。内容は、検索したいキーワードをテキストボックスに入力し、その結果をタブの中で表示させるようにしています。しかし、何度してみても結果を表示させることができません。どうしたら、結果表示させることができるでしょうか？よろしくお願いします。下がソースです。 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Search Site</title> <link rel="stylesheet" type="text/css" href="_css/import.css" media="all" /> <script type="text/javascript" charset="utf-8" src="_js/jquery-1.3.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery_ui_tab.js"></script> </head> <body> <div id="header"> </div> <div id="container"> <div id="read"> <br> </div> <ul> <li><a href="#about" title="about">about</a></li> <li><a href="_ajax/google.html" title="google">google</a></li> <li><a href="_ajax/yahoo.html" title="yahoo">yahoo</a></li> <li><a href="_ajax/goo.html" title="goo">goo</a></li> </ul> <div id="about"> </div> </div> <div id="footer"> </div> </body> </html>
- ベストアンサー
- AJAX
検索サイト作成について
今、Ajaxを用いてカスタム検索サイトを作成しています。内容は、検索したいキーワードをテキストボックスに入力し、その結果をタブの中で表示させるようにしています。しかし、何度してみても結果を表示させることができません。どうしたら、結果表示させることができるでしょうか？よろしくお願いします。下がソースです。 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Search Site</title> <link rel="stylesheet" type="text/css" href="_css/import.css" media="all" /> <script type="text/javascript" charset="utf-8" src="_js/jquery-1.3.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery_ui_tab.js"></script> </head> <body> <div id="header"> </div> <div id="container"> <div id="read"> <br> </div> <ul> <li><a href="#about" title="about">about</a></li> <li><a href="_ajax/google.html" title="google">google</a></li> <li><a href="_ajax/yahoo.html" title="yahoo">yahoo</a></li> <li><a href="_ajax/goo.html" title="goo">goo</a></li> </ul> <div id="about"> </div> </div> <div id="footer"> </div> </body> </html>
- ベストアンサー
- JavaScript
liタグで先頭のみボーダーを消す方法
liタグで先頭のみボーダーを消そうと下記のソースを記述してInternet Explorer6で閲覧した所、一瞬liタグの先頭でボーダーが見えてしまう事がありました。その為、これを抑止したいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。なお、下記が今の所考えている条件となります。 1. http://www.kyosuke.jp/yugajs/のyuga.js 0.7.1を使用し、最初の要素にclass="firstChild"、最後の要素にclass="lastChild"を付加しておりますが、なるべくならこの仕組みは使用し続けたいと思います。 2. liの数はCMS上で動的に変化させても問題ないようにしたいと思います。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></script> <script type="text/javascript" src="js/yuga.js" charset="utf-8"></script> <title>title</title> <style type="text/css">  </style> </head> <body> <ul> <li>hoge1</li> <li>hoge2</li> <li>hoge3</li> </ul> <div><img src="Sunset.jpg" alt="" width="800" height="600" /></div> <div><img src="Winter.jpg" alt="" width="800" height="600" /></div> </body> </html> 以上、よろしくお願いします。
- ベストアンサー
- HTML

タブに地図を入れたら、中心がずれました。

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

タブに地図を入れたら、中心がずれました。

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

カテゴリ
一覧

専門家に質問してみよう
専門家登録