javascriptの最近のブログ記事

そういえばこのブログの存在を忘れそうになってた・・・。
久々の更新。

今回、YouTube動画を扱うウェブを制作していますが
その際にHighslideというAjaxを利用しました。

ちなみにHighslideというのは、javascriptのビューワーで
ポップアップなどで使えます。
すごくいい感じなのでこれは結構多用しています。

Highslide JS - JavaScript thumbnail viewer

ただ、今回このビューワーを使ってポップアップさせたところ
YouTube動画の後ろに隠れるんですね・・・。IEだけ(泣)

何かいい方法はないかといろいろ探したところ
paramの設定でクリアできました。

<param name="wmode" value="transparent" />
<param name="WindowlessVideo" value="0" />

上記の2行を追加し、さらにembedのオプションに下記のコードを
追加するとYouTube動画の前にポップアップしました!

<embed wmode="transparent"></embed>

IEのせいで作り直しかと思ってましたが、これでクリアできて
ホッと胸をなでおろしました・・・。

またひとつIEが嫌いになりましたが(笑)
最近よく使うjavascriptで、ページ内をスムーズに動くというものがある。
現在製作中のサイトでも使用しているが、残念なことにIE6では正常に動作しない。
記述の仕方が悪いのではと何度か書き替えてみたものの全く変わらず
結局、IE6のバグらしいというところに行き着いた。
「またか・・・」とため息をもらす。

スムーズに移動しないどころかリンクに飛ばないという致命的な症状。
この際IE6は無視するか・・・というわけにもいかず(泣)
CSSハックでよく使う条件分岐を利用して、このスクリプトを
IE6だけ読み込ませないようにした。

<!--[if !lte IE 6]><![IGNORE[--><![IGNORE[]]>
<script type="text/javascript" src="xxxxx.js"></script>
<!--<![endif]-->

CSSでは、IEだけ読み込ませる条件分岐をよく使うが
逆に読み込ませないという指定は今回初めて使用した。

とにかく上記の条件分岐で、IE6以前のブラウザでは読み込ませないようにできた。
スムーズには移動しないが、リンクに飛べれば最低限OKということにした。

ちなみにIEだけ読み込ませる条件分岐は下記の通り。
<!--[if IE]>
<link href="css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

javascriptで印刷

| コメント(0)
<head>内に下記のスクリプトを貼り付けて
javascript:PrintPage()で呼び出す。

<head>
<script type="text/javascript">
<!--
function PrintPage(){
    if(document.getElementById || document.layers){
        window.print();        //印刷をします
    }
}
//-->
</script>
</head>

<body>
<a href="javascript:PrintPage()">印刷する</a>
</body>
onClickイベントに下記のコマンドを追加するとよい。

「onClick="this.form.abc.value='abcフィールドにこの文字が追加されます'"」

【最近使用した例】
<input type="radio" name="search_option" id="search_option09" value="9" onClick="this.form.search_key.value='';submit('{$form_action}')" /><label for="search_option09"> すべて表示 </label>

<input type="text" name="search_key" size="30" />

※ $form_actionには任意のプログラム名を入れる

いくつかの検索オプションを用意し、その中の「すべて表示」のラジオボタンを
クリックすると入力欄(search_key)を空白にして、表示プログラムが実行される。

ちなみにonClickイベントに複数の処理を追加する場合には、; で区切る。


選択されたラジオボタンによって、注釈コメントなどを変えたい場合のスクリプト。
この例では、Aがクリックされたら「Aが選択されました。」
Bがクリックされたら「Bがクリックされました。」と表示されます。

<head>
<style type="text/css">
#memo2 {
     display:none;
}
</style>

<script language=javascript>
function view(divId,divClass){
    var divs=document.getElementsByTagName('div');
    for(var i=0;i<divs.length;i++){
        if(divs[i].className==divClass){
            if(divs[i].id==divId) divs[i].style.display="block";
            else divs[i].style.display="none";
        }
    }
}
</script>
</head>

<body>
<input type="radio" name="option" id="option01" value="0" onClick="view('memo1','memoGroup')" checked /><label for="option01"> A </label>

<input type="radio" name="option" id="search_option02" value="1" onClick="view('memo2','memoGroup')" /><label for="option02"> B </label>

<div id="memo1" class="memoGroup">Aが選択されました。</div>
<div id="memo2" class="memoGroup">Bが選択されました。</div>
</body>
とくにこれといって大したことをしてくれるスクリプトじゃないですが
ページがポンと切り替わるがごとくトップへ移動するよりも
とてもアナログ的でかつスムーズにスルスルッとトップへ
移動してくれるので見た目にちょっとカッコいいです。

◎下記スクリプトを読み込むかヘッダーに記述
<script type="text/javascript">
function backToTop() {
  var x1 = x2 = x3 = 0;
  var y1 = y2 = y3 = 0;
  if (document.documentElement) {
      x1 = document.documentElement.scrollLeft || 0;
      y1 = document.documentElement.scrollTop || 0;
  }
  if (document.body) {
      x2 = document.body.scrollLeft || 0;
      y2 = document.body.scrollTop || 0;
  }
  x3 = window.scrollX || 0;
  y3 = window.scrollY || 0;
  var x = Math.max(x1, Math.max(x2, x3));
  var y = Math.max(y1, Math.max(y2, y3));
  window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));
  if (x > 0 || y > 0) {
      window.setTimeout("backToTop()", 25);
  }
}
</script>

◎ページの一番下に入れるリンク
<a href="#" onclick="backToTop(); return false">TOPへ戻る</a>

【使用例のウェブサイト】
http://voicerich.jp/?pid=8410452