可愛らしいスタイルの日付ピッカーを実装するスクリプト・「DATEDROPPER」
DATEDROPPERは可愛らしいスタイルの日付ピッカーを実装するためのスクリプトです。jQueryに依存しています。よく見かける日付ピッカーはその月のカレンダーから選択するスタイルがほぼ定番ですが、こちらはスライダーで選ぶ形になります。素敵なデザインなんですが、コンテンツによっては利便性が落ちる可能性もありそうです。入力項目数が多い送信フォーム内では避けたほうがいいかもしれませんね。主観ではありますが。関係ない話ですけど、このWebサイト自体が個人的に好みでした。ライセンスはGithubではMITとありましたが本サイトではCC BYの両方から選択出来るデュアルライセンスっぽいです。 DATEDROPPER
jquery.cookie.jsの使い方と簡単なサンプルを紹介します
今さらな感じもしますが、使う機会があったので忘れないように記事にしておきます。以前使ったことがあるのですが、そのときの記憶がほとんどなかったので、こういうのは残しておいたら自分のためにもなりますね。 まず、jQueryとjquery.cookieを読み込みます。ともにCDNになっているのでこちらでいいと思います。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> jquery.cookieを自分でダウンロードされる方はこちらから。
画像を遅延ロードする定番jQueryプラグイン「Lazy Load」
画像を遅延ロードする定番jQueryプラグイン「Lazy Load」を紹介します。 １．概要 jQueryプラグイン「Lazy Load」を使って画像を遅延ロードさせることで、ページロード時のHTTPリクエストを減らすことができます。 以前、「Lazy Load」を使っても新しいブラウザではHTTPリクエスト回数が減らない問題があったようですが、2012年11月現在は改善されています。 参考：HTML5時代のjquery.lazyloadは画像のdata-original属性を使う 改善後の仕組みは、img要素のsrc属性にダミーの画像ファイルを指定しておき、ページロード後にスクロールによってimg要素が表示領域に入った段階でdata-original属性に指定した画像を読み込みます。 <img src="grey.gif" data-original="foo.jpg" width="6
[パフォーマンス] スマホ限定！Webの表示が速いなぁと思ってもらうための高速化手法 - YoheiM .NET
こんにちは、@yoheiMuneです。 スマホ向けサイトやアプリケーションを制作することが増えた近頃。iPhoneやAndroid向けWebアプリケーションで、いかに高速に表示してユーザーのストレスを低減させられるかを考えてきました。 このブログでは、スマホ向けにWebアプリケーションの初期表示について、アプリケーション層で行うことが出来る高速化ポイントを６つ紹介したいと思います。 スマホ向けWebアプリケーションで初期表示を高速化させる6つのポイント Webアプリケーションの高速化についてたくさんの議論がされていますが、スマホをターゲットにした場合には、こーゆう点に気をつけて高速化したいなぁと考えました。 今回以下の6つの点に分けて、自分の考えや経験を書きたいと思います。 1. 良く紹介されてるやつはやっぱり必要 2. 1stViewの表示速度にこだわる 3. 画面の総容量にこだわる 4
![[パフォーマンス] スマホ限定！Webの表示が速いなぁと思ってもらうための高速化手法 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/adc0871948f60656cfe7a7703a536d7fb0aacfdd/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F263.jpg)
意外と知らないJavaScriptの常識【JavaScript入門】 | blog.ks-product.com
近年、jQueryのようなフレームワーク・ライブラリの登場で気軽に扱えるようになったJavaScriptですが、意外と基礎的な部…2013年05月17日 意外と知らないJavaScriptの常識【JavaScript入門】 Web制作テクニック HTMLJavaScript (JS)JavaScript 基礎知識jQueryコーディングプログラミング ツイート 近年、jQueryのようなフレームワーク・ライブラリの登場で気軽に扱えるようになったJavaScriptですが、意外と基礎的な部分を知らないって人も多いかと思うので取り上げてみました。 JavaScriptはHTMLに組み込まれて実行されるケースがほとんどです。その為、JavaScriptだけに精通するのではなくHTMLの知識も必要になります。 初心者がよく陥りがちな事例でサンプルのプログラムをコピペしているのに動かないというものが
ページ読み込み時のJavaScriptの実行タイミング
HTMLページを読み込む際のJavaScriptの実行タイミングは色々あります。 タイミングをミスると意図したように動作しないことがあるので注意が必要です。 いくつかパターンを見ていきます。 通常実行 特に意識せずにJavaScriptを記述したり読み込んだりすると、書いた順番に処理されます。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <html> <head> <title>Title</title> <script type="text/javascript" src="main.js"></script> <!-- ↑このタイミングで実行される --> </head> <body> <script type="text/javascript"> <!-- var element =
シンプルにモーダルウィンドウを実装できる「leanModal」
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思います。デモ スクリプト <script src="jquery.min.js" type="text/javascript"> <script src="jquery.leanModal.min.js" type="text/javascript"> <a rel="leanModal" href="#div787">Edit</a> <div id="div787"><<モーダルウィンドウ内に表示する要素>></div> <script type="text/javascript"> $(function() { $( 'a[rel*=leanModal]').leanModal({ top:
jQueryでスクロールすると上部に固定されるナビゲーション
jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="
シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグインとか色々！ | バンクーバーのうぇぶ屋
最近多いですねー、1ページで完結するタイプのサイト。One Page Loveのサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです… でも実際シングルページをつくろうとすると、え？何これどうなってんの？って物も多くてビビることもしばし。 ってことで、今日は僕が知ってる中で『お、これ、シングルページ作る時に使えるんじゃね？』って物を幾つかご紹介させて頂きます！ 主にはシングルページデザインの表現の幅を広げるjQueryプラグインの紹介になるかなと思いますが、楽しい物も多いので、是非興味があれば試してみてくださいませ〜！ それではいってみましょー！ パララックススクローリング系プラグイン この辺は以前に紹介したことがあるものばかりなので、ぱぱーっと行きます。 jQuery Waypoint
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね＞＜ とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ
【jquery】テキストボックスのデフォルト文字。クリックすると消えるよくあるヤツ | PIYOPI-YO 〜プログラマー風メモブログ〜
タイトルがイケてないですが、よくあるあれです。 伝わりますか？ jqueryで書いてます。すごく楽です。 <html> <head> <title>jquery よくあるあれ</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.2.6");</script> <script language="Javascript" type="text/javascript"> <!-- $(function(){ //初期値の文字色 var d_color = '#999999'; //通常入力時の文字色 var f_color = '#000000'; $('#textbox'
jQueryコーディングの基本的なことからプラグイン化までの注意書き（Webデザイン）
jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前：CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
【怖くないJavaScript + jQuery】シンプルなタブ
Step1：まず下準備 こちらは前回と同じですね。まず必要なファイルを読み込みます。 headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は my_tab.js とします）を読み込みます。 <head> <script src="common/js/jquery.js" type="text/javascript"></script> <script src="common/js/my_tab.js" type="text/javascript"></script> </head> <div id="tab"> <ul> <li class="now">タブ00</li> <li>タブ01</li> <li>タブ02</li> <li>タブ03</li> <li>タブ04</li> </ul> </div> <div class="contents">ここに
[JS]ページ上のあらゆる要素を簡単にレスポンシブ対応にするスクリプト -Responsive Elements
最も狭い幅では、テキストのみに。 Responsive Elementsの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="jquery.min.js"></script> <script src="responsive-elements.js"></script> Step 2: HTML レスポンシブ対応にする要素に「data-respond」を加えます。 <div class="quote" data-respond> Step 3: JavaScript スクリプトは特に記述する必要はありません。 Step 4: CSS レスポンシブ用のスタイルを定義します。 ltは未満、gtは以上で、「.lt500」は500px未満、「.gt150.lt300」は150px以上300px未満のスタイルにな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ページ読み込み後にjavascript(jQuery)を実行する方法
スマホ用のブラウザ判別を行うための「 jquery.browser.sp.js 」
http://www.dynamicdrive.com/style/csslibrary/item/jquery_drop_line_tabs/
これはカッコイイ！アイテムを浮かせて斜めにスライドさせるコンテンツスライダー -Tilted Content Slideshow
25egg -Webデザイナーのポートフォリオサイト-