JavaScript なスライダーライブラリのまとめ
自分用の備忘録としてですが JavaScript なスライダーライブラリのまとめです。 音量の設定とか RGB での色設定とか感覚的な数値を入力させるためのＵＩとしてぴったりなアレです。今流行のページスライダーではありません。一昔前は Flash で作られたライブラリが多かった記憶がありますが、最近では JavaScript でもできちゃいますって感じで様々なライブラリが公開されています。 Javascriptでできているスライダーありませんかね？ の人力検索はてなの情報を大いに参考にさせて頂きました。 基本的な考え方として、見た目は各種パーツの画像を作り込むことでどうにでも変更できます。機能的には有名どころの JavaScript ライブラリを用いていればそれほど不満が出ることも無いかと思うので、現状お使いのライブラリの系列のものを使うとムダにメモリ使用量とかライブラリ同士での汚染とか考
第23回 JavaScriptによるUIの実装：スライダー | gihyo.jp
こんにちは、前回、前々回に引き続き、JavaScriptでUIを実装する方法を紹介していきます。今回は前回のドラッグと関連の深いスライダーを実装してみます。 基本のスライダー スライダーは簡単にいえば動きの制限されたドラッグです。 今回も、最初はなるべくシンプルに実装してみます。まず、基本となるHTMLは次の通りです。 スライダーの基本HTML <form class="js-slider-form" onsubmit="return false;"> <input type="text" name="slider" id="slider1o" value="0"> <div id="slider1" class="js-slider"> <div></div> <input type="button" value=""> </div> </form> 今回は少々手抜きで、input ty
ページをリロードする方法 - JavaScript
ページを<META>タグのrefreshでリロードさせることが出来ますが、これをJavaScriptにより行うことが出来ます。ブラウザの「更新」と同様の効果があります。 ユーザにリロード時間を指定させるような時等に使用すると良いでしょう。
jQueryでAjaxを利用する基本チュートリアル (1/4)
前回の「フォーム」に続き、jQueryの特別な機能を解説します。今回取り上げるのは、「Ajax」を利用するための機能です。 今さら聞けない「Ajax」とは？ 「Ajax」（エイジャックス）は 「Asynchronous JavaScript + XML」の略で、あえて日本語にすれば「JavaScriptとXMLによる非同期通信処理」といった意味です。難しく聞こえますが、JavaScriptでWebページを切り替えずにサーバーとデータをやりとりすることです。JavaScriptでサーバーのデータを取りに行けば、ページを切り替えずに画面の一部を書き換える、といった処理ができるようになります。 WebブラウザーはWebページを表示するために、サーバーからHTML/XHTML（以下、特に断りのない場合はHTMLと書きます）ファイルを取得し、取得したHTMLを解釈して描画（レンダリング）します。通常
E-Maga.com is for sale | HugeDomains
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
JavascriptでGETリクエスト値を取得する - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 JavascriptでGETリクエストパラメータを取得する方法。ポップアップ・ウィンドウに値を渡すとか、処理にワンクッション挟みたい場合に便利。 key1 = Script var qsParm = new Array(); function retrieveGETqs() { var query = window.location.search.substring(1); var parms = query.split('&'); for (var i=0; i<parms.length; i++) { var pos = parms[i].indexOf('=')
location.href=" 文を続けて使用出来ますか？(2)
[上に] [前に] [次に] えいちく [E-Mail] 1999/06/04(金) 10:27:23 以前この質問をしたのですが、アドバイスを頂けませんでしたので、もう一度分かり易い形(?) で再度質問させて頂きたいと思います。 実際にはありえないと思いますが、以下のようにダウンロード操作をループさせる処理を考えます。 <HTML> <HEAD> <TITLE>HREF test</title> <META CONTENT="charset=euc-jp"> <SCRIPT LANGUAGE=JavaScript> <!-- for (i=0; i <= 5; i++) { location.href="test.csv"; } // --> </SCRIPT> </HEAD> <BODY> <B>location.href のループテスト。</B> </BODY> </HTML> とこ
はじめての共同作業 Canvas編 (node.js + websocket)
こんにちは、中川です。 先月無事に結婚をした開発者が一名おり、近年アシアルでは徐々に既婚者が増えてきている状況です。 ということで、結婚といえば共同作業ですよね。 今までは、一人で作業していて大変なことが色々あったと思いますが、 二人（複数）でやれば、乗り越えられることもあることでしょう。 Webアプリでも最近は、より共同作業がしやすい環境ができつつあるように思います。 そこで、今回はWebSocketを使ったリアルタイム通信でのやり取りを行い、 一緒にお絵描きができるサンプルアプリを作ってみました。 ■■■概要■■■ ・アプリ概要 ・・Canvas + WebSocket ・対応ブラウザ ・・Chrome or Safari (他、WebSocketが使えるブラウザ） ・サーバ側プログラム ・・node.js 0.2.0 ・・express@1.0.0rc2 ・・websocket-se
画像をランダムに表示する - JavaScript
サンプルと機能 → Sample 1：画像をランダムに表示する（画像にリンクを貼る場合） → Sample 2：画像をランダムに表示する 画像をランダムに表示します。 画像にリンクを貼ることで、ランダムバナーを作ることもできます。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 → Sample 1：画像をランダムに表示する（画像にリンクを貼る場合） <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY bgcolor="#ffffff"> <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する jmp = new Array(); img
JavaScript: マウスストーカー
マウスカーソルに着いて来るように画像を表示します。 仕組みはJavaScriptでマウスカーソルが移動する度にイベントからその位置を 受け取り、画像の位置を移動させます。 スクリプトは次のようになります。ページが読み込まれた後に実行されますが、 特に問題無ければhead内に置くと良いでしょう。このスクリプトの画像URLの部分に マウスストーカーとして使用する画像を指定するだけで動作します。 <script type="text/javascript"><!-- // Mouse stalker. // (C)2007 Amenti. http://amenti.usamimi.info/ // 2007/07/28 release. // Terms of use: Keep to copyright. No claim. No support. if (window.addEventLi
JavaScript sample - 画像横移動
<HTML> <HEAD> <TITLE>JavaScript サンプル</TITLE> <SCRIPT type="text/JavaScript"> <!-- imgLeftStart = 250; imgLeftEnd = 350; imgLeft = imgLeftStart; imgTop = 300; moveStep = 5; moveSpeed = 100; function moveImgX(){ document.getElementById("img1").style.top = imgTop; document.getElementById("img1").style.left = imgLeft; if(imgLeftEnd-imgLeftStart > 0){ imgLeft += moveStep; if(imgLeft > i
Firefox3のnightlyでサポートされたJSON.parseとJSON.stringify - 素人がプログラミングを勉強していたブログ
JSON.parseとJSON.stringifyがサポートされた。 これは、JSON in JavaScriptのネイティブ実装と言える。 これからWebサイトでJSONを使う時は、 <head> <script type="text/javascript"> if (typeof JSON != "object") document.write('<script type="text/javascript" src="http://www.json.org/json2.js"></script>'); // 実際にはローカルに落したものを使う </script> <script type="text/javascript"> // JSON.parseやJSON.stringifyを使う処理 </script> </head> とすると、クロスブラウザで、なおかつ最新のブラウザだとネイ
ROSS / select要素の重複チェック
Friday, Feb 24, 2006 - 02:30 +09:00 仕事で作った簡単JSそのに。select要素からｖａｌｕｅ属性を取り出して、重複している値があれば警告を出すスクリプト。プルダウン・メニューによる複数選択時に、同じ項目を選ばせたくない時などに使う。 項目を選択 No.1 No.2 No.3 No.4 No.5 Script <script type="text/javascript"> <!-- function checkSelect(n) { var No1 = n.no1.options[n.no1.options.selectedIndex].value; var No2 = n.no2.options[n.no2.options.selectedIndex].value; var No3 = n.no3.options[n.no3.options.selec
ウノウラボ Unoh Labs: JavaScriptを使わないスターレイティングの作り方
こんにちわ、山下です。 Amazonなどで使われているような商品を☆の数で評価するスターレイティングというものがあります。今回は、CSS The Star Matrix Pre-loadedに紹介されている記事を参考に、その作り方を簡単に紹介しようと思います。 1.画像を用意する まず次のような1枚の画像を用意します。16×16ピクセルの☆が、横に5個、縦に11個並んでいて、下に向かうに従って色の付いている☆の数が増えているのがポイントです。 2.HTMLを書く HTMLはとてもシンプルで、ULリストを使います。 <ul class="rating onestar"> <li class="one"><a href="#" title="1 Star">1</a></li> <li class="two"><a href="#" title="2 Stars">2</a></li> <l
prototype.js を使ったスターレイティング（JavaScript 星評価）
YouTube や Amazon、livedoor Reader でコンテンツの評価に使われているスターレイティングを prototype.js を使って割と汎用的に実装してみました。 http://www.masugadesign.com/the-lab/scripts/unobtrusive-ajax-star-rating-bar/ などには高機能なライブラリがあるようですが、とっつきにくいので自作しました。順を追って説明していきます。 準備と前提条件： prototype.js（今回は ver1.6）を使用します。 http://prototypejs.org/ からソースをダウンロードしておきましょう。5段階の星を表現するために、未選択のものを含めて 6つの画像が必要です。私は http://iconlet.com/ から素材を入手してペイントで加工しました。（サンプル：、使った
一つのフォームでボタンにより別々のactionを実行するには - OKWAVE
JavaScriptを使ってこんな感じでどうでしょうか ※もっとスマートなやり方もあるかも知れませんがとりあえず出来ると言うことで… <html><body> <script type="text/javascript"> <!-- function func(x) { if(x==1){ document.F1.action="cgi1.cgi"; } if(x==2){ document.F1.action="cgi2.cgi"; } document.F1.submit(); } // --> </script> <form name="F1" action="#"> <input type="text" name="T1" value="100"> <input type="button" value="cgi1" onclick="func(1)"> <input type="b
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
一定時間ごと処理を行う
canvasで↑↓←→ボタンで組み込み画像の移動 - jsdo.it - Share JavaScript, HTML5 and CSS
JSON/簡単なテスト:基本
http://html-time.com/java/event_handle.htm