jQuery Masonry › Basic Examples
These examples demonstrate the basic effect of jQuery Masonry. $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); itemSelector is specified to rearrange all box elements, including the ones inside another div. <div id="primary" class="wrap"> <div class="box col2">...</div> <div class="box col1">...</div> <div class="box col1">...</div> <div class="box col3">...</div> <div> <div c
ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ
ウィンドウサイズを変えると コンテンツ（記事等）が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト？どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見やすいです。MT使用。 小林聡美.jp Marunouchi.com 丸の内の情報サイト。ハイクオリティです。写真をダイナミックに
Ajax » jQuery plugin » 要素のスクロール | PHP & JavaScript Room
IE6, IE7, FF2, FF3, Safari 3, and Opera 9 on Windows. FF3 and Safari 3 on MacOSX. 画面をスクロールすると、特定の要素も一緒にスクロールさせるjQueryプラグインです。 スクロール可能な範囲を指定したり、一緒にスクロールさせるかどうかの有無も指定することができます。 設置イメージ jQuery Scroll Followの設置サンプルサンプルを見る<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" l
How to Create an App from Scratch | AppMaster
Turning an app idea into a working reality is a more complicated task than most people might believe. However, with the wealth of software resources available on the internet, creating an app out of your idea is manageable. You don't even need to necessarily know how to develop mobile apps to make your application work. You can hire third parties or freelancers as there many places where you can f
29分でできる！ あのサイトの“技”を盗め
「プロが作ったWebサイトのあの“技”をウチのサイトでも（それもタダで）マネしたい！」――。そんな欲求に応えてくれる JavaScriptライブラリ／フレームワークが、ネット上にはたくさん公開されています。この連載では、国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間をかけずに自分のWebサイトをブラッシュアップしていく方法を紹介します。
スクロールしても追従してくるメニュー（jQuery） | 伊藤商店の覚書
web designing（以降、webdes）の09年8月号より、自分でコピペできるようにメモ。 webdesではjQueryの特集が組んであり、これは私も将来使うのではないかと思う項目がたくさんあった。 ちなみに追従するメニューのことを、プロはフローティングメニューというらしい。 さっそくwebdesのコードをさらしてみる。 別途jQueryはダウンロードする必要があるのであしからず。 ヘッダーにcssとjQueryを読み込む [html] <link rel="stylesheet" href="css/main.css" type="text/css" media="all"> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" sr
アップデートしたLightviewが素晴らしい | ユージック
アップデートしたLightviewが素晴らしい 2008年2月20日 様々なメディアファイルをLighboxのように表示できるLightview2.0が非常に素晴らしいのでご紹介したいと思います。 Lightview：www.nickstakenburg.com 扱えるファイル 画像 動画(Quicktime) FLASH(swf) AJAX iframe HTML(inline content) このように非常にシンプルなUIで様々なメディアを扱えます。 準備と使い方 スクリプトファイルをこちらからDLします。 続いてヘッダーにスクリプトを読み込む <link rel="stylesheet" type="text/css" href="css/lightview.css" /> <script type='text/javascript' src='js/prototype.js'><
スクロールアコーディオンメニュー - Sawa's Factory
JSライブラリを使用したメニューや、Lightboxを導入したCGI、自作 JSライブラリなどを配布しています。 スクロール（スライド）するアコーディオンメニューです。 アコーディオンメニューは色々なライブラリが開発されてますが、今回はjQueryプラグインのAccordion Content/Menu Script(ddaccordion)を利用しアコーディオンメニューを作成しました。 特徴 jQueryプラグインのAccordion Content/Menu Script（以下からddaccordionと呼ぶ）は、設定が分かりやすく簡単な上、機能は豊富。HTML&CSSでメニューを幾らでも加工できます。またCookieに開いたカテゴリを保存できる為、別のページに移動してもそのカテゴリのメニューが表示される機能があります。 ブラウザをスクロールするとアコーディオンメニューが移動する為、何
印刷範囲を指定できるjavascript「jPrintArea」 - ホームページ制作メモ - HTML CSS CMSなど -
印刷時にナビゲーションなどのいらない部分を省略したい時CSSを分けるのが面倒な場合。 jPrintAreaは簡単に印刷範囲を指定することができます。 jPrintAreaからjquery.jPrintArea.jsをjQueryからjquery.jsをダウンロードします。 ヘッダー内 <script src="～/jquery.js" type="text/javascript"></script> <script src="～/jquery.jPrintArea.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('.link').click(function(){ $.jPrintArea('印刷対象の要素名') });
MJL ― MITSUE-LINKS JavaScript Library | 制作／開発 | ミツエーリンクス
概要 MJL (MITSUE-LINKS JavaScript Library)は、ミツエーリンクスで標準利用されるJavaScriptライブラリです。 MJLは弊社内における業務効率を改善するために、統一された設計思想、利便性の向上を念頭においた上で設計・開発されました。 MJLは他のJavaScriptライブラリ群とは異なる設計思想により、独特の特徴を持ちながらも他のライブラリと補完しあえるものを目指しました。 MJLはコピーレフトライセンスであるGNU GPLに基づく自由ソフトウェア（フリーソフトウェア）です。弊社は GNU GPLに則り、本ページにてMJLの全ソースコードを公開します。 ライセンス MJLはGNU GPL Version 3（参考邦訳）のもとに提供されます。 詳細はMJL本体ファイル内のライセンス告知をご覧ください。 ダウンロード MJL本体（圧縮版） mjl.js
Ajax » jQuery plugin » 要素のスクロール | PHP & JavaScript Room
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説jquery.scrollable 1.0.1 - Make your HTML elements move HTML要素をスムーズにスクロール jquery.scrollable 1.0.1 スクロールするHTML要素を作成するjQueryプラグイン。 ナビゲーションボタンと前後に移動可能な矢印ボタンが付いています。 要素をクリックしても次の要素へスクロールすることができます。 設置イメージ Garage Door Style Menuの設置サンプルサンプルを見る<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x
Ajax » jQuery plugin » 要素のスライド | PHP & JavaScript Room
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説簡単に画像や要素のスライドを実装できるjQueryプラグイン。 自動再生の有無や、コントロールの指定（First、Previous、Next、Last）などは、パラメータで簡単にカスタマイズできます。 同一ページ内に複数のスライドを配置する場合は、コントロール部分のIDをユニークに指定する必要があります。 Easy Slider 1.5の使用例サンプルを見る<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org
[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス
以前、紹介した「Page Scroller」のバージョンアップ版「Page Scroller ver.3」の紹介です。 追記： 2013年10月26日 ver.3.0.9をリリース jQueryの旧版によるXSSに対応しました。 2011年5月4日 デモおよびダウンロードファイルをjQuery1.6に変更しました。 2011年1月31日 ver.3.0.8をリリース 機能を追加しました。 2010年11月19日 ver.3.0.7をリリース ライセンスを変更しました。 2010年11月17日 デモおよびダウンロードファイルをjQuery1.4.4に変更しました。 2010年9月19日 デモおよびダウンロードファイルをjQuery1.4.2に変更しました。 2009年7月6日 対応ブラウザ（IE8, Fx2.5, Chrome2）を更新しました。 2009年2月23日 ver.3.0.6をリ
![[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
[JS]Page Scrollerと他のjQueryプラグインとの実装サンプル
当サイトで配布している「簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3」と他のjQueryプラグインとの実装サンプルの紹介です。 Smart Floating Banners パネルがスクロールに追随して表示されます。 配布元：Smart Floating Banners Smart Floating Banners ユーザーのスクロール操作、Page Scrollerの挙動のスクロールにパネルが追随します。 パネル上の「Top of Page」は、Page Scrollerの挙動です。 Tips: フロートするパネルは画像など実体がある方がベターです。 サンプルのようにスタイルシートの矩形の場合はwidth, heightなどしっかり指定します。 jQuery Footnotes 脚注を抽出し指定箇所に配置します。相互リンクは自動
アルファ画像を扱うalphafilter.jsライブラリ[to-R]
アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a
![アルファ画像を扱うalphafilter.jsライブラリ[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
あるＳＥのつぶやき: minmax.js - IEでCSSのmax-widthなどを使えるようにするライブラリ
minmax.js(doxdesk.com) FireFoxなどでは、以下のCSSを使えてとても便利です。 min-width ・・・要素の最小幅 max-width ・・・ 要素の最大幅(指定幅までしか広がらない) min-height ・・・ 要素の最小の高さ max-height ・・・ 要素の最大の高さ(指定の高さまでしか広がらない)でも、これはIEでは使えず大変不便です。 上記CSSをIEでも使えるようにするのが、minmax.jsです。 ・サンプル <html> <head> <!-- <script type="text/javascript" src="minmax.js"> </script> --> <style type="text/css"> <!-- .minmax { background-color:#FFCC66; max-width:100px; } -
WebCreativePark
JavaScriptやjQuery、jQuery Mobile、HTML、CSSなどのリファレンスを提供しています web制作に役立つプログラムやサービスを公開しています。 Web Creative Parkが公開しているツールです。 URL短縮プログラム TinyURLのようなURL短縮サービスを構築できるPHPプログラムです。 新着情報CMS PHPで作成された新着情報を表示する簡易CMSです。 Web Creative Parkが開発したWebサービスです。 経度緯度 検索 住所や施設名から経度や緯度を検索できるサービス。 QRコードMaker QRコードを作成できるツールにです。 Amazon リンク Maker Amazon のアソシエイトリンクが簡単に作れるサービスです。 キーコード取得 キーボードを入力するとそのキーコードが表示されます。 data URL スキーム作成 da
JavaScript Library Archive
JavaScript Library Archiveについて JavaScriptライブラリをまとめたサイトです。用途別に探すことができ、配布元、使用方法、ライセンスなどについて解説をしております。 新着JavaScriptライブラリ プログラムのコードに色を付ける「google-code-prettify」 角丸を表現する「jQuery Corners 0.3」 jQueryベースのカラーピッカー 「Farbtastic」 水平方向のアコーディオンメニュー「horizontal accordion」 セレクトボックスをカスタマイズする「Script.aculo.us Select Box」 IE6でhover,active,focus擬似要素を使う為の「csshover」 画像に光沢を与えるjsライブラリ『Glossy.js』 IE6以下をIE7と同じようにするライブラリ『IE7.js』
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Labs180 Studio : 네이버 블로그
wrapScroll JavaScript Library - youmos