カテゴリー : JavaScript

[jQuery] 外部サイトへのリンクを別ウィンドウで開く方法

jQuery で外部サイトへのリンクを別ウィンドウで開く方法をご紹介します。

jQuery

続きを読む

[jQuery] グルーポン系サイトでよく見掛けるカウントダウンタイマーのサンプルコード

jQueryで、グルーポン系サイトでよく見掛けるカウントダウンタイマーを実装しようと、プラグインを探していたのですが、百式さんのライフハックにプラグイン無しでも簡単に実装できそうだったので、一部書き換えてご紹介します。

・元ネタ:グルーポン系サイトでよく見られる「終了まで○時間○分○秒」をjQueryで実装してみる | IDEA*IDEA

■ 元のコード

<script type="text/javascript">
$(function() {
  countDown();
});
function countDown() {
var target = new Date("August 26,2010 11:00:00");
var today = new Date();
var h = Math.floor(((target-today)%(24*60*60*1000))/(60*60*1000))
var m = Math.floor(((target-today)%(24*60*60*1000))/(60*1000))%60
var s = Math.floor(((target-today)%(24*60*60*1000))/1000)%60%60
$("#TimeLeft").text(h+'時間'+m+'分'+s+'秒');
  setTimeout('countDown()', 1000);
}
</script>

■ カスタマイズ(日/時/分/秒 表記)

<script type="text/javascript">
  $(function() {
    countDown();
    });
    function countDown() {
    var startDateTime = new Date();
    var endDateTime = new Date("November 26,2011 11:00:00");
    var d = Math.floor((endDateTime-startDateTime)/(24*60*60*1000))
    var h = Math.floor(((endDateTime-startDateTime)%(24*60*60*1000))/(60*60*1000))
    var m = Math.floor(((endDateTime-startDateTime)%(24*60*60*1000))/(60*1000))%60
    var s = Math.floor(((endDateTime-startDateTime)%(24*60*60*1000))/1000)%60%60
    $("#TimeLeft").text(d+'日'+h+'時間'+m+'分'+s+'秒');
      setTimeout('countDown()', 1000);
    }
</script>

以上です。
 

■ カウントダウンタイマーを実装する方法の紹介記事

その他、JavaScript/jQuery で、カウントダウンタイマーの実装について書いてある記事。

jQuery Countdown

jQuery Countdown を使ってカウントダウンタイマーを表示する | バシャログ。

jQueryで時間をカウントダウンするJavaScript「jCountr」|skuare.net


参考情報

getTime – JavaScriptリファレンス:ITpro

JavaScript による日付・時刻・時間の計算・演算のまとめ – hoge256ブログ

[Rails3.0] scaffoldで出力される削除(Destroy)リンクが動作しないときは、jquery_ujs.js or rails.js が読み込まれているか確認する

Rails3.0にて、scaffoldで出力される削除リンク(Destroy)が動作しないときは、jquery_ujs.js or rails.js が読み込まれているか確認します。

※ 削除リンク(Destroy)は上記の部分です

prototype.jsを使用しなくて、jQueryを使う場合、削除リンクはこのままでは動作しません。

動作させるためには、jquery_ujs.js(rails.js)を読み込む必要があります。

<%= link_to 'Destroy', test_model, :confirm => 'Are you sure?', :method => :delete %>

僕の場合、jquery_ujs.js の役割を確認せずに削除していたのが原因でした。

ちなみに、jquery_ujs.js は Rails3.0 で jQuery を使う設定をするときに一緒に作成されます。

Rails3.0のjQuery対応手順

まず、Gemfileに以下のような記述を追加して、bundleします。

gem 'jquery-rails''

ジェネレータを実行して、不要なファイルの削除と必要なファイルの生成を行います。

$ rails g jquery:install

このジェネレータによって、prototype.js関連の以下のファイルが削除され、

public/javascripts/prototype.js
public/javascripts/effects.js
public/javascripts/dragdrop.js
public/javascripts/controls.js

jQuery関連の以下のファイルが生成されます(jquery-rails 1.0.2の場合はjQuery 1.6がインストールされます)。

public/javascripts/jquery.js
public/javascripts/jquery.min.js
public/javascripts/jquery_ujs.js(各種ヘルパーで生成した要素にイベントハンドラを設定したりするもの。かつてのrails.js)

・引用元:Rails 3.1ではjQueryが標準になるそうなので、すぐに要らない知識になるかもしれませんが、Rails 3.0でのjquery-ra… – Sooey はてなブックマーク - Rails 3.1ではjQueryが標準になるそうなので、すぐに要らない知識になるかもしれませんが、Rails 3.0でのjquery-ra... - Sooey

引用元記事のタイトルにあるように、Rails 3.1ではjQueryが標準になるので、ハマる人はあまりいないと思いますが参考になれば幸いです。

【参考】

rails/jquery-ujs – GitHub はてなブックマーク - rails/jquery-ujs - GitHub

Rails3にjQueryを導入する – ちょりぽんのふがふが日記 はてなブックマーク - Rails3にjQueryを導入する - ちょりぽんのふがふが日記

[PHP][JavaScript] urlencode と encodeURI でのエンコードと文字化け問題

 

PHP と JavaScript でエンコードするタイミングによりIEで文字化け問題が発生しました。
 

解決方法としては、PHP側でエンコードしてJavaScript側に渡さないようにして、PHP側からはそのまま値を渡してJavaScript側でエンコードすればOKでした。
 

■ 文字化け問題が発生するパターン
 

[PHP]

コントローラで urlencode して、テンプレートに出力する。

1
2
$url = urlencode('http://example.com/?p=2&keyword=テスト');
$smarty->assign('url', $url);


 

[HTML]

1
<a href="javascript:formsubmitt('http://example.com/?p=2&keyword=%E3%83%86%E3%82%B9%E3%83%88');">次へ</a>


 

[JavaScript]

1
2
3
4
function formsubmitt (action_url) {
    form.action = action_url;
    form.submit();
}

 

■ IEでも正常に処理できるパターン
 

[PHP]

コントローラでエンコードせずに、そのままテンプレートに渡す。

1
2
$url = 'http://example.com/?p=2&keyword=テスト';
$smarty->assign('url', $url);


 

[HTML]

1
<a href="javascript:formsubmitt('http://example.com/?p=2&keyword=テスト');">次へ</a>


 

[JavaScript]

1
2
3
4
function formsubmitt (action_url) {
    form.action = encodeURI(action_url);
    form.submit();
}

 

以上です。
 

【参考】

javascript: escape(), encodeURI(), encodeURIComponent() 比較 (groundwalker.com) はてなブックマーク - javascript: escape(), encodeURI(), encodeURIComponent() 比較 (groundwalker.com)

URL(URI)エンコード・デコードを行う – JavaScript TIPSふぁくとりー はてなブックマーク - URL(URI)エンコード・デコードを行う - JavaScript TIPSふぁくとりー

PHP: urlencode – Manual はてなブックマーク - PHP: urlencode - Manual
 

JavaScript と jQuery で form (フォーム) の action (アクション) を変更する方法

JavaScript と jQuery で form の action を変更する方法をそれぞれご紹介します。

JavaScript

続きを読む

[JavaScript][jQuery] DOM Elementを取得する方法

 

jQueryで DOM Elementを取得する方法を調べたのでメモ。
 

以下のJavaScriptコードとjQueryコードは同じ結果を返します。
 

■ JavaScript

1
document.getElementById('contents');

■ jQuery

1
jQuery('#contents').get(0);

 

以上です。
 

【参考】

jQueryからDOM Elementを取得 – ゆっくり*ゆっくり はてなブックマーク - jQueryからDOM Elementを取得 - ゆっくり*ゆっくり
 

[JavaScript] a href=”” onclick の使い方

onclickの使い方を調べていたら「href=”#” onclick の悪習」という記事を見つけたのでご紹介します。

JavaScript

続きを読む

[Facebookアプリ] JavaScript SDK は必ず https で利用すべし

 

Facebookアプリにて、JavaScript SDK を使う場合は、SSLで利用しないとIEで上手く動作しないなどのバグが発生してしまいます。
 

JavaScript SDKを利用するには、ほとんど Facebook Connect はSSLでも利用できるので、今まで

1
<script src="http://connect.facebook.net/en_US/all.js"></script>

としていたのなら

1
<script src="https://connect.facebook.net/en_US/all.js"></script>

に置き換えるだけでOKです。
 

httpsのページに部分的にセキュアでない接続が混在しているとブラウザ(特にIE)によっては正常に動作しないので注意が必要です。
 

【参考】

JavaScript SDK – Facebook Developers はてなブックマーク - JavaScript SDK - Facebook Developers
 

[JS] jQueryが読み込まれているか確認する方法

 

jQueryが読み込まれているか確認する方法を調べたのでメモ。
 

jQueryを使い始めたばかりだと「$が定義されてません」というエラー「$ is not defined」がよく発生します。
 

以下のコードではtypeof演算子で jQuery が定義されているか確認して、定義されている場合はアラートを表示させています。
 

1
2
3
4
5
if(typeof jQuery != "undefined"){ //jQueryの読み込み確認
    $(function(){
        alert('jQuery is ready.')
    });
}

 

以上です。
 

【参考】

jQueryが読み込まれているか判別する方法 – 小窓屋めがね はてなブックマーク - jQueryが読み込まれているか判別する方法 - 小窓屋めがね

typeof演算子 – 演算子 – JavaScript入門 はてなブックマーク - typeof演算子 - 演算子 - JavaScript入門
 

iframe 内から jQuery UI Dialog を閉じる方法

jQuery UI で iframe 内から Dialog (ダイアログ) を閉じる方法をご紹介します。

jQuery

続きを読む