JavaScriptで階層型プルダウンメニュー - Good Sleep｜Webデザイナーの日々のスキマ
Ajaxで作る階層型メニューバー｜SpryMenuBar.js 以前、「JavaScriptでプルダウンメニュー（DropDownMenu.js）」という記事をこのブログで紹介しました。するとこの前、階層を増やしたサンプルはできませんか？という問い合わせがあり、試しに作ってみたしだいです。 以前プルダウンメニューを作る際、実は右の本に出ていたSpryMenuBar.jsを使って作ろうと思っていました。ただ、CSSの設定が結構複雑でちょっと触るとレイアウトが崩れてしまうし、ウチの環境では、IE6で２階層目のメニューがズレて表示されてしまうので、別の方法で作りました。それが前回のDropDownMenu.jsを使った方法です。 しかし、DropDownMenu.jsで３階層目を作ろうとした所、結構大変だという事が分かり、もう一度、SpryMenuBar.jsに挑戦せざるを得なくなりました。 S
IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
＞＞ 詳細な使用法と注意点を追加エントリーしました。 いまだ絶大なシェアを誇るIE6（Internet Exproler 6）ですが、WEB制作者ならご存知の通り、さまざまなバグ・不具合を内包しております。 ・CSSでfloatしたブロックのmarginが倍になる。 ・後方互換モードの場合、text-alignが子要素にまで影響する。 ・透過png画像が透過されない。 上記以外にも、それはいくつもの制作者泣かせの問題があり、業界内では「IE6氏ねばいいのに」とまで言われているブラウザですが、前述の通りシェアは絶大なので、対応しないワケにもいかず。 すでにいくつもの対応策が出回っておりますが、その中でも自分的に一番オススメするのが、「DD_belatedPNG.js」を使用する方法です。 有名どころの対応策を併記・比較しながら、どこがオススメなのかを含めてエントリーしたいと思います。 有名な
Discover Shiretoko – 世界自然遺産「知床」と Web ブラウザ「Firefox」の物語
最新情報 知床・Shiretoko からのメッセージ 知床の Personas テーマ で、あなたの Firefox を知床カラーに！ あなたの「バナーの樹」はどこまで育ちましたか？ 結果はこちら
[JS]フォームボタンまとめ
使用頻度の高いフォームボタンのメモ。 主にJavascriptを使用したものです。 XHTML形式のinputとbuttonの２タイプ用意してみた。 onclickとonkeypressを別のタグ（aとか）に書いても機能します。 ウィンドウを閉じる <input type="button" value="ウィンドウを閉じる" onclick="window.close();" onkeypress="window.close();" /> <button type="button" onclick="window.close();" onkeypress="window.close();">ウィンドウを閉じる</button> このページを印刷 <input type="button" value="このページを印刷" onclick="window.print();" onkeypres
![[JS]フォームボタンまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
静的HTMLで、インクルードを実現するためのJavaScript - on the center line.
ローカルディスク上に存在する静的HTMLで、外部ファイルをインクルードするためのスクリプト（つまり、XMLHttpRequestオブジェクトの代わり）。 以前にも同じようなエントリを書いたのですが（http://d.hatena.ne.jp/kenpoco/20080228/1204198090）、いくつか不具合があったので修正してます。 IE6,7に対応（前回はFirefox2のみ）。 インクルードするファイルの拡張子が.HTMLと.TXTで動作が異なっていたので、その対応。 インクルードした後で、その内容を変更するための仕組みを追加。 最近HTMLを作る機会が多いので自分で使ってみてるのですが、けっこう重宝してます。全ページに同じようなヘッダー部分がある場合なんかに、ヘッダー部分を１ファイルにまとめておけるので、その後の修正がかなり楽。 【使用例】 ------------------
JavaScript でタブ切り替え UI を実装する | WWW WATCH
先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Arc... 先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Archiva さんで紹介されていたので使わせていただきました。 時間がなかったので、できれば自分では書きたくないなぁ、なんかいいの公開している人いないかな～なんて思っていたのですが、おかげ様で助かりました。ということで、お礼を兼ねて紹介させていただきます。 タブ切替をサクッと実装 ： Archiva タブ切り換えを実装する JavaScript ライブラリやサンプルソースはいくつか存在しますが、私が求めていたのは JavaScript が OFF の時でもページ内リンクと
戻るボタンの実装方法について
■ 戻るボタンの実装方法について はてな が グリーン電力化とか良くわからない事を始めた ので、試しにTシャツの注文ボタンを押したのですが、この時フォーム内の「戻る」ボタンについて気が付いた事があったので、その事について。 フォームには一つ前の画面に戻るための「戻る」ボタンと、次の画面へ進むための「次へ」とか「送信」とかいうボタンが置いてある事が多いと思うのですけど、デザイン上とか何とかとにかく、「戻る」が左にあって「次へ」が右にある場合って HTML の記述ってどうすれば良いか悩みませんか？ 「次へ」は当然 submit ボタンなんですけど、「戻る」も submit ボタンにしてしまうと、入力フィールド上でエンターキーを押した場合に「戻る｣ボタンを押した事になってしまう。*1なんとなく「エンター＝進む」みたいな印象があるので、エンターキーで戻ってしまうってのはどうしても変だと感じるので嫌
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
ROSS / Onclickを用いないポップアップJS
Wednesday, Jul 26, 2006 - 01:07 +09:00 単純なモノほど、奥が深い。一般的にポップアップ・ウィンドウは、 <a href="#" onclick="winOpen('./popup.html')"> ...みたいな感じで起動するんですが、ふと思いたってonclickの代わりにclassでポップアップさせるよう改造してみました。これでどうなるかって言うと、 <a href="./popup.html" class="popup"> ...みたいな感じで、まんま普通のHTMLになります ...とりあえず、こんな感じ。 サンプル HTML <a href="aaa.com" class="popup">ポップアップ</a> Javacript window.onload=autoPOP; function autoPOP() { var x = documen
入力エリアの初期値を自動でクリア | ヨモツネット
概要 type 属性の値が text の input や textarea 要素がフォーカスされるとあらかじめ入力された初期値が自動で削除されるスクリプトです。また、初期値の状態のときのみ、input 要素と textarea 要素に class 属性値に default-value が自動で付与されます。 WCAG1.0には 10.4 ユーザーエージェントが、空のテキストフィールドを正しく扱えるようになるまでは、デフォルトの文字を入れておくようにする。[優先度3] たとえばHTMLの場合は、TEXTAREA要素とINPUT要素にデフォルトの文字を入れるようにしてください。 動作確認用の demo ダウンロード 説明 HTMLの head 要素内などでこの JavaScript を読み込んでください。この JavaScript 内を変更する必要はありません。自動で全ての type 属性
Javascriptメモ
DOMでオブジェクトを特定したり、変更するのに使用するgetAttribute、setAttributeメソッドですが、一部IEにバグがあります。 以前散々悩んだので書いておきます。 たとえば、class名を取得したいとき、 element.getAttribute("class");だと、IEでは取得できません。 IEの場合には
[戯] target="_blank" を使わないで新しいウィンドウでリンクを開く方法
target="_blank" を使わないで新しいウィンドウでリンクを開く方法 2006-03-14-5: [JavaScript] <a href="foo.html" target="_blank">foo</a> を使えば新しいウィンドウでリンクが開きますが，これは XHTML 1.1 や XHTML Basic では採用されていません． ではどうするかというと，スクリプトを使うわけですが， <a href="javascript:void(0)" onclick="window.open('foo.html');">foo</a> こうすると，一見解決したようですが，JavaScript が off の場合はリンク先に飛べません． しかも，ステータスバーにリンク先が出ないので不安になります．これを <a href="foo.html" onclick="window.open('f
netatalk・ファイル共有講座 | netatalk講座 [Smart]
四角の枠に囲ってある段落で、> というマークは出力行、もしくはコマンドラインを意味します。 例 print "Hello\n"; > Hello 謝辞 インターネットのおかげで無料で勉強でき、プログラムの仕事をするようになりました。とても感謝です。そのお返しという程でもありませんが、勉強の成果を公開することにしました。 この講座に掲載した情報のすべては、インターネットからかき集めたものが大半です。その情報が正しいものかどうかは確かめたのですが、それはちょっと怪しいものですので、間違いや誤解などが含まれている可能性があります。 ということで、ちょっとおかしいなと思ったらご報告お願いします。 次にこの講座にきたときは、ただしい文章が掲載されていると思います、たぶん。
[js]ロールオーバー＋見てるページのメニュー画像変更
メニュー画像をロールオーバーさせつつカレントページはon状態にするスクリプト。 見てるページのメニュースタイルを変更すると ロールオーバースクリプト（画像名のOn/Offで判別）を足したソースです。 プリロードはついてません。 window.onload = function() { if(document.getElementById(“menu”)){ var myMenu = document.getElementById(“menu”).getElementsByTagName(“a”); var Over = “_on”; var Off = “_off”; var HrefList = new Array(); var myHref = document.location.href; var myUrl = FilePass(myHref); for (var i = 0; i
inputのimageボタンのロールオーバー
■サンプル ■ソース <input type="image" src="img/btn.gif" value="submit" tabindex="1" onmouseover="this.src='img/btn_o.gif'" onmouseout="this.src='img/btn.gif'" /> もと画像 img/btn.gif オーバー画像 img/btn_o.gif Comments otogawa | 2007/08/30 06:43 PM ＞hamaさん buttonタグってよく見るけど、まだ使ったことないですわー。css対応など他のサイトでも便利そうに聞いてるので、今度試してみますー♪java使わなくてもオーバーできたら便利ですもんね。 hama | 2007/08/09 08:17 AM http://kikky.net/pc/css_ir.html B
How to Create an App from Scratch | AppMaster
Turning an app idea into a working reality is a more complicated task than most people might believe. However, with the wealth of software resources available on the internet, creating an app out of your idea is manageable. You don't even need to necessarily know how to develop mobile apps to make your application work. You can hire third parties or freelancers as there many places where you can f
JavaScriptメモ(３)：しんぷるロールオーバー（追記：2007.6.29） | Le Arche
一定期間更新がないため広告を表示しています
imagemap で簡単にロールオーバー | ヨモツネット
概要 地図などの img 要素に、map 要素と area 要素で imagemap を指定したとき簡単にロールオーバー効果を与えることができる JavaScript ライブラリです。 動作確認用の demo ダウンロード 使い方 画像のファイル名を目印にしてロールオーバー効果を与えることができます。 例えば、次のような XHTML のソースの断片があったとします。 <p><img src="img/map_swap0.gif" alt="地図" width="300" height="200" usemap="#imagemap" /><p> <map name="imagemap" id="imagemap"> <area shape="rect" coords="0,0,30,30" href="#area1" alt="エリア1" /> <area shape="rect"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【インフォシーク】Infoseek ： 楽天が運営するポータルサイト
yamachan Ajax/.NET/C# メモ: [JS] クリックで表示/非表示する関数