一定範囲で position:fixed させる Ex Flex Fixed がかゆいとこだらけだったので作り直しました - Cyokodog :: Diary
かゆいとこだらけの Ex Flex Fixed (サイドメニューなどを一定の範囲でのみ position:fixed させる jQuery Ex Flex Fixed)を作り直しました。 改善内容 fixed 要素の幅を自動調整するようにした リキッドレイアウト(可変幅)でちゃんと表示するようにした fixed 要素がコンテナからはみ出ないようにした fixed 要素がウィンドウ高さに収まらない状態でのスクロール時の表示を見やすくした 動的にレイアウトサイズが変更されても、ちゃんと表示されるようにした カラム高さを揃えるプラグインと併用できるようにした という訳で半年も放置しておいてあれですが、ちょくちょく問い合わせもあるので、ご利用の際には新バージョンでどうぞ。 動作確認 以下のレイアウトのデモページで、新旧それぞれのバージョンの動作を確認してみます。 <div class="heade
[jQuery]透過PNGに対応したクロスフェードボタン – smoothRollOver.jsロールオーバーすると滑らかに画像が切り替わるライブラリ | レポート | 日本電子工藝社
ロールオーバーすると滑らかに画像が切り替わるライブラリ ボタン・リンクのロールオーバー効果を表現する際、CSSやJavaScriptによる画像の切り替えだけでは物足りない時があります。ロールオーバー時のデザインを活かすため、ボタンにロールオーバーすると滑らかに画像が切り替わるライブラリを作成しました。みなさまのデザイン表現の幅を広げるお手伝いができれば幸いです。（※個人利用・商用利用を問わず自由にご利用いただけますが、自己責任の上でご使用ください。） 動作サンプル このライブラリは、JPEG・GIF・透過PNGに対応しています。 JPEG/GIFの場合 透過PNGの場合 InternetExplorer6～8のPNG対応について InternetExplorerは、バージョン6までは透過PNG自体に対応しておらず、7・8になってもフェードイン表現の際に透過部分がギザギザになってしまう仕様で
メニューにアニメーションで下線が付いてくる
Result jQuery$('a','nav').mouseover(function(){ $('span','nav').animate({ 'width': $(this).width(), 'left': $(this).position().left} ,'fast'); });cssnav a{ text-decoration:none; color:#333; } nav li{ display:inline-block; margin-left:2px; padding:3px; background:#eee; } nav span{ background:#666; height:2px; display:block; position:relative; width:50px; left:0; }html<nav><ul> <li><a href="#">menu0
PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」
PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」 PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」を作成したので公開しておきます。 このライブラリを利用すると スマートフォンでPCサイトにアクセスした場合、指定したスマートフォン用のURLに転送されます。 PCでスマートフォンサイトにアクセスした場合、指定したPC用のURLに転送されます。 スマートフォン用ページでは「PCサイトを見る」なリンクが設定可能で、それがクリックされると、スマートフォンでPC用のサイトが閲覧できます。クリック後は1の転送機能が無効になります PC用のサイトでは、スマートフォンで見た場合のみ表示される「スマートフォンサイトを見る」なリンクが設定可能で、これがクリックされるとスマートフォン用のURLに転送され1の機能が復活します。 個々のページでどのPCページとスマートフォンページが対応
css+jQueryでチェックボックス&ラジオボックスをオリジナルデザインのボタンにする
Posted: 2012.04.10 / Category: javascript / Tag: jQuery ブラウザ標準のチェックボックス&ラジオボタンのデザインだと俺のクールなサイトには合わん。 といったときの為にボタン風なオリジナルデザインにする方法をご紹介します。 cssオンリーの場合 まずはcssのみでやってみます。 隣接セレクターやcheckedセレクターを使用している関係でieでは動きません。 <div class="check-group clearfix"> <div> <input id="checkbox1" type="checkbox" name="check[]" value="c1" /> <label for="checkbox1">Checkbox 1</label> </div> <div> <input id="checkbox2" type="ch
Wookmark
高さの異なる要素をグリッドに沿って、レンガ状に隙間なく並べるjQueryのプラグインを紹介します。 同種の有名スクリプト「Masonry」はアニメーションを使ってダイナミックにレイアウトを変更しますが、このWookmarkはシンプルに並べなおすだけです。 デモ:幅800pxで表示 [ad#ad-2] Wookmarkの使い方 実装はいたってシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wookmark.js"></script> HTML デモを例にHTMLはリスト要素など、並列に配置しま
jQueryでグローバルメニュー内のリストから「現在のページ」のURLを持ったリストにclassを加える - かちびと.net
グローバルメニュー内のリストの中で 現在のページの部分にclassを与える事 で今いるページだけをスタイリングする 事が出来ます。静的なサイトなら手作業 で済みますが、CMSとかASPになると、その 中のルールに依存するので少し厄介です。 某所で悩んでる人を見かけたので書いてみます。本当はさほどネタがないんですが。 実装 「現在のページ」のリンクだけclassが加わっていますので赤い文字にスタイリングする事が出来ました。 コード var url = window.location; $('.menu a[href="'+url+'"]').addClass('current'); jQueryはこれだけです。別にjQueryじゃなくてもよくね？ってコードですが。 現在のページのURLを取得して属性フィルタで判別してcurrentっていうclassを与えます。これで「現在閲覧中のページ」のリ
ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」:phpspot開発日誌
ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」 2012年02月13日- Page Scroller: A Simple Page Scrolling Plugin ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」。 ページ内を上や下に移動できるだけではなく、ページ内のマークアップを読み込んでナビゲーションを作ってくれた上でスクロールできたりもします jQueryプラグインなので、$('#main').pageScroller(); みたいに呼ぶだけです ページの左サイドにナビゲーションを表示する例 綺麗なスキンがかぶって表示されます 上下矢印のナビゲーションも可能 サイドではなく、ページトップにナビゲーションを設定することも可能 右サイドにも移動可能 なかなか便利で使えそうですね。１ページに沢山の情
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){
ユニクロのように商品写真をマウスで動かせたり、ズームできるようにするにはどうやって実現すれば良いのでしょうか？jQueryなどで実現できるのでしょうか。アドバイスを頂けると助かります。よろしくお願いします。
ユニクロのように商品写真をマウスで動かせたり、ズームできるようにするにはどうやって実現すれば良いのでしょうか？jQueryなどで実現できるのでしょうか。アドバイスを頂けると助かります。よろしくお願いします。
面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」:phpspot開発日誌
textualizer 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 様々なアニメーションエフェクトがあり、文字に動きをつけて注目を集めたい場合なんかに使えそうです。 IE6を含むレガシーなブラウザにも対応しています。 次のような簡単な分かりやすいソースコードで実装できます。 キャンペーンサイトなど、インパクト重視のサイトに入れてみるとよさそうですね 関連エントリ 文字を映画ばりにカッコよくアニメーションさせるjQueryプラグイン「jWise.js」 特定要素内の文字をタイプライター風にアニメーションさせるjQueryプラグイン「TypeWriter」 テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」
コンテンツの折りたたみを楽々実装できるjQueryプラグイン「jQuery Collapse」:phpspot開発日誌
jQuery Collapse | webcloud コンテンツの折りたたみを楽々実装できるjQueryプラグイン「jQuery Collapse」。 コンテンツがいっぱいあるより、まずは少ないコンテンツのほうが、理解しやすくて分かりやすいですよね。 そこで折りたたみですが、アニメーションしつつ綺麗に実装できる折りたたみが簡単なマークアップとコードで実装できます。 見出しをhタグで作って中身をdivで書けばよいだけです これだけ作るだけでも一昔前は苦労していたものですが、技術の進歩によりどんどん簡単になりますね。 関連エントリ クールなタグ入力＆オートコンプリート機能付きフィールド実装jQueryプラグイン「TextExt」 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 紙芝居のようなアニメーションでスライドするスライダー実装jQueryプラグイン「
HugeDomains.com
Captcha security check monodez.com is for sale Please prove you're not a robot View Price Processing
jQuery.gpFadeImage 1.0を公開しました。 | Ginpen.com
ふわふわ切り替える感じで。 jQuery.gpFadeImageで簡易的な画像ギャラリーを。 こんな風に、ギャラリーページの入り口みたいなところで使ったらいいんじゃないかなと思います。
2011年に配信したjQueryやWordPressなどのWeb制作向け情報・総まとめ - かちびと.net
早いもので今年も残すところあとわずか となりました。今年は年をまたいで仕事 しないとならないので早めに総まとめ的 な記事を書いておきます。と言っても 完全に自分用のまとめですのでご覧に なっても役に立たないと思いますがｗ というわけで、後で復習するのに、探さなくていいようにしただけの自分用リンク集です。 jQueryとWordPressにやたら偏ってます。過去記事のまとめですので目新しいものは一切ありません。 ネタは省いてます。あと、種類で細かく分ける気力が残ってないので順不同です。 スマフォ向けが多いのでスマフォ関連は※印を振っておきました。 復習用なのでリンクは全て当サイトの記事にしてます。他の方には二度手間ですがご了承下さい マウスを乗せるとキャプチャが表示されます。 130個くらいです。普段から小ネタばっかりなのでそんな感じのまとめです。 【追記】（僕が）リンク見にくいので色を変え
スクロールバーのデザインを変更できる軽量でクロスブラウザ対応のjQueryプラグイン・Tiny Scrollbar - かちびと.net
題名の通りスクロールバーを変える jQueryプラグインです。全然使う 機会が無かったんですが、以前から 触ってみたいと思っていたところ、 ちょうど良さそうなプラグインを 見かけたので試してみました。 デザインそのものはcssでカラーリングしたり、画像に置換したり、と自由も利いて、クロスブラウザにも対応、3KB以下と軽量です。 こんな感じでデザインを変えられます。せっかく統一性をうまく出したのに仕様上スクロールバーが出てしまって一体感を損なう悲しみと絶望感はWebデザイナーさんなら経験したことがあるのではないでしょうか？え、無いの・・じゃあいらないかｎ Sample まぁせっかくなので見てください。 当サイトの右上のギアアイコンを使いました。このアイコンをクリックすると回転するんですがこれはcss3のkeyframeとanimateでうごかｓ、あ、どうでもいいですよね。 IE6/7 IEで
昨日書いた「画像を使わずに見出しを水平線で挟むCSS」をもうちょい工夫してみる
昨日書いた記事は実装のみでしたので、 もう少し工夫してみました。border自体 さほど出来ることは多くはありませんが それでもちょっと素敵な見出しが画像 を使わず作れるのは個人的には結構 嬉しいTipsだったりします。 今日のはクロスブラウザとはいかないものもありますが、画像とjsは一切使用していません。基本的な事は昨日の記事をご覧になってください。 ものすごく使用頻度が高いっていうものでもないですけど日曜日ですし、お遊び的に。 Sample 誰でも思いつくことしかしてませんけどｗまぁ自分用のスニペットです。このブログもですけど、僕はとにかく画像の利用数を減らしたいと考えています。見た目もシンプルなものを好みますし、それがユーザービリティやコンバージョンにも影響を与える事があるのでこういった手法を好むのは一部の人間でしょう。少なくとも多くのデザイナーさんやコーダーさん目線では需要は無いと
CSS3のベンダープレフィックスを自動で付けてくれる手軽で軽量なJavaScriptライブラリ・cssFx.js - かちびと.net
久しぶりにかなり便利そうな気がした ので備忘録。CSS3で各ブラウザに対応 させるために加えるプレフィックスを 自動で付けてくれるライブラリです。 将来的にCSS3のプレフィックスは付け る必要が無くなるのでそうなったら これを外せばいいだけですね。 使い方もすごく簡単で3.7KBと軽量です。cssが管理しにくくて困ってる方は検討してみてはいかがでしょう。また、jQueryやmootoolsのようなライブラリに依存しないのも素敵ですね。 地味にいいかも。CSSPrefixerみたいにプレフィックスを付けてくれるWebサービスはいくつか存在しますが、こういうのがあるのは多くの人が面倒だと思っているからですしね。これを、jsで付けようぜ、というのがcssFx.jsです。 何より、将来的にプレフィックスは不要になるので、そのときのメンテナンスもこれにしておけば、外すだけで済むので楽ですよね。 C
表示サイズに合わせてフォントのサイズやレイアウトを最適化できるjQueryプラグイン・jFL - かちびと.net
ちょっと気になってたjQueryプラグイン だったのでテストしてみました。表示 しているサイズに応じてレイアウトや フォントサイズを最適なものにしてく れる、というもの。Media Queryは使用 していないのでcssも綺麗に保てます。 場合によっては軽量化に繋がるかも、と思ったのでちょっとテストしてみたかったライブラリ。説明されてもあんまりピンとこないライブラリですけどｗなんというか、かゆいところに手が届く的なやつです。 このようにサイズを表示変えるとフォントサイズやdivの幅も指示通り変わってくれます。Media Query択一だと、どうしても面倒になってくることもあるので、こういうスクリプトも覚えておくと保険になるかもですね。スクリプトはたったの6KBですので軽量化にも役に立つかもしれません。 尚、IE6と7には対応していません。 日本語でも問題ありませんでした。以下サンプルどうぞ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブWebデザイン対応のjQueryイメージスライダー・FlexSliderがWordPressプラグインになってた - かちびと.net