コピペでOK！楽天のページにjQueryで動くバナーを設置する方法 | ハカセの研究室
「売れている楽天のショップ」 「担当のECCからここを参考にしたら良いと言われたショップ」 「なんかかっこいいなと思ったショップ」 それらのショップにはほとんどの場合「動くバナー」が設置されていたりしませんか？ 「どうやってやるんだろう」「うちの店舗では無理だな」そんな風に思っている担当者の皆様ご安心下さい。ハカセの研究室なら簡単にコピペだけで導入出来ます。しかも無料です。 今まで出来なかった事が出来る。そう、jQueryならね。 いきなりうざい感じで始まりましたが、本日はやってみたいと考えてる方も多いはずの「jQuery（ジェイクエリー）」を使用した動くバナーの導入方法を説明します。 jQueryとは？ オープンソースのJavaScriptライブラリの一つ。2006年1月にJohn Resig氏が最初のバージョンを公開し、現在は有志プログラマによる開発者集団「jQuery Tea
jQuery :: コンフリクト対策 [Tipsというかメモ]
<script type="text/javascript"> var $j = jQuery.noConflict(); $j(function(){ // ここにjQueryの処理内容を記述します。 }); </script> 個人的には 対策３ がおすすめ。 追記: 2010-02-15 以下の書き方もあるようです。 <script type="text/javascript"> jQuery(function($){ // ここにjQueryの処理内容を記述します。 // この中では$はjQueryとして扱われます。 }); </script>
Jimdoでパンくずリストを簡単に追加する
※ Jimdo の仕様変更によりこちらのウィジェットが利用できなくなりました。 最近コンテンツがだんだんとJimdo寄りになってきました。 パンくずリストとは、ウェブサイト内において、利用者がサイト内での現在位置を見失わないようにし、ナビゲーションを助けるために使われる。 だそうです。 Jimdoサイトでは、パンくずリストは自動的には追加されません。 通常、Jimdoでパンくずリストを追加しようと思った場合、 エレメントの追加から「文章」等を選んで、手動でテキストとリンクを追加しないといけません。 それも、全ページ個別に。 また、ナビゲーションの変更を行った際には、また一からやりなおしです。 そこで、Jimdoで簡単に追加できるものを作ってみたので、 追加する方法を紹介したいと思います。 相変わらずJavascriptで解決します。 追加する場合は、シンプルに 「設定」 -> 「ヘッダー部
背景画像をスライドショーさせるJavaScript「Vegas Background jQuery Plugin」
twitter facebook hatena google pocket 背景画像を動かすことでインパクトのあるサイトが構築できます。 Vegas Background jQuery Pluginはフルスクリーンで背景をスライドさせられます。 さらにドットのオーバーレイをかけられるので、カッコイイ感じになります。 sponsors 使用方法 Vegas Background jQuery Pluginからファイル一式をダウンロード。 <link rel="stylesheet" href="jquery.vegas.css" media="all" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.vegas.js
スマフォサイト作成時に超便利な画像タッチでタッチ位置をズームできる「Cloud Zoom touch」:phpspot開発日誌
スマフォサイト作成時に超便利な画像タッチでタッチ位置をズームできる「Cloud Zoom touch」 2011年06月01日- Welcome AlbanX.com スマフォサイト作成時に超便利な画像タッチでタッチ位置をズームできる「Cloud Zoom touch」。 「Cloud Zoom」というjQueryプラグインがあって、こちらへのパッチとして動作するみたい マウスオーバーでも動くみたいですが、iPhone、Androidでタッチした際にも動きます。 指でそのままスライドさせればマウスオーバーのように商品を拡大表示できます。一度iPhoneなどでみてみましょう。 スマートフォン向けのショッピングサイトにおいて、商品のディテールを説明するにはこうしたUIってかなり有用だと思われます。 いかに小さな画面においても詳細を見せるか？という場合において１つの選択肢として覚えておいて損はな
色々なエフェクトがある画像ズームJavaScript「Cloud Zoom」
twitter facebook hatena google pocket 画像をズームさせることで、小さなスペースで詳細まで見せることが可能です。 今回紹介するProfessor Cloudは軽量かつ簡単にズームをさせられます。 sponsors 使用方法 Professor Cloudからファイルをダウンロードします。 またjQueryも忘れず用意しましょう。 <link href="cloud-zoom.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="cloud-zoom.1.0.1.js"></script> 上記を記述したら画像を記述していきま
最近はword-breakするのにJSは使わないほうがいいみたい - Webtech Walker
Twitter / tacamy: { word-wrap: break-word; } ... ということなのでJSを使わずにCSSだけでやれるみたいです。しかもこれだけ。 .word_wrap { word-wrap: break-word; } IE6、7、8、Firefox3.6、Safari4、Chrome、Opera10.52で確認しましたけどこれだけで全部いけます。ブラボー。 <div class="word_wrap">http://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%83%86%E3%82%A3</div> <div class="word_wrap">aaaa
HTML5.jsの中身を見てみよう
HTML5.jsって中でなにやってるの？ 自己紹介 かみやん (Twitter@kamiyam) システム開発会社 ほとんどWebのシステム Java・C# 最近はクライントサイド(HTML5・Javascript)の勉強をしてます。 HTML5.jsって何？ IE6/7/8でHTML5を使いたい時に便利なjavascriptライブラリ html5shiv - Google Code http://html5shiv.googlecode.com/svn/trunk/html5.js 使い方 HTML5.jsを読み込む IE9以前のIE6/7/8に適用させる <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"</script> <![endif]--> 使い方 cssを定義する
HTML5でコーディングしたページでjQueryを使うときに気をつけること :: 5509
そろそろHTML5でコーディングする機会も増えてきたりするかもしれませんが、どうしてもブラウザ対応はしておきたいもの。jQueryで（※）要素をごにょごにょする際にちょっとはまったので一応書いておきます。 IE8以下での話ですが、IE8以下でHTML5を利用するときはHTML5の要素にCSSが適用されないので、html5.jsのようなスクリプトをヘッダで読み込ませたりすると思います。 ちなみに僕はわざわざ読み込むのもアレなので、以下のものを毎回貼ってます。 こんな感じでJavaScriptのcreateElementメソッドでHTML5の要素を追加すれば、CSSが使えるようになって見た目もだいたいばっちりになるんですけど・・・ jQueryで $(hoge).append('セクション') とか $(hoge).append([ '', '', // hogehoge '', '' ].j
ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」:phpspot開発日誌
ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」 2011年06月23日- A jQuery plug-in for Lens Effect Image Zooming ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」。 次のように、画像の特定部分の円形のみをズームするようなUIが簡単に作れちゃいます。 ECサイトなどで商品を拡大するように実装されていたらお客さんに喜んでもらえるかも。 レンズの大きさもピクセル指定で自由自在です。 白黒写真がレンズを入れることでカラーになるみたいな効果も。 レンズの色やサイズも選べます。 実装の容易さも素晴らしくて、.imageLensで初期化するだけです。 関連エントリ タイマーを作る際に便利なjQueryプラグイン「jQuery Timer」
Google Analyticsで曜日別のデータを取得する - makitani.com
Google Analyticsの「マルチカスタム変数」を使って、曜日別のデータを取ってみました。 2009年10月にGoogle Analyticsに追加された機能「マルチカスタム変数」は、多くの場合そのサイトのゴールやKPIからゴニョゴニョと引っぱってきて「じゃあどういったデータをどのように取得すればいいのか」となって、なかなか汎用的に使えるようなサンプルって少ないんじゃないかと思います。その中で、何かないかなとぼんやり考えていたら、ありました。「曜日」。 いまのGoogle Analyticsは、曜日別に分析するのがむずかしいんですね。ひとつまえのGoogle Analyticsはできたように記憶していますが。いまのものでもたぶんできなくはないんでしょうけれど（アドバンスセグメントで細かく指定した上でCSVでダウンロードとか？）、できなくてもそんなに困らないというか（えーと）、たいて
jQueryで iPhone & iPod Touch & iPad を判別して振り分ける方法｜BLACKFLAG
昨日のエントリー『iPhoneサイト構築で役立ちそうなもろもろ & jQueryでiPhone判別方法』で jQueryを使ってのiPhone判別方法は紹介しましたが、 その後、「jquery.browser.js」プラグインをちょこっといじることで iPhone & iPod Touch & iPad を それぞれ判別して振り分けができるようになったのでご紹介してみます。 単純にiPhone、iPod Touch、iPadそれぞれの端末でuserAgentを調べてみると、 —————————- ・iPhone → iphone ・iPod Touch → ipod ・iPad → ipad —————————- といったようにそれぞれ別々のOS名となっていました。 これらのOS情報を「jquery.browser.js」に書き加える事で ３つの端末それぞれの振り分けが可能になります。 「
Google Analyticsでユーザーの解像度ではなく描画エリアのサイズを測定する : blog::tani.masaru
一般的なアクセス解析で測定するのはPCのモニタ解像度の場合が多い。しかし、それをそのままユーザーがブラウザが描画できる領域と想定しWebページのデザインをしてしまうと、間違いが起きる。なぜなら、大半のユーザーがブラウザの描画領域がPCモニタの解像度に比べて小さいエリアに過ぎないからである。 PCモニタの解像度がブラウザの描画領域と同じになるのはWindowsであれば、タスクバーを隠した状態でブラウザを全画面表示にしなければならない。しかし、実際には日常的な利用においてそのような使い方をしているユーザーは稀だろう。通常のユーザーは画面下部にはWindowsのタスクバーがあり、ブラウザの上部にはメニューバーや、ロケーションバー、タブエリアなどが並んでいる。仮にウィンドウを最大化したとしても、その分縦方向の描画領域は狭くなっている。横方向に関しても、例えばお気に入りをブラウザのサイドバーに表示し
Twitter関連のjQueryプラグイン｜Twitter関連｜Web関連特集｜PHP & JavaScript Room
スクロールパネルを実装するjQueryプラグイン「jScrollPanel」を使用して、指定したユーザー（複数指定可）のTLをコンパクトに表示する方法が掲載されています。 マウスホイールイベントをJSで制御するjQueryプラグイン「jquery.mousewheel.js」を使用することで、マウスホイールでスクロールできるようになっています。 鳥アイコンやデザインはCSSで変更できるようになっています。角丸は画像でなく、CSS3を使用して実装されています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml
jTweetsAnywhere - jQuery Twitter Widget with @Anywhere support
June 13th, 2013 jTweetsAnywhere stopped working since Twitter moved from API Version 1.0 to 1.1 and now turned off V1.0. Due to personal reasons I was not able to work on my open source projects for the last 5 months. Therefore I couldn't update the code nor answer all your emails and requests. I really apologize for this. Since Twitter now requires applications to authenticate ALL requests with O
A jQuery Twitter Ticker (Updated)
Introduction In this tutorial we are going to create a jQuery, CSS & PHP twitter ticker which utilizes Twitter's Search API. It will show your or your friends' latest tweets. In order to use twitter's newer, v1.1 API, we will have to use a PHP proxy script, that will communicate with the API securely for us. Originally, this tutorial was published in 2009 and used Twitter's search API which was Ja
twitterをJavaScriptで表示する「Juitter」
twitter facebook hatena google pocket twitterタイムラインをJavaScriptライブラリのjQueryを使用して表示させます。 via：Juitter sponsors 使用方法 Juitterからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.juitter.js"></script> <script type="text/javascript" src="system.js"></script> また、以下のように検索ボックスを設けてみれば完成です。 <form method="post" id="juitterSearch" action="
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm
http://www.amazingthings.in/2011/06/jquery-plug-in-for-lens-effect-image.html
jQuery Roundabout Shapes