公式サイト ライブラリを使ったデモ ライセンス:MITライセンス prototype.js/script.aculo.usを使った同一ページ内ダイアログ作成ライブラリ
公式サイト ライブラリを使ったデモ ライセンス:MITライセンス prototype.js/script.aculo.usを使った同一ページ内ダイアログ作成ライブラリ
twitter facebook hatena google pocket Web2.0の象徴といえば画像をクールに表示できる「Lightbox」があります。 しかしLightboxでは画像のみが対象でした。 MediaboxはフラッシュはもちろんYouTubeなどの動画サイト、iflameまで表示できます。 sponsors 使用方法 Mediaboxからダウンロードしたmediabox64.jsとmediabox.css、さらにmootools.jsをダウンロードします。 <link rel="stylesheet" href="http://yourdomain/mediabox.css" type="text/css" media="screen"> <script src="http://yourdomain/mootools.js" type="text/javascript"
twitter facebook hatena google pocket Ajaxを知らしめた「LightBox」ですが、わりと導入が面倒だったり、デザインが地味だったりします。 そこで、今回は簡単にLightBox風味を実現するjavascriptを紹介します。 via : A Cool CSS Effect - Dashboard sponsors 使用方法 まずCSSを以下のようにします。 .dashboard { background:#000000; opacity: 0.7; /* Safari, Opera */ -moz-opacity:0.70; /* FireFox */ filter: alpha(opacity=70); /* IE */ z-index: 20; height: 100%; width: 100%; background-repeat:repea
Thickbox - One box to rule them all. Thickboxを使えば簡単に画像やHTMLファイルの中身をLightBox風にカッコよくページ内表示できます。 画像の場合 必要なCSSファイルとJavaScriptファイルをインクルードした上で、次のように画像タグを<a>タグで囲います。 <a>タグには class="thickbox" を指定し、title属性に画像の説明文を入れます。 <a href="images/image2.jpg" title="画像と一緒に表示させたい文字列" class="thickbox"><img src="images/image2_t.jpg" alt="Image 2"/></a> たったこれだけで、次のようにLightBox風に画像を開くことが出来ます。 titleで指定した説明文が画像の下に入ってます。 次にHTML
SEの竹村です。 Lightboxという画像のサムネイルをクリックすると同じ画面上で拡大画像を表示できるJavaScriptのライブラリがあります。Lightboxについては、以下の公式ページのほかに、様々なブログに評価や応用例が掲載されているので検索してみてください。 Lightbox JS http://www.huddletogether.com/projects/lightbox/ 同じように、リンクをクリックすると同一画面上でBOXが開き、HTMLを表示するライブラリがあります。それが今回取り上げる LITBox です。 Ryan J Lowe’s Dev Blog ? Blog Archive ? LITBox http://www.ryanjlowe.com/?p=9# これは、URLを与えると非同期でデータを取ってきて、BOX内に表示するものです。 その他の基本的な使い方に
Window( Frame )の幅の取得 function getWindowWidth(){ if(window.innerWidth) return window.innerWidth; // Mozilla, Opera, NN4 if(document.documentElement && document.documentElement.clientWidth){ // 以下 IE return document.documentElement.clientWidth; } else if(document.body && document.body.clientWidth){ return document.body.clientWidth; } return 0; } Window( Frame )の高さの取得 function getWindowHeight(){ if
iBoxとは? iBoxはAjax(非同期通信処理)を利用して画像を表示するライブラリです。画像だけでなくページ内コンテンツや同一ドメイン上にあるHTMLファイルも表示することができます。iBoxは他のスライド表示系ライブラリと比べて軽量で他のライブラリに依存しません。ただし、基本的にはLightboxの以前のバージョン1を参考にしているため、見た目がいまいちよくないという面もあります。少ない通信コストで画像が表示できればよいというのであればiBoxを利用するのも良いでしょう。 また、他のスライド表示系ライブラリでは原寸大で画像を表示するものが多い中、iBoxはブラウザの横幅/縦幅に合わせて自動的に収まるように表示してくれます(スライド表示系ライブラリの1つであるThickBoxもブラウザのサイズに合わせて画像を表示してくれます)。iBoxもLightbox同様にHTMLの<a>タグのre
ModalBoxとは? ModalBoxはMacOS X風のダイアログを表示するライブラリです。ダイアログ内に表示する内容は非同期通信で読み込まれます。表示できる内容はHTMLファイルやテキストファイルのみで、単純に画像を表示することはできません(*1)。ModalBoxはHTMLファイルを表示するためダイアログには決められたボタンだけでなく様々な情報を表示することもできます。また、ModalBoxはprototype.jsライブラリとscript.aculo.usライブラリを利用しています。 ModalBoxはこのURLにあるページからダウンロードすることができます。 ModalBoxのダウンロードサイト ページ上にある「Download latest version」の囲みの中にある「ModalBox 1.5.3」をクリックするとダウンロードが開始されます。ダウンロードしたファイルはZ
iBox / iBegin Blog (powered by evoBlog) またまたLightBox風エフェクトライブラリのiBox。LightBox風というよりかはThickBox に似ています。 他のライブラリと比べ、次のようなメリットがあるそうです。 1. サイズが小さく軽い 2. 画像、指定div要素、外部HTMLへのリンク対応 3. JavaScriptがOFFユーザにも対応 4. 依存ライブラリなし(prototype.js, moo.fx, jQuery 不使用) デモはこちら いろいろありますが、実際に使ってみて自分にベストフィットなものを使うのがいいんでしょうね。 MITライセンス。 関連エントリ： 画像やページをLightBox風に表示できるThickbox LightBox.jsにスライドショー機能を追加するSlidebox 同一ページ内でポップアップウィンドウを
iBox is a lightweight script that lets you overlay images and documents in a small dialog without a page reload. It's built to be easy to install and use, while offering great flexibility. The quick start shows example code and explains how to use it. TopImages iBox easily supports the standard overlay of images, in many sizes, and will automatically scale down the window if the browser's viewpane
On May 3rd, we shared that we sold Postmark and DMARC Digests to ActiveCampaign. For some of you reading, this will come as quite the surprise. As you can imagine, this decision was incredibly important and personal, taking nearly a year of soul searching and questioning. First, a few important points: The entire team at Wildbit was offered a position with ActiveCampaign, regardless of whether the
leigeberのエントリーから、背景やテキストやボーダーの色を、指定色から指定色に少しずつ変更するスクリプトの紹介です。 JavaScript Color Fading Script デモページ デモには、下記の4つがあります。 ホバーすると、背景の色をフェード。 クリックすると、背景の色をフェード。 ホバーすると、テキストの色をフェード。 ホバーすると、ボーダーの色をフェード。 fader.jsの動作環境は、IE6/IE7, Firefox, Opera and Safariとなっており、jQueryやPrototypeなどの他のスクリプトに依存せずに動作する軽量(約2KB）のスクリプトです。 実装も簡単で、「fader.js」を外部スクリプトとして配置し、下記のように指定します。 <textarea name="code" class="html" cols="60" rows="5
「Hacking Intranet Websites from the Outside」という講演が2006年にありました。 Black Hatでの講演です。 以下に説明する手法は既に公開されてある程度時間が経過している情報なので、ご存知の方にとっては既に古いとは思います。 詳細はプレゼン資料をご覧下さい。 概要 ファイアウォールなどに守られたイントラネットやホームネットワークの内部を攻撃する手法が解説してありました。 JavaScriptの基本仕様を組み合わせて情報を収集するというものでした。 最終的には、プリンタから印刷を行ったり、ルータの設定を変更するなどの攻撃が可能になるようです。 それ以外にも、Web経由で設定変更が出来るものは状況によっては影響されるかも知れません。 プレゼン後半ではCSRF(XSRF, cross-site request forgery)も解説されていました
情報を共有しよう，ネットの力で会や企業をより良くするために。ネット産業の勝負はこれからだ。個として自立しよう，好きを貫こう，幸福になるために。「ウェブ時代5つの定理 この言葉が未来を切り開く!」，「私塾のすすめ ─ここから創造が生まれる」(齋藤孝氏との共著)などの著者である梅田望夫氏と，Rubyの作者まつもとゆきひろ氏が，ウェブ時代を生きる人々に語りかける。 まつもと 社会の問題も適度なサイズに問題が分割されていて，サメにえさをやるように配分できれば，いろんなことが達成できると思います。それこそが炎上のパワーをポジティブに使えないかということですね。 Rubyはたまたまそういう構造が出来つつあるんですが，全部のオープンソース・プロジェクトがそうなっているわけではない。我々はかなり例外的なんです。 梅田 なぜですか。 まつもと 先ほどお話した，オープンソースは多様なものであり，成功しているも
気になる記事をスクラップできます。保存した記事は、マイページでスマホ、タブレットからでもご確認頂けます。※会員限定 無料会員登録 詳細 ｜ ログイン ちょっと気張った、高めのランチを出すレストラン。対面には、会社訪問にやってきた21歳女子大生が座っています。 何を話してあげたらいいのか、何を聞かれるのか。ちょっとどきどきした気分で、お手ふきの封を開けたところで、女子大生が口を開きました。 「あの、転勤ってあるんですか？ 私、家族とか友達も大切にしたくて」。 さて、この一言に何を感じるでしょう。 「今流行のワークライフバランスってやつか。最近の学生はしっかりしているな」でしょうか。それとも「OB訪問でいきなり私生活の話？ 仕事をなめんな」でしょうか。 社会人と学生の境界線から 今年、私は入社2年目になりました。2年前は髪を黒く染め直した就職活動生。今でも、正直、学生と社会人の間をゆらゆらと揺
Jeong-Heon Kim Adobe 目次 はじめに Flash Player 8のセキュリティ変更 Flash 8以前の接続メソッド ExternalInterfaceクラス ExternalInterface.call() ExternalInterface.addCallback() 印刷用に表示 作成日:2006年6月12日 ユーザレベル:中級 Flashアプリケーションで何らかの機能を使おうとすると、HTMLページ内のJavaScriptのような、Flash Playerの外部にあるコードに接続しなければならないことがよくあります。このような場合、接続を行うにはActionScriptからJavaScriptを呼び出したり、あるいはその逆を行うといったことが必要です。 Flash Player 7以前のバージョンではActionScriptとJavaSc
西川敦子（フリーライター） 【第26回】 2008年05月07日 チーム全員がうつ退職 「人材使い捨て企業」で何が起きたか ～ 31歳男性（既婚／ＩＴ系企業勤務）は見た！【前編】～ 「なんと、若手全員がうつで退職。チームそのものが消えちゃったんですよ」 こう語る大手ＩＴ系企業の宮本峻さん（仮名・31歳）は、ネットワーク保守・運用部門で働いている。 「消えたチーム」というのは、宮本さんのいる部署の隣のプロジェクトチームだ。ここには、中途入社した彼の同期5人が配属されていたという。その5人がそろいもそろってメンタルヘルスを悪化させた。うつや自律神経失調症などを病み、2年目には全員いなくなっていたという。 「結局、プロジェクトは立ち行かなくなり、会社は事業から撤退することになりました。こんなことは今に始まったことじゃありません。大量に新人を採用し、彼らがいなくなると、また募集をかける。そ
6つの最高のテキストエディタ 2008年05月07日 17:00 Tweet mixiチェック 最高が6つって日本語がおかしいだろう？と突っ込まれそうですが、とにかく6つの最高のテキストエディタを紹介します。 メモ帳？あんなもの不便もいいとこですよ。これを使ってないあなたは時間を無駄に浪費しています！ ・Notepad++（Windows） Notepad++はNotepadより良い何かを探しているWindowsユーザーのためのテキストエディタです。Notepadに搭載されていない先進的な機能の大部分を取り扱っています。ユーザインターフェースは最初は不自由に思うかもしれませんが、すべてカスタマイズすることができます。不自由なのは時間とあなたの想像力によって制限されているからです。お値段無料。 ・Emacs（すべてのOS） プログラマー向けのテキストエディタ。コードに注力したマクロやコマン
作成した動画を友だち、家族、世界中の人たちと共有
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
