[Jquery]マウスオーバーでアコーディオンメニュー

意外?とマウスオーバーでアコーディオン無いんすね~。

下記サイト様を参考に
http://aqua-create.com/jquery/acordeon-menu-jquery/
http://web.donnatokimo.com/jquery/517

今回は最初に開くメニューは要らないので

if(index > 0) $this.next().hide('normal');

の部分を無理やり変更

$this.next().hide('normal');
<ul id="demo" class="clearfix">
 <li><a href="1">menu1</a>
  <ul>
   <li><a href="#">menu 1-1</a></li>
   <li><a href="#">menu 1-2</a></li>
   <li><a href="#">menu 1-3</a></li>
  </ul>
 </li>
 <li><a href="2">menu2</a>
  <ul>
   <li><a href="#">menu 2-1</a></li>
   <li><a href="#">menu 2-2</a></li>
   <li><a href="#">menu 2-3</a></li>
  </ul>
 </li>
 <li><a href="3">menu3</a>
  <ul>
   <li><a href="#">menu 3-1</a></li>
   <li><a href="#">menu 3-2</a></li>
   <li><a href="#">menu 3-3</a></li>
   <li><a href="#">menu 3-4</a></li>
  </ul>
 </li>
</ul>
<script type="text/javascript">
var j$ = jQuery;

j$(function(){
	j$("#demo").each(function(){
		j$("li > a", this).each(function(){
			var $this = j$(this);
			$this.next().hide('normal');
			$this.mouseover(function(){
				j$(this).next().show('normal').parent().siblings().children("ul:visible").hide('normal');
				return false;
			});
			$this.mouseout(function(){
				$this.next().hide('normal');
			});
		});
	});
});
</script>
#demo > li {
	float:left;
	width:150px;
	height:50px;
	}

余談ですが、#demo > li の書き方が超超便利なことに最近気づきました (遅)

[Jquery]bxsliderでサムネイルつきスライダーにする

●レスポンシブルデザインにも対応した高性能なスライダー【bxslider】の設置
こちらのサイトさんのサンプル8を最初使用していたのですが、
IE7ではどうにも動かず。2時間くらいうーーーーんと唸ってました。

  //サムネイルつき
  var slider = $('#sample').bxSlider({
    mode:"fade",
    pager: false,
    controls: false
  });
  $('.thumbs a').click(function(){
   var thumbIndex = $('.thumbs a').index(this);
    slider.goToSlide(thumbIndex);
    $('.thumbs a').removeClass('pager-active');
    $(this).addClass('pager-active');
    return false;
  });
  $('.thumbs a:first').addClass('pager-active');

slider.goToSlide(thumbIndex);ここら辺が怪しいのかな?
最終的にサンプルサイトをIE7で見たところ example8だけは効かないようになってたので
素直にあきらめまして、

jQueryプラグイン「bxslider」を利用してサムネイル付スライダーをつくる
こちらのサイトさんのコードをいただくことにしました。

$(function(){
var slider = $('.bxslider2').bxSlider({
mode: 'fade',
pager: false,
pagerCustom: '.samuko',
controls: false
});
});

こちらで試したところ無事希望通りの動作に♪
助かりましたー(- 人 -)

[jquery]横自動スクロール

Jqueryの自動横スクロールでかなり使い勝手が良いのが見つかりました

Javascript(JQuery)で横スクロールのサンプルを作りました。

機能的には
・マウスオーバーで一時停止
・左右ボタンで加速
・画像以外の要素もOKの優れもの
・カスタマイズしやすい

というかなり、かなり、ありがたや~(-人-)なプラグインです。
以外に上記機能を内包してるプラグインが無いんですよね~。
良いのが見つからなくて自作するかと考えてたのでかなり助かりました

カスタマイズすれば、レスポンシブ(横幅可変)なスクロールに対応できます。

あと、読み込むページで高さ指定すれば結構応用が効くものになりそうです。

<script>
$(function(){
	$('#ScrollArea').css('height',"300px");/*要素の高さを指定*/
});
</script>

[jquery&JS]現在のファイル名を取得してカレントクラスを追加 その2の覚書

前回のやり方でも、参考サイトでも

なぜかうまくいかないサーバーがござりましてどうしようかと考えてたら見つけたサイトがありました。

最終手段

$(function(){
$('a[href="' + window.location + '"]').parent().addClass('current');
});

これで対処できました~。よかった。。。

こっちは参考サイト様(http://www.tam-tam.co.jp/tipsnote/javascript/post2775.html)のやつ

 var activeUrl = location.pathname.split("/")[4];
 navList = $(".list").find("a");

 navList.each(function(){
  if( $(this).attr("href").split("/")[4] == activeUrl ) {
   $(this).parent().addClass('current');
  };
 });

[Jquery]アコーディオンで、メニューを押すと上部に戻る

タイトルが意味不明ですが、、、

スマホでアコーディオン使ったコンテンツの際に、メニューを押すと、コンテンツの始めに移動させて表示させたかったんです。

本当は閉じた状態の各メニューTOPに戻りたかったんですが、

力量不足で別のものに、、、まあ応急処置なので良い、、、かな、、、

時間があるときに検証してみよう

<dt>を押したときに.contposiの位置を取得、スライド表示させるとともに、.contposiの場所へページスクロール

 

$(".accordion dt").click(function(){
var scposi = $(".contposi").offset().top;
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
$('body,html').animate({ scrollTop: scposi });
return false;
});

 

<h4 class="scposi">あいうえお</h4>

<dl class="accordion">
<dt>メニュー</dt>
<dd>あいうえお</dd>
<dt>メニュー</dt>
<dd>あいうえお</dd>
</dl>

 

[jquery&JS]現在のファイル名を取得してカレントクラスを追加

●参考サイト
カレントページに来た時に色が変わるjQueryを作ってみました。
http://webdesignfactory.schoolbus.jp/20130217/

( Javascript )現在開いているWebページファイル名を取得する【location.href、lastIndexOf】
http://asobicocoro.com/tips/article/48

 

<script>

//現在ページURL取得
function GetFileName(file_url) {
file_url = file_url.substring(file_url.lastIndexOf("/") + 1, file_url.length)
return file_url;
}

//代入
var file_name = GetFileName(location.href);

//クラス追加
$(function(){
$(".nav ul li a").each(function() {
if($(this).attr("href") == file_name || $(this).attr("href") == "./" + file_name) {
$(this).addClass("on");
}
});
});

</script>

 

●URLが取得できているかの確認
<script language="JavaScript">
document.write(location.href);
document.write(GetFileName(location.href));
</script>

 

 

今回は使わなかったけど別件で使えそうな参考サイト(スラッシュで終わるURLでのカレント取得…かな?)
http://blog.creamu.com/mt/2012/08/classcurrent.html

スマホページ 横スライドページ形式の参考サイト

ずっと何がしか面倒そーややこしそーで避けていたスマホコーディングにもとうとう手を出さないといけなくなりまして...

今回はこの方法じゃないので、使わないのですが

今後役にたつと思うので(というか作ってみたいので)φ(・ェ・o)~メモメモ

【jQuery mobile でまず押さえておきたいページ構造】
http://billboardtop100.net/BLOG/jquery-mobile/cat26/