タグ

ブックマーク / black-flag.net (4)

  • jQueryでiframe内のページから親ページを操作する方法|BLACKFLAG

    少し前に「jQueryでiframeの親ページからインラインフレーム内の子ページを操作する方法」と題して、 iframeの親ページから子ページを操作する方法を紹介しましたが、 その逆の、iframeの子ページから親ページを操作をする方法について 簡単なサンプルを交えて紹介してみます。 親ページ側では特にjQueryファイル自体を読み込む必要は無く、 iframe内に表示するページ側で、jQueryファイルと共に 下記の様なスクリプトを書くことで操作することが可能になります。 ◆SCRIPT $(function(){ $('p',parent.document).css({color:'#ff0000'}); }); この記述方法(参考例)の場合だと、iframe内のページからの操作で 親ページの<p>タグのテキスト色を「赤」に変更します。 スクリプトを実行させる該当要素の後に「,pare

    jQueryでiframe内のページから親ページを操作する方法|BLACKFLAG
  • jQuery Masonryを使ってグリッドレイアウトを実現しているWebサイト集「25 Powerful Examples of Masonry jQuery Web Design」|BLACKFLAG

    2年くらい前の記事になりますが「jQueryでFloatしたボックスを整列させる「jQuery Masonry」」と題して、 CSSでFloatを使って回り込みさせたブロック要素に対して、 要素の高さ(Height)がバラバラだったとしてもレイアウトが崩れないように 整理・調節してくれるjQueryプラグイン「jQuery Masonry」を紹介しました。 今やこういったグリッドレイアウトはPCサイトの見せ方だけに留まらず、 同時にスマートフォン用のサイト設計をする際にも、 とても効果的な組み方になってきています。 そんな「jQuery Masonry」を使ってグリッドレイアウトを実現している Webサイトを集めたエントリー「25 Powerful Examples of Masonry jQuery Web Design」が 色々と参考になりそうだったので紹介してみます。 ≫25 Pow

    jQuery Masonryを使ってグリッドレイアウトを実現しているWebサイト集「25 Powerful Examples of Masonry jQuery Web Design」|BLACKFLAG
  • 画像を使用せずにCSS3のみで紙がめくれた様なボックスを形成する「Advanced (yet awesome) pure CSS3 boxes without using images」|BLACKFLAG

    今までは画像無しでは実現できなかった見た目(デザイン)を CSS3のみで実現させる方法はいろいろ紹介されていますが、 そんな中でも、紙の質感をもの凄いクオリティで表現し、 角のめくれ具合やセロテープで貼ったような見た目までをCSS3のみで実装可能とする 「Advanced (yet awesome) pure CSS3 boxes without using images」が衝撃的だったのでご紹介。 ≫Advanced (yet awesome) pure CSS3 boxes without using images « Design and Development tuts – TutorialShock ≫デモページはこちら:Css3 Boxes(Chrome or Safari) もちろんWebkitブラウザのSafariやChromeのみでの実装になりますが CSS3でのグラデー

    画像を使用せずにCSS3のみで紙がめくれた様なボックスを形成する「Advanced (yet awesome) pure CSS3 boxes without using images」|BLACKFLAG
  • スクロールに合わせてコンテンツの読み込みを開始するjQueryプラグイン「Autobrowse jQuery plugin」|BLACKFLAG

    2011/03/11の「東北地方太平洋沖地震」震災後、しばらく更新が滞っていましたが、少しずつ再開してみようかと思います。 Twitterなどで見かけるページの最下部までスクロールすると続きのコンテンツを読み込む動作を、jQueryで可能とするプラグイン「Autobrowse jQuery plugin」が、ちょっと気になっていたのでメモ書き程度に紹介してみます。 ≫jquery.esn.autobrowse.js 上記チュートリアルページでデモが確認できますが、サンプルではページロード時に決まった数(20個)の画像を先に読み込んでおいて、ページをスクロールするとさらに20個ずつ画像を読み込み、100個まで表示した時点で動作をストップさせています。 使い方もさほど難しくなく、プラグインファイルと下記の実行用スクリプトにて実装が可能なようです。 ◆SCRIPT $(".page").auto

    スクロールに合わせてコンテンツの読み込みを開始するjQueryプラグイン「Autobrowse jQuery plugin」|BLACKFLAG
  • 1