タグ

JavaScriptとjavascriptに関するminotanのブックマーク (217)

  • [JS]フェードするツールチップを実装する超軽量スクリプト

    Fading JavaScript Tooltips 2kb デモ スクリプトは2KBの超軽量で、ツールチップに表示できるのはテキストだけでなく、HTMLのタグも使用できるので改行(<br />)や画像(<img>)なども表示できます。 対応ブラウザは、IE6+, Firefox, Opera and Safari となっています。

  • jsmap - JavaScriptによる都道府県入力補助

    Q - なぜ、全国地図にしないのですか? 4つほど理由があります。 ポップアップが場所をとりすぎるから 現在、地図部分は185x120pxにおさめていますが、標準的なモニタ解像度ではこの辺が限界です。 キーボード操作時の押下回数を減らすため jsmapがフォーカスするのはSugarCRMなどのWEBアプリです。使い切りのWEBフォームと違い、慣れによるスピードアップが望めるUIである必要があります。 多言語対応のため 日は47都道府県なので、かろうじて可能だと思う方もいるかもしれませんが、これがイギリス(現在製作中)とかでは100を超えます。 認知的限界のため これも重要。ぱっと見て探せる数というのは、15や20がせいぜいです。 ただ、上記の話とは別に、地方選択用の全国図はあってもいいと考えていますので、それは将来のバージョンで。 Q - 地図はもっと詳細化/単純化しないのですか? 詳細

  • [JS]テキストエリアや画像をサイズ変更できるようにするスクリプト

    Switch On The Codeのエントリーから、テキストエリアや画像のサイズをユーザーが自由に変更できるスクリプトを紹介します。 Generic Resizeable Container(画像) Resizeable Textbox, Part Tres(テキストエリア) テキストエリアや画像のサイズは、右・下のハンドルをマウスで操作することにより、縦横斜めへ変更できます。 テキストエリアをリサイズするスクリプトはパート3となっており、最初のバージョンは下記で公開されています。

  • Ajaxorized » Phototype: image manipulation with Javascript

    Todos sabemos que una de las capitales más independientes y liberales es Amsterdam, pues sus leyes permiten vivir situaciones y consumir productos que en otros países nunca podrán ser legalizados, de la misma manera el sexo puede ser realmente una prohibición que Amsterdam ha dejado atrás hace mucho tiempo. Uno de los parques de mayor influencia en la capital de los países bajos es el parque Vodel

  • 特集:Firefox 3とFirebugで始めるJavaScript開発|gihyo.jp … 技術評論社

    第3回Command Line APIとその活用⁠⁠、各タブからのデバッグ方法 堀邦明 2008-05-21 第2回Firebugによるデバッグの基⁠⁠、Console APIとその活用 堀邦明 2008-05-14

    特集:Firefox 3とFirebugで始めるJavaScript開発|gihyo.jp … 技術評論社
  • 404 Blog Not Found:javascript - 勝手に添削 - textareaの高さを自動調節

    2008年05月20日14:15 カテゴリLightweight Languages javascript - 勝手に添削 - textareaの高さを自動調節 これはなかなかいいですね。 textareaのサイズを入力にあわせて調整するJavaScript (イラストdeブログ開発記) イラストdeブログの掲示板の使い勝手を高めるため、textareaサイズをJavaScriptで改行入力毎に大きくするコードを書いてみました Firefox 2, Safari 3, Opera 9で動作確認してあります。 イチ に 三 function resize_textarea(ev){ //if (ev.keyCode != 13) return; var textarea = ev.target || ev.srcElement; var value = textarea.value; var

    404 Blog Not Found:javascript - 勝手に添削 - textareaの高さを自動調節
  • textareaのサイズを入力にあわせて調整するJavaScript:phpspot開発日誌

    textareaのサイズを入力にあわせて調整するJavaScript (イラストdeブログ開発記) イラストdeブログの掲示板の使い勝手を高めるため、textareaサイズをJavaScriptで改行入力毎に大きくするコードを書いてみました。textareaのサイズを入力にあわせて調整するJavaScriptサンプル。 rows=1にして、1行のtextareaを使っているサイトを見かけたりしますが、とても使いづらくなってしまいます。 何を入力したのか、上の方を見返すのは小さいスクロールをクリックしないといけません。 とはいえ、スペースはあんまりとりたくない、というケースもあります。 そんなケースに使えます。 こうした形であれば、省スペースかつ、全文を見ながら入力できますね。

  • 本気でやるなら黙読は避けて朗読すべき: Days on the Moon

    読書百遍義自ら見る」という言葉があります。難解な書物であっても 100 回も読めば自然と意味がわかるようになるという、熟読の大切さを説いた句です。しかし、これは当のことなのでしょうか? 2000 年もたてば社会も常識もまったく変わってきます。昔の人の言ったことが今も正しいとは限りません。 疑問があれば解明したくなるのが人の性というもの。実際に「読書百遍義自ら見る」は正しいか、確かめて紀要にまとめてくださった方がいます。それによると、女子大生にデカルトの「方法序説」を 30 回読んでもらったところ、ほとんどが内容を理解するにいたったとのこと。この言葉の正しさが見事に証明されたのです。 ただし、一点注意することがあり、それは黙読ではなく朗読するということ。人間は活字を使いだしたのはたかだかこの5千年程度のことであるが、音声を使った情報のやりとりは動物の時代から行ってきたことであるという由緒

  • [JS]わずか4KBの超軽量の画像ギャラリーのスクリプト -slide.js

    leigeberのエントリーから、スムーズにスクロールするサムネイルから拡大画像を表示する画像ギャラリーのスクリプトを紹介します。 Dynamic Image Gallery and Slideshow デモ slide.jsはjQueryやPrototypeなど他のスクリプトに依存することなく単独で動作するスクリプトで、動作環境はIE6/IE7, FF, Opera and Safariとなっています。 サムネイルはリスト要素となっており、オプションでは「拡大画像の格納場所の指定」「拡大画像の拡張子の設定」「スピード」などを設定することができます。

  • 本気でやるならonclick属性は避けてライブラリを活用すべき - id:HolyGrailとid:HoryGrailの区別がつかない日記

    第1回 そろそろ気で学びませんか? | Think IT これ、今この記事書いてる時点で650以上ものブクマがされているんだけれども、あまり内容がよろしくない。 というのも、解説はとても丁寧ですごくよい内容なのだけど、サンプルコードの書き方がどうも古くさい。 onclick属性とか、今時のフロントエンドエンジニアはそんな書き方はしない(と思う)。 なぜonclickをあまり推奨しないのか やっぱり、エンジニアとデザイナーorマークアッパーとの分業の点でHTMLの属性にスクリプトを書いちゃうのはあんまりよろしくない。 たとえばの話だけど関数の名前を変えたかったり、だとか、HTMLを変更したり、っていうときにミスが起こりやすくなってしまう。 これは分業していなくてもどちらにしろ発生してしまうことだと思う。 他にも前に書いたのだけど、aタグとかでonclickしちゃうとhrefにreturn

    本気でやるならonclick属性は避けてライブラリを活用すべき - id:HolyGrailとid:HoryGrailの区別がつかない日記
  • [Think IT] 【これならわかる!JavaScript/Ajax】やりなおしのJavaScript 第1回:そろそろ本気で学びませんか? (1/3)

    画面の一部を瞬時に切り替える方法 JavaScriptを勉強したいけど、プログラム構造がよく分からなくて、なんとなく使っている人は多いのではないかと思います。市販のやWebサイトにはJavaScriptのサンプルがたくさん載っているので、必要なところをコピー&ペーストしてしまうと、JavaScriptの文法が分からなくても動いてしまいます。 しかし、このような使い方をしていると、JavaScriptサンプルを少しだけ修正したいという時に対応できなくなります。これでは「JavaScriptを使える」とは言えませんよね。 そこで、連載では、JavaScriptをもう一度やり直したい方々のために、勉強の切り口を変えて紹介していきましょう。 最初のトピックでは、JavaScriptを使ってHTMLのコンテンツを入れ替える方法について紹介してます。この技術は、最近話題になっているAjaxのベース

  • inputEx - HTML Form作成Javascriptライブラリ

    inputExは、クライアント側だけでバリデーションや入力補助つきのフォームを作成できるJavascriptライブラリだ。MITライセンスで、Yahoo UI libraryのバージョン2.5.1をベースにしている。 サンプルのページからデモを開くとわかるけれど、 JSON形式の短い記述のみで、きちんとしたフォームが使える。一般的なフォーム、URLやメールアドレス、IPアドレスなど特定のフォーマットに従ったフォーム、グループの制約を持つフォームやカラーピッカー、WISYWIGエディタまで、様々なフォームのための部品が提供されている。 ドキュメントもきちんとしているし、GUIでこのJSONデータを作成するためのフォームビルダも提供されているので、使うための敷居は低いだろう。 サーバ側でフォームを書かないため、このライブラリで作ったフォームは、Javascriptがオフになっていると動かなくな

    inputEx - HTML Form作成Javascriptライブラリ
  • アニメーションするドロップダウンメニュー作成JS「Sliding JavaScript Dropdown Menu」:phpspot開発日誌

    アニメーションするドロップダウンメニュー作成JS「Sliding JavaScript Dropdown Menu」 2008年04月30日- Sliding JavaScript Dropdown Menu - Web Development Blog This lightweight drop down menu script (~1.8kb) allows you to easily add smooth transitioning dropdowns to your website. This can be used for navigation, dropdown lists, info panels, etc.アニメーションするドロップダウンメニュー作成JS「Sliding JavaScript Dropdown Menu」 デモページはこちら メニューの中身は単なるul li

  • Re:zapa氏 今更ですが、jQueryにはまりました - ホームページを作る人のネタ帳

    ZAPA氏の記事。 ニュータイプなJSライブラリjQueryを使ってみよう! これを見てから3日間。 ブログもあまりかけずこればっかりいじって遊んでました。 睡眠時間も1日2時間くらいになり、今日は書こうと思います。 まずZAPA氏、きっかけをありがとう。 私はJavaScriptの知識がほぼ皆無な人間です。 そんな私でもjQueryは簡単に使える為、面白くてはまりました。 ただ、お恥ずかしい話、PHPを使ってJavaScriptをある程度制御しなければ私は使いこなせません。 ですが恐ろしく簡単にこれまでこのブログで紹介してきたようなJavaScriptアプリと同等のものを作れる為、これははまります。 JavaScriptダメダメの私でも出来ました データベース接続部や、なんやかんやは全てPHPでまかない、動作部分やFormなどはjQueryに投げる。 こんな方法で色々試して見ましたが、A

    Re:zapa氏 今更ですが、jQueryにはまりました - ホームページを作る人のネタ帳
  • ニュータイプなJSライブラリjQueryを使ってみよう!

    JavaScriptライブラリのニュータイプ「jQuery」。 jQuery is a new type of JavaScript library. jQuery: The Write Less, Do More, JavaScript Library ニュータイプと聞いては黙っていられないニュータイプファンの皆様こんにちは、公開APIを利用したサンプルサイトを作っていくよ管理人のZAPAです。 Web2.0やらAjaxやらの言葉が流行っていても、実際にそれっぽいものを作ろうと思ったところで、初心者は一体どこから手を付けて良いのかわからないのが現実だったりします。 そこで今回は、Web2.0っぽくAjaxを実現させることができるライブラリ「jQuery」の紹介をします。 Ajaxとは ここで言うAjaxは、オランダの名門フットボールチーム「アヤックス」ではなく、ウェブブラウザ内で非同期通

    ニュータイプなJSライブラリjQueryを使ってみよう!
  • MOONGIFT: » Mamboでも使われているWYSIWYGなエディタ「TinyMCE」:オープンソースを毎日紹介

    WYSIWYGで編集できるエディタは、一般ユーザをはじめ、HTMLに不慣れな人でも簡単に文字装飾が施せるので便利だ。単なるテキストでは分かりづらい情報でも、装飾や文字の配置を工夫することでコンテンツを分かりやすくすることができる。 様々なWYSIWYGエディタが存在するが、Webブラウザ向けに高機能なものを探しているならこちらをどうぞ。 今回紹介するオープンソース・ソフトウェアはTinyMCE、Webベースの高機能WYSIWYGエディタだ。 TinyMCEはMOStlyCEという名称でMambo CMSのコンテンツ編集機能として利用されている。十分に多機能なCMSでも使えるレベルということだろう。ツールバーの項目が数多く、相当な機能が実装されているのが分かるはずだ。 単純な文字装飾はもちろん、ファイル管理、画像の簡易編集と管理、XHTML対応、MS Wordの貼付け対応、プラグイン機能など

    MOONGIFT: » Mamboでも使われているWYSIWYGなエディタ「TinyMCE」:オープンソースを毎日紹介
  • 第5回 jQuery UIによるユーザインターフェースの改良 | gihyo.jp

    今回使用する「Dialog」「⁠Draggables」「⁠Droppables」「⁠Sortables」に必要なファイルは以下の通りです。 themes/ jquery-1.2.3.min.js jquery.dimensions.js ui.mouse.js ui.resizable.js ui.dialog.js ui.draggable.js ui.draggable.ext.js ui.droppable.js ui.droppable.ext.js ui.sortable.ext.js ui.sortable.js jQuery UI 1.5bを使うために、今回は同梱されているjQuery 1.2.3を使うことにします。バージョンが上がりますが、これまでのサンプルの動作に影響はありません。 ライブラリの設定 ライブラリの各ファイルを、head要素の子要素に以下のように指定します(

    第5回 jQuery UIによるユーザインターフェースの改良 | gihyo.jp
  • jQuery 日本語リファレンス

    jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ?'); }, function(){ $(this).text('ヌー'); } );

  • Google Visualization APIを早速使ってみた - builder by ZDNet Japan

    RPA見直される”業務”と”人”の関係 人的リソースを単純作業から解放! 高付加価値業務への転換のために 膨大なアクセスを支える屋台骨 高い安定性とパフォーマンスを両立 ZOZOTOWNが選んだストレージ基盤を解説 ビジネスの推進には必須! ZDNet×マイクロソフトが贈る特別企画 今、必要な戦略的セキュリティとガバナンス リモートワークを成功させる方法 必須となるセキュリティをどう強化するか 必要な対策5つを紹介 年間5,000件の問い合わせに対応 疑問を解消したいユーザーも答える情シスも みんな幸せになるヘルプデスクの最適解 高い従業員満足度と安心・安全 新時代にむけた理想の業務環境こそ Anywhere Workspaceが目指す未来 エッジ市場の活性化へ 高まるIoTを中心としたエッジ分野への期待 OSS活用が新しい時代のビジネスを拓く データ活用は次のステージへ トラディショナル

    Google Visualization APIを早速使ってみた - builder by ZDNet Japan
  • クールなスライドショーライブラリ·Galleria MOONGIFT

    画像をサイトで一気に紹介したいことがある。ただ画像のサムネイルやリンクを並べるだけでも良いが、それでは味気ない。写真や画像は見せ方次第でその印象が大きく異なる。 専用のソフトウェアを使っても良いが、もっと手軽なのはJavaScriptベースのライブラリだ。 今回紹介するオープンソース・ソフトウェアはGalleria、JavaScriptCSSを使ったスライドショーライブラリだ。 GalleriaはjQueryを使ったスライドショーライブラリで、導入が手軽で見た目もかっこうよく仕上げることができる。デモは二つ用意されており、一つは下にサムネイルの一覧、上にクリックした画像を表示している。 二つ目は左側に一覧が、右側に大きな画像が表示される。イメージタグのtitle属性に記述した内容が表示されるので、画像ごとにメッセージをつけるのも簡単だ。マウスが当たった画像だけ明るく表示されたり、写真の切

    クールなスライドショーライブラリ·Galleria MOONGIFT