[JS]シンプルながら優れモノ！ホバーやクリックでさまざまなツールチップを表示するスクリプト -DarkTooltip
ツールチップ系のスクリプトは数多くありますが、これはなかなか使いやすそう！ トリガーはホバーだけでなくクリックにも対応、HTMLコンテンツの表示にも対応、カスタマイズにも優れており、カラー、サイズ、不透明度、表示方向、アニメーションのさまざまなエフェクト、Confirmからのイベントにも対応しています。 上段はサイズ、中段は方向、下段はアニメーション アニメーションなどの実際の動作はデモページでぜひ試してみてください。 DarkTooltipの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとしてhead内に記述します。 <head> ... <link rel="stylesheet" href="darktooltip.css"> <script src="jquery-1.10.2.min.js"></script> <script
IE7でoverflow:hiddenが効かなかった話 - Qiita
2014年にもなってIE7ネタを書くのも気がひけたんですが、同じ症状で詰まっている人に2,3人はいるだろう・・と思ったので書いてみました。ちなみに、既出ネタです。 今回取り上げるネタ 「overflow:hiddenを指定した親要素内にposition:relativeを指定した子要素を配置すると、IE7ではoverflow:hiddenが機能せずに子要素がはみ出る」というものです。 対処法 結論から先に書きますが、この現象は「 親要素にposition:relativeを指定する 」で解決できます。 サンプル 現象を再現可能な簡単なHTMLを書くと、以下のようになります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>doesn't work overflow hidden</title> <link rel="s
【jQuery】 $(this)の親要素、子要素、隣接要素を指定する - マーカーネット株式会社
jQueryでイベントが発生した要素を指定する$(this)。 jQueryを初めて使った頃は$(this)ってなんだ!? なんで普通に<li>なら$(“li”)じゃだめなの～!? なんて思いましたが大きな違いですよね。 そして次につまづいたのが、$(this)の親要素、子要素、隣接要素やらは一体どうやって指定するのだろ～～～でした。 <div> <ul> <li class=”menu01″><span class=”sp01″>メニュー01</span></li> <li class=”menu02″><span class=”sp02″>メニュー02</span></li> <li class=”menu03″><span class=”sp03″>メニュー03</span></li> </ul> </div>
[DEMO]jQueryで作るアニメーションするマウスオーバーボタン基本５種 | webOpixel
jQueryで作るアニメーションするマウスオーバーボタン基本５種 フェードイン・フェードアウトで切り替わるナビゲーション くるっと切り替わるナビゲーション 何かが追尾するナビゲーション 拡大するナビゲーション 横からぐいんって伸びるナビゲーション 横からぐいんって伸びるカスタム
クリエイターのためのWebテク講座 -スクロール位置によって表示される「ページTOPへ」ボタン
ブログなどの、ページが縦に長いサイトでよく見かける「ページTOPへ」ボタン。ただ単純に、ページがスクロールするだけなら簡単に実装できますが、今回は、スクロールがある程度進んだら表示される仕組みを実装してみましょう。 サンプルを見る スクロールの位置によって処理を振り分ける。 まずはボタンの配置です。 #toTop { position:fixed; bottom:20px; right:20px; background:#000; color:#FFF; padding:10px; display:none; cursor:pointer; } まぁ、単純に「position:fixed」で配置しているだけですね。 IEの7以上であれば問題なく動作します。 では次に、JavaScriptの実装ですが、第17回・18回のパララックスの実装の際と同様に、スクロールイベントで、「scrollTo
スマホ対応！パララックスサイトの作り方 | SONICMOOV LAB
皆様おひさしゅうございます。 ラーメン女子のうさこでございます。 最近は大好きなラーメンも食べるのを控えています。 えらいことになってるんですよ・・・ 親に骨皮筋子と言われた私でも・・・！ 以前、会社の飲み会でデザイナーのユウコさんに、25 歳を超えるといくら食べても太らなかった体質も変化するから気をつけた方がいいよ！・・・というありがたい言葉をいただきました・・・ まさに今、身に染みて体感中でございます（涙 4月9日をもって Windows XP がサポート終了となりましたね！ これで IE6 との長き戦いにも終止符が打てそうですっ！やっとですよ、やっと・・・！ IE6 消え失せろ～♪ ついでに言うと、IE8 も消えちゃっていいんだぜ☆ さて・・・今回で3回目の投稿となりますっ 今回は、スマホに対応したパララックスサイトの作り方についてご紹介！ Sublime Text ネタで通してきた
DAD UNION – エンジニア同盟｜世のエンジニアを手助けするテック系サイト
JavaScript JavaScriptで簡単にBase64エンコード＆デコードの完全ガイド 2024-06-10 dad-union
スクロールイベントの開始 / 終了 / 方向を判定する jQuery プラグインを書いてみた - Cyokodog :: Diary
バージョンアップしました。詳細は以下記事をご覧ください。[Ex Scroll] スクロールイベントの開始／終了、方向を判別できる jQuery プラグイン - Cyokodog 需要なさそうですが、備忘録ということで。 只今、以前作成した exFixed.js という jQuery プラグインの機能拡張を行っており、その中で、 スクロールイベントの開始、終了時にのみ処理を行う その際、スクロールイベントのスクロール方向に応じて処理を変える という実装が必要になりました。 jQuery におけるスクロールイベントの割当は下記のような記述になりますが、このままではイベントの開始,終了,スクロール方向は判別できません。 $( element ).scroll( function( evt ){ //スクロールイベント内処理 }); 以下の実装で判別できないか考えてみました。 スクロール方向の判別
jQueryで順番にアニメーションする方法を考える | スターフィールド株式会社
jQueryを使ってアニメーションさせる場合、アニメーションを同時ではなく、 何かの動作が終わった後、順番に実行するということも必要になってきます。 特に最近は、サイトのコンテンツもパララックスを使ったものなど、リッチなものが増えており、 そういった機会も増えてきています。 そこで、jQueryを使って順番にアニメーションする方法について、２つほど取り上げてやってみました。 ↓デモはこちらから DEMO 今回は、 車が走ってくる 車が木にぶつかって木が揺れる 鳥が逃げ出す という順番で実行するアニメーションを考えます。 まず車が走ってきた後に、木にぶつかって木が揺れるところまで。 jQueryでは、animate()で、コールバック関数を指定することで、 アニメーションが終わった後に、別の動作をさせることができるので、 それを利用しようとしましたが、 そうした場合、 今回のように特殊なイー
パララックスというか、スクロールでアニメーションさせるjQueryプラグイン「ScrollTween.js」
パララックスというか、スクロールでアニメーションさせるjQueryプラグイン「ScrollTween.js」 こんにちは、鴨田です。 今年に入ってから、パララックス効果を用いたサイトをよく見かけますね。 春くらいに話題になって、定番のプラグインもあるので、最近もいろいろなところで見かけます。 とはいえ、最近は視差効果で奥行きを表現するというよりも、 単純にスクロールに連動してアニメーションさせることも含めて、 パララックスサイトと呼んでいるが多いのではとも思います。 何かと話題のスマホアプリ「comm」の紹介ページもそうですね。 そんな流行に従って、パララックスサイトの作り方を少しご紹介できればと思います。 今回ご紹介するのは、「ScrollTween.js」というプラグインです。 シーエーモバイル社のコーポレートサイトを作成するために開発され、 せっかくだからということで、公開されている
九州天然水。高級軟水、送料無料!「一万年の雫-送料無料通販-」
カラダに優しい、料理に美味しい天然ミネラル水。日本の風土、日本人のカラダに適した水（ミネラルウォーター）です 採水制限をしている希少な天然水は、一般ミネラルウォーターと比べ極上のまろやかさと飲料、美容、料理にと使用範囲の広さとその効果が全国のお客様よりご好評を頂いております。 人間の細胞体液と同一範囲内のpH7.4はカラダに負担なく飲めるナチュラルミネラルウォーターです。 また硬度11mg/Lの超軟水は料理等の旨みを引き出します。 2024.01.12 ボトルのキャップシールの仕様変更のお知らせ。 令和6年1月よりボトルのキャップシールが無くなりキャップのみとなります。 昨今の運賃、資材等の急激な高騰の為ご理解賜りますようお願いいたします。 2024.01.12 令和6年能登地震、心よりお見舞い申し上げます。 この度の令和6年能登地震により被害を受けられた皆様に心よりお見舞い申し上げます。
ブロックレベル要素の高さを揃える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
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
jQueryでフィルタ（フィルタリング）機能をシンプルに実装する方法｜BLACKFLAG
写真の一覧ページなど、Webページ上でたくさん並べられたコンテンツ要素に対して カテゴリ分けした括りなどで、絞り込んだ状態で表示するフィルタ機能。 ページ上に表示する要素が数多くある場合に有効な機能になったりしますが そんなフィルタ機能をjQueryを使ってシンプルに実装するサンプルを作ってみたので紹介してみます。 まずは動作のサンプルから。 下記画面の上部にあるカテゴリリンクをクリックすると そのカテゴリの種類で絞り込まれた状態で画像が表示されます。 フィルタ用のリンクをクリックすることで サイズの縮小とフェードのアニメーションが付いた形で 画像がフィルタリングされます。 このフィルター機能の全体構成について、 まずはHTMLから。 ◆HTML <div id="filter"> <a href="javascript:void(0);" class="allitem">ALL</a>
vanity jquery toolset - brought to you by the enavu network - makeup for your web sites
Making Magic Happen The vanity toolset was started as more of an initative to create simpler (less code) and easier to implement plugins, the aftermath is a set of tools (still growing) that not only make it very easy to implement but also are done in the lightest footprint any plugin has ever been written in. The set includes what we believe to be some of the most important make up your site can
jQueryでのワイルドカードSelector - mtoyoshi開発メモ
こんなHTMLがあった時に、最初の3つに対してのみ、とあるクリックイベントを設定したいという時がある。 <button id="btn1">ボタン1</button> <button id="btn2">ボタン2</button> <button id="btn3">ボタン3</button> <button id="other">関係ないボタン</button> そんな時、jQueryのselectorを使ってこんな風に設定できたらなぁと思っていた。が、こういうワイルドカードを使ったような指定はできない。 $('#btn*').click(function(){ }); 無理かぁと思っていたら、別のやり方でいけました！ $(':button[id^=btn]').click(function(){ }); リファレンスをちゃんと読め、という話ですねｗ
個人的に気に入ってる10のLightbox系jQueryプラグイン及び、その特徴まとめ - かちびと.net
個人的に気に入ってよく使っている、又は いつか役に立ちそう、いずれ使いたい的な Lightbox風に拡大実装出来るjQueryプラグ インのまとめです。使うときにいちいち引っ 張り出しているのが面倒なのでまとめにして ついでにシェアしようと思って記事にします。 オーソドックスなものから、やや特徴的なもの、Twitterで「こんなのない？」って聞かれて探したものなど10個厳選です。特徴も一緒にメモしておきます。 なお、画像を使うjQueryプラグインにご興味が有るようでしたら、以前書いた画像を使ったいろいろなjQueryプラグイン224個まとめも参考にして頂けるかと思います。 colorbox 一番よく使っているかもしれません。MITライセンスで、グループ化⇒スライドも可能。また、iPhone、iPadでも動いて表示も崩れません。エフェクトも変更可能で、YoutubeやIframe、Flas
LightBox系スクリプト 16選 | Like@Lunatic
Lightbox系スクリプトの情報が一覧表になっているThe Lightbox Clones Matrixという素晴らしいサイトがあります。ここから一通り見て回って、自分なりに使えそうなものをピックアップしてみました。ほとんど勢いでまとめたものなので、情報としての正確性は低いかもしれませんが、ご容赦を。半分は自分用ってノリです。 自分はLightbox系のスクリプトを選ぶ時、そのサイトに予め組み込まれている（組み込む予定の）JSライブラリで使えるかどうかを基準に選ぶことが多いです。なので、必要とするJSライブラリ別にカテゴライズして並べています。 Highslide JS 必要ライブラリ： – 対応形式： 画像、画像ギャラリー、インライン、インラインフレーム、Ajax、Flash 対象指定： class属性＆onclick属性 ライセンス： CCライセンス 表示-非営利 2.5 一般 非商
jQuery版のLightBox「ThickBox」
jQuery版のLightBox「ThickBox」 ThickBoxはLightBoxのjQuery版とも言えるJavaScriptライブラリで、画像をクリックするこのにより拡大画像を表示させることが可能です。 LightBoxがprototype.jsをベースに開発されたjsライブラリであるのに対して、ThickBoxはjQueryをベースに開発されています。 設置方法 配布ページよりjquery.jsとloadingAnimation.gif、thickbox.css、thickbox.jsというファイルをダウンロードし、ThickBoxを利用したいhtmlのhead要素などでそれらのファイルを読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - uniba/jquery-peekaboo: Triggers appear/disappear event on scrolling.
株式会社オロ
