運営サイト/オリジナルCMS   |   ダウンロードランキング   |   お問い合わせ

PR

ログインシステム制作パック(格安の9,800円!)

ログインシステム制作パック(格安の9,800円!)

SNS や 会員制サイト の構築に利用された実績のある 「ログインシステム」 を、システム単体としてパッケージ化しました。
運営中や、新規制作のホームページ に 簡単にログイン機能 をつけることができます。

スマートフォンで、ヘッダーとフッターを固定

スマートフォンサイトで、ヘッダーとフッターは固定真ん中のコンテンツだけスクロールさせたい場合に便利なスクリプトです。

iScroll
http://html5-css3.jp/smartphone/iphone-android-position-fixed-iscroll-js.html

Filed under: iPhone,JavaScript,スマートフォン — admin 22:32  Comments (0)

スマートフォンサイトで「縦」「横」のイベントを取得

スマートフォンサイトを作る際、スマートフォンの角度(縦や横)に合わせて画面を調整する場合があります。

そんなときに参考になるサイトを掲載しときます。

↓横向き、縦向きで画面表示を調整する。
http://ameblo.jp/e-verystudy/entry-10301716936.html

Filed under: iPhone,JavaScript,スマートフォン — admin 22:26  Comments (0)

スマートフォンでiframeを使いたい場合

スマートフォン(iPhone/Android)用サイトでは、iframeの挙動が違ってきます。

■iPhoneでは
iframeは表示できるが、2本指でないとスクロールできない(使いづらい)

■Androidでは
iframeは表示できるが、スクロールできない。

ということで、実質 iframe は使えないことになります。

しかし、やっぱり iframe のように、ページ内でスクロールさせたいという場合があると思います。

そんなときには、jQuery.flickable が便利です。

http://lagoscript.org/jquery/flickable

Filed under: iPhone,JavaScript,スマートフォン — admin 22:17  Comments (0)

スレイプニルで <a href=”javascript:;” … > 動かない

<a href=”javascript:;” onclick=”function()”>  や

<a href=”javascript:void();” onclick=”function()”> など、

aタグクリック時に JavaScript を実行させようとすると、何故か sleipnir(スレイプニル)だけ動かない。

原因は、以下のサイトに書いてありました。

http://community.tabbrowser.jp/forum/viewtopic.php?p=15889

対策としては、以下の3つが紹介されています。

1. リンクをダブルクリックする
2. Shift キー または Ctrl キー を押しながらリンクをクリックする
3. href=”javascript:void(0);” の部分を href=”#” に書き換える

しかし、現実的な対処としては、3番になるのではないかと思います。

Filed under: JavaScript,忘れっぽいのでメモる — admin 12:42  Comments (0)

iPhoneやAndroid用JavaScript

iPhoneAndroid など、スマートフォン用の JavaScript Wink Toolkitについて紹介しているサイトがありました。

▼iPhoneやAndroid向けのJavaScriptフレームワーク・Wink Toolkit
http://kachibito.net/software/wink-toolkit.html
http://www.winktoolkit.org/

以下、Android 公式エミュレーターでも動きました。

iPhoneについては未確認ですが、おそらく大丈夫でしょう。

▼Android 公式エミュレーター
http://www.lifehacker.jp/2010/08/100810android_os.html
http://ke-tai.org/blog/2010/08/20/androidemu/

参考になったら、ランキングにご協力ください。m(_ _)m

javascript formの配列、パラメタでform指定

javascript でformの配列や、formの名称を外部パラメタで指定する方法

なかなか覚えられないので、メモしときます。

「はてなクエスチョン」に、良いネタがありました。

↓はてな
http://q.hatena.ne.jp/1161461052


参考になったら、ランキングにご協力ください。m(_ _)m

JavaScriptで折れ線グラフ(HTML5)

JavaScript HTML5<canvas>タグを使って、簡単に折れ線グラフが描ける方法が、このサイトに掲載されていました。

HTML5.JP
折れ線グラフ

今、急速にクラウド環境が広がっています。

グーグルからも chrome OS 搭載のパソコンが出てきます。

ブラウザにPCアプリなみの機能が要求される場面が増えてきますので、HTML5の技術やAjax(JavaScript)の技術は必須になると予想されます。

すごい勉強になるサイトです。

w30

参考になったら、ランキングにご協力ください。m(_ _)m

aタグ(アンカーテキスト)でPOSTする方法

aタグ(アンカーテキスト)でPOSTを実行する方法です。


↓↓実行例は以下です(ポチッと)
「テスト太郎」をセット


↓↓ソースは以下です。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
<!--
function formset(){
 document.fm.name.value="テスト太郎";
 document.fm.submit();
}
// -->
</script>
</head>
<body>
<a href="" onclick="formset();return false;" title="「テスト太郎」をセット">「テスト太郎」をセット</a>
<form name="fm" method="post" action="http://webdev.xsrv.jp/script/no_936/contact/">
<input type="hidden" name="name" value="">
</form>
</body>
</html>
 

参考になりました?

JavaScriptフォーカス当てると色変わる

JavaScriptを使って、フォーカスを当てると色が変わるフォームを作りました。
方法は2種類で、1つはthis で指定する方法。
もう一つは name属性で指定する方法です。

↓動作サンプル

↓ソースコード

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>サンプルスクリプト</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
<!--
body{
  font-size:12px;
  font-family: 'Lucida Grande','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3', verdana, Arial, 'trebuchet ms', sans-serif, 'MS Pゴシック';
  background:#EFEFEF;
}
.text{
  padding:2px;
  font-size:12px;
  border:1px solid #666666;
}
.w300{
  width:300px;
}
.mt20{
  margin-top:20px;
}
p{
  margin:0px;
}
-->
</style>

<script type="text/javascript">
<!--
// thisで指定する方法
function form_focus(a) {
  a.style.backgroundColor="#B5CFFF";
}
function form_blur(a) {
  a.style.backgroundColor="#FFFFFF";
}

// name属性で指定する方法
function form_focus2(name) {
  form1.elements[name].style.backgroundColor="#FFAE29";
}
function form_blur2(name) {
  form1.elements[name].style.backgroundColor="#FFFFFF";
}
//-->
</script>

</head>
<body >

<form method="post" name="form1" action="">
<p>↓フォーカスを当てると色が変わる(thisで指定)</p>
<input class="text w300" name="name1" type="text" onblur="form_blur(this)" onfocus="form_focus(this)" value="" />

<p class="mt20">↓フォーカスを当てると色が変わる(name属性で指定)</p>
<input class="text w300" name="name2" type="text" onblur="form_blur2('name2')" onfocus="form_focus2('name2')" value="" />
</form>

</body>
</html>
 

参考になりました?

Filed under: JavaScript — admin 13:09  Comments (0)

JavaScriptでクッキーの登録、参照、削除

JavaScriptでクッキーの登録、参照、削除をする関数です。

// ------------------------------------------------------
// クッキーに登録 
//
// [入力] 1. myCookie : クッキー名
//        2. myValue  : 値
//        3. myDay    : 有効期限日数
//
// [出力] なし
// ------------------------------------------------------
function mySetCookie(myCookie, myValue, myDay){
  myExp = new Date();
  myExp.setTime(myExp.getTime()+(myDay*24*60*60*1000));
  myItem = "@" + myCookie + "=" + escape(myValue) + ";";
  myExpires = "expires="+myExp.toGMTString();
  setdata = myItem + myExpires;
  document.cookie =  setdata;	// クッキーの登録
}


// ------------------------------------------------------
// クッキーの値を取得
//
// [入力] 1. myCookie : クッキー名
//
// [出力] 1. myValue  : クッキーの値
//                   != null : 値(string)
//                    = null : 該当なし
// ------------------------------------------------------
function myGetCookie(myCookie){
  myCookie = "@" + myCookie + "=";
  myValue = null;
  myStr = document.cookie + ";" ;
  myOfst = myStr.indexOf(myCookie);
  if (myOfst != -1){
    myStart = myOfst + myCookie.length;
    myEnd   = myStr.indexOf(";" , myStart);
    myValue = unescape(myStr.substring(myStart,myEnd));
  }
  return myValue;
}


// ------------------------------------------------------
// クッキーを削除
//
// [入力] 1. myCookie  : クッキー名
//
// [出力] なし
// ------------------------------------------------------
function myDelCookie(myCookie){
	
  expireDate = new Date();
  expireDate.setYear(expireDate.getYear()-1);
  setdata = myCookie + "=;expires=" + expireDate.toGMTString();
  document.cookie = setdata;
}
 

参考になりました?

Filed under: JavaScript — admin 11:34  Comments (0)

運営サイト/オリジナルCMS   |   ダウンロードランキング   |   お問い合わせ