javascriptの最近のブログ記事

Flashムービーの前に表示させるには・・・Highslide JS

nini (2010年5月20日 10:56) | コメント(0)
そういえばこのブログの存在を忘れそうになってた・・・。
久々の更新。

今回、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が嫌いになりましたが（笑）

IE6だけ読み込ませない条件分岐

nini (2009年2月24日 01:13) | コメント(0)
最近よく使う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で印刷

nini (2009年2月21日 13:03) | コメント(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>

クリックで入力欄に文字を追加

nini (2008年12月 2日 17:15) | コメント(2)
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イベントに複数の処理を追加する場合には、; で区切る。


選択したラジオボタンによって注釈を変える

nini (2008年11月30日 19:12) | コメント(0)
選択されたラジオボタンによって、注釈コメントなどを変えたい場合のスクリプト。
この例では、Aがクリックされたら「Ａが選択されました。」
Ｂがクリックされたら「Ｂがクリックされました。」と表示されます。

<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"> Ａ　</label>

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

<div id="memo1" class="memoGroup">Ａが選択されました。</div>
<div id="memo2" class="memoGroup">Ｂが選択されました。</div>
</body>

ページ下からスムーズにページトップへ移動するスクリプト

nini (2008年8月 4日 01:06) | コメント(0)
とくにこれといって大したことをしてくれるスクリプトじゃないですが
ページがポンと切り替わるがごとくトップへ移動するよりも
とてもアナログ的でかつスムーズにスルスルッとトップへ
移動してくれるので見た目にちょっとカッコいいです。

◎下記スクリプトを読み込むかヘッダーに記述
<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
メインページ | アーカイブ | Movable Type »

検索

ウェブページ


いい日ダビダビ。


株式会社 nini system Design
★過去に製作したウェブサイト
■イビキノン
いびきでよく眠れない方のサプリ
■日本トレーラーハウス協会
トレーラーハウスの協会(JTHA)
■トレーラーハウスデベロップメント
トレーラーハウスの製造・販売 シュミレーションゴルフのレンタル スクリーンゴルフのレンタル
■健楽ショップ　【ボイスリッチEX】
声が出にくい症状の方に朗報
■早稲田大学　スキー部
2007年　インカレ総合優勝！
■NPO体験学習支援センター
ブナの植林100年計画実行中
■AJC油汚染研究所
油ゲル化剤やオイルフェンスの販売
■ジャズシンガー 奥土居美可
NYで絶賛されたジャズボーカル

タグクラウド

最近のブログ記事