DOMとBOM - hiroki_tkgの日記
【ブラウザ・オブジェクト・モデル ⇒ BOM】 ブラウザ自体をオブジェクトにとれますよ。(ブラウザ自体で色々操作ができますよ) console.log(); 要素の検証のconsole画面で色々教えてくれる。 ・console.log(window.innerHeight); で、windowの高さを表示してくれる ・window.location.href="http://google.com"; でリダイレクトしてくれる。 【Document Object Model ⇒ DOM】 ・console.log(document.width); ウィンドウの横幅を教えてくれる。 ・document.body.bgColor = "red"; ウィンドウの背景色を赤色にしてくれる。 DOMの操作(つまりは、document)はめちゃくちゃたくさんあるらしい。 javascriptから文書内の
CSS 3D Solar System
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
JavaScriptを楽しく学べるRPG CodeCombat
前回、Rubyを楽しく学ぶコンテンツのエントリで紹介したRuby Warriorが楽しいという声を幾つか見かけました。 オンラインでコーディングできるサービスは色々ありますが、デザインや音楽、ゲーム性が優れていて熱中しやすいのでしょう。 残念ながら私は参加できませんでしたが、今月のGinza.rbもRuby Warriorをみんなでやってみるという催しで盛り上がったようです。 RubyWarriorのBGMが中毒性高い。しばらく口ずさんでしまいそう。#ginzarb— Masatoshi Iwasaki (@masa_iwasaki) April 15, 2014 RubyWarriorに集中していてだれもツイートしてない^^; #ginzarb— 高橋 明 (@Talos208) April 15, 2014 今回は同様にゲーム感覚でJavaScriptを学習でき、日本語化もされているC
ツールチップをレスポンシブに修正した - euphoLab
ツールチップ新しくした。 tiptipが死んでたので、Darktooltipに乗り換えました。 と書いたのにDarktooltip、モバイルでの挙動が希望と違ったので改めてレスポンシブ対応のツールチップ、Responsive and Mobile-Friendly Tooltipに変えました。 PCではホバー、モバイル・タブレットではタップがトリガーになってる。端の方だと勝手に吹き出しを寄せてくれて、設置が簡単で軽い。良いですね！ レシポンシブWebデザイン対応のツールチップを実装するjQueryコード - かちびと.net 設置方法 公式サイトにCSSとJavaScriptのコードがあるので、コピペして適当な名前つけて保存します。今回は仮に「tooltip.css」と「tooltip.js」とする。 jQueryなのでjQueryと一緒に<head>内に設置。Tumblrではテーマに使
CSS3からの新しい単位「rem」をIE8でも利用できるようにするスクリプト -REM unit polyfill
当ブログで紹介した「フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック」でこれからのfont-sizeの単位に「rem」を使う方法など、CSS3の新しい単位「rem」は非常に魅力的ですが一つ問題があります。 それは「rem」はIE8をサポートしていないこと。 ここで紹介するのは、その問題を解決するIE8でも「rem」を使えるようにするスクリプトです。使い方はスクリプトを外部ファイトとして記述するだけなので簡単！ REM unit polyfill REM unit polyfill -GitHub CSS3からの新単位「rem」とは REM unit polyfillのデモ REM unit polyfillの使い方 CSS3からの新単位「rem」とは まずは、「rem」のおさらいを簡単に。 サイズの単位には「px」「pt」などの絶対単位、「em」「%」などの相対単位
JavaScriptの関数定義 - Nao Minami's Blog
こんばんは、south37です。 最近はEffective JavaScriptを読んでるのですが、知らなかった事がポロポロ出てくるので、とても勉強になっています。これからはちょいちょい、そーやって勉強した事をまとめていけたらいいなと思います。 って事で、今日は関数定義の話をしたいと思います。 関数宣言と関数式 JavaScriptにおける関数定義には、大きく分けて3つの方法があります。 function文を使う方法(関数宣言) function演算子を使う方法(関数式) Functionコンストラクタを使う方法 1と2が一般的によく使われる方法ですね。 // 方法1 function multi(x, y) { return x * y; } // 方法2 var multi = function(x, y) { return x * y; }; // これも方法2 var multi
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
ブラウザにJavaScript等コンテンツをキャッシュさせない 1行のコード | PLUS1WORLD
このブログに、ライブドアの相互RSSを設置してしばらく経ちました。設置した当初はちょっとしたトラブルがありました。 このブログでの相互RSSの表示はJavaScriptで行っているため、ブラウザなどによっては、JavaScriptがブラウザにキャッシュされてしまい、RSS更新があってもなかなか表示の内容が更新されないという現象が起こっていました。 ブラウザのキャッシュ機能は便利な反面、更新の多いページでは逆に邪魔な存在になります。 サーバ上では更新されているのに、キャッシュが表示されるばかりで更新が反映しないということがあります。 ブラウザ のキャッシュを制御する/no-cache 相手先の更新がすぐに表示されないと相互RSSとは言えないので、解決策を探ったところ、たった1行のHTMLのmetaタグでJavaScriptのキャッシュをさせない設定が出来る事を知りました。 当ブログはAI学習
ContentLoaded.com - A playground of loading resources into a web page
Content Loaded A playground of loading resources into a web page async/defer and DOM construction In this page, you can see visually the behavior of DOM construction according to the presence or absence of the async / defer attribute of the script. View details » Script position and page speed In this page, you can visually verify the relationship between the site speed and the timing of DOM ready
spin.js
Share it! If checked, the option values will be stored in the URL so that you can easily share your settings. Features No images No dependencies Highly configurable Resolution independent Uses CSS keyframe animations Works in all major browsers Includes TypeScript definitions Distributed as a native ECMAScript module MIT License Spin.js dynamically creates spinning activity indicators that can be
- aiwsolutions
$8.00 Original price was: $8.00.$6.00Current price is: $6.00.
そろそろきっちりJavaScript (1) "Firebug"の導入～関数リテラルとは? | マイナビニュース
多彩な演出効果をカンタンに導入できる事で脚光を浴びたprototype.jsの登場を皮切りに、インターネットで公開されているJavaScriptライブラリの数は、この一年で急激に増加した。何かやりたいことがあったときはWebで検索すれば、大抵、どこかにライブラリが転がっている。便利な世の中になったものだ。 一方、Webを通じて提供されるサービスは多様化の一途を辿っている。JavaScriptライブラリは整ってきたが、当然、置くだけでは機能しない。ライブラリのサポートページには簡単なサンプルが載っているものの、サンプルがそのまま適用できるケースはごくわずかだ。しかたなく、他の誰かが似たような事をやっていないかとWeb検索するはめになる。 思えば、これまでJavaScriptを言語としてとらえ、きっちり向き合う機会は少なかったのではないだろうか。 1995年の終わり、Netscape Navi
Powerange - iOS 7 style range slider
About Powerange Powerange is a range slider control, inspired heavily by iOS 7 and the "Power Rangers" TV series. It is easily customizable, both by CSS and JavaScript. With it's many features, including changing color and overall style, switching between horizontal and vertical style, custom min, max and start values, custom step interval, displaying decimal values, displaying icons instead of mi
カジュアルJavaScript AST
今日の概要 実は使われてるJavaScript AST JavaScript AST(Abstract Syntax Tree)とは? JavaScript ASTを使ったツール紹介 使うだけじゃなくて書いてみよう browserify Node.jsで書かれたものをブラウザ向けに変換するツール Node環境で開発 -> browserifyでビルド -> ブラウザで動く JavaScriptのコードを 変換 する ≒ JavaScript ASTを見て変換 する 本体の色々な部分、transform pluginなどでASTを使ってる
HTML5 Clear
Work in Progress. If you get lost, add #debug to url then refresh (which forces using default data) and look at the How to Use list.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptユーティリティライブラリの紹介
AngularJSを使ったらこんなことが出来るよ
GitHub - hootsuite/grid: Drag and drop library for two-dimensional, resizable and responsive lists
http://plus.appgiga.jp/masatolan/2014/03/28/51357/
valeriobarrila.com
