GoogleMapをとりあえずさくっと表示したいときのjavascript
GoogleMapをとりあえずさくっと表示したいときのjavascript GoogleMapはカスタマイズでさまざまなことができますが、コーポレートサイトで使用するときはほとんどピンを立たせてウィンドウを表示させるくらいなんじゃないかなと。 さくっと表示させたいときはiFrameでいいんじゃね？ というつっこみ聞かなかったことにしてとりあえずJavascriptでコピペで使えるコードです。 投稿日2011年09月07日 更新日2012年01月31日 html divに適当にidを割り当てます。 ここではgmapとしました。 html <div id="gmap" style="width: 590px; height: 400px;"></div> javascriptはheadの最後か、bodyを閉じる直前とかいつもの位置に入れましょう。 javascript <script type
[JS]かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic
HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量（約3K）のスクリプトを紹介します。 デモページ Sonicの実装 Square（矩形）とCircle（円形）を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="sonic.js"></script> JavaScript: Square（矩形） あとは、JavaScriptで記述するだけです。 var square = new Sonic({ width: 100, height: 100, fillColor: '#000', path: [ ['line', 10, 10, 90, 10], ['line', 90, 10, 90, 90], ['line', 90, 90, 10, 90], ['line', 10, 90, 10, 10]
[JavaScript] 猿でもわかるクロージャ超入門 まとめ - DQNEO起業日記
クロージャとは クロージャは、言葉で説明するのが大変難しい概念です。 あなたは、自転車の乗り方を、口だけで説明できるでしょうか？ あなたは、螺旋(らせん)の形を、言葉だけで説明できるでしょうか？ ずばり、できないでしょう。 しかし、自転車に乗ることはできますし、針金で螺旋の形を作ることはできるでしょう。 「クロージャ」もこれと同じです。 だから、Wikipediaのこんな解説を見ても落ち込まないでください。 クロージャ (クロージャー、Closure) は、プログラミング言語において引数以外の変数を実行時の環境ではなく、自身が定義された環境（静的スコープ）において解決する関数のことである。 理解できないですよね？ 私もそうでした。 クロージャを既に知っている人にしか、この文章は理解できないでしょう。 クロージャを作るのは難しくない しかし、説明するのは難しくても、作るのは意外と簡単。それが
[JS]一行追加するだけで、IE6/7/8でもHTML5のvideoとaudioを利用できる -html5media
HTML5のvideo要素やaudio要素をサポートしていないメジャーブラウザでもたった一行、ページに追加するだけでこれらを利用できるようにするスクリプトを紹介します。 html5media デモページ [ad#ad-2] html5mediaの実装 html5mediaの利用方法は簡単です。 ページに追加する一行 下記をページのhead内に記述します。 <script src="http://api.html5media.info/1.1.4/html5media.min.js"></script> これだけで、すべてのメジャーブラウザでHTML5のvideoとaudioを利用できるようになります。 video, audioに非対応のIE7でも期待通りに動画が再生されます。 IE6(IE Tester)でのキャプチャ 参考：video, audioのサポート状況 video, audio
[JS]ダイナミックなアニメーションでレイアウトを変更するスクリプト -Isotope
Demo: images IsotopeにはimagesLoadedプラグインも含まれており、画像のロードにコールバック関数を利用できます。 Isotopeの特徴 レイアウト モード： CSSだけではできない、インテリジェントでダイナミックなレイアウトを実現します。 フィルタリング： jQueryのセレクタを使用して、簡単にエレメントのフィルタリングが行えます。 ソート： あらゆるデータからソートが行えます。 各機能の互換性： レイアウトモード、フィルタリング、ソートの各機能は一緒に利用することができます。 最適化： Isotopeのアニメーションエンジンは、表示しているブラウザごとに最適なものを使用します。例えば、CSS3 transitons, transformsなどで、これらに非対応なブラウザ（IEなど）は、JavaScriptでアニメーションを実現します。 Isotopeの実装
直感的なJavaScriptプログラミングを実現する新ライブラリ「Sugar」 | エンタープライズ | マイコミジャーナル
Sugar is a Javascript library for working with native objects. シンプルで直感的に扱える新しいJavaScriptライブラリが登場した。既存のJavaScriptフレームワークと衝突しないように開発されており、JavaScriptを使った開発効率を向上させるライブラリとして注目される。ライブラリは「Sugar」と呼ばれている。 SugarはJavaScriptのネイティブオブジェクトを拡張するためのライブラリ。一般的なJavaScriptライブラリのように多くの機能を提供するのではなく、ネイティブオブジェクトを拡張することだけに主眼が置かれている。最初からほかのフレームワークと併用することを想定して開発されているため、導入のための敷居が低いところもポイントとなる。 どのような機能がネイティブオブジェクトに追加されるのかは、Sug
プログラミング経験者が JavaScript を学ぶためのリソース - フリーフォーム フリークアウト
移転しました http://please-sleep.cou929.nu/20110721.html
[JS]異なる高さのdiv要素の高さを揃えるだけのシンプルなスクリプト -Equalbox | コリス
Equalbox.js デモページ [ad#ad-2] Equalbox.jsの実装 HTML 各div要素はjQueryのセレクタで指定できるように、idなどを指定します。 <div id="box-container"> <div id="box1" class="box"> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> </div> <div id="box2" class="box"> <p>dsfsdfsdfsdf</p> </div> <div id="box3" class="box"> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdf
画像を保存されない方法
最終修正日2007.12.27. 前置き 簡単にコピーしにくくする方法 フラッシュで画像を表示する 画像をスライスしてテーブルで表示する 画像をテーブルで背景に張る 画像をCSS（カスケードスタイルシート）で指定する JavaScriptでの右クリック禁止 画像を保存されない方法はない 最初に結論ですが、画像を保存されない方法はありません。どんな小細工をしたところで、画像が表示されるなら、コピーはできます。 Winの場合はPrintScreenKeyを押す、Macの場合はcaps lock+shift+4+コマンドキーを押すでスナップショットがとれます。右クリックを禁止しようが、画像をCGIで表示させようが、そんなことは関係ありません。スナップショットを防ぐHTMLタグやJava Scriptはないのですから。 Winの場合はOSの設定で、特定のアプリケーションのプリントスクリーンを禁止す
wise9 › JavaとJavaScriptの20年戦争
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
div要素をランダムに表示させたい
お世話になります。Javascriptについて質問させていただきます。 拙い説明で分かりにくいかと思いますが、ご教授いただけたらと思います。 javascriptとcssを使用して、ページをリロードする度に、divの要素をランダムに表示させるようにしたいと考えています。 ランダムで表示させるにはfunction test(no)関数のどこかにランダムで値を取得できるようにする必要があると思っているのですが、上手く設定ができずに悩んでいます。 ご回答頂けたら幸いです。 ■ html <body onLoad="test(no)"> <div id="link"> <div class="link01"> <p>文章1</p> </div> <div class="link02"> <p>文章2</p> </div> <div class="link03"> <p>文章3</p> </div>
Smooth Scrollのブログパーツ作りました
こりずにブログパーツを作りましたといっても、某有名なSmooth Scrollスクリプトを丸パク(略 ま、どこかで見たコードだなぁと思っていただければ幸いです。 ダウンロード＆デモダウンロードはこちらからお願いします。(新しいタブまたはウインドウが開きます) http://sites.google.com/site/mksdcom/Home/smooth.js デモページはこちら(新しいタブまたはウインドウが開きます) http://tunsns.net/smooth_test.html ライセンスライセンスはPublic Domainです。 いつものごとく。 商用利用・非商用利用問わずお使いください。 サポートブラウザOpera 9.5+ Google Chrome 5.0+ Firefox 3.5+ Safari 4.0+ IE 6.0+ Firefoxの3.0でも動くかもしれませんが
JavaScript初心者におくる24のグレイトなtips - 三等兵
私が作ったわけではなく海外の記事です。自分も学習してみました。 phpスポーツ啓発日誌や、コカトリスさんや、アイスクレアームパラダイスさんのような、品質の良い訳は私にはできませんので見出しは意訳もしくは誤訳、文章は無視して訳してません。かつ、私がいろいろコードや文章つけたしてます。内容的にはほとんどズレてはないと思いますが、適当なのでおかしいところがあるかもしれません。 うっとうしい場合は原文をどうぞ。 24 JavaScript Best Practices for Beginners 1. 等価演算子で==使うなよボケ===だろナスチン野郎 ひぃぃぃ。 ==|!= だとねー、型は自動に変換されるんすよねー。ねー。 s = '1'; i = 1; alert(s == i); // true alert(s === i); //false えーと、==は「わし、数値も文字列も中身が一緒だ
マンガで分かる JavaScriptプログラミング講座
はじめに 「マンガでわかるJavaScript」は、難しそうに思えるプログラムを、簡単そうに見えるマンガで解説するという初心者向けの入門講座です。 架空の高校生たちに教える形式で、プログラムの基礎から応用を、解説していきます。一通りのマンガを読めば、かなり実践的なところまで、プログラムを書けるようにしていきます。 （マンガは、左上から右下へと読みます） プログラムというと、けっこう大変そうに思えますが、この講座のテーマは「面倒くさいことを楽にする」です。面倒臭がりで、手抜き大好きの女子高生を主人公にして、楽しくプログラムを学んでいくことにします。 主な対象読者は「これからプログラムを学んでみたい人」「Webの世界に関わっていてJavaScriptを学んでみたい人」「昔JavaScriptを触っていたけど最新のトレンドが分からないので改めて学んでみたい人」などです。初心者だけでなく、Webデ
細かいJavaScriptの仕様や習慣やテク集 - 三等兵
気づいたことやミスしたことなどメモしていたので確認作業。細かい仕様だったり暗黙のルールだったり、テクニックだったり。JSに慣れていたら当たり前なことばかりかもしらん。 追記のところはid:os0xさんより。ありがとうございます！ undefined var a; alert(a) // undefined 宣言だけだとundefined。undefinedというのは、宣言している変数に値が入っていませんよ、ということ。 そしてオブジェクトには無いプロパティとか参照すると出てくる。 var a = 100; alert(a.length); // undefined さらに引数も。 function func(val) { alert(val); } func() // undefined 引数はCallオブジェクトってのに格納される。このオブジェクトはローカルの変数が格納されるオブジェクト
色々なエフェクトがある画像ズームJavaScript「Cloud Zoom」
画像をズームさせることで、小さなスペースで詳細まで見せることが可能です。 今回紹介するProfessor Cloudは軽量かつ簡単にズームをさせられます。 sponsors 使用方法 Professor Cloudからファイルをダウンロードします。 またjQueryも忘れず用意しましょう。 <link href="cloud-zoom.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="cloud-zoom.1.0.1.js"></script> 上記を記述したら画像を記述していきます。 まずは、小さい画像とズーム表示させる大きい画像を用意しましょう。 <a
[JS]背景画像をブラウザの枠いっぱいに広げて表示するスクリプト -fullscreenr
背景画像のアスペクト比を維持しつつ、ブラウザの枠いっぱいに広げて表示するスクリプトを紹介します。 デモではオプションで、ドットの画像をオーバーレイさせています。 スクリプトがオフ時の表示 fullscreenrの実装 fullscreenrはjQueryのプラグインのため、実装にはjquery.jsが必要です。 HTML 当スクリプト（jquery.fullscreenr.js）とjquery.jsを外部ファイルとして記述します。 <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/jquery.fullscreenr.js" type="text/javascript"></script> JavaScript head内に下記のスクリプトを記述します。 <script
ソフトを使わずにJSを使って写真加工が可能になる「PaintbrushJS」:phpspot開発日誌
PaintbrushJS v0.1 Demo Page ソフトを使わずにJSを使って写真加工が可能になる「PaintbrushJS」。 使っている写真が同じでも次のように様々なエフェクトを書けることができます。 クライアントサイドで処理する分、サーバが持つ画像は１枚でよく、サーバ容量や転送量の削減に有効ですね。 何より面白いテクノロジーです。Flashを組み合わせれば、より色々な種類の画像にすることができそう。 ジェネレーターみたいにすることも手軽にできそうです。 関連エントリ IEにも対応！ブラウザ上でローカルにストレージを作るJavaScriptライブラリ「jStorage」 とても綺麗なグラフ等を描けるフレッシュなJavaScriptライブラリ色々 Extバリの超クールなUIを提供するJavaScriptライブラリ「Jx Library」
Lightbox JSライブラリを利用する
自前でエフェクト処理などを記述しても可能ですが、以下のURLにあるLightbox JSライブラリを利用すると格好いいスライドショーなどが簡単にできます。 http://www.huddletogether.com/projects/lightbox2/ Lightbox JSライブラリの使い方は非常に簡単です。まず、スタイルシートファイルlightbox.cssをリンクします。 <link href="css/lightbox.css" rel="stylesheet" type="text/css"> また、imagesフォルダにある画像も忘れずにHTMLファイルと同じ階層のディレクトリに入れておきます。 次にprototype.js、acript.aculo.us、lightbox.jsをリンクします。script.aculo.usのeffects.jsファイルが必要なので、これもs
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
988 + JavaScript Libraries : skuare.net