[prettyPhoto]GoogleMap等のインラインフレーム用のリンク

リンク先のURLに『iframe』を付けて
幅と縦の指定を合わせてリンクを作ればOK

「prettyPhoto.map.html」をダウンロード

ソースを見る

[JQUERY] toggleのリセット

JQUERYの.toggle()は
CSS属性が最終的に
『display: none』になります。
そのために
画面上から消えるわけなので

戻す『リセット』するには
display: noneを戻せばいいわけです。

opacityとtoggleの違い

[jquery]animate

jqueryのanimateについてデモ

「jquery.animate.html」をダウンロード

「jquery.animate.html.txt」をダウンロード

「jquery.animate.02.html」をダウンロード

「jquery.animate.02.html.txt」をダウンロード

//ボックス１を400px移動
$('#box_1').click(function(){
$('#box_1').animate({
'top':'400px'
});
});

//ボックス２をslowで移動
$('#box_2').click(function(){
$('#box_2').animate({
'top':'400px'
},'slow');
});

//ボックス３をswingで２秒かけて移動
$('#box_3').click(function(){
$('#box_3').animate({
'top':'400px'
},2000,'swing');
});

//ボックス４をlinearで２秒かけて移動
$('#box_4').click(function(){
$('#box_4').animate({
'top':'400px'
},2000,'linear');
});

$('#reset').click(function(){
$('#box_1').css({'top':'','left':''});$('#box_2').css({'top':'','left':''});
$('#box_3').css({'top':'','opacity':1.0});$('#box_4').css({'top':'','opacity':'1.0','display':'block'});
});

$("#go4").click(function(){
  $("div").css({width:"", fontSize:"", borderWidth:""});
});

//ボックス１を右下へ移動
$('#box_1').click(function(){
$('#box_1').animate({
'top':'400px',
'left':'320px'
});
});

//ボックス２をクリックの回数分移動
$('#box_2').click(function(){
$('#box_2').animate({
'top':'+=20px',
'left':'-=20px'
},'2000');
});

//ボックス３をswingで２秒かけて移動して透過0.0付ける
$('#box_3').click(function(){
$('#box_3').animate({
'top':'400px',
'opacity': 0.0
},2000,'swing');
});

//ボックス４をlinearで２秒かけて移動toggle
$('#box_4').click(function(){
$('#box_4').animate({
'height': 'toggle',
'top':'400px',
'opacity': 'toggle'
},2000,'linear');
});

toggleは内部的には
CSSで　display:noneになっているので
display:none→blockなりinlineでリセットされる

[jquery]event

jqueryのeventに関するビデオ

【YouTube - jQuery Events Part 1】[YOUTUBE]

これからは何するにしても
『ビデオ』は重要だなぁ
とてもわかりやすいですよね。

自分もYouTubeチャンネルやってますが
チュートリアルビデオって難しい。
『何を伝えるために』
↓
『何を見せるのか』
なんですけどね

ちなみに
こんな感じですね

「jquery_event.html.txt」をダウンロード[LINK]

「jquery_event.html」[LINK]
 

<ul class="boxes">

<li class="box_1">1</li>
<li class="box_2">2</li>
<li class="box_3">3</li>
<li class="box_4">4</li>

<li class="box_5">5</li>
<li class="box_6">6</li>
<li class="box_7">7</li>
<li class="box_8">8</li>

</ul> 
<div class="clear"></div>
</div>

//ボックス１にクリックイベントを付ける
$('.box_1').bind('click',function(){
alert("1番をクリックしました");
});

//ボックス２にクリックイベントを付ける
$('.box_2').click(function(){
prompt("2番をクリックしました");
});

//ボックス３にクリックで背景色を変える
$('.box_3').click(function(){
$(this).css('background','#e8f3fe');
});

//ボックス4にマウスオーバーで背景色を変える
$('.box_4').mouseover(function(){
$(this).css('background','#e8f3fe');
$(this).mouseout(function(){
$(this).css('background','#9cc3eb');
});
});

//ボックス５にクリックで隠す
$('.box_5').click(function(){
$('.box_5').hide();
});

//ボックス６にダブルクリックでテキストを変える
$('.box_6').dblclick(function(){
$(this).text('123456');
});

//ボックス7にクリックでカウントアップ
var counti = 9;
$('.box_7').click(function(){
$('.box_5').text(++counti);
$('.box_6').text(++counti);
$('.box_7').text(++counti);
$('.box_8').text(++counti);
});

//ボックス８にマウスオーバーとマウスアウト
$('.box_8').mouseover(function(){
$(this).css('background','#e8f3fe');
$(this).css('width','50px');
$(this).mouseout(function(){
$(this).css('background','#9cc3eb');
$(this).css('width','180px');
});
})