javascript

一定時間おきにボックスを表示させる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

 

 

node.js のインストール nodebrewで OSX Yosemite

OSX Yosemite でnode.js をインストールした覚え書き。

nodebrew はmac用バージョン管理ツール

nodebrewをインストールする

こちらを参考にターミナルにコピペ

node.js 入れるなら nodebrew が超簡単
http://tacamy.hatenablog.com/entry/2013/02/10/141434

環境設定ファイルにパスを通す

nodebrewがインストールされたか確認する

node.js をインストールする

nodebrewでインストールできるバージョンを確認する

バージョンを指定してインストール
今回はv0.12.8をインストール

インストールしたバージョンの一覧を確認

どのバージョンのnode.jsを使うか指定

無事インストールできました!

Google Map API V3 1ページに複数マップを表示する(レスポンシブで)

会社案内やショップ案内のページで、グーグルマップを2つ設置することになった時の
備忘録。

参考にしたサイトはこちら
[Google Map V3]地図を複数同時に表示する
ページ内に二つのGoogle Mapを設置する!

地図上にマーカーを表示させて、吹き出しに説明を出す

Google Map をレスポンシブ対応に

Googlemap apiの読み込み

 

bodyに加える

 

 

HTML
1カ所目

 

2カ所目

 

CSS

 

 

javascriptが動かなくて困ったとき

ホームページで、いろいろな動きをさせるためにいくつものjavascriptを使うということはよくあることだと思います。

しかしながら設置方法は間違っていないのになぜか動かない・・・
というのを何回か体験。

動かないのはjqueryで動くタブメニュー。
設置した当初は動いていて、タブをクリックすればそのタブのコンテンツが表示される・・・という正常な動きを見せていたのに。今日になったら動いていないことに気が付いきました。

ノンプログラマの私は、ソースを見てもイマイチよくわからず。
うーんうーんと唸って1時間ぐらいたったころ・・・そういえば、少し前、このサイトはヘッダーを固定してるのでページ内アンカーにリンクを貼ると、リンク位置が固定したヘッダに隠れてずれてしまう。という問題を抱えていました。

cssでの調整だけではうまく行かず、jqueryのソースをコピペしたことを思い出す。。それがそのまま放置されていたのです。
もしかしたらこれかも。

その部分のソース一式を切り取って、再度確認したら、
動いた~!!

詳しくは理解できてないのですがそのソースは全てのアンカーの位置をずらしてしまっていたようでそれがタブのリンクにも及んでいたみたいです。

似たようなことがもう一つ。
lightbox系の有名なプラグインcolorboxを設置して時のこと。
ここでも何故か動かない。
設置方法は何度見なおしても間違いはない。。。
スペルミスも、リンク切れもない。。。
この時もどうやら他のソースを先に読み込んでいて動かなかった。
記述順を変えたら無事設置できました。

javascript同士でバッティングしてしまうことはよくある?のでしょうか。
これからはスクリプト同士が干渉しあってないか十分確認です。

あとjqueryのバージョンが古すぎたり新しすぎたりで動かないこともあるようです。
うまく設置できない時はこの辺のことに注意(javascriptも勉強しなきゃ)

スマホ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/さんから

一定期間Newマークをつける javascript

新しく書いた記事や更新した内容にNew!マークをつけて、更新したことをアピールできる有効な手段です。

でも、手動だと外し忘れて何ヶ月もそのままになってたり。。。

そんなときのためのjavascript。

DEMO 一定期間Newマークをつける javascript

郵便番号を自動入力する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のようです。

 

footer コンテンツがあまりないときでもフッターを下にくっつけるcssとjavascript

ヘッダーやコンテンツ、フッターがあるサイトでコンテンツの中身が数行だったりするとフッターが宙に浮いた感じになってどうも見栄えが悪い時ってありますよね。
お問い合わせの送信完了ページとか。

そんな数行しか無いコンテンツページでも、フッターを下にくっつけて表示させる方法。by cssとjavascriptで。

基本HTML

CSS

見た目はこんな感じに

footerフッターを下付きに 2015-06-17 10-28-23_s

cssでフッターを下付きにする

ポイントは、

  • html,bodyをheight:100%
  • ラップする#containerに高さheight:100%,min-height:100%のほか、ブラウザを縮めた時にコンテンツの高さまできたら自動的に止まるようにheight:auto!important;を指定
  • #footerでposition:absolute;を使うため、position:relativeを設定
  • #footerはposition:absolute; でbottom:0;に
  • position:absoluteを指定するとwidthがクリアされてしまうのでwidth:100%;を指定
  • #contentにフッターの高さ分の余白を指定

完成

footerフッターを下付きに 2015-06-17 10-39-38_s

demo

javascript でフッターを下部に固定する

CSSがめんどくさいな~という場合は、javascriptもありました。
こちらもとっても便利です。

footerをウィンドウ下部に固定する『footerFixed.js』
http://blog.webcreativepark.net/2007/11/16-012253.html

javascriptを読み込んで、固定したい要素に#footerをつけるだけ。

 

状況によって使い分けたいと思います!

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

bxSlider

http://bxslider.com/

jQuery Content Slider   Responsive jQuery Slider   bxSlider

 

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

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

基本的なプロパティ

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

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

hideControlOnEnd false Nextを隠す

infiniteLoopf:false の時のみ使用

easing easingの種類

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)

captions false 真偽値(boolean)

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

ticker false 真偽値(boolean)

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

tickerHover false 真偽値(boolean)

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

adaptiveHeight false 真偽値(boolean)

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

adaptiveHeightSpeed 500 数値

adaptiveHeight:trueの時のみ transitionの時間

video false 真偽値(boolean)

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

responsive true 真偽値(boolean)

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

useCSS true 真偽値(boolean)

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

preloadImages visible ‘all’, ‘visible’

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

touchEnabled true 真偽値(boolean)

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

swipeThreshold 50 Amount of pixels a touch swipe needs to exceed in order to execute a slide transition. Note: only used if touchEnabled: true
oneToOneTouch true If true, non-fade slides follow the finger as it swipes
preventDefaultSwipeX true If true, touch screen will not move along the x-axis as the finger swipes
preventDefaultSwipeY false If true, touch screen will not move along the y-axis as the finger swipes

peger機能

プロパティ 初期値 説明
pager true pager (真ん中の○○○●)を表示するかどうか
pagerType full ‘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の時、区切り文字として使う
pagerSelector Element used to populate the populate the pager. By default, the pager is appended to the bx-viewport

コントロール機能

プロパティ 初期値 説明
controls true Prev,Next矢印を表示するかどうか
nextText Next 次へボタンに使う文字列
prevText Prev 戻るボタンに使う文字列
autoControls false trueの場合、「Start/Stop」を表示

自動機能

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

カルーセル機能

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

基本的なDemo