新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

meta refreshを使わずに自動でリンクに飛ばす方法

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

CGIスクリプトの仕様で、1つのHTML内に2つ分のページ要素を入れ込み、
最初1ページ目を表示させ、一定時間で2ページ目を表示(移動)させなければならなくなった。
なお、前提としてウインドウサイズは固定であることが必要。

スポンサーリンク
 

もちろん使うのはJavascriptです。
以下スクリプト。

gonext = setTimeout("jumpseyo()", 5000);
function jumpseyo() {
location.href='#jumppoint';
clearTimeout(gonext);
}


非常にカンタンです。
最初の行で5秒後にjumpseyo()が呼び出される設定をします。
jumpseyo()でリンクをアンカー部に移動させ、設定を解除させています。
ちなみに、この前ActionScriptで使ったsetIntervalを使っても同様にできます。
(setTimeoutをsetIntervalに、clearTimeoutをclearIntervalに変えるだけ)

これで、5秒後にアンカー部分にリンクが移動するために、固定サイズのウインドウ上ではページが切り替わったかのように表示されます。

せっかくなので何故そういうスクリプトが必要になったのかを説明します。
実は今、某サイトでクイズを作っていまして、
ガンダムカルトQQQ(MIDI-CG-SOFT-総合サイト)」さんで配布している
QQQ SYSTEMS」がベーススクリプトとなっているのですが、
こちらのスクリプトでは回答後の解説ページと次の問題のページが、
1ページになってしまっているからだったりします。
単純にアンカーリンクを入れるという方法もありますが、
自動で次の問題が表示されたほうがというデザイナーからの希望もあって、
一苦労したというわけです。

しかし、最近はすばらしいスクリプトがところかしこで無料で手に入りますね。

EC(イーコマース)サイトやソーシャルネットワーキング(SNS)なんかもあっという間です。

EC-CUBE‐日本発の「ECオープンソース」(ECサイト)
OpenPNE(SNS)

 - プログラミング, ユーザビリティ

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

Togetter(トゥギャッター)とTwiccha(ツイッチャ)でつぶくま会のオンライン会議を実行 (9/20追記)

1年以上前の記事です。内容が古い可能性があります。今月は忙しくてオフラインでの会 …

FlashのActionScriptで使われる「e:Event」って表記は何?

1年以上前の記事です。内容が古い可能性があります。訓練校の生徒さんから質問があっ …

twitter(ツイッター)まわりの環境をいじってみた

1年以上前の記事です。内容が古い可能性があります。昨日ツイッターに於きまして「フ …

CSSだけで作る最も単純なプルダウンメニュー(ドロップダウンメニュー)【Webデザイン】

1年以上前の記事です。内容が古い可能性があります。今まではIE6の存在等もあって …

ツイッターのツイートが簡単に埋め込みできるようになっていた

1年以上前の記事です。内容が古い可能性があります。ツイッターがリニューアルしたの …

Tumblr(タンブラー)のFacebook連携が変わった

1年以上前の記事です。内容が古い可能性があります。今まではFacebookアプリ …

Yahoo!ボックス(Web版)は複数ファイルの一括ダウンロードができない

1年以上前の記事です。内容が古い可能性があります。アプリを使えばできるのでいいの …

「iPad」で「Windows 7」、「Word」「EXCEL」等がクラウドで使える

1年以上前の記事です。内容が古い可能性があります。日本ではまだ使えないようだが、 …

「iOS5」にしたら何にでも絵文字がつかえるようになった【iPhone】

1年以上前の記事です。内容が古い可能性があります。まだまだ続く「iOS 5」にし …

WordPressをhttps(SSL)化、さくらインターネットのレンタルサーバーでリダイレクトループさせない「.htaccess」の書き方【後編】

1年以上前の記事です。内容が古い可能性があります。以下の続きとなります。 Wor …

血液型オヤジ