javascript
よく使うのは、ブロックレベル要素の高さを揃えるheightLine.jsですが、先日、北村曉氏による「jquery.flatheights.js」というものを知りました
使い方は、グラフィックデザイナーのためのCSSレイアウトメモというサイトで、書かれているブロック要素の高さを揃えるに詳しく掲載されています
古くは背景の画像で高さをそろえ（ているように見せる）たりしていましたが、時代がらくらくスマートフォンになったのだから、javascriptが便利だと思ったりするのでした
どうやら、「食事をしたのを忘れる」のは問題だけれど、「食事の内容を忘れる」は年齢とともにありがちな「物忘れ」らしいです
とってもよく使うスライドショー
とっても簡単で、とっても機能豊富なのがjQuery Cycle Pluginです！
アルファシス – alphasis.info - さんでとても詳しく説明されていますが、
基本形の
jQuery( function() {
jQuery( ‘#jquery-cycle’ ) .cycle();
} );
に、オプションの動作を加えるだけで、動きもだけれど、nextボタンもつけれたりします
jQuery( function() {
jQuery( ‘#slider’ ) .cycle( {
fx: ‘fade’,
sync: 1,
next: ‘#jquery-cycle-next’
} );
} );
↑こんな感じで
もちろんnextボタンなど、cssで自由に配置できます
説明がむずかしいのですが、サイト上のテキストをN字に配置（上から下まで読んだらまた上に上がって隣の列を読んで…というふうに）したかったりする時があった時（こんな風に)は、↓コレです
とんでもなく簡単に3カラムにできます♪
<script src="autocolumn.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
$('#kore').columnize({columns:3});
});
</script>
<ul id="kore">
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
↑のような記述でOK
自動で折り返してくれます！
GoogleマップがAPI V3になって楽しくなった気がしました
ということで、GreyBoxなんていかがでしょうか？
マップを表示させたいページのリンクをクリックしたら、Googleマップを表示させたとんでもなく単純なhtmlが、びよんと上にでてきます！
↓詳しくはこちらをご覧下さい♪
ゼロからはじめるGreyBox – 一歩先行くウィンドウ表示
びよんと上に表示された枠（？）は、cssで好きなように変更できるのでありがたいです
うっかりしている間に、GoogleマップがAPI V3だった…
ごちゃごちゃ書いていたものがすっかりサッパリしていたので、メモです
まず
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>
で、スクリプトを読み込み、
<script type=”text/javascript”>
google.maps.event.addDomListener(window, ‘load’, function() {
var mapdiv = document.getElementById(“map_canvas”);
var myLatlng = new google.maps.LatLng(緯度,1経度);
var myOptions = {
zoom: 拡大サイズ,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
var map = new google.maps.Map(mapdiv, myOptions);
var image = ‘マーカーアイコン絶対パス’;
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image
});
var infowindow = new google.maps.InfoWindow({
content: ‘ここに住所’
});
google.maps.event.addListener(marker, ‘click’, function() {
infowindow.open(map,marker);
});
});
</script>
↑<head>内にコレ
で、地図を表示した居場所に、↓
<div id=”map_canvas” ></div>
あとはcssで、このmap_canvasさんに大きさやらなんやかんやを指定
APIキーがいらなくなりました♪
マーカーアイコンを透過pngで作って絶対パスで指定してやれば、マーカーが好きなアイコンで表示されるようになっています！
参考サイト：
手軽になった！Google Maps API V3
Google Maps JavaScript API V3を使って地図を表示する
あまりに簡単すぎて、本当にスライドするのか心配するほどです
サイトからダウンロードしたjsとcssファイルへのリンクを記述し、
<script type="text/javascript" src="js/jquery.slider.min.js"></script>
<link href="css/jquery.slider.css" rel="stylesheet" type="text/css" />
オプションなど記述
<script type="text/javascript">
$(function() {
$('#slider').slider({
width:900,
height:350,
randomize:true
});
});
</script>
で、スライド部分は、
<div id="slider">
<div>スライドしたいもの1</div>
<div>スライドしたいもの2</div>
<div>スライドしたいもの3</div>
</div>
これで「スライドしたいもの」がスライドします！
ページいっぱいつめつめに情報が入っているのにさらに情報を使いしたい、でもページがこれ以上長くなるのは困りもの、な時に便利なのがポップアップでしょうか？
しかも簡単に実装できたら尚可♪
ということで、↓はいかがでしょうか？
Create simple tooltips with CSS and jQuery – Part 2
javascript読み込むだけです！
あとはcssで、.tooltipをどう表現するか指定すれば良いだけ♪
Google mapのアイコンがなんだか物足りなくなった今日この頃（？）
ちょっと変更したくなり、下記を参考になんやかんやしてみました↓
Google Chart Tools / Image Charts (aka Chart API)
できあがりはコレ↓
googleさん、会社や食堂だけじゃなく、mapもすごいね
以前なら、「ファイルの存在を調べるのは、JavaScriptでは無理です」と言ってたものです
でも時代は地デジで、スマホなんです
ということで、
サーバー上のテキストファイルを読み込みページ上に表示する
を参考にすると、ファイルの有無を確認することができます
