カテゴリー: JavaScript/Ajax

[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>autoheight</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autoheight.js"></script>
</head>
<body>
IFRAME内のページの大きさに自動で高さ調整するサンプル<br />
<iframe id="myframe" name="myframe" class="autoHeight" frameborder="1" scrolling="no" src="heightpage.html"></iframe>
</body>
</html>
[/html]

サンプルはこちら
↑このページで簡単なサンプルをダウンロードできます。

上記はJavaScriptで２０段までのテーブルをランダムで作成しています。
リロードごとに高さが変わっているのがわかるはず・・・

iframeの中身は同一ドメインのコンテンツに限ります。
でないとアクセス権がない・・・とかなんとか

中身がYahoo!だと高さ調節してくれないサンプル

2011年7月20日

今日の調べ物・・・

投稿者：isc_blog

Android開発で・・・・「赤外線」を使ったアプリを作りたかったので・・・調べた結果

SH Developers Square – download　赤外線データ転送API概要

JavaScriptにてIEの時は・・・と書きたかったので・・・・調べた結果

phpSpot開発日誌より
JavaScriptでIEかどうかをたったの1行で判別する方法

CodeIgniterのセッションクラス

今日はいろいろ立てこんでますｗ

2011年7月19日

HTML5で緯度経度測位するサンプル google maps geocode使用

投稿者：isc_blog

HTML5 Demo: geolocation　を見てやってみようと思いました。
で、ボタン押したら・・・的なことを盛りこんでみました。（ちょっとテキトーなのでソースが綺麗じゃないのはご容赦ください）

geocode サンプルはこちら

ソースはこれだっ！
[html]
<meta charset="utf-8">
<title>測位！</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" />
<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">
var lat = "";
var lng = "";
function success(position)
{
var s = document.querySelector(‘#status’);
if (s.className == ‘success’)
{
return;
}
s.innerHTML = "ここだっ！ちがうかっ！";
s.className = ‘Success’;
var mapcanvas = document.createElement(‘div’);
mapcanvas.id = ‘mapcanvas’;
mapcanvas.style.height = ‘100%’;
mapcanvas.style.width = ‘100%’;
document.querySelector(‘#map’).appendChild(mapcanvas);
lat = position.coords.latitude;
lng = position.coords.longitude;
alert(‘Latitued: ‘+lat);
alert(‘Longitude: ‘+lng);
var url="http://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lng+"&sensor=false";
alert(‘Google Map API: ‘+url);
//Get Json Request Here
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"You are here!"
});
}
function error(msg)
{
var s = document.querySelector(‘#status’);
s.innerHTML = typeof msg == ‘string’ ? msg : "failed";
s.className = ‘Fail’;
}
//Jquery Code
$(document).ready(function()
{
$("#check").click(function()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(success, error);
}
else
{
error(‘Not supported’); //HTML Support
}
});
});
</script>
<input type=’button’ id=’check’ value=’測位！’/>
<div id="status">読込中・・・</div>
<div id="map"></div>
[/html]
※ソースは文字コードUTF-8で保存してください。

最近はGoogle様のおかげで簡単ですね。

その昔、某携帯用のナビゲーションを開発する仕事があってその際は緯度・経度の計算から地図の描画までスンゴイ計算して～ごにょごにょして～なんとか切り出した画像がこれです・・・的な感じでした。
なつかしい・・・けどたかだか6年前くらいか・・・

2011年6月10日

びっくり！animate-textshadow.jsで動くテキストシャドウ

投稿者：isc_blog

PHPSPOT開発日誌より「PHPSPOT開発日誌テキストシャドウを自在にアニメーションさせられるjQueryプラグイン「animate-textshadow.js」」を見て、すげーと思ったので実験。

本家サイトanimate-textshadow.js – Animated CSS text shadows with jQuery　よりダウンロードしてそのままだと面白く無いので日本語にしてみました。

jQueryのプラグインです。

こちらのデモで確認できます ※HTML5＆CSS3サポートウェブブラウザにて御覧ください。
※HTML5＆CSS3 サポート確認ページ

面白い効果ですね。

本家より「Download from Github」っていう緑のボタンを押してダウンロードしてみてください！

2011年6月8日

15秒でHTML5のプロジェクトを始めるテンプレート生成サイト

投稿者：isc_blog

Initializr というサイトで
15秒でHTML5のテンプレート的なコードを生成出来てしまいます！

こんな感じで・・・・

【HTML&CSS】
サンプルページにするとサンプルページのコードがくっついてきます。

【Javascript】
jQueryのminバージョンを付けて！

【Compatibility】※互換性
Modernizr!・・・ってモダンブラウザ的なことだろう・・・　と思う。

【Server Configuration】
サーバーコンフィグ・・・いらない

【Analytics】
いらないかな・・・・

この設定で作った物をダウンロードしたページ・・・

中身のコードはこんな感じ・・・（抜粋）
[html]
<!doctype html>
<!–[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]–>
<!–[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]–>
<!–[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]–>
<!–[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–> <html lang="en" class="no-js"> <!–<![endif]–>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">