Skip to content

Instantly share code, notes, and snippets.

View nekoneko-wanwan's full-sized avatar

t.seki nekoneko-wanwan

4 followers · 0 following
  • tokyo
View GitHub Profile
@nekoneko-wanwan
nekoneko-wanwan / script.js
Created April 26, 2016 05:17
telリンクをレスポンシブで切り替える
var fnc = {
// 電話番号機能（a:tel）をスマホの場合のみ有効化する
usableTel: function() {
/**
* PC, スマホでタグ自体を書き換える
* $.each()内での使用を想定
*/
var replaceFnc = function(index, elem) {
var tag = elem.tagName,
$self = $(elem),
@nekoneko-wanwan
nekoneko-wanwan / isSp.js
Created April 22, 2016 07:41
JavaScriptでメディアのサイズを判定する
var breakPoint = 767;
/* 汎用的な関数をまとめて定義 */
var utility = {
/**
* ウィンドウがスマホサイズ（ブレークポイントより小さい）かどうか
* @return {boolean} [規定した閾値以下であればtrue]
*/
isSp: function(){
// IE8以下はfalseを返す
if (!window.innerWidth){
@nekoneko-wanwan
nekoneko-wanwan / more.html
Last active April 25, 2016 01:34
もっと見るをvelocity.jsで実装する
<a href="#" data-slide-trigger="A" data-slide-toggle="true">Aをクリックすると...</a>
<div class="js-slide-target" data-slide-target="A">Aが開きます！</div>
<a href="#" data-slide-trigger="B" data-slide-toggle="false">Bをクリックすると...</a>
<div class="js-slide-target" data-slide-target="B">Bが開きます！クリックしたものはremoveされるぞ</div>
<a href="#" data-slide-trigger="C" data-slide-toggle="true">Cをクリックすると...</a>
<div class="js-slide-target" data-slide-target="C">Cが開きます！</div>
@nekoneko-wanwan
nekoneko-wanwan / smooth-velocity.js
Last active April 5, 2016 06:51
スムーズスクロールをvelocity.jsで実装する
/* スムーズスクロールのイベント設定 */
var addSmoothScrollEvent = function() {
var clickEventHandler = function() {
var href = $(this).attr('href');
// #headerが指定されていればトップと見なす
var target = (href === '#' + $header.attr('id')) ? 'html' : href;
$(target).velocity('scroll', {duration: 500, easing: 'ease-in'});
return false;
};
$('a[href^="#"]').on('click.smooth', clickEventHandler);
@nekoneko-wanwan
nekoneko-wanwan / 0_readme.md
Last active February 22, 2016 08:36
magnificPopupを使ったポップアップinポップアップを実装

やりたいこと

  • magnificPopupで動的にDOMを生成し、そのDOMに対して更にmagnificPopupでポップアップを出したい
  • 新たに開いたポップアップを閉じたら、元々開いていたポップアップを再び表示させたい

ポイント

  • $.magnificPopup.open()でポップアップを表示している場合は、callbackにはinstanceからアクセスする
  • 最初のポップアップでDOMを生成しているため、.on()でliveイベントを設定
  • イベントの重複登録を防ぐため、.onの前に.offを行う
@nekoneko-wanwan
nekoneko-wanwan / 0_readme.md
Last active November 4, 2019 03:10
動的にGoogleMapのiframeを生成する

目的

  • GoogleMapのiframeをユーザが自由に描画できる
  • iframeのsrcパラメータに入力フォームの値を渡すことで、リアルタイムでの地図描画が可能
  • ただし表示や動作の細かい制御はできない

javaScriptAPIに比べて、2,000,000/dayとリクエスト制限が緩い（2015年5月18日現在） 課金も現状ない様子

仕様

@nekoneko-wanwan
nekoneko-wanwan / 0_readme.md
Last active January 20, 2016 10:42
住所からGoogleMapを描画する（ジオコーディングAPIを利用）

目的

  • 住所を日本語で指定し、マップをjavaScriptAPIで描画する
  • config内を（動的・静的問わず）書き換えることで、地図の柔軟なカスタマイズが可能
  • iframe埋め込みでは実現できない動作や表示の細かい制御が可能

javaScriptAPIは、25,000/dayのリクエスト制限がある

仕様

  • GoogleMapのジオコーディングAPIを使用
  • APIを元に住所→緯度経度を取得
@nekoneko-wanwan
nekoneko-wanwan / Evernote.enex
Last active February 6, 2019 10:30
Evernoteノート作成用デザインパーツ
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE en-export SYSTEM "http://xml.evernote.com/pub/evernote-export2.dtd">
<en-export>
<note><title>ノート作成用 デザインテンプレート</title><content><![CDATA[<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE en-note SYSTEM "http://xml.evernote.com/pub/enml2.dtd">
<en-note>
<div><br clear="none" /></div>
@nekoneko-wanwan
nekoneko-wanwan / 0_readme.md
Last active December 10, 2015 01:00
bxSlider, bxslider, bx-sliderを使用したシンプルなスライダー

仕様

前提条件

  • js有効無効でスタイルを変更している。modernizrでhtml or bodyに .js がついている必要がある
@nekoneko-wanwan
nekoneko-wanwan / 0_readme.md
Last active December 8, 2015 02:31
クールなグローバルナビゲーションその2
  • 置換するスプリット画像を１つ用意
  • 画像にはデフォルトとアクティブ時の２つの状態を作成
  • マウスオーバーでの効果はcssで作成する
    • 下部にborderをアニメーション表示
  • 画像のデフォルトとアクティブの間には隙間を用意（10px）