JavaScriptでプレビュー機能 onKeyup onchange - Qiita
プレビュー機能作成 プレビュー機能とは(名前が正しいかわかりませんが)、Qiitaの投稿時の右側の画面のように、入力すると非同期で表示がされる機能のことです。 ブログ記事を書く際や、マークダウンでの記述の場合はよく使用されますよね！ 今回は基礎ということで簡単なプレビューを作成致します。 完成品 HTML5 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> #sampleForm, #sampleOutput { padding: 150px; width: 25vw; height: 50vh;
賢威のメニューが開かない場合の対処方法 | SEO対策「賢威」専用 素材屋さん
こんにちは、SEO対策「賢威」専用 素材屋さん 中の人、『菊地』です。 今回の記事では、今更ながらではありますが、賢威ユーザー様の中でもハマったことが多いと思われるメニューが開かない場合の対処方法をご紹介したいと思います。（賢威６or7） 対処方法その１：「utility.js」を一か所だけ修正！！ 賢威のグローバルメニューのドロップダウンが動かない スマホのメニューが開かない スムーススクロールが動かない（ページトップなど） SNSボタンが表示されない 上記のような症例が発生している場合、まずはWordpressのアップデートによるJavascriptエラーを疑いましょう！！ WordPress4.5より新しいverにアップデートすると、今までは大丈夫であった書き方がエラーとして扱われる為 Javascriptの処理が止まってしまっていることが原因のようです。 テンプレートファイルの中に
[JS]jQueryのプラグイン33+1選 -2012年2・3月
Camera 表示サイズに合わせて最適なレイアウトを提供するResponsive Design対応のスライドショー。
YouTubeをリピート再生するGreasemonkey (&Bookmarklet) - 地球ウォーカー２
既にあるかもしれないけど作ってみた。 とりあえずdocument.getElementById('movie_player')さえすればYouTube JavaScript Player APIを使えるということがわかった。 機能 ビデオの再生が終わったら勝手にリピート再生する。 右上のボタン(AutoPagerizeのパクリ)でリピート再生のON／OFFを切り替えられる。 Greasemonkey スクリプトをサーバーにおいた。 Youtube Repeat ソースは以下の通り。 // ==UserScript== // @name Youtube Repeat // @description Repeat Youtube playing // @namespace http://d.hatena.ne.jp/hysa/ // @include http://www.youtube.co
スーパーマリオ風ゲームを作るなら。HTML5用2Dスクロールアクションゲームフレームワーク·melonJS MOONGIFT
melonJSはHTML5を使った2Dスクロールアクションゲームを開発するためのJavaScriptフレームワーク。 melonJSはHTML5/JavaScript製のオープンソース・ソフトウェア。登場から何十年もたった今もスーパーマリオブラザーズの人気は高い。キャラクターによる所が大きいが、2Dスクロールのアクションゲームは今も昔も人気があるジャンルなのだ。 ワニが主人公 左右に移動しジャンプをし、アイテムをゲットする。敵を踏みつけたり攻撃したりしてどんどん先に進んでいく。そんな誰でも遊べるシンプルさを持ったアクションゲームを作ってみたいと思ったらmelonJSを使おう。 melonJSは2Dアクションゲームを作るためのゲームフレームワークだ。実際、デモではスーパーマリオ風のゲームが多数登録されている。音も鳴るようになっており、実際にゲームとしての完成度は高い。HTML5を使っており、
IT戦記 - JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念
おそらく、JavaScript を使いこなす肝は setInterval、setTimeout、イベントによる関数の実行を理解することだと思う 例えば 次のコードの結果を考えたとき document.write("hoge\n"); setTimeout(function(){ document.write("fuga\n") }, 1000); document.write("piyo\n");普通に JavaScript を使いこなしてる人なら、hoge → piyo と表示して、 1 秒後に fuga が表示されるな。って思うはずなんです。 でも、 JavaScript を始めたばっかりの人の中には、 hoge と表示したあと 1 秒後に fuga → piyo と表示するな。って思ってる人が非常に多い。(経験的に) 何故か？ たぶん、どのサイトの setTimeout の説明を見て
ノードリスト(HTMLCollectionやNodeList)操作中に注意すべきこと - まなぶろぎーく。
JavaScriptで複数のHTMLElementを取得し、その全てにイベントを設定しようとした場合 意識していないと案外ハマりそうな落とし穴を見つけたのでメモ。 個人的には理由に気づくまで「？？？」だったんですが、よくよく考えると当たり前の事実。。。 サンプルに以下のHTMLを用意してみました 簡単な５つの画像を表示するHTMLがあるとします。 ただし、すべてデフォルトではloading画像が表示され、本来表示する画像ではありません。 <html> <body> <h1>HTMLCollectionとイベント同時処理テスト</h1> <div> <img id="after1" name="replace" src="loading.gif" /> <img id="after2" name="replace" src="loading.gif" /> <img id="after3"
Greasemonkey で 超お手軽に jQuery を使うスニペット [Chrome 対応版]
旧版である、Greasemonkey で 超お手軽に jQuery を使うスニペット は Firefox で使用する分には問題ないのですが、Chrome ではセキュリティ上の都合か、Greasemoneky 上における unsafeWindow が unsafe では無いようで (？) unsafeWindow.jQuery などに Greasemoneky からアクセスすることが出来ません。 そこで、Chrome 対応版のスニペットを用意しました。 ただ、いわば Chrome のセキュリティを回避した書き方になるため、旧版にあった、「該当ページですでに jQuery が読み込まれていればそれを利用」という特徴が失われてしまっています。 逆に言えば、常に自分で指定したバージョンを利用できるので、jQuery の新しい機能を使ったスクリプトを書く場合などは、こちらのほうが優れています。 スク
![Greasemonkey で 超お手軽に jQuery を使うスニペット [Chrome 対応版]](https://cdn-ak-scissors.b.st-hatena.com/image/square/bfce051a419b91ee728044e598f8b651644d8486/height=288;version=1;width=512/https%3A%2F%2Fwww.otchy.net%2Fs%2Fimg%2Fcover%2Fdefault.jpg)
YouTube動画上にテキストを表示するjQueryプラグイン Text on YouTube - ウィザード・コード | WIZARD-CODE
Text on YouTube - YouTube動画上にテキストを表示するjQueryプラグイン Text on YouTubeは、字幕inやニコニコ動画のようにYouTubeの動画上にテキストを表示させるjQueryプラグインです。 現在ベータ版を公開しています。 YouTubeの字幕機能と違うのは、テキスト表示部分をJavaScriptで制御していることと、 YouTubeにアップロードされている動画なら誰のでも利用できるところです（動画自体を加工するわけではないからです）。 また、テキストの表示にjQueryのEffectsクラスを使用しているので、単純なshow/hideメソッドから、 animateメソッドまで幅広くエフェクトを利用できます。 ただし専用エディタがないので、字幕表示のためにはJavaScriptやJSON文法の理解がある程度必要になります。一方で、簡単なコードを
要素の追加 (append) insertBefore
<script type="text/javascript"> <!-- window.onload = function() { if (!document.createElement) return; var ele = document.createElement("div"); // 新規に要素（タグ）を生成 var str = document.createTextNode("あいうえお"); // 生成する要素の値（文字列） ele.appendChild(str); // 生成する要素の作成（要素に値を追加） document.body.appendChild(ele); // このページ (document.body) の最後に生成した要素を追加 } // --> </script> 既存のエレメント（要素）に別の要素を追加する場合は createElement() を使用
SVG Wow!
About This web site provides links to demos shown during the SVG Wow! session at the SVG Open conference. The purpose of the SVG Wow session is to demonstrate features of the SVG format in either pure rendering, interactivity, animation, or integration with other open web technologies e.g HTML and CSS. Some of the demos are also meant to demonstrate advanced, upcoming features. License Unless othe
第2回 Firebugによるデバッグの基本、Console APIとその活用 | gihyo.jp
さて、前回はインストールからFirebugのタブの基本的な部分について紹介をしてきました。今回は、Firebugに実装されているConsole APIの紹介と、Console APIを利用したデバッグ手法について解説していきます。 Firebugで利用できるAPI Firebugには、デバッグに活用できる2つのAPIが実装されています。今回は、その2つあるAPIのうちConsole APIについて解説していきます。 Console API Console APIはFirebugのタブだけでなく、コンテンツ側のJavaScriptから呼び出すことのできるAPIです。デバッグのために便利な関数があらかじめたくさん用意されています。これらの関数を以下に列挙しますので、目を通してください。 console.log(object[, object, ...]) 渡された全てのオブジェクトをconso
jQueryでアンカーポイントまでスクロール。 | Almondlab
jQueryでページ内のアンカーポイントまでスムーズにスクロールするスクリプトです。 スクロールのイージングには「jquery.easing.1.3.js」を利用しています。 サンプルはこちら function scrollToAnchor() { $("a[href*=#]").click(function() { var target = this.hash; var offset = $(target).offset().top; if (offset > $(document).height()-$(window).height()) { offset = $(document).height()-$(window).height(); } $("html, body").animate({scrollTop:offset}, {duration:1000, easing:"eas
Flashみたいなテキストエフェクトが作れるjQueryプラグイン「TextFX」:phpspot開発日誌
JavaScript - TextFX - A jQuery Text Animation Tool - CodeCanyon Flashみたいなテキストエフェクトが作れるjQueryプラグイン「TextFX」 Flashにもこうしたテキストアニメーション作成ツールがあった気がしますが、jQueryでも出来るみたい。 １５のコアとなるアニメーションに加え、１８種類の設定、カスタムイージング、スピードなどカスタマイズ自在です。 デモページ ブラウザで動くエフェクトジェネレーター付きで、自由自在かつ簡単に動きをデザインできます。 注意点として、$5のライセンスウェアのようですが１からつくることを考えれば安いですね IEやSafariなどでも互換性があるみたいです。 関連エントリ プログレスバーをバリバリに自分好みにできるjQueryプラグイン「Extended Progress Bar」 スマ
画像ポップアウト・イメージギャラリー・スライドショー｜jQuery plugin｜Ajax｜PHP & JavaScript Room
Lightweight Circle slideshow〔くるくる回して画像を切り替える円形のイメージギャラリー〕 Smooth Div Scroll〔水平方向に並べた画像をマウス操作でするするスクロール〕 Nivo Slider〔9種類のエフェクトがかけられるイメージスライダー〕 Galleriffic〔画像ギャラリーをリッチかつ高速にレンダリング〕 IMGPREVIEW〔マウスオーバーでリンク先の画像をプレビュー表示〕 jQuery largePhotoBox plugin〔大きな画像対応ポップアップ（マウス移動で画像全体を閲覧可能）〕 PIROBOX〔シンプルかっこいい画像ポップアップ〕 bxGallery〔シンプルな画像ギャラリー〕 A Simple jQuery Slideshow〔シンプルなスライドショー〕 Accessible News Slider〔全件表示や件数に応じて前
h1からh6の見出しを抽出し、ページ内リンク(toc)を自動生成するjavascript｜1bit::memo
5分37秒で読めるよ html, jquery, toc, tree ホーム » その他 » h1からh6の見出しを抽出し、ページ内リンク(toc)を自動生成するjavascript 対外的なドキュメントを作る時に最適なフォーマットって何だろうと考えたとき、htmlが一番無難かな、と思っていました。でも、見出しへのリンクを手動でいちいち作るのは面倒。 そこで、「jQuery 開発者向けメモ – 基本・サンプル」を参考に、h1〜h6の見出しを抽出して、ページ内リンクを自動生成するJSをまとめました。（といっても「jQuery 開発者向けメモ – 基本・サンプル」から余分なコードを削除しただけなのですがｗ） はじめに jQueryを使います。 スタイルはデフォルトのhtmlのままです。デザインを変えたい方は適宜CSSで調整してください。 JavaScript [cc_js]jQuery(fun
グラフィックデザイナーのためのCSSレイアウトメモ : Ajaxライブラリ使用サンプル集「ブロック要素の高さを揃える」
ブロック要素の高さを揃える このページは右図のように「#side」「#main」の２つのボックスを並べて作っている。#sideがメニューのスペース、#mainが本文のスペース。 左右に並べたボックスは、入る内容の量が可変ならば、高さは揃わない。 このページは、本文スペース(#main)のほうがメニューのスペース(#side)より長くなりがち。 しかし、背景を揃えたり、メニュースペースの下部にバナーを入れたい時などに「高さを揃えたい」ということがある。 PHOTOライブラリページなども、天地がバラバラだと見苦しいので揃えたい。 そんな時、「jQuery」と、 北村曉氏による「jquery.flatheights.js」を使って、指定したボックスの高さを簡単に揃えることができる。 この方法は、JavaScriptを<head>部に読み込むだけなので、手間入らずでホント簡単。 ●こちらがサンプル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Create a new fiddle - JSFiddle
CLink Office v2
jquery.summary.js » LandEscape Graphics