CSSファイルをJSから非同期読込する方法
CSSファイルをクライアントサイドだけで動的なURLつけて非同期読み込みしたい場合、単純に以下のようなコードを書くと同期読み込みになって読み込み完了まで他のファイルの読み込みがブロックされる。 (function () { var href = 'style sheet url'; var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; var head = document.getElementsByTagName('head')[0]; head.appendChild(link); })(); これに関しては以下のように別のiframeを作成して読みこめば非同期で読み込めるので、他のファイルの読み込みをブロックしない。 （iOS, Androidで動作を確認） (fun
CSS3＆jQueryでサイトサムネイルをDock風にするチュートリアル:phpspot開発日誌
Growing Thumbnails Portfolio | Tutorialzine CSS3＆jQueryでサイトサムネイルをDock風にするチュートリアル。 サイトサムネイルにカーソルを合わせるとサムネイルが拡大されるようなパーツを作れます。 なんだ、これまでのDockスクリプトと同じじゃないかと思うかもしれませんが、サイトサムネイルの下にあるトレイっぽいものがCSSでデザインされており、これも同時に拡大されるところがテクってます。 Chromeで試したところ、びよーんと、動きもなめらか スクリプトのDLも可能なのでそのまま利用できます 関連エントリ CSSだけで実現したMac OS X風ドック「CSS Dock (V2)」 Mac OS X風のドックを上下左右どこでも設置できるjQueryプラグイン「Docklr」
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
シンプルだけどデザインがよいドロップダウンメニュー実装チュートリアル:phpspot開発日誌
Simple Drop Down Menu with Jquery and CSS シンプルだけどデザインがよいドロップダウンメニュー実装チュートリアル 未オープン状態の場合はテキストっぽく表示されて、クリックするとホバーされるメニューの実装チュートリアルです。 クリックするとホバーされてメニューが表示されます。 マークアップは以下のようにシンプル。 idを付け替えつつ、show() hide() しているだけなわけで、大層なことはやっていないわけですが、似たようなものを作る際の参考に使えそうでしたのでご紹介 関連エントリ フリーのCSSメニューテンプレートとチュートリアル集 CSSのナビゲーションメニューサンプル５５
[JS]ウェブページのUIエレメントにちょっとだけ便利な機能を加えるスクリプト -minjs
フォーム、テーブル、カレンダーなど、ウェブページで使用するUIエレメントに便利な機能を加えるjQueryのプラグインを紹介します。 minjs - Minimalist JavaScript [ad#ad-2] minjsは現在、3つのモジュールが公開されています。 minform longtable drcal minform HTML5のフォーム周りの便利な機能を非サポートブラウザでも利用できるようにします。 デモ ダウンロード minform -GitHub [ad#ad-2] minformの使い方 minformはスクリプトを外部ファイルとして記述するだけで、下記のフォーム関連の機能が非サポートブラウザでも利用できるようになります。 placeholders 入力欄にヒントのテキストを表示します。 autofocus 入力欄をフォーカスします。 required 必須入力の欄で、
CSS+jQueryで左右別々の背景にする
CSS+jQueryで左右別々の背景にする センターのコンテンツを固定幅にして、その左右の背景を別の画像にしたいときtableを使用すれば簡単ですが、今の時代tableで囲んでしまうのはあれですね。 そこでcss+jQueryでなんとかしてみます。 投稿日2012年01月12日 更新日2012年01月13日 中心で分かれた背景 とりあえず中に配置するコンテンツは考えないで左右で別々の背景画像を設定してみます。 デザインによっては左右でdivを配置する必要があるかもしれませんが、今回は全体を囲うdivと半分だけのdivを配置してみます。 html <div id="wrap"> <div id="left-bg"></div> </div> css html, body, #wrap, #left-bg { height: 100%; } #wrap { background: url(bg
jQueryのCSSセレクタAPIを高速に扱う方法 - KAYAC Engineers' Blog
最近Androidとの抗争が激化しているago（@kyo_ago）です。 jQueryはCSSセレクタを多用する特徴がありますが、jQuery内では実行ブラウザやCSSセレクタの記述によって呼び出されるブラウザAPIが変わり、それによって実行速度にも影響が出ます。 この記事では「セレクタAPIとはなにか」、「CSSセレクタの記述によって呼び出されるセレクタAPIの種類」、「高速なセレクタAPIを使用するための方法」、「高速なセレクタAPIが使われるかどうか確認する方法」などを紹介したいと思います。 （※この記事はJavaScript Advent Calendar 2011 (フレームワークコース) : ATNDの1日目の記事です） セレクタAPIとはなにか セレクタAPIとは「#hoge .huga」のようなCSSセレクタから、DOM上に存在する要素を取得するためのAPIです。 jQue
Simple smart sticky navigation bar with jQuery - Jayhan Loves Design & Japan
It’s been a while since I posted tutorial article. In this post, I will show you how to create a smart sticky navigation bar easily with just few lines of Javascript codes, powered by the mighty jQuery. Smart sticky navigation bar is a bar that sits at its original place above the fold, but when you start scrolling down the long page, it will sticks at the top of the browser window and follows, si
アコーディオン、ロールオーバーなどjQueryでウェブデザインを便利にする機能を一元管理できる「simplelib」 | バニデザノート
現在は、以下のようなプラグインをサポートしているようです。 accordion シンプルなアコーディオンナビゲーション button マウスオーバーやマウスダウンで画像を切り替えたり、選択状態と非選択状態によって画像を切り替える checkAll チェックボックスの一括選択 fixHeight 要素の高さを揃える ie6PngFix Internet Explorer 6でも透過PNGを使えるようにする ie6PositionFixed nternet Explorer 6でもCSSの position:fixed を使えるようにする imgSwap a要素をクリックして、既存のimg要素の画像を切り替える lightBox jQuery lightBoxプラグインを読み込む overlayOthers 指定した要素の子のa要素にマウスオーバーすると他のa要素にcssで背景色や背景画像を指
[JS]多彩なアニメーションが実装できる2.3KBの超軽量スクリプト -jsMorph
Tutorial demos さまざまな基本となるアニメーションのユニット集。 [ad#ad-2] jsMorphの実装 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="js/jsMorph_min.js" type="text/javascript"></script> JavaScript jsMorphの基本書式です。 var myMorph = jsMorph( Object obj, // HTML element, Array of elements or elementCollection that are rendered Object prop, // css properties of end position [Object params], // parameters that influence the motion (dur
[JS]ページ上部にアニメーションでスライド表示するパネルを手軽に実装できるスクリプト -Notification
2秒後に自動で閉じるデモ [ad#ad-2] Notificationの実装 外部ファイル 「jquery.js」と当スクリプト、パネル用のスタイルシートを外部ファイルとして指定します。 <script src="jquery.js"></script> <script src="js/jquery_notification_v.1.js"></script> <link href="css/jquery_notification.css" type="text/css" rel="stylesheet"/> JavaScript showNotification(params); 「params」には「message：表示するメッセージ」「type：パネルのタイプ」を記述します。 showNotification({ message: "This is a sample Success
CSSは分かるけどjQueryは苦手……という人が .attr()と .prop()に親しんでくれるといいなーと思って書きました。 | Ginpen.com
もちろん、そうでない方にも親しんで頂きたいと思います。 最近この記事が話題のようです。 CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました この記事中にjQuery 1.6/1.6.1での .attr()仕様変更がらみの話で、うちの「jQuery1.6のattr()で困ったら、1.6.1にすればいいみたい。」の記事へリンクされていました。 ただこの記事はちょっと中身が細かくて、ぱぱっと理解するのは難しいんじゃないかなあと思って、この記事を書いています。どこまでご理解頂けるかはわかりませんが、あっちの記事よりは読みやすいはず。 今さら感もないではないですが……。(´ω｀) jQuery 1.6/1.6.1で何があったの？ .attr()にまとめていた処理を .attr()と .prop()に分割した そしたら今まで動いていたも
[JS]地味なフォームを簡単にかわいらしいデザインにする -Ideal Forms
画像を一切使用せず、既存のフォームをかわいらしいデザインに変更するjQueryのプラグインを紹介します。 チェックボックスのチェックも画像ではないですよ。 Ideal Forms デモ [ad#ad-2] Ideal Formsのデモ フォームの外観は画像は使用せずスタイルシートでデザインされているので、自分用のカラーに変更することも可能です。 デモでは、3つのスタイルが用意されています。 スタイル：Comix Ideal Formsの主な特徴 フォームに美しい外観を与える軽量（14Kb）のスクリプト。 カスタマイズも簡単で、非常に使いやすいです。 画像は必要なく、スタイルシートでデザインを適用しています。 [ad#ad-2] Ideal Formsの実装 ファイルのアップロード 以下の2つをフォルダごとアップロードします。 css/idealForms js/idealForms.js
CSSのborderをアニメーションさせて目立たせるjQueryプラグイン「animatedBorder」:phpspot開発日誌
CSSのborderをアニメーションさせて目立たせるjQueryプラグイン「animatedBorder」 2011年09月14日- jQuery.animatedBorder.js CSSのborderをアニメーションさせて目立たせるjQueryプラグイン「animatedBorder」 borderというと基本的に固定ですが、このjQueryプラグインを使ってアニメーションさせることが出来るみたいです。 仕組みとしては、背景が透明と白のgifアニメーションを交互に点灯させ、ボーダー自体は固定色という仕組みで動いています。 とあるブロックを目立たせたいなんていう場合に使えそうです。 仕込んだら実装は以下の１行で済みます。 $('div.alpha').animatedBorder(); borderの色やサイズの指定が可能です。 関連エントリ カスタマイズ可能なアニメーションスクロールが
ブラウザサイズに応じてclass名を自動で付け替えてくれるjQueryプラグイン「browserSizr」:phpspot開発日誌
ブラウザサイズに応じてclass名を自動で付け替えてくれるjQueryプラグイン「browserSizr」 2011年08月30日- jQuery browserSizr | jQuery Plugins ブラウザサイズに応じてclass名を自動で付け替えてくれるjQueryプラグイン「browserSizr」。 スマートフォンや色々な解像度のPCがあるご時世ですが、ブラウザのサイズに応じてコンテナのclass名を付け替えてくれるjQueryプラグインのご紹介です。 クラス名が変わることによってデザインをCSSで自由に切り替えることが可能です。 スマートフォンにも対応しているようです。自分で作っちゃっても全く問題なさそうな機能ではありますが、スクリプティングがめんどくさいという方はこれを使っちゃったり参考にしてもよさそう。 1024ピクセル以上の場合(Chromeのデベロッパーツールでみて
今見ている場所が分かりやすいヘッダー固定のjQuery＆CSSテクニック:phpspot開発日誌
Persistent Headers | CSS-Tricks 今見ている場所が分かりやすいヘッダー固定のjQuery＆CSSテクニック。 文書は表などの長さが長くなってくると今どこを見ているかわかりづらいようなケースがありますが、このテクニックを使えば、今読んでいるパートがなんなのかをページの上部に表示することができて分かりやすいです。テーブルヘッダーなんかも上部固定できます 固定したい部分はjqueryのセレクタで指定できるため、利用も簡単です 関連エントリ テキストにグラデーションをかけられるjQueryプラグイン「True Gradient Text」 CSS3のよく使いそうな１０個のテクニックのまとめ 使える.htaccessテクニック１０個
CSSの装飾をJavaScriptで動かしてユーザーを引きつける「Art Text Light」
twitter facebook hatena google pocket jQueryプラグインのArt Text Light jQuery pluginはCSSでかけたテキストの装飾を動かすことができます。 光があたった効果などを演出することが可能です。 sponsors 使用方法 Art Text Light jQuery pluginからファイルをダウンロード。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="arttextlight.js"></script> <script type="text/javascript"> $("document").ready(function(){ $('.class名').artTex
JavaScriptとCSSファイルのHTTPリクエストを最小限にし圧縮・キャッシュする -BoxJSとBoxCSS
ウェブサイトで使用する複数のJavaScriptとCSSファイルのHTTPリクエストを少なくし、圧縮・キャッシュするサービスを紹介します。 [ad#ad-2] 複数のJSファイルをまとめる -BoxJS 複数のCSSファイルをまとめる -BoxCSS 複数のJSファイルをまとめる -BoxJS BoxJSは一つのJSファイル（box.js）を利用し、モジュール式のローディングシステムで複数のJSファイルをロードできます。 BoxJS BoxJSの使い方 最初に、box.js(1.4kb)を外部ファイルとして指定します。 <script src="http://www.boxjs.com/box.js"></script> ロードするJSファイルを指定します。 Box('http://mywebsite.com/scripts/', [ 'plugins/jquery.js', 'plugi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
クールなモーダルダイアログ実装ライブラリ「SimpleModal」:phpspot開発日誌
Loading...
