jQuery

【jQuery】.on clickイベントが効かない時の対処方法

jQuery1.8ぐらいから、 .click(function(){}) →.on('click', 'id', function() {}) ↑で書くべし的な事を言われてちゃんと.onで書いているのになぜか?効かない。。。1時間ぐらいハマったのでメモ。。 1. まずはjQueryのバージョンを確認 .on()メソッドはjQue…

jQueryでページ内リンクを、スルスル滑らかに移動させる簡単スムーススクロール

smoothScroll.jsは、 ページ内のリンク先をスルスル気持ち良く移動する人気jsライブラリーです。ただ、わざわざライブラリー使わなくてもjQueryでできるので、 テンプレ用に書き留めておきます。デモもありますので、参考にしてください。 jQuery版スムース…

lightboxなどのjQueyと競合(バッティング)しないrollover (rolloverとlightboxの競合を回避する)

どうして競合するのか?よく質問されるので、いまさらですがまとめてみました。 私は「3」をテンプレとして使っております。 1. 「$」を「jQuery」置き換える。 簡単に言うとDOM構造内で「$」バッティングしているのが原因なので、 「$」を「jQuery」置き換…

IE6 ロールオーバーも透過pngにする「DD_belatedPNG.js」(2)背景が表示されない時の対応も解説。

▼以前の記事(IE6で透過pngを表示させる基本的手順) http://d.hatena.ne.jp/soratomo0714/20120627以前の記事では「4.画像置換(ロールオーバー)を設定する場合は・・・」で、ロールオーバーは使えないのでcssで設定するとしましたが、head内にソースを少…

jQuery - ドラックで移動できるポラロイド風写真配置

▼完成URL http://jewelcafe.main.jp/0720/index.html

jQuery - 画像スライドメニュー

IE6〜9→まで問題なし。 html5→エラーなし。 css→エラーなし ▼完成URL http://jewelcafe.main.jp/0717/sura/index.html

jQuery - ドロップダウンメニュー

IE6〜9→まで問題なし。 html5→エラーなし。 css→ハック部分がエラーになる。許容範囲。。 ▼完成URL http://jewelcafe.main.jp/0717/dorp/index.html

CSSでアコーディオンパネル

IE9→問題なし。 IE8・6→動きが早くて微妙。。 IE7→動かない。。 html5→エラーなし。 css→エラーなし。 ▼完成URL http://jewelcafe.main.jp/0717/css/index.html

tabメニュー 4パターン

jQuery UI タブメニュー1 IE6〜9まで問題なし。 html5→エラーなし。 ▼完成URL http://jewelcafe.main.jp/0717/tab/index.html jQuery TOOLS タブメニュー2 IE6〜9まで問題なし。 html5→エラーなし。 css→エラーなし。 ▼完成URL http://jewelcafe.main.jp/071…

jQueryでアコーディオンパネル2

もっと削除できる所があると思います。。cssはまだエラーもあるしまだ整理できていない感じ。。 ダウンロードしたデータのどこを残して削除したらいいのか?また細かくカスタマイズ出来る様にしないと。。 ▼完成URL(完璧じゃないけど。。) http://jewelcafe.…

横スクロール&Lighboxとクロスフェード

ダウンロードしたデータはエラーがありましたが、img要素にalt属性を追加で回避できました。cssもエラーも対応しました。 IE6で▶ボタン部分の画像周りが透過されませんがこれ位は許容範囲かな。。(画像の周りを背景と同じ色にすれば問題ないかな。) かわい…

jQueryでアコーディオンメニュー

<html lang="ja"> <head> <meta charset="UTF-8"> <title>jQueryでアコーディオンメニュー</title> <script src="js/jquery-1.7.2.min.js"></script> <script> $(function(){ $("dd:not(:first)").css("display","none"); $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $("dd").slideUp("sl…</meta></head></html>

jQueryでアニメーション効果

▼参考URL 40分で覚える!jQuery速習講座 http://ascii.jp/elem/000/000/498/498710/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery読み込み</title> <script src="js/jquery-1.7.2.min.js"></script> <style type="text/css"> div{ width:200px; height:200px; background:red; display:none; } </script>…

読み込み 指定のdivを隠す

↓この場合スクリプトはdivより後でないと実行されない。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery読み込み</title> <script src="js/jquery-1.7.2.min.js"></script> </meta></head></html>

背景画像もOK!DD_belatedPNG.jsでIE6に透過pngを実装させる方法(1)

▼参考URL http://smkn.xsrv.jp/blog/2009/04/postscript_dd_belatedpng_js/ ☆透過PNGをIE6に対応させる手順☆ ▼ここからjsファイルダウンロード。 (真ん中ぐらいに「Download」ボタン2つありますが、0.0.8a-min.jsです。) http://dillerdesign.com/experime…

クロスフェードで切り替わるシンプルなスライドショー

▼デモ http://jewelcafe.main.jp/0613/cro/03.html ☆ソース <html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScriptでクロスフェード</title> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/jquery.cross-slide.min.js"></script> <style type="text/css"> * { margin: 0; padding: 0; }…</meta></head></html>

onMouseOverでサムネイルをマウスオーバーするとメイン画像が入れ替わる簡単な写真ギャラリー

☆手順☆ 各サムネイル画像 altの後に↓追加と onMouseOver="document.mainImg.src='マウスオーバー時にメイン画像に表示したい画像パス'"mainのimgタグaltの後に↓追加するだけ name="mainImg" ex 各サムネイル画像 <img src="images/s1.jpg" width="100" height="100" alt=""> ↓

onMouseOverで簡単ロールオーバー

こちらはjquery.js使わずhtmlにちょっと書き加えるだけでロールオーバーを実装する方法です。あまりjsやcssをいじりたくない場合に良いと思います。☆手順☆ altの後に↓追加するだけ onMouseOver="this.src='マウスオーバー時の画像パス'" onMouseOut="this.sr…