どうもこんばんは。今回のTipsは【jQuery スライダーの中にスライダーが設置できるプラグイン jQuery slideinslide】です。今回のプラグインは自作です。機会は少ないですが何度かスライダーの中にスライダーを設置したいという場面がありました。これまでは都度スクリプトを書いていたのですが…ちょっと面倒だなぁとプラグイン化しました。この謎なプラグイン…自分用にとっておいてもいいのですが、存在自体忘れる可能性もあるので…備忘録としてメモしておきます。 DEMO & DOWNLOAD 更新情報 ・2013 3/8 水平方向へのスライド機能を追加。詳しくはOptionをご確認ください。上下左右のキーボートにも対応しております。DEMOはこちらから 実装方法 実装は至ってシンプルです。スライドの中にスライドの入るHTMLを用意し、プラグインを読み込みます。 読み込みファイル（jQue
シンプルで良さそうだったので一応備忘録。 Media Queriesライクにブレークポイントに 応じてスタイルを変更できるライブラリです。 非依存型で1KBと、超軽量スクリプトなので 簡単なキャンペーンサイトとかならこれでも いいかもしれないですね。 Media Queriesのようにデバイスを限定しないクロスブラウザ対応で、他のライブラリに依存せず利用出来る、圧縮版は1KBと軽量、というのが特徴です。 サイズに応じてスタイルが変わっています。何してるかというと、非常にシンプルで指定したブレークポイントに合わせて<html>にclassを付加させてるんですね。 サンプルどうぞ。 Sample ※動作確認はresponsivepxが便利です iPhoneだってOK。実機でも確認済みです。 コード <script src="syze.min.js"></script> <script>syze
画像の長い辺に合わせて、フィット Image Scaleの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="jquery.js" type="text/javascript"></script> <script src="image-scale.js" type="text/javascript"></script> </head> Step 2: HTML 大きさを調整したい画像に「class=scale」を加えます。 <div class="image-container"> <img class="scale" src="img/example.jpg"> </div> さらに、画像の位置などを設定する場合はdata属性を加えます。 <div class="image-c
デスクトップやスマフォ・タブレットのレスポンシブ対応で、画像やテキストなどを天地左右の中央に簡単に配置できる超軽量（1KB）のスクリプトを紹介します。 作業は、HTMLに2つ追加するだけです。 Midway.js Midway.jsのデモ Midway.jsの使い方 Midway.jsのデモ 天地左右中央配置は表示サイズを変更しても、変わらずに天地左右中央配置になります。 デモは、ブルーの矩形の中に、ホワイトの要素を天地左右中央配置にしています。 まずは、デスクトップサイズから。 デモページ：IE7モードで表示 Midway.jsの使い方 使い方は簡単で、ステップは2つです。 Step 1: 外部ファイル head内に、スクリプトを外部ファイルとして記述します。 <head> <script src="http://code.jquery.com/jquery-latest.js"></s
HTML Include Script Files <script type='text/javascript' src='jquery.popeasy.js'></script> <script type='text/javascript' src='site.js'></script> Place in body <a class="popeasy" href="#">Click Me <div class="overlay"></div> <div class="modal"> <a href="#" class="closeBtn">Close Me</a> <!-- content here --> </div> CSS .overlay{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index:
We have been working since 2009. We started with two people: a designer and a programmer. Today the company employs almost 20 people who are divided into four teams. Everyone is a master of his craft. There are open vacancies. We use all our experience, knowledge and skills to help you properly implement your plans to make the site a convenient tool - in this we see our mission. In tandem with the
Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images. With the responsive awakening in web design it becomes important to not only take care of the visual part of a website but also of the functionality. Elastislide is a responsive jQuery image carousel
RoyalSlider is an image gallery and content slider plugin. Script is available as jQuery and as WordPress plugin. Every slider template is responsive and touch friendly. Take a look at it in your mobile device or try to resize your browser to see the effect. Plugin is used on sites of popular brands — Diesel, Peugeot, Audi, Twitch, Ralph Lauren, organizations like NYC.gov and Oxford.. List of real
jQuery UI Keyboard Widget
This blog contains my random dabbling in site design and improvement. Please feel free to browse and use anything on this site. All I ask is you give me some feedback or even advice on how to improve or change anything. If you need support, please contact me here: I found this widget by Jeremy Satterfield which adds an virtual keyboard to any input or text area. I really liked it and had a lot of
Rondell - Display images and other content in a nice way Version 1.1.0 - Created by Sebastian Helzle AboutThis is a jQuery plugin for displaying galeries and other content the way you want. Checkout the different presets in the upper menu! Especially the Gallery and Thumbnails preset. The rondell demos can be controlled with your keyboard, by clicking the controls or by clicking the rondell items.
Jan 22, 2013 ScrollUp is a lightweight jQuery plugin to create a customisable "Scroll to top" feature that will work with any website, with ease. Recently whilst working on a client project I was required to implement a “Scroll to top” feature to make it easy for the user to get back to the top of the page. I decided to take this further and turn it into a fully customisable jQuery plugin to work
Toolbar allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customisable using Font Awesome icons and provides flexibility around the toolbars display and number of icons. A big thanks to the Drunken Parrot UI Kit by Hoarrd for inspiration. Download You can show your appreciation for Toolbar.js and support future development by donati
Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけた理由は、下記の4つだそうです。 ページ上のあらゆる要素にCSSで影響を与えないこと スクロールバーがオリジナルのデザインに影響を与えないこと スクロールバーのデザインは完全にカスタマイズ可能であること コンテンツの大きさが変化したら、スクロールバーの大きさと位置がそれに合わせて変化すること Perfect Scrollbarのデモ デモではあずにゃんの画像をホバーすると、スクロールバーが表示されます。 デモ：領域を拡大 バーの長さが変化していることに注目してください！ Perfect Scrollbarの使い方 Step
A jQuery plugin that allows you to display list items in a similar way like a iPhone home screen. If item count exceeds the displayed items on one screen, users can swipe through screens. Authors Jānis Zaržeckis (natrixnatrix89.net) Contact Jānis Zaržeckis (natrixnatrix89@natrixnatrix89.net) Download You can download this project in either zip or tar formats. You can also clone the project with Gi
Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of “focus” effect that drwas the attention to the currently hovered item. Today we want to show you how to create a simple blur effect for text-based item
This site is a static archive of the old jQuery Plugin Registry. New plugin releases will not be processed. The jQuery Plugin Registry is preserved for historical purposes. Search is still supported. We do not recommend using any versions of plugins from this registry. Please find jQuery plugins on npm.
NETEYE Activity Indicator A jQuery plugin that renders a translucent activity indicator (spinner) using SVG or VML. Features Lightweight script No images required No external CSS Resolution independent Alpha transparency Highly configurable appearance Works in all major browsers Uses feature detection Degrades gracefully Supported Browsers The plugin has been successfully tested in the following b
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
