• 締切済み

横スクロールのiframeをスムース移動させたい。

webサイトの横スクロールのインラインフレームをスムーススクロールにしようとしています。 Javascript初心者です。 色々調べたのですが、うまくできず、力を貸していただけたらと思います。 http://okwave.jp/qa/q6244820.html こちらの質問のようにスムーススクロールを使った移動を横スクロールで使いたいと考えています。 上記のサイトを参考に組んだコードが下記です。 <!-- 親html --> <div> <a href="#a" onclick="return document.getElementById('inline').contentWindow.ps2.scroller(this);">A</a> </div> <div> <a href="#b" onclick="return document.getElementById('inline').contentWindow.ps2.scroller(this);">B</a> </div> <div> <a href="#c" onclick="return document.getElementById('inline').contentWindow.ps2.scroller(this);">C</a> </div> <div> <a href="#d" onclick="return document.getElementById('inline').contentWindow.ps2.scroller(this);">D</a> </div> <div> <a href="#e" onclick="return document.getElementById('inline').contentWindow.ps2.scroller(this);">E</a> </div> <div> <a href="#f" onclick="return document.getElementById('inline').contentWindow.ps2.scroller(this);" >F</a> </div> <iframe id="inline" src="フレーム内html" name="inline"> </iframe> <!-- フレーム内html --> <head> <script type="text/javascript" src="/ps2.js"></script> </head> <body> <div> <a id="a" name="a"> A </a> <a id="b" name="b"> B </a> <a id="c" name="c"> C </a> <a id="d" name="d"> D </a> <a id="e" name="e"> E </a> <a id="f" name="f"> F </a> </div> </body> しっかり理解していなくて恐縮なのですが読み込んでいるJavaScriptは横スクロールには対応していないのでしょうか？ 文章の欠陥もしくはJavaScriptの応用の仕方、もしくは別のこうした使用に対応できる他のJavaScript等ありましたら教えて下さい。 どうぞ宜しくお願い致します。

みんなの回答

回答No.1

それハッシュリンク先に飛んでるだけだと思うんだけど気のせいかなぁ？ したい事がイマイチ見えてこない…… 別フレーム内でリンクしたターゲットの横位置までスクロールしたい ……って事だよね？ ザックリだけど 今のコードじゃ無理 ロード時に「ターゲット要素(エレメント).offsetLeft」で左位置取得して 「フレーム要素(エレメント).scrollLeft」に放り込めばいいんじゃない？ ……まぁ放り込む先はbodyでもいいけど

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • iframe内でのスクロールについて

    iframeに関する質問です。 iframe内のみアンカーでスクロールしたいのですが、iframe含めページ全体がスクロールしてしまいます。 sampleファイルとして質問したい部分を抜粋したものを下記を記載します。 ◆index.html(親html) ◆01.html(iframe含む子html) ↓ ◆index.html <ul> <li><a href="01.html#Aarea" target="inline">子htmlのAへスクロール</a></li> <li><a href="01.html#Barea" target="inline">孫htmlのBへスクロール</a></li> <li><a href="01.html#Carea" target="inline">孫htmlのCへスクロール</a></li> </ul> <iframe src="01.html" id="inline" name="inline" width="300px" height="300px"></iframe> ◆01.html <div name="Aarea" id="Aarea" style="background:#00F; width:300px; height:300px; color:#CCC;"> <p>A area</p> </div> <div name="Barea" id="Barea" style="background:#9C0; width:300px; height:300px; color:#CCC;"> <p>B area</p> </div> <div name="Carea" id="Carea" style="background:#C36; width:300px; height:300px; color:#CCC;"> <p>C area</p> </div> これを実行した際に親であるindex.htmlもスクロールしてしまいます。 以前にも似た質問がされていましたが、対処方法が思っていたものと違っていた為質問自体重複してしまうかもしれませんが質問するに至りました。 完全にiframe内のみをスクロールさせる方法はありますでしょうか。 よろしくお願いします。

  • ページ訪問時にiframe内を自動スクロールしたい

    iframe内に表示した内容（aaa.html）を、 ページ訪問時（もしくは更新時）に自動的に100px下にスクロール させたいと思っていますが、うまくできず困っています。 将来的にはif文によってスクロール位置を変えたいと考えています。 またサイトの都合上、アンカータグを使用しての位置指定はできません。 JavaScriptの使い方が間違っているのでしょうか？ ご教示お願い致します。 以下ソースです。 framescroll.html <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> // 縦スクロール－上 function framescrollu() { document.getElementById("frame1").contentWindow.scrollBy(0,-100);} // 縦スクロール－下 function framescrolld() { document.getElementById("frame1").contentWindow.scrollBy(0,100);} </script> </head> <body> <center> <script type="text/javascript"> // 自動スクロール－下に100 document.getElementById("frame1").contentWindow.scrollBy(0,100);} </script> <!-- 縦スクロール --> <form> <input type="button" value="up" onClick="JavaScript:framescrollu()"> <input type="button" value="down" onClick="JavaScript:framescrolld()"> </form> <br> <iframe id="frame1" src="aaa.html" name="frame1" frameborder="1" scrolling="auto" width="200" height="200"> </iframe> </center> </body> </html> aaa.html ああああああああああああああああああああああ<br> いいいいいいいいいいいいいいいいいいいいいい<br> うううううううううううううううううううううう<br> ええええええええええええええええええええええ<br> おおおおおおおおおおおおおおおおおおおおおお<br> ああああああああああああああああああああああ<br> いいいいいいいいいいいいいいいいいいいいいい<br> うううううううううううううううううううううう<br> ええええええええええええええええええええええ<br> おおおおおおおおおおおおおおおおおおおおおお<br> ああああああああああああああああああああああ<br> いいいいいいいいいいいいいいいいいいいいいい<br> うううううううううううううううううううううう<br> ええええええええええええええええええええええ<br> おおおおおおおおおおおおおおおおおおおおおお<br>

  • 表示中のタブに色を付けたい

    タブ1111～5555は青色表示されていますが 選択中には常に赤色表示させておきたいのですがどうすれば良いのでしょうか。 ご教授ください <html> <head> <script type="text/javascript"> function ChangeTab(tabname) { // 全部消す document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; document.getElementById('tab4').style.display = 'none'; document.getElementById('tab5').style.display = 'none'; // 指定箇所のみ表示 document.getElementById(tabname).style.display = 'block'; } // --></script> </head> <body> <a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">1111</a> <a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">2222</a> <a href="#tab3" class="tab3" onclick="ChangeTab('tab3'); return false;">3333</a> <a href="#tab4" class="tab4" onclick="ChangeTab('tab4'); return false;">4444</a> <a href="#tab5" class="tab5" onclick="ChangeTab('tab5'); return false;">5555</a> <div id="tab1" class="tab"> <div class="information-newwarp">aaaa</div> </div> <div id="tab2" class="tab"> <div class="information-newwarp">bbbb</div> </div> <div id="tab3" class="tab"> <div class="information-newwarp">cccc</div> </div> <div id="tab4" class="tab"> <div class="information-newwarp">dddd</div> </div> <div id="tab5" class="tab"> <div class="information-newwarp">eeee</div> </div> <script type="text/javascript"><!-- // デフォルトのタブを選択 ChangeTab('tab1'); // --></script><!--■タブページデフォルト設定js--> </body> </html>

  • iframeクッキー　あと少しで

    またしても立ててしまいました。 自分の力ではどうしようも出来ないので、立てたことお許しください。 index.htmlのiframeに最初に表示されているページ　a.html index.htmlの<a>タグリンクでiframe内に表示するページの内、 　クッキーによって、更新おしてもiframe内を変えないページ　b.html・c.html 　クッキーを解除し、更新を押すと、a.htmlを表示するページ　d.html・e.html 現在、今までの質問で以下のタグでiframeのクッキーを使用しています。 ************************************************************************** index.html ************************************************************************** <head>内 　<script language="JavaScript" src="/standard.js"></script> 　<script><!-- 　function GetHeightForIndex(){ 　GetHeight("tmain"); 　} 　//--></script>　　これは、iframeの高さ可変のタグです <body>内 　<a href="b.html" onclick="setCook(this.href)">ｂ</a> 　<a href="c.html" onclick="setCook(this.href)">ｃ</a> 　<a href="d.html" onclick="setCook('')">ｄ</a>　 　<a href="e.html" onclick="setCook('')">ｅ</a> <script type="text/javascript"><!-- var cook_key = "iframesrc"; if(cook_src) document.getElementById('iframe名').src = 'a.html'; var cook_src; var cookies = document.cookie.split(';'); for(var i=0; i<cookies.length; i++){ if(cookies[i].indexOf(cook_key) >-1){ cook_src = cookies[i].split('='); break; } } var file = cook_src? cook_src[1] : 'a.html'; document.write('<iframe class="tmain" src="',file,'" id="iframeID" name="iframe名" frameborder="0" scrolling="no" height="1500"></iframe>') document.getElementById('tmain').src = cook_src ? (cook_src[1] ? cook_src[1] : 'a.html') : 'a.html'; function setCook(arg){ document.cookie = cook_key + '=' + arg + ';'; } //--></script> <noscript> <iframe class="tmain" src="a.html" id="iframeId" name="iframe名" frameborder="0" scrolling="no" height="1500"></iframe> </noscript> ************************************************************************** standard.js ************************************************************************** //iframe高さ可変 function getIFrameDocument(aID){ if (document.getElementById(aID).contentDocument){ return document.getElementById(aID).contentDocument; } else { return document.frames[aID].document; } } function GetHeight(ID){ if (document.height) { document.getElementById(ID).style.height = getIFrameDocument(ID).height +20 +"px" ; }else{ document.getElementById(ID).style.height = getIFrameDocument(ID).body.scrollHeight +20 +"px"; } } //iframeクッキー var cook_key = "iframesrc"; window.onload = function(){ } function setCook(arg){ document.cookie = cook_key + '=' + arg + ';'; } user_pref("dom.disable_window_open_feature.scrollbars", true); ************************************************************************** この状態で現在、困っているのは 　a.htmlを表示している状態で更新を押すと、iframe内が404になることです。 b.htmlなどで更新を押すと、b.htmlが表示されたままだし、 d.htmlなどで更新を押すと、a.htmlが表示されます。 解決方法教えてくださいっ。

  • リンク押下でタグを書き換えたい

    リンクが複数あって、押したリンク文字だけ<span></span>のみにしたいと 思っています。また対応するdivタグのdisplay属性も書き換えたいです。 とりあえず思いついたのは以下の方法なのですが、冗長ですし、 リンクの数が増えた場合に足していくのが大変です。 もっとシンプルに書く方法がないものでしょうか。 ご助言ください。 <html> <body> <script> function change(spanid,divid,menuName){ document.getElementById('menu1').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu1','div1','メニュー1')\">メニュー1</a>"; document.getElementById('div1').style.display="none"; document.getElementById('menu2').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu2','div2','メニュー2')\">メニュー2</a>"; document.getElementById('div2').style.display="none"; document.getElementById('menu3').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu3','div3','メニュー3')\">メニュー3</a>"; document.getElementById('div3').style.display="none"; document.getElementById(spanid).innerHTML = menuName; document.getElementById(divid).style.display="block"; } </script> <ul> <li><span id="menu1">メニュー1</span></li> <li><span id="menu2"><a href="javascript:void(0)" onclick="change('menu2','div2','メニュー2')">メニュー2</a></li> <li><span id="menu3"><a href="javascript:void(0)" onclick="change('menu3','div3','メニュー3')">メニュー3</a></li> </ul> <div id="div1"> test1 </div> <div id="div2" style="display:none"> test2 </div> <div id="div3" style="display:none"> test3 </div> </body> </html>

  • <a href="#z" onclick="">

    によって onclickの動作をさせた後 <a name="z"></a>へのジャンプをさせようとしたのですが onclickの動作だけがおこなわれジャンプ動作をしません onclickで非表示の内容を表示させその表示された部分の特定の場所 にジャンプさせたいのです 何かいい方法はあるでしょうか？ よろしくお願いします <a href="#z" onclick="document.getElementById('x').style.display='block';return false"> go to 99 </a> <br/> <br/> <div id="x" style="display:none"> 1<br/> 2<br/> ............. 99<br/> <a name="z"></a> </div>

  • クリックするとするするとスクロールさせたい(JS)

    Javascript勉強中です。 画像のリンクをクリックすると、同一ページ内の任意の場所までするすると、 スクロールするような機能を作成したいのです。 現状、通常のaタグでくくったリンクであれば、実現できています。 ■HTML <a href="#top"><div><img src="./img/naviHome.png" name="home"></div></a> <a href="#recruit"><div><img src="./img/naviRecruit.png" name="recruit"></div></a> <a href="#priceList"><div><img src="./img/naviPriceList.png" name="priceList"></div></a> ■javascript <script type="text/javascript"> <!-- //aリンクをクリックすると、同一ページ内の任意のnameタグまでするするとスクロールする $('a[href^=#]').click(function() { // スクロールの速度 var speed = 800; // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); --> </script> ここから、画像が選択されたことを示すために色をかえた画像に切り替えたいため、 下記のJavascriptを実行させたいのです。 //選択されたことを明示するため画像をいれかえる// document.home.src="./img/selectedHome.png" aリンクをなくして、以下のようにしてしまうと、「$('a[href^=#]').click(function() 」が動作しません。 うまく、するするとスクロールさせながら、画像を入れ替える処理ができないものでしょうか？ <a href="javascript: fncNaviLink('#top');"><div><img src="./img/naviHome.png" name="home"></div></a> function fncNaviLink(link) { document.home.src="./img/selectedHome.png" location.href = link; }

  • IFRAMEのscrollingを常にnoにしたい

    iframeを使ってBBSをscrolling="no"で表示したいのですが、 src="パスワード.cgi"から自動でbbs.cgiになったときにスクロール表示してしまいます。 iframe内で表示先が変更された場合でもスクロール表示しないようにできるのでしょうか？もしできるのであれば教えていただきたいのですが… 掲示板をiframe と言うことで、某ホームページをを参考にスクロールが表示さ れないようにしてみました。 が以下のようにパスワードを入力後に表示するiframe はスクロールを表示して しまいます。 <script type="text/javascript"> <!-- function LoadFrame(frid) { var IFR = document.getElementById(frid); IFR.style.height = (IFR.contentWindow)? IFR.contentWindow.document.body.scrollHeight: document.frames[frid].document.body.scrollHeight; } //--> </script> <iframe src="member/gate.cgi" name="coach" onload="LoadFrame(this.id)" id= "Ifr" width=497 frameborder="0" scrolling="no"></iframe> 試行錯誤しながらなんとかやってる超初心者です。よろしくお願いします。

  • javascriptによるスクロールを縦から横に変換したい

    拾ったソースを改造しようとしているのですが 知識がない為うまくいきません。 divの中のsample1～10を横に並べて、改行なしの横スクロールにしたいです。 今は縦スクロールです。 どこを直せばいいのか教えてくださいm(_ _)m ―――――――――――――――――― <SCRIPT language="JavaScript"> <!-- var SmoothScroll = {}; SmoothScroll = { targetScrollTop : 0, dist : 0, timer : 0, count : 0, parentid : 0, lastDist : 0, //speedStore : [], options : {}, defaultOptions : { time : 1*1000, unit : 50 }, scrollTo : function( element, parent, options ){ this.options.time = this.defaultOptions.time; this.options.unit = this.defaultOptions.unit; if( options ){ this.options.time = ( options.time ) ? options.time : this.options.time; this.options.unit = ( options.unit ) ? options.unit : this.options.unit; } clearInterval( this.timer ); this.parentid = parent; this.scrollTopMax = this.$(parent).scrollHeight - this.$(parent).offsetHeight + parseInt(this.$(parent).style.borderTopWidth) + parseInt(this.$(parent).style.borderBottomWidth); if( navigator.userAgent.match( "MSIE" ) ){ this.targetScrollTop = ( element ) ? this.$(element).offsetTop : 0; }else{ var targetOffsetTop = ( element ) ? this.$(element).offsetTop : this.$(parent).offsetTop; this.targetScrollTop = targetOffsetTop - this.$(parent).offsetTop; } this.targetScrollTop = ( this.targetScrollTop > this.scrollTopMax ) ? this.scrollTopMax : this.targetScrollTop; this.dist = this.targetScrollTop - this.$(parent).scrollTop; this.lastDist = 0; this.timer = setInterval('SmoothScroll.update()', this.options.unit ); this.count = 0; //this.speedStore = []; this.update(); }, update : function(){ var dist = this.targetScrollTop - this.$(this.parentid).scrollTop; var speed = 2 * dist * this.options.unit / ( this.options.time - this.options.unit * this.count ); //this.speedStore.push( speed ); speed = ( speed > 0 ) ? Math.ceil( speed ) : Math.floor( speed ); if( Math.abs(dist) <= Math.abs(speed) ){ // got there clearInterval( this.timer ); this.$(this.parentid).scrollTop = this.targetScrollTop; return; }else if( this.lastDist == dist ){ // stuck clearInterval( this.timer ); this.$(this.parentid).scrollTop = this.targetScrollTop; return; } var scrollTop = this.$(this.parentid).scrollTop + speed; this.$(this.parentid).scrollTop = scrollTop; this.lastDist = dist; this.count++; if( this.count == this.options.time / this.options.unit ){ // timeout clearInterval( this.timer ); this.$(this.parentid).scrollTop = this.targetScrollTop; } }, $ : function(id) { return document.getElementById(id); } } --> </script> <div id="scrolltop" style="width: 750px; height: 200px; overflow-x: scroll; overflow-y: scroll; border: 1px black solid;"> <a href="sample1">1</a> <a href="sample2">2</a> <a href="sample3">3</a> <a href="sample4">4</a> <span id="middle" style="color: red"> <a href="sample5">5</a> </span> <a href="sample6">6</a> <a href="sample7">7</a> <a href="sample8">8</a> <a href="sample9">9</a> <span id="bottom" style="color: blue"> <a href="sample10">10</a> </span><br /> </div> <input type="button" value="go to top" onclick="SmoothScroll.scrollTo(0,'scrolltop');"/> <input type="button" value="go to middle" onclick="SmoothScroll.scrollTo('middle','scrolltop');"/> <input type="button" value="go to bottom" onclick="SmoothScroll.scrollTo('bottom','scrolltop');"/>

  • 入力された文字列からリンクタグを生成

    お世話になります。 ブラウザから、一行テキストに入力された文字列を使用してリンクタグを生成する挙動を構築していますが、肝心のリンクタグ（ aタグ等 ）が反映されずに悩んでいます。 普段PHPでプログラミングを行っていますので、一旦PHPで変数に置き換えたり、データベースを介したり様々な方法を試みましたが、中々うまくいかずにいます。 -- 【 JavaSの定義箇所 】 ------------- <script type="text/javascript"> <!-- function textcopy(){ var text1 = document.getElementById("text1").value; document.getElementById("text1").value = ""; text1 = document.getElementById("insert1").innerHTML + text1; document.getElementById("insert1").innerHTML = "<div>" + text1 + "</div>"; var text2 = document.getElementById("text2").value; document.getElementById("text2").value = ""; text2 = document.getElementById("insert2").innerHTML + text2; document.getElementById("insert2").innerHTML = "<div>" + text2 + "</div>"; var text3 = document.getElementById("text3").value; document.getElementById("text3").value = ""; text3 = document.getElementById("insert3").innerHTML + text3; document.getElementById("insert3").innerHTML = "<div>" + text3 + "</div>"; var text4 = document.getElementById("text4").value; document.getElementById("text4").value = ""; text4 = document.getElementById("insert4").innerHTML + text4; document.getElementById("insert4").innerHTML = "<div>" + text4 + "</div>"; var text5 = document.getElementById("text5").value; document.getElementById("text5").value = ""; text5 = document.getElementById("insert5").innerHTML + text5; document.getElementById("insert5").innerHTML = "<div>" + text5 + "</div>"; } //--> </script> -- 【 form部品の箇所 】 -------------- <form> <input type="text" id="text1" value="<a href='"> <input type="text" id="text2"> <input type="text" id="text3" value="'>"> <input type="text" id="text4"> <input type="text" id="text5" value="</a>"> <br /> <div id="insert1" style="display: inline-block;"></div> <div id="insert2" style="display: inline-block;"></div> <div id="insert3" style="display: inline-block;"></div> <div id="insert4" style="display: inline-block;"></div> <div id="insert5" style="display: inline-block;"></div> <button type="button" onclick="textcopy()">submitする</button> </form> ------------------------------- 例えば、 【 <a href='http://www.hoge.com'>テスト</a> 】の様に返したいのに、 【 http://www.hoge.com'>テスト 】と返ります。 HTMLタグは特殊文字に変換してみましたが、結果は同じでした。 因みにこの挙動がうまくいったら、type属性はhiddenにして隠し要素にするつもりでした。 恐らくこの様な面倒くさい構文より簡単な書き方があるかと思いますが、 今までJavaScript自体殆どタッチしていませんでしたので、調べながら 自分で構築してみました。 ご教示の程、どうぞよろしくお願い申し上げます。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する