Note: You can send your plugins and articles in for review through our contact form or @dailyjs. Airbnb JavaScript Style Guide Airbnb JavaScript Style Guide is a pretty detailed JavaScript style guide that includes suggestions for jQuery. As a bonus, the Resources section includes links to other style guides (and DailyJS, thanks Airbnb!) I’ve been using Google’s Style Guide for a few projects, alt
簡単に説明すると、親コンテナの大きさに合わせて、画像を縦横比を維持したままリサイズしてくれるプラグインです。 動作は、以下の様な感じになります。 例えば、これに imgLiquidを適用すると jQuery(document).ready(function($) { $('.parent').imgLiquid({ fill: false }); }); こうなります。 元のimgは非表示となり、親コンテナの背景に表示されるようになります。画像に何かするのではなく、CSSを差し込み表示域を調整するという事ですね。 fill:false 縦横比を維持したまま、コンテナ内に画像が全て表示されるようにリサイズされます。コンテナと画像の縦横比が異なれば余白ができます。 fill:true 縦横比を維持したまま、コンテナの余白が埋まるようにリサイズされます。コンテナと画像の縦横比が異なれば画像の一部
最近チュートリアルを実現したり，特定の要素をハイライトしたり，用途的に似たようなライブラリがぽこぽこ出てきてどれがいいのか試したのでまとめてみる． Chardin http://heelhook.github.com/chardin.js/ Apache License v2.0 概要 一度に複数の要素に対して，説明を書ける． ステップで実行などはないが，completion handlerで再度実行すればできる． Gmailの新機能で使われたチュートリアル風味． 実現方法はbody直下に黒半透明オーバーレイ要素を重ね，その後ろに説明用のレイヤーを追加する．ハイライトする要素をオーバーレイより大きいz-indexを追加し，上に持ってくる． ハイライトする要素にz-indexがinline styleで付いていると隠れてしまう． 導入方法 css追加
2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね＞＜ とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ
「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト <script src="jquery.min.js" type="text/javascript"></script> <script src="imgLiquid-min.js" type="text/javascript"> 実装 <!-- thumbnail( 300x200 ) --> <div class="div1077" style="width:300px; height:200px;"><img src="画像"></div> <!-- thumbnail( 150x100 ) --> <div class="div1077" style="width:150px; height:100px;"><img src="画像"><
ウェブサイトの更新と運用を複数人で行っている場面では、画像リンクが切れたimgタグを発見することがよくあります。 画像のリンク切れは、訪問者に対してサイトが不完全または不適切に見える原因となり得るため、これを解消する方法が求められます。 そこで今回は、jQueryの.error()メソッドを使用して、画像リンクが切れているimgタグを自動で削除する方法を詳しく解説します。 サンプルCSSの設定 まず、以下のCSSを参考にして、ページの基本的なデザインを設定します。もちろん、この設定は必要に応じてカスタマイズできます。 <style type="text/css" media="all"> <!-- body{ margin:0; padding:0; } h1{ text-align:center; font-size:18px; font-weight:bold; padding:10p
HTML <div class="comment_2"> <div class="comment_name_2"> <p>■■さんのコメント</p> </div> <div class="comment_msg_2"> <p>今日は良い天気ですね！</p> </div> <div class="recomment_2"> <span>返信</sapn> </div> <div class="recomment_wrap_2"> <div class="clearfix"> <input type="text" name="sample" class="sampleinput"> </div> <a href="#" onclick="return false">キャンセル</a> </div> </div> <div class="comment_2"> <div class="comme
時間は貴重ですので、迅速で容易な学習をお届けします。 W3Schoolsでは、アクセス可能な便利なフォーマットで、 学ぶ必要があるすべてのことを勉強できます。 パネルの表示／非表示にはここをクリックしてください 例 jQuery hide() jQuery hide() 関数の簡単なデモです。 jQuery hide() もう1つの hide() デモです。テキストの一部を隠す方法です。 jQuery slideToggle() 簡単なスライドパネル効果のデモです。 jQuery fadeTo() jQuery fadeTo() 関数の簡単なデモです。 jQuery animate() jQuery animate() 関数の簡単なデモです。 jQuery Hide と Show jQueryは、hide() と show() の2つの関数で、（HTML要素を）隠したり表示したり
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザー・インターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。 jQueryでは、標準でもさまざまなエフェクト機能が提供されていますが、jQuery UIはこれらの機能をさらに拡張し、よりリッチな効果を、シンプルなコードで実装できます。機能の拡張は、jQuery標準のメソッドに対して引数を追加する、という形で行われていますので、jQueryを使い慣れた人にとっては、直感的に利用できるのもうれしいポイントです。 本稿で紹介するのは、要素の表示／非表示を制御するshow／hide／toggleメソッド、そして、エ
W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999
twitter facebook hatena google pocket いまさらな気もしますが、パララックスなサイトを簡単に実現するためのjQueryプラグインを紹介します。 sponsors #1 Nikebetterworld Parallax Effect Demo | Ian Lunn 老舗な感じのところですね。 jQuery localscrollとか、jQuery scrollToを駆使しています。 URL：http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/ demo：http://ianlunn.co.uk/plugins/jquery-parallax/ #2 JoelBesada/scrollpath GitHub 見えないパスにそってスクロールしていって気持ちいい感じです。 こんな記述が必
要素をPhotoshopの「ぼかし」バリにぼかすことができるjQueryプラグイン「Vague.js」 2013年06月27日- Vague.js 要素をPhotoshopの「ぼかし」バリにぼかすことができるjQueryプラグイン「Vague.js」。 次のように通常の要素をSVGフィルタを使ってぼんやり、ぼかすことが出来ます。対応するブラウザは限られますが、ブラウザだけで出来るというのがいいですね パラメータでぼかし強度を選べたりもします。 実装サンプルコードです。 近い将来、画像編集ソフトで今やってるようなことは殆どブラウザ上で、スクリプトで動的に実現出来るようになるんでしょうね。 関連エントリ Flipboard風エフェクトをブラウザ上で実現するためのjQueryプラグイン「flip」 jQueryでフリップエフェクトを使った良プラグインやサンプル集１０ エフェクトが色々選べるイメー
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
jQueryとCSS3を使ったアコーディオンメニューを作ってみましたので、作り方を紹介します。かなり長くなりますが、お役に立てばうれしいです。 色々事情があってIEでご覧になっている方のためにスクリーンショットも載せておきます。カテゴリー３にマウスを乗せているところです。 それではコードを解説していきます。 HTML まずはHTMLです。無駄に長いですが一応載せます。 <ul id="accordion"> <li><a href="#">カテゴリー１<span class="arrow rotate"></span></a> <ul id="active"> <li><a href="#">サブカテゴリー１</a></li> <li><a href="#">サブカテゴリー２</a></li> <li><a href="#">サブカテゴリー３</a></li> </ul> </li> <l
SMINT SMINTの使い方 Step 1: 外部ファイル スクリプトを外部ファイルとして記述します。 <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/jquery.smint.js"></script> </head> Step 2: HTML まずは、最上部に配置されるナビゲーションから。 <div class="subMenu" > <div class="inner"> <a href="#" id="sTop" class="subNavBtn">Home</a> <a href="#" id="s1" class="subNavBtn">Section 1</a> <a href="#" id="s2" c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
