ウィンドウサイズで読み込むJavascriptを切り替える方法
パララックスのページを作成しているときにパララックスのjsが邪魔してたので、読み込まないようにする方法をまとめました。 ウィンドウサイズで読み込みJSの切り替えレスポンシブサイトの制作時にPCで読み込んでいるjavascriptを変更したいときに使用するコード。 PCサイトでパララックスのページを制作していて、スマホ表示では真っ白になる現象が起きたので、調べるとでparallax.jsが悪さしてるみたい。そこでスマホ表示のとき、つまりブラウザのウィンドウサイズが649pxのときにはparallax.jsを読み込まないようにしました。 <script type="text/javascript"> jQuery(document).ready(function($) { //PC環境の場合 if (window.matchMedia( '(min-width: 649px)' ).match
[作って学ぶ！jQuery] 第5回 ajaxを使って複数ブログの最新記事一覧を表示する | バシャログ。
こんにちは、GWはがっつり朝から晩まで子供と遊びまくっていたishidaです。 今回はajaxを利用して、ブログの最新記事を掲載してみようと思います。 ajaxで取得するデータは、同一サーバ内のxmlデータとします。また取得するブログは以下の3つとしています。 馬車道の社長ブログ（/blog/niidome/index.xml） ゴトウ@シーブレインの馬車道（/blog/goto/index.xml） バシャログ。（/blog/wsg/rss.xml） デモ ajaxで複数ブログの最新記事掲載のサンプル htmlソースコード 以下がhtmlソースコードです。該当部分以外は省略しています。 feeds という id 部分にデータを読み込んで表示します。 <div id="main"> <h1>ajaxで複数ブログの最新記事掲載のサンプル</h1> <div id="feeds"> ここに表示
![[作って学ぶ！jQuery] 第5回 ajaxを使って複数ブログの最新記事一覧を表示する | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
phpで500エラーが表示されたときにエラーメッセージを表示させる | 電脳備忘録 | 560Days
本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。 この記事は最終更新から2年以上経過しています。 クロスドメインを突破してRSS(XML)を取得して表示する必要があったので対応したときのメモ。 あるサイト姉妹サイトのRSS（xml）を拾って記事一覧を表示させたかったのですが、ドメインが別だったため、いきなりクロスドメインの壁にぶち当たってしまいました...。 最初、jquery.xdomainajax.jsというライブラリで対応しようとしたのですが、xmlデータを取得できたものの、どうやっても生成できなかったのでこの方法は諦めざるを得ませんでした。 結局下記のサイトを参照して無事xmlを取得して生成できたのでメモしておこうと思います。 クロスドメインの制約回避 ドメインに中継用のPHPを用意。 <?php
ページ内リンクが飛べないのはjquerymobileのせいだった！ページ内ジャンプできる修正方法
jquerymobile(ジェイクエリモバイル)を利用している場合は、ページ内リンク（ページ内ジャンプ、ページ内アンカー）が効かないようです。 jquerymobileでは1つのファイルで複数のページがあるように作ることができ、その機能上で「#（ハッシュ、シャープじゃないよ）」を利用するために、 ページ内アンカーするときには「＃」が無効化されてしまうようです。 みなさんがいろいろ対応するためのjavaスクリプトを作成してくれているんですが、複数のページ内リンクにも対応しているスクリプトがこちらでした。 １、リンクにイベント用のクラス名をつける リンク用のaタグに、class=”anchor”という名前をつけました。 名前付け用のaタグはいつも通りnameやidに名前をつけます。 <a href="#aaa" class="anchor">アンカー１</a>｜ <a href="#bbb"
jQuery List – A Blog For Coders & Programmers
CSS is an acronym that stands for cascading style sheets and refers to a set of instructions that controls the appearance of a web page. The formatting principles of CSS are supported by most browsers include Firefox and IE3. In comparison with HTML, CSS provides more formatting options and finer tuning for instance, instead of being stuck with 7 font sizes one can simply use an infinite number of
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
[ThinkIT] 第1回：Prototype.jsを使う準備 (1/2)
筆者がPrototype.jsに初めて出会ったのは、2005年9月ごろだったと思います。この頃、オブジェクト指向JavaScriptはまだまだ黎明期で、オブジェクト指向の書き方もさまざまな我流が存在していたことを覚えています。 もちろん、筆者も我流のオブジェクト指向で書いていました。しかし、すべてのエンジニアが我流の書き方をしていては、JavaScriptのオブジェクト指向は普及しません。 そんな時にさまざまなブログで取り上げられ始めたのがPrototype.jsでした。Prototype.jsにはクラスを定義するという機能があり、すべてのエンジニアが同じ方法でクラスを定義できるのです。それは、大きなインパクトでした。しかし、その当時Prototype.jsにはまとまったドキュメントが無く、目利きのJavaScripterたちはこぞってソースを読んでいました。 そして、そのことが図らずとも
Google AJAX Feed APIでRSSフィードを表示
【JavaScript】 <script type="text/javascript" src="http://www.google.com/jsapi?key=取得したKeyを入力"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("RSSフィードのURLを入力"); <!--表示したいエントリー数--> feed.setNumEntries(10); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i <
jQuery.lightpop.js サンプル
jQuery用のプラグインjQuery.lightpop.jsのサンプルです。 使用方法・ダウンロードはこちらからどうぞ。 画像 サンプル <a href="media/pict01.jpg" rel="lightbox" title="画像１"> <img src="media/pict01.thumbnail.jpg" alt="画像１"> </a> <a href="media/pict02.jpg?width=320&height=240" rel="lightbox" title="画像２"> <img src="media/pict02.thumbnail.jpg" alt="画像２"> </a> 画像３テキストリンク <a href="media/pict03.jpg" rel="lightbox" title="画像３">画像３テキストリンク</a> 画像４テキストリンク
jQuery.lightpop.js - dogmap.jp
オプションの設定 オプションを設定することで、フレーム枠の見た目を変更したりできます。 オプションは、ざっと次の通り。 通常のオプション overlayBgColor: オーバーレイの背景色 overlayOpacity: オーバーレイの透明度 contentFrameType: 'border' (通常) or 'box' (画像を使用してフレームを表示) contentBgColor: コンテンツの背景色 containerBorderSize: コンテンツの脇に表示する空白の幅を px で指定 containerResizeSpeed: リサイズアニメーション時のスピードを数値で指定 imageLoading: 読み込み中に表示する画像ファイルのパス imageBtnClose: 「閉じる」ボタン用の画像ファイルのパス imageBtnPrev: 「前へ」ボタン用の画像ファイルのパス
もうPhotoshopは要らない？ブラウザだけでできるグラフィックジェネレータ15選 | S i M P L E * S i M P L E
そのままですが、Mashableで「Forget Photoshop: 15 Online Graphics Generators」が紹介されていました。 これはメモしておかねば。 Buttonator ボタンがいろいろ作れます。設定がいろいろあって良いですね。 RoundedCornr: Rounded Corner and Gradient Generator いわゆる角丸パーツを作れます。 Web 2.0 free buttons maker! 2.0っぽいボタンが作れます。 glassy buttons こちらもボタンジェネレータ。 Ajaxload – Ajax loading gif generator Ajaxのローディング中のパーツが作れます。 Web2.0 Logo Creator by Alex P Logo Maker : Web 2.0 Stylr 2.0っぽいロゴ
Lightview “Overlay anything width style”
Lightview allows you to easily create the most beautiful overlay windows using the jQuery Javascript library. By combining support for a wide range of media with gorgeous skins and a user-friendly API, Lightview aims to push the Lightbox concept as far as possible. Lightview uses HTML5 to help you deliver the best experience across every browser. Let it enhance your media automatically or create c
jQueryだけで作る、サムネイル画像を魅力的に見せる方法 (1/5)
普段あまり目にしないようなインパクトのあるサイトを作りたい。そんなときにはいつも見ている日本国内のWebサイトだけでなく、海外サイトに目を向けてみるといいかもしれません。これまでにもこの連載ではいくつかの海外サイトを紹介してきましたが、今回見つけたのはアルゼンチンのWebサイトです。 「Sikker」という名前のサイトは、Webデザイナー・Nicolas Calabreseさんのポートフォリオサイト。1ページのみ、スクロール無しの“1枚絵”のようなごくごく小さなサイトですが、その分、CSSやJavaScriptの小技を効かせて、カッコよく楽しいサイトにデザインされています。今回は、このSikkerをお手本とさせてもらうことにします。 今回のお手本サイト：『Sikker』 アルゼンチンのWebデザイナー、Nicolas Calabreseさんのポートフォリオサイト。グローバルブランドのロゴが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressのwp_headのところに入るjQueryを読み込まないようにする方法 - ディレイマニア
ajaxzip3 - Google Code
S2ファクトリー | Web/アプリ/システム/デザイン/ディレクション
Yahoo Developer Network
Michael Leigeber
http://solidstate.jp/ImageDisplay/slideshow/script_141.html
GoogleマップAPIの使い方を分かりやすく解説！ - Google Maps 活用講座