around design

window.openを使ってポップアップウィンドウを使用していたサイトで、
scrollbarsの指定をしていない場合、デフォルトではscrollbars=yesになると思っていたのですが、
実際にはChromeはスクロールバーが出ていましたが、IE、Firefoxではスクロールバーが表示されず
ページが途中で切れてしまっていました。

なので、scrollbarsなどのオプションも必ず指定するようにしましょう。

PHP、Perl、Javascriptとエンコード／デコードのやり方や関数はいろいろ用意されていると思うのですが、
Shift_JISでエンコードされた文字を、JavascriptでデコードしてUTF-8のHTMLに表示しようとすると、
何をやってもうまくいきませんでした。

「Javascript デコード」で検索すると出てくるものとしては、
decodeURI、decodeURIComponent、unescapeなどが出てくるのですが、
どれを試してもやはりうまく表示されず。。

とりあえずはPHPのurldecodeとmb_convert_encodingを使うことで解決させたのですが、
Javascriptの件も気になったので、もうちょっと調べてみました。

(続きを読む…)

Lightboxやfancyboxを使っていて、クリックして拡大した先に文字情報を入れる場合、
aタグのtitle属性に文字を入れます。
すると当然のことながら、マウスを画像に当てたときにその文章が表示され、
長い文章でタグを含んだりすると非常に不格好です。

その場合、画像のimgタグにもtitle属性を入れてあげると
そちらが優先して表示されます。

例）
<a href="1.jpg" title="商品名<br />価格<br />コメント" rel="lightbox[1]"><img src="1s.jpg" width="100" height="100" alt="商品1" title="商品1"></a>

写真とテキスト両方にまたがって1つのリンクにさせる機会が多いのですが、
基本的にaタグはインライン要素であるため、これはイレギュラーなやり方になります。
これまでもブラウザの違いなど、いろいろ苦労してきたのですが、
jQueryでこれを実現できるということを知りました！！

まだ試していないので、あくまでもメモですが。
簡単な写真とテキストの場合は間違いなくうまくいくと思うのですが、
divのボックスの中でさらにいろんなCSSを入れたりする場合にどうなるのか、、
早めに試す機会が欲しいところです。

ダウンロード
http://www.ollicle.com/eg/jquery/biggerlink/

参考サイト
http://sanride.com/blog/webdesign/divhoverjquery-jquerybiggerlin.php

チェックボックスやテキストボックスなどのフォームを配列でつくり、
その値をチェックするJavascriptに少してこずったのでメモです。

配列の値の取得と、配列が1つしかなかった場合の処理を入れるのが
ポイントでした。


下記はamount[]と名前をつけたテキストボックス配列の値を
1以上の数字であるかどうかチェックしています。


function Update(num) {
var ctl = document.form1.elements['amount[]'];
if(ctl == null){
return false;
}
if(ctl.length == null) { //配列が1つの場合
up_num = ctl.value;
} else {
up_num = document.form1.elements['amount[]'][num].value;
}

if (!isNaN(up_num)) {
if (up_num < 1) {
alert("数量は１以上を入力してください");
return false;
} else {
document.form1.update_no.value = num;
document.form1.submit();
}
} else {
alert("数量は半角の数値で入力してください");
return false;
}
}