jQuery と CSS3 の :target セレクタを使ってスライドショーを作ってみた - higeorange's blog
:target セレクタの便利さを試してみたかったので作ってみた． デモ： jQuery Slideshow with CSS3 :target selector 上下キーでページ切り替え．単純なページ切り替えしか実装していない．文字が追加で表示されるとか横から何か飛び出てくるとかはできない． JavaScript 側ではフラグメント識別子を変更しているだけという手抜き仕様． スライドショーといえば Opera Show が手軽なんだけど，Opera 以外じゃ動かないからね． コード 使い方 HTML <div> <p>page 1</p> </div> <div> <p>page 2</p> </div> <script type="text/javascript"> $("div").slideShow(); //それぞれの div を 1 スライドに <script> 指定した要素に
jQueryまたはcssで画像の先読み（プリロード）を行う｜JavaScriptプログラムメモ｜プログラムメモ
CSS、HTMLのみでプリロードを行う >|| #preloadedImages { width: 0px; height: 0px; display: inline; background-image: url(path/to/image1.png); /* 読ませたいイメージ1 */ background-image: url(path/to/image2.png); /* 読ませたいイメージ2 */ background-image: url(path/to/image3.png); /* 読ませたいイメージ3 */ background-image: url(path/to/image4.png); /* 読ませたいイメージ4 */ } |||| |||| jQuery.preloadImages = function(){ for(var i = 0; i").attr("src
Net-kit.com
Net-kit.com This Page Is Under Construction - Coming Soon! Why am I seeing this 'Under Construction' page? Related Searches: Credit Card Application Online classifieds Top Smart Phones All Inclusive Vacation Packages High Speed Internet Trademark Free Notice Review our Privacy Policy Service Agreement Legal Notice Privacy Policy|Do Not Sell or Share My Personal Information
指定したセレクタ内の文字サイズの拡大/縮小に超便利な「FontScale」:phpspot開発日誌
Plugins | jQuery Plugins 指定したセレクタ内の文字サイズの拡大/縮小に超便利な「FontScale」。 $(element).fontscale('p', 'up', {unit:'px', increment:1}); のように記述するだけで、element 内のフォントサイズが簡単に大きくできます。 upをdownに変えれば縮小させることが出来ます。3番目の引数で、単位と増加量を指定できるので細かな調整が可能。 文字を大きくする、小さくするといった操作を簡単に実装できてしまいます。 拡大・縮小の他にも、リセット機能があるので、大きくしすぎてしまっても安心です。 リセットする場合は、$(element).fontscale("p","reset"); のよう呼び出してあげるだけです。 関連エントリ コンピュータに指定フォントが入ってるかチェックできるjQueryプ
jQuery UI Development & Planning Wiki / jQuery UI CSS Framework
jQuery UI 1.7 and higher are built around a themable CSS framework with semantic naming conventions. The new CSS framework is built to support not only jQuery UI's own plugins, but also custom plugin development. The framework itself is static with comment tokens which can be manipulated by ThemeRoller to generate a customized look and feel. Framework adoption will promote shared markup convention
jQuery+CSSで実装するナビゲーションメニュー総集編
cssやプログラミングcss+jQuery jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Do
フォントサイズ変更機能（Cookie対応）│Web制作の現場から 〜入院、退院、そしてつまはじき〜
最近ではあって当たり前とも言うべきフォントサイズ変更ボタン。 やり方はいろいろあると思いますが、CSSファイルをたくさん用意したりしなくてもできる簡単な方法です。 jQueryとｊQuery.cookie.jsを使用します。 HTMLはjQueryとjQuery.cookie.js、そして外部スクリプトファイルです。 <script type="text/javascript" src="common/js/jquery.js"></script> <script type="text/javascript" src="common/js/jquery.cookie.js"></script> <script type="text/javascript" src="common/js/script.js"></script> 次にscript.jsです。 $(function(){ $('
jQueryとCSSで作るiPhone風ラジオボタン・チェックボックス
2014年8月20日 jQuery いつも使っているラジオボタンやチェックボックスにもっと彩りを！ここではCSSとjQueryを使ってiPhone風のデザインに変える方法を紹介します。使用する画像は一枚のみ。CSSスプライトで表示位置を変えます。サンプルも用意してみたので覗いてみてくださいね！ ↑私が10年以上利用している会計ソフト！ サンプルはこちら。IE7, IE8, FF, Chromeで正常動作 See the Pen Mobile like radio/check buttons by Mana (@manabox) on CodePen. ファイルを準備 必要なファイルを準備します jQuery こんな感じの画像を作る コーディング ファイルを読み込む ヘッダー内にjQueryを読み込ませます。 <script type='text/javascript' src='/samp
jQueryで魅せる動きのテクニック「10 jQuery Transition Effects: Moving Elements with Style」
TOP > WebService > jQueryで魅せる動きのテクニック「10 jQuery Transition Effects: Moving Elements with Style」 先日「最新の使えるjQueryプラグイン集「25 Amazing and Fresh jQuery Plugins」」と言う記事で、最新の機能のjQueryプラグインをまとめたエントリーを紹介致しましたが、今日紹介するのはjQueryで動きが特徴的な魅せる動きを集めたエントリー「10 jQuery Transition Effects: Moving Elements with Style | DevSnippets」を紹介したいと思います。 Fluid Navigation – How to create an informative menu-bar with jQuery & CSS ス
CSSのとjQueryの「:target」の違い
先日ご紹介したjQueryでも一部のブラウザで利用できるようになったCSS3のセレクタ「:target」。jQueryで使うことはまだまだない現状ですが、試しに使ってみました。 ところがCSSで使う時と違い、jQueryで使う場合は一工夫必要かな？なんて思ったので、まとめてみます。 「:target」が適用されるタイミングは？ このセレクタは、ページのURLに「#」以下がついた時に、そのハッシュが示す箇所が選択され適用されるようになります。 しかし、JavaScriptで扱う場合は、適用させるタイミングを考える必要があるようです。 例えば下で紹介するサンプルを見て下さい。 ■サンプルHTML <p><a href="#test1">test1</a></p> <p id="test1">#test1</p> <p><a href="#test2">test2</a></p> <p id="
Toggle Tutorial - jQuery CSS Toggle Effect - javascript toggle tutorial - simple Toggle Effect
I know there are a lot of toggle tutorials out there already, but when I was learning the basics of jQuery and the toggle effect, I had a hard time finding resources on how to switch the “open” and “close” graphic state. After reading a few tutorials and mix and matching techniques I was able to achieve this effect, but wanted to share it with those who experienced the same frustration that I had
15 jQuery Plugins for Creating Dynamic & Responsive Layouts
jQuery Scroll Path jQuery Scroll Path is a plugin that, as its name states, lets you define your own custom scroll path. The plugin uses canvas for drawing paths, using the methods moveTo, lineTo, and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initializing the plugin. Scrolling with Scroll Path can be done with either the mouse wheel, up & down arr
Automatic Image Slider w/ CSS & jQuery | Simple Image Slider Tutorial | jQuery Slider | jQuery Image Rotator
With the release of the iPad and its lack of support for flash, it has stirred up a lot of debates regarding the future of flash. With this in mind, I believe it is wise to build simple widgets like the image slider using HTML/CSS/Javascript, and leave more interactive applications for flash if needed. The html based image slider will have its benefits with SEO and will also degrade gracefully for
サイトのデザイン微調整に。ブラウザ上でCSS修正·Brosho Plugin MOONGIFT
Brosho PluginはJavaScript製jQueryプラグインのオープンソース・ソフトウェア。Webサイトのデザインを調整する時には、ローカルのテキストエディタでCSSを修正し、Webブラウザで再読込するというのが一般的だ。だが切り替えの手間がかかる。 オンラインでデザイン修正 そこでFirefoxであればFirebugを使ってその場でデザインを変更してみて確かめることもできる。だがブラウザが限定される。ブラウザの壁を乗り越え、オンラインでCSSの修正を行えるのがBrosho Pluginだ。 Brosho PluginはjQueryプラグインとして提供されるソフトウェアで、Webサイトを表示すると四角い枠が表示される。そしてWebサイト上のエレメントを選択（赤い枠で囲まれる）し、新しいCSSプロパティを入力するとそれがオンラインで適用されるのだ。 修正したCSSの内容を生成する
Multi Column Layout With CSS and JQuery – Adam Wulf
Until we get native CSS support for multi-column newspaper-style layouts (and draft documents from a year ago don’t give too much hope…), our choices are limited to static column markup, and as has been discussed, there are problems with all of these solutions: Text doesn’t wrap from column to column Images and tables can’t easily span multiple columns But the primary problem with these static col
jQuery＋CSSによるカルーセルパネルの作り方 (1/3)
「カルーセルパネル」は、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。Amazonの「この商品を買った人はこんな商品も買っています」で利用されているので、名前は知らなくてもご存じの方は多いでしょう。カルーセル（Carousel：回転木馬）は、メリーゴーラウンド（merry-go-round）のことで、パネルをスライドしていくと一周して元のスライドに戻ることから「カルーセルパネル」と呼ばれています。今回はjQueryでカルーセルパネルを作成する方法を解説します。 HTML/CSSでカルーセルのベースを作成する 今回作成するカルーセルパネルのHTML／XHTML（以下、HTML）は次のようになっています。カルーセル全体を囲むdiv要素を配置し、id属性に「carouselWrap」を設定します。div要素の内側にはパネルを左方向にスライドさせる「戻る」ボタン用のp
jQuery＋CSSによるカルーセルパネルの作り方 (1/3)
「カルーセルパネル」は、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。Amazonの「この商品を買った人はこんな商品も買っています」で利用されているので、名前は知らなくてもご存じの方は多いでしょう。カルーセル（Carousel：回転木馬）は、メリーゴーラウンド（merry-go-round）のことで、パネルをスライドしていくと一周して元のスライドに戻ることから「カルーセルパネル」と呼ばれています。今回はjQueryでカルーセルパネルを作成する方法を解説します。 HTML/CSSでカルーセルのベースを作成する 今回作成するカルーセルパネルのHTML／XHTML（以下、HTML）は次のようになっています。カルーセル全体を囲むdiv要素を配置し、id属性に「carouselWrap」を設定します。div要素の内側にはパネルを左方向にスライドさせる「戻る」ボタン用のp
Mega Drop Down Menu w/ CSS & jQuery | Dropdown Menu | drop down menus | CSS Menu Tutorial | Drop Down Menu Tutorial
While in the process of redesigning 4wheelparts.com, I decided to explore new methods of working with our huge number of inventory and categories. I did some research and noticed a new trend for ecommerce sites in having what they call “mega drop down menus”. According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites. I decided to experim
12 Ways to Improve CSS Techniques Using jQuery - WPLoaded
CSS is great and when it is combined with powerful JavaScript frameworks like jQuery, you can achieve some really amazing things. Combining these two together will let you enhance the user experience by providing more intuitive and responsive web interface. Here are 15 ways you can use jQuery to improve CSS techniques. 1. Custom Styled Radio Buttons and Checkboxes It is always hard and next to imp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://usejquery.com/posts/8/brosho-design-in-the-browser-jquery-plugin