覚書 @plus-shift - Tumblr Blog

## [2014/02/07 追記] 検証結果も含めたより詳細な記事 [llsmrsll / 游書体をCSSで指定しよう](http://qiita.com/llsmrsll/items/f019b8daadf798066001)...

英字での指定の仕方がポイントで、YuGothic YuMinchoと、間に半角スペースを入れない指定の仕方も記述メモ

#css #游ゴシック #游明朝体

CSS3のtransition-timing-functionの値、cubic-bezier()に関して

https://www.tumblr.com/dashboard

CSS3の「transform:scale()」を使用して画像をマウスオーバーした時に拡大・縮小させて表示した時の方法を記載します。

メモ！

#css3 #mouseover

IEでのテキストリンクにbefore/afterを指定している時にunderlineが表示されるバグについての解決方メモ

参考

http://stackoverflow.com/questions/8820286/how-to-remove-only-underline-from-abefore/21902566#21902566

http://jsfiddle.net/95C2M/

#Css #IE

CSSでグラデーションを時間で変化させるアニメーションのサンプル。

背景のグラデーションをアニメーションさせ、テキストでマスクをかける。

この指定方法では、background-sizeとグラデーションの関係性が重要で、開始と終了時の位置関係と表示されるグラデーションを同一になるよう調整させる必要があるのが欠点なので、いい具合に連続させることができるよう、改良が必要かな。

#Css #css3 #animation #gradient

JavaScriptでuserAgentによるiphoneのversion を判別する時、Chrome for iOSでエラーが出てハマった時の対処法

iPhoneでsafariのバージョンを判別する際に、ユーザーエージェントでVersionの値を使っていると、chromeブラウザで表示した場合JSエラーが起きる。

■iOS7.0のSafariが返すuserAgent

Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53

■Chrome for iOSが返すuserAgent

Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) CriOS/30.0.1599.12 Mobile/11A465 Safari/8536.25

太字部分で示す通り、Chrome for iOSではVersionの記述が無いのでエラーとなっていた。判別するなら、Versionの有無を確認してからか、 iPhone OSの値を使って判別するのが良い。

参考

【Chrome for iOSのユーザーエージェントについて】

http://overpass.dokkoisho.com/goiosgo/crios.html

#javascript #useragent #iphone #chrome #smartphone

Androidはバグないのかな？要検証。

IEは9以降は表示崩れ、ボタン効かないなどの不具合あり、IE8以前はサポート外と。

#jquery #smartphone #lightbox #swipe #js

新しいGoogleMAPをiframeで埋め込みした際に、IE、Firefoxで表示が崩れる不具合が出た場合の対処法

1ページに複数の「新しいGoogleマップ」を埋め込んだとき不具合が発生。対応したときの解決方法を取り急ぎメモ。

タブ切り替えのコンテンツ内で、デフォルトが非表示の要素にて、Googleマップの表示がIE・FFでバグるという現象が発生した。

読み込み速度と非表示にするタイミングが原因で不具合が発生すると思われる。

【解決方法】

HTMLのロード完了処理後に、GoogleMAPで埋め込んでいるiframeの読み込みをチェックし、完了したタイミングでタブ切り替えのデフォルト非表示の処理を実行する。

//HTML文書が完全にロードされたあとで実行 window.onload = function () {

//iframeの読み込みが完了されたあとで実行 $('#iframe').load(function(){ //読み込み完了後の処理 console.log('読み込み完了'); });

};

</script>

※参考にしたサイト

・jQuery iframeの読み込み完了後のタイミングで処理を実行する方法

http://zxcvbnmnbvcxz.com/jquery-iframe-loaded/

・jqueryでiframeのloadを待つ

http://d.hatena.ne.jp/prepisu/20110330/1301487561

#jquery #javascript #googlemap #ie #firefox

サーバーにあるCSVファイルが403 Forbiddenエラーで表示されない時の解決法

パーミッションの設定をチェックする

設定が「666」以下の時、403 Forbiddenエラーが発生するようなので、

「755」以上の設定にする。

参考

【403 Forbiddenエラーの原因、対処、解決法】

http://www.403-forbidden.com/?p=488

【パーミッションを変更するには】

http://www.tohoho-web.com/wwwxx012.htm

#jquery #csv #error #javascript

プリローダーを自動生成するジェネレーター3つ

Preloaders

ユニークなデザインが豊富なプリローダー

http://preloaders.net/

Loadinfo

ポップなデザインのプリローダー

http://loadinfo.net/

Ajaxload

ベーシックでシンプルなプリローダー

http://www.ajaxload.info/

#loader #preloader #design #gif animation

参考

【今年も安定のシングルXmasだからワードプレスに雪を降らす】

http://plusblog.jp/6487/

ワードプレスに雪を降らしてみたいと思います。さらに雪を降らせるプラグイン「Snowfall」のパラメーターをGUIで変更できるコントロールパネルも作ってみました。

【jQuery snowfallで画面に雪を降らせる】

http://blog.sdm-s.info/javascript-jquery/snowfall/

ここでは画面に雪を降らせるjQuery snowfallの紹介をしていきます。このブログのheader画像に雪を降らせているのもJquery Snowfall Pluginです。

#javascript #jquery #plugin #effect

CSSで属性セレクタを使い「iframe[name="google_conversion_frame"] { position:absolute; } 」とやっていますね。

#css #google #remarketing #bug

「Autosize」は、テキストエリアのサイズを入力文字数によって自動的にサイズを変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増ししてくれます。ダウンロードはこち

#jquery #textarea #pugin #form

a {

overflow: hidden;

float: left;

}

a:hover {

border: 5px solid #000000;

}

a:hover img {

margin: -5px;

}

解説

http://blog.verygoodtown.com/2012/02/image-border-cs/

#css

p{ width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; /* Opera9,10対応 */ }

#css

GoogleにホスティングされているjQueryのバージョン一覧

#jquery

Trending Blogs

Recently Viewed Blogs

覚書