javascript


【jquery】masonryがスマホ画面で横並びしない場合の解決方法

javascript プラグインの masonry を使ったページでウインドウが横並びしない場合の対処法。

対処法 → columnWidth オプションを設定する。

------------------------------------------------------
<div class="js-masonry">

↓↓↓↓

<div class="js-masonry"
data-masonry-options='{
"columnWidth": 50,
"itemSelector": ".item",
"transitionDuration": "1.5s"
}'
>
------------------------------------------------------

columnWidth は、ボックスの横幅を指定するオプション。
masonry のデフォルトでは、スマホの画面幅にに二つ以上ウインドウを並べることはサイズ的に無理らしい。
そこで、50pxとかボックスのサイズを小さく指定する必要がある。

jqueryで文字列を置換するreplace関数【javascript】

jquery で文字列を置換するには、javascript のreplace関数を使う。
--------------------------------------------
new_text = text.replace(/探す文字列/g, '置換後の文字列');
--------------------------------------------

第一引数は正規表現で。g 修飾子はマッチするものすべてを見つける。

【jquery】配列内の重複を削除する【javascript】

jquery に unique() という関数があるが、これはDOM要素の配列の重複を削除するもの。文字列が入った配列の重複を解消するものでない。

jquery(javascript)で配列の内容をユニークにするには少し手間を掛ける必要がある。

//配列内の文字列の重複を削除する自作関数。
---------------------------------------------------------
function uniqueArray(array) {
var storage = {};
var resultAry = [];
var value;
for ( var i=0; i

cookieの値をjavascriptでページ上に表示する

cookieの値をjavascriptでページ上に表示する方法

javascriptの記述
---------------------------------------------------
// クッキーの値を取得 getCookie(クッキー名);
function getCookie(c_name){
var st="";
var ed="";
if(document.cookie.length>0){
// クッキーの値を取り出す
st=document.cookie.indexOf(c_name + "=");
if(st!=-1){
st=st+c_name.length+1;
ed=document.cookie.indexOf(";",st);
if(ed==-1) ed=document.cookie.length;
// 値をデコードして返す
return unescape(document.cookie.substring(st,ed));
}
}
return "";
}

// クッキーの値をアラートで表示
function checkCookie(){
if(getCookie('testcookie')){
var setName = getCookie('testcookie');
document.write(setName);
//alert(setName); //アラートならこっち
}
}
---------------------------------------------------

cookieの値を表示したい箇所に記述
---------------------------------------------------
<script type="text/javascript">
checkCookie();
</script>
---------------------------------------------------

もしPHPで処理したいなら
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
if (isset($_COOKIE["testcookie"]) {
//処理内容
}
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

参考サイト:こちら

cookieを保存する場合は、こちら

ボタンをクリックしたらjavascriptでcookieを保存する

このボタンを押すと cookie に「abc」と保存される
----------------------------------------------------------
<INPUT TYPE="button" NAME="button" VALUE="cookieに保存" ONCLICK="SetId('abc')">
----------------------------------------------------------

javascript の記述
----------------------------------------------------------
function SetId(strNum) {

var name = "testcookie"; // クッキーの名前
var value = strNum; // クッキーの値
var period = 7; // 有効期限日数

// 有効期限の作成(有効期限がないと、ブラウザを閉じた時点で cookieは無効)
var nowtime = new Date().getTime();
var clear_time = new Date(nowtime + (60 * 60 * 24 * 1000 * period));
var expires = clear_time.toGMTString();

// クッキーの発行(書き込み)
document.cookie = name + "=" + escape(value) + "; expires=" + expires;

window.alert(strNum + 'と保存しました'); // 警告ダイアログを表示

}
----------------------------------------------------------
参考サイト:こちら

cookieはこちらに保存される(IE11の場合)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
C:\Users\username\AppData\Roaming\Microsoft\Windows\Cookies\Low
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

cookie を開くとこんな感じ
----------------------------------------------------------
testcookie ←デリミタ
abc ←値
www.example.com/hoge/ ←cookieを発行したサイトURL
1600 ←フラグ
1888753024 ←有効期限1
30382331 ←有効期限2
1210506145 ←作成日時1
30380923 ←作成日時2
* ←デリミタ
----------------------------------------------------------

cookieの書式に関する詳細はこちら

保存したcookieを表示する場合は、こちら

HTMLにMP3を埋め込みブラウザで音声ファイルを再生する

HTMLにMP3を埋め込んでブラウザで再生するには、audio要素をJavaScriptから操作すればいい。

ボタンクリックでMP3が再生するサンプルコード
------------------------------------------
<html>
<head>
<script language="JavaScript"><!--
function playSound() {
document.getElementById('audio').play();

}
// --></script>

<audio id="audio">
<source src="sound.mp3" type="audio/mp3">
</audio>

<input type="button" value="再生" onclick="playSound()">

</body>
</html>
------------------------------------------

リンククリックで再生バージョンしたい場合は、再生ボタンを次のように書き換える
------------------------------------------
<a href="javascript:playSound()">再生</a>
------------------------------------------

3 / 3123