jQueryで時間をカウントダウンするJavaScript「jCountr」
twitter facebook hatena google pocket ティザーサイトなどで、あと何秒でオープンみたいな表示があります。 JqueryプラグインjCountrを使用すると似たようなカウントダウンが可能になります。 sponsors 使用方法 jCountrからjquery.jCountr.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.jCountr.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#id名").counter({ hou
jQueryでマウスオーバーを印象的にする：jQuery Animated Menu
twitter facebook hatena google pocket マウスオーバー時に効果を与えることは当たり前になっていますが、もうちょっと工夫をするとユーザーの興味を喚起できるかもしれません。 jQueryの.hoverという基本的な手法を利用して、マウスオーバーを印象的にする小ネタです。 via：jQuery Animated Menu sponsors 使用方法 今回はサンプルとしてメニュー的なhtmlを記述してみます。 <ul id="menu"> <li class="home"><a href="#">home</a></li> </ul> CSSは以下とします。 ul#menu {height:81px;margin:0;padding:0;} ul#menu li a {display:block;height:81px;width:159px;text-inde
jQueryでエクスプローラ風メニューに！ (1/2)
ネットショップや情報サイトなど、複雑な階層構造のWebサイトでは、なるべく分かりやすくて見栄えのいいナビゲーションを設置したい、というニーズがあります。今回は、jQueryプラグインのひとつ、「Treeview」を使って、リストをツリー風に格好よく表示する方法を紹介しましょう。 ui／li要素をツリー表示する「Treeview」 Treeviewプラグインは、HTMLのul／li要素でマークアップしたリストをツリー風に表示するJavaScriptです。要素をクリックで開閉したり、Windowsのエクスプローラのようなフォルダ／ファイルアイコンを表示したりと、いろいろカスタマイズできるのが特徴です。開発者はJorn Zaefferer氏（Jornの「o」の上に点が2つ付きます）で、MITライセンスで公開されています。 Treeviewプラグインは、以下のページで配布されています。ページの先頭
THAT Blog: Digital & Inbound Marketing | Web Design WPB
Building Brand Loyalty Strategies in a Digital-First World Aug 15, 2024 8:15:58 AM In an age where consumers have endless options at their fingertips, standing out isn't just about having a great product—it's about creating a brand that people feel connected to. For small businesses, this challenge is amplified as they compete with larger, more established brands. So, how do you turn a one-time bu
Create a Simple CSS + Javascript Tooltip with jQuery
It's always a joy to understand how things work. Well, at least I do. Alright, this time, I want to share with you all, how to create a simple jQuery tooltip. In this website, I'm using a script I grabed it online, and it uses onmouseover and onmouseout. It's really messy and annoying me. So, it's jQuery comes to rescue. The way it works is fairly simple, I use the Anchor tag REL and TITLE attribu
角丸もグラデーションも付けてしまうJavaScript「Round Corners jQuery Plugin」
twitter facebook hatena google pocket 最近は角丸やグラデーションが多用されていますが作るのはなかなかの手間です。 JavaScriptのRound Corners jQuery Pluginを使用すると、そんな手間を省くことが出来ます。 sponsors 使用方法 Round Corners jQuery PluginからroundCorners.jQuery.jsをjQueryからjqueey.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="roundCorners.jQuery.js"></script> <script> $(document).ready(functio
JavaScriptで任意の場所にスクロールバーを付ける·jScrollPane MOONGIFT
JavaのSwingにあるJScrollPaneクラス。ウィンドウをはじめとした他のコンポーネントにスクロールバーの機能をつけることができる。これにより狭い範囲であっても多くの情報を載せられるようになる。 スキンにも対応したスクロール機能を提供する Webページでもそれは同様だ。溢れてしまった文字の扱いをどうするかCSSで設定するのがoverflowだが、それをもっと高機能にしたのがjScrollPaneだ。 今回紹介するオープンソース・ソフトウェアはjScrollPane、jQueryプラグインのスクロールプラグインだ。 jScrollPaneはDivタグに対して使う機能で、文字がはみ出した場合にスクロールバーを付けてくれるプラグインだ。スキン機能に対応し、Windows XP風やMac OSX風を使えたり、スクロールバーを一般的な右側でなく、左側にもうけることもできる。 多段のスクロー
コーディングが少し楽になる（かもしれない）meca.js - Webtech Walker
meca.jsはマークアップエンジニアのお仕事を補助しようという趣旨で作ったjavascriptのライブラリです。画像のロールオーバーやIE6の透過png対応などを実装しています。 meca.js yuga.jsやsisso.jsなど、この手のライブラリが数多く出回っている中、なぜ今更こんなものを作ったのかというと、まあ色々と作るに至った理由があるのですが、結局のところ自分で作ったのが一番使いやすし、好きにできるからというのが一番の理由です。 yuga.jsやsisso.jsと違うところは、機能の有効/無効や指定するセレクタなどの設定を外に出して簡単に変更できるようにしたところです。設定を簡単に変更できることで、ある程度柔軟に対応することが可能だと思います。 例えば、それぞれの機能で有効/無効にする設定があるので、ロールオーバーしか使わないのに他の機能も実行するのが無駄だよね、とかいう心配
Ajax » jQuery plugin » ウィンドウ、モーダル | PHP & JavaScript Room
［CSS］jquery.jgrowl.css ［JS］jquery.js v1.2.6、jquery.jgrowl.js Mac OS XのGrowl風に、メッセージを半透明の角丸ボックスに表示するjQueryプラグイン。 メッセージは、一定時間経過するとフェードアウトしながら消えていきます。 2つ以上メッセージを表示した場合は、一括で閉じるリンクが表示されます。 オプションで、メッセージの表示時間（単位：ミリ秒）、ヘッダ付き、閉じるボタンをクリックするまで表示するなどの設定もできます。 メッセージボックスが閉じられようとしている時などのイベントも取得することができます。 設置イメージ jGrowlの設置サンプルサンプルを見る<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3
jQueryを使って作るシンプルなモーダルダイアログ:phpspot開発日誌
Simple JQuery Modal Window Tutorial | Queness jQueryを使って作るシンプルなモーダルダイアログ。 jQuery単体で、ライブラリを使わずにLightBoxのようなモーダルダイアログを実現する方法です。 JavaScript45行ぐらいで、これを実現できてしまっちゃっているところが、jQueryのシェアの要因かもしれません。 シンプルなモーダルダイアログ なかなか凝ったログインダイアログ 貼り付けメモ風 仕組みとしては、グレー背景や、ダイアログ等、あらかじめ必要なHTMLエレメントとCSSは定義しておいて非表示にし、jQueryによってshow,hideしているというものです。 実際に使える有用なサンプルとしてではなく、よいjQueryの教材としても使えるかもしれませんね。 関連エントリ 便利なjQueryプラグインいろいろ ナビゲーションの
関連性をビジュアライズするJavaScript「jConnecter」
twitter facebook hatena google pocket WEB上で「AとBは関連性があるがCとはない」と表現することがあった場合、画像編集ソフトを使用するしかありませんでした。 jQueryプラグインのjConnecterを利用すると、簡単に表現することができます。 sponsors 使用方法 jConnecterからjConnecter.jsを、Canvas Text FunctionsからCanvasText.jsを、そしてjQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="CanvasText.js"></script> <script type="text/jav
[jQuery]検索結果で表示可能なTwitterブログパーツを設置できる「Monitter」
Twitterの検索結果をタイムラインで表示するようなブログパーツってなかなかないですよね。 今回ご紹介するブログパーツは、jQueryで動かす割には設定がほとんど不要で、Twitter検索結果も表示できる手軽で便利なものになっています。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! Twitter検索結果で表示できるjQueryブログパーツ「Monitter Widget」は、jQueryを使って設置でき、Twitter検索結果でも表示できるブログパーツ。 検索キーワードをブログパーツを表示するdiv要素のtitle属性に書くだけで良いので、設置もかなりカンタンです。 「Monitter」の特徴title属性が検索クエリになるlang属性で言語の絞込み可能シンプルなCSSでデザイン設定可能ここ
![[jQuery]検索結果で表示可能なTwitterブログパーツを設置できる「Monitter」](https://cdn-ak-scissors.b.st-hatena.com/image/square/7e3e2e47a03287d215e0563cc28cb00978a7644a/height=288;version=1;width=512/http%3A%2F%2Fweb-marketing.zako.org%2Fimages%2F2009%2F03%2Fmonitter.png)
[JS]ページを多言語に翻訳するスクリプト＆ブックマークレット -Sunday Morning
Google AJAX Language APIを利用して、ページ内のテキストを30以上の言語に自動翻訳するスクリプト&ブックマークレット「Sunday Morning」を紹介します。 Sunday Morning jQuery + Google Translation デモでは、ダブルクリックでナビゲーションを表示してインラインのテキストを翻訳するものと、単語単位で翻訳するものがあり、サイトのテキストもダブルクリックすると翻訳されます。 ブックマークレットは、下記ページにて作成することができます。 SundayMorning Bookmarklet Generator Sunday MorningはjQueryのプラグインのため、実装にはjquery.jsが必要です。
これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」:phpspot開発日誌
これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」 2009年03月12日- jQuery Context Menu Plugin これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」。 ちょっと前までだと独自の右クリックメニューを作るのはすごく大変でした。特にクロスブラウザで動作することなんかを考慮すると本当に大変でした。 が、このライブラリを使えば簡単に実装できてしまいます。 特定のエレメント上のみに右クリックメニューを設定できるという、柔軟なつくりになっています。 どのアイテム上でクリックしたかっていうのがイベントハンドラで受けられるところも汎用的になっていていいです。 このライブラリ１つとってみても、jQueryを使う意味が出てきそうです。 jQueryは本当にデフ
ドラッグで並べ替え可能なグリッドを実現する「draggable_grid.js」を作りました - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 本日は、久しぶりに JavaScript のライブラリを公開します。よく、画像ギャラリー等でマウスのドラッグ＆ドロップで画像の並べ替えができるものがありますが、そんな UI を簡単に実現できるものを作ってみました。以前に公開してご好評をいただいた DragResize.js のノウハウを引き継いでおり、以下の特徴があります。 JavaScript の呼び出しひとつ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JAVASCRIPT] Build a Better Tooltip with jQuery Awesomeness - クールなToolTip JS
http://www.designwalker.com/2009/03/form-design-2.html
Google Translate
[JS]ナビゲーションにツールチップをスライド表示させるスクリプト
[JS]a要素以外にも実装が可能なフレキシブルなツールチップのスクリプト -wTooltip