2011年4月アーカイブ

/*============================================
	"toujyou.js" is written by HAKASHUN
============================================*/
/*boxというクラス属性がつけられた要素を隠す*/
$(document).ready(function(){
	$(".box").hide();
});
/*変数を予めセットする*/
var i = 0;
var int=0;
/*ページがロードされたら、touyjouファンクションを作動させる。ここの数値は、ロードされてから、toujyou(i)を動作させるまでのタイムラグ*/
/*yattoファンクションは、1000ミリ秒立ってから作動させる*/
$(window).bind("load", function() {
    setTimeout("yatto()",1000);
});

function yatto(){
	var int = setInterval("toujyou(i)",200);
}

function toujyou() {
     var boxs = $('div.box').length;
     /*boxsの数全て完了したら、動作のループを止める*/
     if (i >= boxs) {
          clearInterval(int);
    }
    /*wrapperクラス（非表示状態への動作指令）、数値は表示スピード*/
    $('.box:hidden').eq(0).animate({
    height:'toggle',
    opacity:'toggle',
    marginTop: "0.6in"
    },200)
    /*変数iに値を追加する*/
    i++;
}

//▼予め、画像を使用しているエントリーに名前をつける変数をセット
<MTSetVarBlock name="img"><MTEntryAssets type="image">photo</MTEntryAssets></MTSetVarBlock>
<$mt:EntryTrackbackData$>
<div class="blog_list_body">
<h3 class="list_title list_h3_info"><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a><$mt:EntryDate format="%x"$></h3>

//▼もしエントリー内で画像を使っていたら以下を読み込み
<mt:If name="img" like="photo">
<MTEntryAssets type="image" lastn="1">//エントリー内の画像で、上から１番目の物を取得する。
//▽<$MTAssetThumbnailURL width="100"$>が、取得した画像のURLパス
<p class="list_photo"><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><img src="<$MTAssetThumbnailURL width="100"$>" alt="<$MTEntryTitle$>" /></a></p>
<div class="list_photo_summary">
<p><$MTEntryExcerpt$>...</p>
<ul class="list_category">
<mt:IfArchiveTypeEnabled archive_type="Category">
<mt:If tag="EntryCategories">
<li><mt:EntryCategories glue='</li><li>'><a href="<$mt:CategoryArchiveLink$>" rel="tag"><$mt:CategoryLabel$></a></mt:EntryCategories></li>
</mt:If>
</mt:IfArchiveTypeEnabled>
</ul>
</div><!--list_photo_summary-->
</div><!--blog_list_body-->
</MTEntryAssets>
//▲ここまでが、エントリーに画像が使われている場合に読み込むスクリプト

<mt:Else>

//▼エントリー内に画像が使われていない場合は、以下を読み込み
<p><$MTEntryExcerpt$></p>
<ul class="list_category">
<mt:IfArchiveTypeEnabled archive_type="Category">
<mt:If tag="EntryCategories">
<li><mt:EntryCategories glue='</li><li>'><a href="<$mt:CategoryArchiveLink$>" rel="tag"><$mt:CategoryLabel$></a></mt:EntryCategories></li>
</mt:If>
</mt:IfArchiveTypeEnabled>
</ul>
</div><!--blog_list_body-->
//▲ここまでが、エントリーに画像が使われていない場合に読み込むスクリプト
</mt:If>

1次審査通過サイト一覧｜一般部門

• 品品プレミアムモール（アライドアーキテクツ株式会社）
• キッズ向けゲームと食育の「チキラー島」（株式会社　電通テック）
• チキラー島となかまたち（株式会社　電通テック）
• チキラー島となかまたち 第一話（株式会社　電通テック）
• コンパdePiace（株式会社IBJ）
• Elephant Carnival（株式会社エレファント・コミュニケーションズ）
• 時をつくる こころで創る（株式会社 ノングリッド）
• カンテレのチカラ | 2012年度関西テレビ新卒採用サイト（株式会社インヴォーグ）
• Portfolio for iPad（株式会社インヴォーグ）
• Vittel SPORTS MUSIC FACTORY（株式会社レインボー・ジャパン）
• 英語ペラペ～ラへの道（日本経済広告社）
• 家ガール.com（面白法人カヤック）
• 面白法人カヤック 2012年度新卒採用企画（面白法人カヤック）
• Canon Camera Museum（株式会社Jストリーム、クロスコ株式会社、株式会社うぶすな）
• 団長とおいでや！ROAD TO INVOGUE（株式会社インヴォーグ）
• RYUKA入試クイックガイド（株式会社インヴォーグ）
• 社会と人のココロをみる 心理学の眼（株式会社インヴォーグ）
• 医教（株式会社インヴォーグ）
• WONDER GREEN PROJECT（株式会社エレファント・コミュニケーションズ）
• Xappy（株式会社コパイロツト）
• フリーペーパーミュージアム（AgeStock2010実行委員会）
• D2 COMMUNICATIONS（株式会社アンティー・ファクトリー）
• 経法生のREAL キャリア STORY（株式会社インヴォーグ）
• 戦え！マドリ（株式会社ネクスト）
• オフィスの広場（株式会社リンクプレイス）
• SMART CONTEST（株式会社ワールドワイドシステム）
• おらほの屋（株式会社アリジック／両見英世）
• おいしい手づくりコミュニティ（パルシステム生活協同組合連合会）
• Drivingイズム（株式会社　朝日広告社）
• LUFTOWN（株式会社luft）
• WILD TURKEY(R) BOURBON（株式会社アンティー・ファクトリー）
• Honda Fun Fun Drive!（株式会社アンティー・ファクトリー）
• ホームズくんの家賃相場王（株式会社ネクスト）
• あとみんらんど（株式会社フライング・ハイ・ワークス）
• Room' Spot.net（株式会社中央ビル管理/ 株式会社フライング・ハイ・ワークス(連名)）
• Milky（MilkyTokyo）
• 五十鈴株式会社（株式会社パンセ）
• A4折形（乾陽亮設計事務所）
• FlashとHTML5と...（鈴木 辰顕）
• はいけい、にんげんの皆さま。（泉 昇平）

「背景画像を常にブラウザサイズぴったりにする」とは？

jsコード、CSSはこのようになっています。

$(function() {
    var theWindow = $(window),
    $bg = $("#bg"),
    aspectRatio = $bg.width() / $bg.height();
 
    function resizeBg() {
        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
                .removeClass()
                .addClass('bgheight');
        } else {
            $bg
                .removeClass()
                .addClass('bgwidth');
        }
    }
    theWindow.resize(function() {
        resizeBg();
    }).trigger("resize");
});

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

画像のアスペクト比を割り出すのがポイント

var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();

function resizeBg() { }

 if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
　　○○
}else{
　　△△
}

○○と△△の仕事について

 $bg.removeClass().addClass('bgheight');

theWindow.resize(function() { resizeBg(); })

.trigger("resize");とは何のため？！

jQuery Bubble Popupで、こんなことができます。

まずjQuery Bubble Popupをダウンロードします。

htmlファイルを使って実装してみる。

<!DOCTYPE HTML>
<html>
<head>
<title>jQuery Bubble Popupを使ってみる。</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--▼CSSを読み込む-->
<link href="css/jquery.bubblepopup.v2.3.1.css" rel="stylesheet" type="text/css" />
<!--▼jqueryを読み込む-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<!--▼jQuerybubblepopupプラグインを読み込む-->
<script src="js/jquery.bubblepopup.v2.3.1.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

簡単なテキストにポップを登場させることにする

<body>
<h1>jQuery Bubble Popupを使ってみる。</h1>
<div class="button" style="margin:100px;">
	<p style="text-align:center;">これは<div>タグ内のテキストです。</p>
<!--/#test1--></div>
</body>

javascriptを記述する

<script type="text/javascript">
<!--
$(document).ready(function(){

		//$()の中には、ポップを表示させたい要素のID属性、クラス、タグ名を記述します。
		$('.button').CreateBubblePopup({
			//▼上からポップを落とす。
			position : 'top',
			//▼要素の真ん中にポップが来るようにする。
			align	 : 'center',
			//▼ポップ内テキストを設定する。
			innerHtml: 'フワッとポップが<br />出てくることに成功しました！！',
			//▼ポップ内のスタイル属性を設定する。
			innerHtmlStyle: {
				color:'#FFFFFF', 
				'text-align':'center'
			},
			//▼ポップの色を決める。※jquerybubblepopup-themeフォルダ参照
			themeName: 	'all-black',
			//▼jquerybubblepopup-themeフォルダの相対パスを記述する。
			themePath: 	'images/jquerybubblepopup-theme'
		});
});
//-->
</script>

完成！！

「AGESTOCK2011 ~Spring Festival~」

テーマは『輝く星』

"すごい"学生パフォーマーが大集結！！

「こんな大学生がいるのか...!?」

スペシャルアーティストも登場！！

なんとチケットはWebで予約できる！

$(function () {
     $('.imgBox img').hide();
});
 
var i = 0;
var int=0;
$(window).bind("load", function() {
     var int = setInterval("doThis(i)",500);
});
 
function doThis() {
     var images = $('img').length;
     if (i >= images) {
          clearInterval(int);
    }
    $('img:hidden').eq(0).fadeIn(500);
    i++;
}

$('.imgBox img').hide();

var i = 0; var int=0;

$(window).bind("load", function() { });

var int = setInterval("doThis(i)",500);

function doThis() {
     var images = $('img').length;
     if (i >= images) {
          clearInterval(int);
    }
    $('img:hidden').eq(0).fadeIn(500);
    i++;
}

var images = $('img').length;

if (i >= images) {
clearInterval(int);
}

$('img:hidden').eq(0).fadeIn(500);

i++;

材料

【１】牛乳を沸騰させる。

【２】沸騰した牛乳をカップ麺の中に入れて３分待つ。

$(function () {
     $("textarea").keyup(function(){
          var counter = $(this).val().length;
        $("#countUp").text(counter);
        if(counter == 0){
            $("#countUp").text("0");
        }
        if(counter >= 10){
            $("#countUp").css("color","red");
        } else{$("#countUp").css("color","#666");}
    });
});

$("textarea").keyup();

var counter = $(this).val().length;

$("#countUp").text(counter);

if(counter == 0){$("#countUp").text("0");}

if(counter >= 10){
　　$("#countUp").css("color","red");
} else{$("#countUp").css("color","#666");}

$("#countUp").css("color","red");

$(function(){
     $("a[href^='http://']").attr("target","_blank");
});

$(function(){ });

$("a[href^='http://']").attr("target","_blank");

1. 「^= 'value'」'value'から文字列が始まる場合
2. 「$= 'value'」'value'という文字列で終わる場合
3. 「*= 'value'」'value'という文字列を含む場合
4. 「!= 'value'」'value'という文字列を含んでいない場合

.attr("target","_blank")

加工系

var ary1 = ['gyoten','yokoi','hakamata','suzuki'];
var ary2 = ['akito','hayato','shunsuke','narito'];
//▼gyoten,yokoi,hakamata,suzuki,akito,hayato,shunsuke,narito
document.writeln(ary1.concat(ary2));//配列をつなげる

var ary1 = ['gyoten','yokoi','hakamata','suzuki'];
//▼gyoten／yokoi／hakamata／suzuki,
document.writeln(ary1.join(／));//配列を指定した文字列でつなげる

var ary1 = ['gyoten','yokoi','hakamata','suzuki'];
//▼gyoten,yokoi,hakamata
document.writeln(ary1.slice(0,2));//start〜end番目の配列要素を抜き出す

var ary1 = ['gyoten','yokoi','hakamata','suzuki'];
document.writeln(ary1.splice(0,1,wakazawa,arasawa));//ary1の0番目、1番目の配列が置き換わる。
//▼wakazawa,arasawa,hakamata,suzuki
document.writeln(ary1);

追加/削除系

var ary1 = ['gyoten','yokoi','hakamata','suzuki'];
//▼suzukiを削除
document.writeln(ary1.pop());//配列の末尾の要素を削除する

var ary1 = ['gyoten','yokoi','hakamata','suzuki'];
//▼wakazawaを追加
document.writeln(ary1.push('wakazawa'));//配列の末尾に要素を追加する

var ary1 = ['gyoten','yokoi','hakamata','suzuki'];
//▼gyotenを削除
document.writeln(ary1.shift());//配列の先頭の要素を削除する

var ary1 = ['gyoten','yokoi','hakamata','suzuki'];
//▼wakazawa,arasawaを追加
document.writeln(ary1.unshift('wakazawa','arasawa'));//配列の先頭に要素を追加する

並び替え系

var ary1 = ['gyoten','yokoi','hakamata','suzuki'];
//▼suzuki,hakamata,yokoi,gyoten
document.writeln(ary1.reverse());//配列を逆順に並び替える

var ary1 = ['gyoten','yokoi','hakamata','suzuki'];
//▼gyoten,hakamata,suzuki,yokoi
document.writeln(ary1.sort());//配列を昇順に並び替える

その他系

var ary1 = ['gyoten','yokoi','hakamata','suzuki'];
//▼4
document.writeln(ary1.length);//配列の数を出力する

var ary1 = ['gyoten','yokoi','hakamata','suzuki'];
//▼gyoten,yokoi,hakamata,suzuki
document.writeln(ary1.toString());//配列を文字列で出力する

var str = 'はかしゅんどっとネット';
//▼<a name="top">ページ上部へ</a>
document.writeln('ページ上部へ'.anchor('top'));

var str = 'はかしゅんどっとネット';
//▼<a href="http://hakashun.net/">はかしゅんどっとネット</a>
document.writeln(str.link('http://hakashun.net/'));

var str = 'はかしゅんどっとネット';
//▼<sub>はかしゅんどっとネット</sub>
document.writeln(str.sub());

var str = 'はかしゅんどっとネット';
//▼<sup>はかしゅんどっとネット</sup>
document.writeln(str.sup());