[JS]ページネーションをもっと楽しく、使いやすくするスクリプト -jPaginator
カラフルなデザインだけでなく、自動加速のアニメーション、スライダーなど、ユーザビリティを向上する機能を備えたページネーションを設置するjQueryのプラグインを紹介します。 jPaginator デモ [ad#ad-2] 自動加速のアニメーションは、それぞれのデモの左右の矢印をマウスオーバーすると、加速のアニメーションでページの数字が送られます。 スライダー機能はデモ1と3に実装されており、大量のページでも一気に移動できます。 スライダー機能も装備 スクリプトのオプション スクリプトのオプションでは、さまざまなものが設定できます。 selectedPage:1, 現在の選択されたページ nbPages:54, ページの合計数 length:10, スライドによるページの数 widthPx:30, ページ数の幅（px） marginPx:1, ページ数のマージン（px） withSlider
[JS]リストで実装したアイテムにページ機能をつけるスクリプト -Ono List Pager
リスト要素で実装したアイテムをアニメーションでスライドするさまざまなインターフェイスのページ機能付きパネルにするjQueryのプラグインを紹介します。 最もベーシックなデモです。 パネルがアニメーションでスライドし、キーボードの矢印キーの操作にも対応しています。 HTML 各パネルはシンプルなリスト要素で実装されています。 <ul id="list1" class="onoPager_noJs"> <li>This basic pager offers paging per item. It also offers a 'previous' and next 'next' button. it also offers direct links to each page item.</li> <li>...</li> <li>...</li> </ul> JavaScript jQuery(
IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
＞＞ 詳細な使用法と注意点を追加エントリーしました。 いまだ絶大なシェアを誇るIE6（Internet Exproler 6）ですが、WEB制作者ならご存知の通り、さまざまなバグ・不具合を内包しております。 ・CSSでfloatしたブロックのmarginが倍になる。 ・後方互換モードの場合、text-alignが子要素にまで影響する。 ・透過png画像が透過されない。 上記以外にも、それはいくつもの制作者泣かせの問題があり、業界内では「IE6氏ねばいいのに」とまで言われているブラウザですが、前述の通りシェアは絶大なので、対応しないワケにもいかず。 すでにいくつもの対応策が出回っておりますが、その中でも自分的に一番オススメするのが、「DD_belatedPNG.js」を使用する方法です。 有名どころの対応策を併記・比較しながら、どこがオススメなのかを含めてエントリーしたいと思います。 有名な
[戯] target="_blank" を使わないで新しいウィンドウでリンクを開く方法
target="_blank" を使わないで新しいウィンドウでリンクを開く方法 2006-03-14-5: [JavaScript] <a href="foo.html" target="_blank">foo</a> を使えば新しいウィンドウでリンクが開きますが，これは XHTML 1.1 や XHTML Basic では採用されていません． ではどうするかというと，スクリプトを使うわけですが， <a href="javascript:void(0)" onclick="window.open('foo.html');">foo</a> こうすると，一見解決したようですが，JavaScript が off の場合はリンク先に飛べません． しかも，ステータスバーにリンク先が出ないので不安になります．これを <a href="foo.html" onclick="window.open('f
MuRaの山ブログ - アルパインクライミング、沢登りなど山に登るエンジニアが書く登山のブログ。ギアのレビュー。写真も。
2025.3.1 八ヶ岳 河原木場沢 醤油樽の滝でアイスクライミングしてきました。数日前から暖かい日が続いてこの日も春の陽気でしたが、35mの高さのある醤油樽の滝は日陰で氷結は良く快適に登れました。 醤油樽の滝 アイスクライミング 続きを読む →
ウィンドウのアクティブ切替／自動スクロール｜Windowオブジェクト｜JavaScript/DOM｜PHP & JavaScript Room
ウィンドウのアクティブ・非アクティブ切替 常にウィンドウを最前面に表示 ウィンドウを自動スクロール〔scroll()、scrollBy()メソッド〕 なだらかにスクロールしてページの上部に戻る〔scrollTo()メソッド〕 どの位置までスクロールされているか調べる ※FF、NNのみ〔pageXoffset()、pageYoffset()メソッド〕 ウィンドウオブジェクトを格納した変数名.focus() ウィンドウオブジェクトを格納した変数名.blur() ウィンドウオブジェクトを格納した変数名.onfocus()=処理 ウィンドウオブジェクトを格納した変数名.onblur()=処理 <script type="text/javascript"> var win; function windowOpen(){ win=window.open("","win","top=0,width=1
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.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)
[JS]ダイナミックなアニメーションでレイアウトを変更するスクリプト -Isotope
Demo: images IsotopeにはimagesLoadedプラグインも含まれており、画像のロードにコールバック関数を利用できます。 Isotopeの特徴 レイアウト モード： CSSだけではできない、インテリジェントでダイナミックなレイアウトを実現します。 フィルタリング： jQueryのセレクタを使用して、簡単にエレメントのフィルタリングが行えます。 ソート： あらゆるデータからソートが行えます。 各機能の互換性： レイアウトモード、フィルタリング、ソートの各機能は一緒に利用することができます。 最適化： Isotopeのアニメーションエンジンは、表示しているブラウザごとに最適なものを使用します。例えば、CSS3 transitons, transformsなどで、これらに非対応なブラウザ（IEなど）は、JavaScriptでアニメーションを実現します。 Isotopeの実装
[JS]かわいい感じに画像を拡大表示するスクリプト -prettyPhoto
prettyPhotoは、角丸のかわいい感じのフレームやパーツを使用した、画像を拡大表示するLightbox風のスクリプトです。 prettyPhoto 背景色、拡大表示時のフレーム、ローディング時のアニメーション、ボタンなど他のLightbox風スクリプトよりかわいくデザインされています。 prettyPhotoで画像を拡大表示するには、スクリプトを外部ファイルとして、画像箇所に下記のようにrel属性に「prettyOverlay(一枚用)」「prettyOverlay(ギャラリー用)」を記述します。 <textarea name="code" class="html" cols="60" rows="5"> <a href="fullscreen.jpg" rel="prettyOverlay" title="画像の説明"><img src="thumbnails.jpg" alt="
一番簡単な画像置換の方法-imageReplace.js--とあるWEBクリエイターのblog
一番簡単な画像置換の方法-imageReplace.js- 画像置換は設置がややこしく。 デメリット・メリットの切り分けが困難です。 そんなわけで一番簡単な画像置換の方法として、画像置換javascriptライブラリ-imageReplace.js-を作ってみました。 設定は簡単head要素内にimageReplace.jsを読み込むだけ。 <script type="text/javascript" src="./imageReplace.js"></script> あとは、画像置換したい要素にclass属性に『imageReplace』と記述しスペースを空けて『置換する画像名』、『ロールオーバーする画像名』を記述します。 例えばこんな感じに。 <a class="imageReplace ajax_a.gif ajax_b.gif" href="/ajax/">Ajax</a> 『ロー
ページ間で変数を保持したい - OKWAVE
<form action="fB.html" method="get"> とした場合の例ですが、 以下のコードを参考にしてみてください。 ------------------------------------------------------------ fA.html ------------------------------------------------------------ <html> <head> </head> <body> <form action="fB.html" method="get"> <input type="text" name="t" value="textA"></input> <input type="hidden" name="h" value="hiddenA"> <input type="submit"> </form> </body>
タブ切替をサクッと実装 - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 タブ・メニュー作ってみました。使いまわしを考慮してパッケージ化に挑戦。JavaScriptを切っているときは、ページ内リンクとなります。 HTML <ul id="tab"> <li class="present"><a href="#page1">Page_1</a></li> <li><a href="#page2">Page_2</a></li> <li><a href="#page3">Page_3</a></li> <li><a href="#page4">Page_4</a></li> <li><a href="#page5">Page_5</a></li
朝日放送 | オートバックス M-1グランプリ2009
2010年12月26日 10年目にしてラストイヤーとなったM-1最後のグランプリに輝いたのは笑い飯！ 念願の“M-1初優勝”に「やっとやー！！」と絶叫！ 「M-1ラストイヤー」の今大会、まずはカナリア、ジャルジャル、スリムクラブ、銀シャリが笑いを獲り、中でも異彩を放ったのがスリムクラブで、暫定で１位に座る。しかし、直後の笑い飯が雰囲気を一変させた。昨年の伝説となった「鳥人」を彷彿とさせるネタで、スリムクラブを引き離して１位へ。その後、３位が僅差で入れ替わり、上位３組に名を連ねたのが笑い飯、スリムクラブ、ピース。しかし、敗者復活から上がったパンクブーブーは、笑い飯と全くの同点数を獲得し、更に同点の際の順位決定ルール(高得点を獲得した審査員の数が多いほうが上位)で、１位通過を決めた。 島田紳助はこの時点で「現段階ではパンクブーブーがズバ抜けて１番。笑い飯は素晴らしかったけど100点をつけた昨年
Online JavaScript beautifier
End script and style with newline? Support e4x/jsx syntax Use comma-first list style? Detect packers and obfuscators? (unsafe) Preserve inline braces/code blocks? Keep array indentation? Break lines on chained methods? Space before conditional: "if(x)" / "if (x)" Unescape printable chars encoded as \xNN or \uNNNN? Use JSLint-happy formatting tweaks? Indent <head> and <body> sections? Keep indentat
JavaScriptのコード整形＆色付け(貼り付け用)
JavaScriptのコードをフォーマット＆色付けを行い、その内容をHTMLに貼り付けられる形にします。 JsDecoderというソースの整形＆色付けを行ってくれる便利なライブラリを使って実現しています。 JsDecoder - code.gosu.pl →Blogへ戻る 使い方 下記のテキストエリアにJavaScriptのコードを入力し、「Preview」ボタンを押します。 すると、コードを整形したイメージが表示されます。 そのコードをHTML上に貼り付ける場合には、さらにその下のテキストエリアのテキスト内容を使用します。 format color
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Create a new fiddle - JSFiddle
Site Under Maintenance
Site Under Maintenance
document.write の記述内で 改行するケースの見本
フォーカスした際にフォームの内容をクリアする JavaScript - Code-404