jQuery

jPlayerで1時間超の動画の再生時間を表示させる

[image]jPlayer時間表示

jquery.jplayer.min.jsの19行目にあるshowHourを1から0にしてましたが
[js]b.jPlayer.timeFormat={showHour:!1,showMin:!0,showSec:!0,padHour:!1,padMin:!0,padSec:!0,
sepHour:":",sepMin:":",sepSec:""};[/js]

[js]b.jPlayer.timeFormat={showHour:!0,showMin:!0,showSec:!0,padHour:!0,padMin:!0,padSec:!0,
sepHour:":",sepMin:":",sepSec:""};[/js]

以下を追加すればよかったみたい
[js]$.jPlayer.timeFormat.showHour = true;[/js]
jp-duration on media files longer than 1 hour · Issue #33 · happyworm/jPlayer

子要素Bを持つA要素を指定するには

CSS3までのセレクタは、特定の子要素を持つ親要素を選択できないけど
jQueryの:hasフィルターで出来るよ

例えば、aタグを含むliを選択してみる

[html highlight=”9″]<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery(function($){
$("li:has(a)").addClass("target");
});
</script>
</head>
<body>
<ul>
<li>あいうえお</li>
<li>あいうえお</li>
<li><a href="#">あいうえお</a></li>
<li>あいうえお</li>
</ul>
</body>
</html>[/html]

aタグを含む<li>に.targetが付いてるのが確認できる
[image]:hasフィルター

Webサイトにオーディオ / ビデオプレイヤーを設置する

[jplayerダウンロードページ]

jPlayer : HTML5 Audio & Video for jQuery
オーディオだけじゃなくビデオも再生できるjQueryのプラグイン。
htmlとcssがわかればある程度好きなように見栄えをカスタマイズできて
プレイリストっていうのかな、複数の曲の連続再生に対応してる。

.mp3を.oggに変換する

うちの設置方法がよくないのか、firefoxではmp3が再生できなかった。

firefoxのaudioタグがmp3をサポートしていないからなのかな
とりあえず.mp3を.oggに変換する事に。

Audio Sound File Converter Software. Convert wav mp3 dvd midi flac dvf wma etc.というアプリ(無料)が簡単だった。
[image]switch
ファイルをドラッグして形式を選んでコンバート押すだけ。

.ogg以外にも様々な形式に書き出せる。
[image]Switch Audio Converter

こないだ変換に使ったアプリなんだったけな?と忘れちゃったのでメモ投稿。

[jQuery]$(this)の親要素や子要素を指定するには。

thisを使ってなかったからthisの子要素のアクセス方法が全くわからんかった。

当たり前だけどこんな風に出来無いわけですよね
[text]$("this ul").addClass("hogehoge");[/text]

childrenを使うといいみたい。
[js]$(this).children("ul")[/js]

親にはparent
[js]$(this).parent()[/js]

参考 / まよねこ inside » Blog Archive » 【jQuery】thisの親や子要素の指定方法[リライト版]

宿題
ひろし+すみれのliからから友蔵+こたけのliを指定するにはどうしたらいいんだろうか。
[html]<h1>さくら家</h1>
<ul>
<li><span class="name">友蔵+こたけ</span>
<ul>
<li><span class="name">ひろし+すみれ</span>
<ul>
<li class="name">さきこ</li>
<li class="name">まるこ</li>
</ul>
</li>
</ul>
</li>
</ul>[/html]

スクロールバーを変更するjscrollpane.js

SAVEJAPAN! PROJECTのツイッターのスクロールバーのところが、
デザインにあってていいねぇなんて思いながら見ていたら
だんだん自分でも使ってみたくなったので調べてみるとjscrollpaneというのを使っているようでした。

これ2009年くらいに話題になったらしいんだけど、全く知りませんでした。。。

ここ / jScrollPane – cross browser styleable scrollbars with jQuery and CSS
iframeも、親htmlにjsを追加するだけで(operaでマウスホイールが反応しなかったけど)スクロールバーを追加できたり
子htmlに直接jsを追加する事でマウスホイールも反応するように出来るかんじ。

練習

乱雑モックアップ|jQueryでツイッターを取得してjscrollpaneを適用
[image]jQueryでツイッターを取得してjscrollpaneを適用のスクリーンショット

ツイッターをjQueryで読み込む方法の参考にしたページ

jQueryでTwitterの自分のつぶやきを表示する | webOpixel

DreamweaverのjQuery拡張機能 / jQuery Utilities Toolset with Code Utilities

[image]jQuery Utilities Toolset with Code Utilities

Adobe – Dreamweaver Extension
上の一般、レイアウト、フォームとか書いてあるタブの所にjQueryのタブを追加
ボタンひとつで
[js]$(function(){

});
[/js]
とか挿入出来る。

jQueryのコードヒント拡張もあるみたいなんだけど
jQuery API extension for Dreamweaver | XTND.US – Xtnd urslf! Extensions for software. Adobe Dreamweaver, Drupal, jQuery, Eclipse, Fireworks
Dreamweaaver側のショートカットを変更してるとインストール出来ないのよね

一応

C:\Users \[ユーザー名]\AppData\Roaming\Adobe\Dreamweaver [各バージョン]\ja_JP\Configuration\Menus\

のMenus.xmlを削除するとインストール出来る。
変更したショートカットが無くなってしまうので、WinMergeなんかを使って差分をコピったりするのもいいかも。

WinMergeの説明はこちら / ファイル比較ツールをWinMergeに変更す
WinMerge 日本語版本体はこちら / WinMerge 日本語版

[無料のiPhoneアプリ] いつでも、どこでも、JavaScriptプログラミング! / JavaScript Anywhere で jQuery。

[image]javascript anywhereダウンロードページ
ちょっと前に見つけて入れてみた iPhone app JavaScript Anywhere が素敵です。
作者様のサイト
JavaScript Anywhere

HTML外部.js外部.cssの各1ファイルを自由に編集していつでもどこでも内蔵ブラウザで動作確認(実行)できます。
そして出来たモノを自分宛にメール送信する事も可能。
iPhoneのキーボードだとタグの入力が恐ろしく面倒臭いんですけど(個人的に ‘ (シングルクォーテーション)を入力した後にアルファベットに戻るのが納得いかない)、人って慣れるもの。
けどiPhoneで辞書登録ができたら定型文を使えて便利なのになぁ。

でもって JavaScript Anywhere を使って jQuery の練習をする

JavaScript Anywhere は jQeury を持っていないので Google Code のものを使わせてもらう。
Google AJAX Libraries API – Google Code
デベロッパー ガイド – Google AJAX Libraries API – Google Code

HTMLの<head>内に
[html]<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.4.2");
</script>
[/html]
もしくは
[html]<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>[/html]
これでjQueryが使えるハズ。

動作確認

JSタブに
[js]
$(function(){
$("body").prepend("<h1>Hello</h1>");
});
[/js]
と入力して Hello が表示されたらおkなハズ。

JavaScript Anywhere のダウンロードはこちら

iTunes App Store で扱っている iPhone、iPod touch、iPad のJavaScript Anywhere

jQueryでアンカーリンクをスムーズスクロールの練習

要素を動かすのは前回の(フローティングメニュー作成)でなんとなくわかったけど
全体をスクロールさせる方法はさっぱりなので調べた。
[js classname=”js-sh”]
$(function(){
$(‘a[href*=#]’).click(function() {
var $target=$(this.hash);
var targetY=$target.offset().top;
$(‘html’).animate({scrollTop: targetY},2000);return false;
});
});
[/js]

続きを読む

懲りずに ) jQueryを使った画面スクロールに合わせてついてくるフローティングメニューが一応形になりまんた。

前回までの作りは、jsを読み込む元々のhtml(とcss)に多少依存していました。

positionで段組みしてるhtmlに、コンテンツ部分が短い時はmenuがfooterが食い込んじゃう!どうしよう!
なんて、そんな事はコーディングする時にどうにかする問題で、javascriptでどうにかしなきゃならんもんではないだろうし
同じように、メニューを動くようにする為に、予めpositionを仕込んでおかなければならないなんてのも良くないかと。

今回は、元々あるレイアウト(htmlやcss)になるべく手を加えずとも動くようにしたい。を念頭にやったので、floatで組んだページも、positionで組んだページも、フッターの有無に関わらず使えるように出来たと思う。
メニューとフッターのidを合わせるか追加する必要はあるけれど。

floatレイアウト
floatレイアウトにフローティングメニューを追加のサンプル
positionレイアウト
positionレイアウトにフローティングメニューを追加のサンプル

作成したjavascript
floatingmenu-v2.0.2.js

あるぇ?
“続きを読む”以降の文章が全部なくなってる…なぜ…

続きを読む

jQueryの練習 / スクロールに合わせて、移動するメニュー(要素)

この投稿には最新版(続き)があります。
懲りず ) jQueryを使った画面スクロールに合わせてついてくるフローティングメニューが一応形になりまんた。

jQueryの練習
よくある”スクロールしてもついてくるメニュー”を、作ってみようと試行錯誤中。

jQueryの練習

やってる事は、position:absoluteしてある要素のtopを、スクロールした分に近づける処理の繰り返し、だと想像。
スクロール量の取得方法、要素をブラウザ上部からみた位置の取得方法、animateの使い方とイージングの追加方法等を調べて試してみた。

使ったライブラリ

続きを読む