スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーサイト/--/--/-- --:--/スポンサー広告/ トラックバック(-)/コメント(-)

前のページに戻る

ホームページなど作っていると、どうしても前のページにあるlinkなどのために戻ってほしいときがあります。
この例はブラウザの戻るボタンと同じ機能ですので、絶対に必要というものでもないですが、ページの下の方に設置すれば少し役立つかもしれません。

以下をメモ帳などにコピーandペーストします。出来たら戻る理由も書き足すといいですね。



<P><CENTER>
<A HREF="javascript:history.back()">前のページに戻る</A>
</CENTER></P>

<FORM>
<!-- ボタンで表示する場合 -->
<INPUT type="button" Value="前のページに戻る" onClick="history.go(-1);">
</FORM>
</CENTER></P>

<INPUT type="button" Value="前のページに戻る" onClick="history.go(-1);">

http://blog-imgs-50.fc2.com/5/l/e/5leaf/history-go.html
スポンサーサイト
前のページに戻る/2014/12/15 16:53/javascript/ トラックバック(-)/ comment(0)

3カラムでウィンドウの幅が狭くなると左右のメニューがプルダウンメニューに変わる

DEMOは←こちら

PC表示サイズのカラムが崩れる幅 960pxが切れるときブルタウンメニューにしました。ブルタウンメニューの幅はMOBILE用に310pxにしてみました。いかがでしょうか?
2015年1月19日現在表示の当blog ではさらに1200pxの表示まで設定してあります。

jQueryscriptはheadのなかに貼ります。



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($){

/* prepend menu icon */
$('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');

/* toggle nav */
$("#menu-icon").on("click", function(){
$("#nav").slideToggle();
$(this).toggleClass("active");
});
});
</script>

HTML



<body>
<div id="container">
<div id="header"><!--ここからheader-->
<h1>title</h1>
<nav id="nav-wrap"><!--ここからブルタウンメニューの内容-->
<div id="nav">
ここに左側の内容と同じものを張り付ける

<div class="box"><!--/ここからbox-->

このboxの中に右側と同じものを張り付ける

</div><!--/ここまでbox-->

</div><!-- /ここまでid -->
</nav><!-- nav-wrap --><!--ここまでブルタウンメニューの内容-->
</div><!--ここまで/header-->

<div id="wrapper"><!-- /ここからラッパー -->

<div id="main"><!--ここから真ん中-->
ここに真ん中の内容
</div><!--ここまで真ん中-->

<div id="left"><!--ここから左側-->
ここに左側の内容
</div><!-- /left --><!--ここまで左側-->

</div><!-- /ここまでラッパー -->

<div id="right">ここに右側の内容

</div><!-- /right -->
<div id="footer">フッター部の内容</div><!-- /footer -->
</div>

</body>

【More Open】
3カラムでウィンドウの幅が狭くなると左右のメニューがプルダウンメニューに変わる/2015/01/19 10:38/javascript/ トラックバック(-)/ comment(0)

ページ全体を自動スクロール

昔作ったホームページで空から降りてくる女の子がずっと下の方まで行くというのが
なぜか動かなくなっていました。

きょう、直そうとしたら、どうやったのか全く分からなくなっていました。
四苦八苦の末やっと直せました。

ほんとにこれは書き留めておかなくてはなりません。

ページ全体を自動スクロールさせる方法です。

HEADタグの中に
<SCRIPT LANGUAGE="JavaScript">
<!--
var count = 0;
var max = 100;
function autoScroll() {
if (navigator.appVersion > "3") {
if (count < max) {
scroll(0,count++);
timer = setTimeout("autoScroll()",10);
status = max-count;
}
}
}
//-->
</SCRIPT>
そしてBODYタグの中に
<BODY onLoad="autoScroll()">

var max = 100;
この数字が動く範囲のピクセル
timer = setTimeout("autoScroll()",10);
ここがスピード
ページ全体を自動スクロール/2015/01/26 17:51/javascript/ トラックバック(-)/ comment(0)
| ホーム |

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。