タブ切替をサクッと実装 - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 タブ・メニュー作ってみました。使いまわしを考慮してパッケージ化に挑戦。JavaScriptを切っているときは、ページ内リンクとなります。 HTML <ul id="tab"> <li class="present"><a href="#page1">Page_1</a></li> <li><a href="#page2">Page_2</a></li> <li><a href="#page3">Page_3</a></li> <li><a href="#page4">Page_4</a></li> <li><a href="#page5">Page_5</a></li
IE6用透過png対応策、DD_belatedPNGの使用法と注意点
以前もこの「DD_belatedPNG.js」に関してはエントリーしましたが 『IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」』、あまりの素晴らしさにオススメするだけして使用法とか注意事項など大事な部分に触れずじまいでした。 この素敵な透過png対応策であるDD_belatedPNGちゃんですが、img要素に使用する際にも、div要素やp要素等の背景画像に対して使用する際も、ほんのちょっとしたクセがあります。 なので、今回はこの偉大なる「DD_belatedPNG.js」の使用方法と、使用に関するちょっとした注意点などをエントリーしようと思います。 DD_belatedPNGの使用法と注意点 1.使用するための準備 まずはこの「DD_belatedPNG.js」自体をダウンロードしないコトには始まりません。 配布元のDrew Diller’s bl
2/3 著作権表記の「年」表示を自動更新する！ [ホームページ作成] All About
1. JavaScriptで日付(年)を自動更新する方法 まず、HTMLのhead要素内（<head>～</head>）に、次の6行を記述しておきます。 ※head要素に書けない場合は、body要素内でも構いません。 <script type="text/javascript"> function ShowNowYear() { var now = new Date(); var year = now.getFullYear(); document.write(year); } </script> 上記のコードで、現在の年を表示する関数「ShowNowYear」を作っています。 3行目で現在の日付を取得し、4行目で年だけを取り出しています。そして、5行目で表示させています。 ここでは、ただ「年を表示する関数」を作っただけなので、まだ何も表示されません。HTML中で、実際に年を表示させたい箇
![2/3 著作権表記の「年」表示を自動更新する！ [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
CSS と JavaScript でタブ切り替え
CSS と JavaScript でタブ切り替えを実現しています。 なるべく CSS や JS の記述量を最小にするように努力しました。 もっとシンプルにできそうなアイディアがございましたらご教示下さい。 「無償・無保証・著作権放棄」 ですので、 このページのソースを適当にいじって自由に使って下さい。 全てのタブの中味は 1 つの HTML ファイル (このファイル) に書いてあります。 見出しのクリックにより、表示の ON/OFF を切り替えるだけ、という仕組みです。 タブの見出しをクリックするたびにサーバーを読みに行くのが 欝陶しく思えるときに、うってつけかと。 そう言えば、某サイトでは、クリックどころか、 タブの見出しにマウスカーソルを合わせるだけで、 フォーカスされていることを表す見出しの画像 (背景色が異なるだけ) を いちいち Web サーバーへ取りに
オブジェクトの表示非表示を制御する｜JavaScript Tips
<form><input type="button" value="表示切替" onClick="checkExpand('text');"></form> <span id="text">あいうえお</span> <script language="JavaScript" type="text/JavaScript"> <!-- /**************************************************************** * 機 能： オブジェクトの表示非表示を制御する 1 * （表示している場合は非表示、非表示の場合は表示） * 引 数： ch 表示/非表示を切り替えるオブジェクト名 * 戻り値： なし ****************************************************************/ functio
アップロードフォームで画像のプレビューを出す方法
アップロードフォームに画像のプレビューを出すことが可能です。 IE6では、動作確認が取れたけど、firefoxではできなかった。 <script type="text/javascript"> function preview_image(obj_image, image_id) { document.getElementById(image_id).src= obj_image.value; document.getElementById(image_id).style.display="inline"; } </script> <style type="text/css"> #preview_img_1{ display: none; width: 150px;/*サムネイルサイズ*/ } #preview_img_2{ display: none; width: 150px;/*サム
Javascript onloadが複数ある場合の対処法 ～FancyZoomとCubeブログシールを共存させる
前記事で紹介した”FancyZoom”を、運営中の他のブログにも設置してみたところ、サムネイル画像をクリックしても別画面で元画像を表示するだけで、うまくズームアップ表示してくれません。 何か他のJavaScriptとバッティングしていないかと調べてみると、以前から設置していた日産キューブのブログシール（以下ブログシール）との相性が悪いようです。ブログシールを外すとFancyZoomはちゃんと動作します。でもお気に入りのブログシールを外すのは忍び難い。何とかならないものか・・・ ※対策後は両方ちゃんと動きます。（確認のためこちらにもブログシールを設置） ブログシールで読み込まれる外部スクリプトを開いてみると、バッティングの原因が見つかりました。 163行目からの記述に、window.onload = function(){ document.body.appendChild(cubeLaye
[ JavaScript ] ポップアップウインドウを開くサンプル
JavaScript で別ウィンドウを開くサンプルです。 ウインドウを開く悪い例 ———————————————————————- JavaScript でポップアップウインドウを開く時、下のように書いてしまうと、JavaScript がオフの場合、ウインドウが開けません。 開く ウインドウを開く良い例 ———————————————————————- こんな感じで書きます。 開く 利点 ———————————————————————- – JavaScript がオフでも何とかウインドウが開ける。 – 右クリックを使う事で、新規ウインドウや新規タブで開く事ができる。 – 右クリックを使う事で、リンク先のページをブックマークできる。 – ステータスバーでリンク先がわかる – 検索エンジンがクロールしてくれる ユーザがどうやって開くか選択できるのが良いですね。 ## window.open
![[ JavaScript ] ポップアップウインドウを開くサンプル](https://cdn-ak-scissors.b.st-hatena.com/image/square/19691f3db719fc116cbcdd5e767c89ee15487f3e/height=288;version=1;width=512/https%3A%2F%2Fbowz.info%2Fwp-content%2Fuploads%2F2018%2F09%2Fudon-1.jpg)
[使える CSS テクニック]
第 10 回 CSSで文字サイズを変更するボタンを設置する 第 10 回目は「CSSで文字サイズを変更するボタンを設置する」です。 今回の文字サイズの変更は「styleswitcher.js」を使います。 この「styleswitcher.js」は複数のスタイルシートファイルを切り替えて読み込むことができ、クッキーに保存できる優れもののライブラリです。 実装手順は以下の通りです。 1. styleswitcher.js をダウンロード 「styleswitcher.js」をサイトからダウンロードしてきます。 「A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets」のエントリーの中にある Download styleswitcher.js から Download できます。ファイル名 「s
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/03/form-design-2.html
http://onlineconsultant.jp/pukiwiki/?%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A7%E9%81%95%E3%81%86%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8B