[覚書]スマホでページ内リンク

ページ内リンク押せないので焦ってたらスマホは同ページ内リンク効かないですね

というわけで、こちらのサイトさんのコードを拝借しまして
http://mermaid1112.hatenablog.com/entry/2012/09/01/192503
http://jsdo.it/blogparts/sFQq 

<script>
var flag;
$('a')
.bind( 'touchstart', function(){
flag = true;
}).bind( 'touchmove', function(){
flag = false;
}).bind( 'touchend', function(e){
linkEvent(this,e);
flag = false;
});

function linkEvent(self,e){
if(flag){
var url = $(self).attr('href'),
$target = $(url);
if ($target.length) {
e.preventDefault();
//$(window).scrollTop($target.offset().top);
$('html,body').animate({ scrollTop: $target.offset().top }, 'normal', 'swing');

return false;
}
}
}

</script>

//で消している下の部分を

$(window).scrollTop($target.offset().top);

スムーズスクロールにしたかったんでこっちに修正して完了!

$('html,body').animate({ scrollTop: $target.offset().top }, 'normal', 'swing');

xamppでlocalhost サブドメイン設定の覚書

毎回忘れてしーまーうー のでええ加減にメモ

C:\xampp\apache\conf\extra\httpd-vhosts.conf

①NameVirtualHost *:80のコメントアウト外す

##NameVirtualHost *:80

②バーチャルホストの設定

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs"
    ServerName localhost
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/demo"
    ServerName demo.localhost
</VirtualHost>

C:\Windows\System32\drivers\etc\hosts

①hostsにサブドメインを設定

127.0.0.1       localhost
127.0.0.1       demo.localhost

xamppのコンパネでapacheを再起動で完了!

IE7/IE8で背景透過が効かない場合

通常の↓↓では効かないので、

	filter:alpha(opacity=70);

こっちですると大丈夫みたいです。

        background-color:rgba(0, 0, 0, 0.5);
        filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f000000,endcolorstr=#7f000000,gradienttype=0);
        -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000)";
        zoom:1;

うーんオーバーレイではまった。

css

まだ使って無いけどメモ

jquery教本に載ってたんですが
ネットに絶対導入方法あるだろうから買うのを渋ってしまう…

背景全面に動画を流すJqueryプラグイン【tubular】
http://code.google.com/p/jquery-tubular/downloads/list

パララックスオススメJqueryプラグイン【jarallax】
http://liginc.co.jp/web/js/jquery/24446

EC-CUBE viewport拡大許可でipadがずれたときの対処方法

スマホでPCサイトを見るという特殊なカスタマイズを加えていたので、
ipadで見るとviewportが邪魔をして拡大率がすさまじいレイアウト崩れが発生していた修正

とりあえず phpでipadかの判定を行い、ipadの場合はviewportを出力しないで一気に解決b
widthも1024pxかレイアウトの最大幅にあわせることで直りました。

ふー、よかったよかった。

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {
	#container {width:1024px;}
	}

<!--{php}-->
$isiPhone = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPhone');
$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if($isiPad){
    echo "";
}else{
    echo "<meta name=viewport content=width=device-width, initial-scale=0, maximum-scale=1, user-scalable=1 />";
}
<!--{/php}-->

スマホ メニューのスクロール慣性に対応したドロワーメニュー【spslidemenu】

正式名称をようやく知りました。ドロワーメニューっていうですねアレ。

sidrを入れていたのですが、iphoneのchromeとandroid標準ブラウザ(仕様的)で不具合頻発だったので
探しに探しまくりいろいろ検証した(約3時間ほど)結果、

be-hase.comさんの【Spslidemenu】が操作性・安定性ともに一番使いやすいかと思います。
http://be-hase.com/javascript/428/

※ただやはり「android標準ブラウザ」は強敵で、demoにあります「No Header」はメニューが開かず延々更新されるという罠。
(はじめてandoroidがにくいと思った瞬間)
まさしく↓ですね。4時間ほど格闘しました。

Android端末におけるオーバーレイ表示時の困った現象の報告と、その対処法について
http://blog.bluearrowslab.com/smartphone/topicks/237/

とりあえずなんちゃって対処方法はまた今度。。。覚えてたら書こう。。。

[CSS]:notのメモ

具体的な使い方は今度調べてみようー
参考:http://weboook.blog22.fc2.com/blog-entry-382.html

#header li:not(.class) a:hover{処理}

これで、ヘッダ要素 のli.class以外のa要素ホバーの指定ができます。
たぶんあんまり使い道はないですが、ちょうど私は必要だったんで大助かりですー。

XPサポート終了にともなって、CSS3は気兼ねなく使えるようになるかな
IE7問題がありますが。。。。

css

[Jquery]fadeToでリンクホバーでフェードイン・フェードアウトのサンプル アニメーション完了まで待機も

$(document).ready(function(){
    $("#aaa a").hover(function(){
       $(this).fadeTo("normal", 0.5);
    },function(){
       $(this).fadeTo("normal", 1.0);
    });
});

単純にこれだけでもよいのですが、
お客さん(かなりjquery詳しい人)からキュー残るのが気になるというので下記を設定(^ ^)

$(document).ready(function(){
   $("#aaa a").hover(function(){
       $(this).stop(true).fadeTo("normal", 0.5);
    },function(){
       $(this).fadeTo("normal", 1.0);
   });
});

これ追加するだけの簡単なお仕事です。(最初から設定しとけというお話)

.stop(true)