タグ

Web制作とライブラリに関するwebbingstudioのブックマーク (5)

  • 竹取 JS

    画面をダブルクリックで縦書きと横書きを切り替えることができます。要素を指定して縦書きにしている場合は、次回アクセス時に同じ表示が引き継がれます。 どんなサイトでも縦書きにするブックマークレット。 ↓右クリックで「お気に入り」に保存するか、リンクをドラッグしてブックマークバーにドロップします。 「縦書きにする・iPhone 用リンク」 「縦書き可能にする・iPhone 用リンク」 「段組み縦書き可能にする・iPhone 用リンク」 iPhone に登録するには? とりあえずこのページを共有ボタンからブックマーク。 iPhone 用リンク を長押ししてコピー。 ブックマークを開いて、追加したブックマークを「編集」。 名前を「縦書き可能にする」などに変更し、URL 欄に上記コードをペースト。 最初の「http://」を削除。 注意! やや動作が重いです! うまく変換できなかったときは、画面をダブ

    webbingstudio
    webbingstudio 2013/08/19
    横書きのHTMLを縦書きに変換するライブラリ。ダブルクリックで元に戻したりできる
  • Pull Out Content Panel with jQuery | Codrops

    In this tutorial we will create a content panel that slides out at a predefined scroll position. It will reveal a teaser with related content and it can be expanded […] In this tutorial we will create a content panel that slides out at a predefined scroll position. It will reveal a teaser with related content and it can be expanded to full page size to show more. A custom slider allows to scroll t

    Pull Out Content Panel with jQuery | Codrops
    webbingstudio
    webbingstudio 2011/09/23
    ネタ帳さんが使っている、フッターまでスクロールすると右からパネルが出てくるスクリプトのチュートリアル。Zenbackを使っていると競合してしまいそうだ
  • jQuery UI Tabsを使ってタブを実装する

    jQuery UI Tabsを使ってタブを実装する方法を紹介します。 当は4月1日は毎年エイプリルフールネタをエントリーしているのですが、今年は自粛します。 1.サンプル 以下に簡単なサンプルを用意しましたのでご覧ください。 サンプル 2.jQuery UI Tabsのダウンロード jQuery UIのページの「Download」をクリック。 「Toggle All」をクリックして、すべてのチェックを外します。 「Widgets」の「Tabs」をチェック。 ページ下にある「design a custom theme」をクリック。 「Theme Roller」でテーマを選択します。「Roll Your Own」タブではすべてを自分でカスタマイズできますが、最初は「Gallery」タブから決まったデザインを選択して、jQuery UIとテーマの対応の感触をつかんだ方がいいでしょう。 ここでは

    jQuery UI Tabsを使ってタブを実装する
    webbingstudio
    webbingstudio 2011/04/22
    タブ切り替えの実装はjQuery UI Tabsが無難。タブとコンテンツの両方をdivで包括する必要があることに注意。フォーカス時の点線はa要素にoutline:noneで出なくなる
  • ThickBox 3.1

    ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal. Features: ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it's 58k. The ThickBox JavaScript code and C

    webbingstudio
    webbingstudio 2009/04/23
    Lightbox派生のポップアップライブラリ。HTMLの表示、ログインページ等のAjaxを含む表示が可能。リンクに長いクエリが入ってしまうのがちょっと気になる
  • アルファ画像を扱う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]
    webbingstudio
    webbingstudio 2008/12/07
    PNG画像透過。iepngfixだとうまくいかなかったのでこっちを試してみる
  • 1