【jQuery】slickのカルーセルスライダー実装方法とサンプル集｜Gimmick log
TOPjQuery 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 公開日：2015.12.02 更新日：2023.03.19 jQuery, カルーセルスライダー 様々なレイアウトのスライダー、スライドショーを実装出来る slick の使い方をまとめました。 これまでも slider-proやcarouFredSelをご紹介しましたが、slickは両者のいいとこ取りという感じです。詳細は以下の機能概要をご覧ください。 slick.js配布元 サンプルページ slickの機能概要 レスポンシブ対応 横幅のブレイクポイントごとにスライドの表示数、スクロール数を変更可 （centerModeではスクロール数は1つで固定） タッチデバイス対応 IE8以上で動作（スライド数のドットの色は変化しない） 縦カル
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
[JS]IE6/7/8でアクセスしたユーザーに新しいブラウザのインストールを促すスクリプト -IE Alert js
ユーザーがIE6/7/8でアクセスした際、IE9へのバージョンアップや他のモダンブラウザのインストールを促すjQueryのプラグインを紹介します。 IE Alert js [ad#ad-2] IE Alert jsのデモ IE Alert jsの使い方 IE Alert jsのデモ デモはIE6/7/8でご覧ください。 IE9、Firefox, Chrome, Safari, Operaでは、下記のように通常通りに表示されるだけです。 デモページ：IE7で表示 [ad#ad-2] IE Alert jsの使い方 使い方は簡単で、2ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 iealertフォルダ内にスタイルシート、および必要な画像が入っています。 <link rel="stylesheet" type=
jQuery UI Datepicker-土・日・祝日・非営業日対応 - Tech-Sketch
jQuery や jQuery UI は、とても便利です。各ブラウザのJavascript実装の差異を吸収してくれるだけでなく、ドラッグアンドドロップやタブビューなど様々なリッチなUIを利用することができます。あのIE6対応を考えなくても済むというだけでも、利用する価値があるというものです。 これらjQuery/jQuery UIは、コンシューマ向けのWebサイトのみならず、企業内の基幹業務用Webシステムであっても利用して当たり前、というほど普及していると言ってもよいでしょう。 ただし実際の業務システムで利用する際には、「ここをカスタマイズできれば！」という部分が出てくるものです。 jQuery/jQuery UIはオープンソースですから、ソースコードを直接修正してしまえば何でもカスタマイズできます。ただしそのような手段を取ると、今後リリースされるであろう新しいjQueryライブラリ
jQuery UI の Datepicker プラグイン
jQuery UI の Datepicker プラグインについての記事。Datepicker プラグインは、テキスト入力欄に、カレンダーから、日付を入力できるようにするプラグイン。 実装例（サンプル） 日付: 実装例（サンプル）の動作について 「日付:」の右側の、テキスト入力欄をクリックすると、今月のカレンダーが現れる。 カレンダーの日付をクリックすると、その日付を、テキスト入力欄に入力する。 をクリックすると、次月のカレンダーになる。 をクリックすると、前月のカレンダーになる。 実装例（サンプル）のソースコード 読み込み パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="stylesheet" href="themes/base/jquery.ui.all.css" /> <script type="text/javascript" src=
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とprototype.js、mootools.jsの競合を回避する方法！【裏技】 - Design Life
これまで、いくつかのスクリプトを紹介していきましたが、中でもよく使われる代表的なスクリプトは何と言っても 「jQuery」です。「jQuery」ほど関連プラグインをもったスプリクトもありませんし、内容も容易に理解できますね。 それに、勝るとも劣らない機能を兼ね備えたスクリプトで有名なのが、「prototype.js」と「mootools.js」です。 「prototype.js」と「mootools.js」を使用したコンテンツなどの紹介もこれまでいくつか紹介してきました。 この「jQuery」と「prototype.js」や「mootools.js」をどっちも使いたいっと思っている人も少なくはないハズです。 しかし、いざ、使ってみようとすると、スクリプトが競合し、どちらかが動作しなくなってしまいます。 そこで、今回は、番外ですが、その「jQuery」と「prototype.js」や「moo
『WebデザイナーのためのjQuery入門講座』の講師をします【3/10(土) 神戸・カフーツ】 | セミナー/講習会 | 阿部辰也のブログ――人生はひまつぶし。
非プログラマなWeb屋のみなさん！ プログラマじゃなくてもちょこっとJavaScriptやjQuery知ってると色々と便利だし、プログラマな人に仕事を頼む時も話がしやすくなりますよ！！ というわけで、いつも大変お世話になっている神戸のコワーキング・スペース カフーツさんの主催で『WebデザイナーのためのjQuery入門講座』の講師をさせて頂くことになりました。 JavaScript/jQueryの基本から、ある程度実用的なサンプル紹介まで、これからjQueryもかじろうかな、という人向けの内容となっております。 ぜひぜひお気軽にご参加くださいねー！ 『WebデザイナーのためのjQuery入門講座』の詳細・お申込みはこちら
iPhone/Android/PCのブラウザ対応、フリック操作をシンプルに実装できるjQueryプラグイン - makogの日記
自作のjQueryプラグイン、jQuery.flickSimpleを公開します。 jQuery.flickSimple デモ / マニュアル（iPhone/Androidでもご覧いただけます） jQuery.flickSimple ダウンロード（github） これは、iPhoneの特徴的なインタフェースであるフリック操作を、Webサイト上で実現するための jQueryプラグインです。某サイトのiPhone版のためにだいぶ前に書いたもので、当時はiPhone専用だったのですが、Android対応の依頼を受けたのをきっかけに、PCのブラウザにも対応しようと、大幅に作り直したものです。 フリック動作を実現するjQueryプラグインは既にいくつかあります。機能としても実装としても、私が作ったものより優れているものもあると思いますが、まずは公開することに意義がある、ということで。 ちなみに、このス
jQuery MobileのDatepickerをカスタマイズ - Kimura.Memo
※ここの情報は古いので以下をお読み下さい。 jQuery MobileのDateboxをカスタマイズ-その２ - Kimura.Memo スマートフォンで動作する、ちょっとした予定表を作っていて、jQuery MobileのDatepickerを使って日付の入力を行うことになりました。 このDatepicker、スマートフォンでも動作するのは有り難いのですが、ダウンロードしたそのままだと、ちょっと直したいところがあったりします。 jQuery Mobile Datepickerの基本 jquery.js、jquery.mobile.js、jquery.mobile.cssの他に、 jquery.ui.datepicker.mobile.css jQuery.ui.datepicker.js jquery.ui.datepicker.mobile.js の3つがDatepickerには必要。
jQuery UI Datepicker - Marc Grabanski
jQuery UI Datepicker Project Most likely, you are looking for a demo of jQuery UI Datepicker. The jQuery Datepicker project has been donated to the jQuery UI project. However, since the jQuery UI team had a different direction in mind than Keith Wood (co-author of jQuery Datepicker), Keith Wood has created another implementation of, jQuery Datepicker. Download jQuery UI Datepicker Standalone Since
How to Create an Awesome Image Preloader | Envato Tuts+
How often do you find that images in a website load gracefully; the kind where a loading icon first appears, and the image then fades in, once loaded? This technique can greatly boost the performance of your website. If you're not already familiar with this method, you're in luck! Today, we'll create a preloader plugin for your projects. Intrigued? Let's get started! Step 1: Setting Up Your Worksp
多数のブラウザでvideoタグに対応する·html5media MOONGIFT
html5mediaはjQuery/JavaScript製のオープンソース・ソフトウェア。HTML5を使って動画を流す場合に使われるのがvideoタグだ。現在主流になっているMPEG4にはライセンスコストがかかるので標準化が困難で、広まるのは難しい状況ではある。 Safariで実行した場合。videoタグのまま そんなvideoタグを使えばFlashを使わない、または使えないブラウザでも動画の閲覧が出来るようになる。だがIEをはじめとしてHTML5に対応していないとvideoタグが使えないので二重の開発を行う必要があるのは問題だ。そこで使ってみたいのがhtml5mediaだ。 html5mediaは多数のブラウザでvideoタグを使えるようにするライブラリだ。記述するのはvideoタグでよく、html5mediaを読み込むことでHTML5に対応していればそのままvideoタグを使い、対応し
パスワードの強度によっておねえさんがエロくなるjQueryのプラグイン Naked Password | TRIVIAL TECHNOLOGIES on CLOUD
みんなのIoT/みんなのPythonの著者。二子玉近く160平米の庭付き一戸建てに嫁/息子/娘/わんこと暮らしてます。月間1000万PV/150万UUのWebサービス運営中。 免責事項 プライバシーポリシー 強度の高いパスワードを作るのは本当にめんどくさい。ならば強度の高いパスワードにはご褒美を与えればいいんじゃないか，と作者が考えて作ったのがNaked PasswordというjQueryのプラグインだ。パスワードの強度に合わせて，おねえさんが豊満な肢体をあらわにするぞ。 このプラグインを使うと，エロい姿のおねえさん見たさに，みんなwell known wordsを避けたり数字を混ぜたりして最強強度のパスワードを登録するようになるので，ハッカークラッカーがパスワード破りしずらくなる。エロは世界を救う。世界を救うjQueryプラグインNaked Passwordをみんな使おう。ただし，強度の
jQuery で指定した要素の中身を空にする方法 | jQuery | 阿部辰也のブログ――人生はひまつぶし。
また jQuery の超小ネタのメモです。 jQUery で、指定した要素の中身を空にする方法です。 例えば p要素の中身を空にしたい場合は、以下のようにします。 $("p").empty(); もちろん、「.class」「#id」のような指定で、クラスやID指定した要素を空にもできます。 Twitter始めました。Followはお気軽にどうぞ。 関連するブログ記事 jQuery で非同期通信中にローディング画像を表示する方法 [2010年8月10日 23:03] jQuery UI の Sortable モジュールでリストをドラッグしてソート可能にする方法 [2010年7月27日 15:47] jQuery で POSTメソッドによる非同期通信を行なう方法 [2010年7月26日 17:28] jQuery の入門というか初歩というかそういう話 [2010年7月22日 16:48] 『w
jQuery で非同期通信中にローディング画像を表示する方法 | jQuery | 阿部辰也のブログ――人生はひまつぶし。
jQuery で Ajax な非同期通信中に「Now Loading」的な GIFアニメ画像を表示する方法の解説です。 超小ネタですが。 jQuery で非同期通信処理をしている間に「Now Loading」的なアニメーション画像を表示する、というのはよくあるパターンですが、その方法の解説です。 ローディング中の画像を表示するスクリプト 例えば、以下のような html の id="message" の内容を Ajax によって変更したい場合。 <p id="message">ここのメッセージが非同期通信後に変更されます。</p> <form method="GET" action="#"> <input type="button" value="ここをクリックでメッセージ変更" onclick="ChangeMessage();"> </form> この時、function ChangeM
jQuery UI の Sortable モジュールでリストをドラッグしてソート可能にする方法 | jQuery | 阿部辰也のブログ――人生はひまつぶし。
ul要素や ol要素で作成したリストを、マウスのドラッグ＆ドロップで好きなようにソート可能にする jQuery UI のモジュール「Sortable」の解説です。 ul要素や ol要素で作成したリストを、マウスのドラッグ＆ドロップで好きなようにソート可能にする jQuery のモジュール「Sortable」の解説です。 1. Sortable モジュールの入手 Sortable を利用するためには、通常の jQuery ソースコード以外に、jQuery UI のモジュールをいくつか読み込む必要があります。 jQuery UI - Configure your download から jQuery UI モジュールをダウンロードしましょう。 上記サイトには、Sortable 以外にも沢山のモジュールが用意されていますが、とりあえず Sortable の機能を利用したいだけの場合は、以下の四つ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryで破棄されたrequestAnimationFrameとJSでのアニメーション実装で注意すること
steamdev.com
東京渋谷 “HTML5入門＆jQuery” 勉強会(5/26)の資料を公開します | tonowp
