ページを移動（離脱）するときにjQueryで警告を出す方法
Facebookなどでフォーム入力中にページを移動（離脱）しようとすると警告が表示されます。 この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。 １．ページを移動するときに警告を出す ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $(window).on('beforeunload', function() { return '投稿が完了していません。このまま移動しますか？'; }); }); </script> <form method="post" acti
[JS]派手な演出は無し！レスポンシブ対応のレイアウトを素早く構築するスクリプト -jquery.columns
サイズを変更するとアニメーションでパネルが移動するなどの派手な演出は一切無しで、レスポンシブ対応のレイアウトを素早く提供するjQueryのプラグインを紹介します。 jquery.columns -GitHub jquery.columnsのデモ jquery.columnsの使い方 jquery.columnsのデモ 対応ブラウザは、IE9/10, Firefox, Chrome, Safari, Operaです。 まずは、デスクトップサイズとして幅1,200pxでの表示から。 デモページ：幅480pxで表示 jquery.columnsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
jQuery で HTTP 接続するときの書き方: Days on the Moon
12 月 13 日に Kyoto.js の第 3 回 meetup で、「jQuery で HTTP 接続するときの書き方」と題した 5 分間のライトニングトークを行いました。以下にその内容を一部再構成して収録します。 こんにちは、nanto_vi です。今日は jQuery で HTTP 接続をするときの書き方について話します。 皆さん jQuery を使うことも多いかと思います。jQuery で HTTP 接続をするとき、古いサンプルだと次のような書き方が載っています。 $.ajax({ url: '/foo/bar', data: { baz: 'qux' }, success: function (data) { console.log(data); }, }); 接続完了時の処理をコールバック関数として $.ajax() に渡してやる形ですね。しかし、現在この書き方は非推奨となっ
積極的に取り入れたい9つのCSS3（+jQuery）テクニック
CSS3（+jQuery）を使った、ちょっといいかも！と思うエフェクトを集めてみました。 まだまだ非対応ブラウザが多い CSS3 ですが、できるだけ積極的に使ってみたいなーとも思ってます。 まずはいろいろ試してみることからはじめてみましょう！ CSS3 の登場で、いろんな CSS のトリックを使ったエフェクトが考えられてます。まだまだ CSS3 に非対応のブラウザも多いので、全てを CSS3 で表現する訳にはいかないのが現状ですが、私的には積極的にどんどん取り入れていきたいなーとも思ってます。 海外ブログなどで、色んな CSS3 を使った Tips が紹介されているので、その中からいくつかご紹介します。どれもサンプルを作って試してみたものばかりです。以下の環境で動作確認もしています。 Mac : firefox、Safari、Chrome Win : firefox、IE8、Safari、
jQueryを使ってiframe要素の中身にアクセスする | バシャログ。
残暑の蒸し暑さから、涼しさを通り越して、寒いと感じる今日この頃、tanakaです。 今日はjQueryでiframe要素の中にアクセスして、情報を取得したり、改変したりする方法を紹介します。 jQueryは、Webページに対するアクセスを簡潔に表現できるライブラリですが、iframe内の文書にまで、 $('div iframe p') といった感じでアクセスすることはできません。ドキュメントが違うからでしょうか？正しい理由はわかりませんが、同時に2つのページをまたいで処理するのは混乱しそうなのでこれはこれでいいと思います。で、そういったときにアクセスする方法があるのでご紹介します。 [追記 2010/09/27]注意点として、親フレームとiframe内ドキュメントのドメインが異なる場合はアクセスできません。 iframe内のドキュメントにアクセスするにはcontents() $(...).
jQueryでiPhone/iPadの向きを検出する[to-R]
jQueryでiPhone/iPadの向きを検出する iPhone/iPadで向きの概念が存在し、横向き(landscape)と縦向き(portrait)によって幅が変わるのでデザインやスクリプトを変更することがあります。 そういった場合に利用できるのがメディアクエリーのorientationです。 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> このように記述をすると縦向き(portrait)の場合はportrait.cssを横向き(landscape)の場合はlandscape.cssを読み込むことが出
![jQueryでiPhone/iPadの向きを検出する[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/1788fe5c4e0abeec501baa392c032db6a3514abe/height=288;version=1;width=512/http%3A%2F%2Fblog.webcreativepark.net%2Fimages%2F20100817_01.jpg)
Tweet数も表示できる「bit.lyボタン」なるものがあったのですね・・・
見かけた事無かったので個人的に メモ。TweetMemeのようなTwitter でのそのページのTweet数を表示 するボタンのbit.ly版のようなものが あったんですね。 かなりメジャーな短縮URLサービスのbit.lyですが、そのbit.lyを使用出来るTwitter投稿ボタンがありました。jQueryを使うみたいです。 ※多分bit.ly公式のボタンじゃないです bitly-button ちょっと他では見ないのでインパクトあるかな・・・いや、別に無いかｗ jQueryを使ってるみたいです。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="h
jQueryとPHPを使ったモダンなユーザ管理機能実装デモ:phpspot開発日誌
jQuery & PHP Powered User Manager BitsNTuts.Com jQuery | CSS | PHP | MySQL Tutorials & Articles jQueryとPHPを使ったモダンなユーザ管理機能実装デモ。 ユーザ登録、ログインといった機能は画面遷移するのが通常ですが、jQueryを使い画面遷移なしのモダンなログイン機能・ユーザ登録を実現するためのコードです。 デモということでそのまま本番プログラムとして使う場合にはチェックはした方がよいですが、ダウンロードして使うことが出来ます。 ページヘッダーに表示されるログインのタブ クリックするとニョキっと表示され、そのままログイン。 「Not Registerd?〜」の部分を押すと登録画面がLightBox風に表示されます。 ユーザデータがMySQLに保存される部分までのPHPコードも同梱されており、
[JS]ドラッグで操作するコントローラーのデザインを強化するスクリプト -jQuery Skin
jQuery Skin デモページ [ad#ad-2] デモでは下記のように多種多様なコントローラーが実装されており、いくつかのコントローラーは互いに連動して動作します。 デモページ ※クリックで拡大 対応ブラウザはFirefox, Chrome, Safari, Operaで、IE6ではうまく動作しないでしょう、とのことです。 IE7で試したところ、いまいちでした。 jQuery SkinはjQueryのプラグインのため、実装にはjquery.jsが必要です。
Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」:phpspot開発日誌
jGmaps | jQuery Plugins Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 必要なライブラリを読み込んで、次のようにjgmapsメソッドを呼び出すとGoogleマップによる経路案内の地図と文字による案内情報が出ます。 $('#mapa').jgmaps( { width: 300, height: 300, directions:{ address: ['東京都新宿区', '東京都港区'], usePanel: true, panelId: 'panelDirections' } } ); 次のように、経路が地図に表示されます。 文字による案内情報も表示できます。 会社案内や会場案内なんかもこれで速攻実装できそうですね。 ダウンロードできるサンプルをいじくってみましょう。 地名に日本の場所を漢字で使う場合、文字コードはUTF-
『CSSのidなんかなくなっちゃえよー＾＾＾』に対するWEB屋、システム屋さんの反応
みゃみゅ玉子🐣 @myamyu @yuko985 idは、cssのためにあるわけではなく、Documentのなかで唯一のモノを表すためのものなので、cssだけ考えたらclassで全然オッケーかと思います。でも、jsでなにかするときには欲しい。。。 2010-10-05 10:46:28 アライユウコ @yuko985 @pomu0325 普段使いの用途だとページ内リンクくらいしか思いつかない・・・それだって代替のやりようがあるしな、とか思っちゃうとアレなんです。他に、『idがないとサイト制作やってらんねーーー』みたいなのってあるのかなあ。idがなくて死にそうな場面が思いつかない 2010-10-05 10:47:26
長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。:phpspot開発日誌
長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。 2010年09月30日- jQuery One Page Navigation Plugin | Trevor Davis 長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。 このプラグインを使うと、次のように左カラムにページ番号のように表示して、今どこら辺か？というのを分かりやすく表示し、かつ1ページなのに複数ページに分割することが可能。 使いどころは様々ですが、使い方次第で簡単にページの使い勝手を高めることができそうです。 ナビゲーションをクリックすると、指定したページの位置にアニメーションしながらスクロールされます。 更に、単純にスクロールしているだけで、左カ
Twitter関連のjQueryプラグイン｜Twitter関連｜Web関連特集｜PHP & JavaScript Room
PHP、JavaScript、Ajax、HTML/XHTML、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説A jQuery Twitter Ticker 〔TLをティッカー表示〕 Adding Twitter to your site with jQuery Part 2 〔指定したユーザーのタイムラインを取得して表示するjQueryプラグイン〕 Display your latest Twitter update with jQuery 〔あなたの最新のつぶやき1件を取得して表示するjQueryプラグイン〕 How To Create A Twitter jQuery Plugin 〔Twitter jQueryプラグインの作り方〕 jqtwitter 〔指定したユーザーのつぶやきを表示するjQueryプラグイン〕 jQuery –
「○○氏の声」を次々と表示できるjQueryプラグイン「Quovolver」:phpspot開発日誌
Quovolver | a simple jQuery plugin for revolving quotes 「○○氏の声」を次々と表示できるjQueryプラグイン「Quovolver」。 「これは素晴らしい！革命的である」- by. phpspot みたいなものをアニメーションしながら次々表示できるjQueryプラグインです。 商品の説明ページなんかに利用者や著名人の声などとして表示する際に使えそうです。 アニメーションしながら切り替わります。 使い方は、必要なJSを読み込んだ後、要素を複数並べておきます。 例えば次のように。 <blockquote>aaa</blockquote> <blockquote>bbb</blockquote> あとは、$('blockquote').quovolver() のようにするだけです。 関連エントリ 通貨、日付のグローバリゼーションを可能にする
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://jsrun.it/GeckoTang/9SnW
http://blog.net-king.com/2010/10/06/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AB%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%99%E3%82%8B%E3%81%A8%E3%83%A1%E3%82%A4%E3%83%B3%E7%94%BB%E5%83%8F%E3%81%8C%E5%88%87/
画像の上に落書きできるjQueryプラグイン「jQuery-Notes」:phpspot開発日誌
IDEA * IDEA
jQuery UIのインタラクションを使ってみよう
