[ jQuery ] select要素（プルダウン・セレクトボックス）を装飾する easyselectboxの使い方 | 東京のホームページ制作 / WEB制作会社 BRISK
[ jQuery ] select要素（プルダウン・セレクトボックス）を装飾する easyselectboxの使い方 更新日：2013/11/28 デザインされたフォームを設置したいとき、select要素（プルダウン・セレクトボックス）の装飾はcssだけではなかなかうまくいきません。 背景や枠線をいじってみても、ボタンのところを装飾するのは普通の方法ではうまくいかないようです。 select要素の装飾用に作成されたjQueryのプラグインはいくつかありますが、 その中で使いやすかった「easyselectbox」を紹介します。 例えば、次のようなデザインのプルダウンを作りたいと思います。 まず、通常のプルダウンです。 これをcssで装飾してみましょう。 例えばこんな感じです。 .select-box { background: #FFFDF4; border: 2px solid #D2B
![[ jQuery ] select要素（プルダウン・セレクトボックス）を装飾する easyselectboxの使い方 | 東京のホームページ制作 / WEB制作会社 BRISK](https://cdn-ak-scissors.b.st-hatena.com/image/square/31973cb09d723b2971c35ea9519ec57d8a5695f1/height=288;version=1;width=512/https%3A%2F%2Fb-risk.jp%2Fwp%2Fwp-content%2Fuploads%2F2014%2F04%2Fselect.png)
管理画面にメディアアップローダを組み込む
1から解析していたら大変なことになりそうだったが、http://firegoby.jp/archives/2261ここを見て、あっけなく実装出来た。 少しばかり解析しようとjavascript部分のみ抜き出す <script> jQuery('document').ready(function(){ jQuery('.media-upload').each(function(){//aタグの画像編集ボタンのそれぞれについて var rel = jQuery(this).attr("rel");//rel属性（すなわちid,nameと同じ） jQuery(this).click(function(){//クリックイベントをバインド window.send_to_editor = function(html) {//send_to_editor(html)定義 imgurl = jQuery(
ソースがシンプルなJSによるロールオーバー｜CSS HappyLife
Webは略語じゃないのに「WEB」って書く人が多いのが気になって仕方ない今日この頃。（あ、音声ブラウザを配慮したらという場合です） さて、本題に。 CSSのみでロールオーバーするテクニックは有名でございますが、ココ最近JSでいいじゃん。と思うようになってます。 ってことで、こんなサイト名ですけどJavaScriptでやるロールオーバーの方法のひとつでも。 jsファイルのご用意 何はともあれ、下記のjsファイルをご用意します。 function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src")
IE8でjQueryのアニメーションがうまく動作しない場合の対処法 – helog
スライドショーやアコーディオンメニューなどのアニメーションをjQueryベースに構築することも一般的になりました。一昔前は簡易的なアニメーションもFlashで構築していましたが、徐々に、そして確実にJSに移行しています。 jQueryはクロスブラウザ対策を目的に導入されることもあります。しかし、複雑なアニメーションなどを構築する場合に、IE8では問題が発生することがあります。 そこで、IE8の問題とその対策手段をまとめてみたいと思います。 IE8でマウスオン／アウトが効かない jQueryのマウスオン、マウスアウトイベントがIE8のみ反応してくれない場合があります。 $("#sample").mouseover(function(){…（省略） $("#sample").mouseout(function(){…（省略） そのような時には、マウスエンターとマウスリーブに切り替えると改善する
IE11でflexsliderをfadeさせる【jquery】【bug fix】 | sakura*sakura
ご注意この記事は 2年以上前 に書いたものです。現在は状況が異なる可能性がありますのでご注意ください。 flexslider 'fade' animation not work in IE11. flexsliderにfadeを設定したら、IE11でfadeが効かなかったので修正。 （firefoxやchromeでは動作していた。） どうもIE用のopacity調整してるらへんが怪しかったので、数時間かけて以下の方法で解決。 ちなみにflexsliderのバージョンはこちら。「jQuery FlexSlider v2.2.2」 （min.jsとjsファイルでは、記述がちょっと違っていたので注意！） jquery.flexslider-min.jsの例 originalコード～"init"===b&&(g?d.slides.css({opacity:0,display:"block",web
フォーム項目の内容が変更された時のjQueryのイベントまとめ。 | Almondlab
テキストフィールドや、ラジオボタンなど、フォーム項目の内容が変更された時に処理を行うための、jQueryによるイベントのまとめです。 サンプルはこちら フォームは次のように、テキストフィールド、テキストエリア、ラジオボタン、チェックボックス、セレクトボックスを作成します。 <form> <!-- テキストフィールド --> <input type="text" id="text" name="text" value="" /> <hr /> <!-- テキストエリア --> <textarea id="textarea" name="textarea"></textarea> <hr /> <!-- ラジオボタン --> <label for="radio-01"><input type="radio" id="radio-01" name="radio" value="1" />ラジオ1
超簡単！カレンダーから日付入力する方法：jQuery ui Datepicker
2015.02.23 超簡単！カレンダーから日付入力する方法：jQuery ui Datepicker ツイート シェアする 共有する はてブ Pocket あなたのサイトの入力フォームは、日付入力が難しくなっていませんか？希望発送日時や納品日など日付に関する入力は意外と手間がかかるので、入力しやすいよう改善しましょう！フォームのユーザビリティ(使い勝手)は入力完了率やコンバージョン率に大きく影響からです。 ではどうすれば日付入力が簡単になるのでしょうか？答えは「カレンダー」を使用して日付入力をしてもらうのです。普段から見慣れているカレンダーを使用することで、直感的に日付を確認することができ、また1クリックするだけで選択出来ます。今回は「jQuery ui Datepicker」を使用して、カレンダーを簡単に実装する方法をご紹介します！ ▼サンプルページ jQuery-ui-datepic
関数は定義されているが、ページ読み込み時にJavaScriptのエラーで「Uncaught TypeError: undefined is not a function」が出るとき | Hack
関数は定義されているが、ページ読み込み時にJavaScriptのエラーで「Uncaught TypeError: undefined is not a function」が出るとき ページ表示時に、Chromeのコンソールが「aipo.webmail.onProcessingTimer」の行に「TypeError: undefined is not a function」を出しているが、 表示後にコンソールに関数「aipo.webmail.onProcessingTimer」を打ってみると関数は存在しているので、なぜだろうかと考えていましたが、 <script language="JavaScript" type="text/javascript"> //<
コピペでＯＫ！サイドバーの広告を固定してスクロールに追従させる方法
こんにちは、@webgoyaです。 最近ちょくちょく見かける、スクロールアウトした後もサイドバーの要素が固定されて付いてくるメニューを当ブログにも導入してみましたので、その設置方法の解説です。 導入自体は簡単なのですが、よく見てみるとスクロールに追従してそのままフッタ―部分に重なってしまってるブログやサイトも多くて、それはなんだかイケてない気がしたので、今回紹介するものは当ブログのようにスクロールに追従後、今度はフッタ―前になるとピタリと止まってくれるやつにしました。 当ブログでは広告をローテーションバナーでランダムに表示させていますが、広告だけでなく、ソーシャルボタンや各種ブログパーツなども固定して追従させる事ができます。 ちなみにAdSenseでこれをやるのはGoogleの規約で禁止されているので違反行為です。 クリック率は間違いなく上がるのでやりたくなるかもしれませんが、アカウント停
jQuery：チェックされたら or 入力されたら送信可能にするボタンを実装する方法 - NxWorld
割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l
郵便番号を入力すると住所を自動補完してくれるjQueryプラグイン・jquery.jpostal.js
郵便番号から住所を自動補完してくれるライブラリのご紹介。他にもいくつかありますけど使いやすかったので備忘録として。 よくあるやつ。メンテも不要との事なので助かります。 <script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script> <script type="text/javascript" src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>ライブラリはgooglecode.comにホストされているものを直接読み込みます。 $('#postcode1').jpostal({ postcode : [ '#postcode1', '#postcode2' ], address : { '#ad
横からニュルっとスルっとあいつがでてくる。jQueryドロワーメニュープラグイン【jSlideMenu】を使ってみた｜わざログ｜ うずまきブログ｜ 名古屋のホームページ制作／印刷物デザイン 株式会社うずまきデザイン
ずいぶんと前に日本列島に寒気がやって参りましたね。最近はこたつの中で横になりながらジャンプ片手にみかん片手に、ついでにテレビ見ながらごろごろしてることを思い浮かべながら布団に入るのがついつい日課になってるエンジニアの松本です。 長めの自己紹介はさておき、本日は今ノリにノッているあのイケてるドロワーメニューを使ってみたいと思います。 google.com スマホ版 巷で噂のドロワーメニュー。FacebookアプリやGoogleサイト（*右画像）など、だれもが利用しているアプリやWebサービスで導入されています。横からニュルっとスルっとでてくるあのメニューこそ、ドロワーメニュー張本人です。あのニュルニュル感が気持ちいいから、ついつい何回も何十回も何百回も角っちょのメニューアイコンを押しちゃうんですよね。ああ気持ちいい。 今回ドロワーメニューを導入する際に使用したのはjQueryプラグイン【jS
jQueryにおけるフォーム値の取得と設定 : JavaScript好き
スポンサードリンク 概要 フォーム(form)の値を取得する場合、jQueryではval()メソッドやprop()メソッドを使う。 ただし、inputの種類によって癖があるので、各typeにおける｢値取得｣｢値設定｣などをメモする。 また、prop()を利用するのでjQueryのバージョンには注意が必要。 このコードを試したときのバージョンは｢1.10.1｣。 テキスト val()メソッドを使だけ。未入力の場合は、｢""｣(空文字)なので安全。 HTML <input type="text" name="animalText"> 値取得 var newText = 'トラ';$(':text[name="animalText"]').val(newText); 値設定 var animal = $(':text[name="animalText"]').val(); ラジオ val()メソ
jQueryでradioボタンが変更された時のイベント処理
jQueryでradioボタンが変更された時のイベント処理 html <input name="test" type="radio" value="on" />on <input name="test" type="radio" value="off" />off jquery $( 'input[name="test"]:radio' ).change( function() { alert( $( this ).val()); // valueを表示 });
jQuery.ajaxで簡単に非同期通信 - 背負い投げとENTER_FRAME
なんちゃってWebクリエイターがFlashやらActionScriptやらを淡々と書く。ときとき柔道の話しもする。 やっばりイマドキっぽく、jQuery.ajaxで非同期通信しよう。結構簡単にできたけど、PHPから配列をJavaScriptに戻す作法でつまずいた。普通にPHPでゲットした配列（多次元連想）をそのままechoで返すと、jQueryの方がどうしても解析できなかった。 $result = json_encode($result); echo $result; 配列をエンコードしておけば、問題解決。 ローカルのMAMP環境だとajaxのパラメータに「dataType: ‘json’」が必要だったけど、ロリポップのサーバーだと消さないといけない。そのかわりに取得してきた配列をJSON.parse()を掛ける必要がある。 デモページ 「送信」を押すと「getAr.php」を読み込んで、
jQueryとPHPでAJAX通信を行う | きほんのき
jQueryとPHPでAJAX通信を行う基本。 以下はjQueryの$.ajaxでデータをphpに渡し、php側でデータを処理して再びjQueryで受け取る処理の雛形です。 例として、ボタンをクリックするとインプット欄の日付を取得してphpに渡し、phpは渡された日付のデータをjQuery側に返すというプログラムを書いてみます。 jQuery側 <input type='date' name='date'> <button>呼び出し</button> <script> jQuery(function($){ $('button').click(function(){ var day = $('input[name=date]').val();//インプット欄の日付を取得 $.ajax({ type: 'POST', dataType:'json', url:'api.php', data:
jQuery.post() | jQuery API Documentation
jQuery.post( url [, data ] [, success ] [, dataType ] )Returns: jqXHR Description: Send data to the server using a HTTP POST request. version added: 1.0jQuery.post( url [, data ] [, success ] [, dataType ] )
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.e-riverstyle.com/2013/07/jqueryfadeintransition.html
BIGLOBEなんでも相談室サービス終了のお知らせ
webhako.net - このウェブサイトは販売用です！ - webhako リソースおよび情報