[B! jQuery][JavaScript] warriorkingのブックマーク

JavaScript の過去と現在、ガチな JS アプリケーション設計

はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!

warriorking 2015/09/27

リンク

[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height

1-3、4-6でエリアを指定、1-3と4-6が同じ高さに Right Heightの使い方 Step 1: スクリプトの準備当スクリプトを外部ファイルとして記述し、初期化しておきます。スクリプトは、これで完了。 <body> ... コンテンツ ... <script src="js/right-height.js"></script> <script> rightHeight.init(); </script> </body> Step 2: HTML HTMLのポイントは、2つ。 data-right-height 適用するエリアを指定 data-right-height-content 適用する要素を指定 <div class="row" data-right-height> <div class="grid-third" data-right-height-content> 1

warriorking 2015/09/11

リンク

[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ

コンテンツの邪魔にならず操作も快適な画像拡大、スクロールすると一旦ヘッダが隠れるけど上にスクロールすると出現、サーチアイコンをクリックするとにょい～ん伸びて検索ボックスになるなど、ユーザビリティ・アクセシビリティに配慮され、タッチデバイスやレスポンシブ対応にも一役買う優れもののスクリプトを紹介します。

warriorking 2015/08/25

リンク

JavaScript開発者が一度は読むべきStackOverflow - Qiita

10.How do JavaScript closures work? http://stackoverflow.com/questions/111102/how-do-javascript-closures-work JavaScriptのクロージャーについて結構とっつきにくい「クロージャー」に苦労されている人も多いかもしれませんが、サンプルコードが多いので英語わからなくても助かります個人的にはQuestionの「Like the old Albert Einstein said: ... 」というくだりが好きw 9. What does “use strict” do in JavaScript, and what is the reasoning behind it? http://stackoverflow.com/questions/1335851/what-does-use

warriorking 2015/08/20

リンク

[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid

レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。デモのアニメーション minigridの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-it em」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-it em"></div> <div class="grid-it em"></div> <div class="grid-it em"></div

warriorking 2015/08/03

リンク

JavaScriptを中心としたWebアプリ開発の栄枯盛衰まとめ――LiveScriptからAngularJS／React.jsまで

JavaScriptを中心としたWebアプリ開発の栄枯盛衰まとめ――LiveScriptからAngularJS／React.jsまで：15周年記念特別企画＠ITが誕生した2000年頃はJavaScriptが不遇だった時代。そこから現在のような人気のプログラミング言語になるまでには、どのような歴史があったのか。15周年を迎えた＠ITの豊富なWeb開発関連記事とともに振り返る。 2015年6月17日に、JavaScriptの最新標準仕様となる、ECMAScript 6（ES6、ECMAScript 2015）が正式に承認されました（参考）。1997年にECMAScriptのバージョン1がリリースされてから6度目のアップデートとなり、これまでの中で一番大きな変更が加えられたことになります。本稿では、ECMAScript 6が正式に承認されたということもあり、2000年頃の第一次ブラウザー戦争

warriorking 2015/07/16

リンク

React.jsではなくRiot.jsを採用した話、運用中サービス『GAMY』でリニューアル - Qiita

今回、ゲーム攻略コミュニティ『GAMY』というサービスでRiot.jsを採用しました。知る限りでRiot.jsで実装されたサイトの中でも最大規模のサービスだと思います。これまではjQueryとjQueryプラグインを使っていましたが、デザインのリニューアルを機に、全部書き換えることにしました。ドキュメントも兼ねてアウトプットしていきます。 Riot.jsとは Riot.jsは今流行りのReact.jsに似た仕組みを持っている、それで非常に軽量なJavaScriptライブラリーです。最近GitHubのリポジトリが**/muut/riotjsから/riot/riot**にお引っ越しして、これからがより注目なライブラリーです。詳しくはこちら↓ Riot公式 Riot.js 2.0 情報まとめ GitHub 捨てることを前提としたライブラリー選定最初は今ブームの２大フレームワークとなっ

warriorking 2015/06/17

リンク

[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js

オフキャンバスメニューなどで最近よく見かける、アイコンをクリック・タップすると、別のアイコンにアニメーションで変形させる単体のスクリプトを紹介します。実装も非常に簡単で、それぞれのアイコンとアニメーションを指定するだけでOK。「zoomOut」「rubberBank」のアニメーション例 iconate.jsの使い方 Step 1: 外部ファイル当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="iconate.min.css"> </head> <body> ... コンテンツ ... <script type="text/javascript" src="iconate.min.js"> </body> Step 2: HTML アイコンを配置します。デモではFont Awesomeのアイ

warriorking 2015/05/27

リンク

CEK189 🐍 Link Gacor Bandar Situs Slot dan Togel Resmi Terpercaya

Belanja di App banyak untungnya: Banyak Vouchernya Produk Eksklusif di App Rekomendasi Hanya Untukmu Paling Pertama Dapat Promo

warriorking 2015/05/27

リンク

JavaScriptのグラフライブラリを52種類も集めた「JavaScript Graphs」。グラフの種類や依存ライブラリ、価格などで絞り込み可能

JavaScriptのグラフライブラリを52種類も集めた「JavaScript Graphs」。グラフの種類や依存ライブラリ、価格などで絞り込み可能数年前に自作のアプリケーションをJavaScriptで作ったときにグラフ機能を実装しようとして、いくつかのグラフ用のJavaScriptライブラリを探して試したことがありました。JavaScriptライブラリを探すのは、それなりに手間がかかるものでした。もちろん当時からJavaScriptのグラフライブラリの情報をまとめたサイトはいくつかありましたが、最近登場した「JavaScript Graphs」は52種類ものライブラリを集めて、ビジュアルに一覧できるようにしたサイトです。さまざまな条件で絞り込みができる便利な機能も備えており、条件としては折れ線グラフやドーナッツグラフに対応したものなどグラフの種類、無料や有料、非商用のものなどの価格

warriorking 2015/05/26

リンク

データを可視化する為のグラフ描画JavaScriptライブラリをまとめた・「JSGraphs」 - かちびと.net

JSGraphsはデータ可視化の為のJSライブラリをまとめているWebサイトです。左カラムの各項目でライブラリをJquery依存のもの、無償利用可能なもの、SVGを使ったもの等に絞ることが可能です。SSにマウスホバーすれば該当のライブラリのプロジェクトサイト、ダウンロードページ、動作サンプルページへのリンクが表示される、というシンプルなもの。目的から探せて良いですね。 JSGraphs

warriorking 2015/05/23

リンク

[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js

デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Bootstrapのjsファイルかtransition.jsを記述します。 <head> ... <link rel="stylesheet" type="text/css" href="css/zoom.css"> </head> <body> ... コンテンツ ... <script src="https://ajax.google apis.com/ajax/libs/jquery/1.11.0/j

warriorking 2015/05/14

リンク

[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js

デモ：Googleマップ Googleマップもサポート。 Embed.jsの使い方 Step 1: 外部ファイル当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.css"/> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.embed.js"></script> </head> Twitterを埋め込む時には「widgets.js」、コードのシンタックスハイライトには「highlight.min.js」を使用します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.

warriorking 2015/04/15

(JS)これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Em...

リンク

最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ

最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+ sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。

warriorking 2015/04/06

リンク

jQueryはNGと言われた時の便利なメソッド - Qiita

とあるお仕事で、jQueryなどのライブラリー利用不可というものがありました。その際利用した、jQuery的に使える便利なメソッドをメモしておきます。（※ 昔使っていたものを引っ張りだして改善したものなので、どこかで公開されている可能性があります）更新 addClass,removeClassを修正致しました。元記事下記エントリの転載になります。 jQueryがNGな時に備えて、用意しておきたい便利なメソッドイベントリスナ jQueryでいうところの、.on() に該当するものです。 "addEventListener" か "attachEvent" かを判定し、addEventメソッドを定義しています。 var addEvent; if (window.addEventListener) { addEvent = function (target, name, fn) { if

warriorking 2015/03/21

リンク

[JS]かっこいい！ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2

画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できるjQuery/Zeptoのプラグインを紹介します。アニメーションやオーバーレイが数多く用意されており、画像にスタイリッシュなエフェクトを加えることが簡単にできます。 Vegas 2 Vegas -GitHub Vegas 2は以前紹介した1の単なるバージョンアップではなく、大きく進化しました。 ※1との互換性はありません。 Vegas 2のデモ Vegas 2の使い方 Vegas 2のデモデモでは写真画像をブラウザや要素の背景としてフル表示し、スライドショー機能を伴ったコンテンツを楽しめます。 Doc -Animations 表示方法にも多彩なエフェクトが用意されています。 Vegas 2の使い方 Step 1: 外部ファイル当スクリプト・スタイルシートとjQu

warriorking 2015/03/20

リンク

[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js

マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。デモのアニメーション horizonScroll.jsの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery.horizonScroll.js"></script> </head> スマホなどタッチデバイス対応にする場合は、touchSwipe.jsも加えます。 <head> ... <script type="tex

warriorking 2015/03/17

リンク

Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた! -

(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。一体どれを使えばいいのか？何が違うのか？何から調べていいのか迷うことがあります。そこで、現時点で事実上全てとなる、９大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ

warriorking 2015/03/13

リンク

JavaScriptで構築している箇所もHTMLと同等にGoogleにインデックスされつつある - F.Ko-Jiの「一秒後は未来」

久しぶりに Google のウェブマスターツールにある「コンテンツキーワード」でこのブログのキーワードを確認していたら、なぜか2位に「users」というキーワードがあるのを見つけました。試しに Google でサイト内検索してみると、サイドバーに表示している「はてブ数順人気エントリー」の部分が検索結果のスニペットに表示されていました。 ↑ この「471 users」などの記述は、 ↑ サイドバーのこの部分にだけあるもの。「ページに表示してるんだからスニペットに表示されて当然なのでは？」と思われるかもしれませんが、この部分は JavaScript を使って動的に構築している部分なのですよね。具体的には、懐かしの Yahoo! Pipes で出力した JSON データを読み込んで jQuery を使用して動的にリストを構築しています。 http://blog.fkoji.com/onl

warriorking 2015/03/09

リンク

[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js

最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。横からアニメみたいにひゅっとスライドさせたり、ぼい～んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。 animatedModal.js animatedModal.js -GitHub animatedModal.jsのデモ animatedModal.jsの使い方 animatedModal.jsのデモデモでは、3種類のアニメーションを使ったモーダルウインドウを試せます。アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できます。デモページ：Demo 3 In: bounceIn, Out: bounceOut a

warriorking 2015/03/05

リンク

はてなブックマーク

タグ

関連タグで絞り込む (26)

jQueryとJavaScriptに関するwarriorkingのブックマーク (235)

お知らせ

今週のはてなブックマーク数ランキング（2025年8月第1週）

月間はてなブックマーク数ランキング（2025年7月）

今週のはてなブックマーク数ランキング（2025年7月第4週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス