jQueryでブロック要素の高さを揃えてみる - 徒書
ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。 というわけでまたも自分なりに書き換えてみるシリーズなのですが、今回は要素取得の柔軟さに着目してjQueryを使ってみることにしました。 できたものは以下です。 jquery.flatheights.js 動作サンプル jQueryの$関数ではCSSセレクタの書式で要素を取得できるので、例えば「"box1"というclass名を持つ要素」を集めるのであれば
Re:href=
Re:href="#" onclick の悪習 ネタ元：某日記：href="#" onclick の悪習 <a href="#" onclick="...">検索</a> なんて書き方やめようぜ！というお話 a要素のhref属性に値が入ってるとonclick属性の内容を実行後にhref属性の値を参照しようとする。 #なんかが入ってるとページの一番上部にページ内遷移をする。(※1) 某日記さんの代替案ですけどspanで代替するもの <span style="cursor: pointer" onclick="...">検索</span> 私だとこんな書き方 <a href="javascript:void(0)" onclick="...">検索</a> onclickイベントハンドラを実行しようとしてるなら、こんな書き方もある <a href="javascript:（onclickの内容
JavaScript :: Kyosuke.jp
Flashプラグインの使用について 当ウェブサイトをご利用いただくにあたり、Flashプラグインをインストールしていただくことを推奨しております。 お手数でございますが最新のプラグインをインストールして頂きますようお願い申し上げます。 なお、テキストで表示できる情報に関しましてはHTMLで記述されておりますのでこのままご利用いただけます。 About Portfolio Kyosukeの書いたJavaScriptを公開しております。現時点ではWeb標準の日で公開したスクリプトのみです。 ロールオーバーイメージ クラス名を指定するだけで_onとついた画像をロールオーバーイメージとして設定するスクリプト。prototype.jsを使用。prototype.jsを使わないバージョンはDaniel Nolan氏のImage Rollover Codeをお使いください。要望があれば使わないバージ
edge.js (javascript image mask effect)
Initialisation class "edge" vary the mask by adding imask followed by the maskimage number: Mask image class "imask" - min=0 max=NumberOfLoadedMasks default=0 fallback mask creates soft edges without any external resource image: Fallback class "inbuilt" vary the size of the fallback mask by adding isize followed by the desired size in pixel: Edge size class "isize" - min=0 max=HalfOfImageDimension
マウスが上に来るとくるりんと文字の色を変えるスクリプト「Scrollovers」
リンクなどの文字列の上にマウスが来ると自動的にくるりんと回転する感じで文字の色が変化するというちょっと楽しいエフェクトを加えてくれるスクリプト、それが「scrollovers.js」です。 Firefox 2.0、Internet Explorer 7、Internet Explorer 6、Internet Explorer 5.5、Safari 3 (Windows)、Opera 9で動作確認されているとのことで、個人利用でも商用利用でも無料で使用できます。 論より証拠、デモを見た方が理解できます。 デモとダウンロードは以下から。 Scrollovers - A New Way of Linking http://www.scrollovers.com/ 「scrollovers.js」自体の中身がどうなっているかというのは以下からわかります。 http://www.scrollove
Tipped - A Complete Javascript Tooltip Solution
Abbott Handerson Thayer (1849 - 1921) was an American artist, naturalist and teacher. He is best known for his 'angel' paintings, some of which use his children as models. Display anything Tipped can display anything from simple snippets of text to custom designed tooltips. With build in Ajax support and a powerful Javascript API, Tipped covers pretty much every usecase when it comes to tooltips.
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
横にスライドするきれいな動きのアコーディオンJavaScript*ホームページを作る人のネタ帳
横にスライドするアコーディオンJavaScript 横に伸縮するメニューです。 何かと使えそう。 詳細は以下に。 早速ダウンロード dev.portalZINE | jQuery - Horizontal Accordion 一番下にある ○で囲った部分からダウンロード。 本当はblade_sel.pngという画像がメニューのボタンに挿入されるはずなんですが、私のブラウザではなぜか表示されませんでした。 この動きは非常に素敵なので、一度はウェブサイトに導入してみたいものですね。 Jsファイルの呼び出し <script type="text/javascript" src="lib/jquery.js"></script> <script type="text/javascript" src="lib/ifx.js"></script> <script type="text/javascri
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
JavaScript勉強会のまとめ | Blog hamashun.com
2007-07-12資料公開をした人の章にリンク追加 2007-07-12 sendさんの章に追記 超長いんでショートカットメニュー作りました。 あと、JavaScriptの素人が書いてます。 あちこち間違ってたらごめんなさい。 マークアッパー・デザイナー向けJavaScript入門 マークアップエンジニア・HTMLコーダー向け、Yahoo UI Library活用術 Google Gears入門 JSの使いどころ liveプレゼン 猿でもわかる GreaseMonkey Firebugの話 総括 Twitter関連でお世話になっているukstudioが、初心者向けJavaScript勉強会を主催してくれたので、モリモリ勉強してきました！ 会場は株式会社ノッキングオン様に提供して頂きました。 ありがとうございます！ 僕は行ってなかったんですけど、モバイル勉強会の時もお世話になったそうです。
Daniel Nolan - Home
Image Rollover Code This script is a standards compliant means of adding mouse rollover code to images in a document without the hassle of coding in extra parameters to each image in your document. This code is standards compliant and should not invalidate your document. Sample Usage To begin with you need to load the javascript into a page in the head section of your page. If you place the code
JavaScriptで画像ギャラリーを作ることができるライブラリ
i'm no longer updating this. see http://www.chungeez.com/glibtv2 for the newest image gallery (more features, flexibility and with better cross-browser manners), phodyssey for a POC with photo RSS visualization, and http://www.chungeez.com/flibt for another one. previous | next asad dot sheth at gmail dot (you know what it is) "borrow" the code =) hey all! i needed a quick gallery solution for dro
Tips001.フォーカスが当たった時、初期値をクリアする関数
これはスペースを削減するためによく使われる手法ですが、フォームのテキストフィールドやテキストエリアにあらかじめ解説するテキストを初期値にしておき、フォーカスが当たった時にそれをクリアする関数です。 サンプル ソース <script type="text/javascript"> function Input(areaname,checkvalue,formname){ if(document.forms[formname].elements[areaname].value == checkvalue){ document.forms[formname].elements[areaname].value = ""; } } function Output(areaname,checkvalue,formname){ if(document.forms[formname].elements[a
Yomotsu net
Hi I'm Akihiro, aka @yomotsu on the Internet, Who love three.js and Vue.js. 小山田 晃浩 の個人サイトです。インターネット上では yomotsu という ID で活動しています。 Blog Old Blog (no longer updated) Contact Twitter Github Speakers Deck Akihiro Oyamada (a.k.a yomotsu) I'm a Web-Front-End-Engineer, as well as a Microsoft MVP for Internet Explorer since 2011 to 2017. Playing with CSS3, SVG, WebGL and others. If you have any feedback or
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://youmos.com/news/jtageditor
http://www.godtomato.net/memo/JavaScript/value_clear.html