次は縦移動！スクロールギャラリープラグイン「jquery.easyScrollGallery.js」の紹介 — WEB-PARK.ORG | サイト制作に使用した自作jQueryコードのご紹介
前回作成したjquery.easySlideGallery.jsはスライドでしたが今度は縦にスライドする画像ギャラリープラグインを作成しました。 サンプル 前回と同じサンプル内容を掲載しました。 ノーマルサンプルを見る 情報掲載サンプルを見る 導入方法 ほとんど前回と同じです。id名とpagenation名を変更しています。 Javascript まずはjqueryを読み込ませその次にイージースライドギャラリーのプラグインを読み込ませます。 他のプラグインと衝突させないためjQuery.noConflict();を指定してますので引数に($)が必要です。 <script type="text/javascript" src="js/lib/jquery.js"></script> <script type="text/javascript" src="js/lib/jquery.easyS
Xlune::Blog
可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる（？）ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008
jQueryで作るタブ + cookieでその状態を保存 — WEB-PARK.ORG | サイト制作に使用した自作jQueryコードのご紹介
jquery.cookie.jsを使い、状態を保存できるタブインターフェイスの作成です。 角丸タブインターフェイス 今回はためしに、角丸のタブインターフェイスで作成してみました。 ただし、FireFoxとSafari限定です。IEだと、ただの四角。。。 HTMLソース <ul id="tab"> <li><a href="#yahoo">Yahoo!</a></li> <li><a href="#google">Google</a></li> <li><a href="#bing">Bing</a></li> </ul> <div id="tabContents"> <div id="yahoo"> <p>Yahoo!（ヤフー）は、...</p> </div> <div id="google"> <p>Google（グーグル）は、...</p> </div> <div id="bing">
jQueryで簡単実装ページ内スクロール — WEB-PARK.ORG | サイト制作に使用した自作jQueryコードのご紹介
最近よく見かける「ページTOP」のスクロールをjQueryでは簡単に実装できます。 Javascriptソース $(function(){ $("a[href^=#]").click(function(){ var Hash = $(this.hash); var HashOffset = $(Hash).offset().top; $("html,body").animate({ scrollTop: HashOffset }, 1000); return false; }); }); Javascriptソースの解説 2行目:$("a[href^=#]").click aタグのクリック設定をしています。 $("a[href^=#]")と設定することで、hrefの最初に「#」があるaタグのみに反応するようにしています。 3行目:var Hash = $(this.hash); クリックし
jQueryで作るマウスに追随するツールチップ — WEB-PARK.ORG | サイト制作に使用した自作jQueryコードのご紹介
ツールチップは、案外簡単に実現することが出来ました！ HTML・CSSソース a要素にtooltipクラスを付け、表示させる内容をspan要素のtooltipContクラスに記述します。 CSSソースはtooltipContクラスの「display:none」「position:absolute」と「z-index」が必須で、表示の装飾は任意で行って下さい。 <a class="tooltip" href="http://web-park.org">サンプルテキスト<span class="tooltipCont">ツールチップで表示される内容</span></a> .tooltipCont { display: none; position: absolute; z-index: 100; padding: .5em; background: #cef3ff; font-size: 80
jQueryのanimateの動きを検証 — WEB-PARK.ORG | サイト制作に使用した自作jQueryコードのご紹介
jQueryのanimateを使って、簡単な画像拡大の動きの検証をしてみます。 3つの動作 animateを指定する際に、stop()を指定することで、動きを制御出来ます。 .animateのみ stop()を記述しない場合は命令の実行の回数分、動作します。 例えば、連続してマウスオーバーすると回数分命令が実行されます。 stop().animate stop()を記述すると、命令が実行中に他の行動に移った場合、すぐに動作が止まります。 stop(true , true).animate stop(true , true)を記述すると、命令が実行中に他の行動に移った場合、実行中の命令の途中段階を切り上げ、命令の最後の動作をします。 サンプル サンプルはこちら 一応Javascriptソース $(function(){ var everM = $(".everMove li"); var s
jQueryで作るanimateを使ったドロップダウンメニュー — WEB-PARK.ORG | サイト制作に使用した自作jQueryコードのご紹介
グローバルメニューでよく使われるドロップダウンメニューですが、 jQueryのanimateを使って動きに装飾を加えます。 HTMLソース <ul id="mainNav"> <li><a href="">Adobe</a> <ul class="subNav"> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a> <ul class="subNav"> <li><a href="#">Pentool</a></li> <li><a href="#">Peje</a></li> </ul> </li> </ul> </li> <li><a href="">Macromedia</a> <ul class="subNav"> <li><a href="#">Dreamweaber</a></li> <li><a
jQueryでフォーム改善：文字数のカウントアップ — WEB-PARK.ORG | サイト制作に使用した自作jQueryコードのご紹介
入力したテキストの文字数をカウントアップ フォームの入力で文字数制限がある場合に使えます。 ここで紹介するのはtextarea要素ですが、input要素でも使えます。 HTMLソース span要素内の数字がカウントアップされます。 <textarea type="text" id="input-up"></textarea> <span id="countUp">0</span> Javascriptソース $(function(){ $("textarea").keyup(function(){ var counter = $(this).val().length; $("#countUp").text(counter); if(counter == 0){ $("#countUp").text("0"); } }); }); keyupイベント ここでキーになるのがkyeupイベントで
jQuery でページスクロール - daily dayflower
jQuery 1.2 以降だと scrollTop（と scrollLeft）という疑似スタイルが利用できるようになったので，jQuery UI を使わずとも，jQuery Core 本体だけでページ内スクロールができるようになりました。 たとえば， <html> <body> <p> blah, blah, blah, ... blah, blah, blah, ... </p> <p> <a href="#" id="link_to_top">ページの先頭へ</a> </p> </body> </html> このような HTML で「ページの先頭へ」というリンクをクリックしたときに，スムーズにスクロールしたいのなら， $(function () { if (! $.browser.safari) { $('#link_to_top').click(function () { $(thi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門
http://moto-mono.net/2009/07/02/hintmaskjs.html
http://moto-mono.net/2009/06/11/wakuwakumouseover.html
http://moto-mono.net/2009/06/02/tangohokanjs.html
http://moto-mono.net/2009/05/28/attracting-new-visitor-with-cookie.html
jQueryでスムーズな開閉 | Web Park | Webサイト制作のツール紹介
外部リンクのブランク設定をJavascriptで制御 | Web Park | Webサイト制作のツール紹介
http://moto-mono.net/2009/05/26/preview_default_url_shorten_by_bitly.html
http://moto-mono.net/2009/05/22/cross-fade-with-rounded-corner-button.html
http://moto-mono.net/2009/05/21/control-slide-navigation-with-jquery-cookie.html
http://moto-mono.net/2009/05/18/page-scrolling-with-jqueryeasing.html