Grid-A-Licious – レスポンシブに対応した、グリッドを敷き詰めるjQueryプラグイン – creamuGrid-A-Liciousは、レスポンシブに対応したグリッドを敷き詰めるjQueryプラグインです。 PC、iPadの縦横、スマートフォンの縦横それぞれのリンクがついており、レスポンシブレイアウトを試すことができます。 Grid-A-Licious
指定した縦幅からはみ出たテキストを...にするjQueryプラグイン - jsdo.it - Share JavaScript, HTML5 and CSS
はい、パクリスペクトです。 height を設定してる要素を指定してやると、オーバーした文字が消えて、文字列の末尾に「...」が表示されます。 文字をJavaScriptでへつっていってるので、元のデータを取得するときは、 $.vEllipsis('#long_text').getOriginalText(); な感じで取得してくだしあ。 ちなみに、これ（下記URL）使ってるんだけど、MITと書いてある割にはコード中にライセンス表記がなくて･･･、こんなときどんな顔すればいいかわからないの。。 http://jqueryboilerplate.com/ ↓紹介記事） http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-development-jqueryboilerplate.html /
Sass(SCSS): :last-childとclassを併用する時のミックスイン - jsdo.it - Share JavaScript, HTML5 and CSS
:last-childと.lastChildを別々のルールセットで出力するためのミックスイン div:last-child, div.lastChild { /* styles */ } こうすると:last-childが使えないブラウザはルールセット全体が無視されるので。対応していないブラウザにだけJSでclass追加する場合などに(?)。 // :last-childと.lastChildを別々のルールセットで出力するためのミックスイン // $support-ie6: false !default; $support-ie7: false !default; $support-ie8: true !default; $default-last-child-class: ".lastChild" !default; @mixin last-child( $selector: "&",
Memo, mobile Safari各パーツサイズ
iOS(iPhone)の各パーツサイズ メモ 【Normal】 Status bar: 20px URL text field: 60px Button bar: 44px 【Keyboard】 キーボードが表示された時 Status bar: 20px URL text field: 60px Form assistant: 44px Keyboard: 216px(Portrait), 162px(Landscape) Button bar: 44px(Portrait), 32px(Landscape) 【Display】 スクリーンサイズ iPhone 4s under 320px x 480px iPhone 5 320px x 568px ・表示可能領域 【Normal】 iPhone 4s under 320px x 356px *hide URL text field 32
Android ListPopupWindow で折り返し表示させる
ListPopupWindow の1行のレイアウトに android.R.layout.simple_list_item_1 を指定すると、TextView に表示する文字列が1行の幅より長い場合に折り返さずに切れてしまいます。 android.R.layout.simple_list_item_1 <?xml version="1.0" encoding="utf-8"?> <!-- Copyright (C) 2006 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of
CSS3を使ったクールなスライダー実装jQueryプラグイン「slideControl.js」:phpspot開発日誌
slideControl.js jQuery Plugin CSS3を使ったクールなスライダー実装jQueryプラグイン「slideControl.js」。 次のような綺麗なスライダーが実装出来ます。CSSでデザインされているので見た目を変更するのも容易で、スライダー自体のカスタマイズも可能。 CSS3非対応ブラウザでもスタイルはちゃんとあたってませんがちゃんと動くみたいです。 マークアップ的にも、<input type="text" value="4.0" class="slideControl" /> のような input type="text" のものを$('.slideControl').slideControl();のように初期化すればスライダー化して便利 関連エントリ 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」 これは新しい円形のスライダーが実装できる「Tin
グリー株式会社 | ニュースリリース | プレスリリース 2012年 | グリー、UnityおよびHTML5に対応したスマートフォンアプリの開発支援ソリューション「LWF」をオープンソースソフトウェアとして
グリー、UnityおよびHTML5に対応したスマートフォンアプリの開発支援ソリューション「LWF」をオープンソースソフトウェアとして公開 グリー株式会社（本社：東京都港区、代表取締役社長：田中良和、以下「グリー」）は、UnityおよびHTML5に対応したスマートフォンアプリの開発支援ソリューション「Lightweight SWF」（以下「LWF」、読み：エル ダブリュー エフ）を、2012年10月18日、オープンソースソフトウェアとして公開しました。 「LWF」は、独自ファイルフォーマットに基づくアニメーションエンジンで、Flashコンテンツから変換したアニメーションデータを、UnityとHTML5で再生できます。グリーは、2012年北米やヨーロッパなどの地域でリリースしたモバイルソーシャルゲーム「Alien Family」や「Animal Days」（※）の開発において「LWF」を採用し
CSS3の可能性を見いだし、且つIE8でもレンダリングされる、使いやすくてかっこいいフォームを実装するチュートリアル
Custom Login Form Styling 下記は各ポイントを意訳したものです。 「使いやすい」フォームをつくるポイント 「使いやすい」と「かっこいい」を両立したフォームの実装 「使いやすい」フォームをつくるポイント ログイン、コメント、コンタクト、フィードバックなど、フォームの入力には多くの時間がかかります。もしフォームが使いにくいものであれば、それはあなたがユーザーを混乱させていると言ってもよいでしょう。 フォームをより使いやすく、ユーザフレンドリーにするポイントがいくつかあります。 ラベル ここで言う「ラベル」はlabel要素のことではなく、フォーム上に表示されるラベルです。ラベルは明確にしておく必要があり、この情報によってユーザーはそこに何を入力するべきか知ることができます。 ラベルにはアイコンなどを使って、ビジュアル的に理解を深めるようにしてもよいでしょう。 フィールド
グリッドレイアウト向けのシンプルで軽量なレシポンシブWebデザイン用CSSフレームワーク・Simple Grid - かちびと.net
シンプルなCSSフレームワーク・ Simple Gridのご紹介。1140px をベースに、レスポンシブWeb デザインにも対応できるグリッド レイアウトなWebサイト向けの フレームワークです。 軽量なフレームワークのご紹介。クロスブラウザに対応しなければシンプルで軽量にする事は可能ですよね・・ シンプルなレスポンシブWebデザイン対応のCSSフレームワークです。PCサイトでは1140pxベースのグリッドレイアウトとなります。 グリッドです。 用意されているCSSは1.73kbと極めて軽量です。IE等にも対応させるにはもう少し必要になりますが、タブレットやモバイル端末のみにこのフレームワークを利用するなら最軽量ですみそうですね。スマフォ⇔PCサイト切り替え形式のWebサイトで使えるかも。 この手のは他にもかなり選択肢があるのでお好みで。ちょっと忙しいので今日は簡単に済まさせて頂きます。
iOS6 にしたら、addEventListener の第２引数にしていしてた、handleEvent メソッド をもつオブジェクトが使えなくなった? - babu_babu_babooのゴミ箱
addEventListener の第２引数には、 オブジェクト型の handleEvent メソッドは使えるけど、 関数型の handleEvent メソッドは、使えない。 iOS6 touchendイベントが拾えない。しかも他でも報告があるのでバグっぽい。 HTML要素に対してクリックイベントでイベントを呼び出すことがこれまでもできなかった。 touchend イベントが起こらず、今のところ touchstart が発生したら強制的にマウスのクリックイベントを発火させている 追記 最小コードだと、touchend を拾えている。なぜ？ だけれども、指を離さなくても拾えてるときがある。なぜ？ 使い物にならない？ 更に追記 touchend イベントを起こすために、まず二本指で触れ、それを時間差で放す。 今はそれぐらいしか対処できない。 <!DOCTYPE html><title></ti
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
Google Chart で Imp と Click のグラフとかをうまいこと書く - tokuhirom's blog
たとえば広告システムがあるとして、Impression 数と Click 数をそれぞれ数字としてもってたとして、普通に Google Chart でグラフを書くと以下のようになります。click 数が imp 数にくらべて非常にちいさいので、このグラフは役にたちません。 が、Google Chart では targetAxisIndex というのがあるので、これをもちいて以下のように指定すれば OK でした。 options = { series: { 1: {targetAxisIndex: 1} } }; あたらしいグラフは以下のようになります。2012-10-16 が Imp のわりにすげー click 数のびててなにこれ!! っていうのがわかります。 以上のグラフは以下のようなコードで描画することができます。 <html> <head> <script type="text/jav
iPodのクリックホイールを再現 - jsdo.it - Share JavaScript, HTML5 and CSS
指でぐりぐり回してスクロールするクリックホイールの動きを再現してみました。 iPhone4Sで動作確認済。 var clickWheel = {}; (function() { // private variables var lastX, lastY, screenElem, offsetTop, offsetLeft, selectedIndex = 0, // private variables(fixed) WHEEL_BODY_RADIUS = 105, LINE_HEIGHT = 26, DISP_LINES = 5, TOUCH_START = "ontouchstart" in window ? 'touchstart' : 'mousedown', TOUCH_MOVE = "ontouchstart" in window ? 'touchmove' : 'mousemo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cmmntr.com