テキストエリアの現在のカーソル(キャレット)位置に文字を挿入するには - 2009-07-27 - エンジニアきまぐれTips
jQuery とかで簡単にできるんじゃないかと検索してたら以下のページがヒットした。 http://stackoverflow.com/questions/946534/insert-text-into-textarea-with-jquery http://d.hatena.ne.jp/project_the_tower2/20071228/1198785069 試行錯誤して、以下のサンプルができた。(IE8 と FF3 で確認) <form> <textarea id="area"></textarea> <input type="button" id="insert" value="挿入"> </form> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/jav
Redactor WYSIWYG html editor
Ultra-modern, AI-powered editor with powerful API capabilities, a wide range of settings, good documentation and tons of integration examples. <h1>Exploring the Infinite 🙂</h1> <p>Space, the final frontier, stretches infinitely beyond the confines of Earth, a vast expanse of darkness speckled with stars, planets, and <b>galaxies</b>. It is a place of profound mystery and beauty, where the laws of
jquery.balloon.js Demo page
jquery.balloon.js Demos A jQuery plugin to add balloon tips to elements User-friendly, fine-tunable and without css and images Getting started (1) Download and load this plugin javascript file after jQuery. <script type="text/javascript" src="js/jquery.balloon.js"></script> (2) Call $().balloon(options) in document ready event of jQuery. $(function() { $('selectors').balloon(options); }); Distinct
jQuery 1.9 日本語リファレンス | js STUDIO
このサイトについて jQueryの日本語リファレンスです。 jQueryの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 News 2013.03.13 ver1.9の内容に更新しました。 2012.12.02 jQueryの似ているAPIまとめ 2012.10.13 サイトをオープンしました。 API APIのカテゴリー分けについては、本家サイトでは1つのAPIが複数のカテゴリーに所属していますが、 このリファレンスでは分かりやすさを重視して1つのカテゴリーに絞っています。 また、一部本家サイトのカテゴリーを削り、別のカテゴリーに所属させているAPIがありますので、 予めご了承ください。 Ajax Ajaxに関する処理 Attri
jQuery Animated Pageswitch Plugin
jQuery Pageswitch Plugin This lightweight and easy to use jQuery Pageswitch Plugin allows you to easily add site-animations to your navigation. Example Try this links to test jQuery Pageswitch Plugin: HTML <div id="example"> <a href="index.html">Example #1</a><br /> <a href="http://www.example.com">Example #2</a><br /> </div> JavaScript <script type="text/javascript"> $(document).ready(function()
gvChart plugin – jQuery with Google Charts | Janusz Kamieński
gvChart is a plugin for jQuery, that uses Google Charts to create interactive visualization by using data from the HTML table tag. It is easy in use and additionally it allows you to create five types of the charts. Check out demo Download plugin Some time ago I tried to find some JavaScript libraries, which would easily create nice charts. I have found two: jQuery Visualise and Google Charts. Fir
tableの内容を簡単にグラフ化するjQueryプラグイン「gvChart」
tableで表組みにしたものをグラフ化するのは面倒な作業だったりします。 そこでjQueryプラグイン「gvChart」で簡単にグラフ化しましょう。 通常通りtableを記載し、JavaScriptを記述すれば完成です。 使用方法 gvChartからファイルをダウンロードします。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery.gvChart.js"></script> <script type="text/javascript"> gvChartInit(); $(doc
jQuery UI Bootstrap
A preview of the jQuery UI Bootstrap themejQuery UI Bootstrap A Bootstrap-themed kickstart for jQuery UI widgets (v0.1) Welcome! This is a live preview of new the jQuery UI Bootstrap theme - a project I started to bring the beauty of Twitter's Bootstrap to jQuery UI widgets. With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
jQueryでメニューのアンダーラインがアニメーションするギミックを作る
メニュー下のラインがマウスを追いかけるようにアニメーションするギミックをjQueryで実現する方法の紹介です。紹介するコードは、Snipplrで見つけたコードに少しアレンジを加えています。 メニューとかで、マウスオーバーすると下の線（アンダーライン）が付いてくる↓のような動きになります。 作り方 HTML メニューの部分を以下のように記述します。アニメーションするバーの部分は、<span></span>タグが担当しています。そして、現在のページには、currentのクラスを設定しています。 <div id="nav"> <a href="#">ホーム</a> <a href="#" class="current">お問い合わせ</a> <a href="#">サービス</a> <a href="#">ギャラリー</a> <a href="#">ブログ</a> <span></span> <
ちょっとしたブラウザ拡張を作るのに便利！jQueryでブラウザ拡張が作れるcrossrider
crossriderは、jQuery（JavaScript）で各種プラウザに対応した↓のような、ブラウザの拡張を作ることができるオンラインサービスです。 ブラウザの拡張を本気で作るというよりは、何か自分用にちょっとした拡張を作りたい時とかに向いているかもしれません。 現在のところベータ版稼動中で、以下ブラウザのみ対応となっています。その他のブラウザ（Safari）については、今後対応していくようです。 Firefox 3.5+ Chrome Internet Explorer 7+ ユーザーインターフェースが英語なので、とっつきにくいですが、実際の動きの部分をJavaScriptで書くだけで、各ブラウザ用のパッケージができるので、自分用に使う様な「ちょっとした拡張」を作るのに便利なサービスだと思います。 どんなものが作れるか デモアプリのページでは、crossriderで作られた拡張を実際
[JS]jQueryのプラグイン100選 -2011年総集編
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
スマートフォン向けフレームワーク注目の「jQuery Mobile」でスマホサイトを作ってみよう【基本編】 | HTML5でサイトをつくろう
jQuery Mobileってなに？ jQuery Mobileは、javascriptのフレームワークです。スマートフォン向けの直観的で使いやすいUIを瞬時に作成できます。 JavaScriptをWebデザイナーでも扱える身近な存在に変えた「jQuery」。そのjQueryと同じ開発元からリリースされていることもあって、スマートフォン向けフレームワークとして注目のjQuery Mobile、文法はjQueryとまったく同じですのでためしにサンプルを作ってみました。 jQuery Mobileは、解像度の違いなど、デバイスの特性の違いも吸収してくれるというのが最大の強みになっていて、ほとんど全ての機種に対応しています。そのため制作者は悩み所だったデバイスの違いを気にすることなく、スマートフォンサイトを作成できてしまいます！iOSやAndroidなどのWebKitベースのスマートフォンだけで
リリースされたばかりのjQuery 1.7.1に対応したチートシート
先月、リリースされたばかりのjQuery 1.7.1に対応したチートシートを紹介します。 即ダウンロード、即保存ものですね。 jQuery 1.7 Visual Cheat Sheet [ad#ad-2] jQuery 1.7.1は1.7のバグフィックス版で、リリース情報は下記をご覧ください。 jQuery 1.7.1 Released jQuery 1.7 Released jQuery 1.7のAPIで大きく変わったのは、.on(), .off()が追加されたことです。これは既存の.bind(), .unbind()に代わるもので、他にも.on()は.delegate(), .live()、.off()は.undelegate(), .die()に代わります。 これらは1.7.1でも利用できますが、これからは.on(), .off()を使用することが推奨されています。 チートシートでは
How to Create Accordion Menu (CSS3+jQuery) - Designmodo
Step 1 – HTML Markup of Accordion Menu The HTML is the same as the CSS3 version, a nested unordered list that will contain all of our links. We have added a class to each one to be able to add the images and the id is needed for the CSS3 only version. We will keep the CSS3 only version working so if the JavaScript will be disabled on the client browser it will continue working with just CSS. <ul c
要素を無限スクロールさせるjQueryプラグインいくつか
必要になるかも知れないので、 今のうちにかき集める作業です。 よくみる無限スクロールサイトを 実装できるjQueryプラグインです。 あんまり使ったこと無いので 注意点なんかのメモ書きもして おきます。 というわけでいつもの自分用メモなので、これから触る用のまとめです＝オススメプラグインとかじゃないです。無限スクロールと言っても要素が無くなれば止まります。当たり前ですが。 Tumblrとかギャラリーとかでよく見かける無限スクロールを実装できるやついろいろ。WPデザインギャラリーでも実装していますが、これは5509氏のプラグインによるものです。便利っすー。 infinite scroll jQuery Masonryっていう、boxを段々にするやつと一緒に使ってるのを以前実装しました。結構よかった。WPプラグインもあるみたい。 infinite scroll Endless Scroll ち
jQueryのCSSセレクタAPIを高速に扱う方法 - KAYAC engineers' blog
最近Androidとの抗争が激化しているago（@kyo_ago）です。 jQueryはCSSセレクタを多用する特徴がありますが、jQuery内では実行ブラウザやCSSセレクタの記述によって呼び出されるブラウザAPIが変わり、それによって実行速度にも影響が出ます。 この記事では「セレクタAPIとはなにか」、「CSSセレクタの記述によって呼び出されるセレクタAPIの種類」、「高速なセレクタAPIを使用するための方法」、「高速なセレクタAPIが使われるかどうか確認する方法」などを紹介したいと思います。 （※この記事はJavaScript Advent Calendar 2011 (フレームワークコース) : ATNDの1日目の記事です） セレクタAPIとはなにか セレクタAPIとは「#hoge .huga」のようなCSSセレクタから、DOM上に存在する要素を取得するためのAPIです。 jQue
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
creatorish.com
steamdev.com
Create a new fiddle - JSFiddle