2012年11月26日のブックマーク (14件)

  • Webサイトツアーを可愛い吹き出しで実装するjQueryプラグイン・Crumble - かちびと.net

    注目させたい箇所に順々に吹き出し を表示させるWebサイトのツアー コンテンツを実装するjQueryのプ ラグイン・Crumbleのご紹介です。 可愛いデザインでこのままでも使え そうです。 ツアーコンテンツを実装するスクリプト。jQueryを使用します。 吹き出しをクリックすると次の吹き出しが表示されます。かわいい。 尚、吹き出しはgrumble.jsが使われていますので同時に読み込む必要があります。 <ol id="foo" style="display:none;"> <li data-target="span">吹き出し その1</li> <li data-target=".foo">吹き出し その2</li> <li data-target="b" data-angle="190" data-options="distance:10">吹き出し その3</li> </ol> 表示

    Webサイトツアーを可愛い吹き出しで実装するjQueryプラグイン・Crumble - かちびと.net
    uragami
    uragami 2012/11/26
  • 【Sass】あえて、Compassに頼らずスプライト。 | バシャログ。

    未だに9月くらいの気がしているhakoishiです。 おかしい...街がクリスマスとか、正月とか、なんか浮き足立った事言ってる。 さて、今回はSassでスプライト対応する時にCompassを使わないサンプルをご紹介。 Compassのスプライト、すっごく便利なんですよね。 けれど、実案件では使えない場合もあるのではないでしょうか。 画像名を決まったものにしたい、とか。 画像の並びをソースと同じ順にしたい、とか。 納品後、お客さまが更新していく案件では少なくなさそうです。 そんなときの為に、@forを使う方法をば。 サンプル サンプル 恐ろしくざっくりしたサンプルですが...。hoverでの画像切り替え有りです。 使っている画像がこちら。 上に8pxの余白を設けています。理由は後ほど。 HTML 画像置換の為、li>a>spanの入れ子にしています。 <ul class="sprite-li

    【Sass】あえて、Compassに頼らずスプライト。 | バシャログ。
    uragami
    uragami 2012/11/26
  • ブラウザ上でRubyプログラムをJavaScriptに変換して実行できる「Opal」:phpspot開発日誌

    Opal: Ruby to Javascript compiler ブラウザ上でRubyプログラムをJavaScriptに変換して実行できる「Opal」 Opalを使えば、ブラウザ上での処理をJavaScriptで書けます。Opal-query なる、jQueryのようなライブラリも存在するようです 処理速度的には当然落ちるので実用的かどうかは分かりませんが、面白いことをする人がいますね。 そういえば、PHPも、昔はPerlで書かれていて、ここまでポピュラーな言語になるとはその当時思われなかったのかもしれない存在なので今後流行る可能性もあるのかも。 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 JavaScriptのコードでPDFを生成できる「jsPDF

    uragami
    uragami 2012/11/26
  • jQuery UIで使えるアイコンの名前を調べるためのチートシート・jQuery UI icon name map - かちびと.net

    jQuery UIで用意されてるアイコン のチートシートです。使用頻度が 高いならチートシートを持ってお くと便利かもしれません。調べる の面倒ですしね。自分のようにたま にしか使わないなら不要ですが。 と言うわけでjQuery UIにプリセットされているアイコンの名前を調べるためのチートシート。PDFで保存するやつです。 カテゴリ分けされてます。jQuery UIの使用頻度が高いならあると便利ではないでしょうか。PDF版もDL出来ます。 ul li.ui-icon-carat-1-ne{ padding: 4px 0; } こんな感じで使います。 class名はgooglecodeでToggle textをクリックすれば確認できるっちゃ出来ますが、手元に置きたいと言う方はチートシートの方が便利かも。 お好みでどうぞ。 jQuery UI icon name map

    jQuery UIで使えるアイコンの名前を調べるためのチートシート・jQuery UI icon name map - かちびと.net
    uragami
    uragami 2012/11/26
  • gruntをインストールする - Windows Vista | jekylog

    ちなみにMacも下記とほとんど相違ないけどハマったんで一応メモってる gruntそのものはtakazudoさんのhamalogで知ってたけどなかなかどういう場面で必要になるか分からなかったので手を付けれなかったけど、実現したい事の解決方法としてマッチしたので参考にさせてもらいながらgruntをインストールしてみた。 node.jsとnpmをインストール ネットの情報ではnpmWindowsで使うには結構手法が違ってたりしてたけど小粋空間さんによると公式のパッケージをインストールすればデフォで入ってるっぽい。 「npm」という、Node.js用のパッケージマネージャも一緒にインストールされており(ネットで調べると以前は別にインストールする必要があったようですが不要)、同じフォルダにある「npm.cmd」が該当します。 ちなみにコマンドプロンプトで

    gruntをインストールする - Windows Vista | jekylog
    uragami
    uragami 2012/11/26
  • textareaのキャレットを細かく制御する関連jQueryプラグインまとめ:phpspot開発日誌

    textareaのキャレットを細かく制御する関連jQueryプラグインまとめ ちょっと調査をする必要があったので調査したのですが、あとで忘れそうなのでブログに書きつつシェアです。 textarea内のカーソル位置に何かテキストを入れたい、今のtextarea内でのカーソル位置を知りたい、といった場合、クロスブラウザの事を考えると結構面倒なのですが、そういう際に使えるjQueryプラグイン集です。 カーソル位置にタグを挿入したりする場合なんかに覚えておくとサクっと実装できて良い感じです。 caretPos http://d.hatena.ne.jp/tubureteru/20110101/p1 textarea内でのカーソル位置を数値で設定したり、カーソルの位置を取得することが可能。 jCaret http://www.examplet.buss.hk/jquery/caret.php te

    uragami
    uragami 2012/11/26
  • TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」:phpspot開発日誌

    bootstrap-wysihtml5 TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」。 HTML5ベースですが、リッチなエディタをBootstrapのテーマで作成することが可能です。 派生物がどんどん出てきて素晴らしい限りですね。 最近最も流行ったオープンソースプロジェクトではないでしょうか。 関連エントリ Twitter BootStrap に追加できる5つのコンポーネントパック「FuelUXTwitter Bootstrapでカッコいいカルーセルを実装するサンプルとチュートリアル Twitter Bootstrap で使えるカラーピッカー&日付ピッカー Twitter Bootstrapじゃなくfacebook Bootstrap?「Fbootstrapp」 Twitter Bootstrapを使ったイメージギャラリーサン

    uragami
    uragami 2012/11/26
  • 長いテキストを「…」で省略するjQueryプラグイン・Smarttruncation - かちびと.net

    長いテキストを省略して表示 する、というjQueryプラグイン 、Smarttruncationのご紹介。 CSSのみでも一応は可能ですけど、 こちらはある程度応用が利くの で覚えておこうかと思います。 この手のライブラリはいくつか見かけましたけど、これは日語でもそのまま利用出来るので一応メモ。 動作サンプル 長いテキストが省略されています。上は語尾を、下は真ん中あたりで省略。なかなか便利なのでは。 CSStext-overflow:ellipsis;で制御できない時に試してみてはいかがでしょう。 コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script> <script src="jquery.smarttrunca

    長いテキストを「…」で省略するjQueryプラグイン・Smarttruncation - かちびと.net
    uragami
    uragami 2012/11/26
  • ページ内スクロールならコレにおまかせ!なjQueryプラグイン「Page Scroller」:phpspot開発日誌

    ページ内スクロールならコレにおまかせ!なjQueryプラグイン「Page Scroller」 2012年02月13日- Page Scroller: A Simple Page Scrolling Plugin ページ内スクロールならコレにおまかせ!なjQueryプラグイン「Page Scroller」。 ページ内を上や下に移動できるだけではなく、ページ内のマークアップを読み込んでナビゲーションを作ってくれた上でスクロールできたりもします jQueryプラグインなので、$('#main').pageScroller(); みたいに呼ぶだけです ページの左サイドにナビゲーションを表示する例 綺麗なスキンがかぶって表示されます 上下矢印のナビゲーションも可能 サイドではなく、ページトップにナビゲーションを設定することも可能 右サイドにも移動可能 なかなか便利で使えそうですね。1ページに沢山の情

    uragami
    uragami 2012/11/26
  • ドラッグ&ドロップによる再配置も可能な、タイル状に要素を配置するjQueryプラグイン・jQuery.Shapeshift - かちびと.net

    要素をタイル状に配置してくれる、というjQueryプラグイン。特に目新しいものでは無いですけど。Pinterestライクなレイアウトを実装出来る、と言ったほうが伝わりやすいかも知れませんね。 Pinterestライクなレイアウトを実装出来て且つ、並べた要素をD&Dで移動、再配列してくれる、というもの。使うシーンは限られそうですけど面白いですね。 ドラッグ&ドロップで配列してる要素を自動で再配置してくれます。上図は画像になっていますが、ボックス要素に対応できるので応用が利きそうです。touch-punchを使ってタッチデバイスに対応させることも出来るようです。 ただ、再配置後の記憶をしないとなのでcookieやlocalStorage等を併用する必要があります。 コード <script type="text/JavaScript" src="http://ajax.googleapis.co

    ドラッグ&ドロップによる再配置も可能な、タイル状に要素を配置するjQueryプラグイン・jQuery.Shapeshift - かちびと.net
    uragami
    uragami 2012/11/26
  • 自慢のWebデザインをもっと広めたい!自薦で登録できるWebデザインギャラリーサイト

    自慢のWebデザインをもっと広めたい!自薦で登録できるWebデザインギャラリーサイトデザインの参考になるのはもちろん、見ているだけで楽しくなるWebデザインのギャラリーサイト。海外のギャラリーサイトでは英語圏以外の国のサイトも多数紹介されていますが、日語サイトを見かけることが少ないですね。そこで今回は自薦・他薦問わずおすすめサイトの申請ができる国内外のギャラリーサイトをいくつか紹介します。 英語サイトでは「Submit」と書いているページから登録できます。もちろん中の人のチェックが入るため、登録したサイトが全て掲載するわけではありません。また、スクリーンショット画像は掲載決定時に中の人が用意するパターンと、登録時にこちらで用意しておくパターンがあります。こちらで用意する場合はサイズやファイル形式の指定があると思うので、注意事項をよくよんで準備しましょう。 海外サイトCSS Winner

    自慢のWebデザインをもっと広めたい!自薦で登録できるWebデザインギャラリーサイト
    uragami
    uragami 2012/11/26
  • WebCamで撮影をHTML5で実現するデモ:phpspot開発日誌

    Camera and Video Control with HTML5 WebCamで撮影をHTML5で実現するデモ。 対応ブラウザであれば、WebCamにアクセスし、その場で顔写真の撮影、なんてことが出来るようになります。 Flashであれば実現出来たこの機能、HTML5でも実現できるんですね。 Flashによるフェイルバックに対応したライブラリなんかがあれば嬉しいですね 関連エントリ ドラッグ&ドロップでファイルをアップできるHTML5のデモ フリーでHTML5ベースのリッチな管理画面テンプレート iPhoneのON/OFFスイッチをHTML5/CSS3の形式でジェネレート これは必見のWEBデザインの近未来。HTML5で構築されたサイト45 PC・スマホ・タブレットで動くクールなHTML5スライドショー実装ができる「Juicebox」 Flash使ってなくてもHTML5でここまでクー

    uragami
    uragami 2012/11/26
  • JavaScript製のショッピングカートシステム・simpleCart(js)

    JSだけで作れるショッピングカート システム・simpleCart(js)のご紹介。 作れる、と書いてますけどまだ触って 無いです。便利そうだったので備忘録 的に記事にして見ます。簡単なもの ならこういうライトなもので済ませ たいですね・・ 時間が無くてデモを少し触っただけなのでセキュリティ面での安全性なんかは未確認です。OSSですが利用前にご自身でチェックして下さい。 JS製のショッピングカート。Mootools、jQuery、またはPrototypeに依存するライブラリです。JS+localStorageで作ってるっぽいです。ライトに使えて良さそうですね。※安全なら チェックアウトはPaypalやGoogleチェックアウトに対応しています。ソースをチラッと見たら”JPY”: { code: “JPY”, ~と言った表記があったので日の通貨の事も一応考慮してくれてるかもしれない。 <s

    JavaScript製のショッピングカートシステム・simpleCart(js)
    uragami
    uragami 2012/11/26
  • Bootstrap向けの汎用的なモーダルボックス実装スクリプト・Bootstrap Modal - かちびと.net

    よさ気だったのでメモ。Twitter Bootstrap向けのモーダルスクリ プト、Bootstrap Modalです。既存 のモーダルクラスの代替、または パッチとして利用出来る、との事 です。 Bootstrap向けのモーダルスクリプトです。レスポンシブ対応でスタックも可能との事です。デモを触って見ましたが結構使い勝手が良さそうでした。 こういうやつ。モーダルボックス内は自由にマークアップできます。Bootstrap用なので勿論レスポンシブにも対応しています。 このようにモーダルを表示したまま、別のモーダルボックスを呼び出すことも出来ます。 汎用性も高そうです。これは覚えておこう・・・時間が作れなかったのでコードやサンプルは割愛しました。貧乏暇無し。 Bootstrap Modal

    Bootstrap向けの汎用的なモーダルボックス実装スクリプト・Bootstrap Modal - かちびと.net
    uragami
    uragami 2012/11/26