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

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

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

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

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

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)▲

すごいやつ　display

ｃｓｓにおいてdisplayを使うといろいろとすごいことが起きる。

display:block;
１．これだと確実に改行されます。

２．aに設定すると
　文字だけではなく全体がクリック可能に

３．そしてコンテンツの表示

それに対し
display: none;
では非表示



使い方としては

@media screen and (max-width: 960px) {
｝
@media screen and (max-width: 360px) {
｝
などとウインドウの幅を設定するスタイルシートで960pxでは表示 360pxでは非表示。
またはその逆。
のように設定できる。
例えばは幅が狭くなるとメニューカラムは消えてメニューアイコンが現れるなどに使える。

ほんとにすごい。びっくりです
すごいやつ　display/2015/01/24 16:17/css/ トラックバック(-)/ 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)▲

fc2blogで<head>の<title>を個別ページでは「記事タイトル」トップページでは「Blog名」にする

＊このタイトルというのは　お気に入りに入れようとすると「名前」のところに出てくるもののことです。IEではアドレスバーの横か下に出ているもの、またソースの<title>〜</title>のところです。

blogのトップページindex_areaでは　「Blogの名前」　だけ
個別ページpermanent_areaでは　「記事のタイトル」　だけ
そのほかのページでは　「Blogの名前＋記事のタイトル」　という風にしてみました。
エリアごとに分けることでページソースにはtitleタグは一つだけなのでこれで良いような気がしますがいかがでしょうか。

<head>〜</head>
の中の
<title>〜</title>のところを以下に置き換えました。



<!--index_area--><title><%blog_name></title><!--/index_area-->
<!--permanent_area--><title><%sub_title></title><!--/permanent_area-->
<!--category_area--><title><%blog_name>-<%sub_title></title><!--/category_area-->
<!--date_area--><title><%blog_name>-<%sub_title></title><!--/date_area-->

上記だけではpage-X.htmlなどでtitleがURLになってしまうのでさらに下記を付け加えました。
こんなにたくさんtitleを書くとは・・・
<!--not_date_area-->
<!--not_index_area-->
<!--not_permanent_area-->
<title><%blog_name></title>
<!--/not_permanent_area-->
<!--/not_index_area-->
<!--/not_date_area-->

悩みつつ・・・きょうはここまで。
fc2blogで<head>の<title>を個別ページでは「記事タイトル」トップページでは「Blog名」にする/2015/01/16 05:06/fc2blog/ トラックバック(-)/ comment(0)▲

phpで作る簡易掲示板

phpの使えるサーバーでは
簡易掲示板が各ページに設置できます。
ページの好きなところへ

<form method="POST" action="/pinkbaby/index.php">
お名前<input type="text" name="personal_name"><br>
コメント<textarea name="contents" rows="3" cols="30">
</textarea><br>
<input type="submit" name="btn1" value="投稿する">
</form>

と書きます。
ページの拡張子は　「.php」とします。

そしてフォルダの中に　「keijiban.txt」と名付けたメモ帳を入れておくとそこに書き込まれ
コメントは投稿フォームの下に出ます。

ＤＥＭＯ

お名前
コメント




きょうはここまで。
phpで作る簡易掲示板/2015/01/15 09:48/php/ トラックバック(-)/ comment(0)▲
| ホーム | 次ページ≫