モバイルサイズになると自動でグローバルメニューをPathのような横スライド式に切り替える軽量jQueryプラグイン・PageSlide Responsive - かちびと.net
結構良さそうだったので備忘録。レスポンシブWebデザイン向けのライブラリです。モバイルのサイズになるとグローバルナビを横スライド式に切り替える、というもの。面白いですねー。 これ結構いいんじゃないでしょうか。レスポンシブWebデザインにするとどうしてもナビゲーションが縦長になりがちなのでその不満は解消できるアイデアですね。 PathやFacebookのiPhoneアプリのような横スライドメニューは使いやすいかもしれない。 Pathのようにというか、全く同じじゃないんですが、モバイルサイズになると横スライド式のメニューに変更するjQueryプラグインです。 ちょっといいアイデアですね。プラグインも圧縮版は3KBと軽量です。 タップすると左からメニューがスライドします。 手抜きで申し訳ないんですがサンプルです。 Sample※表示確認はresponsivepxを使うと楽です 実機で重いのは僕が
iPhone AppのPathみたいなナビゲーションを実装できる Swpnav.js :: 5509
PathみたいなナビゲーションをWebページに実装するライブラリです。同じようなのは他にもあると思いますけど、これの特徴は対象に当たっている他のライブラリと干渉しにくいということでしょうか。iScrollみたいなイベントキャンセルが強力なやつはだめだと思います。 サンプルがまさにそれなんですけど、同僚の@が作った flipsnap.jsとは共存できます。レイヤー毎にスワイプ判定をしてるので、上位レイヤーで一度キャンセルすると Swpnav が実行されてる下位レイヤーにはイベントが飛ばなくなるような感じで、この Swpnav とか flipsnap のような作り方をしているライブラリとは共存できると思います。 サンプル（Webkitのみ ホスト githubにあります 5509/Swpnav – GitHub 使い方 ソースコードをダウンロードして、任意の場所に swpnav.js を置き、
画像のマウスオーバー＋カレントページ表示時に画像をONにするjQueryプラグインの自分メモ｜1bit::memo
その他 4分50秒で読めるよ ホーム » その他 » 画像のマウスオーバー＋カレントページ表示時に画像をONにするjQueryプラグインの自分メモ 画像のマウスオーバー＋カレントページ表示時に画像をONにするjQueryプラグイン「jQuery rollover プラグイン」という記事を見つけました。こちらをベースに自分好みにカスタマイズしたものをメモしておきます。 プラグインをダウンロード 「jQuery rollover プラグイン」からプラグインをダウンロードし、中身を若干カスタマイズします。 具体的には、ロールオーバー時の画像ファイル名を「hoge_over.png」というように、_overに変更しました。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 3
JavaScriptで単純にIE6だけ除外 - [k]id[k]id
IE6関連の記事を検索してこのブログにこられる方が多いようです。 jQuery等を使用しているとIE6だけ挙動がおかしくなったり 動作がもっさりしたりと、何かと嫌われ者のIE6 かといってIE6を全く気にしないというわけにはいかないので、 JavaScriptでIE6だけ除外するカンタンなコードを。。 jQueryでサクッと記述したい所なのですが、 jQuery.browserとjQuery.browser.versionはjQuery1.3から 非推奨ということなので古くから使われているuserAgentで判別。 var IE6browser = (navigator.userAgent.indexOf("MSIE 6")>=0) ? true : false; if(!IE6browser){ ここにie6以外用のコードを記述 }
![JavaScriptで単純にIE6だけ除外 - [k]id[k]id](https://cdn-ak-scissors.b.st-hatena.com/image/square/58010acb677b2e12d767cba4964b80c2de081a8d/height=288;version=1;width=512/https%3A%2F%2Fkidokorock.com%2Fwp-content%2Fthemes%2Fkid_2015%2Fimages%2Fcommon%2Fthumbnail%2F4.jpg)
val() - jQuery 日本語リファレンス
<p></p> <select id="single"> <option>Single</option> <option>Single2</option> </select> <select id="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select> function displayVals() { var singleValues = $("#single").val(); var multipleValues = $("#multiple").val() || []; $("p").html("<b>Single:</b
change(fn) - jQuery 日本語リファレンス
各要素のchangeイベントに関数をbindします。 changeイベントは通常、フォーカスを失った状態のinput要素がフォーカスを得て、値の変更を完了した時に実行されます。 jQueryのイベントは、コールバック関数の最初の引数でjQuery.Eventオブジェクトを受け取ることができます。このオブジェクトを使って、規定のイベント動作のキャンセルや、バブリングの抑制などを行います。 <select name="sweets" multiple="multiple"> <option>Chocolate</option> <option selected="selected">Candy</option> <option>Taffy</option> <option selected="selected">Caramel</option> <option>Fudge</option> <
jQuery 1.6でattr()の動作が変わった - R42日記
jQuery 1.6がリリースされています。 リリースノートを見ると。。。ムムム！！見過ごせない変更があるではないですか。 .prop(), .removeProp(), and .attr() .prop()、.removeProp()と.attr()に関して In the 1.6 release we’ve split apart the handling of DOM attributes and DOM properties into separate methods. The new .prop() method sets or gets properties on DOM elements, and .removeProp() removes properties. In the past, jQuery has not drawn a clear line between p
jqueryでラジオボタンの値を一括設定: Ma note
チェックボックスの一括チェックと比べてあんまり使う場面はないのだが、 2択のアンケートが100問くらいあって、開発時にいちいち入力するのが面倒なので一括で選択できないかと思って調べてみた。 ※最初はFormに初期値設定すればいいかと思ってたが、不都合があったのでスクリプトでやろうと思ったのです。 ちなみに、チェックボックスの一括チェックの場合は、 $(function() { $("#selectchk").click(function() { $(":checkbox").attr("checked", true); }); }); <input type="button" value="全て選択" id="selectchk" class="button" /> 上記のような感じでできる。 同じ要領で、ラジオボタン版を作成。 $(function() { $("#selectradio
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ jQueryを使って画面遷移のないサイトを作ろうとしたときのちょっとしたメモです。 サーバーとやり取りをする、Ajax的なことは書いていないのであしからず。 投稿日2012年02月03日 更新日2012年02月03日 リンク（href）を無効にする 画面遷移のないWebサイトでもJSのない環境やSEOも考慮して href にリンク先を設定したいときがあります。 hmtl <a href="hoge.html" id="btn">ボタン</a> このような場合だと #btn にイベントを設定しても画面遷移してしまいます。 click イベントに「e.preventDefault()」と記述すればhrefを無効にになり画面遷移が行われません。 javascript $('#btn').click(function(e){
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
高橋 登史朗のガイド記事一覧 All About
Javascriptをはじめ、Ajax、jQueryの著書多数のガイドが、何かと最近騒がれているJavaScriptの最新情報とその活用方法を解説します。
ユニークなボックスタイプのナビゲーションメニューを実装するjQueryプラグイン・BoxyMenu - かちびと.net
いろいろとアイデアが参考になった ので備忘録。ボックスタイプのナビ メニューで、ユニークなUIです。こ ういうアイデアというか、発想が出 てくるようになりたいです。 というわけでただのメモ。僕では思い浮かばないアイデアで素敵だったので衝動的に書き留めておきます。 一見変哲も無いコンテンツですけど・・・どうもドロップダウンメニューにして当然、みたいな流れが自分の中にあったのでいい刺激になりました。 こんな感じ。ドロップダウンも子要素を隠すものですし、同じように隠すならこういう形もありだなぁと思いました。子要素が少ないことが条件ですけど・・・ 手抜きですけどサンプル用意しました。 Sample ピンを押すとマウスを離しても戻らず固定できます。cookie使うのもありですね。これはいいユーザビリティかもしれない。 ただ、最初はピンを押せるって分かりませんでした。もう少し分かりやすく明示してあげた
jQueryでメニューのアンダーラインがアニメーションするギミックを作る
メニュー下のラインがマウスを追いかけるようにアニメーションするギミックをjQueryで実現する方法の紹介です。紹介するコードは、Snipplrで見つけたコードに少しアレンジを加えています。 メニューとかで、マウスオーバーすると下の線（アンダーライン）が付いてくる↓のような動きになります。 作り方 HTML メニューの部分を以下のように記述します。アニメーションするバーの部分は、<span></span>タグが担当しています。そして、現在のページには、currentのクラスを設定しています。 <div id="nav"> <a href="#">ホーム</a> <a href="#" class="current">お問い合わせ</a> <a href="#">サービス</a> <a href="#">ギャラリー</a> <a href="#">ブログ</a> <span></span> <
jQueryで塗りがアニメーションするようなギミックを作る
Flashでよくやっていた表現で、jQueryで置き換えられるものはないかと考えていて、ふとコレを思いついたので紹介します。応用次第ですので、アイディアのネタとして見てください。 今回も、言葉で表現しにくいので、↓のデモをモダンブラウザで見てください。 マウスオーバでアニメーションします。 作り方 このアニメーションは、同じサイズのPNGファイルを2つ重ね、後ろの画像をアニメーションさせることで、実現しています。 前面画像の白い部分は、透明になっていて、背景画像が透き通ってみえるようになっています。その状態で、背景画像をアニメーションさせることで、塗りがアニメーションしているように見えるというからくりです。 HTML+CSS いたってシンプルです。前面画像をコンテナDIVで囲み、コンテナDIVに背景画像を設定しています。 <!DOCTYPE html> <html lang="ja"> <
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 Easing - スタジオ・アルカナ技術ブログ
今日の当番を忘れていました。。 このまえｊQueryのEasingをさわってみました。 関数を作ってanimateの第三引数で指定するだけです。 jQuery.extend( jQuery.easing, { achamaro: function (x, t, b, c, d) { return x; } }); $(".acha").animate({left: 100 + "px"},100,"achamaro"); それぞれの引数は x: 経過時間 / 指定した時間 t: 経過時間 b: 開始値 c: 終了値 d: 指定した時間 そして、戻り値をx=0の時0、x=1の時1を返すようにすると アニメーションが作れます。 その時に作った関数を載せてみます。 いろいろ作ってみて下さい。 jQuery.extend( jQuery.easing, { /** * 2次関数 軸X=0.8 (0
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://caroufredsel.frebsite.nl/
finefinefine.jp
http://blog.motoo.net/jquery.galleryview/sample_h.html
GitHub - tadeck/GalleryView: Custom version of GalleryView 3.0 Beta3, with some features added