パララックス効果を再現するjQueryプラグイン「jquery.parallax」 - Qiita
新しく使いやすく作り直しました。 スクロールによってCSSを変更し、パララックス効果を実現するjQueryプラグイン この記事のものとは使い方が少し異なりますが、同じ機能をもっています。 site: http://develo.org/2014/04/21/0227.html GitHub: https://github.com/kamem/jquery.parallax 仕事でパララックス効果を使ったサイト作る機会があり、 使い勝手のいいプラグインないかなぁーと思って探していたのですが。 なかなか見つかりませんでした・・。 パララックスの仕組みってそれほど難しくないんだねぇーと思いながら作り始めたのですが・・。 なかなかいろいろな機能を組み込みだすとなかなか大変な感じで； 結構前に作った奴は自分だけ使えればいいやーと思い、プラグイン化していなかったのですが、最近ようやくプラグイン化しまし
結果の順番を保証して、且つ『並列』でAjax通信を行う方法 - Qiita
var request = [ { url: 'hoge00.json', params: { hoge: 123, huga: 456 } }, { url: 'hoge01.json', params: { hoge: 246, huga: 912 } }, { url: 'hoge02.json', params: { hoge: 369, huga: 1368 } }, { url: 'hoge03.json', params: { hoge: 492, huga: 1824 } }, { url: 'hoge04.json', params: { hoge: 615, huga: 2280 } } ]; var results = []; var doneCount = 0; for (var i = 0; i <= request.length; i++) { $.ajax({
爆速でわかるjQuery.Deferred超入門
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
Spring Boot で WebSocket を使ったサンプルアプリケーションの作成 | PGColony
pom.xml<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.example</groupId> <artifactId>springboot</artifactId> <version>0.0.1-SNAPSHOT</version> <!-- Inherit defaults from Spring Boot --> <parent>
jQueryプラグイン「pjax」でスムーズにページ遷移するサイトの作り方 | Neganin(ネガニン)
「pjax」とは「Ajax」と「pushState」を組み合わせたもので、非同期通信をしながらURLを変更することができる「jQueryプラグイン」です。 各ページの差分だけ読み込み、描画するので、転送量削減ができ時間短縮を図れますし、ページ遷移時のエフェクトも追加できたり、カスタマイズ性に優れています。検索エンジンからのマイナス点もない非常に優秀なプラグインです。 「Ajax」と「pushState」が何なのかというと・・・ Ajax ページを遷移せずにサーバーからデータだけを非同期でとり、サイトに描画する仕組みのことで、「Google Maps」などに使用されています。 pushState 「HTML5」で導入されたURL操作のAPIで「Ajax」を使用して非同期なサイトを作る時などにアドレスが変更されない問題を解消してくれます。 1. デモ 前置きが長くなりましたが、実際に「pjax
Struts後時代のJava EE／Javaモダン開発はどうあるべきか～JJUG CCC 2014 Springまとめリポート（前編） - ＠IT
日本Javaユーザーグループは2014年5月18日、「JJUG Cross Community Conference 2014 Spring」を開催した。「JJUG Cross Community Conference」（以下、JJUG CCC）は毎年春と秋に開催されるカンファレンス。初心者向けからエキスパート向けまで、Java／JVMに少しでも関連すればいいという広いテーマでさまざまな講演が行われている。 今年は4トラック同時進行、合計25ものセッション、ハンズオンセミナーという規模で大いににぎわった。 そして最新仕様であるJava EE 7に準拠しているのは2014年5月現在「GlassFish」「WildFly」のみで、主流は多種多様なアプリケーションサーバーが対応しているJava EE 6とのことだ（楽天はGlassFishを活用していることでも有名）。 エンタープライズ分野でJa
jquery 1.xと2.x の違い、さらに動作を高速にするための設定 | まとめーたー
photoBy: http://www.jose-aguilar.com/blog/wp-content/uploa…まずは jquery 1.x と 2.x の違い 1.x 系は IE8 以前をサポートするが遅い、重い 2.x 系は IE8 以前のサポートは捨てて、いるが軽い、早い アイルトン・セナじゃあるまいしそんなに早くしてどうすんの？Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。 使い分ける対応していないIE8以下には古いjqueryを読み込ませます <!--[if lt IE 9]> <script src="jquery-1.9.1.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <script s
jQuery ValidationプラグインでAjaxを使ってremoteバリデーションする - morolicious開発日記
jQuery Validation Plugin jquery.validate.js フォームのバリデーションにとても便利なjQueryプラグインですが、Ajaxを使った時にちょっとハマったのでメモ。 例えばユーザー名が使われているかチェックする時にクライアントサイドのチェックだけでは実装出来ないのでサーバに問い合わせる必要があります。 jQuery Validation Pluginではremoteを設定する事でデフォルトではonkeyup（一文字入力するごと）毎にサーバ側にリクエストしてチェックしてくれます。 コードサンプル ※Bootstrapを使っているのでCSSへの適応も考慮されています。 HTML <form id="join-form"> <div class="control-group"> <input id="username" name="username" typ
CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 | DevelopersIO
CORS(Cross-Origin Resource Sharing)って何？ CORS(Cross-Origin Resource Sharing)は、その名の通り、ブラウザがオリジン(HTMLを読み込んだサーバのこと)以外のサーバからデータを取得する仕組みです。各社のブラウザには、クロスドメイン通信を拒否する仕組みが実装されています。これは、クロスサイトスクリプティングを防止するためです。Aというサイトに訪問したのに、Bというサイトに向けて個人情報を送っていたというのは困りますよね。例えば、オリジンから読み込んだHTML内のJavaScriptでJSONデータを読み込むとしましょう。JSONデータが同じサーバにあれば普通に読み込めますが、別のサーバにある場合は読み込めません。まぁ実際のところはJSONPという仕組みを使ってできちゃったりしますが、抜け道的なやり方で使われていました。CO
CORSリクエストでクレデンシャル(≒クッキー)を必要とする場合の注意点 - Qiita
クレデンシャルの送信 クロスオリジンのAJAXリクエストでクレデンシャル（クッキーの送信またはBASIC認証）を必要とする場合は、それを許可するオプションをフロント側Javascriptで付けておく必要があります。デフォルトではCORSリクエストでクッキーは送信されませんし、BASIC認証は送れません。 Fetch API の場合 fetch(url, { mode: 'cors', //クロスオリジンリクエストをするのでCORSモードにする credentials: 'include' //クレデンシャルを含める指定 })
BootStrap使っているんだったら、Loadingもglyphicon使っちゃえ！ | jlamp
Loading.js (function($) { $.extend({ LoadingImg: function(action) { // デフォルトパラメータ var param = { icon: 'glyphicon' , prefix: 'loading' }; if ('start' === action) { if (0 === $('#' + param.prefix + '-layer').length) { $('body').append('<div id="' + param.prefix + '-layer"> </div>'); $('#' + param.prefix + '-layer').after('<div id="' + param.prefix + '-content" class="text-center"></div>'); $('#' + p
Twitter Bootstrapのカルーセルをキーボードとスワイプで操作 - ZeBeVogue別館
Twitter Bootstrapはレスポンシブレイアウトに対応しています。ですので、PC用とモバイル用のサイトを兼用で作るのが非常に楽です。 ですが、その際に気をつけないといけないのがユーザビリティです。 当然PCとモバイルでは使われるアクションが異なる為、異なるユーザビリティの向上が必要になります。モバイルであればスワイプやタップ、PCではキーボードもしくはマウスが主体の操作になります。 ２つのライブラリを使って、カルーセルのアクションを制御させてみました。 カルーセルの基本的な使い方は公式サイトを見てください。 キーボード・スワイプで使うライブラリは以下になります。 jwerty touchSwipe jwerty キーボードショートカットが簡単に設定できるライブラリです。 基本的な使い方は以下の通りです。 jwerty.key('ctrl+shift+P', function ()
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
ナイスなレスポンシブなテーブル実装jQueryプラグイン「Responsive tables」:phpspot開発日誌
Responsive tables ナイスなレスポンシブなテーブル実装jQueryプラグイン「Responsive tables」 レスポンシブなテーブルというと、どうせ何か削るんでしょう、と思うところですが、主要項目を隠しつつも、見たい項目を選択して表示できるレスポンシブ方式。 テーブルは悩みどころではありますが、１つの解決策として知っておくとよさげ。 デザインもBootstrapベースで使いやすそうです 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」 レスポンシブなギャラリー構築ができるLightBox実装jQueryプラグイン「lightGallery」 クールに実装できるレスポンシブなモーダルダイアログ「Remod
スマホ用のスワイプギャラリーjQueryプラグイン「jquery.swipeGallery」
スマホ用のスワイプギャラリーjQueryプラグイン「jquery.swipeGallery」 スマホで利用できるスワイプ可能なスライドギャラリー用のjQueryプラグイン「jquery.swipeGallery」を公開しました。指で画面をスワイプすると画像が切り替わるアレです。 ダウンロード / サンプル(スマホで見てね) / GitHub スワイプ系のギャラリーとしては珍しい無限ループに対応しているプラグインです。 利用方法 jQueryを読み込みその後にjquery.swipeGalleryを読み込みます。 <script src="jquery.js"></script> <script src="jquery.swipeGallery.js"></script> CSSファイルも読み込みます。 <link rel="stylesheet" href="jquery.swipeGal
CORS(Cross-Origin Resource Sharing)について整理してみた | DevelopersIO
ブラウザからAmazon S3に直接ファイルをアップロードしたい 先日、Amazon S3にファイルをアップロードするWebアプリを作ろうとして色々調べていたところ、S3にCORSという仕様のクロスドメインアクセスの設定をすることによって、ブラウザから直接S3にアップロードをする方法にたどり着きました。ただ、この方法を使うにあたってはCORSというクロスドメインアクセスの仕様をきちんと理解しておいた方が良さそうでしたので、まずはCORSについて自分なりに整理してみました。 なお、弊社の横田がCORSとS3についての記事を以前書いていますので、S3のCORSサポートに関する概要を知りたい方はそちらをご覧下さい。 CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 CORS ブラウザでAjax通信を行う際には、同一生成元ポリシー(Same
jQueryのプラグインを探す時に便利なサイトのまとめ
星の数ほどあるたくさんのjQueryのプラグインから、目的にあったものを探すのはなかなか大変ですよね。そんな時に役立つ便利なサイトをまとめました。 まずは手前ミソで自分がまとめたものから。 これは本当に多大な労力と実際の動作確認もしているので自信をもってオススメできます。 jQueryのプラグイン100選 -2013年総集編 日々チェックしているスクリプトから厳選して一年単位でjQueryのプラグインをカテゴリごとに選出しています。プラグインの半分近くは個別に記事も書いてあります。 jQueryのプラグイン100選 -2012年総集編 jQueryのプラグイン100選 -2011年総集編 jQueryのプラグイン100選 -2010年総集編 jQueryのプラグイン100選 -2009年総集編 jQueryのプラグイン100選 -2008年総集編
Welcome solutionsfit.com - Hostmonster.com
Web Hosting - courtesy of www.hostmonster.com Home Hosting Features Help Center Contact Us About Us Domain Check Affiliates Terms © 2005-2012 Hostmonster.com. All rights reserved.
Maplace.js - 軽量なjQuery × Googleマップライブラリ MOONGIFT
Googleマップをプログラマブルに組み込むのに良さそうです。 GoogleマップはAPIの多彩さ、機能の柔軟さもあって様々なサービスで使われています。位置情報や地図を扱おうと思ったら一番に考えるのではないでしょうか。 そんなGoogleマップをさらに手軽に使えるようにしてくれるライブラリがMaplace.jsです。機能は限られますが広範囲に利用できそうです。 まずは簡単なデモ。地図の表示を行います。コードとしてはたった数行です。 // JavaScript var maplace = new Maplace(); maplace.Load(); // or new Maplace().Load(); // HTML <div id="gmap"></div> その結果は次のようになります。 シンプルな地図表示。 次はドロップダウンやリストを使ったマーカーのデモ。マーカーは自動的に中央に表
jQuery Mobile 最新情報 & Tips
3/15のWeb Cat Studio(リクルートエージェント)で行われた「jQuery Mobile 最新情報 & Tips」のセッション資料です。Read less
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
