JavaScriptでvideoを操作する
videoタグをJavaScriptで色々操作してみます。 対応ブラウザ videoが対応しているブラウザはこちら。 IE8以下が非対応なので、対応が必要な場合はIE8以下ではFlashにするなどの処理が必要です。 あと、スマホでは自動再生が不可だったり、再生時の挙動が機種によって違ったりなど色々と問題が多いので、対応する場合は注意が必要です。 サンプルコード HTML <video id="video" width="480" height="270" controls> <source src="./movie.mp4" type="video/mp4" /> </video> <div id="time"> <span id="currentTime">0</span> / <span id="totalTime">0</span> </div> <div id="control">
【ポップアップ（吹き出し・ツールチップ）で「ツアー」や「チュートリアル」の表現ができるjQueryプラグイン「Joyride」】｜今村だけがよくわかるブログ
【ポップアップ（吹き出し・ツールチップ）で「ツアー」や「チュートリアル」の表現ができるjQueryプラグイン「Joyride」】 jQueryでポップアップ（吹き出し・ツールチップ）を使って「ツアー」や「チュートリアル」の表現ができるプラグインがありました。 「なんだ、どういう意味だ・・・？」 といいますと・・・言葉で表現するのはヘタなので、サンプルを作りました。興味がありましたらご参考ください。 サンプルはこちらタブの「Result」を押して動作をご確認ください スルスルッとスクロールするんで、見た目的にもおもしろいです。 まとめサンプルではたまたま「私のアカウント紹介ツアー」みたいに作りましたけど、使い方は発想次第でいろいろですね。こういったものをあらかじめwebに設計してあると、制作側の配慮が見られて「親切設計だな～」って私は感じます。 参考リンクhttp://www.zurb.co
クリックされたらツールチップを表示するスクリプトをjQueryで組んでみた - Wataame Frog
リンクをクリックされると表示するツールチップのスクリプトを組んでみました。 フォーム入力する際のヘルプなどの表示を主な用途と考えていますが、使いどころはほかにもありそうな予感。 基本的なものなので、改造は簡単にできそうですしね。 イメージ / デモ イメージ デモ <table> <tr> <th>タイトル <a href="#note1" class="clickToolTip">?</a></th> <td><input type="text" name="title"></td> </tr> <tr> <th>メッセージ <a href="#note2" class="clickToolTip">?</a></th> <td><textarea name="message" rows="5" cols="30"></textarea></td> </tr> </table> <!--
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
.attr() | jQuery 1.9 日本語リファレンス | js STUDIO
属性に値を設定、または設定されている値を取得します。 .attr( name ) 1.0追加 .attr( name, value ) 1.0追加 .attr( map ) 1.0追加 .attr( name, function(index, attr)) 1.1追加 jQuery1.6の問題 jQuery1.6で、attrに大幅な仕様変更がありましたが、この変更はユーザーに大きな混乱を招く結果となり1.6.1で 後方互換(新しいバージョンが古いバージョンの規格を扱えること)を持つように修正されました。 .attr( name ) 1.0追加 戻り値:String 指定した属性の値を取得します。 引数 説明
7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
HOME>jQuery>7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。（っていうかそんな偉そうなこと言える程修めてない
jQueryってなに？超初心者向け入門講座 | 株式会社WEB企画
こんにちは、ホームページ制作会社「ウェブ企画」の東京渋谷オフィスでディレクターをしている竹内です。 もう少しで長かった冬も終わり、春を迎えますね。 春からWebデザイナー業界の門を叩かれる方も、きっと多いのではないでしょうか。 昔とは違い、最近は「デザイン＋htmlコーディング」だけでなくWebデザイナーでもディレクション能力や、「WordPress」などのCMSの扱い、プログラム言語の「PHP」「JavaScript」などプラスアルファを求められることが多くなっているように感じます。 そこで今回は、先述したプログラム言語「JavaScript」の数あるライブラリの中でも、最も有名なjQueryについて、「プログラムについて全く知らない！」という方向けに簡単に概念や、jQueryで出来ることについてご説明させていただきたいと思います。 jQueryを使えるデザイナーは、今後必ず重宝されます
今更聞けない！jQueryではじめるJavascript超初心者講座
今更聞けない！jQueryではじめるJavascript超初心者講座 jQuery2013年7月26日 jQuery、みなさん使っていますか？ これからjQueryや習得される方向けに、jQueryの使い方・基礎文法についてまとめてみました。使い慣れている方には見飽きた内容かもしれませんが、ご活用いただければと思います。 jQueryの準備 Google AJAX Libraries APIからjQueryを直接読み込みます。もしくはローカルにダウンロードして読み込んでもOKです。 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> //または <script type="text/javascript" src="/hoge/j
サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
簡単なColorboxの設定方法Jquery | Jquery
簡単なColorBoxの設定方法 ColorBoxのダウンロード こちらのColorBoxホームページからダウンロードします。 現在のversionは、1.3.20です。 以下の環境で動作テストを行っています。 jQuery 1.4.3+ in Firefox, Safari, Chrome, Internet Explorer 6, 7, 8, 9, Opera 11. For older versions of jQuery (1.3.2+), use version 1.3.18 Jquery本体とプラグインの設置 ホームページを作成する際に以下のようなディレクトリ構成にすると便利だ。 homepage——index.html ————-——second.html ————-——third.html ————-——「img」 ————-——「js」 ————-——
ページを読み込んだらすぐにfancyBoxを実行する方法
画像などをクリックすると拡大画像をふわっと表示してくれる、いわゆるLightBox風のjQueryのプラグイン、「fancyBox」ですが、 これをページを開いた時にすぐ実行する方法を調べたので書いておきます。 JSファイルは普通に読み込む javascriptファイルは普通に読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.fancybox.js"></script> 実行の箇所をloadで読み込む そして、実行のjavascript部分を以下のようにします。 $(window).load(function(){ $.fancybox.open($('.fancybox')); }); $('.fancybox')の箇所には
2つのバージョン違いのjQueryを併用する | 忘れないようにメモを
jQueryのプラグインって便利で開発にとても役立つのですが、 とあるバージョンでは動くのに最新バージョンでは動かないプラグインがあったりして、、、 組み合わせていろいろ使っていくとそのうちそういうのに遭遇するんですよね。 そんな時は、複数のバージョン違いのjQueryを併用するためにちょっとした処理を記述する必要があります。 方法１ jQueryの$に別名を付けて使用する方法。 ＜script type="text/javascript" src="jquery-1.9.0.js" ＞＜/script＞ ＜script type="text/javascript"> var $132 = $.noConflict(true); </script> ＜script type="text/javascript" src="jquery-1.3.2.js" ＞＜/script＞ この方法を使う
ASCII.jp：jQueryによるLightbox風モーダルウィンドウの作り方｜Web制作の現場で使えるjQuery UIデザイン入門
HTMLとCSSによる表現を考える 複数のサムネイル画像を並べておき、画像をクリックするとモーダルウィンドウで拡大画像を表示するWebページを作成します。はじめに、HTML／XHTML（以下、HTML）とCSSでどのようにモーダルウィンドウを表現するか、静的なページを作って考えてみましょう。 HTMLは、ul/li要素で並べたサムネイル画像の後に、「glayLayer」と「overLayer」というid属性をつけたdiv要素を配置します。glayLayerはページ全体に重ねる半透明のレイヤーを表示するための要素で、overLayerは子ウィンドウを表示するための要素です。子ウィンドウに表示したい要素（今回はimg要素）はoverLayer内に配置します。 ▼サンプル01（HTML部分） <h1>jQueryを利用したモーダルウィンドウの作成</h1> <ul> <li><a href="i
jQuery UIのtoggle()でjQueryのslideToggle()よりカッコよくスライドさせる方法
jQuery UIのtoggle()を使って、jQueryのslideToggle()よりカッコよくスライドさせる方法について紹介します。 ある要素をスライドさせながら表示・非表示を行うには、jQueryのslideToggle()（またはslideUp()とslideDown()）がよく知られていると思います。 が、slideToggle()ではコンテンツの動き方に個人的に不満があり、調べたところ、jQuery UIのtoggle()で期待する動作になることが分かりました。 jQuery UIのtoggle()については、公式ドキュメントのAPIで公開されているのですが、本エントリーで紹介するような詳細な指定方法が書かれていないので、備忘録で本エントリーに残しておきます。 １．jQueryのslideToggle()でスライドさせる まず、jQueryのslideToggle()と使った
jQueryのtoggleを使ってアコーディオン風にコンテンツを開閉表示してみる
クリックによって隠れてたコンテンツエリアをアコーディオン風に 表示してみます。 1．CSSの記述例 以下は調整してみて下さい。 <style type="text/css"> <!-- #iWrap{ margin:0 auto; padding: 7px; width: 400px; border: 2px solid #333; } #iWrap h2{ margin:10px; padding: 5px; border: 2px solid #333; background-color:#CCC; cursor: pointer; } #iWrap h2:hover{ background-color:#FFF; } #iWrap div{ padding:5px; } #iWrap div ul{ margin:0 3px; padding:0; } #iWrap div li{
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery： 要素のスタイルプロパティを変更するには？（css） - Build Insider
ユーザーエージェントによってPCとスマートフォン（iPhone / Android）を振り分ける方法いろいろ
[jQuery] モーダル背景など、全画面の縦横サイズの取得（クロスプラットフォームを目指す） - jsdo.it - Share JavaScript, HTML5 and CSS
https://remotestance.com/blog/1397/
jQueryでの開閉式のアコーディオンの動きいろいろ | CSS Lecture