Codrops | Useful resources and inspiration for creative minds
Codrops Demos Hub Discover our curated collection of 500+ free animations, interaction concepts, UI designs, web templates & more. Stay in the loop: Get your dose of frontend twice a week 👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox. Zero fluff, all quality, to make y
Cool Social Buttons jQuery Plugin
As much as we hate them, social sharing buttons are necessary to make it easy for visitors to share our content with their friends and professional networks. But as web developers, we have to be weary of the slow down that sharing buttons bring. Every button that you include in your page loads its own set of scripts and stylesheets which make your pages slower to load. This is why today we are rel
Unheap - A tidy Repository of jQuery Plugins & JavaScripts
Another great gem from Zurb. What if you wanted to make a user aware of a piece of content long before their mouse directly hovers over its element? Perhaps it was a piece of content that a user would have never otherwise hovered over (thus rendering all that CSS you styled on the :hover of your class forever invisible to your user). What is a designer/developer to do? Reactive Listener allows us
世界一かんたんに実装できるJQueryカラーピッカー「JSColor」 | SHINGO IRIE
インプットタグをクリックするとカラーピッカーが出てきて、色を選択できる。もちろん直接カラーコードを入れることもできる。 設置方法1.ファイルをダウンロードJSColor公式サイトから、ファイルをダウンロード。 開いてびっくりのシンプル構造。なんと入っているのはこれだけ。 2.設定JQueryファイルを読み込んだ上で、次にjscolor.jsを読み込む。 <script type="text/javascript" src="jscolor.js"></script> そして、適用させたいインプットタグに <input class="color"> のようにクラスを指定する。 これだけで設置が完了してしまう。 [sc name=”engeneer”]
GitHub - defunkt/jquery-pjax: pushState + ajax = pjax
pjax = pushState + ajax pjax is a jQuery plugin that uses ajax and pushState to deliver a fast browsing experience with real permalinks, page titles, and a working back button. pjax works by fetching HTML from your server via ajax and replacing the content of a container element on your page with the loaded HTML. It then updates the current URL in the browser using pushState. This results in faste
jQueryを使って テキストボックスに打ち込んだ文字を リアルタイムで取得する方法
フォームってWebページに動的な仕掛けを作る 一番初歩的なものだと思います。最初にフォームからいろいろと動かせるようになると、その後にいろいろと応用も効いてくると思います。経験上。 フォームから値を取得したり、取得した値を表示したり、選択項目に合わせて 見た目をガラっと変えてみたりするのは jQueryなどのプログラミング初心者だと 結果がすぐに目に見えるので非常に楽しいです。 そこで まずはフォームのなかでも扱いやすい、テキストボックスの値を取得して表示させてみたいと思います。 ただ、そのままテキストの値を取得しても面白くないので、打ち込んだ文字を打ち込んだそばからリアルタイムで取得して表示させてみたいと思います。 2013/07/10追記 プラグイン作りました！ この記事の内容を、サクッと反映させられるプラグインです。 ﾃｷｽﾄﾎﾞｯｸｽに打ち込んだ文字をﾘｱﾙﾀｲﾑで取得できるjQu
.html)
scroll(fn) - jQuery API 1.4.4 日本語リファレンス - StackTrace
解説 マッチした要素のscrollイベントに、イベントハンドラをバインドします。 bind("scroll", fn)のヘルパイベントです。 scrollイベントは、ドキュメントがスクロールした時に発生します。 引数 fn Function: scrollイベントにバインドするイベントハンドラ関数 戻り値 jQuery: jQueryオブジェクト 関連 bind(type, [data], fn) イベントオブジェクト 例 例1:ウィンドウがスクロールされた時に、scrollイベントの発生回数を表示します。 ＊「テスト結果」にあるウィンドウのスクロールバーを動かしてみてください。 var count = 0; $(window).scroll(function(){ $("span").text(++count); });
scroll(fn) - jQuery 日本語リファレンス
各要素のscrollイベントに関数をbindします。 scrollイベントは、文書がスクロールした際に呼び出されます。 jQueryのイベントは、コールバック関数の最初の引数でjQuery.Eventオブジェクトを受け取ることができます。このオブジェクトを使って、規定のイベント動作のキャンセルや、バブリングの抑制などを行います。 <div>Try scrolling the iframe.</div> <p>Paragraph - <span>Scroll happened!</span></p> $("p").clone().appendTo(document.body); $("p").clone().appendTo(document.body); $("p").clone().appendTo(document.body); $(window).scroll(function ()
jQuery custom content scroller – malihu | web design
When upgrading from version 2.x to 3.x it’s important to use version 3 CSS and .png files. Version 3 is backwards compatible but it’s also a huge overhaul. One significant change is that you don’t need to call the update method manually (the script does it automatically). For more info see changelog. Version 2 is still maintained and updated here. Get started Configuration Methods Styling Callback
Tiny Scrollbar: A crossbrowser lightweight Javascript / jQuery scrollbar.
What is it? Tiny Scrollbar is a nice and elegant way to enable the scrolling of content on mobile and desktop devices. Its designed to be a dynamic lightweight utility. Furthermore it gives a User Interface Designer a powerful way of enhancing the Ui (user interface) of a website. It comes in 2 flavours as a vanilla Javascript microlib and as a jQuery plugin. Browser support differs between the jQ
windows
a handy, loosely-coupled jQuery plugin for full-screen scrolling windows project root | -- css | -- | -- main.css (compiled) | -- js | -- | -- jquery.windows.js | -- scss | -- | -- main.scss | -- index.html This is a light bootstrap that sets up: - the basic SASS for sequential full screen windows - a jQuery plugin for managing their positions as the user scrolls The plugin simply opens up a handy
jQuery Sortable
A flexible, opinionated sorting plugin for jQuery View on GitHub Download (v0.9.13) Download minified version (9.7 kb, gzipped ~3.2 kb) So what does it do? Sorts any items in any container Fully supports nested containers Connect lists Callbacks and events (see docs) Pure drag/drop lists Vertical and horizontal sorting Why another sortable plugin? you might ask. Aren't there many others? The answe
Jeditable - Edit In Place Plugin For jQuery
Inplace editing for jQuery. Currently unmaintained. Interested in becoming a web developer? Start with JavaScript Essentials (free) and continue to earn a full Techdegree (free trial). Hi! My name is Jeditable and I am inplace editor plugin for jQuery. With few lines of JavaScript code I allow you to click and edit the content of different html elements. I am based on Dylan Verheul's editable. For
画像スライドショーでjQueryプラグインの基本を学ぶ
画像スライドショーでjQueryプラグインの基本を学ぶ：jQuery×HTML5×CSS3を真面目に勉強（2）（1/4 ページ） はじめに この連載で取り扱っているjQueryはJavaScriptのライブラリエンジンです。 世の中には実にさまざまなプログラミング言語があります。昨今主流となっているものの大半は、オブジェクト指向プログラミング言語と呼ばれているものです。 代表的な例を挙げると、Java、C#、Ruby、Python、Objective-Cといったところでしょう。これらの言語はクラスベースというカテゴリに属しています。クラスベースはアプリケーションにおけるさまざまな機能をクラスと呼ばれる単位でキッチリと分割することで、プログラム全体をキレイに整理整頓できるという特徴を持っています。大規模な開発になるほど、この特徴が威力を発揮するため、先に挙げたプログラミング言語が積極的に採用
実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね＞＜ とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ
jQuery how to find an element based on a data-attribute value?
I've got the following scenario: var el = 'li'; and there are 5 <li>'s on the page each with a data-slide=number attribute (number being 1,2,3,4,5 respectively). I now need to find the currently active slide number which is mapped to var current = $('ul').data(current); and is updated on each slide change. So far my tries have been unsuccessful, trying to construct the selector that would match th
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jquery .css("border-color") does not return anything
http://dan-silver.github.io/ElementTransitions.js/
jQuery Event scroll() Method
jQuery.editable