可変グリッドレイアウトが簡単にできるjQueryプラグイン3選 - ウェブ学のすすめ
可変グリッドレイアウトができるjQueryプラグインをいろいろ試したところ3つほど良さそうなものがあったのでご紹介します。可変グリッドレイアウトは写真のギャラリーサイトやポートフォリオサイトなど多くのオブジェクトを見せる際に効果的なレイアウトです。一見実装するのが難しそうですがセレクタの指定さえ間違えなければ簡単だと思います。 ↓NHKスタジオパークでも可変グリッドレイアウトになっています。 NHKスタジオパーク 1. jQuery Masonry もっとも有名なグリッドレイアウトjQueryプラグイン jQuery Masonry Demo HTML jquery.jsとjquery.masonry.jsを読み込みます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport"
RailsでjQueryが動かないと思ったら
Railsを使ってて忘れがちな点。 Turbolinks こいつがjQueryの動きを止めます。 といっても、ページ読み込みを劇的に早くしてくれる強い味方なので、是非とも使いたい。 ※ Rails4からTurbolinksはデフォルトGemになりました。 ※ Rails3でも使えます。もちろんRails4で使わないという選択肢もあります。 Turbolinksとは ページ上のリンクをクリックした時に、ページ全体をリロードさせるのではなく、bodyタグの中身とheadの中のtitleを同一ページ上で書き換える方法。 .jsとか.cssとか処理し直さないので、ページの読み込みがかなり早くなる。 ↓こんなにごちゃごちゃ読み込んでたのが… ↓こうなったり、、、するので早いのは当然。 問題 下のようにjQuery（coffee script）を書いている場合は動かない。
jQuery - - Railsドキュメント
jQueryについて jQueryとは JavaScriptとHTMLの相互作業を強化する軽量なJavaScriptライブラリ。 簡単に説明すると、JavaScriptを簡単に扱うためのライブラリです。 特徴 クロスブラウザ対策 軽量かつ高速 MITライセンス CSSライクに書ける ドキュメントが充実 JavaScriptフレームワークの中で圧倒的なシェア 豊富なプラグイン 簡単な例 warning というクラスをつけたpタグのテキストカラーを赤くする場合 JavaScript <script type="text/javascript"> var targets = document.getElementsByTagName("p"); for(i=0; targets.length; i++){ if(targets[i].className === "warning"){ targe
[FullCalendar]カレンダーに画像を表示する
Googleカレンダーっぽいカレンダーを作成できるjQueryのプラグイン「FullCalendar」 通常、イベント（予定）は文字でしか登録できませんが、ちょっとした工夫で、カレンダーに画像をイベントとして表示することができます。 $('#calendar').fullCalendar({ eventRender: function(events, element) { if(events.img){ $(element.context) //imgプロパティが存在するイベントだけtitleを画像に差し替え .css("border-color", "transparent") .css("background-color", "transparent") .html('<img class="photo" src="'+events.img+'" />'); } }, events:
![[FullCalendar]カレンダーに画像を表示する](https://cdn-ak-scissors.b.st-hatena.com/image/square/57fcbb83ab2776382c404c7a5ab5c13e83a0b4fb/height=288;version=1;width=512/https%3A%2F%2Fgunmagisgeek.com%2Fblog%2Fwp-content%2Fuploads%2F2013%2F02%2Ffullcalimage.jpg)
第22章 Google AJAX Feed APIを利用する：RSSデータのタイトルと本文を表示する
Google AJAX Feed APIはRSSのタイトルだけでなく本文などの情報も取得できます。本文は各エントリー情報が格納された配列のcontentプロパティに格納されています。注意しないといけないのはリンクなどHTMLタグも、そのまま反映されてしまうことです。以下のサンプルではリンクなども反映されページ上に表示されます。これはRSS内にscriptタグでコードが記述されていた場合にセキュリティ面での危険性もともなうということです。この点に注意して利用する必要があります。 Atom, RSS 2.0内にスクリプトタグを入れてもGoogle側で、そのような部分が自動的にカットしてくれるようです。scriptタグだけでなくaタグやspanタグなど各種タグのイベントやaタグでhref='javascript:～'と指定されている部分もカットされます。（サンプルを実行する） <html> <h
jQueryでサイト内に簡単にRSSフィードを組み込めるプラグイン「zRSSFeed」｜BLACKFLAG
サイト内にRSSフィードを読み込む方法はたくさんありますが、 jQueryを使って簡単に組み込めるプラグインがないか探したところ、 必要最低限の要素で組み込むことが可能となる理想のプラグイン 「zRSSFeed」に辿りついたのでここでも紹介してみます。 zRSSFeed – RSS Feeds Reader for jQuery zRSSFeed – RSS Feeds Reader for jQuery 上記ページからダウンロードできるプラグインファイルと併せて 実行させる為のIDをつけた＜div＞などを用意し、 スクリプトを実行するだけ。 実装方法のサンプルについて。 HTMLは下記の様に任意のID名がついたブロック要素を配置します。 ※今回のサンプルではID名を「feed」にします。 ◆HTML <div id="feed"></div> そして下記の様にID「feed」に対して、ス
[JavaScript]jQueryでテキストファイルを読み込む: プログラミング研究室
今回は、jQuery.get(),jQuery.post(),jQuery.ajax()の3つで、テキストファイルを取得したいと思います。 jQuery.get(url, param, callback) get通信をする 第1引数は、指定のURL 第2引数は、GET送信時に、付加するパラメータ 第3引数は、通信処理が発生したときに呼び出す処理(関数) 第1引数以外は省略することができます。 戻り値としてXMLHttpRequestオブジェクトを返します。 このオブジェクトを使って、responseText、responseXMLでデータを取得することができます。もちろん、通信ステータスなども取得できます。 jQuery.post(url, param, callback) post通信をする 第1引数は、指定のURL 第2引数は、POST送信時に、付加するパラメータ 第3引数は、通信処理
画像のキャプションをクールに表示するJavaScript「jQuery Captify Plugin」
画像に説明をつけるキャプションは重要ですが、配置場所は大抵決まっています。 しかし、デザイン性を重視すると画像に乗せたいなど出てくるでしょう。 今回紹介するjQuery Captify Pluginはそれを簡単かつクールに表示可能です。 sponsors 使用方法 jQuery Captify Pluginからcaptify.tiny.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="captify.tiny.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('img.
jQueryを使用して指定したハッシュタグのつぶやきを取得する
Posted: 2010.12.11 / Category: javascript / Tag: jQuery, json, Twitter, 正規表現 Twitterのつぶやきを表示しているWebサイトがだいぶ多くなってきた昨今。イベントサイトなどでは特定のハッシュタグのつぶやきを表示するといった使い方もされているようです。 ということでこの記事ではjQueryを使用して指定したハッシュタグのつぶやきを取得して表示してみます。 Twitterのハッシュタグを検索し取得するURI Twitterからはさまざまな形式でデータを取得できますが、jQueryを使用するならjson形式が便利です。 ハッシュタグを取得するURIは下記です。 http://search.twitter.com/search.json?q=%23[ハッシュタグ名] [ハッシュタグ名]は取得したいハッシュタグ名に置き換え
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【jQuery】select（セレクトボックス）の入力値に合わせて、入力項目の表示・非表示を切り替える – ゆーも
IDEA * IDEA