jQueryでページ内リンクをスムーズにスクロールする方法 - GGRKS！
ページ内リンクをスルスルスルーとスムーズにスクロールさせるのはもはや鉄板ですよね。 実装も簡単！コピペでOKです。 手順① jQueryを読み込む head内にjQueryのソースを記述します。 <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> </head> 私は面倒なので、CDNにホストされているjQueryを読み込んでいます。 jQueryをダウンロードして読み込んでもOKです。 → jQueryファイルのダウンロード 手順②スクロール部分を記述する。 head内にスクロール部分のソースを記述します。 <!-- スムーズスクロール部分の記述 --> <script> $(function(){ //
Fotorama — Simple and Powerful Responsive jQuery Image Gallery
Set upJust copy and paste the snippets below to integrate Fotorama. 1. This goes to the <head> of your page: <!-- jQuery 1.8 or later, 33 KB --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Fotorama from CDNJS, 19 KB --> <link href="/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <script src="/ajax/libs/fotorama/4.6.4/fotorama.js"></scrip
汎用性の高そうなjQueryイメージスライダー・Fotorama
よさ気だったので備忘録。jQueryで作るスライダーです。画像や動画にも対応、レスポンシブWebデザインにも対応しており、マークアップもシンプルで済みます。 なかなかいいスライダーでした。タッチイベントにも対応しているのでスマフォでも使えますね。 見た目はよくあるスライダーですが、汎用性は高い印象です。タッチイベント、レスポンシブWebデザイン、ハッシュタグ対応、動画も可能、フルスクリーン化も可能で、マークアップも画像を書けば良いだけ。 動作サンプルがいろいろ用意されています。 Sample コード<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="fotorama.js"></script>本体とプラグインとCSSを読み込みます。 <div class="fotorama"> <
Re:jquery 1.xと2.x の違い、さらに動作を音速にするための設定
Re:jquery 1.xと2.x の違い、さらに動作を音速にするための設定 ネタ元 : jquery 1.xと2.x の違い、さらに動作を音速にするための設定 ちょっとツッコミどころが多いので突っ込んでおきます。 使い分ける <!--[if lt IE 9]> <script src="jquery-1.9.1.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <!-->![endif]--> jQuery 2.xのベータ版が公開されていた際にはjQueryは条件付きコメントで読み込むことを想定していました(上記コードはその時のオフィシャルのコードに
JavaScriptテンプレートエンジンJsRender 基本のキ
はじめに JsRenderは高速、軽量、高性能なJavaScriptテンプレートエンジンです。JsRenderを使うと、ブラウザ側で動的にテキストやHTMLを生成できます。 JsRenderはoutlook.comなどのサイトですでに使われており、今後利用者が増えることが期待されています。先日、JsRenderの正式版のリリースが近いことが、作者であるボリス・ムーア氏のブログで発表されました。そこで、正式リリースに先立ちJsRenderの使い方を紹介していきます。 対象読者 JavaScriptテンプレートエンジンに興味のある方 JavaScript、jQueryの基本を理解している方 必要な環境と準備 JsRenderとjQueryを以下のサイトからダウンロードしてください。JsRenderは単体でも動きますが、jQueryのプラグインとしても機能します。 JsRenderのダウンロード
なんとWordPressプラグインまである。多彩なエフェクトでレスポンシブなフリーのjQueryスライドショー『Camera』 / Maka-Veli .com
なんだか話題になってるみたいですね？『Camera』というスライドショー。 特徴としては レスポンシブ 多機能、ハイクオリティ 多彩なエフェクト スキンも多数用意 WordPressで管理できる という感じなのですが、WordPressプラグインは本当にびっくりしました。 ウィンドウリサイズするとちゃんとレスポンシブ WordPressプラグイン。管理画面もしっかり用意されている 管理画面上でエフェクト等が細かく設定可能 他にも多数機能あり フリーなんですが、サポート（寄付）してね、というスタンスなのでもしよければ寄付して使ってみてはいかがでしょうか Camera http://www.pixedelic.com/plugins/camera/ WordPressはこちらから http://wordpress.org/extend/plugins/camera-sli
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
jQueryのeachの仕組みを徹底的にわかりやすく解説してみた。 · DQNEO日記
eachのキホン：要素を１個ずつ処理する まずおさらい。 このようなHTMLがあるとします。 <ul> <li>foo</li> <li>bar</li> </ul> eachを使うと、要素１個ずつに対して順繰りに処理を行うことができます。 <script> $(function(){ $('li').each(function(){ alert( $(this).text() ); // 'foo', 'bar'と表示 }); }); </script> これがキホンです。 変形してみる 上のeach式は、下のように変形できます。 (一番外側のブロック$(function(){....})は省略します) $.each( $('li'), function(){ alert($(this).text()); }); さらに変形してみます。 グローバル変数 "$" はグローバル変数 "jQu
jQuery MobileのテーマにMetroスタイルが登場。Microsoft Open Technologiesが発表
jQuery MobileのテーマにMetroスタイルが登場。Microsoft Open Technologiesが発表 HTML5のタグを記述することで容易にモバイル対応のアプリケーションが開発できるフレームワーク「jQuery Mobile」に、マイクロソフトのタッチインターフェイスである「Metroスタイル」に対応したテーマが追加されたことがブログ「More news from MS Open Tech: announcing the open source Metro style theme for jQuery Mobile」で明らかにされました。 このブログを投稿したAbu Obeida Bakhach氏は、先月マイクロソフトがオープンソースや標準規格などに対応するために設立した企業Microsoft Open Technologies,Incの一員です。 Metroスタイル
jQuery 関連記事まとめ - Cyokodog::Diary
はてブだと埋もれるのでこちらに書き足してきます。 jQuery 基本機能 本家 jQuery.com リファレンス jQuery 日本語リファレンス jQuery 開発者向けメモ jQuery リファレンス- openspc2 jQuery 1.2.6 リファレンス - StackTrace チートシート HTML/CSS, jQuery, WordPressなどウェブ制作者のためのチートシート集 - coliss スライド・関連情報 はじめての jQuery jQueryのプレゼンVIDEO - JAM LOG 第1回 Silverlight vs. jQuery＋ASP.NET AJAX - @IT チュートリアル jQuery 入門 - openspc2 jQuery を使って Ajax 開発を単純化する - IBM jQueryの魔法 - All About jQuery ではじめ
iPhone向けWebサイトの制作等に役立ちそうな情報まとめ - かちびと.net
iPhone向けのWebサイトを制作する 際に役立ちそうな情報のまとめです。 情報が多くて混乱し始めたので、個人 的なメモ。iPhone関連のWeb制作情 報は基本的に載せています。アプリ 制作とかそっち系はたいして無いの でご了承下さい。 個人的にグッと来たiPhone / iPad周りの情報をメモ的にまとめておきます。素材とかフレームワークとかTipsとかそういうの中心で、SDKとかObjective-C的な情報は無いです。順不同。 フレームワークとかスクリプト WebアプリとかiPhoneサイト向けのフレームワークとか。 jQuery Mobile スマートフォン向けのjQuery公式ライブラリ。リリースが待ち遠しいですね。 jQuery Mobile Sencha 以前触ってみたので記事にしました。HTML5とjsのみのWebアプリ向けフレームワーク。 Sencha Titaniu
超定番の jQueryプラグインをサンプルと一緒に集めました。（商用利用OKなもの多め） | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
超定番のjQueryのプラグインを厳選して集めました。 商用利用が可能なものを優先的にピックアップしています。 （利用する際はそれぞれライセンスをご確認くださいね） 超定番プラグイン アニメーションのイージングを簡単に扱えるプラグイン jQuery.easing jQuery.easing
WordPressのトップページを雑誌や新聞のような段組にする方法
WordPressのブログは一般的に記事タイトルと記事の概要が単純に縦に並ぶだけですが、jQuery Masonry という jQuery プラグインを使用すると、このブログのトップページのように雑誌や新聞のような段組で記事一覧を並べることができます。 jQuery Masonry は WordPress 用に作られたわけではありませんが、WordPress テーマに組み込んでトップページ等で使用することができます。 ただ、公式のドキュメント通りに JavaScript を書いただけでは WordPress テーマではうまく動かないので、やり方をここにまとめておきます。 ここでは、WordPress 3.3 のデフォルトテーマ「TwentyEleven」をベースに解説します。 準備 まず jQuery Masonry 公式サイト のページ中央にある「Download the script
モバイルサイズになると自動でグローバルメニューをPathのような横スライド式に切り替える軽量jQueryプラグイン・PageSlide Responsive - かちびと.net
結構良さそうだったので備忘録。レスポンシブWebデザイン向けのライブラリです。モバイルのサイズになるとグローバルナビを横スライド式に切り替える、というもの。面白いですねー。 これ結構いいんじゃないでしょうか。レスポンシブWebデザインにするとどうしてもナビゲーションが縦長になりがちなのでその不満は解消できるアイデアですね。 PathやFacebookのiPhoneアプリのような横スライドメニューは使いやすいかもしれない。 Pathのようにというか、全く同じじゃないんですが、モバイルサイズになると横スライド式のメニューに変更するjQueryプラグインです。 ちょっといいアイデアですね。プラグインも圧縮版は3KBと軽量です。 タップすると左からメニューがスライドします。 手抜きで申し訳ないんですがサンプルです。 Sample※表示確認はresponsivepxを使うと楽です 実機で重いのは僕が
タブで切り替え可能な地図をGoogleMapで実装する為のjQueryコードサンプル
勉強用にメモ。タブで複数のGoogleMap をjQueryで切り替え可能にするコード です。わりと簡単なコードでユーザーに とって使いやすい地図を実装出来るの でちょっと覚えておきたい。仕組みは 結構単純です。 以前、普通のタブで同じように切り替えるようにしたんですが、複数の地図を全部読み込んでしまうのでちょっと微妙だったんですが、これなら切り替え時に読み込んで表示するので表示スピードに対する影響を軽減できます。 Sample 例えば複数店舗があっても一箇所に表示できますね。GoogleMapは便利なんですが、地味に重いのでこういうコードはちょっと覚えておきたいです。 /* Google Map Selector * Created: Jan 18th, 2011 by DynamicDrive.com. This notice must stay intact for usage *
ブラウザ上でHTML / CSS / Javascriptを書いてその場で実行、ブログ等にも貼付できるjsfiddleの基本的な使い方をざっくりと - かちびと.net
個人的にお勧めしているjsfiddleですが、せっかくなのでちゃんと記事にして普及活動をしてみようかなと思います。jQueryのコードを気軽に試す、などにも最適です。 全部は書ききれないのでざっくりと、程度です。一応基本的な部分だけ・・jsdo.itでいいじゃんとか言われそうな空気満々ですが、いいならこんな記事書きませんのでお察し頂ければ幸いです。 jsfiddleとは、その場でjsコードを実行、動作テストできるツールで、人気のjsライブラリのjQueryの公式サイトでもバグを伝えるときはjsfiddleを使用して動作を見せるように薦められます。 When You Report A link to a reduced, working demo/test case that will never move (jsFiddle is good for this). （意訳：バグを報告するとき
css-lecture.com - css lecture リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cmmntr.com
1216彩票-官网平台
502 Bad Gateway nginx openresty 133.242.243.6