Skip to content

Instantly share code, notes, and snippets.

@maehara000 maehara000/gude-line.js
Last active Sep 8, 2018

Embed
What would you like to do?
コーディング時にガイドラインを表示するjs
/* ----------- ガイドラインを表示・非表示 ----------- */
(function ($, window, document){
$(function(){
// ガイドラインを操作するボタンを追加
$('body').append('<div class="guide-button-wrap"><div class="guide-button -on">GuideLine</div><div class="hide-button">Hide</div></div>');
// ガイドラインを追加
$('body').append('<div class="gl-center"><div class="gl-left"></div><div class="gl-right"></div></div>');
$('.guide-button-wrap').css({ // 表示切替ボタンの位置調整
position: 'fixed',
left: '0',
top: '50%'
});
$('.guide-button, .hide-button').css({ // 表示切替ボタンのスタイル
padding: '6px',
borderRadius: '0 6px 6px 0',
background: 'rgba(0, 0, 0, 0.74)',
color: '#FFF',
fontSize: '10px',
margin: '6px 0 0',
cursor: 'pointer'
});
$('.gl-center').css({ // ガイドライン(センター)のスタイル
position: 'fixed',
zIndex: '9999',
left: '0',
right: '0',
top: '0',
margin: '0 auto',
height: '100vh',
width: '1px',
backgroundColor:' rgba(89, 253, 255,1)'
});
/**
* 両端のガイドラインは、画面幅(スマホなど)によって変更する
*/
function guideAction () {
var w = $(window).width();
var windowSize = 768; // SPとPCで切り替える横幅サイズ
var gl_left_css = { // 左側のガイドライン
position: 'fixed',
zIndex: '9999',
right: '0',
top: '0',
margin: '0 auto',
height: '100vh',
width: '1px',
backgroundColor:' rgba(89, 253, 255,1)'
};
var gl_right_css = { // 右側のガイドライン
position: 'fixed',
zIndex: '9999',
left: '0',
top: '0',
margin: '0 auto',
height: '100vh',
width: '1px',
backgroundColor:' rgba(89, 253, 255,1)'
}
if (w >= windowSize) { // PC版の処理
//var size = ('980px'); // メインコンテンツ幅を指定
gl_left_css.left = '980px'; //PC版左側のガイドラインの位置
gl_right_css.right = '980px'; //PC版右側のガイドラインの位置
} else { // SP版の処理
gl_left_css.left = '15px'; //SP版左側のガイドラインの位置
gl_right_css.right = '15px'; //SP版左側のガイドラインの位置
gl_right_css.left = 'auto';
gl_left_css.right = 'auto';
}
$('.gl-left').css(gl_left_css);
$('.gl-right').css(gl_right_css);
};
// ガイドライン切り替えボタンの操作
$('.guide-button').on('click', function() {
if($(this).hasClass('-on')) {
$(this).removeClass('-on');
$('.gl-center').hide();
} else {
$('.gl-center').show();
$(this).addClass('-on');
}
});
// ボタンを消すボタン
$('.hide-button').on('click', function(){
$('.guide-button-wrap').hide();
})
$(window).on('load',function(){
guideAction();
});
$(window).on('resize', function() { // ページ読み込み後、ガイドラインと、それを操作するボタンを表示
guideAction ();
}).trigger('resize');
});
})(jQuery, window, window.document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.