Blogブログ

Tag: jQuery

jQuery

Practice for jquery plugin.

jQuery

プラグイン作成の練習。 スクロールと同時にランダムに動くプラグインを作成しました。 基本ソースは以下。 ■HTML <!DOCTYPE html> <html lang=”ja”> <head> <meta charset=”utf-8″> <title>Parallax Test</title> <meta name=”keywords” content=””> <meta name=”description” content=””> <link rel=”stylesheet” href=”css/style.css” media=”all”> <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script> <script src=”js/jquery.randomScroll.js”></script> <script> $(function() { $(“#parallax”).shparallax({ scrollValueDiv : “#scrollValue” }); }); </script> </head> <body> <h1>Just scroll it.</h1> <p class=”indicator”>スクロール値 | <span id=”scrollValue”>0</span></p> <ul id=”parallax”> <li id=”item1″></li> <li id=”item2″></li> <li id=”item3″></li> […]

jQuery

PowerTip

jQueryjs

Powertip Powertipを使って、フォームの入力補助テキストを表示する。 とても便利だったので、簡単にメモ。 １．下のようなHTMLフォームを用意する。 <form> <label>Name</label> <input type=”text” name=”name” class=”name” id=”field_01″> <label>Email</label> <input type=”text” name=”email” class=”email” id=”field_02″> <label>Comment</label> <textarea></textarea> <input type=”submit” value=”submit”> </form> ２．powertipライブラリのjs, css ファイルを読みこませる。 ダウンロード ↓ http://stevenbenner.github.io/jquery-powertip/ <script type=”text/javascript” src=”assets/js/powertip/core.js”></script> <script type=”text/javascript” src=”assets/js/powertip/csscoordinates.js”></script> <script type=”text/javascript” src=”assets/js/powertip/displaycontroller.js”></script> <script type=”text/javascript” src=”assets/js/powertip/placementcalculator.js”></script> <script type=”text/javascript” src=”assets/js/powertip/tooltipcontroller.js”></script> <script type=”text/javascript” src=”assets/js/powertip/utility.js”></script> <script type=”text/javascript” src=”assets/js/powertip/powertip.js”></script> <link rel=”stylesheet” href=”assets/css/powertip/jquery.powertip.css” > ３．新たにcontact.js等でファイルを作成し、powertip表示スクリプトを記述していく。 […]

wordpress

サイズ可変の動画はめ込みiframe

jQueryjs

レスポンシブデザインで動画を使う場合、ユーザはyoutubeやvimeoからはめ込みURLを取ってくるのが一般的だと思う。 その場合の固定されてるサイズを、可変にする方法。 参考にしたのはこちら。 http://css-tricks.com/NetMag/FluidWidthVideo/demo.php (function($){ var $myVideos = $(“iframe[src^=’http://player.vimeo.com’], iframe[src^=’http://www.youtube.com’], object, embed”), $myVideos.each(function() { $(this).attr(‘data-aspectRatio’, this.height / this.width) .removeAttr(‘height’) .removeAttr(‘width’); }); $(window).resize(function() { $myVideos.each(function() { var $this = $(this); var newWidth = $this.parent(“div.vimeo”).width(); $this.width(newWidth).height(newWidth * $this.attr(‘data-aspectRatio’)); }); }).resize(); })(jQuery); 今回のポイントは2つ。 １）jQueryセレクタで、^=って使ったことなかった。 便利だな、覚えておこう。 （この場合の iframe[src^=’http://.. は、http://..から初めまる、という意味。） ２）iframeにattiribute　data-aspectRatioを付与して縦横比率を持たせている。 HTML5で追加された、独自データ属性を使っている。 http://www.html5.jp/tag/attributes/data.html 値をもたせる場所に悩むことがあったが、これで解決するな。 勉強になりました。感謝。