タイプライターっぽいエフェクトを実行できる jq.typewrite :: 5509
今さらなんでもないメソッドですけど、せっかく作ったので記事書いておきます。対象要素内のテキストを一文字ずつ表示するだけです。 jq.typewrite のサンプル ホスト / ダウンロード 5509/jq.typewrite – GitHub ダウンロード 使い方 そのままつかう 最初に $.typewrite(jQueryオブジェクト) で初期化しておきます。あとは任意のタイミングで .play() メソッドでエフェクトを実行できます。 .play(4) のように実行時に duration を決めることもできます。 .play() メソッドは jQuery Deferred オブジェクトを返すので、完了時に何かしたいときは .done() でつなげばOKです。 JavaScript var typewrite1 = $.typewrite($('#typewrite1')); $('#d
使いやすいセレクトボックスを実装できる jqselectable.js :: 5509
3年くらい前に最初のバージョンを作ったjQselectableをほぼ全て書き直しました。書きなおす流れで以前のものと互換性がなくなってしまったので、新しいものとして公開します。 jqselectable のサンプル 5509/jQselectable – GitHub 使い方 実行する前に ファイルをgithubからダウンロードして、CSS/JSファイルを読み込んでおきます。 jQueryプラグインなので、jQueryも読みこんでおきます。推奨は一応最新バージョンです。 CSSは jqselectable/style の中に selectable natural xp と3つ入っているので好きなものを選んでください。自分で書いても大丈夫です。そのときはgithubからpullリクエストください。 実行する ready関数は必要に応じて使ってください。 jQuery(function($){
[Javascript] 外部スクリプトから呼び出されているjavascriptファイルのパスを取得する関数 - 考え得る最高を常に行う
どこかで似たようなエントリーを見かけたけど見つからないので自作してみた。問題が多く実用的じゃないので注意 IE7,Firefox2,Safari2,Opera9.20で確認して動いてたので実用で使っても大丈夫。 HTMLリード中にjavascriptが解釈されることを想定して 下記のコードをscriptタグで指定して開く var getScriptPath = function(){ var f=function(e){ var name=e.tagName; if(!!name && name.toUpperCase()=='SCRIPT') return e; var c=e.lastChild; return (!!c)?f(c):null; }; var es=f(document); if(!es) return window.location; return es.getAtt
![[Javascript] 外部スクリプトから呼び出されているjavascriptファイルのパスを取得する関数 - 考え得る最高を常に行う](https://cdn-ak-scissors.b.st-hatena.com/image/square/46773142a121b5214febd1cb0c46c15ce458dfad/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F17680117127091821896%2F17680117127091827330%2F1556526082)
リンクしているパスから JavaScript（jQuery）でファイル名を抽出する方法。
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog PHP には「basename()」や「dirname()」という便利な関数があり、それぞれファイル名とディレクトリ名を、指定したパスから抽出することができます。 しかし、JavaScript にそんな便利機能はありません。 自ら処理を用意してやる必要があります。 今回はその処理と、jQuery を使って簡単に適用する方法をご紹介します。 JavaScript でファイル名とディレクト名を抽出 まずは「指定したパスからファイル名を抽出」する方法。 これは僕が考え出したのではなくて（それが出来たら初めから悩まない）、色々調べた挙句に辿り着いた海外の記事で紹介されていたものです。 »Javascript basename() and dirname() « plane
Google JavaScript Style Guide 和訳 — Google JavaScript Style Guide 和訳 v0.1 documentation
この和訳について¶ この文章は Google JavaScript Style Guide を非公式に和訳したものです. 内容の正確性は保証しません. ライセンスは原文と同じく CC-By 3.0 とします. フィードバックは Issue への登録 , あるいは Kosei Moriyama (@cou929 または cou929 at gmail.com) へ直接お願いします. この和訳のリポジトリは こちら です.
elRTE,elFinder（jQueryベースのWYSIWYGエディタ）のインストール方法 その2：ヨシダ制作メモ：らくがき通信：WEBシステム開発・WEBサイト制作 ヨシダスタジオ
●elFinder(ファイルマネージャー)インストール 前回からの続きです。 elFinder（ファイルマネージャー）を搭載したelRTE（WYSIWYGエディタ）を設置方法です。 elFinder（執筆時version1.1）はPHPまたはPythonの使える環境が必要になりますが、今回はPHPを利用して設置します。 Connector, at the moment there are connectors for PHP and Python Image preview and thumbnails creation requires: PHP: mogrify utility or GD/Imagick module Python: PIL library 本家に記述はないようですがPHPバージョンは5以上っぽいです。 私はPHP4であれこれいじっていてしばらくはまって
まるで何かのOSに搭載されているようなブラウザベースの高機能ファイルマネージャ「elFinder」:phpspot開発日誌
まるで何かのOSに搭載されているようなブラウザベースの高機能ファイルマネージャ「elFinder」 2010年08月31日- elFinder - file manager for web まるで何かのOSに搭載されているようなブラウザベースの高機能ファイルマネージャ「elFinder」。 次のような左側にツリービュー、右側にファイル一覧のインタフェースをもち、ファイルはドラッグ＆ドロップも出来たりするリッチなブラウザベースのファイルマネージャを実現できるオープンソースです。 フォルダはAjax形式で画面遷移せずに中身を表示することが出来ます。 ファイルのアップロードは勿論、フォルダや新規ファイルをその場で作るような機能もあります。 新規ファイルはその場で直接編集することだってできちゃいます。 ツールバーから色々な操作が可能です。 認証など、気をつけたい部分はありそうですが、ちょっと設置し
David DeSandro: jQuery Masonry
Masonry is a layout plugin for the ever-popular Javascript library jQuery. Download jQuery Masonry Think of Masonry as the flip side of CSS floats. Where as floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. The result leaves no vertical gaps between elements of varying height, just like a mason fitting stones in a wall. Invoking Masonry only
Google、自社のWebアプリ作成ツール「Closure」をオープンに
Googleが、GmailやGoogle Docsの開発に使っているJavaScriptコンパイラやテンプレート、ライブラリをオープンソースとして公開した。 米Googleは11月5日、Gmailなどの自社アプリ開発に使っているJavaScriptツール「Closure Tools」をGoogle Code Labsでオープンソースとして公開したと発表した。 Closureは、「Closure Compiler」「Closure Inspector」「Closure Livrary」「Closure Templates」で構成されている。Closure CompilerはJavaScriptで書いたWebアプリケーションのコードを最適化し、無駄を省いて高速・高性能化させるコンパイルツール。Firefoxの機能拡張として提供されるClosure Inspectorとともに使うことで、コードの
JavaScriptライブラリで作るリッチUI（まとめ）
Webサイトを使いやすく、楽しくするリッチなユーザーインターフェイス（UI）。手軽に使えるオープンソースのJavaScript／Ajaxライブラリが充実してきたおかげで、従来はFlashでしかできなかったようなUIが、HTML/CSS＋JavaScriptだけで作れるようになった。 ここに、ASCII.jpで紹介したJavaScriptライブラリの使い方、実際の採用サイトの情報をまとめてみた。ぜひ自分のWebサイトのUI制作の参考にしてみよう。 ※このページは随時更新します Last update：2008年12月18日 JavaScript／Ajaxライブラリ紹介記事
IEでのJavaScriptデバッグを可能にする「CompanionJS」:phpspot開発日誌
My DebugBar | CompanionJS / HomePage IEでのJavaScriptデバッグを可能にする「CompanionJS」。 サイトでインストールをすると、ＩＥにドッキングされます。 インストールするだけでは使えず、インターネットオプションの「スクリプトのデバッグを使用しない」チェックを外す必要があります。 インストール後は、次のように「表示」メニューから表示することが出来ます。 表示すると次のような感じ。 エラーが出ると右側にエラーが出て、クリックするとスクリプトのエラー箇所に移動し、ハイライトされます。 また、サイトでエラーがあると次のようにブラウザ上で通知してくれます。 ＩＥでもデバッグしたい場合がありますが、このツールはなかなか使えそうですね。 もっといろんなデバッグをしたい場合はデバッグバーというものがあるようです。 DOMインスペクタ、HTTPインスペ
jQuery 日本語リファレンス
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ？'); }, function(){ $(this).text('ヌー'); } );
JavaScript(AJAX)サンプル集 Yahoo! User Interface Library(YUI) - Drag and Drop Utility
スポンサードリンク Yahoo! User Interface Library - Drag and Drop Utility Drag and Drop Utilityとは ドラッグ＆ドロップ可能な要素を作るためのユーティリティーです。ドラッグやドロップのイベントハンドラーを間単に作成することが可能なフレームワークが用意されています。 詳しくはhttp://developer.yahoo.com/yui/dragdrop/のオリジナルを読まれるのがよいと思います。 Drag and Drop Utilityを使う前準備 必要なのは4つのファイルです。もちろんインストールは済ませておく必要があります。 <script type="text/javascript" src="your install path/yahoo-min.js"></script> <script type="tex
jQuery 1.1 と他のライブラリ（Prototype, YUI, MooToolsなど）を併用する方法 - のほほん徒然
第三十五回 先日紹介した jQuery 1.1 では，HTML要素を選択するために$();を使っています．しかし，この関数は他の主要JavaScriptライブラリ*1でも同じように使われているので，複数のライブラリを同時に利用すると思わぬバグが出たりします． jQuery 1.1 では，他のライブラリと同時利用しても大丈夫なように設計されているため，jQuery.noConflict();という一行を書き足すだけで他のライブラリと一緒に使えます． 以下では Prototype と一緒に使う例を示します． <html> <head> <script src="prototype.js"></script> <script src="jquery.js"></script> <!-- jQuery を後に読み込みます． --> <script> jQuery.noConflict(); //
Instant.js (now with IE 6/7 support)
Download instant.js and include it into your webpage. // only if you want to use the annotation feature... <script type="text/javascript" src="cvi_text_lib.js"></script> // ...else this one only... <script type="text/javascript" src="instant.js"></script> Initialisation class "instant" vary the shadow by adding ishadow followed by the desired opacity in percent: Shadow opacity class "ishadow" - mi
Ajax+PHP+MySQLな投票ウィジェット:phpspot開発日誌
Masuga Design 実Unobtrusive AJAX Star Rating Bar This is a rating bar script done with PHP and mySQL that allows users to rate things like can be done on Netflix or Amazon, all web 2.0-like with no page refresh. Ajax+MySQL+PHPな投票ウィジェット。 次のようなWeb2.0風のレーティングバーを簡単に実装できます。 必要なphpファイルをインクルードしておけば、たった一行、次のように書くだけでレーティングバーを実装できるようです。 （JavaScriptとCSSのファイルも使用するHTML内でインクルードする必要があります。) <?php rating_bar('2',5)
[JSAN] XML.ObjTree
XML.ObjTree クラスは、Perl 用の XML::TreePP モジュールの JavaScript 版です。 XML ファイルと JavaScript オブジェクト（連想配列）間の相互変換を行います。 prototype.js または JSAN の HTTP.Request クラスと併用することで、 JKL.ParseXML の 後継 としても利用できます。 ECMA-357 の普及を待たずに、 ECMAScript for XML (E4X) 風のXMLのオブジェクト利用が可能になります。 Intel Mac 版の Safari で、 DOMParser オブジェクトの async プロパティが read-only となる点にも対応しています。 IE で（サーバ上でなく）ローカルのXMLファイルを開きやすくなりました。（2006/08/14） オンラインDEMO DEMO（お試
jQuery 開発者向けメモ
jQuery 開発者向けのメモです． ずっと以前に，jQuery に関する日本語の情報がまだ少ない頃に作ったページですが， その後 jQuery を再び利用する機会があったので，最新バージョン向けに記述を更新しました． 住宅ローンシミュレーションです． jQueryを利用したフォームの動的な追加や，flotプラグインによるグラフ描画などを行っています． 本ページの記載に間違い等見つけた方はブログのエントリまで連絡いただけるとうれしいです． 最終更新：2009/1/10 jQueryとは jQuery は様々な処理を短く簡単に書ける JavaScript ライブラリです． 独自のXPATH/CSSセレクタを利用することで，多くのDOM操作を非常に簡単に書くことが出来ます． JavaScriptのDOM操作や，XMLHTTPRequest，XMLの操作などを覚えなくとも， Ajaxを利用したイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Parsing URL hash/fragment identifier with JavaScript
masonryというライブラリが便利そうなので試してみた。 - zonolog