カテゴリー
SugiBlog ホームページ制作・システム開発|大阪

テキストエリアの途中に文字を挿入する

テキストエリアの先頭や末尾に文字を追加するのは簡単ですが、途中(カーソル位置)に挿入するにはひと手間必要です。

例として適当なフォームを作成します。

<form name="myForm">
    <textarea name="myTextarea"></textarea>
    <input type="submit" value="送信">
</form>

次に以下のようなボタンを作ります。

<button onclick="addText();">文字追加</button>

ボタンを押したときに実行されるJavaScriptが以下のようになります。

function addText()
{
    var textarea = document.myForm.myTextarea;
    var pos      = textarea.selectionStart;

    var before   = textarea.value.substr(0, pos);
    var after    = textarea.value.substr(pos);

    textarea.value = before + "追加する文字列" + after;
}
393 views

iOS12.3.1でイベントdeviceorientationが動作しない

iOS 12.3.1のSafariでは、デフォルトでセンサーの値が取得できなくなったようです。

window.addEventListener("deviceorientation", function(event){}, true);

上記イベントがキャッチできません。

iOS 12.1では動作することを実機で確認しました。

対応策としては[設定]-[Safari]-[モーションと画面の向きのアクセス]をONにすると
キャッチできるようになりますが、一般ユーザーにこの設定を変えてもらうわけにはいきませんよね;
他に何か有用な情報を発見したら追記したいと思います。

804 views

ソーシャルボタンを綺麗に並べる

ブログ記事等に設置しておきたいSNSのボタンを綺麗に並べる方法

ボタンはulタグでli内に設置します。
そしてinline-blockで表示し、縦位置を上にすればOK。

.social_buttons{
    text-align: left;
}
 
.social_buttons > li {
    display: inline-block;
    vertical-align: top;
    margin: 0;
}
 
.social_buttons > li:first-child {
    margin-left: 0;
}
 
.social_buttons > li:last-child {
    margin-right: 0;
}
 
.social_buttons iframe {
    margin: 0 !important;
}
 
@media screen and (max-width: 780px){
    .social_buttons > li{
        width: 80px !important;
        margin: 0 7px 10px 0;
    }
}
920 views

jQueryプラグイン「bxSlider」を使う

スライドショーを実装してくれる「bxSlider」をご紹介します。
これまでにもスライドショーを実装できる色々なプラグインをご紹介しましたが、
最近はこれをよく使います。

bxSlider

まずはjQueryを読み込む。

<script src="./jquery-1.9.1.min.js"></script>

※ちなみに、jQueryが3.1.1だとエラーが発生しました。

続いてbxSliderのファイルを読み込みます。

<link href="./bxslider/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript" src="./bxslider/jquery.bxslider.min.js"></script>

スライドさせたい内容を用意します。

<ul class="bxslider">

    <li>
        <img src="./images/exam_picture1.jpg">
    </li>

    <li>
        <img src="./images/exam_picture2.jpg">
    </li>

    <li>
        <img src="./images/exam_picture3.jpg">
    </li>

</ul>

まずは簡単に実装してみましょう。

<script type="text/javascript">
<!--//
(function($) {
    $(document).ready(function(){

        $('.bxslider').bxSlider({
            auto: true,
            autoHover: true,
        });

    });
})(jQuery);
//-->
</script>

続きを読む…»

2,635 views

jQueryプラグイン Slider Pro

スライドショーを実装してくれるプラグインです。
IEでも動作し、レスポンシブにも対応しています。

JavaScriptライブラリをダウンロード
jQuery
Slider Pro

まずjQueryは必須です。

<script src="./jquery-1.9.1.min.js"></script>

次にSlider ProのスタイルシートやJSファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="./slider-pro-master/dist/css/slider-pro.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="./slider-pro-master/dist/css/examples.css" media="screen">

<script type="text/javascript" src="./slider-pro-master/dist/js/jquery.sliderPro.min.js"></script>

HTMLを記述します。

<div id="mySlider" class="mySlider slider-pro">

    <div class="sp-slides">

        <div class="sp-slide">

            <img class="sp-image" src="./slider-pro-master/src/css/images/blank.gif" data-src="[画像パス]" data-small="[サムネイル画像パス]">

            <p class="sp-layer sp-white sp-padding" data-horizontal="0" data-vertical="0" data-show-transition="left" data-show-delay="400">
                表示したいキャプション
            </p>

        </div>

    </div>

    <div class="sp-thumbnails">
        <img class="sp-thumbnail" src="[サムネイル画像パス]">
    </div>

</div>

キャプション部分のクラスとパラメーター

クラス
sp-layer キャプションを表示
sp-white 白背景に黒文字
sp-padding 10pxのパディングを設定
パラメーター
data-horizontal 水平固定位置を指定。数値、もしくはパーセンテージ。
data-vertical 垂直固定位置を指定。数値、もしくはパーセンテージ。
data-show-transition スライドの方向。(left, right, up, down)
data-show-delay 自動再生のスライド切り替え時間。単位:10ミリ秒

続きを読む…»

6,530 views