スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

fancyboxをページ読み込み時に開く方法

fancyboxをページ読み込み時に開く方法のメモ。

■JavaScript
$(document).ready(function(){
$.fancybox.open($('.fancy'));
});


■HTML
<div class="fancy>
中身
</div>



ちなみに、閉じるは
$(document).ready(function(){
$.fancybox.close();
});
スポンサーサイト

jqueryでスクロールすると、固定位置に表示したりする

jqueryでスクロールすると、固定位置に表示したりする方法を色々紹介してくれているサイト。

jQueryでスクロールすると表示する系いろいろ

jQueryでスムーススクロール

とても簡単にスムーズスクロールが実装出来た。

$(function(){
// #で始まるアンカーをクリックした場合に処理
$('a[href^=#]').click(function() {
// スクロールの速度
var speed = 400;// ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});


jquery読み込んで、上記を実行させるだけ。
リンクタグでhref="#"みたいに、#からはじまる奴だけ選んで、勝手に実行してくれる。

参考サイト

jQueryでスムーススクロール

googlemap api v3で複数ピンを立てて、ズームレベルを適切な形にする方法

v2だとgetBoundsZoomLevelと言う関数でやるんみたいだけど、v3だとそれが無くなっているらしい。
やり方を見つけたのでメモ。

<head>内

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
google.maps.event.addDomListener(window, 'load', function()
{
var mapOptions = {
zoom: 20,
center: new google.maps.LatLng(),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions);
var minLatLng = new google.maps.LatLng(最小緯度,最小経度);
var maxLatLng = new google.maps.LatLng(最大緯度,最大経度);
var latLngBounds = new google.maps.LatLngBounds(minLatLng, maxLatLng);
var bounds = new google.maps.LatLngBounds();
bounds.extend(minLatLng);
bounds.extend(maxLatLng);
mapObj.fitBounds(bounds);

// 位置情報
var locations = {
list: [
{ name: "タイトル1", latlng: new google.maps.LatLng(緯度,経度) },
{ name: "タイトル2", latlng: new google.maps.LatLng(緯度,経度) },
{ name: "タイトル3", latlng: new google.maps.LatLng(緯度,経度) },
{ name: "タイトル4", latlng: new google.maps.LatLng(緯度,経度) },
],

// Getter
getAll: function()
{
return this.list;
}
};

// マーカーを作成
jQuery.each(locations.getAll(), function(i, station)
{
var marker = new google.maps.Marker({
position: station.latlng,
map: mapObj,
title: station.name
});
});
});
-->
</script>


<body>で。

<div id="gmap" style="width:640px;height:400px;">ヒットする結果はありませんでした。



ピンを立てる緯度経度で、それぞれ最大・最小の緯度経度を求めて
boundsを広げるようにする。

参考サイト
Google Maps JavaScript API V3 リファレンス
地名や住所から緯度・経度を取得する
Google Map APIで縮尺と位置の自動調節

onclickや、onchangeイベントを強制的に実行する方法

onchangeとかは、普通にテキストに入力してフォーカスをはずすと発生するが
javascriptで値を入れた時などには発生しないらしい。

それで無理矢理発生させる方法を見つけたのでメモ。


// clickをエミュレート
var elem = document.getElementById("my_text");
if( /*@cc_on ! @*/ false )
{
// IEの場合
elem.fireEvent( "onclick" );
}
else
{
// Firefoxの場合
var evt = document.createEvent( "MouseEvents" ); // マウスイベントを作成
evt.initEvent( "click", false, true ); // イベントの詳細を設定
elem.dispatchEvent( evt ); // イベントを強制的に発生させる
}


参考サイト

JavaScriptの動かないコード (中級編) clickイベントを強制的に発生させたい (fireEvent/createEventの使い方)

プロフィール

U2K

Author:U2K
いろいろプログラムに関しての覚え書きをちょくちょくと書いていきます。

オススメ










オススメ

忍者AdMax

u2k on Twitter

最近の記事


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。