jQueryを使った一定以上スクロールすると上に固定される横メニュー
最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したHTMLとCSSも解説します。 HTML よくあるタイプの普通のリストメニューです。 <div id="menu-wrap"> <ul id="menu"> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <l
jQueryメモ：親要素だけ消すってどうやるんだろう？
上の図にしたように、子要素を持つ親要素のみを削除したいとき、 jQueryを使って表現するにはどうしたらいいんだろう？ なんてのを悩んで結局できなかった。 とりあえずためしたものをメモエントリーとして書いておく。 2009/02/18修正 できなかった例 一応使用HTML ■HTML <a href="#damy"><span>ダミーテキスト</span></a> これにJavaScriptを適応させて、 リンクが外れていたら成功になる。 失敗だと、上のようなままか、もしくは中身が消失する。 当然remove()は中まで消える ■スクリプト $(function(){ $('a[href*="damy"]').remove(); }); ちなみに、$('a[@href*="damy"]')の部分はa要素のリンク先のURLで 「damy」の文字を含んでいるリンクを対象とするという指定です。
細かい設定も可能な吹き出し（ツールチップ）JavaScript「mouseinfobox plugin for jQuery」
twitter facebook hatena google pocket テキストや画像にマウスを乗せた時に説明が吹き出しのように表示されるツールチップは補足説明などに役立ちます。 それを簡単にかつ細かい設定も可能にしたMouseinfobox plugin for jQueryを消化します。 sponsors 使用方法 Mouseinfobox plugin for jQueryからファイルをダウンロード。 <link rel="stylesheet" href="jquery.mouseinfobox.css" media="all" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.mouseinfobox.
IEの透過PNG+opacityの不具合を治すメモ - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 透過PNGの処理が下手くそなのは、IE6だけではなく、IE7/8も同様です。 IEで透過PNGをあてた要素のopacityを弄ると、周りがグレーがかって汚くなります。 この現象はよく知られていると思いますが、今日はこの不具合の治し方のメモを記しておきます。 サンプルコード 例えば、こんなコード。 <style> .test { display:block; width:128px; height:128px; background:url(./test.png) 0 0 no-repeat transparent; } .test:hover { background-image:url(./test-hover.png); } </style> <a href="#" class="test"></a> test.pngとte
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dev7studios