Category: jQuery

[bxslider]パワーポイントの資料をHTMLでスライドショーで表示

パワポの資料をHTML上でスライダーで表示したい。
jQueryの”bxslider”を使う。bxsliderはcdnで使います^^

### 前準備
パワポの各スライドをスクリーンショットでpng画像にします。

### html
slider.html
L パワポの縦横比は16:9なので、width740, height:520でOKです。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
	<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
	<script>
		$(document).ready(function(){
			$('.bxslider').bxSlider({
				mode:'fade',
			});
		});
	</script>
</head>
<body>
	<ul class="bxslider">
		<li><img src="img/slide1.png" width="720px" height="540" style="margin:auto; left:0; right: 0;"></li>
		<li><img src="img/slide2.png" width="720px" height="540" style="margin:auto; left:0; right: 0;"></li>
		<li><img src="img/slide3.png" width="720px" height="540" style="margin:auto; left:0; right: 0;"></li>
		<li><img src="img/slide4.png" width="720px" height="540" style="margin:auto; left:0; right: 0;"></li>
		<li><img src="img/slide5.png" width="720px" height="540" style="margin:auto; left:0; right: 0;"></li>
	</ul>
</body>
</html>

### 表示する側(html)
iframeで表示します。

<body>
	<h1>資料</h1>
	<iframe src="slider.html" seamless width="720px" height="610px"></iframe>
</body>

よっしゃあああああああああああああああ

jQueryとmarquee.jsで流れる文字を実装

githubからmarquee.jsを取得します。
jquery.marquee.js

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
</head>
<body>
    <div>
      <p class="ticker">This demonstration shows 3 jQuerified marquees and 3 standard marquees.</p>
    </div>
    <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
    <script src="js/marquee.js"></script>
    <script>
      $(function(){
        $('p.ticker').marquee();
      });
    </script>
</body>
</html>

非常に簡単です。ajaxでjsonからテキストを取得したタイミングで実行すれば良さそうです。

jQueryで流れる文字

html & js

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
	<div id="flowing-text">
		<h2>Flowing Text</h2>
		<div class="fix-box">
			<div class="flowing-box">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>
	</div>
	<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
  	<script>
  		$(function(){
  			var $flowText = $('#flowing-text'),         
        		$fixBox = $flowText.find('.fix-box'),
        		$flowBox = $fixBox.find('.flowing-box'),

  				flowbox_width = $flowBox.width(),
  				flowTime=30000,
  				easing = 'linear',
  				right_start,
  				right_running,
  				timer;

    $flowBox.css({left:'100%'});
    right_start = $flowBox.offset().left+flowbox_width;

    function flowingStart (){
        if(!$flowBox.hasClass('stop')){ 
            $flowBox.animate(
                {left: -flowbox_width}, 
                flowTime, 
                easing,
                function(){     
                    $flowBox.css({left: '100%'});
                }
            );
            flowTime=30000;
        } else {    
            $flowBox.stop(true, false);
            right_running=$flowBox.offset().left+flowbox_width;
            flowTime=Math.floor(((right_running)/right_start)*10000);
        }
    }

    function flowingMonitor(){
        timer = setInterval(function(){
            flowingStart();
        },300);
    }

    $fixBox.on('mouseover',function(){
        $flowBox.addClass('stop');
    })
    .on('mouseout',function(){
        $flowBox.removeClass('stop');
    })
    
    flowingMonitor();

});
  	</script>
</body>
</html>

#flowing-text {
	margin:100px;
}
h2 {
	text-align:center;
	margin-bottom: 20px;
}
.fix-box {
	position: relative;
	height: 35px;
	box-shadow: 0px 0px 8px 3px #ccc inset;
	overflow: hidden;
}
.flowing-box {
	position: absolute;
	top: 5px;
	transform: translateY(-50%);
}
p {
	white-space: pre;
}

OK 大体のイメージは掴めた
テキストをajaxでPOST&GETで取得して表示できるようにしたい

[jQuery3.5.1] 文字の大・中・小を制御する

<body>
	<div class="container">
		<div class="row">
			<button class="btn-s">小</button>
			<button class="btn-m">中</button>
			<button class="btn-l">大</button>
		</div>
		<div class="row">
			<div class="col">
				<p>ボタンクリックで文字の大きさが変わります</p>
			</div>
		</div>
	</div>
	<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
	<script>
		$(function(){
			$('.btn-s').click(function(){
				$("p").css('font-size','0.5em');
			});
			$('.btn-m').click(function(){
				$("p").css('font-size','1em');
			});
			$('.btn-l').click(function(){
				$("p").css('font-size','1.5em');
			});
		})
	</script>
</body>

なんか難しいことやってるのかと思ったら、割と単純でワロタw

[jQuery3.5.1]最新版のバージョン

公式サイトを確認すると、最新版のバージョンは3.5.1となっています。

フロントを構築する場合は、最新のjQueryを使わないと駄目とのこと。
なるほど、勉強になりますね。

jQueryとCSSでタブメニューを切り替える

yahooトップのタブのように、クリックしてもページ遷移しないタブを作りたい。

### jQueryとCSSで作る場合
index.html
– jqueryの制御は後から書きます。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="styles.css" type="text/css">
	<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
</head>
<body>
	<div class="tab">
		<ul class="tab-menu">
			<li class="tab-item active">タブ1</li>
			<li class="tab-item">タブ2</li>
			<li class="tab-item">タブ3</li>
		</ul>

		<div class="tab-box">
			<div class="tab-content show">コンテンツ1</div>
			<div class="tab-content">コンテンツ2</div>
			<div class="tab-content">コンテンツ3</div>
		</div>
	</div>
	<script>
	</script>
</body>
</html>

styles.css

* {
	box-sizing: border-box;
}
ul, li {
	padding: 0;
	margin: 0;
}
li {
	list-style: none;
}
.tab {
	width: 500px;
	max-width: 100%;
	margin: auto;
}
.tab-menu{
	display: flex;
}
.tab-item {
	text-align: center;
	padding: 10px 0;
	cursor: pointer;

	flex-grow: 1;

	border-top: 1px solid skyblue;
	border-left: 1px solid skyblue;
	border-right: 1px solid skyblue;
}
.tab-item:not(:first-child){
	border-left: none;
}
.tab-item.active {
	background: red;
	color: white;
}
.tab-box {
	height:200px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid skyblue;
}
.tab-content {
	display: none;
	font-size: 40px;
}
.tab-content.show {
	display: block;
}

jquery
– タブclick時にactiveとshowのclassをremoveして、clickされたタブのindexと同じindexにcontentのclassにshowを追加する
– タブとコンテンツの数、順番を一致させる必要がある

<script>
		$(function(){
			$('.tab-item').click(function(){
				$('.active').removeClass('active');
				$(this).addClass('active');
				$('.show').removeClass('show');

				const index = $(this).index();

				$('.tab-content').eq(index).addClass('show');
			})
		})
	</script>

### CSSのみで作る場合
index.html

<div class="tab">
		<input id="menu1" class="tab-input" name="menu" type="radio" checked="checked">
		<label for="menu1" class="tab-item">タブ1</label>
		<div class="tab-content">コンテンツ1</div>

		<input id="menu2" class="tab-input" name="menu" type="radio">
		<label for="menu2" class="tab-item">タブ2</label>
		<div class="tab-content">コンテンツ2</div>

		<input id="menu3" class="tab-input" name="menu" type="radio">
		<label for="menu3" class="tab-item">タブ3</label>
		<div class="tab-content">コンテンツ3</div>
	</div>


* {
	box-sizing: border-box;
}
input[type="radio"]{
	display:none;
}
.tab {
	width: 500px;
	max-width: 100%;
	margin: auto;
	display: flex;
	flex-flow: wrap;
}
.tab-item {
	display: block;
	flex-grow: 1;
	text-align: center;
	padding: 10px 0;
	cursor: pointer;
	order: -1;

	border-top: 1px solid skyblue;
	border-left: 1px solid skyblue;
	border-right: 1px solid skyblue;
}
.tab-item:not(:first-of-type){
	border-left: none;
}
.tab-input:checked + .tab-item {
	background: red;
	color: white;
}
.tab-content {
	width: 100%;
	height: 200px;
	display: none;
	justify-content: center;
	align-items:center;
	font-size: 40px;
	border: 1px solid skyblue;
}

.tab-input:checked + .tab-item + .tab-content {
	display: flex;
}

input formとradioボタンで切り替えるってなんか違和感あるけど、うまく表示されますね。
思ったより簡単でワロタ。

DatePickerでのstart〜endの制御

開始日を入力したら終了日は開始日以降にする
終了日を入力したら開始日は終了日以前しか入力できないようにする

<input type="text" name="start"> ~ <input type="text" name="end">
	<script>
			var format = 'yy/mm/dd';

			var start = $("[name=start]").datepicker({
				dateFormat: 'yy/mm/dd'
			}).on("change", function(){
				end.datepicker("option", "minDate", getDate(this));
			});

			var end = $("[name=end]").datepicker({
				dateFormat: 'yy/mm/dd'
			}).on("change", function(){
				start.datepicker("option", "maxDate", getDate(this));
			});

			function getDate(element){
				var date;
				try {
					date = $.datepicker.parseDate(format, element.value);
				} catch(error){
					date = null;
				}
				return date;
			}
	</script>

コントローラ(サーバ側)で制御するよりも、フロントで制御した方がユーザフレンドリーです。

TinyMCE5.xでtoolbarをbottomに変更する方法

<script>
        tinymce.init({
            //省略
            toolbar_location : "bottom",
        });
</script>

これこれ。結構探した。

https://github.com/tinymce/tinymce/issues/4618#issuecomment-586529196

TinyMCE 5.2.0 was released to the community earlier this week, which added a new toolbar_location setting that can be used to set where the toolbar should be rendered. The valid values are 'top' (default) or 'bottom'. Here's a fiddle to show how to use the new setting/feature: http://fiddle.tinymce.com/8bhaab/1.

There is one issue we're aware of with the new feature when opening an inline dialog (eg search and replace) when sticky toolbars is also enabled. We'll include a fix for that in a future release. Please let us know if you have any further issues.

TinyMCE5.2.1を使おう

1. self-hostedよりjsファイル群をdownloadする
https://www.tiny.cloud/get-tiny/self-hosted/
2. 日本語をダウンロード
https://www.tiny.cloud/get-tiny/language-packages/
-> ja.jsをtinymce/langs配下に配置する
3. Tool Control
https://www.tiny.cloud/docs/advanced/editor-control-identifiers/#toolbarcontrols

– デフォルトでpタグが入るので、forced_root_blockをnullにする
– 必要最低限

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TinyMCE</title>
    <script src="js/tinymce/tinymce.min.js"></script>
    <script>
        tinymce.init({
            selector: "#tiny",
            language: "ja",
            menubar: false,
            plugins: "emoticons",
            toolbar: "bold italic underline strikethrough emoticons",
            forced_root_block : '',
            statusbar: false,
        });
    </script>
</head>
<body>
    <h1>TinyMCEテスト</h1>
    <form method="post" action="confirm.php">
    <textarea id="tiny" name="input"></textarea>
    <input type="submit" value="送信">
    </form>
</body>
</html>

emoticonsが前より大量に増えていて感動した。

stopPropagation();

$(document).on('dragover dragenter dragend drag drop', function(e){
	e.stopPropagation();
	e.preventDefault();
});

> stopPropagation
> 親要素への伝播をキャンセルする。
ん？