カテゴリ:Javascript

jQueryのIEが使えるバージョンとバージョンアップしても使えるようにする方法

Javascript

jQueryのIEが使えるバージョンとバージョンアップしても使えるようにする方法

jQueryもこの記事を書いている現在では3.1.1まで新しいバージョンがでています。
しかし新しいバージョンをすぐ使用しようとすると使えないプラグインが出てきたり、既存のコードが使えないこともあるので、なかなか変更するタイミングがなかったりします。
またブラウザの対応もバージョンによっては使えなかったりもしますよね。

そこで今回はjQueryのバージョンはどのIEのバージョンに対応しているのかと、jQueryのバージョンを上げたいけど既存のコードはどうすればいいのかというのを調べました。

  • 続きを読む

ドラッグアンドドロップでファイルアップロードする方法いろいろ

Javascript

ドラッグアンドドロップでファイルアップロードする方法いろいろ

ファイルをアップロードする時、選択ウインドウを開いて画像を選択するのは少々面倒ですよね。そこで今回は、ドラッグアンドドロップでの実装方法を調べてみました。

  • 続きを読む

CSSとJSでブレイクポイントがずれる時の処理を使いやすくする

Javascript

CSSとJSでブレイクポイントがずれる時の処理を使いやすくする

前にCSSと同じpx数をブレイクポイントで指定するとjQueryでずれるという記事を書いたのですが、その中でIE9ではCSSを使ってウインドウサイズを合わせていました。

  • 続きを読む

さぁ、サイトを下からグイッっとパンしてサイトのロゴがドーン!する新しいjQueryプラグインを考えてみた

Javascript

さぁ、サイトを下からグイッっとパンしてサイトのロゴがドーン!する新しいjQueryプラグインを考えてみた

本当に新しいかどうかはわからないのですが、タイトル通り「サイトを下からグイッっとパンしてサイトのロゴがドーン!」というjQueryプラグインを作りました。その名もstandup.jsです。

  • 続きを読む

このWebサイトを作ったのは私だと主張するためのスタッフロールを流せるjQueryプラグインを作った

Javascript

このWebサイトを作ったのは私だと主張するためのスタッフロールを流せるjQueryプラグインを作った

TVにあってWebサイトにはないもの。それは・・・スタッフロール!それに気づいてからはや数年・・・。そのjQueryプラグインを作成しました。

  • 続きを読む

CSSと同じpx数をブレイクポイントで指定するとjQueryでずれる

Javascript

CSSと同じpx数をブレイクポイントで指定するとjQueryでずれる

CSSで指定したレスポンシブのブレイクポイントに合わせてjQueryで設定をしようとし、そのままの数値を$(window).width()で使うと少しズレがあります。

  • 続きを読む

一人で遊べる神経衰弱ゲームを作った

Javascript

一人で遊べる神経衰弱ゲームを作った

前回作った都道府県当てゲームをSVGとjsonを使って作ってみたに引き続き、ちょっとしたゲームを作ってみたかったので今度は、「一人神経衰弱ゲーム」を作りました。

  • 続きを読む

Instagramのapiを使って写真を表示する

Javascript

Instagramのapiを使って写真を表示する

こちらの記事を見て自分の投稿した写真を表示してみようと思い作成しました。

  • 続きを読む

都道府県当てゲームをSVGとjsonを使って作ってみた

Javascript

都道府県当てゲームをSVGとjsonを使って作ってみた

SVGとjsonとその他使って日本地図を見て都道府県を当てようゲームを作ってみました。ただSVGとjsonを~と言っても特に目新しい事・難しいことはしていません。

  • 続きを読む

pinterest風のタイル上に並べるjQueryを作ってみた

Javascript

pinterest風のタイル上に並べるjQueryを作ってみた

pinterestjQuery Masonry のようにコンテンツをタイル状に並べるレイアウトがありますが、それをjQueryを使って自分で作りました。横幅はひとつの値に固定です。

  • 続きを読む

jQuery.Deferredを使って、xml読み込んでから他の処理を実行する方法

Javascript

jQuery.Deferredを使って、xml読み込んでから他の処理を実行する方法

前回の続きな感じですが、今回はxmlで内容を読み込んだあとに、それぞれの高さを合わせるために heightLine.jsを使うというお話です。

コード的に変な箇所がありましたらすみません。

  • 続きを読む

xmlをjQueryで読み込んで表示する時に注意すること

Javascript

xmlをjQueryで読み込んで表示する時に注意すること

xmlを利用してコンテンツを表示したりすることがあると思いますが、今回はその方法のメモです。

  • 続きを読む

サイトで右クリックしたら他のサイトへ飛ばすjQuery

Javascript

サイトで右クリックしたら他のサイトへ飛ばすjQuery

こんにちは、かしゅうです。

右クリック禁止!というサイトがありますが、もういっそ右クリック禁止の約束を破ったら帰ってもらったらいいんじゃないかと思って、右クリックしてしまったら別のサイトに飛んでもらうjQueryを作ってみました。

  • 続きを読む

コンテンツを横にアコーディオンで表示させるjQuery

Javascript

コンテンツを横にアコーディオンで表示させるjQuery

こんにちは、かしゅうです。

今回はjQueryを使って、コンテンツをアコーディオン状に表示するものを作成しました。

  • 続きを読む

要素にぼかす効果を付けられるFoggy.jsを試してみた

Javascript

要素にぼかす効果を付けられるFoggy.jsを試してみた

「手前に小窓を出して後ろのコンテンツをぼかす」というサイトをどこかで見かけ、それをやってみたかったのでjQueryのプラグインを利用して試してみました。

  • 続きを読む

タスクランナー「gulp」の導入手順(Windows)

Javascript

タスクランナー「gulp」の導入手順(Windows)

前に同じタスクランナーのGruntを導入してみましたが、gulpというのも結構話題に見るのでこちらも導入し試してみました。

  • 続きを読む

紹介したJavaScriptのまとめページを作りました

Javascript

紹介したJavaScriptのまとめページを作りました

このブログでは自分で作ったり参考にして掲載したJavaScript(主にjQuery使用)をよく載せていますが、これらをまとめたページを作成しました。

主にJavaScriptカテゴリの載っているものの中から、プラグインの紹介を除いた感じになっています。

  • 続きを読む

さまざまな動きをするjQueryスライダーを作ってみた

Javascript

さまざまな動きをするjQueryスライダーを作ってみた

前々から自分でスライダーを作ってみようと思いつつ途中で詰まっていたのですが、本を買ったりいろいろ調べたりして出来たので残しておこうと思います。

  • 続きを読む

ソースコードを見やすく表示してくれるgoogle-code-prettifyが便利

Javascript

ソースコードを見やすく表示してくれるgoogle-code-prettifyが便利

ソースコードを表示する際、以前はSyntaxHighlighterを使っていたのですが指定の仕方が自分的に面倒だったのと、少し動作が重い気がしたので使うのを止めていました。

そしてとある訪れたサイトでソースコードを表示してるの何を使ってるのだろうと思って調べたら、google-code-prettifyというのでした。

  • 続きを読む

jQueryでコンテンツをランダムに入れ替える

Javascript

jQueryでコンテンツをランダムに入れ替える

ページのコンテンツをランダムに表示するjQueryです。最初にHTMLには要素の記述が全部書いてある状態なので、 JavaScriptがオフでも順序が入れ替わらないだけで表示はされます。

  • 続きを読む

複数のスライドダウンコンテンツを実装するjQuery

Javascript

複数のスライドダウンコンテンツを実装するjQuery

内容をそのまま表示するとページが長く伸びてしまう時に最初に内容を隠しておき、ある箇所を押すと内容がスルスルと表示されるものがあります。今回はそちら複数ある場合の作り方です。

  • 続きを読む

動画を簡単に設置できるHTML5の動画プレーヤー video.js

Javascript

動画を簡単に設置できるHTML5の動画プレーヤー video.js

HTML5ではFlashでなくてもvideoタグを使えば動画の再生が出来ます。とはいえIE8以下が対応してなかったりでまだ使いづらい感があります。そこで比較的簡単に古いIEにも対応できる(Flashを表示してくれる)動画プレーヤー「video.js」の紹介です。

  • 続きを読む

コンテンツが下からスクロールで表示されるjQueryプラグイン

Javascript

コンテンツが下からスクロールで表示されるjQueryプラグイン

前にどこかのFlashサイトで見てこの仕組みJavaScriptで出来ないかなと思い作ってみました。

プラグインとしての出来はどうかと言うのがありますが、ひとまず公開してみたいと思います。

  • 続きを読む

今更だけどやるgrunt入門編・インストールから基本的な使い方

Javascript

今更だけどやるgrunt入門編・インストールから基本的な使い方

JavaScriptやCSSの結合や圧縮などいろいろな事を自動で処理してくれるGruntですが、もう話題になってずいぶん立ちますが今更ながら入れてみましたのでその方法です。

  • 続きを読む

背景にYouTube動画を流せるJQueryプラグイン「tubular」

Javascript

背景にYouTube動画を流せるJQueryプラグイン「tubular」

背景全体に動画が流れてるサイトってインパクトありますよね。そこでそれを試してみようと思い今回は背景にYouTube動画を流せるjQueryプラグインのtubularを使ってみました。

  • 続きを読む

JavaScriptを使って、どのブラウザかを判定するあれこれ

Javascript

JavaScriptを使って、どのブラウザかを判定するあれこれ

JavaScript(以下JS)で実装するものが増えてきたのに伴い、古いブラウザを判定して処理を分けることもあります。

そういう実装のたびに調べてるのでメモしておこうと思います。

  • 続きを読む

あれ何も見えない?を防ぐ、JavaScriptがオフでもきちんと表示させる方法

Javascript

あれ何も見えない?を防ぐ、JavaScriptがオフでもきちんと表示させる方法

Flashを使わずにJavaScriptを使ってアニメーションなど様々な演出をしているサイトが増えてきましたが、たまにJavaScript(以下JS)がオフの時、何も表示されない、または崩れててコンテンツがよく分からないサイトに遭遇します。

そもそもJSオフにして見る人がいるのかという話もありますが、対処法を書いておこうと思います。

  • 続きを読む

jQueryプラグインの作り方の初歩

Javascript

jQueryプラグインの作り方の初歩

自分でもjQueryを使ってjsを書くので、これをプラグイン化できたらいいなと思うこともあります。という訳で大枠の構成だけですが、基本的な作り方を調べてみました。(あとは引数で設定を変えるのがかっこいいと思ったので作ってみたかったのもあります。)

  • 続きを読む

スクロールしてフッターで止まる、下揃いのサイドバー

Javascript

スクロールしてフッターで止まる、下揃いのサイドバー

前回作ったものの今度は下にピタッとくっつくタイプです。

どちかというとこちらのタイプの方がよく見ます。よく広告を設置してる箇所で見ますね。

  • 続きを読む

スクロールしてフッターで止まる、上揃いのサイドバー

Javascript

スクロールしてフッターで止まる、上揃いのサイドバー

よく見かけるようになった、スクロールしていくとサイドバーがそのままウインドウについてきて、フッターの箇所まで来ると止まるというのを作ってみました。

いろいろなところを参考に考えながら作ったので、JSに無駄なものが多いかと思いますがひとまず出来たので置いておこうと思います。

  • 続きを読む

ページ内ナビをコンテンツの位置によってカレント表示させる

Javascript

ページ内ナビをコンテンツの位置によってカレント表示させる

パララックスをつかったサイトなど、縦長のページが昔に比べれば多くなった感じがしますがその際に、ページ内用のナビを設置する場合があると思います。スクロールした時そのコンテンツのエリアに来たら、ナビをカレント表示させるjsを調べて作ってみました。

  • 続きを読む

jQueryの$.loadと$.ajaxを使って他のページの内容を読み込む方法

Javascript

jQueryの$.loadと$.ajaxを使って他のページの内容を読み込む方法

他のページのhtmlを読み込むのに使うjQueryに$.loadと$.ajaxですが、使い方を調べたので忘れないうちに書いておこうと思います。使いたいときに忘れてそうですので。

  • 続きを読む

jQueryでtransformをアニメーションさせるプラグイン「Transit」

Javascript

jQueryでtransformをアニメーションさせるプラグイン「Transit」

jQueryのanimateではアニメーションしながらtransoformさせることが出来ないようです。
それを可能にするのが今回ご紹介するこちらの「Transit」になります。

  • 続きを読む

jQueryのanimateを使ったアニメーション

Javascript

jQueryのanimateを使ったアニメーション

今回はjQueryのanimateを使って、要素をアニメーションさせる方法を試してみようと思います。

本当はCSSのアニメーションだけで済めば良いのですが、特にIEを考えると難しいところです。そこでjQueryを使っての基本的な方法をおさらいしておきたいと思います。

  • 続きを読む

JavaScriptを使って、自サイトでの「はてなブックマーク」の人気記事一覧を表示する

Javascript

JavaScriptを使って、自サイトでの「はてなブックマーク」の人気記事一覧を表示する

ソーシャルブックマークの「はてなブックマーク」。ここで自分のサイトの記事がどれだけブックマークされているかわかるのですが、 それをブックマーク数が多い順で並べる方法をJSで試したので、ご紹介です。

  • 続きを読む

jQueryを使ってチェックボックスが押されたらリンクをつける

Javascript

jQueryを使ってチェックボックスが押されたらリンクをつける

チェックボックスにチェックを入れるとaタグが出てリンクが押せるようになるというのをjQueryで作成したので、また作る時用に残しておきます。

JavaScriptがもっと効率良くかける気がしますが、ひとまず以下になりました。

  • 続きを読む

Pinterest風のデザインを実装する「jQuery Masonry」を試してみた

Javascript

Pinterest風のデザインを実装する「jQuery Masonry」を試してみた

Pinterestのデザインは、要素が敷き詰められた感じになっています。 これはなんていうデザインの通称かわからないので、ひとまず「Pinterest風」と言ってます。

  • 続きを読む

パララックスサイトの作り方の初歩

Javascript

パララックスサイトの作り方の初歩

最近パララックス(視差効果)を取り入れたサイトが増えてきました。

仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。

ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。

  • 続きを読む

動画をサイトに埋め込む際に便利な、オープンソースのFlashVideoPlayer「NonverBlaster」

Javascript

動画をサイトに埋め込む際に便利な、オープンソースのFlashVideoPlayer「NonverBlaster」

動画と言えば最近はYoutubeにアップしたり、ニコ動やその他動画サイトにアップして見ることが多いと思いますが、 サイトに直接設置することも可能です。その際に便利なのが「NonverBlaster」です。

  • 続きを読む

shadowboxをクリッカブルマップで使う方法

Javascript

shadowboxをクリッカブルマップで使う方法

lightbox風のプラグインでshadowboxというのがあるのですが、これをクリッカブルマップで使った時に動かなかったのでそれのメモです。

  • 続きを読む

jQueryで実装するスクロールに伴う演出

Javascript

jQueryで実装するスクロールに伴う演出

スクロールに関する演出を調べたので、調べたものに使用しているプラグインと実装方法のメモです。

なお、デモについてはFirefoxで確認してますので他のブラウザではずれてる場合があるかもしれません。

  • 続きを読む

JavaScriptの配列を特定の順番にソートする方法

Javascript

JavaScriptの配列を特定の順番にソートする方法

JavaScriptで作った配列の順番を特定の順番に入れ替えたい時があったので、ソートして入れ替える方法を調べました。

  • 続きを読む

ページを読み込んだらすぐにfancyBoxを実行する方法

Javascript

ページを読み込んだらすぐにfancyBoxを実行する方法

画像などをクリックすると拡大画像をふわっと表示してくれる、いわゆるLightBox風のjQueryのプラグイン、「fancyBox」ですが、 これをページを開いた時にすぐ実行する方法を調べたので書いておきます。

  • 続きを読む

IE6で簡単にfixedを使えるようにするjQuery.exFixed.js

Javascript

IE6で簡単にfixedを使えるようにするjQuery.exFixed.js

サイトを作る際に要素を画面のとある位置に固定して配置したい時に使うposition: fixed;ですが、 ご存知の通り、IE6では使用できません。だからといってIE6のシェアも下がってきているなか複雑になる対策をしたくもないので、 jsでサックリ実装したくて探していたのですが、動作がよいものを見つけたのでご紹介です。

  • 続きを読む

スマートフォンサイトを作る時に便利なフリックが実装できるjQueryプラグイン7選

Javascript

スマートフォンサイトを作る時に便利なフリックが実装できるjQueryプラグイン7選

スマートフォンを使うときによく使う操作方法としてフリックがあります。このフリックの操作でギャラリーができるjQueryプラグインを集めました。
Androidを持ってないので、全てがAndroidで動くかは未検証ですがだいたい動くと思います。

  • 続きを読む

YouTubeの埋め込み動画プレーヤーをJavaScriptで制御するYouTube JavaScript Player APIの使い方

Javascript

YouTubeの埋め込み動画プレーヤーをJavaScriptで制御するYouTube JavaScript Player APIの使い方

サイトに動画を設置する際や、Youtubeにアップされている動画を紹介したい場合など、 Youtubeの埋め込みを使って表示する事があるかと思います。
この際にJavaScriptを使って制御ができるYouTube JavaScript Player APIというものがあり、設置をしたので そちらの実装方法のメモです。
これを使うと自分が作ったボタンで再生や停止が出来るようになります。(他にもいろいろ出来ると思います)

  • 続きを読む

スマートフォンかどうかを判断するJavascriptの条件分岐

Javascript

スマートフォンかどうかを判断するJavascriptの条件分岐

スマートフォンかどうかを判断するJavascriptの条件分岐です。

  • 続きを読む

canvasを使って地下鉄の路線図を描けるjQueryプラグインで東京の地下鉄の路線図を描いてみた

Javascript

canvasを使って地下鉄の路線図を描けるjQueryプラグインで東京の地下鉄の路線図を描いてみた

少し前になりますが、jQueryで面白いプラグインが紹介されてましたので、そちらを使って 東京の地下鉄(東京メトロ・都営地下鉄)の路線図を作成してみました。

  • 続きを読む

ページを読み込んだ後、数秒後にアンカーまでスクロールするJS

Javascript

ページを読み込んだ後、数秒後にアンカーまでスクロールするJS

いろいろ調べたので、メモ。ページを表示したら一定時間後に目的の位置までスクロールするjQueryを使ったJSです。

  • 続きを読む

IE6でpng画像にロールオーバーする方法

Javascript

IE6でpng画像にロールオーバーする方法

IE6でpng画像にロールオーバーする時に動かなかったので、そのときに調べたことのメモ。
JSの記述を書き換えれば動くようになりました。

  • 続きを読む

Flashを全画面で表示して、スクロールバーを出す方法

Javascript

Flashを全画面で表示して、スクロールバーを出す方法

全画面のFlashサイトがありますが、Flashのサイズが大きいと画面サイズによっては 見えなくなる領域もできます。Flash内でスクロールできれば問題はないのですが、ブラウザのスクロールバーをだしたい時ようのメモです。

  • 続きを読む

iPhone用ページUIライブラリ iUI

Javascript

iPhone用ページUIライブラリ iUI

以前にもiPhoneサイトを作成するさいに便利なjQueryプラグイン「jQTouch」をご紹介しましたが、 他にも便利そうなものを見つけたのでご紹介。「iUI」です。

  • 続きを読む

tableのセルに交互に色をつける方法

Javascript

テーブル(表)を使うとき、見やすいよう交互に色を付ける事が多いかと思います。その際、HTML側に交互にclassをつけていく方法ではとても大変です。 また、更新が入った時はまたclassをつけなおさないといけなくなります。

この方法を知る前は、一つ一つclassをつけなおして大変でした・・・

以下にjavascript(jQuery)とCSSを使って自動的に交互に色を付ける方法をメモしておきます。

  • 続きを読む

jQueryを使ったアコーディオン

Javascript

テキストや画像などをクリックすると隠れていたコンテンツがでてくるアコーディオンのサンプルをjQueryを使って作成しました。 もっと汎用的なものが他にあると思いますが、検索で調べるものは自分には複雑だったりするので・・・

  • 続きを読む

ie7.jsのバグ

Javascript

IE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれるie7.js

これだけ聞くととても便利そうですが、バグがあったりしてなかなか思い通りにいかないこともあります

  • 続きを読む

画像を拡大するJavascriptいろいろ

Javascript

画像を拡大をJavascriptを使って行えるものをご紹介します。

  • 続きを読む

target="_blank"を簡単に指定する

Javascript

自分のサイト以外にリンクをはる場合、そのリンクは別のウインドウで開いてもらいたいことがあると思います。

  • 続きを読む

jQueryで画像をロールオーバーする方法2

Javascript

jQueryを使って画像をロールオーバーする方法のclassなどを指定せず画像の名前だけで、ロールオーバーする方法です。

  • 続きを読む

jQueryで画像をロールオーバーする方法

Javascript

jQueryを使って画像をロールオーバーする方法は、いろいろあると思いますが今回はclassを指定して使用する方法をご紹介します。

  • 続きを読む

奥行きのある回転ができるjQuery - jQuery Roundabout

Javascript

奥行きのある回転ができるjavascriptのjQuery Roundaboutを試してみました。

  • 続きを読む

iPhoneページ製作用jQueryプラグイン「jQTouch」

Javascript

iPhoneページ製作用jQueryプラグイン「jQTouch」をご紹介します。

  • 続きを読む

jQuery - ページスクロール

Javascript

ページスクロールのJSで、上に戻るだけではなくてアンカーリンクの移動はすべてスクロールがつくJSのご紹介です。

スライドスクロールページ内リンク jQuery.slideScroll.jsCommentsAdd Star
  • 続きを読む

jQueryの使い方

Javascript

jQueryとはjavascriptのライブラリの1つです。導入することによって簡単にjavascriptが扱えます。

まずはjQueryのダウンロード。


http://docs.jquery.com/Downloading_jQuery

Current Releaseが最新のバージョンになります。

  • 続きを読む