カテゴリー: jQuery

背景全面で動画を再生 Vide スライドショー

要素でもbodyでもどちらでも設定可能。

test-vide/

https://ascii.jp/elem/000/000/923/923855/

※iOSとAndroidでは動画のインライン再生ができないので、動画の代わりに静止画を表示します。

 

 

[JS]動画をブラウザいっぱいやエレメントの背景として配置できるスクリプト（スマホにも配慮） -Vide

 

 

 

 

【jQuery】ウェブページの背景全面で動画を再生する［Vide］の使い方

 

 

 

 

たぶん、これなら可能かも！！！　ハンバーガーメニュー　大丈夫！

【JS】スマホ用のハンバーガーメニューをjQueryとCSSで作成する方法

 

五十嵐商店で実装中

html

<script>
$(function() {
$(‘.navToggle‘).click(function() {
$(this).toggleClass(‘active’);

if ($(this).hasClass(‘active’)) {
$(‘.globalMenuSp‘).addClass(‘active’);
} else {
$(‘.globalMenuSp‘).removeClass(‘active’);
}
});
});
</script>

 

<!–タブレット・スマホ用ヘッダーコンテンツ–>

<div class=”container d-lg-none”>
<div class=”row”>

<div class=”col-10 col-md-12 mb-3″><a href=”#”><img src=”../image/logo_sp.png” alt=”五十嵐商店” class=”img-fluid mx-auto d-block”></a></div>

<div class=”col-12 mb-3″><a href=”tel:0764351105″><img src=”../image/tel_sp.gif” alt=”お気軽にご連絡ください。電話076-435-1105″ class=”img-fluid mx-auto d-block”/></a></div>

<div class=”col-2“>

<div class=”navToggle”>
<span></span><span></span><span></span><span>menu</span>
</div>

</div>

<div class=”col-12 justify-content-center text-center mb-3″>五十嵐商店が富山の安心・安全・美味しい卵を食卓へ</div>

<nav class=”globalMenuSp”>
<ul>
<li><a href=”#”>TOP</a></li>
<li><a href=”#”>こだわり</a></li>
<li><a href=”#”>商品紹介</a></li>
<li><a href=”#”>出荷までの流れ</a></li>
<li><a href=”#”>採用情報</a></li>
<li><a href=”#”>会社概要</a></li>
<li><a href=”#”>お問合せ</a></li>
</ul>
</nav>

</div>
</div>

<!–タブレット・スマホ用ヘッダーコンテンツ終了–>

 

 

css

nav.globalMenuSp {
position: fixed;
z-index: 2;
top: 0;
left: 0;

text-align: center;
transform: translateY(-100%);
transition: all 0.6s;
width: 100%;
}

nav.globalMenuSp ul {
background-color: rgba(51,51,51,0.9);
margin: 0 auto;
padding: 0;
width: 100%;
}

nav.globalMenuSp ul li {
font-size: 1.1em;
list-style-type: none;
padding: 0;
width: 100%;
border-bottom: 1px dotted #ffffff;

}

/* 最後はラインを描かない */
nav.globalMenuSp ul li:last-child {
padding-bottom: 0;
border-bottom: none;
}

nav.globalMenuSp ul li a {
display: block;
color: #ff4e43;
padding: 1em 0;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
transform: translateY(0%);
}

.navToggle {
display: block;
position: fixed; /* bodyに対しての絶対位置指定 */

/*右側へ配置。ロゴ部分をcol-10にしてるから配置スペースを2割分確保*/
right: 12px;
top: 5px;
width: 55px;
height: 55px;
cursor: pointer;
z-index: 3;
background: #F7B52B;
text-align: center;
border-radius: 50%;
}

.navToggle span {
display: block;
position: absolute; /* .navToggleに対して */
width: 30px;
border-bottom: solid 3px #333;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
left: 12px;
}

.navToggle span:nth-child(1) {
top: 12px;
}

.navToggle span:nth-child(2) {
top: 21px;
}

.navToggle span:nth-child(3) {
top: 30px;
}

.navToggle span:nth-child(4) {
border: none;
color: #333;
font-size: 9px;
font-weight: bold;
top: 36px;
}

/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
top: 21px;
left: 12px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
top: 21px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}

ハンバーガーメニュー　エフェクト付きの　丸バーガー　円バーガー

 

※<link rel=”stylesheet” href=”css/bootstrap.min.css”>　があると、スマホ時にプルダウンが初めからオープン状態でナビが開いてしまう。　どう改善したらよいかわからない。<link rel=”stylesheet” href=”css/bootstrap.min.css”>をとるとブートストラップのCSSが無効となってしまうし。

 

CSSとjQueryで五分で作れる！レスポンシブ対応のハンバーガーメニューの作り方

 

test-bugger/index4.html

http://cm-creation.net/yoshida/test-burger/index4.html

※スマホの幅に縮めると表示されるようにしてある。

html

<html>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
<title>CSSで作るハンバーガーメニュー！</title>
<link href=”css/common.css” rel=”stylesheet”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
</head>

 

 

<body>
<header>
<div class=”inner clearfix”>
<h1><a href=”#”><img src=”img/h1_logo.svg” alt=””></a>
</h1>
<div class=”” id=”nav_toggle” >
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav>
<ul>
<li><a href=”#”>MENU1</a></li>
<li><a href=”#”>MENU2</a></li>
<li><a href=”#”>MENU3</a></li>
<li><a href=”#”>MENU4</a></li>
<li><a href=”#”>MENU5</a></li>
</ul>
</nav>
</div>
</header>

</body>
<script type=”text/javascript”>
$(function(){
$(‘#nav_toggle’).click(function(){
$(“header”).toggleClass(‘open’);
$(“nav”).slideToggle(500);
});

});
</script>
</html>

 

 

CSS

::selection {background: #EBD25D;color: #ffffff; /* Safari */}
::-moz-selection {background: #EBD25D;color: #ffffff; /* Firefox */}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-style:normal;

font-size: 100%;
vertical-align: baseline;
}
article, main, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
input, textarea {
margin: 0;
padding: 0;
}
ol, ul{
list-style:none;
}
table {
border-collapse: collapse;
border-spacing:0;
}

.both {
clear:both;
}
.inline_block {
display: inline-block;
*display: inline;
*zoom: 1;
}
img {
max-width:100%;
}
table {
width:100%;
}
a:focus {
outline: none;
}

.fade-in {
transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
}

.fade-up {
transition: opacity 0.7s;
-moz-transition: opacity 0.7s;
-webkit-transition: opacity 0.7s;
-o-transition: opacity 0.7s;
transition: transform 0.7s;
-moz-transition: transform 0.7s;
-webkit-transition: transform 0.7s;
-o-transition: transform 0.7s;
}

html{
height: 100%;
}
body{
background: linear-gradient(-135deg, #006598, #001464);
margin: 0;
height: 100%;
font-family: 游ゴシック体, ‘Yu Gothic’, YuGothic, ‘ヒラギノ角ゴシック Pro’, ‘Hiragino Kaku Gothic Pro’, メイリオ, Meiryo, Osaka, ‘ＭＳ Ｐゴシック’, ‘MS PGothic’, sans-serif;
}
img{
width: 100%;
height: auto;
vertical-align: bottom;
}
.inner{
width: 960px;
margin: 0 auto;
}
header{
padding: 32px 0;
}
header .inner{
display: flex;
justify-content: space-between;
align-items: center;
}
h1{
width: 160px;
margin-right: auto;
}
header nav {
margin-right: -16px;
}
header nav ul{
display: flex;
align-items: center;

}
header nav ul li a{
color: #fff;
text-decoration: none;
font-weight: bold;
padding: 16px ;
}

#main_img{
max-width: 960px;
margin: 0 auto;
}

#nav_toggle{
display: none;
}
.change_btn{
color: #fff;
display: block;
width: 100%;
text-decoration: none;
border: 1px solid #fff;
text-align: center;
padding: 25px 0;
font-size:20px;
margin-top: 40px;
}

/*スマホ・タブレット用の設定*/
@media screen and (max-width:960px){
header{
padding: 16px 0;
position: relative;
}
h1{
width: 120px;
}

.inner{
width: 90%;
}

#main_img{
width: 100%;
}

.change_btn{
width: 90%;
margin: 32px auto;
}

/*メニュー部分*/
nav{
display: none;
position: absolute;
top:72px;
width: 100%;
background: #006598;
left: 0;
margin-top: 30px;
}

header nav ul{
display: block;
margin: 0 auto;
width: 90%;
}

header nav ul li{
margin: 0 auto;
text-align: center;
border-bottom: 1px solid #fff;
}
header nav ul li:last-child{
border: none;
}
header nav ul li a{
display: block;
}

/*開閉ボタン*/
#nav_toggle{
position: relative;
z-index: 100;
height: 60px;
width: 60px;
display: inline-block;
box-sizing: border-box;

border: 2px solid #ffffff;

border-radius: 50%;
}

#nav_toggle div {
position: relative;
}

#nav_toggle span{
display: block;
height: 3px;
background: #fff;
position:absolute;
width: 50%;
left: 0;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}

#nav_toggle span:nth-child(1){
/*top:0px;*/
top:18px;
left:25%;
}
#nav_toggle span:nth-child(2){
/*top:12px;*/
top:28px;
left:25%;
}
#nav_toggle span:nth-child(3){
/*top:24px;*/
top:38px;
left:25%;
}

/*開閉ボタンopen時*/
.open #nav_toggle span:nth-child(1) {
top: 27px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
transform: rotate(135deg);
}

.open #nav_toggle span:nth-child(2) {
width: 0;
left: 50%;
}

.open #nav_toggle span:nth-child(3) {
top: 27px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
transform: rotate(-135deg);
}
}

rss.php rss.js rss feed を表示させる　feedwindを使わなくてjQueryで表示させる

サーバーにアップしないと表示されないから。ローカルではみれない。

 

ネットワールドにカスタマイズしてもらった。D/webコンテンツツール/RSS蟹谷さん制作

 

 

 

表示されないときはjsの位置や、順番が関係してるかも。

<script src=”js/jquery-1.11.3.min.js”></script>
<script src=”rss.js”></script>

ｊｓは　jquery-1.11.3.min.js にした方がいいっぽい。

ほぼコピペでOK！PHPとjQueryを使って外部サイトのRSSフィードを取得・表示する方法

 

work/RSS-TEST/

http://cm-creation.net/yoshida/RSS-TEST/

●レギュラー契約切れた岩瀬工務店にもfeedwindから切り替えてこちらの方法で実装中。花の湯館も変更した。

 

※wordpressはグリニッジ時間でfeedしてるけど、このjQueryはタイムゾーンも補正して表示させてくれてるかは不明なのでまさはしFP、藤田運送はfeedwindをそのまま使用したほうが無難。投稿日付を気にしすぎるユーザーに対してはそのほうが無難かも。wp-settings.phpの日付をタイムゾーン修正することもできるが、wordpressのアップデートで上書きされてこの記述が消えてしまうからwordpress側での設定は文字通り不可能かとおもう。

 

※UTF-8のソースで作っているプログラムだから、jift_jis のhtmlに設置すると文字化けする！！　スターダストヨット。

 

htmlへ　rss.jsを関連付け。表示はrss.jsで設置してある要素をidで指定。
rss.phpでfeedのURLを定義づける。

 

 

※wordpressの仕様上でシングル、ダブルクォーテーションの記述箇所が全角で入力なっちゃうのでソースのコピペ後は半角英数のシングル、ダブルクォーテーションに直すこと！

●index.html

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>無題ドキュメント</title>

<script src=”js/jquery-1.3.2.min.js“></script>
<script src=”rss.js“></script>
</head>

<body>

<div id=”rss“></div>

</body>
</html>

※head内のjsの記載場所気を付けないとバッティングして作動しない。表示されないときは挿入箇所疑ってみること。

※#rssの高さは外要素の高さと同じ高さにcss側で記述する。トピックのulがマージンとパッディングあるので、これも調整する

#rss {
height: 280px;
width: 100%;
text-align: left;
background-image: url(../image/top/feedwind-bg.png);

}

#rss ul,#rss menu,#rss dir {margin: 10px;
padding: 10px;}

#rss li {padding-top:10px;}

●rss.js

$(function() {
$.ajax({
url: ‘rss.php‘,
xmlType: ‘xml’,
success: function(xml) {
var row = 0;
var data = [];
var nodeName;
var output = $(‘#rss‘);

$(xml).find(‘item’).each(function() {
data[row] = {};
$(this).children().each(function() {
nodeName = $(this)[0].nodeName;
data[row][nodeName] = {};
attributes = $(this)[0].attributes;
for (var i in attributes) {
data[row][nodeName][attributes[i].name] = attributes[i].value;
}
data[row][nodeName][‘text’] = $(this).text();
});
row++;
});

output.wrapInner(‘<ul></ul>’);
for (i in data) {
var date = new Date(data[i].pubDate.text);
var strdate = date.getFullYear() + ‘年’ + (date.getMonth() + 1) + ‘月’ + date.getDate() + ‘日’;

//↓日付後バージョン styleで成形
output.find(‘ul’).append(‘<li style=”list-style:none; padding-left:0px; margin-left:0px; ” >‘ + ‘<a href=” ‘ + data[i].link.text + ‘ ” style=”text-decoration: none; color:#2e7ec8; font-size:100%;”>‘ + data[i].title.text + ‘</a>‘ + ‘<br style=”line-height: 100%;”>‘ + ‘<span class=”rss-date” style=”font-size:75%;”>‘ + strdate + ‘</span>‘ + ‘</li>‘);

//console.log (data[i]);
}
}
});
});

 

※htmlに関係してある箇所は ”（’ひとつづつ。すなわちシングルクウォーテーション2つ。）　で囲み、　+　で接続する。

●rss.php

<?php
$url = “http://cm-creation.net/yoshida/localwork/?feed=rss2“;
$xml = file_get_contents($url);
header(“Content-type: application/xml; charset=UTF-8”);
print $xml;
?>

 

 

 

 

wordpressでは機能しない？たぶんrss.jsの4行目のurl個所がネックになってる？

feedが表示されない。テーマ階層にrss.jsやrss.phpをおいてもfeedが表示されない。

SmartMenus　レスポンシブ　ドロップダウンメニュー

これが実装可能！　子階層までドロップダウンしつつレスポンシブ対応

work/test-SmartMenu　ここにあるやつコピーして使う。

必要ファイル

jquery.smartmenus.js
sm-core-css.css
sm-clear.css 　←これがいい。カスタマイズした。
jquery-1.7.2.min.js　←なんでも

http://it-benkyou.seesaa.net/article/433770657.html

 

https://www.smartmenus.org/about/

 

今回使ったのはSmartMenusというものです。以前、Flexnavというものを実装していたのですが、動作確認段階で、ブラウザのウィンドウ幅を変えたりするとメニューの開閉がおかしくなる現象が確認されました。アニメーションがきれいでとても便利だったのですが、私用ならともかく組織のサイトなので断念。SmartMenusに変更しました。

まずはjQuery本体が読み込まれていることが前提になります。以前のノートが参考になると思います。メニューのファイルはここからダウンロードできます。ZIPでダウンロードすると、いろいろなファイルがあり、同じファイルも複数あったりしますが、その中で使うファイルはjquery.smartmenus.jsとsm-core-css.cssと好みのタイプのデザイン(sm-blue.css or sm-mint.css or sm-clear.css or sm-simple.css)どれか一つの３ファイルです。
コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!--head内でCSSを読み込みます-->
<linkhref="../style/sm-core-css.css"rel="stylesheet"type="text/css">
<linkhref="../style/sm-blue.css"rel="stylesheet"type="text/css">
<!--body内のメニューを表示したいところに記載-->
<ulid="main-menu"class="sm sm-blue">
    <li><ahref="#">メインメニュー１</a>
        <ul>
            <li><ahref="#">サブメニュー１－１</a></li>
            <li><ahref="#">サブメニュー１－２</a></li>
        </ul>
    </li>
    <li><ahref="http://www.yahoo.co.jp">Yahoo</a></li>
    <li><ahref="https://www.google.co.jp/">Google先生</a></li>
</ul>
<!--body終了間際にスクリプトを入れます-->
<scriptsrc="../js/jquery-1.11.3.min.js"></script>
<scriptdefer=""src="../js/jquery.smartmenus.js"></script>
<script>
    $(function () {
        $('#main-menu').smartmenus();
        });
 
</script>
 

今回のHTMLソースです。まずはhead部分でCSSを読み込みます。CSSは全デザイン共通の基本となるsm-core-css.cssと好みのデザイン(今回はsm-blue.css)の２ファイルです。次に実際のメニュー部分をbody部の表示したい部分に書きます。＜ｕｌ＞タグでご覧のidとclassを指定すれば残りの＜ｌｉ＞やサブメニューにも何もクラス指定はいりません。のところもメニューは各社員が変更すると思うので、できるだけシンプルにするためにも余計なclass指定がないのはいいことです。

最後にscript部分です初めにjQuery本体、次にSmartMenusを読み込み３行目以降で起動します。この順番を間違えると、正常に表示されません。もレスポンシブになっているのにサブメニューが表示されなく悩みましたが、結局、レスポンシブはスクリプトが動いていなくてもCSSで勝手になってました。スクリプトが動いていないときはサブメニューの表示がされない(▼が出ません)ことで判断できます。

上手くいくと、モバイルのような画面幅が狭いときはご覧のようにアコーディオン式になります。PCのような広い画面では、コードの上の画面のようになります。

こちらはsm-mint.cssを適用させた場合です。CSSファイルだけでなくて、＜ｕｌ＞タグのclassのところもsm-blueからsm-mintに変える必要があります。

DropDownMenu レスポンシブ　ドロップダウンメニュー

カスタムの仕方よくわからない　ギブアップ

 

レスポンシブ対応で多階層なドロップダウンメニューを実装できる「DropDownMenu」

サーバーにあげないと表示されないから。

  • 大半のブラウザは Less を直接解釈できないため、サーバサイドまたはクライアントサイドで CSS に変換する必要があります。

jQuery：クリックしたら表示・非表示するロールオーバーボタンの実装方法

 

work/testTAB/index3.html

 

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”></script>

<script type=”text/javascript”>
$(function(){  $(“.openBtn”).click(function(){    $($(this).next(“.textArea”)).animate(      {height: “toggle”, opacity: “toggle”},      “nomal”    );  });});
</script>

 

 

<style type=”text/css”>
/* 表示ボタン */

.openBtn { cursor: pointer; padding: 10px; border: 1px solid #9FD6D2; border-left: 10px solid #9FD6D2; color: #666; width: 500px; margin-right: auto; margin-left: auto; box-sizing:border-box; -webkit-box-sizing:border-box;}

 .openBtn:hover {opacity: 0.7;} 

/* 説明文 */

.textArea { display: none; padding:  !important; color: #666; width: 500px; margin-right: auto; margin-left: auto; border:; border: 1px solid #CCC;box-sizing:border-box; -webkit-box-sizing:border-box;} 

/* 表示ボタン ー 逆三角アイコン */

.faColor {color: #9FD6D2;}

</style>

 

<!– 表示・非表示ボタン –>

<p class=”openBtn”><i class=”fa fa-chevron-down faColor”>　</i>★★★項目名★★★</p>

<!– 説明文 –>
<p class=”textArea”>★★★説明文★★★>★</p>

 

<p class=”openBtn”><i class=”fa fa-chevron-down faColor”>　</i>★★★項目名2★★★</p>

<!– 説明文 –>
<p class=”textArea”>★★★説明文2★★★>★</p>

 

 

表示・非表示ボタン

1番左にある「 V 」は、画像でなくアイコンフォント(Font Awesome)を使用しています。

ソースで言うと「<i class=”fa fa-chevron-down faColor”></i>」部分です。興味がある方は下の記事を参考にしてください。

jQuery 見出しクリックで要素を開閉

デザインをレスポンシブに対応させる時に役立つjQuery・プラグイン6（サンプルあり）

work/testTAB　にサンプル

 

<script><script>$(function(){ $(“.title”).click(function(){ $(this).next().slideToggle(300); if($(this).attr(“class”)==”title”){ $(this).addClass(“active”);} else{ $(this).removeClass(“active”); } });});</script>

 

<h1 class="title">見出し</h1>
<div class="textBox">
  <p>表示させる文章・・・</p>
</div>
<h1 class="title">見出し</h1>
<div class="textBox">
  <p>表示させる文章・・・</p>
</div>

 

Magnific Popup レスポンシブ対応のモーダルウィンドウ、ポップアップ

work/testTAB/index2.html にあり

 

http://gimmicklog.main.jp/jquery/180/

 

<link rel=”stylesheet” href=”css/magnific-popup.css” />

#mordalContainer { width: 800px; margin-right: auto; margin-left: auto; text-align: center;}

#mordalContainer #item1 { float: left; height: 100px; width: 300px;}

#mordalContainer #item2 { float: right; height: 100px; width: 300px;}

 

#inline-wrap{ text-align: center; width: 800px; height: 800px; background-color: #FFF; margin-right: auto; margin-left: auto; padding: 10px; box-sizing:border-box; -webkit-box-sizing:border-box;}

 

#inline-wrap2{ text-align: center; width: 800px; height: 800px; background-color: #FFF; margin-right: auto; margin-left: auto; padding: 10px; box-sizing:border-box; -webkit-box-sizing:border-box; }

 

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”></script>
<script src=”js/jquery.magnific-popup.min.js”></script>

 

<!–画像とテキストでモーダルウィンドウ–>
<script type=”text/javascript”>
$(function () {
$(‘.popup-modal’).magnificPopup({
type: ‘inline’,
preloader: false
});
//閉じるリンクの設定
$(document).on(‘click’, ‘.popup-modal-dismiss’, function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
</script>

 

 

<script type=”text/javascript”>
$(function () {
$(‘.popup-modal2’).magnificPopup({
type: ‘inline’,
preloader: false
});
//閉じるリンクの設定
$(document).on(‘click’, ‘.popup-modal-dismiss’, function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
</script>

 

 

 

<!–MagnificPopup　モーダルウィンドウ  画像とテキスト–>
<div id=”mordalContainer”>

<div id=”item1″><a class=”popup-modal” href=”#inline-wrap”><img src=”image/item7.jpg” width=”300″ height=”100″></a>
<div id=”inline-wrap” class=”mfp-hide”> 
<h1>画像とテキストを表示</h1> 
<div class=”image”><img src=”./image/01.jpg”></div> 
<p>キャプションを付けたい時なんかに便利です。</p> 
<p class=”popup-modal-dismiss”><a href=”#”>閉じる</a></p></div>
</div>

<div id=”item2″>
<a class=”popup-modal2″ href=”#inline-wrap2″><img src=”image/item8.jpg” width=”300″ height=”100″></a>
<div id=”inline-wrap2″ class=”mfp-hide”> 
<h1>第２次モニターについて</h1> 
<div class=”image”><img src=”image/02.jpg” width=”500″ height=”375″></div>
<p>第１次モニターアンケートを参考に味の決定をさせていただいた「ラングドシャ」。 </p> <p>まずは、１次モニターからの味の進化をお楽しみください。そして今回の第２次モニターは、ネーミングやパッケージ開発の参考にさせていただく事を目的としています。</p>  <p>&nbsp;</p> <p> 開発イメージは、富山県美術館にある屋上庭園「オノマトペの屋上」。そうです、「オノマトペ」としました。  このお菓子から連想された､､､。お菓子に託したい<a href=”camp3.html”>「オノマトペ」を募集</a>します！ </p> <p>&nbsp;</p> <p>パッケージやネーミング、今後の商品展開に生かしていきますので、食べて思い浮かぶ「オノマトペ」とその理由を教えてください。  モニターの皆様と一緒に、よりよいおみやげ開発をしたいと思います。どうぞご協力をお願いします！ </p> 
<p class=”popup-modal-dismiss”><a href=”#”>閉じる</a></p></div>

  </div>
</div>

<!—->

 

 

 

 

 

 

 

 

 

 

 

jQuery レスポンシブ対応のtable 　 BasicTable

http://black-flag.net/jquery/20150721-5768.html

http://www.dataplan.jp/blog/jquery/621

 

desktop/webコンテンツツール/jQuery/BasicTable/

work/testTab に改造あり

 

<link rel=”stylesheet” type=”text/css” href=”basictable.css” />
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script type=”text/javascript” src=”jquery.basictable.js”></script>

 

<table id=”table”>
<thead>
<tr>
<th>カラム1</th>
<th>カラム2</th>
<th>カラム3</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
</tr>
</tbody>
</table>

 

<script type=”text/javascript”>
$(function(){
$(‘#table’).basictable();
});
</script>

 

 

jquery パンくずりすと　rCrumbs レスポンシブ

rCrumbs

webコンテンツ/jQuery/rCrumbs

work/testTAB/index.htmlに改造あり

http://grow.weblike.jp/immature_design/jquerys/1576.html

 

https://webkaru.net/jquery-plugin/rcrumbs/

 

<link rel="stylesheet" type="text/css " href="jquery.rcrumbs.css">

<script src="jquery.js"></script>
<script src="jquery.rcrumbs.js"></script>
 

CSS、JSファイルを読み込みます。[/html]

SyntaxHighlighterについて
 
<div class="rcrumbs" id="breadcrumbs">
    <ul>
        <li><a href="#">Home</a><span class="divider">></span></li>
        <li><a href="#">...</a><span class="divider">></span></li>
        <li><a href="#">...</a><span class="divider">></span></li>
    </ul>
</div>
 
<script type="text/javascript">
    jQuery(document).ready(function() {
        $("#breadcrumbs").rcrumbs();
    });
</script>

jQuery レスポンシブ対応のタブメニュー

http://www.aiship.jp/knowhow/archives/28160

work/testTAB/index.html　改造あり

各タブの中身をページ移管せずに、レスポンシブにも対応して表示できる。

今回は、jQueryで作るタブメニューを実装していきたいと思います。

タブメニューとは、タブをクリックするとページスクロールすることなく、事前に設定したエリアに格納されたコンテンツが表示され、タブの切替によってコンテンツの中身も切り替わるメニューのことです。

「表示させたいコンテンツは多んだけど、ページをスクロールさせたくない」という時に有効なメニューだと思います。

実際にこちらのデモサイトを見てください！見たことあると思います。（もちろんレスポンシブなのでスマートフォンでも動きます

 

ステップ1：HTMLの実装

まずはHTMLです。ECサイトの商品ページで使えそうな文言を入れています。

 
<ul>
    <li><a href="#tab1" class="current">color</a></li>
    <li><a href="#tab2" class="">size</a></li>
    <li><a href="#tab3" class="">Material</a></li>
    <li><a href="#tab4" class="">Country</a></li>
  </ul>
  <div id="contents">
    <div id="tab1">
      <p><strong>Blue/Red/White</strong></p>
      <p></p>
    </div>
    <div id="tab2">
      <p><strong>36・38・40</strong></p>
      <p></p>
    </div>
    <div id="tab3">
      <p><strong>cotton 100%</strong></p>
      <p></p>
    </div>
    <div id="tab4">
      <p><strong>Japan</strong></p>
      <p></p>
    </div>
  </div>

ステップ２：CSSの実装

次にCSSです。

 
body{
    font-family: Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    background:#E46E6E;
}
ul li {
    float: left;
    list-style-type: none;
    width: 25%;
}
 
ul li a {
    font-size: 1em;
    font-weight: bold;
    color: #FFF;
    text-decoration: none;
    display: block;
    padding: 9%;
    text-align: center;
    width: 100%;
    background: #C15757;
    border: 1px solid #c15757;
    border-bottom: none;
}
ul li a:hover{
    background:#D26161;
    color:#FFF;
}
 
ul li a.current {
    background: white;
    color: #C15757;
}
 
#contents{
    clear:both;
}
 
#contents div {
    padding: 5%;
    background: white;
    text-align: center;
    border: 1px solid #c15757;
    border-top: none;
}
 
#contents p{
    margin-top:20px;
    line-height:2em;
    color:#C15757;
}
 
#contents strong {
    font-size: 2em;
    font-weight: bold;
    color: #c15757;
    text-decoration: underline;
}

ステップ３：jQueryの実装

最後にjQueryの実装です。コードは短いです。

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
    $('#contents div[id != "tab1"]').hide();
     
    // タブをクリックすると
    $("a").click(function(){
        // 一度全てのコンテンツを非表示にする
        $("#contents div").hide();
 
        // 次に選択されたコンテンツを再表示する
        $($(this).attr("href")).show();
         
        // 現在のcurrentクラスを削除
        $(".current").removeClass("current");
         
        // 選択されたタブ（自分自身）にcurrentクラスを追加
        $(this).addClass("current");
 
         
        return false;
    });
 
});
</script>

スクリーンいっぱいに背景画像を表示　スライドショー

jquery の　backstretch を使用。jsファイルはデスクトップ/jquery/backstretchにある。

arisawagroup.jp で使用

 

head内に記述

<script type=”text/javascript” language=”JavaScript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>

<script type=”text/javascript” src=”js/jquery.backstretch.min.js”></script>

<script type=”text/javascript”>
$(function(){
$.backstretch(
    [
      “image/new-top/01.jpg”,
       “image/new-top/02.jpg”
      ],
    {duration: 3000, fade: 1250}
);
});
</script>

 

下記サイト参照

背景全画面や特定要素に合わせて表示してくれるjQueryプラグイン『BACKSTRETCH』

 

スライドショーや背景画像を全画面（フルスクリーン）表示できるjQueryプラグインBackstretch

Space.js – スクロール型アニメーションコンテンツ

http://www.moongift.jp/2015/04/space-js-%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E5%9E%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E4%BD%9C%E3%82%8D/

*************

[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js

ハンバーガーメニュー戻らない

表示がおかしい時にはデスクトップ/webコンテンツツール/jQuery/スマホ用ナビハンバーガーのjsを再度設置しても治らない時は、htmlがおかしくなってるかも。例えば、html5やUTF-8で作ってたのに、違うモードで更新しちゃったりすると辺になるのではなかろうか？

新規でhtmlを作り、おかしくなったhtmlの部分パーツをコピペすれば治る。