select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」:phpspot開発日誌
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」がGoogle Codeに公開されています。 jQというだけあって当然ながらjQueryプラグインの形式です。 適用前の普通のSelect ボックスが便利に変化します 都道府県の縦に長かったものが横方向に超分かりやすく表示 日付も次のように超分かりやすいセレクトに。縦に長いのとはもうオサラバできそうです。 更に、コールバック関数によってクリックした後の動作も定義できるっぽいです。 はじめから日本対象という点でも使いやすいですね。 実装も、jQueryプラグインなので超使いやすいです。 次のように初期化するだけのようです。 $(".simpleBox").jQselectable({ set: "fadeIn", setDuration: "fast", opacity: .9 }); 以下のエント
ハイテンションAjax入門 - 三等兵
JSが少しできる人ならうじうじ考えるほどのこともでもない！ 何も難しいことはない！ぶっとんぢまいなよ！ヒャッパー！！！ というノリでAjaxを学んでみました。醜いです。 Ajax入門 Ajaxはいろいろできるんだぜ！ 以上入門終り！キミは完璧だ！次いけ！ Ajaxは非同期通信だかなんだかそんなもんはどうでもいいんだ！ どうでもいい！そんなことよりもXMLHttpRequestオブジェクト生成！ var request = false; if(window.XMLHttpRequest) { request = new XMLHttpRequest(); //frefox ie7,8 safai opera } else if(window.ActiveXObject) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); // ie6
ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ
ウィンドウサイズを変えると コンテンツ（記事等）が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト？どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見やすいです。MT使用。 小林聡美.jp Marunouchi.com 丸の内の情報サイト。ハイクオリティです。写真をダイナミックに
FAQ形式によるJavaScriptの本質がわかる超入門 - 風と宇宙とプログラム
はじめに JavaScriptは簡単な言語のようでいて、実は奥が深く、初心者にとってなかなかその本質がわかりにくい言語です。ここでは、JavaScriptの言語的エッセンスを理解できるようなものをFAQ形式で書いてみました。ご意見や誤り等を指摘してもらえたら嬉しいです。 なお、JavaScriptの標準化であるECMAScriptは、今年末にEdition 5 がリリースされる予定です。このFAQは、現在のバージョンであるEdition 3をベースにしています。 ECMAScriptって何ですか？ ECMAはEuropean Computer Manufacturer Association(欧州電子計算機工業会)の略で、標準化団体です。NetscapeのJavaScriptとMicrosoftのJScriptをベースに、純粋なプログラム言語部分を抽出したものをECMAで標準化したスクリプ
Daniel Nolan - Home
Image Rollover Code This script is a standards compliant means of adding mouse rollover code to images in a document without the hassle of coding in extra parameters to each image in your document. This code is standards compliant and should not invalidate your document. Sample Usage To begin with you need to load the javascript into a page in the head section of your page. If you place the code
気に入っているロールオーバーの方法3つ :: CSSメモ :: JYO-RAKU
画像のロールオーバーはJavaScriptやCSSを使えば実現できますが、そのやり方は色々あると思います。その中で、僕がよく使う方法を3つご紹介します。 1. text-indentでぶっ飛ばす text-indentでリンクテキストをぶっ飛ばし、a:hoverで背景画像をずらすことでロールオーバーを実現。 <a href="/">ホーム</a> a { display: block; width: 120px; height: 40px; /* \*/ overflow: hidden; /* */ text-indent: -9999px; background: url(/img/navi.gif) no-repeat 0 0; } a:hover { background: url(/img/navi.gif) no-repeat 0 -40px; } この方法だとJavaScri
綺麗なソースで画像をロールオーバー | ヨモツネット
概要 onmouseover や class 属性なしで画像のロールオーバーをするための JavaScript です。HTML ソースに余分な情報を入れないですみ、綺麗な HTML ソースを保つことができます。 動作確認用の demo ダウンロード 説明 このスクリプトでは画像のファイル名の末尾に『_n』がついている場合に同名で、末尾が『_r』の画像に入れ替わります。 例えば、sample_n.png はマウスオーバー時に sample_r.png に入れ替わります。 HTMLの head 要素内などでこの JavaScript を読み込んでください。この JavaScript 内を変更する必要はありません。 ソースコード /*==================================================================================
29分でできる！ あのサイトの“技”を盗め
「プロが作ったWebサイトのあの“技”をウチのサイトでも（それもタダで）マネしたい！」――。そんな欲求に応えてくれる JavaScriptライブラリ／フレームワークが、ネット上にはたくさん公開されています。この連載では、国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間をかけずに自分のWebサイトをブラッシュアップしていく方法を紹介します。
PHP & JavaScript Room
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説Search 動作環境 バージョン情報 PHP 4.4.0 | MySQL 4.1 OS Windows XP(SP2) ブラウザ Internet Explorer 6 Internet Explorer 7 Firefox 2.0 Netscape 7.0 Ranking !! ↑ ポチッと押してくださると管理人が涙します（；д；） Union Links PHP小屋 Thanks famfam (Silk Icon) HoHoHo!（Mini Icon 2） NWYH Stock Image Library（写真素材） QRコード I'm Here!! mixi
アップデートしたLightviewが素晴らしい | ユージック
アップデートしたLightviewが素晴らしい 2008年2月20日 様々なメディアファイルをLighboxのように表示できるLightview2.0が非常に素晴らしいのでご紹介したいと思います。 Lightview：www.nickstakenburg.com 扱えるファイル 画像 動画(Quicktime) FLASH(swf) AJAX iframe HTML(inline content) このように非常にシンプルなUIで様々なメディアを扱えます。 準備と使い方 スクリプトファイルをこちらからDLします。 続いてヘッダーにスクリプトを読み込む <link rel="stylesheet" type="text/css" href="css/lightview.css" /> <script type='text/javascript' src='js/prototype.js'><
MJL ― MITSUE-LINKS JavaScript Library | 制作／開発 | ミツエーリンクス
概要 MJL (MITSUE-LINKS JavaScript Library)は、ミツエーリンクスで標準利用されるJavaScriptライブラリです。 MJLは弊社内における業務効率を改善するために、統一された設計思想、利便性の向上を念頭においた上で設計・開発されました。 MJLは他のJavaScriptライブラリ群とは異なる設計思想により、独特の特徴を持ちながらも他のライブラリと補完しあえるものを目指しました。 MJLはコピーレフトライセンスであるGNU GPLに基づく自由ソフトウェア（フリーソフトウェア）です。弊社は GNU GPLに則り、本ページにてMJLの全ソースコードを公開します。 ライセンス MJLはGNU GPL Version 3（参考邦訳）のもとに提供されます。 詳細はMJL本体ファイル内のライセンス告知をご覧ください。 ダウンロード MJL本体（圧縮版） mjl.js
[JS]Page Scrollerと他のjQueryプラグインとの実装サンプル
当サイトで配布している「簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3」と他のjQueryプラグインとの実装サンプルの紹介です。 Smart Floating Banners パネルがスクロールに追随して表示されます。 配布元：Smart Floating Banners Smart Floating Banners ユーザーのスクロール操作、Page Scrollerの挙動のスクロールにパネルが追随します。 パネル上の「Top of Page」は、Page Scrollerの挙動です。 Tips: フロートするパネルは画像など実体がある方がベターです。 サンプルのようにスタイルシートの矩形の場合はwidth, heightなどしっかり指定します。 jQuery Footnotes 脚注を抽出し指定箇所に配置します。相互リンクは自動
【JavaScript】IE6でもmin-width, max-widthを使えるようにする
結局使わなかったけど、今後使う機会がありそうなのでメモ。 IE6で min-width max-width min-height max-height を指定するやり方。 一番簡単なのはminmax.jsというJavaScriptを読み込むのが早い。 body要素だけでなく、imgタグなどにも適用してくれるので便利。 欠点は適用されるまで（表示した瞬間は）元のサイズで表示されてしまうこと。 さらにie8だとエラーが起きるので、回避の仕方としてはtry catchを以下のように記述する。 ３６行目あたり try { em.style.setExpression('width', 'minmax_checkFont()'); document.body.insertBefore(em, document.body.firstChild); } catch(err){} バージョンアップで対応し
アルファ画像を扱うalphafilter.jsライブラリ[to-R]
アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a
![アルファ画像を扱うalphafilter.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)
あるＳＥのつぶやき: minmax.js - IEでCSSのmax-widthなどを使えるようにするライブラリ
minmax.js(doxdesk.com) FireFoxなどでは、以下のCSSを使えてとても便利です。 min-width ・・・要素の最小幅 max-width ・・・ 要素の最大幅(指定幅までしか広がらない) min-height ・・・ 要素の最小の高さ max-height ・・・ 要素の最大の高さ(指定の高さまでしか広がらない)でも、これはIEでは使えず大変不便です。 上記CSSをIEでも使えるようにするのが、minmax.jsです。 ・サンプル <html> <head> <!-- <script type="text/javascript" src="minmax.js"> </script> --> <style type="text/css"> <!-- .minmax { background-color:#FFCC66; max-width:100px; } -
WebCreativePark
JavaScriptやjQuery、jQuery Mobile、HTML、CSSなどのリファレンスを提供しています web制作に役立つプログラムやサービスを公開しています。 Web Creative Parkが公開しているツールです。 URL短縮プログラム TinyURLのようなURL短縮サービスを構築できるPHPプログラムです。 新着情報CMS PHPで作成された新着情報を表示する簡易CMSです。 Web Creative Parkが開発したWebサービスです。 経度緯度 検索 住所や施設名から経度や緯度を検索できるサービス。 QRコードMaker QRコードを作成できるツールにです。 Amazon リンク Maker Amazon のアソシエイトリンクが簡単に作れるサービスです。 キーコード取得 キーボードを入力するとそのキーコードが表示されます。 data URL スキーム作成 da
ソースがシンプルなJSによるロールオーバー｜CSS HappyLife
Webは略語じゃないのに「WEB」って書く人が多いのが気になって仕方ない今日この頃。（あ、音声ブラウザを配慮したらという場合です） さて、本題に。 CSSのみでロールオーバーするテクニックは有名でございますが、ココ最近JSでいいじゃん。と思うようになってます。 ってことで、こんなサイト名ですけどJavaScriptでやるロールオーバーの方法のひとつでも。 jsファイルのご用意 何はともあれ、下記のjsファイルをご用意します。 function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src")
JavaScriptによるシンプルなロールオーバー。
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog ものすごくシンプルで使いやすいロールオーバーをご紹介。 最近、特別な理由がない限りこの方法でロールオーバーの設定をしています。 オリジナル版 使うのは「CSS HappyLife」さんの「ソースがシンプルなJSによるロールオーバー」で紹介されているJavaScript。 使い方はごく簡単で、画像を用意してJSファイルを外部ファイルとして読み込むだけ。 画像ファイル名の最後が「_on」であればロールオーバー用、「_off」であればロールアウト（通常）用の画像として認識し、勝手に表示を切り替えてくれるのです。 特別なタグや属性を加えることなく、つまりソースをきれいに保ったままスマートに動作します。 「_on」「_off」を付けるだけというのも直感的でいいですね。 （ち
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
wrapScroll JavaScript Library - youmos
988 + JavaScript Libraries : skuare.net