javascript
あまりに簡単すぎて、本当にスライドするのか心配するほどです
サイトからダウンロードした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では無理です」と言ってたものです
でも時代は地デジで、スマホなんです
ということで、
サーバー上のテキストファイルを読み込みページ上に表示する
を参考にすると、ファイルの有無を確認することができます
JQueryでもって< iframe>を表示させてしまうプラグインです
Unobtrusive iFrame with JQuery
一番下にソースがあります↓
使いかはやっぱり簡単♪
<head>にこんな感じ↓
<script type=”text/javascript” src=”js/jquery_iframe.js” ” charset=”utf-8″></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(‘a.iframe’, ‘#news).iframe();
});
</script>
<iframe>を表示させたい部分にコレ↓
<div id=”news”><a href=”http://www.google.co.jp/” class=”iframe w:620 h:200″>javascript ONで、googleが表示されます</a></div>
classオプションで、高さやらスクロールやら指定します
のはずの↓
微妙にうまくいかなかったのでメモメモです
うまくいかなかったところは、ちび画像（サムネイル）をクリックすると、びよーんと大きく表示される画像が、あのIEですら普通に動いたのに、かのFirefoxでは、中心から半分右にズレて表示されるのです！がーんっ
で、imgzoom.jsをじっくり観察
positionを多用しているせいで、大きな画像は迷子になているっぽいと、ふんで、
で、imgzoom.jsの252行目くらい
$bigImg.css({ position: ‘absolute’, opacity: endOpacity }).click(zoomOut);
に
left:0
をたしてやって、
$bigImg.css({ position: ‘absolute’, opacity: endOpacity,left:0 }).click(zoomOut);
としたら、なおりました♪
きちんと真ん中に拡大画像が表示されました！良かった
恥ずかしながら知りませんでした…
一生懸命「動かない…」となんやかんややってました
jquery.cookie.jsを使って、あれこれやったものの、どうしてもGoogle Chromeでだけ動いてくれなくて困ってたわけです
そうしたら、「Google Chromeはローカル環境でクッキーを作らない」という神のお告げをいただき、サーバーにＵＰしたところ、普通に動きました
恥ずかしいですねぇ
まずは<head>内にコレ
＜script type="text/javascript">
function frmhenkou(){
henkou.location = "tondeku.html";
}
</script＞
次に<body>にコレ
<body onload="frmhenkou()";>
<iframe>部分にはコレ
<iframe src="test.html" name="henkou"></iframe>
これで、ページ読み込み時に、フレーム内のtest.hmlは、tondeku.htmlになります
曜日や時間帯でフレームの中身を変えたいときに有効♪
例えば日付と月をくっつけた値をファイル名にしたい時なんか
例）2011年5月を、201105と表示したい場合
普通に連結を書いちゃうと、
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth() + 1;
var kongetu = year+month+”.html”;
↓
kongetuの値は、2011+5で、つまり2016.htmlと表示されてしまう
ので、
数字を文字列扱いしてやって、
if(month <10){
month = “0″+month;
}
var monthhtml = month+”.html”;
var kongetu = year+monthhtml;
ワンクッションおくと出来ました
kongetuの値は、201105.htmlと表示♪
jQueryを使って、フォルダ内のtxtファイルを読み込み、その内容をhtmlに書かせる
<head>内にはコレ↓
<script type=”text/javascript”>
$(document).ready(function(){
$(“#kakasetai”).load(“kakasetai.txt”);
});
</script>
<html>の書かせたい場所にはコレを↓
<p id=”kakasetai”></p>
