投稿

4月, 2021の投稿を表示しています

iframeのsrcにページ内リンク（#～）があるとスマホで見た時に親ページの先頭ではなくiframeまでスクロールして表示される問題

 テストソース <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>予定表</title> <style> <!-- iframe{border: 0px none transparent; width:100%; height:100%; padding:0px; margin:0px;} #block_banner{height:200px;} #container{width:355px;height:405px;} --> </style> </head> <body> <div id="block_banner"> </div><!--バナー--> <div id="container"> <h4>予定表</h4> <iframe src="Schedule.html #Tuesday " id="Schedule" title="予定表"></iframe> </div> </body> </html> 暫定的なテストページ http://hitorinezumi.html.xdomain.jp/template/timetable/index0.html（削除済み）  iframeのsrcが上記のように「Schedule.html#Tuesday」とページ内リンク（#～）付きだとスマホでリンク先から飛んできた時に親ページの先頭から表示するのではなく、iframeの所までスクロールして表示されてしまう。まるで親ページのページ内リンクに飛んでいるかのよう。 確認したスマホの環境は次の通り。
コメントを投稿
続きを読む

プルダウンメニューをiframeの中に入れる試行錯誤 その２

イメージ
  【プルダウンメニューをiframeの中に入れる試行錯誤 その１】 の続き。 基本形   <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>テスト</title> <style> <!-- *{font-size:18px;box-sizing: border-box;} body{width:821px;} .block_menu{height:50px;background-color:red;} .menu{width:100%;border:none;height:300px; border:10px solid pink; } .container{height:300px;background-color:white;} .contents{height:100%;border:2px solid green;} .footer{height:40px;background-color:black;} .block_menu{} /* .menu{position:relative;z-index:1;} */ .container{} .contents{} /* .text01{position:relative;z-index:2;} */ --> </style> </head> <body> <div class="block_menu"> <iframe src="http://hitorinezumi.html.xdomain.jp/template/menu.html" class="menu" title="メニュー"></iframe> </div> <div
コメントを投稿
続きを読む

プルダウンメニューをiframeの中に入れる試行錯誤 その１

イメージ
 基本形  <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>テスト</title> <style> <!-- *{font-size:18px;} body{width:801px;} .block_menu{height:50px;background-color:red;} .menu{width:100%;border:none;height:300px;} .container{height:300px;background-color:white;} .contents{height:100%;border:2px solid green;} .footer{height:40px;background-color:black;} .block_menu{} /* .menu{position:relative;z-index:1;} */ .container{} .contents{} /* .text01{position:relative;z-index:2;} */ --> </style> </head> <body> <div class="block_menu"> <iframe src="http://hitorinezumi.html.xdomain.jp/template/menu.html" class="menu" title="メニュー"></iframe> </div> <div class="container"> <div class="contents"> <span class=&
コメントを投稿
続きを読む

z-indexで上になっている要素だけでなく下の要素にもアクセスしたい場合の解決策と未解決問題

イメージ
 やりたいこと。 ４番目の図で"block_menu"の下に隠れた"container"のリンクをクリックできなかったり文字の選択もできなかったり、そこにポインタがあるとマウスのホイールでスクロールできなかったりする問題があった。とりあえず、リンクをクリックできるようにしたくて 「教えて!goo」 で質問。実際のソースでは "block_menu"の高さは固定して"block_menu"の内側の"menu"の高さを広げ、"container"の内側の"contents"のリンクにアクセスしたいので、そのことを踏まえて質問するためのソース。 「教えて!goo」 では分かりやすいidにしたけれど、ここでは実際のソースに合わせて変更。   <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>メニュー</title> <style> <!-- *{font-size:18px;} .block_menu{width:300px;height:50px;background-color:red;text-align:left;} .menu{width:250px;height:150px;border:10px solid pink;} .container{width:250px;height:200px;margin-left:20px;background-color:blue;} .contents{width:250px;height:150px;margin-left:20px;background-color:green;text-align:right;} .footer{width:200px;height:40px;b
コメントを投稿
続きを読む

Firefoxで一番下のstickyが上に引っ張られて下に無用なスペースが発生する問題の解決策

イメージ
 やりたかったこと。           ５番目の図で下にスペースが生じたので、その原因を探るための単純化したソース。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>メニュー</title> <style> <!-- .menu{width:300px;height:400px;background-color:red;} .contents{width:300px;height:1000px;background-color:blue;border-radius:50%;} .footer{width:300px;height:50px;background-color:red;} .footer{ position:sticky; bottom:0;left:0; } .contents{ position:relative; top:-200px; margin-bottom:-200px; } --> </style> </head> <body> <div class="menu"></div> <div class="contents"></div> <div class="footer"></div> </body> </html>   「教えて!goo」 で教えてもらった解決策。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport&qu
コメントを投稿
続きを読む

インラインフレームの中のボタンをクリックしてフレームの外のページの一番上を表示させる

index.html <div id="block_footer" class="background"> <iframe src="footer.html" name="ifr_footer" id="ifr_footer" title="フッター"></iframe> </div> footer.html <a href="javascript:location.href=location.href;" title="一番上に戻る" target="_top"><img src="img/totop.png" width="36" height="36" alt="一番上に戻る" /></a> インラインフレームの中でなければ <a href="#top">とでもすれば良いのだろうけれど、インラインフレームの中ではインラインフレームのsrc#topに飛んでしまうらしいので使えない。 「target="_top"」は親フレームに表示させるらしい。 "javascript:location.href=location.href;"は再読込の代わりで、正規の方法ではなく思いついてscriptを使用している。ただ、再読込でも同じかもしれないが、ブラウザに「以前の表示した場所を表示する」なんてお節介な仕様があると再読込してもページの一番上を表示しないかもしれない。インラインフレームの内側からフレームの外の親フレームのページの一番上を表示させる方法は、ちゃんと確認する必要がある。 ページのトップに戻るボタンをjavascriptでjQueryで表示させる方法はあるけれど、面倒なので確認してない。<a href="#top">に匹敵する単純な方法を求めている。 2021/4/20 14:30頃記載。
コメントを投稿
続きを読む

現在の曜日と時刻を取得してインライフレームのsrcに反映させるJavascript

<div id="block3a"> <h4>予定表</h4> <iframe src="timetable/Schedule.html" name="Schedule" id="Schedule" title="予定表"></iframe> </div> <script type="text/javascript"> <!-- var date = new Date () ; var year = date.getFullYear() ;    // 年 var month = date.getMonth() + 1 ;    // 月 var day = date.getDate() ;    // 日 var hour = date.getHours() ;    // 時 var hour0 = hour-1; if(hour0 < 5){hour0=""}else{hour0=("00"+hour0).slice(-2)};   // ５時前なら無視 var minute = date.getMinutes() ;    // 分 var second = date.getSeconds() ;    // 秒 var dayOfWeek = date.getDay() ;    // 曜日(数値) var dayOfWeekStr = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ][dayOfWeek] ;    // 曜日(英語表記)// var obj = document.getElementById('Schedule'); obj.src = 'timetable/Schedule.html#'+dayOfWee
コメントを投稿
続きを読む

縦に広げるメニュー

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>メニュー</title> <style> <!-- *{margin:0;padding:0;} ul{list-style-type:none;} .menu{display:none;} .check{display:none;} .switch {display:inline-block;width:1rem;height:1rem;} .switch span{color:red;display:inline-block;transform: rotate( -90deg );} .switch + a + ul{position:relative;left:1rem;display:none;} .check:checked + label span{transform: rotate( 0 );} .check:checked + label  + a + ul {display:block;} --> </style> </head> <body> <input type="checkbox" id="menu00" class="check" value="0" /><label for="menu00" class="switch"><span>▼</span></label> <a>メニュー</a> <ul class="menu">   <li><input type="checkbox&quo
コメントを投稿
続きを読む