Sublime Text から Atom へ乗り換えチャレンジ - Object.create(null)
なぜ JavaScript を書いているときにやたらと React のスニペットが表示されるようになって*1, これが大変迷惑だったためです. destroy を補完するために destroy と入力する必要があるのクソでしょ— susisu (@susisu2413) 2017年2月16日 💢 pic.twitter.com/8bu5h7Lb5W— susisu (@susisu2413) 2017年2月17日 本来は同ファイル内に存在する識別子名を補完してくれるのですが, 謎のスニペットが出るものの欲しいものが出てくれません. 他にも constructor が補完されたと思って適当に確定すると constructor(props){ super(props); } みたいになるなどもあります. あと, こちらは割とどうでも良い理由として Haskell のシンタックスハイライトが
[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js
最近のWebページで人気があるのは、ビジュアルの連続性。 パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで表示される超軽量（1.2KB）スクリプトを紹介します。 モーダルウインドウとサイドバーのデモ コマを落としているので分かりにくいですが、ボタンをクリックするとモーダルウインドウやサイドバーに、アニメーションで変形して表示されます。 cta.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="src/cta.js"></script> </body> Step 2: HTML 一つ目のデモ「タイル状コンテンツ」のHTMLは、こんな感じです。 data
![[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/3b796beb0e3307e8d7086ea2aaa29efd7e12d443/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015042101.png)
Drawer
Flexible drawer menu using jQuery, iScroll and CSS. InstallationStep 1: Link required filesDownloadDrawer v3.2.2jQuery 1.11.3+ Created by jQuery Foundation and other contributors.iScroll Created by Matteo Spinelli.CDN<!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"> <!-- jquery & iScroll --> <script src="https://ajax.google
[JS]サイドバーを左右からスライドさせるごくシンプルなスクリプト -Simple Sidebar
サイドバーを左右どちらからでもアニメーションでスライドさせるシンプルなjQueryのプラグインを紹介します。 デモ：Material Design Simple Sidebarの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/jquery.simplesidebar.js"></script> </head> Step 2: HTML サイドバーにはid/classを付与し、コンテンツ内にボタンを設置します。 //position-relative if this wrapper has no positi
![[JS]サイドバーを左右からスライドさせるごくシンプルなスクリプト -Simple Sidebar](https://cdn-ak-scissors.b.st-hatena.com/image/square/c459cc2f4db5b1da3c75aa960dd4238b0628cb55/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014081901-01.png)
Webページのナビゲーションを自動生成する軽量なjQueryプラグイン・jQuery Tocible
ページの見出しを取得して、サイドにナビゲーションを生成する、というスクリプトのご紹介。jQueryに依存しています。 いわゆる目次のリンクを生成する、というスクリプトです。ドキュメントページなんかに良さそうです。 動作サンプルです。 <script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.tocible.js"></script>コアとプラグインを読み込みます。 $('#foo').tocible({ heading: 'h2', //ナビゲーションに組むエレメント subheading: 'h3', //ナビゲーションに組むエレメント navigation: 'nav', //ナビゲーションを生成する場所 title: ''
「右カラム無視」への対策
Webユーザーは、情報過負荷へ適応するため、重要でなさそう、あるいは広告のように見えるエリアから注意をそらすように自分たちを訓練してきた。しかし、サイドバーは適切にデザインすれば、コンテンツを発見しやすくし、ユーザビリティをうまく向上させることができる。 Fight Against “Right-Rail Blindness” by Hoa Loranger on October 12, 2013 日本語版2013年12月17日公開 残念なことだが、Webサイトクリエイターが右カラム（Webページの右レールとも呼ばれる）を広告の掲載によく使うので、ユーザーはこのエリアをチェックしないように自分たちを訓練してこざるをえなかった。これは右カラムはやめるべきということだろうか。いや、そんなことはない。 ページの右側で消費されるピクセルは利用可能な量のうちの20％程度だが、ピクセルとはコンピュータ
[JS]多階層のナビゲーションを今風にサイドを利用して実装するスクリプト -MultiLevel Push Menu
MultiLevel Push Menuの使い方 アイデアの元となっているのは、こちらのデモ。 MULTI-LEVEL PUSH MENU 実装はより簡単に、オプションも豊富に進化しています。 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="multilevelpushmenu.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.multilevelpushmenu.min.js></script> IE8をサポートする際は、Modernizrを加えます。 <script src="//oss.max
20 jQuery Side Sliding Panel Plugins (show-hide) For Your Website - Designbeep
Nowadays,you can see more and more websites using slide panels or let’s say Hide And Slide panel which is integrated to websites to create menus, collapsible columns, drawers, inspectors panes and more.These panels make your website more flexible and functional.Slide menus are first used in mobile apps and then many developers integrated slide panels to websites.You mostly see a ”list icon” on web
jQueryでサイドメニューに現在のセクション要素を表示する「DisplaySectionプラグイン」
jQueryでサイドメニューに現在のセクション要素を表示する「DisplaySectionプラグイン」を公開します。 ちなみにこのプラグインを使わなくてもBootStrapのScrollSpyというものが用意されていますが、とりあえず自作してみました。 １．サンプル サンプルを用意しました。 サンプル サンプルをスクロールすると、通過するsection要素に対応するサイドメニューの該当項目を反転表示します。 ２．プラグインのダウンロード 下記のリンクからプラグインをダウンロードして、ファイル名を「jquery.displaysection.js」にリネームしてください。 jquery.displaysection_0.0.1.js 以下、設定方法です。 ３．HTML 反転表示させたいサイドメニューを次のように記述します。 <ul> <li><a href="#aaa">AAA</a></l
[JS]スライドさせるだけでなくもう一手間加えて、ぐぐぐっとかっこよくナビを表示するスクリプト -Box Lid Menu
Toybox Box Lid Menuの使い方 Step 1: 外部ファイル 当スタイルシートをhead内に、スクリプトを</body>の上あたりに外部ファイルとして記述します。 <head> ... <link rel='stylesheet' type='text/css' href='css/box-lid.css'> </head> <body> ... ... <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script> <script src='js/jquery.box-lid.min.js'></script> </body> Step 2: HTML 左のナビゲーションとコンテンツをdiv要素などで配置し、並列の構造で実装します。 <div class='box-lid-menu'> <div cl
カード状のドロップダウン
上記はデモをアニメーションgifにしたもので、初期はアイテムがカード状に重なっており、クリックすると中身がするすると表示されます。 最初にぱかっと開くの面白いですね、各アイテムはホバーでハイライトもします。 実際の動きは、下記ページでご覧ください。 CSS3 Card Deck Drop Down HTML 各アイテムはリスト要素でシンプルな実装です。 <div class="card-drop"> <a class='toggle' href="#"> <i class='icon-suitcase'></i> <span class='label-active'>Everyting</span> </a> <ul> <li class='active'><a data-label="Everyting" href="#"><i class='icon-suitcase'></i> Ev
Feedlyでサイドバーを常に表示させるブックマークレット
Feedlyでサイドバーを常に表示させるブックマークレットを作りました。 「サイドバーは常に表示されているよ」という方はこの記事を読み飛ばしてください。 １．はじめに Google Readerのサービス終了に伴い、フィードリーダーをFeedlyに移行しました。 Feedlyの表示（クリックで拡大） デザインや操作感がGoogle Readerと似ているので割と気にいってるのですが、ひとつ不満な点があります。 それは「サイドバーが表示されない場合がある」という点です。 気がついていない方もいるかもしれませんが、ブラウザの幅が1200px以下になると、サイドバーが折りたたまれた状態になります。 大きいディスプレイでブラウザの幅をひろげて表示していればそもそも折りたたまれることはないのですが、解像度がXGAのノートPCあるいは、大きなディスプレイでも1200px以下の幅で閲覧していると折りたた
Firefoxでタブを縦に表示できるアドオン「Tree Style Tab」
Firefoxでタブを縦に表示できるアドオン「Tree Style Tab」を紹介します。 以前、Google Chromeの「Sidewise Tree Style Tabs」を紹介しましたので、それとの比較も踏まえながら解説します。 １．概要 本エントリーで紹介する「Tree Style Tab」は、タブを縦に表示し、名前の通り、タブをツリー化することが可能です。 ２．インストール メニューバーの「ツール」→「アドオン」をクリック。 「Tree Style Tab」で検索。 表示された「ツリー型タブ（Tree Style Tab）」の右側にある「インストール」をクリック。 「今すぐ再起動する」をクリック。 これでタブが縦に表示されます。 「Sidewise Tree Style Tabs」とのもっとも大きな違いは、既存のタブが表示されなくなる点です。 ３．使い方 通常のタブと同じように
Google Chromeでタブを縦に表示できるChrome拡張「Sidewise Tree Style Tabs」
Google Chromeでタブを縦に表示できる「Sidewise Tree Style Tabs」を紹介します。 １．概要 本エントリーで紹介する「Sidewise Tree Style Tabs」は、ブラウザと別ウィンドウでタブを縦に表示し、名前の通りタブのツリー表示などが可能です。 先日の「10個以上ブラウザタブを開いてはいけない理由 : ライフハッカー」を読んで、仕事で調べ物をしているときに10で収めるというのは基本的に困難で、多分40～50タブは当たり前に開いていると思うのでがすが、たくさんのタブを開いていると探すのがちょっと面倒だなと思い、調べたところ、この拡張機能がみつかりました。 タブを横に並べると、タブ数やタブに表示されるタイトルに制限があります。 数年前は開くタブ数もそれほど多くなかったのかもしれませんが、数十～数百のタブを開くのが当たり前になってきた現在、むしろ縦タブ
ページ内スクロールのナビゲーションを実装出来るjQueryプラグイン・scrollNav.js
ページ内スクロールのナビゲーションをサイドカラムに自動で実装する、というスクリプトのご紹介。見出しまでスクロールすると、ナビゲーションの方も連動してくれます。ユーザビリティとしてはなかなか。
[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する
当ブログでも採用しておりますが、ブログなどでもよく見かけるようになった、ある一定量画面をスクロールするとサイドバーなどが固定されるﾔｰﾂ。 手順メモを晒しておきます:) 続きましてheadタグ内ないし外部読み込みスクリプトに以下を記述します。 [js] $(function($) { var tab = $(‘.hoge’), offset = tab.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { tab.addClass(‘fixed’); } else { tab.removeClass(‘fixed’); } }); }); [/js] ↑のスクリプトは.hogeがtopの位置に行ったらfixedというclassを追加、それ以外はclass属性を削除する、と言う命令を
![[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する](https://cdn-ak-scissors.b.st-hatena.com/image/square/ac7ae56c20fc639b9d7e08f7f0da2fec804f6625/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2Fskitched-20121120-005330.jpg)
GoogleモバイルサイトやDisney.comのオフキャンバスっぽいメニュー
Googleのスマートフォンサイトがリニューアルされたというので見てみたら、メインメニューの表示方法が面白い感じになっていたので自分でも作ってみました。 ちなみに、先日レスポンシブウェブデザインに変更したDisney.comも、表示幅が1024px以下だと似たようなメニューの表示方法になります。 作ったものは以下。 オフキャンバスメニュー サンプルなのでHTMLは適当に。 実際にはもっと複雑になるでしょうが、動きを試すためのものなのでこんな感じで。 <div id="nav" class="globalnav"> <a href="#">Navigation</a> </div> <div id="main" class="content"> <div class="switcher"> <button id="toggleMenu">☰</button> </div> Mai
WordPressのサイドメニューを折りたたむ「wp_list_folderプラグイン」バージョンアップ
WordPressのサイドメニューを折りたたむ「wp_list_folderプラグイン」をバージョンアップしました。 １．プラグインの機能 WordPressのサイドメニューで折りたたみができるようにします。 プラグイン適用前（Twenty Tenテーマ） プラグイン適用後の折りたたんだ状態 ２．プラグインの変更点 ページを移動したときに、メニューの折りたたみ状態を保持できない不具合を解消しました。以下解説です。 このプラグインはjQueryの「Listfolderプラグイン」を利用しているのですが、ページを移動したときに折りたたみ状態を保持するために、各メニュータイトルに次のようなid属性の設定が必要です（その値をクッキーに保持します）。 <dt class="sidetitle" id="hoge">Recent Entries</dt> <dd> <ul> <li><a href="
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressのサイドバーリストをjQueryでツリー化する「wp_tree_makerプラグイン」バージョンアップ
http://designaholic.cc/2011/11/web8.html
