2023年11月04日
image onload
$(document).ready(function () {
var pre_load_img_num = $("#kv img").length;
var loaded_num = 0;
var preFlag=true;
var checkFunc = function(){
if(preFlag == false){
return;
}
loaded_num++;
if(loaded_num == pre_load_img_num){
preFlag = false;
$("body").fadeIn(1000);
fadeImg();
}
}
for(i=0;i<pre_load_img_num;i++){
let imgObj = $("#kv img")[i] ;
if(imgObj.complete){
console.log("comp");
checkFunc();
}else{
console.log("not comp");
imgObj.onload = checkFunc;
}
}
投稿者 muuming : 09:50
2023年07月10日
クリップボードにコピー
navigator.clipboard.writeText(p.textContent).then(
() => {
// コピーに成功したときの処理
},
() => {
// コピーに失敗したときの処理
});
navigator.clipboard.writeText(serial).then(
function () {
// コピーに成功したときの処理
alert(serial + "\nクリップボードへコピーしました");
},
function () {
// コピーに失敗したときの処理
}
);
投稿者 muuming : 10:08
2021年10月11日
tinymiceのプラグインのあんちょこ
/* global tinymce*/
(function () {
tinymce.create('tinymce.plugins.ExamplePlugin', { // 'ExamplePlugin' の部分には任意のプラグイン名が入ります。
init: function (ed, url) {
// ed には現在開いてるエディタの情報が入る
// url にはこのJsファイルまでのパスが入る
// コマンドを作る
ed.addCommand('example_cd', // 任意のコマンド名
// ↓追加したいコマンド（機能）内容を記入
function () {
ed.execCommand("mceInsertContent", false, "example");
// ↑ これだと <div>example</div> を挿入するコマンドです
});
// 上で書いたコマンドを実行するボタンを作る
ed.addButton('example', { // 任意のボタン名
title: 'example.desc', // ボタンのタイトル（マウスオーバー時に表示される）
cmd: 'example_cd', // 上で書いたコマンド名
image: url + '/img/example.gif' // ボタン画像のパス
});
},
// プラグインに関する情報（著者、ver など）を記入
getInfo: function () {
return {
longname: 'Example plugin',
author: 'Some author',
authorurl: 'http://tinymce.moxiecode.com',
infourl: 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/example',
version: 1.0
};
}
});
// ここまでに書いたプラグインコードを tinymce.PluginManager に登録。引数には行頭に書いたプラグイン名を入れる。
tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);
})();
from https://memocarilog.info/wordpress/6227
投稿者 muuming : 11:24
iframeのdocument ready
var iframe = document.getElementById('frameID'),
iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
$(iframeDoc).ready(function (event) {
投稿者 muuming : 08:21
2021年07月06日
oninputイベント
oninputなんて知りませんでした。すいません。
onchange → 変わった後
oninput → 入力しつつあるとき
投稿者 muuming : 10:25
2020年10月14日
touch系イベントの順番
特定のタッチイベントとマウスイベントの順序は実装依存ですが、標準仕様ではひとつの入力に対して次の順序が典型であるとしています。
touchstart
指の動作に応じて 0、または複数の touchmove イベント
touchend
mousemove
mousedown
mouseup
click
投稿者 muuming : 13:11 | コメント (0)
2020年10月10日
$.contains(container,target);
要素が含まれるか判定
$.contains(container,target);
target が「container中にあるか
引数に設定する要素はDOM要素です。jQueryオブジェクトは利用できないので注意してください。
投稿者 muuming : 04:50
2020年07月07日
jqueryのイベントリスナーどこで登録した？
開発者ツールのconsoleに以下を入力エンター
$._data($("#hoge").get(0), "events");
$が使えない場合は
jQuery._data(jQuery("#hoge").get(0), "events");
出てきたイベントのhandler関数を見ればよいよい
投稿者 muuming : 13:19 | コメント (0)
2019年12月28日
google map のマーカーにSVG使うとIE11で見えない
https://stackoverflow.com/questions/20414387/google-maps-svg-marker-doesnt-display-on-ie-11
var image = {
url: 'https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-marker.svg',
scaledSize: new google.maps.Size(100, 100),
}
var marker = new google.maps.Marker({
position: sanfrancisco,
map: map,
optimized: false,
icon: image
});
投稿者 muuming : 08:30
2019年08月02日
javascriptのsortを自作
ArrayVal.sort(function(a, b){
// 何が起こっているのか確認するためコンソール出力してみる
console.log(`A : ${a} ・ B : ${b}`);
// 通常の判定とは逆にしてみる
if(a < b) return 1;
if(a > b) return -1;
return 0;
});
投稿者 muuming : 11:50
2019年08月01日
dreamweberでgoogle map apiのエラーがめんどい
new google.maps.LatLng(38.317182, 138.016466);
とかでデフォルトだとエラーが出てうぜーってなるけど
/* global google */
とコメント書いておけば、ああそれ他で定義済みなのねって理解してくれてでなくなります！
console.logがエラーになる場合は
サイトの設定→詳細設定→JS構文チェックで編集
no-console offにする
投稿者 muuming : 12:46
2019年05月29日
windowサイズ
スクロールバーもサイズに入れる
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
スクロールバーはサイズに入れない
$(window).height()
投稿者 muuming : 06:53
2019年04月13日
promiseとかのがくしゅう
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<script src="kanri/js/jquery-3.3.1.min.js"></script>
<title>通常の非同期</title>
</head>
<body>
6.jpgが
非常に大きい状態でテストすると最後に6.jpgの読み込み完了と当然なる
<script type="text/javascript">
function loadImg(url){
var img = new Image();
img.onload = function(){
console.log(img.src + " end");
};
img.onerror=function(){
console.log("err");
};
img.src = url;
}
loadImg("6.jpg");
loadImg("4.jpg");
loadImg("5.jpg");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="kanri/js/jquery-3.3.1.min.js"></script>
<title>通常の非同期</title>
</head>
<body>
6.jpgが
非常に大きい状態でテストしても順番によみこまれる
<script type="text/javascript">
function loadImg(url){
return new Promise(function(resolve, reject){
var img = new Image();
img.onload = function(){
console.log(url+" loadend");
resolve(img);
};
img.onerror = function(e){reject(e)};
/*
これは
img.onerror = (e) => reject(e);
とも省略できるようだ。わかりにくい。
*/
img.src = url;
});
};
async function poge(){
var img1 = await loadImg("6.jpg?22").catch(function(e){console.log(e)});
var img2 = await loadImg("4.jpg?22").catch(function(e){console.log(e)});
var img3 = await loadImg("5.jpg?22").catch(function(e){console.log(e)});
};
poge();
</script>
</body>
</html>
投稿者 muuming : 11:54
2019年03月19日
canvasメモ１
◆四角系
幅、高さ、角丸のサイズ
◆円
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
x, y：中心点
radius：半径
startAngle：開始角度
endAngle：終了角度
anticlockwise：右回り左回り
◆楕円
ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);
x, y：中心点
radiusXY：横縦半径
startAngle：開始角度
endAngle：終了角度
もしくは
/* 円を描く */
ctx.save();
ctx.scale(2, 1); // 横２倍のスケールに引き伸ばして円を書いて元に戻せば楕円に
ctx.beginPath();
ctx.arc(100, 100, 50, Math.PI * 2, false);
ctx.restore();
ctx.stroke();
倍率かえて描画すれば円を潰した感じで楕円になる
◆共通
傾き context.rotate( 50 * Math.PI / 180 ) ;
線 幅、色（幅は内側、外側？おぺらは外に線が表示された）
ctx.strokeStyle = color;
ctx.lineWidth = 5;
影 shadowColor shadowBlur (ぼかしのサイズ) shadowOffsetY shadowOffsetX
/* ぼかしの範囲を定義 */
ctx.shadowBlur = 10;
/* ぼかしの色を定義 */
ctx.shadowColor = "#990000";
ctx.shadowOffsetY = "3";
ctx.shadowOffsetX= "3";
ctx.beginPath();
ctx.arc(50, 50, 35, 0, Math.PI*2, false);
ctx.fillStyle = "#cc0000";
ctx.fill();
中の画像（データ、位置、拡大率、透明度）
回転は基本的に座標0,0を中心に回転する
なので、個別のオブジェクトを回転したい場合は以下のような感じ
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Non-rotated rectangle
ctx.fillStyle = 'gray';
ctx.fillRect(80, 60, 140, 30);
// Matrix transformation
ctx.translate(150, 75);
ctx.rotate(Math.PI / 2);
ctx.translate(-150, -75);
// Rotated rectangle
ctx.fillStyle = 'red';
ctx.fillRect(80, 60, 140, 30);
投稿者 muuming : 06:04
2018年12月09日
append終わった？
以下のような内容をみかけたがこれはウソっぽい
appenは同期処理なので、その行の次の行には処理が終了しないと遷移しないので、何も考えずにかけば次の行ではappendは完了しているはず。
ーーーーーーーーーーーーーーーー
var test = $('');
$('body').append(test);
test.ready(function() {
console.log(test.width());
});
callbackはないので上記のように～
remove
$.when($('div').remove()).then( console.log('div removed') );
この書き方もできるか？
投稿者 muuming : 14:51
2018年12月07日
ドラッグ時のマウスカーソルの表示はCSSではないよ
$("body").on("drag",function(e){
e.originalEvent.dataTransfer.dropEffect = "none";
});
drag開始時であれば
$("body").on("dragstart",function(e){
event.dataTransfer.effectAllowed = "copy";
});
none
どの操作も許可されていない（ドロップを禁止）。
copy
コピーのみが許可されている。
move
移動のみが許可されている。
link
リンクのみが許可されている。
copyMove
コピーまたは移動のみが許可されている。
copyLink
コピーまたはリンクのみが許可されている。
linkMove
リンクまたは移動のみが許可されている。
all
コピー、移行、リンクの全ての操作が許可されている。
だってさ
あとdrag時の表示を変えるには
var dragIcon = document.createElement('img');
dragIcon.src = 'logo.png';
dragIcon.width = 100;
e.dataTransfer.setDragImage(dragIcon, -10, -10);
これをdragstartにぶちこむといいのかな？
投稿者 muuming : 16:32
2018年08月17日
画像ペーストでデータURL取得の骨組み
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>p</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<a href="" id="ss">ここ</a>
<input type="text" name="poge" value="oo">
<script>
$("input[name=poge]").on("paste",function(e){
if (e.originalEvent.clipboardData.files.length){
console.log(e.originalEvent.clipboardData.files.length);
e.preventDefault();
let datobj = e.originalEvent.clipboardData.files[0];
console.log(datobj);
var reader = new FileReader();
reader.onloadend = function () {
$("#ss").attr({"href":reader.result});
}
reader.readAsDataURL(datobj);
}
});
</script>
</body>
</html>
投稿者 muuming : 11:33
2017年12月28日
後から出てくる要素にイベントリスナ
jquery 使えば $("body").on で出来るけど 、
素で書く場合は全体でイベント監視して対象がそれだったら的な書き方
document.addEventListener('change', function(e) {
var target = event.target || event.srcElement;
if (target.id == 'selected_id') {
// 処理
}
});
投稿者 muuming : 11:25
長押し判定 javascript
function touchStart(){var interval = 500;
timer = setTimeout(function()
{
//長押ししたと判定～その後の処理
console.log("長押し完了");
}, interval);
}
document.addEventListener(‘touchstart’, cancelFunc, false);//タップされた瞬間
document.addEventListener(‘touchmove’, cancelFunc, false);//指を動かしている
document.addEventListener(‘touchend’, cancelFunc, false);//指が画面から離れた
document.addEventListener(‘touchcancel’, cancelFunc, false);//システム側の要請でタッチがキャンセルされた
cancelFunc = function(){clearTimeout(timer);};
投稿者 muuming : 05:36
taouch 出来る？ javascript
if ('ontouchstart' in document.documentElement) {
//タッチできる
}
投稿者 muuming : 05:35
2017年11月26日
jquery プラグイン構造忘れる
(function( $ ){
$.fn.myPlugin = function() {
// ここでは"this"=$('#element')
// ここでの$(this)は$($('#element'))と同じ事になります
this.fadeIn('normal', function(){
// ここでのthisはDOM要素になります
//$(this) = $('#element')
});
};
})( jQuery );
$('#element').myPlugin();
投稿者 muuming : 16:56
2017年11月23日
javascriptでフォームのバリテーション
document.form1.checkValidity → 正誤のみでエラー表示なし
document.form1.reportValidity → 正誤とエラー表示（submitボタン押した後の動作と同じかな？）
投稿者 muuming : 11:51
2017年10月19日
画像の先読み込み
var imgList =["img/top/main1.jpg","img/top/main2.jpg","img/top/main3.jpg"];
var loadEndNum = 0;
var imgObjList = [];
var loadEndFnc = function() {
loadEndNum++;
if(loadEndNum === imgList.length){
doSlide();
}
};
for(var i=0;i<imgList.length;i++){
imgObjList[i] = new Image();
imgObjList[i].onload = loadEndFnc;
imgObjList[i].src = imgList[i];
}
var doSlide = function(){
alert("読み込み完了");
};
投稿者 muuming : 14:33
2017年06月26日
dragイベント違い
イベント 発生するタイミング
dragstart ドラッグ開始時
drag ドラッグしている間
dragend ドラッグ終了時
dragenter ドラッグしている要素がドロップ領域に入ったとき
dragover ドラッグしている要素がドロップ領域にある間
dragleave ドラッグしている要素がドロップ領域から出たとき
drop ドラッグしている要素がドロップ領域にドロップされたとき
投稿者 muuming : 05:07
2017年06月07日
javascriptキューのお話
var p=1;
setTimeout(function(){p=2},1000);
while(p==1){
console.log("waiting");
}
console.log("end");
上記処理はいつまでたっても終わらない。
といのはsetTimeoutで登録された関数は最後の行console.log("end");が終わってから１秒後に実施されるのでpの値は変わらずwhileループは無限ループとなる
ならばimg.onLoad とかどうなの？って思うがこれもキューに登録されているんで同じことになる。
var p=1;
var img = new Image();
img.onLoad = function(){
"use strict";
p=2;
};
img.src = "a.jpg";
console.log(p);
while(p===1){
console.log("a");
}
console.log("end");
これも無限ループばい
投稿者 muuming : 09:42
2017年06月06日
javascript promise
なんかこんな感じ
function profunc(file) {
return new Promise(function(resolve, reject){
settimeout(function(){
//ごにょごにょっと処理
if(err){
reject(err);
}else{
resolve(retval);
}
},5000);
});
});
}
profunc().then(function(){alert("aa");}).catch(function (error) {
// 呼ばれる
console.log(error); // => 'Error'
});
throw "Invalid Format";エラーもcatchしてくれるらしい
投稿者 muuming : 14:49
2017年05月18日
ダウンロードプログレッシブバー
アップロードのプログレッシブバーは簡単にできるようになっている。
$.ajax({
中略
xhr: function() {
var XHR = $.ajaxSettings.xhr();
if (XHR.upload) {
XHR.upload.addEventListener(
'progress',
function(e) {
var progre = parseInt(e.loaded / e.total * 10000) / 100;
console.log( progre + "%");
}, false);
}
return XHR;
},
ダウンロードができねえ。そうアップロードのときのようには出来ない。
なので ファイルをダウンロードさせるのに直接ファイルをダウンロードさせずに、
プログラムをかます。その際どの程度ファイルを投げたかをサーバー内のファイルに記載
そのデータを表側のjavascriptでsettimeoutでなんども取得して画面に進捗表示する。
filesize にてファイルのサイズ取得
$handle = fopen($path, "rb");
$downloadedsize = 0;
while(!feof($handle))
{
print fread($handle, 4096);
$downloadedsize +=
4096;
んでここにてナンパーか計算して外部ファイルに記述
ob_flush();
flush();
}
fclose();
と思ったが、調べてみると出来た・・・
$.ajax({
url: "depth.txt",
type: 'GET',
dataType: "text",
cache: true,
success: function(data) {
lists = CSVToArray(data);
google.maps.event.addListener(map, 'bounds_changed', showPointFunc);
$("body").css({
opacity: 1
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
var mess;
console.error("XMLHttpRequest : " + XMLHttpRequest.status);
console.error("textStatus : " + textStatus);
console.error("errorThrown : " + errorThrown.message);
if (textStatus === "timeout") {
mess = "タイムアウトしました。低速回線の場合タイム・アウトする可能性があります。何度施行しても状況が変わらない場合、システム管理者に連絡してください";
} else {
mess = "データ読み込みでエラー発生";
}
alert(mess);
return;
},
xhr: function() {
// get the native XmlHttpRequest object
var xhr = $.ajaxSettings.xhr();
xhr.onprogress = function(e) {
console.log(e.loaded / e.total);
};
return xhr;
}
});
投稿者 muuming : 17:48
2016年12月06日
javascript numberformat
//**********************
// 数フォーマット表示用
//**********************
function number_format(str) {
var num = new String(str).replace(/,/g, "");
while (num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
return num;
}
投稿者 muuming : 15:21
2016年04月12日
jquery.js:2052 Uncaught TypeError: X[g].exec is not a function
jquery.js:2052 Uncaught TypeError: X[g].exec is not a function
って言われる場合は
Object.prototype.keyexist = function(val) {
とかしていないかチェック
何が悪いのか、当然エラーが出るだろうなのかは不明
しょうがないので別の書き方で独自関数作ろう
投稿者 muuming : 13:04
2014年10月02日
javascriptで画像いじりメモ
Pixasticをいじり中
やる気でない・・・
Pixastic.processでの返り値はcanvas要素
これをURLに変換するにはtoDataURLを使うっと
投稿者 muuming : 11:31
2014年09月22日
javascriptランダム化
とりあえず何も考えずにｗ
function shuffle(array) {
var copy = [], n = array.length, i;// While there remain elements to shuffle…
while (n) {// Pick a remaining element…
i = Math.floor(Math.random() * array.length);// If not already shuffled, move it to the new array.
if (i in array) {
copy.push(array[i]);
delete array[i];
n--;
}
}return copy;
}
投稿者 muuming : 11:16
2014年08月22日
ボックスの中心に画像を強制的に配置
ボックスの中心に画像を配置する場合は普通はcssだけで実現可能
ボックスにcssでdisplay:table-cellあたり適応してvertical-align:middleで昔のテーブルみたいに。
ただ、画像の方がボックスより大きくボックスからはみ出たぶんはoverflow:hiddenで見切る場合は難しい。
画像サイズや画角が不明な場合もうjavascriptの出番となるようだ。
そこでjqueryで画像を中心に配置するものを作りました。
使い方はjqueryの読み込み後上記も読み込んで
$(".box").imgcenter(140,100,1);
です。最後の１は小さい画像を大きくするかです。
140 100はボックスのサイズです。
<div class="box"><img src="hoge.jpg"></div>
これで class="box" のボックス内の画像を中心自動配置してくれます。
投稿者 muuming : 16:11 | コメント (0)
2014年03月13日
あんかーりんくをスムーズ移動のソース
アイディアメモ投稿者 muuming : 18:22
2014年02月28日
jquery animate 複数 同時
$("#hoge,#poge").animate・・・
ID hoge と poge 同時に
$("#hoge,#poge").animate({opacity: 1},{duration: 1000,easing:"Strshow",queue: false}).animate({width:"200px"},{duration: 2000,easing:"Strshow",queue: false});
と後に続ける感じで
queue: falseで同時実行
queue: true でひとつ終わったら次実行
投稿者 muuming : 16:33
2013年09月21日
互換モード
後方互換モードで見てるかどうかの判定
document.compatModeで取得できる値は、標準準拠モードがCSS1Compat、後方互換モードがBackCompatです。
とのこと・
投稿者 muuming : 16:16 | コメント (0)
ウィンドウサイズに合わせる
var winhtight = window.innerHeight ? window.innerHeight : $(window).height();
var winwidth = window.innerWidth ? window.innerWidth : $(window).width();
投稿者 muuming : 15:14 | コメント (0)
2013年09月17日
jquery-css-transform.js
jqueryでは回転とかtransform系が簡単に指定できなかった。
ブラウザごとに記載方法がことなっており、共通化されてなかった。そのため、jquery-css-transform.jsにて１個書いたら共通で使えるようにしていた。
が、いまのjquery 1.10.2あたりだと多分この問題は解消されてるっぽい。
なので
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/jscript">
$(document).ready(
function(){
$("#koge").css({ transform: 'rotate(30deg) scale(1.5)' });
}
);
</script>
にて動作した。
投稿者 muuming : 15:30 | コメント (0)
2013年02月28日
javascript for in
javascript の if (key in arrayname) を PHPで言うところのin_arrayかと勘違いしてた。array_key_existsと同じなのねｗ
in_arrayは自作しか無い？
//************************
// in_array
//**************************
function in_array(){
var l = arguments.length;
var x = (l > 0) ? arguments[0] : ''; // string X
var a = (l > 1) ? arguments[1] : []; // array
var s = (l > 2) ? arguments[2] : false; // strict
for(var i = 0; i < a.length; i++){
if((s&& a[i]===x) || (!s&& a[i]==x)){return true;}
}
return false;
}
投稿者 muuming : 12:03 | コメント (0)
2013年02月25日
jquary 引数 イベント
構造的にはこんな感じでというメモ
$("#icon"+ i).click(
(function(_i){
return function() {
//中心地を変更
centerImgNo = _i;
movespeedy();
};
})(i)
);
投稿者 muuming : 17:44 | コメント (0)
2012年12月18日
facebook いいねボタンカウント取得
いいねボタンをオリジナルデザインで自作とカウント数の取得表示
結果：いいねボタンの自作はいまんところ無理ぽ
なのでshareボタンで代用
shareボタンの作り方は簡単
http://www.facebook.com/sharer.php?u=http://example.com/index.html
にリンク貼ればOK
んでその時にHTMLのヘッダーに
<meta property="og:title" content="ページのタイトル" />
<meta property="og:locale" content="ja_JP" />
<meta property="og:type" content="article" />
<meta property="og:image" content="http://www.example.com/photo.jpg" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページ内容の要約" />
<meta property="fb:admins" content="100002685496881" />
を入れること。
これ入れるとボタンが押された後のサムネとか指定できるよ。
それぞれ何をさすかは調べてね。
---------------------------------------
んでもって投稿数取得
https://graph.facebook.com/http://www.example.com
にてアクセスすれば
{
"id": "http://www.example.com",
"shares": 78217,
"comments": 25
}
と帰ってくるんだが、URLに日本語を含む場合ちゃんととれたり取れなかったり・・・・
なので次の方法でわたしはとりますた。
参考：http://developers.facebook.com/docs/technical-guides/fql/
http://developers.facebook.com/docs/reference/fql/link_stat
http://graph.facebook.com/fql?callback=data&q=SELECT%20url,%20normalized_url,%20total_count%20FROM%20link_stat%20WHERE%20url='http://example.com'";
上記にアクセス
/**/ data({
"data": [
{
"url": "http://example.com",
"normalized_url": "http://www.example.com/",
"total_count": 78217
}
]
});
あとはちょいちょいとデータ加工してあげよう。
http://www.pochiteku.comにて使ったので具体的にはそこを見て。 間違いあれば教えてくんろ。
投稿者 muuming : 11:36 | コメント (0)
2010年10月19日
指定したdom中の全てのIDを返す javascript
//**************************************
// 指定したdom中の全てのIDを返す
//**************************************
var retAllId = function (dom){
var ret = new Array();
var chileds = dom.childNodes;
var i;
for(i=0;i<chileds.length;i++){
if ( chileds[i].nodeType == 1){
if(chileds[i].id){
ret[ret.length] = chileds[i].id;
}
var chileds2 = chileds[i].childNodes;
if(chileds2.length){
var tmp = retAllId(chileds[i]);
if(tmp.length){
var p = 0;
for(p=0;p<tmp.length;p++){
ret[ret.length] = tmp[p];
}
}
}
}
}
return ret;
}
投稿者 muuming : 13:41 | コメント (0)
2010年08月05日
childNodes nodeType
chileds = obj.childNodes で objの中にあるノードすべてをリストで返す
この中にはテキストもあれば何でもかんでも入っている。
例えばこの中のタグのみを取得したい場合困る
そこでnodeType の出現
if ( chileds[0].nodeType == 1){
でタグオブジェクトのみとれる
nodeTypeと番号の一覧
ELEMENT_NODE 1
ATTRIBUTE_NODE 2
TEXT_NODE 3
CDATA_SECTION_NODE 4
ENTITY_REFERENCE_NODE 5
ENTITY_NODE 6
PROCESSING_INSTRUCTION_NODE 7
COMMENT_NODE 8
DOCUMENT_NODE 9
DOCUMENT_TYPE_NODE 10
DOCUMENT_FRAGMENT_NODE 11
NOTATION_NODE 12
投稿者 muuming : 13:17 | コメント (0)
2010年08月03日
javascript [object Object] 中身を見る
arguments[0].toSource()
toSource() しりまへんでした
投稿者 muuming : 09:13 | コメント (0)
2010年07月30日
javascript 引数
よーわすれる
引数は
arguments
ちゅうものに勝手に入る。
arguments.length 引数の数
投稿者 muuming : 15:21 | コメント (0)
2010年07月16日
マウスホイール javascript
マウスホイールの感知がうまくいかぬ
http://tatamilab.jp/~yuugo/parapara/ooi/parapara.html
ということで参考ページ
投稿者 muuming : 12:31 | コメント (0)
2010年07月15日
イベント起こった要素などなど
http://www.tohoho-web.com/js/event.htm ページがなくなった時のために個人的にピーコ■ 一覧
altKey, button, cancelBubble, captureEvents(), clientX, clientY, ctrlKey, data, event, fromElement, height, keyCode, layerX, layerY, modifiers, offsetX, offsetY, pageX, pageY, reason, returnValue, screenX(IE), screenX(N), screenY(IE), screenY(N), shiftKey, srcElement, srcFilter, target, type(IE), type(N), which, width, x, y
■ イベントオブジェクト(Internet Explorer)
◆ window.event (e4)
onClick="..." などのイベントハンドラの中で参照できるイベントオブジェクトです。イベントの概要については「イベントハンドラ」を参照してください。
◆ window.event.type (e4)
イベントタイプ。たとえば、onClick の時は "click" という文字列となります。
<input type="button" value="Click Me!!"
onclick="alert(window.event.type)">
◆ window.event.keyCode (e4)
◆ window.event.shiftKey (e4)
◆ window.event.ctrlKey (e4)
◆ window.event.altKey (e4)
◆ window.event.button (e4)
keyCode は、イベントが発生した時に、キーボード上のどのキーが押されていたかを示す値（ASCIIコード）。shiftKey、ctrlKey、altKey は、イベントが発生した時に、Shiftキー、Ctrlキー、Altキーが押されていたかどうかを示す真偽値。button は、イベントが発生した時に、マウスのどのボタンが押されていたかを示す値。1 は左ボタン、2 は右ボタン、4 は真中ボタンを示し、2 つ以上のボタンが押された場合はその合計値となります。
<input type="text" onkeypress="alert(window.event.keyCode)">
<input type="button" value="Click Me!!"
onclick="alert(window.event.button)">
◆ window.event.screenX (e4)
◆ window.event.screenY (e4)
◆ window.event.clientX (e4)
◆ window.event.clientY (e4)
◆ window.event.x (e4)
◆ window.event.y (e4)
◆ window.event.offsetX (e4)
◆ window.event.offsetY (e4)
このイベントが発生した場所の座標。screenX、screenY はスクリーン上の座標、clientX、clientY はクライアント領域（ウィンドウ）上の座標、x、y は配置された親要素（通常は BODY 要素）上の座標、offsetX、offsetY は、クリックした要素上の座標を示します。
<img src="xxx.gif" alt="xxx" onclick="alert(
'screen=' + event.screenX + ',' + event.screenY +
', client=' + event.clientX + ',' + event.clientY +
', xy=' + event.x + ',' + event.y +
', offset=' + event.offsetX + ',' + event.offsetY)">
◆ window.event.srcElement (e4)
◆ window.event.fromElement (e4)
srcElement は、このイベントが発生した要素を示すオブジェクト。fromElement は、onMouseOver および onMouseOut イベントが発生した際の、マウスの移動元の要素を示すオブジェクト。
<img src="xxx.gif" alt="xxx" onclick="alert(event.srcElement.src)">
◆ window.event.srcFilter (e4)
onFilterChange イベントが発生した際の、発生元フィルタオブジェクト。
◆ window.event.cancelBubble (e4)
このイベントを上位の要素のイベントハンドラに渡すかどうかを示す真偽値。true を代入すると、上位のイベントハンドラが呼ばれなくなります。
<script type="text/javascript">
<!--
function child() {
alert("child");
event.cancelBubble = true;
}
function parent() {
alert("parent");
}
// -->
</script>
<div style="background-color:red; width:200; height:200;"
onclick="parent()">
<div style="background-color:blue; width:100; height:100;"
onclick="child()">
</div>
</div>
◆ window.event.returnValue = value (e4)
このイベントハンドラの戻り値。通常は「return value;」とするのと同等です。false を代入することにより、「Submitボタンを押した」や「リンクをクリックした」などの、イベント本来の動作を抑制することができます。
◆ window.event.reason (e4)
データソースオブジェクトにおけるデータ転送の状態。0 は成功、1 は中断、2 は失敗を示します。
■ イベントオブジェクト(Netscape Communicator)
◆ object.captureEvents(eventName) (N4)
Netscape Communicator 4.0 でサポートされたイベント処理技術で、イベントのキャプチャを開始します。eventName には、Event.イベント名 を指定します。
◆ event (N4)
イベントハンドラの中で参照可能な event オブジェクトです。
<script type="text/javascript">
<!--
function func(e) {
alert(e.height + "," + e.width);
}
// -->
</script>
<form action="#">
<input type="button" name="B1" onclick="func(event)" value="OK">
</form>
「onxxxx = 関数名」でキャプチャしたイベントハンドラには引数として渡されます。
<script type="text/javascript">
<!--
window.captureEvents(Event.CLICK);
window.onclick = func;
function func(e) {
alert(e.height + "," + e.width);
}
// -->
</script>
◆ event.target (N4)
イメージオブジェクトやボタンオブジェクトなど、最初にイベントが送られたオブジェクトを示します。
◆ event.type (N4)
発生したイベントのタイプを "click" などの文字列で表します。
◆ event.data (N4)
DragDrop の際、ドラッグ＆ドロップしたオブジェクト（ファイルなど）の URL を示す文字列の配列。
◆ event.which (N4)
どのマウスボタンが押されたかを示します。1 が左ボタン、2 が（あれば）真ん中ボタン、3 が右ボタンとなります。
document.onmousedown = func;
function func(e) { alert(e.which); }
◆ event.modifiers (N4)
イベント発生時にどの特殊キーが押されていたかを示します。Windows の場合は Alt（1）、Ctrl（2）、Shift（4）、Meta（8）の、Macintosh の場合はOption（1）、Ctrl（2）、Shift（4）、Command（8）の合計が値となります。
◆ event.screenX (N4)
◆ event.screenY (N4)
◆ event.pageX (N4)
◆ event.pageY (N4)
◆ event.width (N4)
◆ event.height (N4)
◆ event.layerX (N4)
◆ event.layerY (N4)
イベントが発生した場所の、screenX、screenY はスクリーン（ディスプレイ）上の座標、pageX、pageY はページ上の座標、width、height はウィンドウ（フレーム）上の座標、layerX、layerY はレイヤー上の座標、を示します。
投稿者 muuming : 16:54 | コメント (0)
javascript バブリングの抑止
addEventListener("click", 関数名, false);
でイベント登録するとそれを内包するDOMに同じクリックイベントがあると
それも発動するのを抑止
とりあえずサンプルをぱくってきた
http://www.saburo.org/shell/buble_test.html
jqueryの場合
preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。
return false; を使うと、その要素のイベントも親要素への伝播も両方キャンセルする。
投稿者 muuming : 09:30 | コメント (0)
2010年07月14日
どらっぐ
http://www.res-system.com/weblog/media/1/dragdrop.html
投稿者 muuming : 16:10 | コメント (0)
ホイールイベント
ぐるぐるぐーるね
投稿者 muuming : 16:05 | コメント (0)
2010年06月24日
参考なるのー
http://itpro.nikkeibp.co.jp/article/COLUMN/20070626/275913/?ST=develop
投稿者 muuming : 16:49 | コメント (0)
2010年06月04日
javascript select 選択されているDOM
function test1(form) {
//選択された項目番号
var index = form.select1.selectedIndex;
//表示されているテキスト
var str = form.select1.options[index].text;
form.text1.value = str;
}
なんどやっても忘れるなぁ
だめだｗ
投稿者 muuming : 10:10 | コメント (0)
2010年01月29日
from 配列 javascript
form 要素に
name="p[]" トした場合は
obj = document.form1.elements("p")
obj[0] とかでアクセス可能だが
name="p[1]" トした場合はなんか上の方法でいかんので
無理やり以下の方法でアクセス
obj = eval("document.form2.elements");
for(i=0;i
if(obj[i].name == "course[1]"){
if(obj[i].checked){
obj[i].checked = false;
}else{
obj[i].checked = true;
}
break;
}
}
投稿者 muuming : 13:40 | コメント (0)
2009年11月04日
座標から住所 住所から座標 google map
住所から座標address＝”住所”；
var geocoder = new GClientGeocoder();
geocoder.getLatLng( address, function(point) {
if (!point) {
//alert(address + " not found");
} else {
map.setCenter(point, 16);
}
});
座標から住所
var point = marker.getLatLng();
var geocoder = new GClientGeocoder();
geocoder.getLocations(point, function(addresses) {
var n;
if(addresses.Status.code == 200) {
for(p=0;p<addresses.Placemark.length;p++){
if(addresses.Placemark[p].AddressDetails.Accuracy == 4){
document.form1.shop_place.value = addresses.Placemark[n].AddressDetails.Country.AdministrativeArea.AdministrativeAreaName +addresses.Placemark[n].AddressDetails.Country.AdministrativeArea.Locality.LocalityName;
}
}
}
});
座標求めと違って候補が何個もでてくるのがめんどうだが、Accuracyをみて希望の情報をゲットすべし
投稿者 muuming : 17:51 | コメント (0)
2009年11月02日
終了していない文字型の定数 IE
ファイヤーフォックスではうまくいってIEだけでうまくいかない場合・・・
「終了していない文字型の定数」とか文句を言われる場合は
文字コードの指定あたりで問題あること多し
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
ぬけてない？
投稿者 muuming : 17:02 | コメント (0)
2009年10月27日
ページ内 ウィンドウ っぽいやつ
http://colorpowered.com/colorbox/
colorbox 便利
使い方はいろいろあるっぽいので本家サイトをみるとして
今回使ったフレーム表示の方法だけ
<script type='text/javascript' src="./js/jquery.js"></script> <script type='text/javascript' src="./js/jquery.colorbox-min.js"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$(".iframe").colorbox({width:"700px;", height:"90%", iframe:true});
});
</script>
んで ぽよんと開きたいaタグに calss="iframe" としてOK
投稿者 muuming : 16:56 | コメント (0)
2009年10月08日
tr display none 消す
裏技かもしれないが・・・・
ｔｒも消したり出したり可能
document.getElementByID("hoge").display = "none"; で消える
が
document.getElementByID("hoge").display = "block";
では戻せないらしい
戻すには
document.getElementByID("hoge").display = "";
と空を設定してあげるといいそうな
投稿者 muuming : 18:46 | コメント (0)
2009年09月25日
json文字列 を配列にする
jsonText = '{"test1": "hello1","test2": "hello2","test3": "hello3"}'
json = eval("(" + jsonText + ")");
投稿者 muuming : 10:16 | コメント (0)
2009年09月09日
半角記号英数の正規表現
var regObj = new RegExp("^[0-9a-zA-Z!\"#$%&'()=^~|[{\\]}@`:*;+\\\\_?/.>,<-]{6,}$");if(! regObj.test($F("passwd"))){
あってるかは不明・・・
投稿者 muuming : 17:40 | コメント (0)
2009年09月08日
改行を取り除く
title = title.replace(/\r\n/g, "");
title = title.replace(/(\n|\r)/g,"");
投稿者 muuming : 15:57 | コメント (1)
表示しているページのURL
自身に遷移させるときとか イゲタ#＃とか引数が
location.href で取得すると邪魔
location.pathnameとかいうのがあるらしい
投稿者 muuming : 15:56 | コメント (0)
2009年08月28日
javascript で正規表現
rObj = new RegExp("[a-z]+");
rObj .test(str) (e4/N4)
strにregexpがマッチしたかどうかをtrue|falseで返す。
投稿者 muuming : 15:21 | コメント (0)
2009年08月25日
ThickBox 3
ThickBox 3で画面内に別ページを表示させる
別ページといっても同じサイトのものに限る？なんかiframeの場合はいけるのか？
http://jquery.com/demo/thickbox/
から
* thickbox.js
* thickbox.css
* loadingAnimation.gif
* jquery.js
このへんとってきて
gifは images/以下に配置
とHTMLの頭に記載して
<a href="http://yahoo.co.jp/?TB_iframe=true&width=1200&height=800" class="thickbox">
でおわり
flame内に閉じるボタンつけたい場合は
<a href="#" onclick="self.parent.tb_remove();" >とじる</a>
投稿者 muuming : 11:25 | コメント (1)
2008年10月07日
javascript イベントリスナー
規格通り（ふぁいやーふぉっくすなど）
//リスナー追加
element.addEventListener("click", func, true);
//リスナー削除
element.removeEventListener("click", func, true);
規格外（IE）
//リスナー追加
element.attachEvent("onclick", func);
//リスナー削除
element.detachEvent("onclick", func);
onclickとかclickはイベントの名前です。
IEの場合はイベント名の前にonがいります。
以下よく使いそうなイベント名と対応するイベント発生条件。
* load･･･読み込まれたとき
* change･･･selectなどを変えたとき
* click･･･クリックされたとき
* keydown･･･キーが押されたとき（どのキーが押されたかもわかります）
* keyup･･･キーが放されたとき
* keypress･･･キーが押されたとき
* mousedown･･･マウスがクリックされたとき
* mouseup･･･マウスのクリックを放したとき
* mouseover･･･マウスがエレメントの上に来たとき
* mouseout･･･マウスがエレメントの上から離れたとき
渡す関数に引数を渡したい？？
element.addEventListener("click", func(1,4), true);
↑これは無理です。渡すのはあくまでも関数です。
上記に似たことを行うには（無名関数を使った例）
element.addEventListener("click", function(){func(1,4);}, true);
となります。無名関数の削除方法はのちほど・・・
投稿者 muuming : 09:14 | コメント (0)
2008年06月05日
FORMの要素で配列を使った場合
form
<input name="regno[0]" type="hidden" id="regno">
<input name="regno[1]" type="hidden" id="regno">
などとした場合 javascript でこいつにアクセスするには
document.form.elements['regno[０]'] とする。
投稿者 muuming : 19:26 | コメント (0)
2007年11月05日
フラッシュ関係のJS
<script type="text/javascript" src="swfobject.js"></script> <!-- スクリプトの読み込み --><div id="flashcontent"> <!-- Flashタグ挿入用DIV要素の定義 -->
This text is replaced by the Flash movie.
</div>
<script type="text/javascript"> <!-- SWFObjectの初期化とHTML埋め込み
-->
var so = new SWFObject("movie.swf", "mymovie", "200",
"100", "7", "#336699");
so.write("flashcontent");
</script>
so.addParam("wmode", "transparent");
so.addParam("salign", "t");
パラメーター一覧
http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_12701&sliceId=2
なども指定可能
http://www.jeroenwijering.com/extras/readme.html
こっちんがええごた
投稿者 muuming : 13:29 | コメント (0)
2007年07月27日
ブラウザごとに振り分け
【対応状況】
document.all … IE4 ～
document.getElementById … IE5 ～、NN6 ～
document.layers … NN4
document.images … IE4 ～、NN3 ～
上記の対応状況を使って、次の例のように細かく振分けることもできます。
■IEのみ
if(document.all){
// IEのみの処理
}
■IE4のみ
if(document.all && !document.getElementById){
// IE4のみの処理
}
■IE5以上のみ
if(document.all && document.getElementById){
// IE5以上のみの処理
}
■NN4のみ
if(document.layers){
// NN4のみの処理
}
■NN6以上のみ
if(!document.all && document.getElementById){
// NN6以上のみの処理
}
■IE4以上とNN6以上のみ
if(document.all || document.getElementById){
// IE5以上とNN6以上のみの処理
}
■IE5以上とNN6以上のみ
if(document.getElementById){
// IE5以上とNN6以上のみの処理
}
■IE4以上とNN3以上のみ
if(document.images){
// IE4以上とNN3以上のみの処理
}
投稿者 muuming : 11:56 | コメント (0)
2007年07月26日
undefined対策
if (navigator.cookieEnabled) alert("クッキーが有効です。");
else alert("クッキーが無効です。");
などと書くと、navigator.cookieEnabled というプロパティを知らないブラウザではすべて「クッキーが無効です。」と表示されてしまうでしょう。これは、
if (!navigator.cookieEnabled) alert("クッキーが無効です。");
と書いた場合にも同じ問題を引き起こします。ですからこのような問題が予想されるケースでは、
if (navigator.cookieEnabled != undefined) {// 値が undefined でなければ
if (navigator.cookieEnabled) alert("クッキーが有効です。");
else alert("クッキーが無効です。");
}
投稿者 muuming : 16:00 | コメント (0)
数字？
num = prompt("数字を入れて下さい。","");
// 入力を求めるダイアログを表示し、入力結果を変数 num に入れる
flag = isNaN(num);
// num が数値でなければ true、数値であれば false を変数 flag に代入
if (flag) alert(num + "は数字ではありません！");
// これは if (flag == true) alert("どうも！"); と同じ
else alert("どうも！");
投稿者 muuming : 15:58 | コメント (0)
オブジェクト
* オブジェクトには document、window、文字列オブジェクトの場合などのように、そのままで使えるオブジェクトもありますが、 日付オブジェクトやイメージオブジェクトのように、あらかじめスクリプトの中でオブジェクトの生成を宣言しなければエラーになるもの、 event オブジェクトのようにイベントとの関連づけを定義する必要のあるものなど様々です。（これからおいおい触れていきます。）
* 関数の場合と同じく、オブジェクトもユーザーが作ることが出来ます。その手順は次の通りです。
（１）適当な名前の関数を作り、その中でプロパティやメソッドを定義します。
例
function Umechando( ) {
this.name = "梅ちゃん堂"; // name プロパティ
this.mail = "support@umechando.com"; // mail プロパティ
this.URL = "http://www.umechando.com/"; // URL プロパティ
this.log_in = function ( ) { // log_in( ) メソッドを定義する
window.open(this.URL, "Umechando", "");
}
}
（２）これをオブジェクトとして生成します。
theSite = new Umechando( );
（３）以下のように使用できます。
* 或るオブジェクトの定義内容を知りたい場合、次の方法で一覧表示させることが出来ます。
for ( i in オブジェクト名) document.write ( i + "= " + オブジェクト名[ i ] );
例
for ( i in document) document.write ( i + "= " + document[ i ] );
オブジェクトの定義内容はブラウザやそのバージョンによって多少異なります。
投稿者 muuming : 15:10 | コメント (0)
変数宣言
abc ="alphabet";
のように var を冠しない場合と、
var abc ="alphabet";
のように var を冠する場合とがあります。或る関数の中で変数を宣言した場合、var を冠して宣言したものは「ローカル変数」（その関数の中でのみ有効な変数）となります。 それ以外の場合は（var があってもなくても）グローバル変数（プログラム全体で有効な変数）となるようです。
投稿者 muuming : 15:06 | コメント (0)
メモ１ 返り値
flag = isNaN(document.forms[0].elements[0].value);
これは、ウェブページ内の最初のフォームの最初のエレメントの値が数値なら真（true）を、数値でなければ偽（false）を返し、 変数 flag に代入するという処理です。もし document.forms[0].elements[0].value が数値だったら flag には "false" という値が入ります。