jQuery アーカイブ - CodingMania

WordPress のYouTube埋め込みの iframe をレスポンシブ対応する

yotigory — Sun, 10 Oct 2021 06:49:40 +0000

JSを読み込みます

if ( is_single() ) {
wp_enqueue_script( 'js_youtube', get_template_directory_uri() . '/js/js_youtube.js',  array('jquery'), false, true );
}

jQuery[js_youtube.js]

jQuery(document).ready(function () {
	$(function () {
		$('iframe').each(function () {
			let frame = $(this);
			let div = document.createElement('div');
			div.className = 'youtube';
			if ((frame.is('[src*="youtube"]'))) {
				$(this).wrap(div);
			}
		});
	});
});

CSS

/* youtube
-----------------------------------------*/
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}

.youtube iframe{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

投稿 WordPress のYouTube埋め込みの iframe をレスポンシブ対応するは CodingMania に最初に表示されました。

ドロップダウンメニュー[レスポンシブ対応]

yotigory — Thu, 01 Mar 2018 04:28:09 +0000

JSを読み込みます

JavaScript[main.js]

$(window).on('load orientationchange', function() {
  setTimeout(function() {
    var w = window.innerWidth;
    var point = 1000;
    if (w > point) {
      //それ以外のときの処理
      $("body").addClass("pc").removeClass("spn");
      $(".Nav > ul").removeClass("open close").css("display", "block");
      $(".Nav .navbtn a").removeClass("open close").html("メニューを閉じる");
    } else {
      //画面サイズが1000px未満のときの処理
      $("body").addClass("spn").removeClass("pc");
      $(".Nav > ul").addClass("close").removeClass("open").css("display", "none");
      $(".Nav .navbtn a").addClass("close").removeClass("open").html("メニューを開く");
    }
  }, 100);
});

//resize
$(window).resize(function() {
  var windowWidth = window.innerWidth;
  var point = 1000;
  var timer = false;
  if (timer !== false) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    var ww = $(window).width();
    if (windowWidth != ww) {
      if (windowWidth > point) {
        $("body").addClass("pc").removeClass("spn");
        $(".Nav > ul").removeClass("open close").css("display", "block");
        $(".Nav > ul > li").css("display","inline-block");
        $(".Nav .navbtn a").removeClass("open close").html("メニューを閉じる");
        $(".Nav ul li.parent a").removeClass("open").addClass("close");
        $(".Nav ul.submenu").slideUp("fast").removeClass("open").addClass("close");
      } else { //画面サイズが1000px未満のときの処理
        $("body").addClass("spn").removeClass("pc");
        $(".Nav > ul").addClass("close").removeClass("open").css("display", "none");
        $(".Nav .navbtn a").addClass("close").removeClass("open").html("メニューを開く");
        $(".Nav ul li.parent a").removeClass("open").addClass("close");
        $(".Nav ul.submenu").slideUp("fast").removeClass("open").addClass("close");
      }
    } else {}
  }, 50);
});

//nav dropdown
$(function() {
  $(".Nav ul li.parent a").each(function() {
    var submenu = $(this).next("ul.submenu");
    var samelevel = $(this).parent().siblings().find("ul.submenu");
    var samelevelbtn = $(this).parent().siblings().find("a");
    $(this).addClass("close");
    $(submenu).addClass("close");
    $(this).on('click', function() {
      if ($(this).hasClass("open")) {
        $(this).removeClass("open").addClass("close");
        $(submenu).slideUp("fast").removeClass("open").addClass("close");
      } else {
        $(samelevel).slideUp("fast").removeClass("open").addClass("close");
        $(samelevelbtn).removeClass("open").addClass("close");
        $(submenu).slideDown("fast").removeClass("close").addClass("open");
        $(this).removeClass("close").addClass("open");
      }
      //return false;
    });
  });

  $(document).click(function(event) {
    if (!$(event.target).closest(".Nav").length) {
      $(".Nav ul.submenu").slideUp("fast").removeClass("open").addClass("close");
      $(".Nav ul li.parent a").removeClass("open").addClass("close");
      //alert('changeイベントが発生しました。');
    }
  });
});

//SP nav
$(function() {
  $(".Nav .navbtn a").click(function() {
    if ($(".Nav > ul").css("display") == "none") {
      $(".Nav > ul").addClass("open").removeClass("close").slideDown("fast");
      $(".Nav > ul > li").css("display","block");
      $(this).removeClass("close").addClass("open").html("メニューを閉じる");
    } else {
      $(".Nav > ul").addClass("close").removeClass("open").slideUp("fast");
      $(".Nav ul li.parent").removeClass("open").addClass("close");
      $(".Nav ul.submenu").slideUp("fast").removeClass("open").addClass("close");
      $(this).addClass("close").removeClass("open").html("メニューを開く");
    }
  });
});

//SP アンカーリンク
$(function() {
  $("ul.submenu a[href^='#']").click(function(event) {
    //alert('changeイベントが発生しました。');
    $(".Nav ul.submenu").slideUp("fast").removeClass("open").addClass("close");
    $(".Nav ul li.parent a").removeClass("open").addClass("close");
    $(".spn .Nav > ul").addClass("close").removeClass("open").slideUp("fast");
    $(".spn .Nav .navbtn a").addClass("close").removeClass("open").html("メニューを開く");
    //$(this).removeClass("close").addClass("open").html("メニューを閉じる");
  });
});

HTMl


メニューを開く

  TOP
  メニューその１
  ドロップダウンメニューその1

  Yahoo
  アンカーリンク
  更にドロップダウン2

  ドロップダウン3
  ドロップダウン3
  ドロップダウン3


  ドロップダウン2


  ドロップダウンメニューその2

  ドロップダウン2
  ドロップダウン2
  更にドロップダウン2

  ドロップダウン3
  ドロップダウン3
  ドロップダウン3


  ドロップダウン2


  メニューその2
  メニューその3

CSS

/* Nav
-----------------------------------------*/
.Nav {
  margin-top: 60px;
  border-top: solid 1px #F5F4F0;
  border-bottom: solid 1px #F5F4F0;
}
@media screen and (max-width: 1000px) {
  .Nav {
    position: relative;
  border-top:none;
  }
}
.Nav .navbtn {
  display: none;
}
@media screen and (max-width: 1000px) {
  .Nav .navbtn {
    display: block;
    position: absolute;
    top: -50px;
    right: 10px;
  }
}
@media screen and (max-width: 1000px) {
  .Nav .navbtn a,
  .Nav .navbtn a.close {
    display: block;
    position: relative;
    width: 40px;
    height: 40px;
    background-color: #000;
  }
  .Nav .navbtn a::before,
  .Nav .navbtn a.close::before {
    position: absolute;
    top:10px;
    left:10px;
    content:"";
    width: 20px;
    height: 3px;
    background-color: #FFF;
   transition: .2s;
  }
  .Nav .navbtn a.open::before {
    top:19px;
    transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  }
  .Nav .navbtn a::after,
  .Nav .navbtn a.close::after {
    position: absolute;
    bottom:10px;
    left:10px;
    content:"";
    width: 20px;
    height: 3px;
    background-color: #FFF;
    transition: .2s;
  }
  .Nav .navbtn a.open::after {
    bottom:18px;
    transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  }
}
@media screen and (max-width: 1000px) {
  .Nav .navbtn a.open {
  }
}

@media screen and (max-width: 1000px) {
  .Nav .navbtn a span {
    display: block;
    overflow: hidden;
    width: 1px;
    height: 1px;
  }
  .Nav .navbtn a span::after,
  .Nav .navbtn a.close span::after {
    position: absolute;
    top:18px;
    left:10px;
    content:"";
    width: 20px;
    height: 3px;
    background-color: #FFF;
  }
  .Nav .navbtn a.open span::after {
    display: none;
  }
}
.Nav ul.close {
  display: none;
  border-top: solid 1px #F5F4F0;
}
.Nav > ul {
  margin: 0 auto;
  max-width: 1000px;
}
@media screen and (max-width: 1000px) {
  .Nav > ul {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    background-color: #FFF;
  }
}
.Nav > ul > li {
  position: relative;
  font-size: 15px;
  display: inline-block;
}
@media screen and (max-width: 1000px) {
  .Nav > ul > li {
    display: block;
    border-bottom: solid 1px #dddddd;
  }
}
.Nav > ul > li a {
  display: block;
  position: relative;
  text-decoration: none;
  padding: 19px 15px;
  font-size: 15px;
  color: #333;
  background-color: #fff;
  z-index: 2;
}
.Nav > ul > li.parent > a {
  padding-right:25px;
}
.Nav > ul > li.parent > a::before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 6px;
    height: 6px;
    margin: -6px 0 0 0;
    border-top: solid 2px #00a0e9;
    border-right: solid 2px #00a0e9;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
@media screen and (max-width: 1000px) {
.Nav > ul > li.parent.open > a::before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
}
@media screen and (max-width: 1000px) {
  .Nav > ul > li.parent.open {
    border-bottom: none;
  }
}
  .Nav > ul > li.parent.open > a{
    color: #FFF;
  }
  .Nav > ul > li.parent.open > a::after {
  background: #333;
  -webkit-transform: scale(1);
  transform: scale(1);
}
@media screen and (max-width: 1000px) {
  .Nav > ul > li.parent.open > a {
    color: #FFF;
  }
}

.Nav > ul > li a:hover {
  color: #fff;
}
.Nav > ul > li a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.Nav > ul > li a,
.Nav > ul > li a::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.Nav > ul > li a::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(.5);
  transform: scale(.5);
}
.Nav > ul > li a:hover::after {
  background: #333;
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* 2階層 */
.Nav > ul > li > ul {
  display: none;
  position: absolute;
  top: 53px;
  left: 0;
  width: auto;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9;
}

@media screen and (max-width: 1000px) {
  .Nav > ul > li > ul {
    background-color: #fbfbfb;
    position: static;
  }
}

.Nav > ul > li > ul li {
  white-space: nowrap;
}

.Nav > ul > li > ul li a {
  position: relative;
  padding: 12px 27px 12px 27px;
}
@media screen and (max-width: 1000px) {
  .Nav > ul > li > ul li a {
    border-bottom: solid 1px #dddddd;
    background-color: #EEE;
  }
}
.Nav > ul > li > ul li a::before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 6px;
    height: 6px;
    margin: -6px 0 0 0;
    border-top: solid 2px #00a0e9;
    border-right: solid 2px #00a0e9;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.Nav > ul > li > ul li a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 1000px) {
  .Nav > ul > li > ul li a:hover {
    background-color: #FFF;
  }
}

.Nav > ul > li > ul li ul li a {
  padding-left: 42px;
}
.Nav > ul > li > ul li ul li a::before {
    left: 20px;
}

投稿ドロップダウンメニュー[レスポンシブ対応] は CodingMania に最初に表示されました。

横からスライドインするレスポンシブ対応メニュー

yotigory — Wed, 06 Sep 2017 08:43:52 +0000

JSを読み込みます

[main.js]JavaScript

$(function(){

//メニュー
//SET
if($(".Header__btn").css("display") == "block") {
    windowWidth = $(window).width();
    $(".Globalnav").css({"margin-left":windowWidth, "width":windowWidth,"display":"block"});
}
//risize
var setwidth = $(window).width();
var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
    var ww = $(window).width();
    windowWidth = $(window).width();
    if(windowWidth == setwidth){
    }else if(windowWidth<640){
    $(".Header__btn p").addClass("close").removeClass("open");
    $(".Header__btn p img").attr("src","common/img/icon_menu.png");
    $(".Globalnav").css({"margin-left":windowWidth, "width":windowWidth,"display":"block"});
    }else{
    $(".Globalnav").css({"margin":"0 auto", "width":950});
    };
    }, 50);
});

//orientationchange
$(function(){
var timer = false;
    //$(window).on("orientationchange", function() {
    $(window).on("orientationchange", function() {
    if(timer !== false){
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
    //window.onorientationchange = function(){
    windowWidth = $(window).width();
    //alert(windowWidth);
    if(windowWidth<640){
    $(".Header__btn p").addClass("close").removeClass("open");
    $(".Header__btn p img").attr("src","common/img/icon_menu.png");
    $(".Globalnav").css({"margin-left":windowWidth, "width":windowWidth,"display":"block"});
    }else{
    $(".Globalnav").css({"margin":"0 auto", "width":950});
    }
    }, 1);
    });
});

//click
  $(".Header__btn p").click(function() {
if($(this).hasClass("open")) {
    $(this).addClass("close").removeClass("open");
    //var windowWidth = $(window).width();
    $(".Header__btn p img").attr("src","common/img/icon_menu.png");
    $(".Globalnav").animate({"marginLeft":windowWidth+"px"},500);
    //alert(windowWidth);
} else {
    $(this).addClass("open").removeClass("close");
    $(".Header__btn p img").attr("src","common/img/icon_menu-close.png");
    $(".Globalnav").animate({"marginLeft":"0px"},500);
}

});

});

HTMl



メニューを開く



TOPページ
メニューその1
メニューその2
メニューその3
メニューその4
メニューその5

CSS

/* Header
-----------------------------------------*/
@media screen and (max-width: 640px) {
.Header{
  position: relative;
  height: 50px;
}
}
.Header__btn{
  display: none;
}
@media screen and (max-width: 640px) {
.Header__btn{
  position: absolute;
  top:0px;
  right: 0px;
  display: block;
  background-color: #489fdf;
}
.Header__btn p a{
  display: block;
    width: 50px;
    height: 50px;
}
  .Header__btn p a:after {
    position: absolute;
    display: block;
    content: " \f0c9";
    font-family: FontAwesome;
    width: 50px;
    height: 50px;
    top: 14px;
    left:0;
    right: 0;
    font-size: 22px;
    color: #FFF;
    text-align: center;
  }
  .Header__btn p.open a:after {
    content: " \f00d";
  }
.Header__btn span{
  display: block;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

}
/* Globalnav
-----------------------------------------*/
@media screen and (max-width: 640px) {
  body {
    overflow: hidden;
  }
}
.Globalnav {
  margin: 0 auto;
  width: 950px;
}

@media screen and (max-width: 640px) {
  .Globalnav {
    width: auto;
  }
}

@media screen and (max-width: 640px) {
  .Globalnav {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    margin-left: 320px;
    width: 320px;
    z-index: 9999;
    background-color: #489fdf;
  }
}

.Globalnav ul {
  display: table;
  width: 100%;
}

@media screen and (max-width: 640px) {
  .Globalnav ul {
    display:block;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 10px;
  }
}

.Globalnav ul li {
  display: table-cell;
}
@media screen and (max-width: 640px) {
  .Globalnav ul li {
   display: block;
    margin: 0;
    border-bottom: solid 1px #FFF;
  }
  .Globalnav ul li:last-child{
    border-bottom: none;
  }
}

.Globalnav ul li a {
  display: block;
  text-align: center;
  padding: 20px 0;
  color: #000;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border-bottom: solid 3px #FFF;
}

@media screen and (max-width: 640px) {
  .Globalnav ul li a {
    position: relative;
    padding: 15px 0;
    font-size: 14px;
    border: none;
    color: #FFF;
    text-align: left;
  }
}

@media screen and (max-width: 640px) {
  .Globalnav ul li a:after {
    position: absolute;
    content: " \f105";
    font-family: FontAwesome;
    width: 20px;
    height: 7px;
    top: 50%;
    margin-top: -10px;
    right: 0;
  }
}

.Globalnav ul li a:hover, .Globalnav ul li a:focus, .Globalnav ul li.current a {
  border-bottom: solid 3px #489fdf;
  color: #489fdf;
}

@media screen and (max-width: 640px) {
  .Globalnav ul li a:hover, .Globalnav ul li a:focus, .Globalnav ul li.current a {
    border-bottom: none;
    color: #FFF;
  }
}

投稿横からスライドインするレスポンシブ対応メニューは CodingMania に最初に表示されました。

入力された日付を比べてメッセージを表示

yotigory — Wed, 15 Mar 2017 08:34:23 +0000

JSを読み込みます

[main.js]JavaScript

//日付のチェック
$(function(){
  $("#limitcheck").click(function(){
    var startday = parseInt($("#checkday").val());
    var startyear = parseInt($("#checkyear").val());
    var startmonth = parseInt($("#checkmonth").val());
    var endyear = parseInt($("#endyear").val());
    var endmonth = parseInt($("#endmonth").val());
    var endday = parseInt($("#endday").val());
    if ((jQuery.isNumeric(startday)==false)||(jQuery.isNumeric(startyear)==false)||(jQuery.isNumeric(startmonth)==false)||(jQuery.isNumeric(endyear)==false)||(jQuery.isNumeric(endmonth)==false)||(jQuery.isNumeric(endday)==false)){
      alert("日付をすべて入力してください。");
    } else {
      //var fromyear=endyear+5;
      //var tomonth = startmonth-1;
      to = new Date(startyear,startmonth,startday,0,0,0).getTime();
      from = new Date(endyear,endmonth,endday,0,0,0).getTime();
      //alert(to);
      //alert(from);
      if(to
HTMl



日付：【1】
 年

 月

 日




日付：【2】

 年

 月

 日











CSS
.Form dl{
  margin: 0 0 2px 0;
  display: block;
  box-sizing:border-box;
  line-height: 1.5;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Form dl{
}
}
.Form dl dt{
  display: block;
  padding: 10px;
  font-size: 14px;
  background-color:#EEE;
  box-sizing:border-box;
  font-weight: bold;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Form dl dt{
}
}
.Form dl dd{
  display: block;
  margin: 0 0 40px 0;
  padding: 10px;
  font-size: 14px;
  box-sizing:border-box;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Form dl dd{
  margin-bottom: 30px;
}
}

.Form select{
  width: 150px;
  margin: 0 3px 0 0;
  padding: 5px;
  box-sizing:border-box;
  border: solid 1px #999;
  border-radius: 4px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Form select{
  width: 70%;
  margin-bottom: 20px;
}
.Form dd select:last-child{
  margin-bottom: 0px;
}
}

/* Form__checkbtn */
.Form__checkbtn button{
  margin: 0 auto;
  display: block;
  box-sizing:border-box;
  padding: 5px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+50,e1e1e1+51,f6f6f6+100;White+Gloss+%231 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
  border-radius: 4px;
  border:solid 1px #737373;
  box-shadow: 2px 2px 0 #CCC;
  cursor: pointer;
  text-align: center;
  width: 300px;
  font-weight: bold;
  font-size: 16px;
}

投稿 入力された日付を比べてメッセージを表示 は CodingMania に最初に表示されました。

指定のラジオボタンをチェックすると、さらに追加で項目を表示します

yotigory — Thu, 17 Nov 2016 08:25:38 +0000

JSを読み込みます

[main.js]JavaScript

//選択されたら表示
$(function(){
$(".Form__radio dd").each(function() {
//命令
  var Set = $(this);
  var selectlabel = $(this).find("label.select");
  var closelabel = $(this).find("label.close");
  var selectitem = $(this).find("label.select input");
  var morearea = $(this).find(".Inputmore");
  var moreinput = $(this).find(".Inputmore input");
  var moreinputselect = $(this).find(".Inputmore select");
  //初期化
  $(moreinput).attr("checked", false);
  $(morearea).css("display", "none");

    $([selectlabel[0] , closelabel[0]]).click(function(){
     if($(selectitem).prop('checked')){
     $(morearea).slideDown();
                }else{
      $(moreinput).attr("checked", false);
      $(morearea).slideUp();
      $(moreinputselect).val("選択");
        }
 });
});
});

HTMl




自分の部屋に窓はありますか？


有ります
無いです


有る場合は、下記も選択してください。

どんな色のカーテンを使っていますか？








自分の部屋にソファはありますか？


有ります
無いです


有る場合は、下記も選択してください。

どんな色のソファですか？

CSS

/* Form
-----------------------------------------*/
.Form{
  margin: 10px 0 20px 0;
}
.Form label{
  display: inline-block;
  cursor: pointer;
}
.Form>dl{
  margin: 0 0 40px 0;
}
.Form dl dt{
  background-color: #EBEBEC;
  padding: 10px;
  border-radius: 4px;
}
.Form dl dd{
  padding: 10px;
}
.Inputmore {
  margin: 10px 0 0 0;
}

投稿指定のラジオボタンをチェックすると、さらに追加で項目を表示しますは CodingMania に最初に表示されました。

ウィンドウサイズいっぱいに画像表示しズームしながらフェードアウト。画像・テキストを切り替えます

yotigory — Thu, 21 Jul 2016 02:28:41 +0000

JSを読み込みます

[main.js]JavaScript

(function($) {

function setimage(){
(function($) {

function setimage(){
// 設定
var height =$(window).height(); // 高さ
var width =$(window).width(); // 幅
var win_ratio = width / height;

$(".Opening").css({"height":height});
$(".Opening ul li").css({"height":height});

if (win_ratio > 1.5){　//画像の比率が大きかったら
  $(".Opening ul li img.Opening__img").css({"width":"100%","height":"auto","margin-left":0});
  var winwidth = $(".Opening").width();
  var imgheight = winwidth*0.66;
  var winheight = $(".Opening").height();
  var imgtopmargin = (imgheight-winheight)/2;
  $(".Opening ul li img.Opening__img").css({"margin-top":-imgtopmargin});
}else if (win_ratio < 1.5){　//画像の比率が小さかったら
  var imgwidth = ((height/800))*1200;
  var winwidth = $(".Opening").width();
  var imgmargin = (winwidth-imgwidth)/2;
  $(".Opening ul li img.Opening__img").css({"width":imgwidth,"height":height,"margin-left":imgmargin,"margin-top":0});
}
}

  //slide
$(function(){
setimage();
var interval = 4000; // 切り替わりの間隔（ミリ秒）
var fade_speed = 2000; // フェード処理の早さ（ミリ秒）
$(".Opening ul li").hide().css({"position":"absolute","top":0,"left":0});
$(".Opening ul li:first").addClass("active").show();
$(".Opening ul li:first img.Opening__img").animate({paddingRight:0.1},{
  duration:5000,
  step:function(now,fx){$(this).css({transform:'scale(' + (1 + now) +')'});},
  complete:function(){$(".Opening ul li img.Opening__img").css("paddingRight",0);}
})
setInterval(function(){
var $active = $(".Opening ul li.active");
var $activeafter = $(".Opening ul li.active:after");
var $next = $active.next("li").length?$active.next("li"):$(".Opening ul li:first");
//$active.fadeOut(fade_speed,function(){$active.removeClass("active");});
$active.fadeOut(fade_speed);
$active.removeClass("active");
$next.fadeIn(fade_speed).addClass("active");
$(".Opening ul li.active img.Opening__img").animate({paddingRight:0.1},{
  duration:5000,
  step:function(now,fx){$(this).css({transform:'scale(' + (1 + now) +')'});},
  complete:function(){$(".Opening ul li img.Opening__img").css("paddingRight",0);}
})
},interval);
});
//resi
var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        console.log('resized');
        setimage();
    }, 200);
});

})(jQuery);

HTMl

CSS

/* Opening
-----------------------------------------*/
.Opening {
position:relative;
background-color: #FFF;
}
.Opening ul li{
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;
}
.Opening ul li img.Opening__text{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  z-index: 9;
}
.Opening ul li span {
}
.Opening ul li span img.Opening__img{
  max-width: inherit;
  width: 100%;
  height: auto;
}

投稿ウィンドウサイズいっぱいに画像表示しズームしながらフェードアウト。画像・テキストを切り替えますは CodingMania に最初に表示されました。

画面をscrollすると表示されて「閉じるボタン」で非表示になるバナー

yotigory — Fri, 15 Jul 2016 03:54:48 +0000

JSとfont-awesomeを読み込みます

[main.js]JavaScript

(function($) {

$(function () {
    var display = function () {
    if ($(this).scrollTop() > 150) { //scroll量
            $(".Bnr").fadeIn();
        } else {
            $(".Bnr").fadeOut();
        }
    };
    $(window).on("scroll", display);
    //click
    $(".Bnr p.close a").click(function(){
    $(".Bnr").fadeOut();
    $(window).off("scroll", display);
    });
});

})(jQuery);

HTMl





ココにバナーとかコンテンツをいれます。


閉じる

CSS

/* Bnr
-----------------------------------------*/
.Bnr{
  position: relative;
  margin: 0 auto;
  width: 1200px;
  display: none;
  font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",Osaka,sans-serif !important;
}
.Bnr .Bnr__img{
  position: fixed;
  bottom: 0;

  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  z-index: 88;
}
.Bnr__img__inner{
  width: 1200px;
  height: 80px;
  box-sizing:border-box;
  padding: 10px;
  background-color: #fafafa;
}
.Bnr .Bnr__img__inner a{
  display: block;
}
.Bnr .Bnr__img p.close{
  position: absolute;
  right: 10px;
  top:10px;
}
.Bnr .Bnr__img p.close a{
  display: block;
  width: 20px;
  height: 25px;
  text-align: center;
}
.Bnr .Bnr__img p.close a span{
  display: block;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.Bnr .Bnr__img p.close a i{
  font-size: 20px;
  z-index: 888;
  color: #222;
}

投稿画面をscrollすると表示されて「閉じるボタン」で非表示になるバナーは CodingMania に最初に表示されました。

レスポンシブ対応：横幅が狭くなるとメニューを折りたたみます。Ver.02

yotigory — Mon, 09 May 2016 06:17:15 +0000

JSを読み込みます

[main.js]JavaScript

jQuery(function($){

//sp Menu
$(".Menubtn .open").click(function() {
    $(".Sidenav").animate({
        width: 'toggle'
    }, 300);
    $(this).css("display","none");
    $(".Menubtn .close").css("display","block");
});
$(".Menubtn .close").click(function() {
    $(".Sidenav").animate({
        width: 'toggle'
    }, 300);
    $(this).css("display","none");
    $(".Menubtn .open").css("display","block");
});

//IOS
//visible
$(function() {
var windowWidth = $(window).width();
var x = 740;
$(window).resize(function(){
var ww = $(window).width();
if(windowWidth != ww) {
if(ww >= x) {
$(".Sidenav").css("display","block");
$(".Menubtn ul li").css("display","none");
} else {
$(".Sidenav").css("display","none");
$(".Menubtn ul li.close").css("display","none");
$(".Menubtn ul li.open").css("display","block");
}
windowWidth = ww;
}
});
});
 
  });

HTMl



  開く
  閉まる





第三階層下層あり
  
    第四階層下層あり
      
        第五階層タイトル
        第五階層タイトル
        現在地第五階層
        第五階層タイトル
      
    
    第四階層タイトル
    第四階層タイトル
    第四階層タイトル
  

第三階層タイトル
第三階層下層あり
  
    第四階層タイトル
    第四階層タイトル
    第四階層タイトル
    第四階層タイトル
  

第三階層タイトル
第三階層下層あり
  
    第四階層下層あり
      
        第五階層タイトル
        第五階層タイトル
        第五階層タイトル
        第五階層タイトル
      
    
    第四階層タイトル
    第四階層タイトル
    第四階層タイトル

CSS

/* Menubtn 
-----------------------------------------*/
.Menubtn ul li{
  display: none;
}
@media screen and (max-width: 740px) {
.Menubtn{
  display: block;
}
.Menubtn ul li a span{
  display: block;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.Menubtn ul li a{
  position: absolute;
  top:20px;
  right: 20px;
  color: #666;
  font-size: 28px;
  z-index: 99;
}
.Menubtn ul li.open{
  display: block;
}
}
/* Sidenav
-----------------------------------------*/
.Sidenav{
  float: left;
 width:200px;
}
@media screen and (max-width: 740px) {
.Sidenav{
  float: none;
 width:100%;
 position: absolute;
 top:0;
 right: 0;
 bottom: 0;
 background-color: #000;
 opacity: 0.9;
 display: none;
 box-sizing:border-box;
}
}

.Sidenav a:link    {color:#000; text-decoration:none;}
.Sidenav a:visited {color:#000; text-decoration:none;}
.Sidenav a:hover   {color:#000; text-decoration:none;}
.Sidenav a:active  {color:#000; text-decoration:none;}

@media screen and (max-width: 740px) {
.Sidenav a:link    {color:#FFF;}
.Sidenav a:visited {color:#FFF;}
.Sidenav a:hover   {color:#FFF;}
.Sidenav a:active  {color:#FFF;}
}
.Sidenav ul li a{
  display: block;
  line-height: 1.3;
  font-size:12px;
  padding:5px 5px 5px 10px;
}
.Sidenav ul li a:hover{
  background-color: #EEE;
}
@media screen and (max-width: 740px) {
.Sidenav ul li a:hover{
  background-color: transparent;
  color:#2196f3;
}
}
.Sidenav ul li a:before{
  margin:0 5px 0 0;
  content: " \f054";
   color:#2196f3;
  font-family: FontAwesome;
}

.Sidenav ul{
  padding:0 0 0 10px;
}
@media screen and (max-width: 740px) {
.Sidenav>ul{
  padding: 80px 10px 50px 10px;
}
}

投稿レスポンシブ対応：横幅が狭くなるとメニューを折りたたみます。Ver.02 は CodingMania に最初に表示されました。

クリックで開閉するアコーディオンパネル

yotigory — Thu, 04 Feb 2016 09:26:50 +0000

JSを読み込みます

[main.js]JavaScript

  //tab
  $(function(){
  $(".mod_panel").each(function() {
    var id = "tab--" + $(this).index();
    var panelbtn=$(this).find(".panelTitle");
		var closebtn=$(this).find(".mod_panel_inner_btn .closebtn");
    var panelinner=$(this).find(".mod_panel_inner");
    $(panelbtn).wrapInner('');
    $(panelinner).attr({"aria-hidden":"true","id":id});
    var panelbtnlink=$(this).find(".panelTitle a");
		
  //命令
    $(function(){
      $(panelinner).addClass("close");
      $(panelbtnlink).addClass("close").attr({title:"ここをクリックしてパネルを開きます。"});
      $(panelbtnlink).click(function(){
        if($(panelinner).css("display")=="none"){
          $(panelinner).slideDown("fast").removeClass("close").attr("aria-hidden","false");
          $(this).removeClass("close").addClass("open").attr("aria-expanded","true");}else{
          $(panelinner).slideUp("fast").removeClass("open").addClass("close").attr("aria-hidden","true");
          $(this).removeClass("open").addClass("close").attr("aria-expanded","false");
        }
      });
  //close
      $(closebtn).click(function(){
          $(panelinner).slideUp("fast").removeClass("open").addClass("close").attr("aria-hidden","true");
					$(panelbtnlink).removeClass("open").addClass("close").attr("aria-expanded","false");
      });
    });
  });
  });

HTMl


パネルタイトル

ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。
ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。
ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。
ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。

閉じる

CSS

/* mod_panel
-----------------------------------------*/
.mod_panel {
 margin: 0 0 3px 0;
}
.mod_panel .panelTitle a{
 display: block;
 background-color: #d7d7d7;
 padding: 15px 10px 15px 10px;
 position: relative;
 color: #666;
 border: 1px solid #c1c1c1;
 text-decoration: none;
}
.mod_panel .panelTitle a:after {
 position: absolute;
 top: 30%;
 right: 10px;
 color: #666;
 content: " \f078";
 font-family: FontAwesome;
}
.mod_panel .panelTitle.open a:after {
 content: " \f077";
 font-family: FontAwesome;
}
.mod_panel_inner {
 padding: 10px 0 0 0;
}
.mod_panel_inner.close {
 display: none;
}
.mod_panel_inner_btn p.closebtn {
 display: block;
 cursor: pointer;
 padding: 15px 20px;
 text-align: center;
}
.mod_panel_inner_btn p.closebtn a {
 background-color: #CCC;
 color: #666;
 text-decoration: none;
 border-radius: 4px;
 display: inline-block;
 padding: 5px 10px 7px 10px;
}
.mod_panel_inner_btn p.closebtn a::before {
 content: " ";
 display: inline-block;
 font-family: FontAwesome;
 font-size: 120%;
 margin: 0 10px 0 0;
}

投稿クリックで開閉するアコーディオンパネルは CodingMania に最初に表示されました。

[form:inputタグ]画像の上にcheckboxを重ねて表示する

yotigory — Wed, 13 Jan 2016 09:37:13 +0000

JSを読み込みます

[main.js]JavaScript

//searchimg
jQuery(function($){
  //allcheck allclear
  $(function () {
      $("#allcheck").click(function(){
          $(".mod_search_form input:checkbox").prop({'checked':true});
          $(".mod_search_form_btn input").css({opacity:"1",cursor:"pointer"}).removeAttr("disabled");
          $(".mod_search_form_btn").addClass("validity");
      });
      $("#allclear").click(function(){
          $(".mod_search_form input:checkbox").prop({'checked':false});
          $(".mod_search_form_btn input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
          $(".mod_search_form_btn").removeClass("validity");
      });
  });
  //btn
  $(function(){
             //送信ボタンの無効、チェックボックスを外す
              $(".mod_search_form_btn input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
              $(".mod_search_form input:checkbox").attr('checked',false);
             //チェックボックスがクリックされると送信ボタン有効
              $(".mod_search_form label,.mod_search_form input").click(function(){
                  if($(".mod_search_form input:checkbox").is(':checked')){
                      $(".mod_search_form_btn input").css({opacity:"1",cursor:"pointer"}).removeAttr("disabled");
                      $(".mod_search_form_btn").addClass("validity");
                  }else{
                       $(".mod_search_form_btn input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
                       $(".mod_search_form_btn").removeClass("validity");
              }
          })
  });

  });

HTMl

CSS

/* mod_search
-----------------------------------------*/
.mod_search{
  margin: 40px 0 0 0;
  width:740px;
}

.mod_search ul.searchbtnlist{
 margin:20px 0 30px 0;
}
.mod_search ul.searchbtnlist li{
  display: inline-block;
  margin: 0 2px 0 2px;
}
.mod_search ul.searchbtnlist li button{
  background:none;
  border:none;
  cursor: pointer;
  min-width: 150px;
  box-sizing:border-box;
  padding: 7px 10px 6px 10px;
  line-height: 1;
  border: solid 1px #CCC;
    /* border-radius */
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
.mod_search ul.searchbtnlist li button:hover,
.mod_search ul.searchbtnlist li button:focus{
  text-decoration: none!important;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ededed+0,f6f6f6+47,ffffff+100 */
background: #ededed; /* Old browsers */
background: -moz-linear-gradient(top,  #ededed 0%, #f6f6f6 47%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ededed 0%,#f6f6f6 47%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ededed 0%,#f6f6f6 47%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

/* mod_search_form */
.mod_search_form{
}
.mod_search_form form ul{
  width: 750px;
  margin: 0 -10px 0 0;
  position: relative;
  overflow: hidden;
}
.mod_search_form form ul li{
  position: relative;
  float: left;
  margin: 0 10px 10px 0;
}
.mod_search_form form ul li label img{
  cursor: pointer;
}

/*CheckBox */
.mod_search_form form ul li label input{
  position: absolute;
  top:5px;
  left:3px;
  opacity: 0;
}
.mod_search_form form ul label input + span {
  position: absolute;
  top:5px;
  left:3px;
  display: block;
  width: 24px;
  height: 19px;
}
.mod_search_form form ul label input[type="checkbox"] + span {
}
.mod_search_form form ul label input[type="checkbox"]:checked + span {
  background:transparent url('../img/bg_check.png') no-repeat 5px 0px;
}
/* mod_search_form_btn */
.mod_search_form_btn{
  clear: both;
  text-align: center;
  margin:40px 0 0 0;
}
.mod_search_form_btn input.searchbtn{
  background:none;
  border:none;
  font-size: 115%;
  cursor: pointer;
  min-width: 210px;
  color: #262626!important;
  box-sizing:border-box;
  padding: 19px 17px 18px 0;
  line-height: 1;
  border: solid 1px #e6e6e6;
  /* border-radius */
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  background:transparent url('../img/icon_search.png') no-repeat 140px 20px;
}
.mod_search_form_btn.validity input.searchbtn{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f6f6f6+47,ededed+100;White+3D+%231 */
background: #ffffff; /* Old browsers */
background: url('../img/icon_search.png'),-moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6-15 */
background: url('../img/icon_search.png'),-webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10-25,Safari5.1-6 */
background: url('../img/icon_search.png'),linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
  background-repeat:no-repeat;
  background-position:140px 20px,0 0;
}
.mod_search_form_btn.validity input.searchbtn:hover{
  text-decoration: none!important;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ededed+0,f6f6f6+47,ffffff+100 */
background: #ededed; /* Old browsers */
background: url('../img/icon_search.png'),-moz-linear-gradient(top,  #ededed 0%, #f6f6f6 47%, #ffffff 100%); /* FF3.6-15 */
background: url('../img/icon_search.png'),-webkit-linear-gradient(top,  #ededed 0%,#f6f6f6 47%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: url('../img/icon_search.png'),linear-gradient(to bottom,  #ededed 0%,#f6f6f6 47%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  background-repeat:no-repeat;
  background-position:140px 20px,0 0;
}

投稿 [form:inputタグ]画像の上にcheckboxを重ねて表示するは CodingMania に最初に表示されました。