クールな画像拡大jQueryライブラリ「lity.js」、レスポンシブにも対応！ | SHINGO IRIE
クリックで画像が拡大されるライブラリはlightboxなど数多くありますが、その中でもデザインの邪魔をせず、実装もかんたんなライブラリ、それがlity.jsです。 使い方公式サイトから一式ダウンロード。 ダウンロードしたファイルの中で使うのはdistフォルダ内のlity.js、lity.cssのみ。 jQueryの後に読み込ませます。 <link href="lity.css" rel="stylesheet"> <script src="jquery.js"></script> <script src="lity.js"></script> あとは、 <a href="http://image.jpg" data-lity>Image</a> のようにdata-lity属性をつけるだけで動きます。かんたんですね。下がlity.jsの表示サンプルです。 WordPressへの組み込みWor
[JS]縦長ページでデスクトップでもスマホでもデザインの邪魔をしないナビゲーションを実装するスクリプト -MenuItems
タップするとナビゲーションがスライド。 MenuItemsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="menuitems/menuitems.min.css" /> </head> <body> ... コンテンツ ... <script src="jquery.min.js"></script> <script src="menuitems/menuitems.min.js"></script> </body> Step 2: HTML 各コンテンツはsection or div要素で実装し、それぞれに「.menuItem」を付与し、data属性でラベルを記述します。 <body> <section|div class="menuI
![[JS]縦長ページでデスクトップでもスマホでもデザインの邪魔をしないナビゲーションを実装するスクリプト -MenuItems](https://cdn-ak-scissors.b.st-hatena.com/image/square/490093a26eeae705d029e62c12e65ec0e91614fc/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014120901.png)
JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT
昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;
連休中に短時間でプログラミングを学ぶなら「CODEPREP」がお勧め
CODEPREPは、プログラミングをオンラインで書きながら 覚えることができる学習サービスです。 プログラミングの基礎から応用、 アプリ開発までを学ぶことができます。 CODEPREPは、ブラウザ上で実際にコードを入力し実行結果を確認しながら、プログラミングを学べるオンライン学習サイトです。 ブラウザ以外、特に何も必要とせず、実際に入力していくことで短時間でも学習効果が得られます。 同様のオンライン学習サイトは他にもあるのですが、「CODEPREP」は講座の数が多く「Three.jsで作る3Dグラフィックス基礎」や、「CSS3&jQueryで作る2Dゲームモーション」など他ではあまりみられない講座があるので、選択のしがいがあるのではないでしょうか。 他にも、「グリッドレイアウト」や「パララックス」「スライドショー」などの実践的な講座も多数あるので連休中にプログラミングを学ぶのにお勧めです。
jQueryのdata-*属性キャッシュ仕様と対策
Updated 2014.02.16 / Published 2014.02.16 jQueryでdata-*属性を扱う際にjQuery.data()メソッドもしくはjQuery.attr()メソッドを使うことになるでしょうが、jQueryで扱えるdata-*属性のオブジェクトは前提としてキャッシュ仕様であることを理解しておかないと嵌ることが多々あります。 取得だけなら問題は起こらない <div id="user1" data-id="1" data-user="Jack" data-date-of-birth="2000-10-01">Jack</div> これらのdata-*属性を取得したい場合、jQueryであれば次のように記述します。 //data()の場合 jQuery("#user1").data("id"); // => 1 (数字扱い) jQuery("#user1").d
2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo
Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). 引用：InstantClick — JS library to make your website instant リンクにマウスオーバーしてからクリックするまでには200msから300msほど時間がかかるそうです。実際このテストページでクリックしてみるとMacのトラックパッドだとさらに遅く500msくらいかかってました。 InstantClick.ioはその間に裏でリンク先ページをロードして勝手にリンクをpjax化してしまうという高速化ライブラリです。 やってることはRails4のturbolinksと似てます
jsだけ使ってメールが送れる世の中らしい - 以下斜め読んだ内容
便利ですね MailChimpがMandrillというメール専門のBaaSのようなことをやってる Transactional Email from MailChimp - Mandrill xhrでpostするとメールが送れる via: Send an email using only JavaScript — Design + Startups — Medium 12,000通/月まで無料 Mandrill - Transactional Email from MailChimp mailchimpのようにダッシュボードで、開封チェックとか送る側が知りたい情報が知れる機能が使える htmlメールとか、画像埋込とか、添付ファイルとかメールに欲しいものもひと通りできる Messages API | Mandrill やってみた mandrillでサインアップして、api keyもらう手順 割
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
