JavaScript
参考サイト design.webclips.jp基本的にiframeを縦横比をアスペクト比に合わせたボックスで囲う、という形。 CSSでiframeのwidthとheightをボックスに合わせて100%にするので、問題ない。 <style> .video_wrap { width: 100%; height: 56.25vw; position: relative;</style>…
レスポンシブ対応だそうです。実際に使ったときは、モックアップ的なやつなのでレスポンシブ関係ねえ！でしたが、まぁ今後使うこともあるかもしれないので。 参考：http://blog.8bit.co.jp/?p=14459 参考：http://kwski.net/jquery/1201/ ＤＬ：https://gith…
同じサイトで使っている他フォームとの整合性の問題で、 ・入力した時点で住所を出すのではなく、検索ボタンを押すと住所が自動入力される ・存在しない郵便番号の場合は、アラートを出す で、最終的にこうなった。 <script type="text/javascript"> $(".post-btn").click(function() { $("#…
HTML5のcanvas機能（？）を使って、自動でグラフを作成してくれるスクリプト。 必要にかられて目盛りのカスタマイズをしたのでメモ。 正確には、レーダーチャートの目盛りがラベルの文字と重なってたので、目盛りの文字を気持ち下にして重ならないようにした…
ボックスをタイル状に並べ、ウィンドウサイズに合わせて並べ替え・アニメーションするプラグイン。配布サイト：http://masonry.desandro.com/ 参考サイト：http://www.webantena.net/javascriptjquery/jquery-plugin-masonry/ 参考サイト：http://www.koikik…
参照：http://ascii.jp/elem/000/000/871/871147/ 配布元：http://jasonweaver.name/lab/flexiblenavigation/jQueryプラグインなので、設置はわりと慣れてるといえば慣れてるのではないかと。 手順としては、 jQueryとflexnavへのリンク CSSへのリンク ulタ…
ひとつのでかいページを作って、その中をぐるんぐるん動かす場合。 参考：http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-fullcontent.html 配布元：http://www.zehfernandes.com/jquery.fullContent/#home
DL：http://bxslider.com/・UTF-8でなくても動く（かもしれない） ・jquery-1.9.1.jsで動くことは確認 ・javascriptより先にCSS読み込んだ方がいい？ スタンダードバージョン <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="jquery.bxslider.css" type="text/css" /> </link></meta></head></html>
リスト要素のパネルをスライダーさせる、シンプルなjQueryプラグイン。 配布 http://cssglobe.com/easy-slider-17-numeric-navigation-jquery-slider/ 解説 http://rfs.jp/sb/javascript/js_lab/easy_slider.html シンプルではあるが、水平・垂直方向のスラ…
タイトル通り、bgswitcher＋wordpress。 まずはbgswitcherを設置。 配布元はこちら →http://rewish.jp/blog/releases/jquery_bg_switcher ちなみに配布元の設置方法が若干違う？という罠があったり。 header.phpに以下の記述を追加します。 <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.bgSwitcher.js"></script> <script type="text/javascript">
どうせjQuery入れるんだし、ということで、ドロップダウンメニュー（jQuery）を使ってみた。 参照：http://shanabrian.com/web/jquery/dropdown.php jquery.dropdown.js /* ============================================================================= …
HeightLine.jsではなくjQueryプラグインのほう。 参照）http://liginc.co.jp/web/js/jquery/22340 配布）http://file.urin.take-uma.net/jquery.tile.js-Demo.htmljQueryの呼び出し→jquery.tile.jsを呼び出したあと、 <script type="text/javascript"> $(function() { $(".hoge1").tile(); $</script>…
ＣＳＳでヘッダー部分をposition:fixedで固定すると、ページ内リンクがずれる。 正確に言うなら、ページ内リンクでページ上部に現れるはずのぶぶんが、ヘッダーの下に潜り込む。 ヘッダー固定だけならば、その下にコンテンツにヘッダー高さ分のmargin-topを…
jQueryで動く、背景画像をスライドさせるスクリプト。 いくつかありますが、今回はbgStretcher2を使用しました。 参考サイト： http://blog.teruterubouzu.net/net-mac/js/2332 http://memocarilog.info/jquery/3599 ちなみに下のサイトは「bgStretcher」と…
フッター＋高さ＋可変で調べたら、「コンテンツの高さを可変にして、フッターを最下部に置く」がほとんどで、「コンテンツの高さはそのままで、フッターの高さを可変にする」がまったくでませんでした。 かろうじて見つけた記事、万が一見失ったら心底困るの…
文字サイズ変更スクリプト（ライブラリ：prototype.js）とjQueryを同じHTML上で動かすと、$の定義がバッティングするらしく、どちらか一方しか動かない。 なので、その対策。 1．JavaScriptの呼び出す順番 必ずprototype.js⇒sizechange.js⇒jquery.js⇒jquery…
最終的にこうなりました function Amount() { x = eval(document.orderform.elements[8].value) * 0.1; y = eval(document.orderform.elements[9].value) * 0.1; z = x * y; w = 0; switch (document.orderform.elements[0].value) { case "R1": if ( z < 25…
親ウィンドウと子ウィンドウの間でデータのやり取りができるということで、呼び出された子ウィンドウから選択肢をクリックしたら親ウィンドウに反映されるようにしました。 親ウィンドウ側はまず、ヘッダ部分に関数を記述。 function OpenWin() { window.ope…
