jQuery

一定時間おきにボックスを表示させるjQuery

何秒、何分おきにボックス(iframeでもよい)を表示させるjQuery。
動画サイトとかで、動画の中央に表示される広告みたいなのをイメージ。
一定時間でボックスを表示させるjQuery

こちらを参考にさせていただきました。

さくっと簡単!jQueryでコンテンツをオーバーレイ表示させる方法
http://liginc.co.jp/web/js/jquery/39777

【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。
http://on-ze.com/archives/341

HTML

CSS

.boxサイズ W718px、H438px、
#modalwin  W300px H250px
#modalwin,#closeのz-indexは必要かどうかは不明。

jQuery

この場合は、10秒間隔でボックス#modalwinを表示させています。

jQueryの読み込みも忘れずに

こっちでもいい

 

jquery スクロールするとニュルっと出てくるこのページのトップへリンク

後でコピペする用に。

 

html

だいたい bodyにid=”top”つけてます。

<div class=”pagetop”>~</div>は </body>タグ直前あたりに

SCSS

CSS

 

jQuery

 

 

スマホorPCのみでjquery/javascriptを実行する

レスポンシブのウェブサイトを制作で必要になる機会が多いはず

スマホ/タブレット/PCの特定の場合で、javascriptの実行させたいときなど

ウィンドウサイズで判断する

 

MediaQueryListオブジェクトを使う

//Prepare a MediaQueryList
var mql = window.matchMedia(“(max-width:768px)”);

//Add a listener to the MediaQueryList
mql.addListener(function(e){
if(e.matches){
console.log(‘enter mobile’);
}
});

ユーザーエージェントで判断する

http://blow-in.net/さんから

郵便番号を自動入力するjavascript オススメ2つ -ajaxzip3, jquery.j-postal.js

フォーム設置の際、郵便番号を入れると住所を自動入力してくれるのって昨今では当たり前のようにありますね。

実現するのはjavascriptですが、設置が簡単なスクリプトの設置例をまとめ。

ajaxzip3で住所自動入力

Google Code閉鎖により、ajaxzip3のURL変更が必須です。
 今までどこに設置してたかな~と記憶を辿っております。

ajaxzip3の新URL

Githubに移行されています。
https://github.com/ajaxzip3/ajaxzip3.github.io

ajaxzip3 設置例

jquery、prototype.jsは不要になったようです。
スクリプトはutf-8なので、utf-8以外の文字コードで書かれているhtmlに設置する場合は、文字コードの指定が必要です。
<script src=”hjaxzip3.github.io/ajaxzip3.js” charset=”UTF-8″></script>

郵便番号の入力箇所にonkeyupを指定します。
引数

AjaxZip3.zip2addr( ‘〒上3桁’, ‘〒下4桁’, ‘都道府県’, ‘市区町村’, ‘町域大字’, ‘丁目番地’ );

郵便番号+住所の場合

 郵便番号3桁+郵便番号4桁+住所

 jquery.jpostal.jsを使う

https://github.com/ninton/jquery.jpostal.js/

※jquery.jpostal.jsのサンプルページのコードはgooglecode.comになっているので来年1月には使えなります。

こちらも使いやすいです。こちらは郵便番号、住所にIDを設定して設置します。

郵便番号欄のIDを指定し、下記入力項目に対応した住所入力欄を指定します。

入力項目フォーマット
%3 都道府県
%4 市区町村
%5 町域
%6 大口事業所の番地
%7 大口事業所の名称
%8 都道府県カナ
%9 市区町村カナ
%10 町域カナ(予定)

郵便番号データも自サーバーに設置する場合

*.json データが郵便番号データ

アップロード先はどこでもOKとのこと。
アップロードした場所を、jpostal.jsの16,17行目にURLに設定します。
URLは絶対パスでも相対パスでもOKのようです。

 

使いやすいjqueryスライダー(レスポンシブ対応)2:

bxSlider

http://bxslider.com/

jQuery Content Slider   Responsive jQuery Slider   bxSlider

 

  • レスポンシブ対応
  • 水平、垂直スライド対応、フェードも可能
  • スライドコンテンツは画像、動画、HTMLが可能
  • タッチ、スワイプサポート
  • IE7+、Firefox,Chrome,Safari,iOS,Android 対応

よく使いそうな項目だけ抜粋しています。
詳しい情報はこちら
http://bxslider.com/options

基本的なプロパティ

プロパティ初期値説明
modehorizontalスライドタイプ「’horizontal’, ‘vertical’, ‘fade’」から選択
speed500スライドのスピード(ミリ秒:1/1000)
slideMargin0スライド間のマージン幅
startSlide0何番目の要素からスライドをスタートするか、0から数える
randomStartfalseスライドをランダムで表示するか
slideSelectorスライド要素の指定
infiniteLooptrue真偽値(boolean)

アニメーションをループさせるかどうか

hideControlOnEndfalseNextを隠す

infiniteLoopf:false の時のみ使用

easingeasingの種類

if using CSS: ‘linear’, ‘ease’, ‘ease-in’, ‘ease-out’, ‘ease-in-out’, ‘cubic-bezier(n,n,n,n)’. If not using CSS: ‘swing’, ‘linear’ (see the above file for more options)

captionsfalse真偽値(boolean)

画像のtitle要素をcaptionとして表示するかどうか

tickerfalse真偽値(boolean)

スライドをニュースティッカーのように表示する場合

tickerHoverfalse真偽値(boolean)

マウスオーバーした時に一時停止するかどうか

adaptiveHeightfalse真偽値(boolean)

スライド要素の高さを動的にフィットさせるかどうか

adaptiveHeightSpeed500数値

adaptiveHeight:trueの時のみ transitionの時間

videofalse真偽値(boolean)

スライドに動画を含むかどうか trueの場合 plugins/jquery.fitvids.js必要?

responsivetrue真偽値(boolean)

スライド要素を自動リサイズするかどうか

useCSStrue真偽値(boolean)

水平、垂直スライドのアニメーションでcssトランジョンを使うかどうか

preloadImagesvisible‘all’, ‘visible’

スライドに動画を含むかどうか

touchEnabledtrue真偽値(boolean)

スワイプトランジョンを許可するかどうか

swipeThreshold50Amount of pixels a touch swipe needs to exceed in order to execute a slide transition. Note: only used if touchEnabled: true
oneToOneTouchtrueIf true, non-fade slides follow the finger as it swipes
preventDefaultSwipeXtrueIf true, touch screen will not move along the x-axis as the finger swipes
preventDefaultSwipeYfalseIf true, touch screen will not move along the y-axis as the finger swipes

peger機能

プロパティ初期値説明
pagertruepager (真ん中の○○○●)を表示するかどうか
pagerTypefull‘full’, ‘short’

If ‘full’, a pager link will be generated for each slide. If ‘short’, a x / y pager will be used (ex. 1 / 5)

pagerShortSeparator/pagerTypeがshortの時、区切り文字として使う
pagerSelectorElement used to populate the populate the pager. By default, the pager is appended to the bx-viewport

コントロール機能

プロパティ初期値説明
controlstruePrev,Next矢印を表示するかどうか
nextTextNext次へボタンに使う文字列
prevTextPrev戻るボタンに使う文字列
autoControlsfalsetrueの場合、「Start/Stop」を表示

自動機能

プロパティ初期値説明
autofalseスライドアニメーションを自動再生するかどうか
pause4000次のアニメーションまでの間隔
autoStarttruefalseの場合はスタートボタンをクリックしてスタート
autoHoverfalseスライダーにマウスホバーした場合、一時停止するかどうか

カルーセル機能

プロパティ初期値説明
minSlides1スライド時に表示させる画像の最小数
maxSlides1スライド時に表示させる画像の最大数
moveSlides0遷移するときに移動する画像の枚数
slideWidth0スライド間のマージン

基本的なDemo

 

使いやすいjqueryスライダー(レスポンシブ対応)1:FlexSlider 2

FlexSlider 2

Flex Slider 2
http://flexslider.woothemes.com/index.html

★レスポンシブ対応
★カルーセル対応
★タッチデバイスのフリック対応
★キャプション表示可能
★動画スライドOK
など。

設定できるプロパティも多数です。設置も簡単。

設定できるプロパティの一覧
https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties
以下にも記載。ところどころ和訳がおかしいところもあるかもです。

基本的なプロパティ

プロパティ初期値説明
namespace:flex-flexsliderが生成する接頭辞を指定
selector:.slides > liスライドするセレクタを指定
animation:fadeアニメーションのタイプ

“fade” or “slide”

easing:swingjquery transtion を指定
direction:horizontalスライドする方向

“horizontal” or “vertical”

reverse:false真偽値(boolean)

アニメーションの方向を逆行するかどうか

animationLoop:true真偽値(boolean)

アニメーションをループさせるかどうか

smoothHeight:false真偽値(boolean)

horizontal modeのときにスライドのたかさを

startAt:0何番目の要素からスライドをスタートするか
slideshow:true真偽値(boolean)

アニメーションスライドを自動再生するか

slideshowSpeed:7000スライドのスピード(ミリ秒:1/1000)
animationSpeed:600アニメーションのスピード(ミリ秒:1/1000)
initDelay:0スライドをスタートするまでの時間
randomize:false真偽値(boolean)

スライドをランダムでスライドさせる

pauseOnAction:true真偽値(boolean)

コントロール要素を操作している間、スライドを中止するかどうか

pauseOnHover:false真偽値(boolean)

マウスオーバーでスライドを中止するかどうか

useCSS:true真偽値(boolean)

css3対応可能な状況ならcss3トランジョンを使う

touch:trueタッチデバイスでスワイプ動作を可能にするかどうか
video:false真偽値(boolean)

スライドに動画を含むかどうか

スライドのコントロール機能

プロパティ初期値説明
controlNav:trueスライダーナビゲーション(○○○●)を表示するかどうか
directionNav:true両サイドのprev(<),Next(>)を表示するかどうか
prevText:PreviousdirectionNavがtrueの場合の「戻る」のテキスト
nextText:NextdirectionNavがtrueの場合の「次へ」のテキスト

オプション的なナビゲーション機能

プロパティ初期値説明
keyboard:true真偽値(boolean)

キーボードの←→でスライドの移動を可能にするかどうか

multipleKeyboard:true真偽値(boolean)

両サイドのprev(<),Next(>)を表示するかどうか

mousewheel:false真偽値(boolean)

マウスホイールでの移動を許可するかどうか

jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) が必須

pausePlay:false真偽値(boolean)

「再生」「停止」ボタンを表示するかどうか

pauseText:Pause文字列

pausePlay:がtrueの時、「停止」ボタンのテキスト

playText:Play文字列

pausePlay:がtrueの時、「再生」ボタンのテキスト

特別プロパティ

プロパティ初期値説明
controlsContainer:FlexSliderのコンテナー要素「.flexslider-container」
manualControls:コントロール要素を独自の名前をつける


(.flex-control-nav li/#tabs-nav li img)

sync:他のスライダーと同期させる(扱い注意)
asNavFor:Internal property exposed for turning the slider into a thumbnail navigation for another slider

カルーセルオプション

itemWidth:0数値

アイテムの幅サイズ

itemMargin:0数値

アイテム間のマージン

minItems:0数値

アイテムの最小値。画面リサイズ(レスポンシブ)時の下限。画面が小さくなっても表示させるアイテム数

maxItems0数値

アイテムの最大値。画面リサイズ(レスポンシブ)時の上限。大きい画面で表示した場合の最大表示数

move:0数値

カルーセルが動くときに移動するアイテムの数

 

 

マウスオーバーでヒラッとさせる

マウスオーバーでちょっと違うエフェクト

html

jQuery

css

こちらを参考にさせていただきました

http://jsdo.it/fctale/mLaO