jQuery｜ぼうびろく

19 May

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

17 May

スムーズスクロールとモーダルウィンドウのアンカーリンクによる干渉

アンカーリンクでとばすモーダルウィンドウを使ったら、モーダルが開かない。
おかしい、と思いググったら、スムーズスクロールと干渉するらしい。
どっちもアンカーリンクでとばしてるので、干渉してモーダルが開かなくなる。
なんやかんややって、モーダルjsを切ってるのに超簡単な手書きスムーズスクロールまで動かなくなった。別の簡単なコード拾ってきて色々いれてもまったくスムーズしてくれない。
今回はjsいれまくってるので何が原因かゼンゼンわかんねー。
jqueryわかんないので、この場合は無効！とか書けないし･･･。

jsプラグインはあまりいれたくないけど、特定のリンクはスムーズさせない機能があるsmoothScroll.jsを試すことにした。

http://blog.webcreativepark.net/2007/07/12-143406.html
http://blog.livedoor.jp/tacshock-code14/archives/7502921.html

いれてみたらsmoothScroll.jsが動く！ぬるぬるっと動く！なんでだよ。
簡単コードは動かずこれが動くって意味わかんねーよ。
そんでスムーズスクロール無効機能

<a href="#header" data-tor-smoothScroll="noSmooth">スムーズなし</a>

を入れたらモーダル開いた！！やったー；；；
date属性じゃなくてclassでも指定できるけど、書き換えなきゃいけなくてもうめんどくせーっておもってやめた。date属性は文字数長いから本当はやだけど･･･。

いまやナビゲーションメニューでスムーズスクロール入れるのってほぼ当たり前でしょう。
私はどうでもいいんだけど、なんかいれたがるからさ･･･。
そうするとそこにタブ機能やモーダルウィンドウ使ってアンカーリンクで飛ばすと、バッティングする可能性はかなり高いわけだと思う。
それなのにあんまり検索してもでてこないのはなぜ？
でも私も初めてこの現象になったわけだから、そうメジャーでもないのかなあ？

つまりスムーズスクロールの設定には無効機能が必須だと思うんだよ。
こういうことが普通にありえる干渉なわけだし。

smoothScroll.jsの欠点はサイドメニューを開く閉じる、などのボタンのアンカーリンクにも全部無効機能を書き込まなきゃいけないこと。
メニュー隠しててクリックで表示ってやってたら、確実に意図せずぬるぬる動きまくる。

08 May

turn.js

このコードをいれたらできました
http://isoden.me/2014/08/30/turnjs/

表紙無しで最初から2ページ見開きで表示したい

$('#selector').turn({

page: 2,

when: {

start: function(event, pageObject, corner) {

if (pageObject.next==1)

event.preventDefault();

turning: function(event, page, view) {

if (page==1)

event.preventDefault();

}

});

22 February

テキストをスライダーしたい　Jquery slider2

Jquery slider2の元のサイトは既にないっぽいです。
Gなんとかっていうソースをuploadするサイトにはfileがありました。

オプションの詳しい項目
http://bl6.jp/web/javascript/easy-light-jquery-slider/

動作を試せるサイト
http://www.kantenna.com/library/jquery_slider/

1週スライドしたあとオートを止める
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10130997880

上記知恵袋だと
sliderbeforeスライド開始直前に実行される関数　

slidebefore:function(){
var index = $('.jquery-slider-page-current ').index();
if(index == 0){
this.autoplay = false;
}

私がやりたかったことはオートプレイでスライダー1週し、また戻った1枚目で止めること
その場合はslidebeforeではなくslideafterスライド完了後に実行される関数でうまくいった
index==0の数値を変えて止めたいスライドナンバーにする

slideafter:function(){
var index = $('.jquery-slider-page-current ').index();
if(index == 0){
this.autoplay = false;

rewindスライドが一周して先頭に戻った時に実行されるではなんかうまくいかなかった

※追記
<head>内にごちゃごちゃと別々で書きたくないので、script.js　というファイルの中に
個別命令系のスクリプトを全部書き込んでいた。
そうしたらいつのまにかindexページのスライダーが効いてない状態になっていた。
開発者ツールのconsoleにはライトボックスjsのswipboxの実行jsコード　に

TypeError: $().swipBox　is not a function

というエラー文がでていた

削っていって試したところ、Jquery slider2　と　swipBox　の実行コード一緒に読み込むと
相性が悪くスライダーが動かなくなるということがわかった。
しょうがないので、swipBoxを使ってるhtml内に直接書くことにした

20 December

ヘッダー固定でスクロールすると透過させるjs

http://kaneshin.hateblo.jp/entry/2012/10/07/200127

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
      $('header').css('opacity', 0.8);
    } else {
      $('header').css('opacity', 1);
    }
  });
});

10 September

Sticky　スクロールするとサイドバーがついてくるjQuery

http://stickyjs.com/
http://webkaru.net/jquery-plugin/sticky/
https://github.com/garand/sticky

<script type="text/javascript" src="jquery.sticky.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#side_inner").sticky({topSpacing:230, bottomSpacing:600});
});
</script>

Contained Sticky Scroll　を前に使っていたので今回もこれを使おうと思った。
しかし今回はサイドバーを上にで引っ張りあげており、このJQueryだと元あった位置から追従するため、上部が見切れてスクロールしてしまった。
上下の間隔を指定するオプションがあるのかないのかわかんないしよく調べてないので、他のjQueryを探した。

手書きのものとかもコピペして色々試したが、サイドバーの下にfloatしているmainカラムがもぐりこんじゃって、なんでこうなるの状態。
Contained Sticky Scroll　ではレイアウトが崩れたりはしない。
どうしよーーーというときに「Sticky」（今調べたがスクロールして追従する技術をスティッキーというらしい）を発見。
崩れない！オプションで上下にpadding的なものをいれられる！見切れ改善！わーい！思い通りにできた！！！今度からコレ使うわ。

※<div id="side"><div id="side_inner">サイドバー</div></div>
※囲いを二重にして、中のものに指定しないとちゃんとできない気がする