テストの目安時間は15分です。テスト開始とともに計測をスタートします。 ※時間をオーバーしてもペナルティはありません。 Open IDでログイン さぁ、jsdo.itにログインしてテストを始めよう! login with Google login with Facebook login with Twitter
URL:jQuery Corner 「jQuery Corner」を使うと角丸を簡単に作成できます。 実際に「jQuery Corner」を使ったHAPPY*TRAPについてのページは、 このような感じになります。 ※グレーのエリアを「jQuery Corner」を使って角丸にしています。 簡単に使い方を紹介します。 1. 「jquery.js」と「jquery.corner.js」を読み込み、cornerメソッドをコールします。 <script type="text/javascript" src="/javascripts/jquery.js"></script> <script type="text/javascript" src="/javascripts/jquery.corner.js"></script> <script type="text/javascrip
CSS3 から使えるようになった border-radius を IE でも使う方法です。IE でも使うと言っては語弊がありますが、IE でも角丸を表現する方法です。それは Blog で使っている方法をメモ。 IE で角丸を表現する方法 ご存じの通り、IE6、IE7、IE8 では CSS3 の border-radius を使って角丸を表現することはできません。んじゃ、どうやって角丸を実現するのかというと次のような方法があります。 border-radius.htc を使う VML を利用して、behavior を使って border-radius を実現する方法 border-radius.js を使う JavaScript を使って border-radius を実現する方法 JQuery Corner を使う jQuery Corner という jQuery プラグインを使って bo
This plugin was originally written by Dave Methvin. Dave and I collaborated on several improvements and the project is now hosted on github. The most recent version is also available here: jquery.corner.js. It's important to understand that this corner plugin is pulling off its magic by adding more elements to the page. Specifically, it adds div "strips" to the item to be cornered and sets a solid
The PNG Fix jQuery plug-in was developed to create a quick-and-easy fix for the PNG transparency issue in Internet Explorer 6. It's partially based on Angus Turnbulls TwinHelix fix, but aims to remove un-needed HTTP requests, demanded by an .htc CSS behaviour() based solution. Please note, repeatable backgrounds are still not fully supported at this time. The IE AlphaImage filter is restricted to
There are several tutorials that walk people through how to create a jQuery slideshow, but there aren't many that focus on making it function without JavaScript. This is because most people believe it isn't possible but I am going to explain an exceedingly simple method that shows it is indeed possible. You'll soon be kicking yourself and asking "How did I not think of that?"… In this tutorial I w
Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。 jQuer
こんにちは!プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。(jQuery Mobile は不要です) iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この3点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
twitter facebook hatena google pocket これわりと使いようによっては面白くなりそうなjQueryプラグインです。 Zoomooz.jsは指定要素をクリックしたら拡大表示してくれます。 ステップなどで利用すると良さそうです。 sponsors 使用方法 Zoomooz.jsからファイル一式をダウンロードします。 <link rel="stylesheet" href="zoomooz.css" type="text/css" /> <script type="text/javascript" src="sylvester.js"></script> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jq
Zoomooz is: 6KB gzipped and 18KB minified. This includes everything but jQuery. Make any web page zoom. Download ZIP File Download TAR Ball Fork On GitHub Latest version: 1.1.9 (Nov 11, 2013, hacky fix for the back and forward buttons #66) Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details. Quirky
ãããã«æ»ã ãã£ã¼ã ãµã¤ãº ãã£ã¼ãã®ãµã¤ãºã¯ãchs=<width in pixels>x<height in pixels> ã§æå®ãã¾ãã ãã¨ãã°ãchs=300x200 ã®å ´åã横 300ãã¯ã»ã«ã縦 200 ãã¯ã»ã«ã®ãã£ã¼ããçæããã¾ãã å°å³ä»¥å¤ã®ãã¹ã¦ã®ãã£ã¼ãã®æ大é å㯠300,000 ãã¯ã»ã«ã§ãã横ã¨ç¸¦ã®æ大å¤ã¯1000 ãã¯ã»ã«ãªã®ã§ãæå
1. 概要の理解 jQueryを一切知らない場合はまずは概要の理解から始めます。 ノンプログラマーのためのjQuery入門 http://www.slideshare.net/hayatomizuno/jquery-7665168 はじめてのjQuery http://higashizm.sakura.ne.jp/jquery_first/ 2. 基本的な使い方を理解する サンプルを見ながら具体的なコードを作成し理解を深めます。 40分で覚えるjQuery速修講座 http://ascii.jp/elem/000/000/498/498710/ jQuery基礎文法最速マスター http://blog.webcreativepark.net/2010/02/02-111519.html jQueryサンプル集 http://www.designwalker.com/2008/04/jque
Despite the many JavaScript libraries that are available today, I cannot find one that makes it easy to add keyboard shortcuts(or accelerators) to your javascript app. This is because keyboard shortcuts where only used in JavaScript games - no serious web application used keyboard shortcuts to navigate around its interface. But Google apps like Google Reader and Gmail changed that. So, I have crea
iOS4.2からSafariで加速度センサーを使うことができるようになりました。 モンハンの予約を逃していつ買えるのかとヤキモキしているME課の比留間です、こんにちわ。 さて、つい先日アップデートされたiOS4.2。このアップデートでMobile Safariから加速度センサーをJavaScript経由で利用することができるようになりました。使い方は簡単で、以下のようにするだけで加速度の値を取得することができます。 JavaScriptから加速度センサーにアクセスする window.ondevicemotion = function(event) { //event.accelerationIncludingGravity.x //event.accelerationIncludingGravity.y //event.accelerationIncludingGravity.z } これ
CSSのキャッシュ対策 クロスブラウザ対応の角丸、ボックスシャドウ、不透明 ショートハンドCSS、再利用可能なclass ページ下部に固定表示されるSticky Footer CSS(Reset関連) リセットはHTML5ベースのEric Meyer's Reset Reloaded フォントのノーマライゼーション Webkit系ブラウザのフォントのスムージング フォーススクロールバー ラベルの一列化 クリック可能なインプット要素 スクリーンリーダー対応 IE7のイメージリサイジング 印刷時のスタイル X(HTML) クリーンなコード構造 コンテンツ幅は940px F型レイアウト 古いバージョンのIEからイメージツールバーの削除 最新のIEのレンダリングエンジン jQuey 1.5.2ベース(1.4.4も可) ページ上部へスムーズにスクロール HTML5のプレースホルダー機能 ナビゲーショ
Leafletは軽量で地図操作に最適なJavaScriptライブラリ。 LeafletはJavaScript製のオープンソース・ソフトウェア。かつてWebベースの地図と言えば、画像の上下左右に矢印がついたものばかりだった。それを一変させたのがGoogleマップで、Ajaxによるスムーズな操作を可能にした。 ポップアップ 今やあのUIが当たり前になっている。そして地図以外でも使える場面も増えている。あのようなUIをオープンソースで手に入れたいならばLeafletを使ってみよう。 LeafletはCloudMadeが提供するライブラリで、地図操作に用いることを想定している。マーカー表示やマーカーからのポップアップ、イメージのオーバーレイにも対応する。拡大、縮小する時にはアニメーションしたり、ホイールやダブルクリックでズーム操作もできる。 クリックした場所で表示 マーカーの他にも円や三角形を描く
In January I came across a website that had a whole slew of JavaScript that attempted to prevent you from selecting text, right clicking or dragging any content onto your desktop. I decided to copy the JavaScript and create a library with examples of JavaScript techniques you can use if you want to scare your visitors away, or want to piss them off. Annoying.js is the result. The file itself is co
簡単なものですけど、jQuery Mobile でのマークアップ時によく使うっぽい UIのサンプル作ったので配布します。 簡単なチートシート代わりになるのでは 無いかと思ったのでシェアしてみよう かと。良かったら使ってください。 というのも、JQMの日本語サンプルの配布先を見かけなかったので、なかなかお困りの方もいらっしゃるんじゃないかなと。調べるの面倒ですし、手元にサンプルコードあったほうが何かと便利ですよね。 というわけで、以前マークアップサンプルの記事書いたときに作ったサンプルサイトに手を加えた物を丸ごと配布します。 流石にかなり出てるので今更説明不要かもですけど、ざっくり説明するとWebサイトをスマフォ向けに簡単に出来るjQueryプラグインです。 以下のサンプルで使用しているファイルが丸ごと梱包してあります。 サンプル※別窓 いちおうキャプチャ。 目次 サムネイル付きのサンプルと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く