カテゴリー別アーカイブ: 備忘録

仕事で役に立った情報

「bxSlider」見つけました!

bxSlider

これはいいですね!

レスポンシブ、スマフォでのタッチ操作にも対応しています。

機能も充実していて、いいです。

詳細
英語サイトなんですが、なんとなくわかると思います。
http://bxslider.com/

<div id="itemView">
	<div class="itemImg">
		<ul class="bx-Slider">
			<li><img src="img/image1.jpg" /></li>
			<li><img src="img/image2.jpg" /></li>
			<li><img src="img/image3.jpg" /></li>
			<li><img src="img/image4.jpg" /></li>
		</ul>
	</div>
	<div class="bx-pager">
		<a data-slide-index="0" href=""><img src="img/image1.jpg" /></a>
		<a data-slide-index="1" href=""><img src="img/image2.jpg" /></a>
		<a data-slide-index="2" href=""><img src="img/image3.jpg" /></a>
		<a data-slide-index="3" href=""><img src="img/image4.jpg" /></a>
	</div>
	<div class="bxNav-next"></div>
	<div class="bxNav-prev"></div>
</div>
$('.bx-Slider').bxSlider({
	auto: false,
	pagerCustom: '.bx-pager',
	nextSelector: '.slider-next',
	prevSelector: '.slider-prev',
	nextText: '',
	prevText: ''
});

RSSで読み込み、1件目とその他を分ける新着情報を作る

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1"); //APIを読み込みます

function initialize(){
	
	var feed = new google.feeds.Feed("読み込むRSSのURLを指定");
	
	feed.setNumEntries(5); //記事を読み込む件数を設定します
	feed.load(dispfeed);	
	
	function dispfeed(result){

		if(!result.error){
			var container_new = document.getElementById("newsFeed"); //HTMLに書き出す対象のIDを指定します
			var container = document.getElementById("newsFeedList"); //HTMLに書き出す対象のIDを指定します			
			for (var i = 0; i < result.feed.entries.length; i++) {

				var entry = result.feed.entries[i];

				var entryDate = new Date(entry.publishedDate); 
				var entryYear = entryDate.getYear();
				if (entryYear < 2000){
					entryYear += 1900;
				}
				var entryMonth = entryDate.getMonth() + 1;
				if (entryMonth < 10) {
					entryMonth = "0" + entryMonth;
				}
				var entryDay = entryDate.getDate();
				if (entryDay < 10) {
					entryDay = "0" + entryDay;
				}
				var date = entryYear + "." + entryMonth + "." + entryDay;

				if ( i == 0 ){
					container_new.innerHTML += '<li>' 
					+ '<a href="' + entry.link + '">'
					+ date + '<br />'
					+ '<span>' + entry.title + '</span>'
					+ ' </a></li>';	
				} else {
					container.innerHTML += '<li>' 
					+ '<a href="' + entry.link + '">'
					+ date + '<br />'
					+ '<span>' + entry.title + '</span>'
					+ ' </a></li>';
					
				}
				
			}
		} else {
			//エラー
			読み込み中
		}
	}
}
google.setOnLoadCallback(initialize);
</script>

<ul id="newsFeed"></ul>
<ul id="newsFeedList" class="closeBox"></ul>

参考サイト
ブログのRSSを読み込んで新着記事を表示!Google AJAX APIを使ってみました
http://kana-lier.com/javascript/google_ajax_rssfeed/

「もっと見る」を作成

scriptを作成

$(".closeBox").hide();
var flg = "close";
$("#newsBloc .btnBloc").click(function(){
	$("#newsBloc .closeBox").slideToggle();
	if(flg == "close"){
		$("#newsBloc .btnBloc span").text("閉じる");
		$("#newsBloc .btnBloc span").toggleClass("closeBtn");
		flg = "open";
	}else{
		$("#newsBloc .btnBloc span").text("もっと見る");
		$("#newsBloc .btnBloc span").toggleClass("closeBtn");
		flg = "close";
	}
});

htmlの作成
最初から表示させるリストと、「もっと見る」ボタンとボタンを押してから表示するリストを作成

<div id="newsBloc">
  <ul>
     <li>aaa</li>
     <li>aaa</li>
  </ul>
  <ul class="closeBox">
     <li>bbb</li>
     <li>bbb</li>
  </ul>
  <div class="btnBloc"><span class="btn1">もっと見る</span></div>
</div>

参考サイト
jquery クリックで内容の表示・非表示の切り替え(ボタンのテキストも入れ替え)
http://jump-up.info/jquery/jquery_toggle.html

レスポンシブ対応のCycle2

メインのスライドは基本こればかり使っていましたが
http://jquery.malsup.com/cycle/
レスポンシブが必要になりcycle2を使い事に
http://jquery.malsup.com/cycle2/

組み込み方も今までにない感じでしたが設置できました。

<div id="mainVisual">
	<ul class="cycle-slideshow"
		data-cycle-fx="fadeout" data-cycle-speed=1500
		data-cycle-timeout=7000 
		data-cycle-prev=".prev"
		data-cycle-next=".next"
		data-cycle-slides="> li"
		>
		<li><a href="#"><img src="/images/main_bnr-1.jpg" alt=""></a></li>
		<li><a href="#"><img src="/images/main_bnr-3.jpg" alt=""></a></li>
		<li><a href="#"><img src="/images/main_bnr-2.jpg" alt=""></a></li>
	</ul>
	<div class="nav next"></div>
	<div class="nav prev"></div>
</div>

URLを判定して最後に値を追加

ページ内の商品検索を検索してページ下部の商品リストに飛ばしたい時に下記の対応をした。

(function(){
    var nowurl = document.URL;
    if(!nowurl.match(/[\#]pagenavi/)) {
        if(nowurl.match(/\?/)) {
	    location.href= nowurl + '#pagenavi';
	}
    }
});

#pagenaviが付いていなければ
?が含まれている場合
#pagenaviをつける

参考サイト
http://blog.livedoor.jp/qoozy/archives/52455603.html

(function(){
    if (document.URL.indexOf("about:blank") == -1) {
        var nowurl = document.URL;
        if(!nowurl.match(/[\?&]abc/)) {
           if(nowurl.match(/\?/)) {
               location.href= nowurl + '&abc=123';
           }
           else {
               location.href= nowurl + '?abc=123';
              }
        }
    }
})();

input[textarea]をメイリオでwidthを設定していないと幅が広がる

メイリオは一体なんなんだ。。。

ASPなど使う場合にフォームなどカスタマイズをならべく避ける時(工数の関係などで)、リセットスタイルなどでformのfont-familyの指定をしない

なぜなら
input[textarea]をメイリオ指定しwidthを設定していないと幅が広がる

参考サイト
http://www.greenwich.co.jp/blog-archives/p/1293
http://techno-st.net/2007/01/21/post-150.html
http://d.hatena.ne.jp/web-holic/20080418/1208536920

フリップするスライドの作成

フリップのスライドショーを作れる

flipsnap.jsを使用
サイト
http://pxgrid.github.io/js-flipsnap/demo.html

参考サイト
http://designdrill.jp/wordpress/?p=5331

テスト
http://bh0505.com/test/sp/flipsnap/

$(function() {
		var touchFlg = false;//---最初はタッチされていない
		var maxPage = 3-1;//----最大ページ
		var $pointer = $('#demo2 .pointer span');
		var flipsnap = Flipsnap('#demo2 .flipsnap', {
			distance: 220
		});
		resizeFunc();

		flipsnap.element.addEventListener('fspointmove', function() {
			$pointer.filter('.current').removeClass('current');
			$pointer.eq(flipsnap.currentPoint).addClass('current');
		}, false);
		
		$pointer.click(
			function(){
				var clickID = Number(this.id);
				flipsnap.moveToPoint(clickID);	
			}
		);
				
		//---3秒でページを切り替える
		function changeFunc() {
			if ( touchFlg ) return;//----タッチ中であれば処理しない
			maxPage < flipsnap.currentPoint+1 ? flipsnap.moveToPoint(0) : flipsnap.toNext();
		}
		setInterval(changeFunc,3000);
		
		//---タッチの管理
		$("#demo2 .flipsnap").on("touchstart mousedown" ,function(){touchFlg = true});
		$("#demo2 .flipsnap").on("touchend touchcancel mouseup" ,function(){touchFlg = false});


	});