THE HAM MEDIA BLOG

jQueryで下からニョキッと動かす方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
slideUp
slideDown
slideToggle

ニョキッと

軽めのjQuery Advent Calendar 2012の6日目の記事です。画面下から「ニョキっ」と出現させる、エフェクト付きの表示について簡単に。

先日、いつもSaCSSでお世話になっているアミバ様…にjQueryを使って、画面下から「ニョキッ」と出現させるようなエフェクトをやるにはどうしたらいいか?と質問をされました。

jQueryにはエフェクト付きで表示・非表示を切り替えるメソッドが用意されていますが、今回はslideUp・slideDownを使います。

続きを読む

$.fn.〜で選択したセレクタ利用して、.live()を実現

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
ON
live

昨日『jQueryで選択したセレクタをハンドラ内で確認』というエントリーを書いたのですが、これを使えば独自メソッド内でliveのイベントを付けたい時にセレクタを簡単に使えると思ったので、昨日に続きメモエントリー。

続きを読む

jQueryで選択したセレクタをハンドラ内で確認

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
セレクター
SELECTOR

$('◯◯')で選択したセレクタの◯◯の部分のみを、$('◯◯').click(function(){});などのハンドラ内で確認したい時、どう書けばいいだ?ってちょっとした疑問に思ったので、確認してみた。そのメモエントリー。

続きを読む

jQueryの.hover()メソッドを.on()で使うためには?

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
bind
ON
Hover

jQueryを使って、ちょっとしたhoverの機能を使いたいときは、.hover()メソッドを使っているのですが、これを.on()(.bind())で使うのはどうやるんだろう?とかわかるようでわからなかったので、ちょっと調べてみた。

続きを読む

もっとシンプルかつ簡単にフォントサイズを変える「大・中・小」ボタンを実装する方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
Cookie
Size
サイズ
フォント
font
jquery

先にエントリーした内容の別版。前のはボタン部分をimgの画像として読みこんで、そのsrcを変えることで実現をしていたのですが、なんだか有用性が低かったきがしてならなかったので、もう少しシンプルに且つ画像でもCSSのボタンでもどちらでもOKなようなスクリプトに変えてみた。

続きを読む

jQueryとカスタムデータ属性を利用してプレースホルダーを実装する方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
プレースホルダー
placeholder
カスタムデータ属性

先日エントリーした内容で、inputの内容でプレースホルダーとして「キーワードを入力」という文字のみを表示させていたのですが、input要素それぞれに実装する場合、それぞれのinputで任意の文字列を入れれるようにしておきたいですよね。

HTML5で実装されるplaceholdeが全ブラウザで利用できたらいいんですけど、表示されないブラウザもあるので、jQueryとカスタムデータ属性を使って実装してみました。

続きを読む

フォントサイズを変える「大・中・小」ボタンを画像も使って実装する方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
Cookie
font
フォント
サイズ
Size

フォントサイズを変える「大・中・小」ボタンを画像で実装

今回も以前にエントリーした内容の変更版。知人に「フォントサイズを変えるボタンを画像にして、アクティブなボタンを保持したい」という要望があったので、もらったソースを元に作ってみた

続きを読む

【jQuery】inputのvalue値をもとにしたセレクタがうまく動かない?

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
セレクタ
input
属性値

jQueryを使って入力フォームにサンプル文字を入れておくスクリプト

以前紹介した、入力フォームでプレースホルダーを実現する方法を紹介したのですが、inputのvalue値を元にセレクタの指定をしようとしたところ、うまく動作していないことに今更気づいた。

エントリーを書いた当時は問題なかったから書いていたと思うのですが、今確認しても動かないという・・・とりあえず確認してみることに。

続きを読む

もっと少量のjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
リンク

いつもブログを読んでいる『かちびと.net』に書かれていた内容で、たしかにシンプルなコードで、これは覚えておくと便利だなーなんて思ったコードだったのですがちょっとコード量が多いなんて気がしてしまったという。

で、なんとかもっとシンプルに、且つ、知っているとカッコイイ!と思うメソッドを使ってできないものかと思って試してみたところ、意外とすんなり、さらに少量化することができたのでご紹介しておきます。

続きを読む

要素を表示した時と非表示にした時にそれぞれ別のアクションを実行する方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
Toggle

内容を見ると、CSS のプロパティの値を取得する方法ってよりも、.toggle()で交互に別なイベント動かしたいよ〜!という事らしい。

見てすぐに思わず「できるよ〜」というツイートを@soraiyさんにしてしまったのですが、せっかくなので、.toggle()でも十分できることでしたので、ちょっと作ってみた!

続きを読む

input要素に入力した数字を足すJSを簡単に実装してみる

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
計算

仕事で、JSで計算ってできない?という質問が出てきたので、簡単に「できます!」と答えた。でもよくよく考えると、単純な処理だけで終えるべきか、しっかりつくり込むか考えないと。

とりあえずは単純に作ってみた。

続きを読む

リンクのクリック領域をブロック全体に広げるスクリプト

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
リンク
ブロック
jquery

リンクのクリック領域をブロック全体にするスクリプト

以前にも、2回程エントリーをだしていたのですが、年末になって、この『リンクのクリック領域をブロック全体にするスクリプト』へのアクセスがちょっと増えていましたので、改めて再度まとめてみようかと思います。

続きを読む

jQuery1.4.4からの新機能「.fadeToggle()」を試してみた。

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
FADE
jquery

jQuery

紹介が滞ったりしていますが、それは置いといて、先日jQuery1.4.4がリリースされておりました。

ほとんどがバグ修正なんですが、一つだけ新機能として「.fadeToggle()」が追加されておりましたので、試してみました。

続きを読む

jQuery 1.4.3RC2リリース

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery

jQuery

先日、jQUeryの1.4.3RC1がリリースされましたが、もう正式版がリリースされるのも間近になってることもあり、RC2がリリースされました!

続きを読む

jQuery 1.4.3RC1リリース

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery

jQuery

jQueryの新しいバージョン、1.4.3が今月中頃にリリースされる予定になっていますが、それに先立って、RC1がリリースされました。

続きを読む

フォントサイズを変える「大・中・小」ボタンを実装する方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
font
フォントサイズ
フォント
jquery

フォントサイズを変える「大・中・小」ボタン実装

知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか?という質問をいただきました。

CSSとJavaScript(場合によってはJSのみ)で簡単にできてしまうので、サンプルをご紹介しておきます。

続きを読む

親要素のみ削除する方法[jQuery1.4系版]

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
親要素
jquery
Unwrap

親要素だけ削除

結構前のエントリーで『jQueryメモ:親要素だけ消すってどうやるんだろう?』という内容を書いたのですが、最新版のjQueryではもっとシンプルな方法で親要素のみ削除できるようになったので、再度試しつつご紹介します。

続きを読む

Thickboxで表示したコンテンツだけを印刷するテクニック!

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
Thickbox
Print
CSS

Thickboxで表示したコンテンツだけを印刷するテクニック!

Thickboxで表示したコンテンツだけを印刷できるようにするテクニックというのはあるのでしょうか?
[mixi] jQuery.js | しつもん 162

Thickboxで表示させた部分だけ印刷できるようになんてできるんだろうか・・・?なんて思ったけど、印刷ボタンつけてそこであれこれしたらできそうだなーなんて思ったので実践!!

続きを読む

jQuery1.4から追加されたjQuery.proxy()を試してみる

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
proxy

jQuery 1.4で追加されたjQuery.proxy()、この使い方について解説がされていましたので、ご紹介。自分なりに変化させたりしていざチャレンジ!!

続きを読む

JavaScript OFF環境に優しく? その4

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
CSS

201003030.png

4回にも分けてしまったのですが、CSSをDOM読み込み前にJavaScriptで読み込むあれこれをご紹介してきました。最後は、なくても良かったのですが、外部化したCSSをjQueryで追加する方法を紹介してこのシリーズは終了にしたいと思います。

DOM操作で関わるCSSで、それをJavaScriptが使える環境時のみに読み込ませて、且つ、DOM読み込み完了前に実行しておくという方法をここまで紹介してきました。

続きを読む

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。