jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
jQuery Masonry › Infinite Scroll Example
Masonry integrates well with auto-paging scripts like Infinite Scroll by Paul Irish. Using the appendedContent option, Masonry will only re-position the newly appended elements, and skip over all the previous elements that are already in their proper position, thus saving precious milliseconds of page load time. Setting up the Masonry call is just the same as normally would be. Since this layout u
floatさせた要素を上手い具合に整列させてくれるJavaScript「jQuery Masonry」
CSSでfloatさせると要素の高さによっては、想定していたように並ばないことがあります。 そんな時にはjQuery Masonryを使用すれば、まず水平方向に合わせた後、垂直方向にもあわせるので、綺麗に要素を整列できます。 sponsors 使用方法 jQuery Masonryからjquery.masonry.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.masonry.js"></script> <script> $(document).ready(function() { $('要素名').masonry(); }); </script> 上記で指定した要
「マンガで分かる JavaScriptプログラミング講座」第2版公開中
JavaScriptと言えば、GmailやGoogleマップなどのページ移動を伴わない動的ウェブコンテンツの登場で一気に息を吹き返して注目を集めたプログラミング言語で、jQueryの登場によってプログラマだけではなくウェブデザイナーにも重要なものとなっています。 そんなJavaScriptを簡単に初心者でも理解できるようにということで、マンガ158ページ、解説文とサンプルソースコード全471KBの「マンガで分かる JavaScriptプログラミング講座」第2版が公開中となっています。この講座の第1版は2010年4月26日から連載を始めて2010年5月10日に完成しており、今回の第2版はその第1版からマンガをすべて描きなおし、説明文章を1.7倍に増補して、図版を充実させたものです。 アクセスは以下から。 マンガで分かる JavaScriptプログラミング講座 http://crocro.co
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
画像ポップアウト・イメージギャラリー・スライドショー｜jQuery plugin｜Ajax｜PHP & JavaScript Room
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説jQueryでシンプルにスライドショーを実装する方法が掲載されています。 スライドショーとして表示する画像をあらかじめimg要素で列挙しておき、z-indexを変更することで入れ替え表示しています。 スライドのスピードはミリ秒で指定可能です。 すべての画像を表示し終わると、また繰り返し最初からリピート再生されます。 スライドを開始する画像のimg要素にはactiveクラスを指定します。 設置イメージ A Simple jQuery Slideshowの設置サンプルサンプルを見る<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
MooScroll Examples
A Lot of Content Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer dictum. Morbi ut tortor. Nam a urna. Sed facilisis, leo ut fringilla laoreet, nulla turpis imperdiet nisi, a iaculis magna tellus quis elit. Phasellus pellentesque consequat erat. Fusce non neque. Maecenas vel nunc. Nam aliquet congue lorem. Cras vel urna a eros bibendum varius. Fusce massa. Ut sollicitudin sceleris
入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」:phpspot開発日誌
入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」 2010年05月24日- Autotabindex Example 入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」。 例えば、携帯番号を入力する場合など、一定の文字数以上になった場合に、TABキーを押すなどせずとも、次のフィールドにカーソルを合わせることができます。 TABキーを知らないライトユーザーな方々はマウスでいちいち移動していたりもしますが、このプラグインでユーザビリティを上げられそうです。 JavaScript で１から実装するとなると、少し面倒な上に、要素ごとにonkeydownを入れたりしてコードが汚くなったりしますが、jQueryプラグインなので１行で次のように初期化できます。 $(document).ready(fun
フェードイン&アウトで切り替わるjQueryのスライドショー – creamu
83317481, Maria Teijeiro/ Lifesize/ Thinkstock フェードイン&アウトで切り替わるスライドショーが作りたい。 そんなときにおすすめなのが、『Build a Simple Image Slideshow with jQuery Cycle』。フェードイン&アウトで切り替わるjQueryのスライドショーです。 jQueryのスライドショーは画像が移動するものがよく見られますが、これは同じ場所で切り替わりますね。動きが自然で気持ちいいです。 デモは以下から。 View the demo デザインの仕方から、XHTML / CSS、JSまで解説されているので、ぜひ見てみてください。 Build a Simple Image Slideshow with jQuery Cycle いつもと違うカフェに入ってみた。客層も雰囲気も違っていい感じだ。 今日は作業
ドロップダウンメニューのデザインネタ帳:phpspot開発日誌
17 Effective Dropdown Menu resources | Underworld Magazines NYC | ドロップダウンメニューのデザインネタがまとまってます。 ソースを見ることもできるので、ドロップダウンメニュー実装の際に参考にされてみてはどうでしょうか。 ドロップダウンといっても様々なデザインのアプローチがありますね。 関連エントリ CSS3を使ったMacライクでクールなドロップダウンメニュー「CSS3 Dropdown Menu」 複数選択が可能でスタイリッシュなドロップダウンメニュー実装用「jQuery MultiSelect Plugin」 クールにアニメーションする水平ドロップダウンメニュー実装jQueryライブラリ
ページの使い方をページ内に埋め込んでしまえる「Amberjack2」:phpspot開発日誌
Amberjack: Amazing On-Page Tutorials ページの使い方をページ内に埋め込んでしまえる「Amberjack2」。 ページの使い方のチュートリアルというと、動画とかで説明されるのが一般的ですが、Amberjackはサイト上にJavaScriptを使って説明を埋め込んでしまえるツールです。 サイトを使いながらそのままチュートリアルに移ることも可能なので、使い方次第ではユーザフレンドリーなサイトに仕上げることが可能かもしれません。 説明方法は、スポットライトを当てたい部分以外をグレーアウトして、ヒントを次のように表示させてあげることが出来ます。 ←、→キーで次の説明に移ることも出来ます。 例えば、タイトル部分にスポットライトをあてて、その説明を表示するという例 説明のポップアップには動画を埋め込んでより分かりやすくするといったことも可能です。 サイトのここは、こう
jQueryで作る垂直メニュー7 – creamu
jQueryでシンプルな動きのメニューを作りたい。 そんなときにおすすめなのが、『7 Vertical Menus With jQuery Effects』。jQueryで作る垂直メニュー集です。 メニューにマウスオーバーすると、 中のテキストがすっと右にずれたり、背景がびよーんと伸びたりするメニューの実装方法になっています。 jQuery Easing Pluginを使っていて動きが滑らかなので、気持ちいいですね。 デモは以下から。 View Demo 一度見てみてください。 7 Vertical Menus With jQuery Effects ふぅ、やっと少し落ち着いた。今週はずっと集中しっぱなしでした。昨日ブログ書けなかった分を挽回挽回！ Web Designingの方にお声がけいただいて、「サイトを彩るパーツのアイデア集」という特集で、見出しやテーブル、検索ボックスやTwitt
スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」:phpspot開発日誌
スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」 2010年03月31日- AjaxScroll ? Ajax Scroll jQuery Plugin | blogfreakz.com スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」 「MSN Image Search」は画面遷移なしに画像をガンガンよんでくれて、スクロールすれば次の画像を見れるためストレスが少なく、画像を探せます。 これと同様の機能を実現するためのjQueryプラグインのご紹介です。 デモページはこちら。スクロールすると次の画像を読んでいっているのが分かると思います。 Ajaxで次の内容を読むので、一回における転送量を少なくした上で、利用者には画面遷移なしの利便性を提供出来ると言うわけですね。 垂直方向だけでなく
透過PNGをIE6で表示させるjavascript「Unit PNG Fix」 | DesignDevelop
GIF画像に変わるライセンス・フリーの画像形式として登場したPNGフォーマット。最大280兆色までカラーが扱え、圧縮率も優れていて、可逆圧縮形式を採用、W3C推奨となにかとメリットがあるPNG画像ですが、ブラウザへの対応が完璧ではなく、透過PNGにいたってはIE6でも正常に読めない状況です。 そこで今回紹介する「Unit PNG Fix」はそんな透過PNG画像をIE6で正常に表示してくれるjavascriptです。 詳しくは以下 設置方法は至ってシンプルで、設置は以下の一文をヘッダ部分に付加してください。 <script type="text/javascript" src="unitpngfix.js"></script> また1×1の透明GIF画像（デフォルトのパスは「images/clear.gif」変更可）を合わせてアップロードする必要がありますが、あとは基本的にはHTMLファイル
フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」:phpspot開発日誌
PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアッ... 次の記事 ≫：PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」 jQuery Form Tips Plugin フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」 フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。 jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。 <p> <label for="i1">Field1</label><br /> <input type="text" name="i1"
ドロップダウンメニューを作る
ドロップダウンメニューを作る方法です。メニュー部の表示をすっきりできるので、ページデザインには重宝します。 ドロップダウンメニューを置きたい場所に以下のソースを入力します。<option>のvalue属性でリンク先のURLを入れます。 <form> <select onchange="location.href = this.options[this.selectedIndex].value;"> <option seleced value="#">リンク先を選んでください。 <option value="リンク1のURL">リンク１ <option value="リンク２のURL">リンク２ <option value="リンク３のURL">リンク３ </select> </form> 実行結果 スクリプト例 <form> <select
かっこいいjQueryのスライダー25 – creamu
WebDesignFanで、かっこいいjQueryのスライダーがまとまっています。 いくつかご紹介しますね。似たようなエントリーを書いていますが、あまり見たことのないものがいろいろあります。 jQuery Plugin – Feature List 左にナビゲーションがあって自動で切り替わる Accessible News Slider ナビゲーションがわかりやすいニューススライダー。広げる、たたむ機能もあり Animated JavaScript Accordion V2 シンプルで使いやすいアコーディオンメニュー Easy Slider 1.7 – Numeric Navigation jQuery Slider とてもクールなスライダー。左右にナビゲーションあり SlideItMoo 1.1 – improved image slider 左右のナビゲーションでスライドするタイプ M
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
solidstate.jp
solidstate.jp
4つのバリエーションに変えれるLightbox風のスクリプト ColorBox | CSS Lecture