【JavaScript】HTMLで音楽ファイルを再生する【audio.js】 ｜ Tips Note by TAM
HTML上で音楽を再生できるページを作りたいという要望があったので調べてみました。 HTML5のaudio要素を使いたかったのですが、対応していない旧IE対策や、 対応ブラウザでもデフォルトの見た目の差が大きく、デザインを揃えることに困りました。 また、.mp3や.wavなどブラウザによって対応している拡張子がばらばらで、 すべてのパターンを揃えるとなると素材の準備だけで大変です。 そこで見つけたのが、【audio.js】です。 とても便利だったので使い方を紹介します。 【audio.js】を使うときは、準備する音声ファイルはMP3だけで良いです。 MP3やaudio要素に対応していないブラウザではFlash Playerを使って音声を再生できるようにしてくれます。 【audio.js】が動作対応しているブラウザは、 IE6以上・Safari・Chrome・Firefox・Operaと幅広
要素を英数字や日付などでソートする機能ををJavaScriptに簡単機能追加:phpspot開発日誌
要素を英数字や日付などでソートする機能ををJavaScriptに簡単機能追加できる jquery.datasort.js が公開されています。 例えば、次のようなHTMLがあったとします。 <ul class='n'> <li>4.09</li> <li>4.10</li> <li>67.8</li> <li>100</li> <li>-98</li> <li>67.7</li> <li>23</li> </ul> datasort メソッドを実行すると次のようにソートが可能。 なんと、これを実現するためにJavaScriptコードはたった以下の1行だけ。 $('ul.n li').datasort({datatype: 'number', reverse: true}); 上記は、数字でソートを行っていますが、以下のデータ型についても要素を簡単にソートが出来て非常に便利です。 アルファベ
高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと（@seito_horiguchi）です。 僕のモットーは「ラクして作る」で、日々怠けながらコーディングをしています。その際に役立つのが、便利なライブラリやらプラグイン。おかげで毎日2〜3時間ほど昼寝に費やすことができています。 さて、今回は実際に僕が使ったことのあるJavaScriptのスライダープラグインで、特に人気の4つを勝手にレビューしてみます。導入を検討されている方は参考にしてみてください。
エラー・デバッグから学ぶJavaScript / jQuery入門／西畑 一馬（まぼろし） | CSS Nite back2basic 2014 | Peatix
エラー・デバッグから学ぶJavaScript / jQuery入門／西畑 一馬（まぼろし） | CSS Nite back2basic 2014 セミナー概要 すでにWeb制作では必須のツールである「jQuery」。勉強を始めてみたけれどつまづいてしまって先に進めない。。。という方も多いかもしれません。使いこなせば非常に便利な「jQuery」、そんなところでつまづいてしまってはもったいないです。 本セミナーでは、jQuery の基本と同時に書籍などでは学びにくいデバッグ方法について学んでいただきます。 セ ミナーの前半部分はjQueryの基本的な使い方をセミナー形式で学んでいただき、後半ではワークショップ形式でGoogle ChromeのJavaScriptコンソールを利用しエラーがでているjQueryのコードをどのようにデバッグを行ったらよいかを学んでいただきま す。 デバッグ方法を知っ
【備忘録】substr & substring / javascript #003 おしごと。
substr と substring の違い。 似てますが、終了位置の指定方法が違います。 ある程度経験を積んでいる人には、当たり前な内容なのでスルーしてくだされ。 substr : 指定した文字位置から指定した文字数分の文字列を返す。 [Sample Code] var str = "文字を抜き出すjavascript"; var res = str.substr(7,10); alert(res); [Result] javascript substring : 指定した文字位置から指定した文字数分の文字列を返す。 [Sample Code] var str = "文字を抜き出すjavascript"; var res = str.substring(7,17); alert(res); [Result] javascript substrの場合は、抜き出したい文字の文字数を終了位置の
device302.me - jqueryで任意の要素の存在チェック
Archives Tumblr About me information Description » 明朝体なんでwinだとガビガビすかね。。。。 contents Tagged: memojavascriptjquery notes 2 notes post-id : 5828581672 May 25th, 2011, 5:50:00 jqueryで任意の要素の存在チェック jqueryでエラー処理用に任意の要素を存在チェックしたい！のメモ html <div id='hogehoge'>hogehoge</div> js if($("#hoge")){ //$("#hoge")が存在するときの処理 } 上記だと$(‘#hoge’)が存在しないにも拘らず、tureに入っちゃって、エラー処理にならない。 どうしたもんかと思ってjQuery 日本語リファレンスをチェック。 見つけたのが
jQueryを使ってiframe要素の中身にアクセスする | バシャログ。
残暑の蒸し暑さから、涼しさを通り越して、寒いと感じる今日この頃、tanakaです。 今日はjQueryでiframe要素の中にアクセスして、情報を取得したり、改変したりする方法を紹介します。 jQueryは、Webページに対するアクセスを簡潔に表現できるライブラリですが、iframe内の文書にまで、 $('div iframe p') といった感じでアクセスすることはできません。ドキュメントが違うからでしょうか？正しい理由はわかりませんが、同時に2つのページをまたいで処理するのは混乱しそうなのでこれはこれでいいと思います。で、そういったときにアクセスする方法があるのでご紹介します。 [追記 2010/09/27]注意点として、親フレームとiframe内ドキュメントのドメインが異なる場合はアクセスできません。 iframe内のドキュメントにアクセスするにはcontents() $(...).
【怖くないJavaScript + jQuery】シンプルなタブ
Step1：まず下準備 こちらは前回と同じですね。まず必要なファイルを読み込みます。 headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は my_tab.js とします）を読み込みます。 <head> <script src="common/js/jquery.js" type="text/javascript"></script> <script src="common/js/my_tab.js" type="text/javascript"></script> </head> <div id="tab"> <ul> <li class="now">タブ00</li> <li>タブ01</li> <li>タブ02</li> <li>タブ03</li> <li>タブ04</li> </ul> </div> <div class="contents">ここに
ランダム表示JavaScript
テキストや画像をランダムに表示するJavaScriptです。 <body>～</body>内の任意の位置に下記を記述。 <script type="text/javascript"> <!-- // 追加する場合は『'',』で。最終行は『,』無し。『''』内でのタグもOK。改行はNG。 var list = new Array( 'ランダムに表示したいもの1', 'ランダムに表示したいもの2', 'ランダムに表示したいもの3', 'ランダムに表示したいもの4', 'ランダムに表示したいもの5' ); var random_hyouji = Math.floor(list.length*Math.random()); document.write(list[random_hyouji]); //--> </script> 赤字の部分にランダムで表示したいものを設定。 テキストならば、 'ああ
フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」:phpspot開発日誌
PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアッ... 次の記事 ≫：PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」 jQuery Form Tips Plugin フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」 フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。 jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。 <p> <label for="i1">Field1</label><br /> <input type="text" name="i1"
jQueryでリストなどに連番でIDやクラスを追加（ナンバリング）する方法｜BLACKFLAG
以前ここで「jQueryでの連番要素を制御する方法」と題して、 jQueryで連番要素の制御を簡単に行う方法を紹介しましたが、 同じ様にjQueryを使って簡単に連番でのIDを追加したりクラスを追加したりする方法を紹介してみます。 例えば＜li＞を使ったリストを5行で用意します。 HTML側では＜li＞自体にはIDもクラスも付けません。 ◆HTML【BASE】 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> そしてこれらのリストに対して、下記スクリプトを実行させることで 自動で連番でのクラスを追記することができます。 （クラス名は「.number1」～とします。） ◆SCRIPT【SAMPLE01】 <script type="text/javascript" src="http://ajax.googleapis.
BookBlock: A Content Flip Plugin | Codrops
A jQuery plugin that will create a booklet-like component that let’s you navigate through its items by flipping the pages. BookBlock is a plugin that can be used for creating booklet-like components that allow a “page flip” navigation. Any content can be used, such as images or text. The plugin transforms the structure only when needed (i.e. when flipping a page) and uses some overlays as shadow f
jQueryでのthisの兄弟要素はどのように記述しますか？…
jQueryでのthisの兄弟要素はどのように記述しますか？ クリックイベントなどで、 $('div').click(function(){ $(this).animate({...:...},{...:...}); }); のような文を使う時があると思いますが、上記のthisの兄弟要素、又は、子要素、等をセレクトする場合の書き方をご教授ください。 $(this">child")..とか、$(this > "child")..とかでは無理なので、全く別の表記がある気もしています。 よろしくお願いします。
まよねこ inside » Blog Archive » 【jQuery】thisの親や子要素の指定方法
jQueryでよくつかう”this”の親要素や子要素を指定する記述をすぐに忘れてしまうので、メモ。 /* 110131 */ 子要素指定方法についての記述で、間違いをご指摘いただいたので、訂正しました。 親要素 thisの親要素を取得する。 [javascript toolbar="true"]$(this).parent().css[/javascript] 参：jQueryで親要素のスタイル変更 : JSをつらつらとダラダラと書く parentのカッコを忘れてて、子一時間悩むとかもう止めたい… 子要素 thisの子要素（ここでは<ul>）を取得する。 [javascript]$(this).children(“ul”)[/javascript] $(“ul”,this).css →これ、間違い（補足は後述） $(this).find(“ul”) →これも、間違い（補足は後述
click(fn) - jQuery 日本語リファレンス
各要素のclickイベントに関数をbindします。 clickイベントは通常、要素がマウスなどのポインティングデバイスでクリックされた場合に呼び出されます。 クリックは、mousedownとmouseupの組み合わせで定義されます。これらのイベントの実行順は、以下のようになります。 mousedownmouseupclick jQueryのイベントは、コールバック関数の最初の引数でjQuery.Eventオブジェクトを受け取ることができます。このオブジェクトを使って、規定のイベント動作のキャンセルや、バブリングの抑制などを行います。 <p>First Paragraph</p> <p>Second Paragraph</p> <p>Yet one more Paragraph</p> $("p").click(function () { $(this).slideUp(); }); $("
jQueryで外部ファイル（XMLデータ）を解析し、HTMLに表示する | 独学Webデザイナーの覚書
jQueryで外部ファイル（XMLデータ）を解析し、HTMLに表示する jQuery2011年9月29日 MovableTypeやWordPressなどのCMSツールを使用せず、ニュースリリースなどが静的HTMLで構築されているサイトの場合、HTMLを直接修正して更新する必要があります。 そこで、ニュースリリースなどの情報をひとつのXMLファイルで管理し、HTMLを触らずともあたかもデータベースのようにXMLを扱うことで、XMLファイルの更新のみでサイトの管理が可能になり、メンテナンス性が向上します。 jQueryを使用すると実装が比較的容易なので、今回サンプルを作成してみました。 jQueryはこちらからダウンロード 実際のサンプル HTML <table cellpadding="0" cellspacing="0" border="0" class="tbl"> <col width
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://asklife.info/archives/1864
https://infinityforest.net/home/archives/1787
Simple Instagram Fancybox - Jquery Plugin
域名到期-域名续费提醒
