2012.03.28
スマートフォン用のサイトでよくアドレスバーを隠す設定になっているところを多く見かけます。
ということで検索していろいろなページを参考にやってみました。
一画面で表示できる範囲がひろくなっていい感じです。
赤字部分が必須です。
---------------
---------------
1点注意点が。
このアドレスバーを隠す設定をしている場合、
idを使ったアンカーリンクがきかなくなります。
ご注意を。
ということで検索していろいろなページを参考にやってみました。
一画面で表示できる範囲がひろくなっていい感じです。
赤字部分が必須です。
---------------
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <title>スマートフォン用サイト</title> <style type="text/css"> body { min-height: 416px; -webkit-text-size-adjust: none; } </style> <script type="text/javascript"> window.onload = function(){ setTimeout("scrollTo(0,1)", 100); } </script> </head> <body> サイトの中身 </body> </html>
---------------
1点注意点が。
このアドレスバーを隠す設定をしている場合、
idを使ったアンカーリンクがきかなくなります。
ご注意を。
2012.03.21
JSの実行タイミングとして「ページの読み込みが完了したとき」がありますが、
いまだに忘れて調べなおしてしまうのでメモです。
■HTMLコードを読み込み終わった時点で実行
要jQuery。タイミング的によく使います。
-------------------------------------------------
$(function(){
// 処理
});
または
$(document).ready(function(){
// 処理
});
-------------------------------------------------
■すべて読み込んだ後に実行
画像などもすべて読み込んだ後に実行。
-------------------------------------------------
window.onload=function(){
// 処理
}
-------------------------------------------------
・jQueryを使う場合
-------------------------------------------------
$(window).load(function () {
// 処理
});
または
jQuery.event.add(window, "load", function(){ /* 処理 */ });
-------------------------------------------------
・HTMLに書く場合
HTMLのbodyタグに書くことでも同じ処理ができます。
-------------------------------------------------
<body onload="処理">
-------------------------------------------------
いまだに忘れて調べなおしてしまうのでメモです。
■HTMLコードを読み込み終わった時点で実行
要jQuery。タイミング的によく使います。
-------------------------------------------------
$(function(){
// 処理
});
または
$(document).ready(function(){
// 処理
});
-------------------------------------------------
■すべて読み込んだ後に実行
画像などもすべて読み込んだ後に実行。
-------------------------------------------------
window.onload=function(){
// 処理
}
-------------------------------------------------
・jQueryを使う場合
-------------------------------------------------
$(window).load(function () {
// 処理
});
または
jQuery.event.add(window, "load", function(){ /* 処理 */ });
-------------------------------------------------
・HTMLに書く場合
HTMLのbodyタグに書くことでも同じ処理ができます。
-------------------------------------------------
<body onload="処理">
-------------------------------------------------
2012.02.29
リンクURLにパラメータを付け、
リンク先のページで処理させるというのをやったのでメモです。
■index.html
---------------------------------------------------------------------------------------
<a href="page.html?sample1=yes&sample2=100">リンクです</a>
---------------------------------------------------------------------------------------
上記のようなリンクを設置。
URLの後に"?"でパラメータを繋ぎます。
複数ある場合はさらに"&"で繋ぎます。
■page.html
---------------------------------------------------------------------------------------
<script type="text/javascript">
var urlPrm = new Object;
var urlSearch = location.search.substring(1).split('&');
for(i=0;urlSearch[i];i++) {
var kv = urlSearch[i].split('=');
urlPrm[kv[0]]=kv[1];
}
alert(urlPrm.sample1);
alert(urlPrm.sample2);
</script>
---------------------------------------------------------------------------------------
飛び先のページに書くJSは上記のようになります。
最後のアラートで表示される文字はそれぞれ"yes","100"となります。
リンク先のページで処理させるというのをやったのでメモです。
■index.html
---------------------------------------------------------------------------------------
<a href="page.html?sample1=yes&sample2=100">リンクです</a>
---------------------------------------------------------------------------------------
上記のようなリンクを設置。
URLの後に"?"でパラメータを繋ぎます。
複数ある場合はさらに"&"で繋ぎます。
■page.html
---------------------------------------------------------------------------------------
<script type="text/javascript">
var urlPrm = new Object;
var urlSearch = location.search.substring(1).split('&');
for(i=0;urlSearch[i];i++) {
var kv = urlSearch[i].split('=');
urlPrm[kv[0]]=kv[1];
}
alert(urlPrm.sample1);
alert(urlPrm.sample2);
</script>
---------------------------------------------------------------------------------------
飛び先のページに書くJSは上記のようになります。
最後のアラートで表示される文字はそれぞれ"yes","100"となります。
2012.02.20
以前このグラビカでも「DD_belatedPNG」を紹介する記事を紹介していました、
pngをIE6に対応させるためのJS「DD_belatedPNG」について注意点です。
CSSでマウスオーバーを表現させたい場合、
通常時とオーバー時の画像をつなげて、aタグの背景に指定し、
hoverで画像をスライドさせる方法があります。
png画像を使用した場合、IE6で正しく表示されないため
DD_belatedPNGを使用します。
が、、、、
上記のような場合、aタグの縦幅(height)が、奇数だと、
IE6で、オーバー画像が1px余分にスライドしてしまい、
画像がずれたような表現になってしまいます。
背景の位置指定では調節できないようです。
なんでか全くわかりませんが、
縦幅を偶数にすることで解決できます。
きみのために入れてるのにわがまま言うなよ。。。(;´_`;) ハァ・・
pngをIE6に対応させるためのJS「DD_belatedPNG」について注意点です。
CSSでマウスオーバーを表現させたい場合、
通常時とオーバー時の画像をつなげて、aタグの背景に指定し、
hoverで画像をスライドさせる方法があります。
png画像を使用した場合、IE6で正しく表示されないため
DD_belatedPNGを使用します。
が、、、、
上記のような場合、aタグの縦幅(height)が、奇数だと、
IE6で、オーバー画像が1px余分にスライドしてしまい、
画像がずれたような表現になってしまいます。
背景の位置指定では調節できないようです。
なんでか全くわかりませんが、
縦幅を偶数にすることで解決できます。
きみのために入れてるのにわがまま言うなよ。。。(;´_`;) ハァ・・
2012.02.15
JavaScript内に相対パスを記述すると、
そのJavaScriptが読み込まれるHTMLからの相対パスになります。
同じJavaScriptを複数のページで使うような場合、
相対指定だとページごとにパスが変わってしまうため上手くいきません。
そういうとき、
JavaScript自身の階層を取得し、
自分からの相対パスにするスクリプトを探してみました。
こちらのサイトで紹介されています。
Tipsというかメモ
JavaScript :: 自分自身が設置されているURLを取得する
そのJavaScriptが読み込まれるHTMLからの相対パスになります。
同じJavaScriptを複数のページで使うような場合、
相対指定だとページごとにパスが変わってしまうため上手くいきません。
そういうとき、
JavaScript自身の階層を取得し、
自分からの相対パスにするスクリプトを探してみました。
こちらのサイトで紹介されています。
Tipsというかメモ
JavaScript :: 自分自身が設置されているURLを取得する
JS:自身の設置URLを取得の続きを読む