そもそも jQuery で親ウィンドウの要素に値を埋める時 window.opener.$(要素).val(値) とすればよいのだが、サンプルをつくったら window.opener.$ is not function というエラーがでて反映どころではない状況に陥った。 注意点 いままで XoopsCube とか ZendFramework で画面を構成しているもので作業しているときは自動的にどの画面にも jQuery を読み込ませていた。 サンプルでは子ウィンドウ側では jQuery を読み込んでいたが、親ウィンドウでは読み込んでいなかった。 親ウィンドウも読み込んでいないと先のエラーが出る、ということがわかった。そりゃそうだろう、とわかってしまえばそうなのだが、気づかないとハマる。手っ取り早くサンプルを作ったつもりが思わぬ落とし穴に気づかず時間を浪費した。 親ウィンドウのデータ参照だけ
Code html 目次となるアンカーと, ページトップに移動するアンカーを設置しています. <body> <h1 id='top'>jQuery でページ内リンクを全てスムーズスクロールにしよう</h1> <h2>Table of contents</h2> <ul> <li><a href='#section1'>Section 1</a></li> <li><a href='#section2'>Section 2</a></li> <li><a href='#section3'>Section 3</a></li> <li><a href='#section4'>Section 4</a></li> </ul> <h2 id='section1'>Section 1</h2> <p class='pad'>Text Text Text Text</p> <a href='#top'
A small, dependency free JavaScript plugin for auto generating and tracking single page navigation (aka a Table of Contents) Get started View the demos Features Simple setup Pass your page’s content to scrollnav and it will generate the navigation and track scrolling automatically. Fully customizable All the styling is up to you, make scrollnav look and behave however works best for your project.
jQuery + HTMLでフォームの簡易確認を挟む WordpressプラグインのContact Form 7などで設置したメールフォームに、ｊQueryで簡易的な確認画面を挟む方法。inputなどのタグはいじれなくても、HTMLやjQueryを自由に設定できる場合を想定しています。動作は同ページ内に確認画面を隠しておき、ボタンを押すことで入力部分/確認画面の表示/非表示を入れ替えます。 プラグインやCGIなどでメールフォームを設置した際、この機能もついていればいいのにといったことがある。Wordpressプラグインのコンタクトフォームとして有名な「contactform7」は確認画面がついていない。優しい人が汎用性の高いjsファイルなどを作っていて、これらは数ステップで簡単にできるし、確認のアクションを挟んでくれるのでとてもありがたい。だけど、こうしたい場合は？ここを変更したい！といっ
前回の記事を書いている時に検索にヒットしたリンクでちょっと「へぇ～っ」となったものがあったのでメモ。 javascript - event.preventDefault() vs. return false - Stack Overflow イベントのハンドラを書く時に、jQueryのイベントと通常のDOMのイベントでは return false; の意味が違うらしい。まずい、今まで気にしていなかった。。。 jQueryのイベント： デフォルト動作を抑止。 イベントバブリングを中止する。 通常のDOMのイベント： デフォルト動作を抑止。（但しブラウザのバージョンに依存） イベントバブリングの中止はしない。 という事らしい。 jQueryのイベントハンドラで return false; をしてしまうと、イベントバブリングまで中止されてしまう。これはあまり好ましくない事だ。 なぜイベントバブリ
はじめに jQuery 3.0になってから結構経ちましたが、そろそろ旧バージョン時代の書き方をなくしていかなければならないはず。 ついでに、冗長な書き方も一掃したい。 レガシー？な書き方たち 一応互換性を考えて残っているものも多いですが、そろそろこの書き方もなくしていきましょう。 $(document).ready(function () {}) DOM構築が完了した後に実行する、jQueryを使うにあたって結構重要なやつですね。 こんなに無駄な書き方しないで素直に $(function () {}) と書きましょう。
jQueryの初版が登場して10年が経ちました。 jQueryの登場により、これまでJavaScriptで書いていた複雑なコードがよりシンプルになりました。CSS操作やDOM操作、Ajaxなどの拡張性も非常に便利なものでした。 時が経つにつれ、さまざまな特徴を持ったJavaScriptライブラリ・JavaScriptフレームワークが登場し、jQeuryに触れることなく大規模なアプリケーション開発をすることも珍しいことではなくなりました。 そうした中、昨今注目されているのがReact.js(React)です。 今回は、jQueryを学習した人に、Reactも学習してほしい理由とその学習方法についてまとめてみました。 Reactとは？ Reactとは、ユーザーインターフェイス(UI)を構築するためのオープンソースのJavaScriptライブラリです。 Facebookが開発の主導となっており、
よくある要件だと思うんだけど、検索してもHTTPの仕様（主に上りと下りそれぞれのcontent-typeのこと）についてよく理解した上で書かれていそうな良い情報が上位に出てこないので自分用にメモしておく。 Tweet 2013年8月16日 嶋田大貴 <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="name">お名前</label> <div class="controls"> <input id="name" type="text" value="山田 太郎"/> </div> </div> <div class="control-group"> <label class="control-label" for="age">年齢</label> <div
HTML5 Sortable is a jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API. DEPRECATION NOTICE This project is not mantained anymore. I recommend using RubaXa's Sortable or voidberg's fork instead. Why another sortable plugin? Because it's better. Well, If you want to read the whole story read it here. Features Less than 1KB (minified and gzipped). Built using native
2015.02.23 超簡単！カレンダーから日付入力する方法：jQuery ui Datepicker ツイート シェアする 共有する はてブ Pocket あなたのサイトの入力フォームは、日付入力が難しくなっていませんか？希望発送日時や納品日など日付に関する入力は意外と手間がかかるので、入力しやすいよう改善しましょう！フォームのユーザビリティ(使い勝手)は入力完了率やコンバージョン率に大きく影響からです。 ではどうすれば日付入力が簡単になるのでしょうか？答えは「カレンダー」を使用して日付入力をしてもらうのです。普段から見慣れているカレンダーを使用することで、直感的に日付を確認することができ、また1クリックするだけで選択出来ます。今回は「jQuery ui Datepicker」を使用して、カレンダーを簡単に実装する方法をご紹介します！ ▼サンプルページ jQuery-ui-datepic
JS/jQueryでCSS疑似要素である:before:afterのプロパティを取得し変更する jQueryにはCSSのプロパティを取得できる css() という関数がありますが、残念ながら疑似要素には対応していません。 サンプル要素 .pseudo::before { content: '疑似要素取得'; } 今回はこの要素の content の値を取得・変更していきます。 取得する var property = window.getComputedStyle($('.pseudo')[0], '::before').getPropertyValue('content'); console.log(property); // 疑似要素取得 JSの関数を使って疑似要素のプロパティを取得することができます。 getComputedStyle() 関数の第二引数に ::before または :
しょぼい話し。 たとえば #id{ height: 10px; width: 10px; margin: 5px; padding: 5px; } とした時に、jQueryで普通に $('#id').height(); を実行してもheightで帰ってくる値は 10。 しかしながら、 $('#id').outerHeight(); ってやると、paddingを含んだ高さが返ってきます。 今回の場合は20。 marginを含めるには、trueを渡す必要がある。 $('#id').outerHeight(true); ってやると30だ。
scrollClassはスクロールの挙動に応じて任意の要素にclassを付与するためのスクリプトです。jQueryに依存しています。上に動作サンプルを用意しました。初期は文字が赤、下にスクロールすると途中で緑、上に戻す時は青と変化するように設定しました。ライセンスですが、一通り動作確認したあと確認しようとしたらユニコーン出てて見れませんでしたので後で確認します。 scrollClass
マウスのホバー時に、ふんわりとバウンドするモーションをつけるスクリプトをJanko at Warp Speedから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript"> $(document).ready(function(){ $(".button").hover(function(){ $(".button img") .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump .animate({top:"-6px"}, 100).ani
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く