around design

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;
}
}


checkboxの配列は何度かやったことはあるのですが、たまにしか使わないため、
そのたびに調べているような気がするのでメモしておきます。

HTML的には
<input type="chekbox" name="check_name[]" value="1">aaa
<input type="chekbox" name="check_name[]" value="2">bbb
という書き方になります。

(続きを読む…)

Ajaxを使っているとほぼ間違いなく遭遇するのが、
jQueryとprototypeのコンフリクト。

WEBを検索すればいくつでも例があるのですが、
使っているAjaxが違ったりすると、どうもうまく動かなかったりします。

今回はgalleyview（jQuery系）とlightbox（prototype系）。
結果的には、

<script type=”text/javascript” src=”../js/galleryview/jquery-1.3.2.js”></script>
<script type=”text/javascript”>
jQuery.noConflict();
</script>
<script type=”text/javascript” src=”../js/galleryview/jquery.easing.1.3.js”></script>
<script type=”text/javascript” src=”../js/galleryview/jquery.galleryview-1.1.js”></script>
<script type=”text/javascript” src=”../js/galleryview/jquery.timers-1.1.2.js”></script>
<script type=”text/javascript”>
jQuery(document).ready(function(){
jQuery(‘#slide’).galleryView({
panel_width: 640,
panel_height: 300,
frame_width: 80,
frame_height: 38,
transition_interval: 3000,
overlay_height: 0
});
});
</script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js”></script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js”></script>
<script type=”text/javascript” src=”../js/lightview.js”></script>

となりました。

jQueryを上に記述し、jquery.galleryview-1.1.jsの $( を jQuery( に変換しています。

Web Designning 200/09号に載っていたのでメモです。

SKUARE.NET
http://www.skuare.net/

コリス
http://coliss.com/

Ajax Rain
http://ajaxrain.com/library.php

jQuery Plugin
http://plugins.jquery.com/

DHTML Goodies
http://www.dhtmlgoodies.com/

YUI Blog
http://www.yuiblog.com/blog/