Yaneu Labs --- 画面に表示されるアイテム数を自動調整する
近年、ディスプレイ解像度は急速に高くなり、いまや1920×1200は当たり前になりつつある。こうなると難しいのはサイトレイアウトであって、今後、商用サイトを固定幅で設計するのはタブーになっていくのだろう。大きな画面でも正常に表示されなければならない。このようにユーザーの画面サイズに合わせてレイアウトを動的に変更するのはそれほど容易なことではない。 例えば、Amazonのトップページの場合を考えてみよう。 横幅が小さなときは、アイテム数は3つ。 横幅が大きいときは、アイテム数が自動的に5つにまで増える。 では、このようなことをCSSのテクニックだけで実現できるのかと言えば、ノーだろう。 どうしてもJavaScriptに頼らざるを得ない。 さっそく書いてみた。→ アイテム数自動調整スクリプト テスト用ページ 上のテスト用ページのhtml,JavaScriptは自由に使っていただいて構わない。ア
JavaScript: window.open() 小窓の基礎
window.open()で小窓 いわゆる小窓です。これはJavaScriptの window.open() というメソッドで 小窓となるウィンドウを生成します。 各引数の文字列は一重引用符または二重引用符で括って指定します。 第１引数「URL」は生成されるウィンドウに表示するページのURLです。 ※ ウィンドウに表示するページ（別のファイル）は別途作成して用意しておきます。 第２引数「ウィンドウ名」は特に指定する必要がなければ null で良いでしょう。 ウィンドウ名を指定するときは引用符で括ります。 ※ null を指定するとウィンドウ名の設定されていない新規ウィンドウとなります。 (HTMLの属性 target="_blank" と同等です) 例: window.open('example.html', null); 第３引数「オプション」はウィンドウの特徴を設定する文字列です。 こ
実用的でクリエイティブなjQueryの使用例20選 – creamu
クールで使える機能をjQueryで実装したい。 そんなときに参考になるのが、『The 20 Most Practical and Creative Uses of jQuery』。実用的でクリエイティブなjQueryの使用例20選だ。 以下にいくつかご紹介。 ↑のキャプチャはFamSpamsのFaceBox。 James Padolseyのカラースイッチャー Dragon InteractivesのjQueryナビゲーション CarrotCreative-Customのlightbox Incredibleのログインフォーム その他のリストは以下から。 » The 20 Most Practical and Creative Uses of jQuery 実用的でクリエイティブなjQueryの使用例、チェックして参考にしてみてはいかがだろうか。 週初めですねー。がんばりましょう。
jQueryを良くする25のTIPS
jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
HTMLタグ名や属性値からの参照をマスターしよう
DOMでは、さまざまな要素参照方法を規定している。今回はHTML内のタグ要素の参照方法や、タグの属性値の取り出し方を押さえよう。 旧来のDHTMLの手法では、JavaScriptから操作できるHTML要素には限りがありましたが、DOMでは、HTML上のありとあらゆる要素を自由自在に読み取ったり、書き換えることができるようになります。本連載では、おもにDOM Level 1で規定されている手法を使って、JavaScriptを使ってどのようにHTML上の要素へアクセスするのか、そして、それをどうやって書き換えるのかを詳しく解説していきます。JavaScriptからHTML要素を手に取るように操れるようになります。 ここでは、HTML内の各タグ要素の参照方法、テキストの値の取り出し方、タグの属性値の取り出し方を見ていきます。DOMでは、さまざまな要素参照方法を規定しています。それぞれの違いを見極
IT戦記 - 一行で IE の JavaScript を高速化する方法
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
DOMから始めるJavaScriptモダン・スクリプティング---目次：ITpro
近年，Ajaxの台頭をきっかけに，JavaScriptを使ったブラウザのリッチ・クライアント化が進んできました。現在では，ページの表示を変化させるだけであれば，ほとんどのことはJavaScriptのみで対処することが可能です。それを実現するのがDOMなのです。 第1回 DOMから始めるモダン・スクリプティングの世界へようこそ 第2回 ブラウザからHTMLはどう見えているかを理解しよう ～ドキュメントツリー～ 第3回 DOMスクリプティングのことはじめ(1) ～要素（タグ）を狙い撃ち～ 第4回 DOMスクリプティングのことはじめ(2) ～これはどんな要素？～ 第5回 DOMを使ってHTMLを自由自在に書き換える 第6回 イベントハンドラから脱却しよう 第7回 スクリプトを完全に分離しよう ～コンテンツ，プレゼンテーション，ビヘイビア～ 第8回 スクリプトのパッケージ化 ～使い回しできるスクリ
Ajax/CSS/PHP等のチュートリアルまとめ:phpspot開発日誌
Tutorials Round-Up: Ajax, CSS, PHP and More | Smashing Magazine Ajax/CSS/PHP等のチュートリアルまとめが公開されてます。 英文のサイトは本当にチュートリアルが充実していますね。 Ajax AJAX Desktop Tutorial AJAX Matters Blog Ajax RSS reader AJAX Tutorial Ajax: What is it Good For? → 続きを読む CSS Advanced CSS Layouts: Step by Step Beginner’s guide from a seasoned CSS designer CSS Advanced Guide CSS and HTML examples and tutorials by Ove Klykken CSS Basic
JavaScript入門 - JavaScriptist
JavaScriptの基礎から学び、JavaScript言語の理解を深め、JavaScriptで出来ることを知ります。 JavaScriptについて bookmark JavaScript言語の構成 昨今のJavaScriptブームで必要な知識 JavaScript言語を学ぶ道のり 開発環境の構築 bookmark 開発環境と動作環境の用意～スクリプト動作までを解説。 開発エディタの準備 bookmark エディタのインストール 既にエディタがある場合は使い慣れたもので開発しましょう アンカーシステムのPeggy Pad(Free) その他便利なエディタ、IDEの紹介 Aptana IDE EmEditor 秀丸 動作環境の準備 bookmark Firefoxのインストール Firefoxの拡張のインストール FireBug Web Developer Toolbar 他のデバッグ用ツー
Bridge Word
This shop will be powered by Are you the store owner? Log in here
GIGAZINE - マウスホイールの回転イベントをJavaScriptで検知する
実際の例としては「Google マップ」がまさにそうです。マウスのホイール部分を回転させると、地図を拡大縮小できます。 これと同じ仕組みを実装するにはどうすればいいの？というお話。 Mouse wheel programming in JavaScript http://adomas.org/javascript-mouse-wheel/ テストページはこちら、マウスホイールを回転させると表示が変わる http://adomas.org/javascript-mouse-wheel/test.html ほかにもこんなことができます。 JavaScript++かも日記: マウスホイールで拡大縮小 インフォシーク ホームページ作成「マウスホイールで画像を拡大縮小する方法」 せつないぶろぐ : JavaScriptによるマウスホイールのイベント処理 暴満館 >> OperaのJavaScript
今からでも遅くない Ajax基本のキ---目次
山田祥寛（やまだ よしひろ） Microsoft MVP for ASP/ASP .NET。執筆コミュニティ「WINGSプロジェクト」の代表でもある。主な近著に「XMLデータベース入門」「PEAR入門」「Smarty入門」「10日でおぼえる入門教室シリーズ（Jakarta・JSP/サーブレット・PHP・XML）」（以上，翔泳社），「今日からつかえるサンプル集シリーズ（JSP＆サーブレット・PHP5・ASP・XML）」（以上，秀和システム），「書き込み式 SQLのドリル」（ソシム），「JSP/PHP/ASPサーバーサイドプログラミング徹底比較」（技術評論社）など。最近では，IT関連技術の取材，講演，監修まで広く手がける毎日。
Balloon Tooltip
Licensing This script is distributed under the LGPL open source license. Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year. Download script You can download the script from this Zip file Implementation On the words that should have tooltip, insert a tag like this: <a href="#" onmousemove="showToolTip(event,'This is a simple, simpl
Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す
サムネール画像から拡大画像をポップアップさせずにスマートに表示する Lightbox JS、以前当サイトでもLightbox JS で画像を表示するをエントリー致しましたが、ブログに設置している Flash（こうさぎ等）については拡大画像表示時に PNG 背景画像（overlay.png）の下に隠れないという問題があります。 Flash は門外漢なのですが、テンプレートご利用サイトの Atelier Shuhei Weblog さんより解消するための情報（下記リンク参照）を頂きました。ありがとうございました。 またこの件に関して他の方からもご質問を頂いておりますので、本エントリーにて紹介させて頂きます。本カスタマイズを行うことで、スクリーンショットのように拡大画像を表示した際、ブログツールを背景画像の下に隠すことができます。 Atelier Shuhei Weblog：隣の花は紅い Sit
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GIGAZINE - オーバーレイ効果を作り出す軽量スクリプト「iBox」