バニラJavaScriptを選択する
jQueryを用いて書いたコードと同等な働きをするコードをjQuery抜きで書くとどのようになるのかを示したWebサイト「You Might Not Need jQuery」（jQueryは必要ないかも）が先日話題になりました（はてなブックマークも180以上付いています）。 ちょうどこのWebサイトを話題にした記事「Choosing Vanilla JavaScript」が、Webデザイナ向けに情報発信をしている著名なWebサイト、A List Apartに掲載されていました。 Vanilla JavaScriptとは、要するに何もトッピングされていないバニラアイスクリームのように、jQueryなどのライブラリを使わない素のJavaScriptのことを示しています。 この記事は何でもjQueryを使うのではなく、正しい選択をしようというテーマの内容になっており、参考になりそうだったので翻訳
リロードしたときにjQueryでページの先頭にスクロールさせる方法
ページをリロードしたときに、jQueryでページの先頭にスクロールさせる方法を紹介します。 リンクをクリックしてページの先頭にスクロールさせる方法はネット色々出てきますが、リロードのタイミングでスクロール（＝要はページの先頭を表示）させる手段がみつかりませんでした。 別の実験を行っていてこのような動作を行いたいケースが発生したため、少し調べてみました。認識誤りな点がありましたらご指摘ください。 １．JavaScriptのscrollTo()を使ったスクロール まず、JavaScriptのscrollTo()を使って次のようなコードを記述してみましたが、正常に動作しませんでした。 window.onload = function(){ window.scrollTo(0,0); } 動作結果は次の通りです。 Firefox：ページトップに移動するが、スクロールバーは戻らない Chrome：ペ
第3回 jQueryの基本（回答編） | gihyo.jp
お題の復習 まずは前回出したお題を復習しましょう。前回のお題は以下のようなHTMLがあったときにマウスオーバーでサブメニューを表示するようなUIをjQueryを使って書くというものでした。 お題（連載第二回目） お題（連載第二回目） - jsdo.it - share JavaScript, HTML5 and CSS たくさんforkしていただいてありがとうございました。今回は回答編ということでみなさんにこのお題をforkしてもらった作品を紹介しながらjQueryを使ったマウスオーバーでのメニュー表示機能を解説していきます。やってみてわからなかった人は模範解答を参考にしてみてください。 模範解答 ではまず模範解答を見ていきましょう。他にもよくできていた作品はたくさんありましたが、模範解答の例として以下の作品を紹介します。 forked from: お題（連載第二回目） - jsd
jQueryでクールなくるくるウィジェットを作ろう (1/5)
数年前に登場した「Googleマップ」を皮切りに、ページを遷移せずに一部を書き換える“Ajax”が大流行しました。Ajax/JavaScriptによるユーザーインターフェイス（UI）はWebサイトの操作性を大きく向上できるので、地図サイトなど、いわゆる「Web 2.0的」サイトでは多用されていますが、（特に国内の）テキストと画像を組み合わせた昔ながらのWebサイトでは、まだまだ活用されていないようです。 今回は、AjaxでリッチなUIを実現している英国のWeb制作会社のWebサイト「Web Design by TVI」に注目します。単に見た目がかっこいいだけでなく、Ajaxを効果的に活用した使い勝手のいいUIをお手本にします。 今回のお手本サイト： 『Web Design by TVI』 Webデザイン、ECサイト構築、CMS開発などを手掛ける英国のWeb制作会社「TVI」の企業サイト。会
jQueryに学ぶJavascriptの基礎(2) this 活用──jQuery解読(17)
jQuery解読作業を進めるにつれ、Javascriptの基礎が如何に分かっていないか、ほぼ毎日のように痛感させられます。その意味ではjQuery解読は無謀なチャレンジであった訳ですが、それでも誤謬を犯すマイナスを埋め合わせて遙かに余りあるプラスがあることも毎日自覚されるので、恥を忍んで引き続きjQuery解読を進めるつもりでいます。 しかし、基礎の基礎が余りに分かってない自分に嫌気が指してきてしまい、匙を投げ出すような醜態は演じたくありません。そこで、自戒を込めて敢えて誤解していたこと、理解していなかったこと、不十分な理解に留まっていたことなどについて、つらつらと記述していきたい、と思います。 thisとは何か？ 「this」──Javascriptを始めたばかりの素人は、直ぐに「thisって何？」と躓きます。しかも度々、あちこちで登場するので、どうも役割がいくつかあるらしいと気がつくと
[JS]JavaScript無しでも動作するダイナミックなタブコンテンツ
JavaScriptがオンだとダイナミックにコンテンツが切り替わり、JavaScriptがオフでも正常にコンテンツが表示されるタブコンテンツを実装するチュートリアルをCSS-Tricksから紹介します。 Dynamic Page / Replacing Content デモページ 上記デモではJavaSciprのオン・オフに関わらず、タブをクリックするとそれに対応したコンテンツが表示されるようになっています。 仕組みはオフ時にはタブをクリックするとページ遷移し表示され、オン時にはAJAXを使用してコンテンツを表示しています。 タブ箇所のHTMLは、下記のようになります。 HTML <textarea name="code" class="html" cols="60" rows="5"> <nav> <ul> <li><a href="index.php">Home</a></li> <l
Coda-Slider 1.1#5
eBiz Facts is reader-supported. When you buy with our links, we may earn a commission. Learn more. Welcome to my concise website slider guide. If you want to know: The pros and cons of using a slider on your website If your website already has built-in slider capability How to “roll your own” slider What happened to the original jQuery Coda Slider plugin Then you’ve come to the right place. Let’s
ASCII.jp：JSONP＋jQueryで楽天アフィリエイトを攻略！
自分が運営しているブログやWebサイトに、さまざまな商品のアフィリエイトリンクを張って紹介手数料を稼ぎたい。でも、URLを手動で書き換えるのは面倒だし、かといってリンクジェネレーターを使うとデザインや表示形式の制約が付いて回る――。 そこで活用したいのが、Amazonや楽天、ヤフーなどが提供しているデベロッパー向けのWebサービスです。たとえば楽天が公開している「楽天ウェブサービス」を使うと、楽天で販売されている商品やサービスについてさまざまな情報を検索し、データを取得できます。 もちろん楽天ウェブサービスはアフィリエイトにも使えます。今回は、楽天ウェブサービスのごく簡単な使い方を紹介しましょう。 デベロッパーID／アフィリエイトIDの取得 楽天ウェブサービスでアフィリエイトを始めるには、始めに「デベロッパーID」と「アフィリエイトID」を取得します。 デベロッパーIDは、楽天ウェブサービ
[JS]div要素に角丸やフェードのボーダーをスタイリングするスクリプト -DivCorners
div要素で配置した矩形に、シンプルなボーダーや角丸、フェードのボーダーをスタイリングするスクリプトをroydukkeyから紹介します。 DivCorners デモページ ボーダーは矩形の内側と外側に指定して配置することが可能で、ボーダー自体の幅や高さを指定してスタイリングすることができます。 上記キャプチャは、外側（outside）のデモです。 スクリプトの現在の仕様では、角丸やフェードのボーダーには画像が使用されており、下記のイメージで実装されています。
livedoor Techブログ : 裏jQuery - 特殊なTriggerを作ってみよう
こんにちは。開発部でインターフェースエンジニアをやっております油井(あぶい)です。ライブドアでは主にjavascriptを中心としたクライアントサイド側の開発をやっております。 今回は裏jQueryと題しまして、普段から単にユーザーとして使っているだけでは決して知ることができないjQueryの裏技を紹介したいと思います。 注意 この記事で扱うjQueryは最新版の1.4で動かすことを前提としています(一つ前のバージョンである1.3.2でも動くことは検証済みです)。サンプルで使うjQueryセレクタの書き方は「jQuery」で統一しています。「$」に置き換えて読んでもらってもかまいません。 はじめに - jQueryで扱うイベントやトリガー javascriptがふんだんに使われた画面遷移の発生しないウェブアプリケーションではブラウザ上で発生するイベントやトリガーをうまく扱いこなすということ
ブログ本文のHTMLにJavaScriptのサンプルコードを書き、それを読み込んでJavaScriptを実行する方法のメモ - こんにちはこんにちはmonmonです！
jQueryのAPIを眺めてて、「そういえばこのサンプルで実行するiframe、実際にファイルがあるのかな？それともJavaScriptで動的に作ってるのかな？」と思って確認したのでメモメモ。 確認してみたらやっぱりJavaScriptで動的にiframe作ってるみたいですね。 （サンプルコードのhtmlをいくつも作るの大変だから当たり前なのかしら？） たまにブログとかにJavaScriptのサンプルコードを書いてそれを実行したくなるときがあるのでその時用。ブログのプレビューとかも最近こうやってるiframe動的に作ってるんでしょうねぇ。 方法 <code class="demo-code">っていうタグを用意してその中にJavaScriptのコードを記述 id指定ではなく、class指定なのは複数のコードを実行したいとき用ですよね 出力結果を入れる空div、<div class="cod
第16回 jQueryで楽々実装できるツールチッププラグインを作ってみよう | gihyo.jp
jQueryプラグインの魅力は、JavaScriptの知識がなくても簡単に色々な機能を実装できることですね。今回は「誰でも簡単に実装できるツールチッププラグイン」を作成してみましょう。 ツールチッププラグインの要件は以下の通りです。 titleまたはalt属性がある要素を対象 titleとalt属性両方を持っている場合はtitleを優先 対象要素にマウスオーバーでツールチップをフェードイン 対象要素からマウスアウトでツールチップをフェードアウト 対象要素上ではツールチップはカーソルに追従 まずは完成サンプルとソースコードを見てみましょう。 完成ソースコード // ここからツールチッププラグイン $.fn.easyToolTip = function(options){ // toolTipを生成してbodyに追加しておく var toolTip = $('<div id="toolTip"
The 14 Days of jQuery
Accommodation type Holiday homes (6341) Apartments (2521) Hotels (560) Guest houses (338) Bed & Breakfasts (306) Inns (161) Campsites (104) Lodges (99) Holiday parks (76) Homestays (49) Chalets (44) Villas (44) Luxury tents (30) Aparthotels (30) Country houses (19) Hostels (17) Farm stays (8) Resorts (6) Motels (4) Botels (4) Capsule hotels (4) Vacation Rentals (8284) Extended Stay (8270) Luxury a
もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き）：第8回 タブプラグインを作ってみよう（後編） ｜gihyo.jp … 技術評論社
前回つくったタブパネルスクリプトをもとにして、タブプラグインを作ってみましょう。プラグインを作る、というと何か難しいことのように聞こえるかもしれません。前回作ったタブパネルスクリプトのように、なにも難しいことはありません。まずはプラグインについて少し考えてみましょう。 jQueryプラグインについて 前回の始めに言及したように、プラグインとは、既に完成しているJavaScriptファイルを読み込み、実行するだけで簡単に利用できるものを指すことにします。 例えば、jQueryプラグインは通常以下のようにして実行できるようになっていると思います。 プラグイン（メソッド）の実行 jQuery(function(){ $('div.tabArea').tabPanel(); // 対象のjQueryオブジェトに対してメソッドを実行する }); $('div.tabArea')に対して、tabPan
第6回 フェードの活用と簡易ロールオーバー | gihyo.jp
今回はFirebugの利用とフェード効果を使ったサンプル 前回の第5回では、第1回から第4回までの復習と、Firebugの使い方を主としてみてきました。jQueryについての基本的な使い方に加えて、Firebugの基本的な使い方を押さえていますので、まだ復習をされていない人は、まずはこの先に進むまえに、一度復習をしてから是非読むようにしてください。 さて、今回の内容ですが、今回も前回に引き続きもう少しだけFirebugを使って、jQueryを使ったコードの状態を確認する方法などを見ていく方法と、フェード効果を使った簡易ロールオーバー機能についてをご紹介しようと思います。 コード中のconsole.log() これまでの回で何度かconsole.log()を使って、Firebugのコンソール上に選択されている要素が何であるかを確認したりしてきたのをおぼえていますでしょうか？前回もconsol
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてなブログ | 無料ブログを作成しよう
Can't append <script> element
フォームのテキストエリアをより使いやすくするテクニック集
GitHub - byrnereese/jquery-mtcomment: A jQuery plugin for inline AJAX commenting on a Movable Type blog.
jQueryのAjax Events 7 [Javascript] All About![jQueryのAjax Events 7 [Javascript] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/3a713ecab6d4800da05c4504abbf5718b1613b04/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
