Javascriptに関するshinobineのブックマーク (19)

  • [JS]フォーカスされたらinputのvalue値を消す

    検索とかURLのテキストエリアなんかで使われることが多い。 マウスフォーカスで、あらかじめ表示してあるvalueを非表示にするスクリプト。 このブログテーマの検索で使われてます。 value="Keyword(s)" onblur="if (this.value == '') this.value = 'Keyword(s)';" onfocus="if (this.value == 'Keyword(s)') this.value = '';" 以上をinputタグに追加する。 onblurでマウスが離れた時、onfocusでマウスフォーカスされた時、それぞれ設定。 valueで指定されている文字列と同じにする必要がある。

    [JS]フォーカスされたらinputのvalue値を消す
  • タグクラウドのサンプル作ってみた

    タグとかめんどーだから、入れる気無かったんですけど、今更になって悪くないかも?とか思い始めたので、試しにタグクラウド設置してみました。 トップページの下の方におりますが、あんまり古いエントリーとか、タグ付け自体が適当だったりするので、あんまり使い物にならないかもしれません。。。永遠のベータ版です。 で、まぁかっこ良さげなタグクラウドを頑張ってつくろーとkiai出して作ってる途中に、ふと3ping.orgさんを思い出し、過去記事をあさってたらTag Cloudのスタイルというエントリーがありました。 んで、被ってる感じバリバリだからいっかーとか思ったんですけど、何となく作っちゃったんで公開っていう流れです。えぇ。 にしても3つほど作ったら疲れました。 ダウンロードとか実際の表示を見たい方は以下より。 サンプルの実際の画面 サンプルダウンロード(zip:17kb) スタイルシート タグクラウド

    タグクラウドのサンプル作ってみた
  • よくある質問っぽいののjQueryを使ったサンプル|CSS HappyLife

    2007年12月6日追記 IE6で選択中のタブの上が切れていたのを修正しました。 具体的にはcss/style.cssの35行目にfloat: left;を追加しております。 いろんなサイトで見かける「よくある質問」。 一番多いパターンは、リストで質問があって、アンカーで回答に飛ばす方法だと思うです。 特別ソレがいけてないとかは思わないんですが、飛んだ後に「戻るボタン」で戻らない人とかは、毎回ページトップ押したり、スクロールして戻ったりと案外手間だったりするわけです。 それならそういった手間が掛かるかも知れないことを少しでも省けないかしら?って事で、jQueryを使ってタブ型で折りたたまれたよくある質問っぽいサンプルを作ってみました。 (単純にボクがこのスタイルが一番見やすくて好きってだけだったり) サンプルページ サンプルダウンロード(Zip:20KB) メインのCSSファイル (サンプ

    よくある質問っぽいののjQueryを使ったサンプル|CSS HappyLife
  • [JS]Page Scrollerと他のjQueryプラグインとの実装サンプル

    当サイトで配布している「簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3」と他のjQueryプラグインとの実装サンプルの紹介です。 Smart Floating Banners パネルがスクロールに追随して表示されます。 配布元:Smart Floating Banners Smart Floating Banners ユーザーのスクロール操作、Page Scrollerの挙動のスクロールにパネルが追随します。 パネル上の「Top of Page」は、Page Scrollerの挙動です。 Tips: フロートするパネルは画像など実体がある方がベターです。 サンプルのようにスタイルシートの矩形の場合はwidth, heightなどしっかり指定します。 jQuery Footnotes 脚注を抽出し指定箇所に配置します。相互リンクは自動

    shinobine
    shinobine 2009/06/24
    使ってみたい
  • [JS]外部サイトのリンクにfaviconを表示して、分かりやすくするスクリプト

    外部サイトのリンクにfaviconを表示して、分かりやすくするスクリプトをLiviu Holhoşから紹介します。 Add a favicon near external links with jQuery demo デモでは外部サイトのリンクのみfaviconを表示し、同一ドメインのリンクには表示しません。 スクリプトには現在、下記の懸念事項があげられています。 faviconが予想した場所に無かった場合。 faviconがそもそも無かった場合。 faviconのtitle属性。 また、上記の懸念事項をクリアしているスクリプトがコメント欄で紹介されています。

    shinobine
    shinobine 2009/06/24
    これいいよねー
  • このページの先頭へ、をちょこっとおしゃれに | S i M P L E * S i M P L E

    ブログでもサイトでもよく見る「このページの先頭へ」のリンク。長~いページだとそのリンクで一瞬に先頭に行ってしまい、読んでいる人が混乱することもよくあります。 そこでご紹介したいのが「するするるーーー」と先頭まで戻ってくれるJavascript。このブログでも導入してありますので是非体験してみてください。 ↑ ページの下の方でこの「↑」を押すとするすると上まで戻ります。 導入方法は簡単でJavascriptを導入し、「このページの先頭へ」リンクにonClickイベントを仕込むだけです。 仕込むJavascriptはこちら。ちなみに元ネタは「A (slightly) better technique for “Back to Top” links.」です。ページ内に書き込んでも、外部ファイルにしてもいいでしょう。 function backToTop() { var x1 = x2 = x3

    このページの先頭へ、をちょこっとおしゃれに | S i M P L E * S i M P L E
    shinobine
    shinobine 2008/08/27
    一応これも
  • ハタさんのブログ(復刻版) : javascriptを初めて学ぶ人についてのおさらい。その1

    僕にも教える人ができた(? というか人にモノを教える立場)になったので、とりあえず、最近はもっぱらjavascriptを教えています。 もともとCやJavaなどについてはある程度の知識がある人なので、それを少しjs的な意味で、関数言語的な教えをやっている最中のメモ 変数って何ですか?変数って値もしくは式そのものに利便的な名前をつけているものです 次のhogeとfooは値をいれる箱ではなく、値そのものに別名(もしくは分かりやすい名称)を割り当てているだけに過ぎませんよ。 var hoge = 1; var foo = [1, 2, 3]; alert(hoge + 1); // 2 alert(foo[0]); // 1 alert(1 + 1); // 2 alert([1, 2, 3][0]); // 1 つまり、関数自体を変数に代入する事ができます。(functionとは特別な呼び名

    shinobine
    shinobine 2008/01/12
    未だに理解できない私向け
  • expression() > 仮想-position:fixed

    ソースコード /* position-fixed */ body { filter:expression(''); } #fixed { position:fixed; _position:absolute; z-index:2; top: 0; left:0; _top: expression( document.documentElement && document.documentElement.scrollTop || document.body && body.scrollTop || 0 + 0 + 'px' ); _left:expression( document.documentElement && document.documentElement.scrollLeft || document.body && body.scrollLeft || 0 + 0 + 'px'

    shinobine
    shinobine 2008/01/04
    というかIEがposition:fixed;を取り入れれば早いのに。
  • http://youmos.com/reference/set_element_class.html

    shinobine
    shinobine 2007/12/27
    まぁ。
  • [JS]ページ内をスムーズにスクロールできるスクリプト:更新- 3.0.1

    ページ内をスムーズにスクロールできるスクリプト:Page Scrollerの最新版「3.0.1」をリリースしました。 スクリプトの詳細やダウンロードは、下記よりどうぞ。 簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 主な変更点は、下記の通りです。 3.0.1 スクロール中のマウスのクリックに対して、スクロール動作が止まるようにしました。 スクロール中の別のアンカーへのクリックに対して、スクロール動作が止まるようにしました。 jQuery 1.2.1に対応しました。 ファイル名を「page-scroller.js」から「jquery.page-scroller.js」に変更しました。 実際に使用する際は、どちらのファイル名を使用しても問題ありません。

    [JS]ページ内をスムーズにスクロールできるスクリプト:更新- 3.0.1
    shinobine
    shinobine 2007/12/27
    個人的にコレすごい好き
  • 透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる - DesignWalker

    shinobine
    shinobine 2007/11/29
    これは必見ですな。
  • HTML崩壊 meltdown.js - KAZUMiX memo

    #ff0000">2008年12月29日追記:逆再生する新バージョン「HTML崩壊Reverse! meltdown2.js」をアップ #ff0000">2009年4月21日追記:さらに進化したバージョン「HTMLの暴走(meltdown3)」をアップ まずは軽いページでお試しください。例えば Google とか。*1 javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";var da=new Date();s.src="http://www.rr.iij4u.or.jp/~kazumix/d/javascript/meltdown/meltdown.js?"+da.getTime(); document.body.appendChild(s)})(); これを適当なページのアドレスバ

    HTML崩壊 meltdown.js - KAZUMiX memo
    shinobine
    shinobine 2007/11/09
    これはすごい
  • [JS]スピード調節可能な開閉式ナビゲーション -Slashdot Menu

    Slashdot Menuは、変数によりスピード調整などカスタマイズが可能な開閉式ナビゲーションのスクリプトです。 Slashdot Menu ナビゲーションの開閉時のスピードや開閉状態のクッキーへの保存の有無などがカスタマイズすることができます。 Slashdot Menuのナビゲーションの項目はspanでマークアップが行われています。 ブラウザ対応は、IE5やFx1などの古いブラウザにも対応しています。

    shinobine
    shinobine 2007/11/09
    うーん。好みが分かれるけどね。
  • [ JavaScript ] 検索窓をクリックすると文字が消えるサンプル

    検索窓の中に「Search…」みたいな文字があって、クリック(フォーカス)すると文字が消える JavaScript のサンプルです。 サンプルコード ———————————————————————- <input type="search" value="Search" onfocus="if (this.value == 'Search') { this.value='' }" onblur="if (this.value == '') { this.value='Search' }" /> 上のソースは、読みやすい様に改行を入れています。 実際に動作するサンプル ———————————————————————- – サンプル

    [ JavaScript ] 検索窓をクリックすると文字が消えるサンプル
    shinobine
    shinobine 2007/11/03
    ずっと知りたかった
  • CSS レイアウト切り替えスイッチ | WWW WATCH

    Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら (zip ファイル / 10KB) デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択

    CSS レイアウト切り替えスイッチ | WWW WATCH
    shinobine
    shinobine 2007/10/30
    いつも付けようかどうしようか迷うんだよね
  • lockエラー | 月額200円からのレンタルサーバー JSN

    auのトップページのような、伸縮してスライドするメニューをjavascript+cssで作れるみたいです。「Image Menu」というライブラリで、動かすにはmootools.jsが必要のよう。 <script type="text/javascript" xsrc="imagemenu.js" mce_src="imagemenu.js" ></script> <div id="kwick"> <ul class="kwicks"> <li><a class="kwick opt1" xhref="" mce_href="" ><span>TOP</span></a></li> <li><a class="kwick opt2" xhref="" mce_href="" ><span>CSS</span></a></li> <li><a class="kwick opt3" xhref

    shinobine
    shinobine 2007/10/30
    jsはいつも思うけど不思議だよねー
  • lockエラー | 月額200円からのレンタルサーバー JSN

    まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※(米印)」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず1文字分右に動かして、「text-indent : -1em;」で最初の行だけ1文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で

    shinobine
    shinobine 2007/10/30
    試してはみたい。
  • 徒委記

    徒委記 (FrontPage) 説明 最近の更新 説明 徒委記と書いてitazurawikiと読みます。いたづらにしるすことをゆだねています。要は誰でも編集可能なページ群です。 今のところ以下のものが主なコンテンツになってます。 HTML議論リンク集のリンク集 CSS切替スクリプト 短編感想リンク集 YukiWikiを改造して使っています。 徒委記の改造点 最近の更新 2022-12-14 (Wed) 22:09:15 CSS切替スクリプト - なるべくDOM標準に沿うようにCSS切替スクリプトを書いてみる試み。 2018-01-24 (Wed) 20:01:02 application/xhtml+xmlなサイト - ページのメディア型にapplication/xhtml+xmlを使用しているサイト。 2016-09-19 (Mon) 00:32:27 NoMoreCSSHacks -

    shinobine
    shinobine 2007/07/13
    CSS切り替えスクリプトの配布元。HTMLについての考察がすばらし。
  • 今すぐレジーナクリニック良い口コミは悪い口コミのウワサって…

    チェック!レジーナクリニック良い口コミや悪い口コミの疑問点 やっぱり映画はホラーが一番面白いと思います。 施術部屋が現実には味わえない感覚で、とても刺激的です。 営業レジーナクリニックが突然鳴ってびっくりするのはベタすぎますし、施術料金でしかないので、評価を下げます。悪い口コミに意外なところがまるでないのも飽きてしまうため、営業レジーナクリニックで結末を知る前に、ストップすることが多いです。カ月が群がって、みたいな演出は私的にはホラーにはいらないと思います。 回ゴールドコースを子供の頃から愛好しているのですが、レジーナクリニック良い口コミは抵抗せずにゾンビになった方がいいのかもと思ってしまうような結末になるのが悲しいです。紫外線とストーリーを両立させている作品はなかなかありません。レジーナクリニック表参道店が悲しいです。 ここ一週間ほど、便通の悪さを感じています。 レジーナクリニック良い口

    shinobine
    shinobine 2006/03/09
    知られていないが結構使える。
  • 1