配列の重複をはじく、もしくは重複を取り出す - Qiita
var a = [1,2,3,3,2,2,5]; // 重複を削除したリスト var b = a.filter(function (x, i, self) { return self.indexOf(x) === i; }); // 重複のみをリスト var c = a.filter(function (x, i, self) { return self.indexOf(x) !== self.lastIndexOf(x); }); // 重複を検出したものを重複しないでリスト var d = a.filter(function (x, i, self) { return self.indexOf(x) === i && i !== self.lastIndexOf(x); }); console.log(a); // [ 1, 2, 3, 3, 2, 2, 5 ] console.log
［み］Instagram APIを使ってタグで絞った画像を表示する方法
あれだけ苦戦したInstagramのAPIですが、ものすごくカンタンに利用できるプラグインがありました。しかも、このプラグインは、タグを指定することができます。ググり方が悪かったんですかね？昨日検索したときには出てこなかったんですが… Instagram APIを使ってタグで絞った画像を表示する方法 では、さっそくタグで絞った画像を表示する方法を紹介します。まずは、InstagramのクライアントID（CLIENT ID）を取得するのに、開発者登録をしてください。 Instagram Developer Documentation 次に、jQueryのプラグインをダウンロードします。 potomak/jquery-instagram @ GitHub これで、準備完了です。次は、コードです。 JavaScript [cc lang=”JavaScript”] [/cc] HTML [cc
jQueryでマウス座標を取得 | Typhooon
jQueryのイベントハンドラはコールバック関数の最初の引数にイベントオブジェクトを渡します。イベントオブジェクトの clientX プロパティと clientY プロパティによってマウスカーソルの位置を取得することができます。 イベントオブジェクトを操作するために関数にイベントオブジェクトを渡すためには、次のように引数にイベントを指定します。 [javascript] function(e){ // } [/javascript] 例えば、イベントオブジェクトの target プロパティはイベントを発行した DOM 要素への参照を返します。 次のコードは、イベントが発生しているオブジェクトを取得して DOM 要素のID 名（ #contents ）を表示させます。 [javascript] $(document).click(function(e) { var ele = $(e.tar
[JS]jQueryのプラグイン100選 -2012年総集編
2012年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年目立ったのは、やはりレスポンシブ、そしてCSS3アニメーションでしょうか。 スライダーやギャラリー系もレスポンシブ・アニメーション対応、ナビゲーションやPinterst風のレイアウトなど、多くのプラグインにそれら二つの要素が組み合わさっています。 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 ナビゲーション関連 レイアウト関連 レスポンシブ関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
CodeKitで簡単にCSS Preprocessorを利用する！
CodeKitで簡単にCSS Preprocessorを利用する！ 本エントリーはCSS Preprocessor Advent Calendar 2012の12日目のエントリーです。 CSS Preprocessor Advent Calendar 2012とは年末の12/1〜12/25まで、みんながブログなどでCSS Preprocessorについて熱く語るというイベント、僕は2012年一番重宝したMacアプリ「CodeKit」について解説します。 そもそもCSS Preprocessorってなに? CSS PreprocessorはSassやLess、StylusといったいわゆるCSSメタ言語のこと。CSSメタ言語とはCSSと異なる文法でCSSを記述できる言語です。 たとえば、通常のCSSでは #bar{ width:100%; } #bar .foo{ color:red; } #
EPIGRAM DESIGN - BLOG スムーススクロールの導入(パララックス効果のIEでの表示解決) : グラフィックデザイン・WEBサイト制作(ホームページ制作)・その他デザイン
EPIGRAM DESIGN WORKS BLOG スムーススクロールの導入(パララックス効果のIEでの表示解決) : グラフィックデザイン・WEBサイト制作(ホームページ制作)・その他デザイン前回 パララックス効果の導入したのですが どうもIEでスクロールホイールを回した時にカクカクしてたのが気になってたのですが いい感じの解決法を発見 ホイールを回した時にはカクカクするんですが アンカーリンクをスムースに移動するプラグインで アンカーリンク移動した時にはスムースな表示がされるので 要はホイールを回した時の動作をjqueryでのスムースに移動するのと 置き換えたらいいんじゃないかと思ったわけです。 んで下記のjQueryのプラグインを見つけました。 ホイールを回した時にスムース移動できるjQueryプラグインです。 Nicescroll 設置は簡単 上記のサイトからj
jQueryでフォームの入力チェック | kizukiウェブスクール川越校5階
ウェブ制作において、jQueryが最も使用される機会が多いのが、フォームのバリデーションチェック機能。 バリデーションチェックとは、メールアドレスなら「xxx@xx.xx」という入力形式になっているか？必須項目はちゃんと記入されているか？を確認し、もし誤りがあればそれを閲覧者に知らせる機能のこと。 jquery-form-validatorを使った入力チェック Position-absolute「jquery-form-validator」 フォームの入力事項をチェックするバリデーション用プラグインは数あれど、このjquery-form-validatorは多機能な上に、設定が非常にわかりやすいのでおすすめ。 ちなみに導入例のデモはこちら。 確認してもらえば分かるとおり、送信ボタンを押すタイミングだけではなく、項目を入力して（あるいは入力しないで）フォーカスが移るタイミングでもバリデーショ
jQuery：afterでDOM要素を移動する ビジネスマンの徹底パソコン奮闘サイト
2011-03-16： 目次を作成しました。 2010-09-17： Google Map 2 記事一覧を作成しました。 2010-07-03： Google Map 3 記事一覧を作成しました。 jQueryのafterを使用してDOM要素を移動してみます。 下記のリンクをクリックすると、 「Hello world!!」 が 「world!! hello」 となります。 afterで要素を移動する Helloworld!! コードは下記の通りです。 <!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"> <head>
Textbox｜formオブジェクト｜JavaScript/DOM｜PHP & JavaScript Room
<script type="text/javascript"> /** * [関数名] getValue * [機 能] 入力値を取得 * [説 明] 指定されたエレメント名の入力値を取得する * [引 数] @param elm_name string エレメント名 */ function getValue(elm_name){ var frm = document.form1; if(frm.elements[elm_name].value != ""){ alert(frm.elements[elm_name].value); }else{ alert("何も入力されていません"); } } </script> <form name="form1" action="#"> <input type="text" name="box" /> <input type="button" va
Adobe HTML5 特設サイト Dreamweaver® CS5.5 と HTML5 で始めようスマートフォン＆タブレット対応| Adobe - 日本
戻る 試してみよう Dreamweaver CS5.5：jQueryとCSSを使って、クロスフェードを実現しよう 今回は、jQuery と CSS を使ってごく簡単なクロスフェード効果を実装する方法をご紹介します。Dreamweaver CS 5.5 の CSS パネルを使うとアニメーションも簡単に設定できます。制作するのは写真ギャラリーです。 それでは実際に必要なコードの編集を行います。サンプルコードをダウンロードして、その中に含まれる index.html ファイルを Dreamweaver CS 5.5 で開いてみましょう。 →サンプルコードのダウンロード クロスフェードによる画像の切り替え jQuery だけでもフェードの効果を実装することは可能です。ところが、それだとスマートフォン上ではあまり滑らかに動きません。滑らかなフェードを実現して画像の切り替えをするために、画像切り替え時
zflickjs by funnythingz
zflickjs v2.1 iOS, Androidなどのwebkitベースで提供するサービスではjQueryなどのライブラリを使わず、pureなJavaScriptで実装した方がパフォーマンス良いんじゃないかと思って作ってみた Updated of Lists lampクリックでカレント切り替えできるようにしたお Demo Demoをみる Getting Started タグ内にzflick.cssとzflick-2.1.min.jsを読み込む。 HTML HTMLを組む。基本的にJSで動かす要素はID指定になっている。 JS new zflickjs({})で初期化 Options width: number 280 ... width move autoChange: boolean true ... "true" auto move element, "false" don't m
JavaScriptでフリックとピンチ | NOTE | kazy.jp
iPhoneサイトのモックアップ用にフリックとピンチのJSを作ったのでメモ。 かなり急いで作ったからスパゲッティになってしまった。 写真を見せるギャラリーサイトを想定。 フリックで別の写真へ移動し、ピンチで拡大する。 ※別途YUIライブラリ ver:3.0.0が必要です JavaScript document.onscroll = function(){ if(window.pageXOffset > 5)scrollTo(0,1); } YUI().use('anim', function(Y) { //アニメーションインスタンス生成 var collectionAnim = new Y.Anim({ node: '#collection', duration: 1, easing: Y.Easing.easeOut }); //イベント登録 var colectionLoaded =
オブジェクトの操作その３（HTML 要素内・外に対する挿入・追加） - awacio.log
今度は指定したセレクターの要素内、外に対する挿入、追加操作について。 これも簡単だなぁ〜。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("#div1").prepend("<span style='color: red'>要素内の前に挿入</span>"); $("#div2").append("<span style='color: blue'>要素内の後に追加</span>"); $("#div3").before(
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptでIEかどうかの判別 - シンプルシンプルデザイン JavaScript
SSSSLIDE
【jQuery】チェックボックスのcheckedの値の違い | かむかむノート
mubk
BEMO ｜ 【スマートフォン】labelタグが効かない時の対処法
無効なURLです
「教えて！Ziddyちゃん」サービス終了およびサービス移行のご案内