JavaScriptの最近のブログ記事
ネットで検索してみると、?id=とかをつけて......というのが多かったけど、普通の#でもいけるよね......？
というか、普通アンカーリンクって#でつけるから、#じゃないと使い勝手が悪い。
ヘッダ固定部分が120pxあるとした時に、リンク先のページに下記のコードを仕込んでおけばジャンプ後にヘッダ分動いてくれます。
$(window).on('load', function() {
var url = $(location).attr('href');
if(url.indexOf("#") != -1){
var anchor = url.split("#");
var target = $('#' + anchor[anchor.length - 1]);
if(target.length){
var pos = Math.floor(target.offset().top) - 120;
$("html, body").animate({scrollTop:pos}, 500);
}
}
});
ラジオボタンがチェックされたとき
$('input[name=classcategory_id1]:radio').change(function() {
とセレクトボックスが選択されたとき
$('select[name=classcategory_id1]').change(function() {
に同じ関数を実行させたい場合
$('input[name=classcategory_id1]:radio,select[name=classcategory_id1]').change(function() {
こんな書き方で実現できる。
var sampleaddress = "http://www.sample.com/img/sample.jpg";
var arr = sampleaddress.split("/");
var filename = arr[arr.length-1];
「/」で分割して配列にして、最後の要素を取得、です。
フォルダ名などで場合分けして、ごちゃごちゃする時にとても便利。
グラフィカルに見える所は、インラインフレーム、編集ボタン等はその親フレームに配置。
インラインフレームのidをeditとすると、
■IEの場合
doc = frames['edit'].document;
win = frames['edit'].window;
■Safar/FFの場合
doc = document.getElementById("edit").contentDocument;
win = document.getElementById("edit").contentWindow;
doc.designMode = "on";
とすれば編集可能。
インラインフレーム側のテキストを選択し、親ページに仕込んだボタンのクリック時にjavascriptを仕込むことによって、インラインフレーム側に編集を行います。
win.document.execCommand('createlink',false,URL);
ところが、この選択範囲、というもの、IE8では、1フレームに一つしかもてなくなっています。
つまり、親ページのボタンをクリックしたときに、別のインラインフレームをのせて、そこで詳細設定画面（画像選択とか、リンク先入力とか）を作ろうとすると、そっちにフォーカスが行っちゃって、インラインフレーム側を編集できない。
IE7まではOKなんです。
対処法は、onmousedown（onclickでもいけるかも）インラインフレームの選択範囲を保存する、ということです。
win.focus();
range = doc.selection.createRange();
len = range.text.length;
range.collapse();
if(len !=0){
range.moveEnd( "character", len);
range.moveStart( "character", 0 );
range.select();
}
IEは便利なexecCommand('inserthtml');が使えないので、
Safari/FFで
TAG = '<a href="'+URL+'" target="'+TARGET+'">'+rangetext+ '</a>';
win.document.execCommand('inserthtml', false, TAG);
というのを
win.focus();
parent.range.select();
rangetext = parent.range.text;
TAG = '<a href="'+URL+'" target="'+TARGET+'">'+rangetext+ '</a>';
parent.range.pasteHTML(TAG);
って感じに置き換えて、インラインフレームコンテンツの編集をします。
<body class="test">の場合
document.getElementsByTagName("body")[0].getAttribute("className")
で、「test」が取得できる。
外部ファイルと画像を設定しておけば、プリロードからロールオーバーまでを簡単にできるもの。
jsをリンクしておけば、classを設定するだけで良いので、とてもお手軽です。
画像の用意
オールアウト画像 ○○.gif、○○.jpg
ロールオーバー画像 ○○_o.gif ○○_o.jpg
外部ファイル
/*rollover script by two-ways*/
/*coryright(c)two-ways co.Ltd All rights reserved*/
/*2008.05 ver3.0*/
window.onload=LoadEvent;
function LoadEvent(){
prImg= new Array();
for (i=0; i
baseIMG = document.images[i].src;
newIMG = baseIMG.replace(baseIMG.substr(baseIMG.length-4,4),("_o" + baseIMG.substr(baseIMG.length-4,4)));
prImg[i] = new Image();
prImg[i].src = newIMG;
document.images[i].setAttribute("onmouseover", "Over("+i+")");
document.images[i].setAttribute("onmouseout", "Out("+i+")");
}else if(document.images[i].getAttribute("className")=="over"){
baseIMG = document.images[i].src;
newIMG = baseIMG.replace(baseIMG.substr(baseIMG.length-4,4),("_o" + baseIMG.substr(baseIMG.length-4,4)));
prImg[i] = new Image();
prImg[i].src = newIMG;
document.images[i].setAttribute("onmouseover", new Function("Over("+i+");"));
document.images[i].setAttribute("onmouseout", new Function("Out("+i+");"));
}
}
//newwin
for (k=0; k
document.links[k].setAttribute("onclick", "OpenWin()");
document.links[k].target = windowname;
}else if(document.links[k].getAttribute("className")=="largeimage"){
document.links[k].setAttribute("onclick", new Function("OpenWin();"));
document.links[k].target = windowname;
}
}
}
function Over(IMG){//mouseover
baseIMG = document.images[IMG].src;
if(baseIMG.substr(baseIMG.length-6,2) !="_o"){
newIMG = baseIMG.replace(baseIMG.substr(baseIMG.length-4,4),("_o" + baseIMG.substr(baseIMG.length-4,4)));
document.images[IMG].src=newIMG;
}
}
function Out(IMG){//mouseout
baseIMG = document.images[IMG].src;
if(baseIMG.substr(baseIMG.length-6,2) =="_o"){
newIMG = baseIMG.replace(baseIMG.substr(baseIMG.length-6,6),baseIMG.substr(baseIMG.length-4,4));
document.images[IMG].src=newIMG;
}
}
HTMLファイル
<head>内
外部ファイルの読み込み
<script type="text/javascript" src="../menu.js"></script>
<body>内
画像にclass=overをつけるだけ。
<img src="***.gif" alt="***" width="**" height="**" class="over" />
idのついている画像に対して、最後の4文字（例えば、○○.gif）を「_o」のついたもの（例えば、○○_o.gif）に変換する。
sample.html?○○
の?以降の文字列を取得する時に使います。
<SCRIPT language="javascript">
<!--
var data = location.search.substring(1, location.search.length);
alert(data);
//-->
</SCRIPT>