タグ

jsに関するke_koのブックマーク (6)

  • [JS]超軽量で設置も簡単な、透過PNGをIE6で表示するスクリプト -Unit PNG Fix | コリス

    Unit Interactiveのエントリーから、透過PNG画像をIE6で表示する、超軽量(2KB)の設置も簡単なスクリプトを紹介します。

    ke_ko
    ke_ko 2010/10/03
  • 縦書きを可能にするjavascriptライブラリ「竹取JS」

    SEO的にも問題の無い縦書きのコンテンツを作りたい。そんな時に便利なのが、今回紹介するjavascriptライブラリ「竹取JS」です。javascriptで指定されたブロックを縦書きに変換してくれます。 HTMLのみで縦書きというのは非常に面倒でしたが、これなら気軽に縦書きコンテンツを作れそうです。 詳しくは以下 上記のように文字だけではなく、リストや、取り消し線、テーブルなど様々なHTMLで創られた基要素を縦書き化してくれますので、従来のサイトの構造を保ったまま縦書きのコンテンツを制作することが可能です。また切り替えボタンやダブルクリックで横書きへ瞬時に切り替わる機能も実装されています。 対応ブラウザはInternetExplorer5.5+ / Firefox3.5+ / Safari3.2+ / Chrome3.0+ / Opera10.5+と幅広いブラウザで利用可能。ライセンスは

    縦書きを可能にするjavascriptライブラリ「竹取JS」
    ke_ko
    ke_ko 2010/07/11
  • 普通のtableタグを1行で動く表にするJSライブラリ (1/5)

    大量の情報を分かりやすく一覧で見せたい。そんなときには、やはり「表(テーブル)」をうまく使いこなしたいもの。罫線やセルの色分け、文字サイズの調整などを調整して見やすくデザインすることはもちろんですが、同時に、ユーザーが求める情報を的確に、分かりやすく表示する仕掛けがあるといいでしょう。 ヤフーが運営する「Yahoo不動産」は、ユーザーの操作によってテーブルを分かりやすく表示するユーザーインターフェイスが参考になるサイトです。単なる見た目の装飾ではなく、実際に使い勝手を向上させるためにAjaxを活用した好例と言えるでしょう。 今回は、このYahoo不動産をお手に、Webサイトのブラッシュアップに取り組みます。 今回のお手サイト:『Yahoo不動産』 ヤフーが運営する不動産総合情報サイト。日全国の売買/賃貸物件の情報が大量に掲載されており、「写真掲載の有無」「部屋の広さ」といったさ

    普通のtableタグを1行で動く表にするJSライブラリ (1/5)
    ke_ko
    ke_ko 2009/06/14
  • コンテンツを折り畳んでくれるjavascript集「10 Transition Effects: The art of Showing/Hiding Content」

    コンテンツを折り畳んでくれるjavascript集「10 Transition Effects: The art of Showing/Hiding Content」 限りあるスペースを有効に使いたい。コンテンツを沢山盛り込みたいけど、文字情報を溢れさせたくないなど、コンテンツを格納したいと言う方におすすめなのが今回紹介する「10 Transition Effects: The art of Showing/Hiding Content」です。 jquery-fade-infade-out 様々なタイプの格納型のjavascriptがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 ■ jQuery CSS Toggle Effect jQueryとCSSで作るアコーディオンメニューです。シンプルなので色々とカスタマイズができそうです。 ■

    コンテンツを折り畳んでくれるjavascript集「10 Transition Effects: The art of Showing/Hiding Content」
    ke_ko
    ke_ko 2009/05/13
  • alphafilter.jsが透過pngのロールオーバーに対応

    alphafilter.jsが透過pngのロールオーバーに対応 IE6用の透過pngライブラリ「alphafilter.js」が透過pngのロールオーバーに対応しました。 透過機能はIE6で画像の拡張子がpngの場合のみですが、ロールオーバーはすべてのブラウザ、jpg、gif、png形式の画像で利用いただけます。 img要素の場合class属性に「btn」と付ければロールオーバーの処理を行います。 <img src="./sample.png" class="btn" alt="" /> sample.pngの場合はsample_on.pngのように拡張子の前に「_on」が付いた画像をロールオーバー時に表示します。 透過機能と合わせて利用する場合は、以下のように指定します。 <img src="./sample.png" class="alphafilter btn" alt="" />

    alphafilter.jsが透過pngのロールオーバーに対応
    ke_ko
    ke_ko 2009/05/12
  • JavaScriptでびゅんびゅんスライド!ページ切換法 (1/5)

    HTMLだけで作ったシンプルなサイトもいいですが、時にはもっと派手なサイトを作りたい、ということ場合もあるでしょう。これまでもこの連載ではさまざまな“小技”を紹介してきましたが、ページ全体を大きく描き換えるには、以前ならFlashが不可欠でした。ところが最近では、JavaScriptHTMLの組み合わせでも、かなりの表現できるようになり、実際にそうしたWebサイトも増えてきています。 今回はそんなサイトの1つ、「Baltijos prodiuserių grupė」にページ全体の切り換えテクニックを学びたいと思います。 今回のお手サイト: 『Baltijos prodiuserių grupė』 リトアニアでイベントの企画・制作を手がける企業のコーポレートサイト。会社概要、業務内容、事例紹介の3つのコンテンツと問い合わせフォームからなるシンプルな構成。フルーツや花など、植物の写真と楽器

    JavaScriptでびゅんびゅんスライド!ページ切換法 (1/5)
    ke_ko
    ke_ko 2009/03/13
    試してみたい。jsでびゅんびゅんしたい
  • 1