googleのサイト内検索は知ってる。
でも、それって、サイト内でURLが分かれている場合にできること。

違うのよ。
ctrl + f したときみたいに、キーワードを検索して出してほしいのよ!!

てことで、設置方法、まとめておきます。

1.お決まりの jquery-1.7.1.min.js を読み込ませます。

2.smartRollover.js を読み込ませます。
  ソースはここにあるよ。
  https://github.com/riklomas/quicksearch/blob/master/jquery.quicksearch.js

3.指示jsを書いて読み込ませます。

$(function search() {
  $('input#search').quicksearch('table#tablelist tr', {
    'delay':300,
    'selector':'td',
    'stripeRows':['odd','even'],
    'loader':'span.loading',//読み込み中に表示する対象
    'noResults': 'tr#noresults',//検索該当無しの場合表示する対象
    'bind':'keyup click change',//絞り込み開始のイベント
    'show': function () {
    $(this).addClass('show');},//絞り込まれた対象へ装飾を行います
    'hide': function () {
    $(this).removeClass('show');},//絞り込みから除外された対象へ装飾を行います
    'prepareQuery': function (val) {
    return new RegExp(val, "i");},
    'testQuery': function (query, txt, _row) {
    return query.test(txt);}
  });
});

4.html書いてあげます。

<div id="exAll">
	<h1>タイトルquicksearch</a></h1>
	<form>
	<input type="text" name="search" value="" id="search">
	<span class="loading"><img src="http://zxcvbnmnbvcxz.com/wp-content/uploads/2012/05/3.gif"></span>
	</form>
	<div id="scroll">
		<table id="tablelist">
			<tr><td>ここに検索対象文字ね</td></tr>
			<tr><td>ここに検索対象文字ね</td></tr>
			<tr><td>ここに検索対象文字ね</td></tr>
			<tr><td>ここに検索対象文字ね</td></tr>
			<tr><td>ここに検索対象文字ね</td></tr>
			<tr><td>ここに検索対象文字ね</td></tr>
			<tr id="noresults"><td>見つかりませんでした</td></tr>
		</table>
	</div>
</div>

5.最後にスタイルシート

<style type="text/css">
h1 a{font-size:30px; text-decoration:none; color: #444; font-family:arial; font-weight:bold; margin:0 0 20px 0; display: block;}
#search{width:400px; padding:3px;}
#exAll{height:400px; font-size:12px; margin:20px auto; width:600px; text-shadow:0 1px 0 #fff;}
#scroll{margin: 20px 0px; padding: 10px; height:800px; overflow-x: hidden; border:1px solid #ccc;}
.loading img{padding:5px; float: right;}
#tablelist tr{display:none; width:560px;}
#tablelist tr.show{display: block;}
#tablelist tr.odd{background:#fafafa;}
#tablelist tr.even{background:none;}
#tablelist tr td{padding:5px;}
</style>

で、体裁整えてできあがり!!

こちらのサイトを参考にさせて頂きました。
サンプルを見たら一目瞭然!!
http://zxcvbnmnbvcxz.com/demonstration/quicksearch.html

がんばってね~!



  
print.cssを作ってみた。
で、必要なものだけを印刷し、不要なものは表示されない設定をした。

そしたら!
htmlの下部にでかい余白ができた!

ちなみに、ソースを見ても分かりません。

初め、jqueryのタグかなんかが入っちゃってるのかな~と思ったけど、
どうやら違う。

調べてみたところ、消したものたちの残骸が下の方にいるんだとか。
これのせいで、ページが2枚にわかれてしまう。

で、これを書いてみた。
*{
margin:0px;
padding:0px;
border: 0;
}
html,
body { margin: 0px; padding: 0px; border: 0;}

基本中の基本だけど、print.cssを別で作った際に
これが読み込まれなくなっていた。

直らなかった。

ちなみに、不要なものを表示させないは
visibility:collapse;
で書いた。

でも、この書き方だと残骸が残るんだとか。

height: 0;
display:none;
font-size: 0;

これを書き加えると良いみたい。

.hidden { visibility:collapse;
height: 0;
display:none;
font-size: 0;
}

てことで、消えた!

これに苦戦した~!
jqueryでなんか出て来る度にビビる私w
今回は、セレクトボックスで選択、で、更新ボタンを押したら
初めてテーブルの色が変わるというものを作ってみた。

ヘッダー部分
<link rel="stylesheet" href="style.css" id="style_color">

ボディ部分
             <!--// 選択しているセレクトボックスの値を取得して色変更-->
              <script>
              $(document).ready(function(){
                    $("#road").on("click", function () {
                        var ret = $("#select_st").val();
                            document.getElementById('style_color').href = ret;
                    });
                });
              </script>
                <tr>
                <th>項目選択</th>
                <td>
                <select id="select_st">
                <option value="style.css">項目1</option>
                <option value="yellow.css">項目2</option>
                <option value="green.css">項目3</option>
                <option value="blue.css">項目4</option>
                <option value="purple.css">項目5</option>
                <option value="pink.css">項目6</option>
                </select>
                </td>
                </tr>

                <div class="btn_submit"><button type="submit" value="" name="Submit" id="road">更新</button></div>


更新ボタン(#road)をクリックしたら、#select_stっていうセレクトボックスの
valueの値をとってきて、style_colorっていう名前のスタイルシートと差し替えてね。

※それぞれの色のスタイルシートは用意しておきます。

ていう感じです。

ロードした瞬間が気持ち悪いな。
本番作った時に、そこ何とかしたいね。
特定のボタンをクリックして、呼び出したデータが入った、
チェックボックスやらセレクトボックスやらテキストエリアやら、
これをリセットするボタンを設置せよというオーダーがあった。

で、初めはcakephpでサーバのデータを呼び出すというのと同じロジックでリセットさせた。
<?php
if(count($search_conditions) > 0){
    foreach($search_conditions as $sc) {
?>
    <dd id="sc<?php echo $sc['SearchCondition']['id']; ?>"><?php echo $this->Html->link($sc['SearchCondition']['search_name'], array('controller' => 'goods', 'action' => "clear")); ?></dd>
        <?php
    }
}
?>

確かこんなことをかいた。
我ながら効率良いこと考えたなとか思って喜んでたのだが、
リセットごときでサーバまで見に行くな!と怒られてしまったwww

あぁ、、やっぱり??
jqueryで書く感じですかね??

ということで書き直し。

    <script>
      $(document).ready(function(){
        $('#btn_reset').click(function() {
          $('input:checked').attr('checked', false);
          $('option').attr('selected',false);
          $('input:text').val(false);
        });
    });
    </script>

ここまではいい。

でも、問題があった。

初期値が入っている、つまりvalueが入っている値が消えてくれない。

うーん、、、どうしたものか。
値だから、、、そうか!
          $("input[type='text']").attr("value", "");

これで消えてくれた。

おしおし、うまく行ったぞ。

Linuxのテスト環境にUPしてチェックと、、、、
おや?できていないぞよ。。。

うーん、困った、困った。
てか、typeがないやん!!!
そりゃ~type指定しても無理だよね。

じゃ、こーだな!!
          $("input").attr("value", "");

おや??

サブミットボタンの文字まで消えたwww

そうか、inputだからか!
じゃ、これか!!

          $("input").not(':submit').attr("value", "");

でやっと解決。

ちょっとててこづらせやがって!


追記:

違った違った、'type' => 'text', を足せばいいだけの話ジャンwww
IE9向けに作っているのだが、どうもIE9で表示が崩れる。
IE向けの対応しても、なんかおかしい。
てか、そもそもドキュメントモードが変なものが選ばれちゃってんじゃん!!と思ったら、
<meta http-equiv=”X-UA-Compatible” content="IE=9"
って書かれてたよ!!
だれだれ??トリックだ!!
正解はこれ
<meta http-equiv=”X-UA-Compatible” content="IE=IE9" />

も~~。。
よかった。解決して。

その他のバージョンはこれを入れる

- IE=IE5 -> Quirks モード強制
- IE=IE7 -> IE7 標準モード強制
- IE=IE8 -> IE8 標準モード強制
- IE=IE9 -> IE9 標準モード強制
- IE=Edge -> 常に最新の描画モードを強制する
- IE=EmulateIE7 -> DOCTYPE 宣言の内容によって IE7 標準モードにするか IE5 モードにするかを判定する
- IE=EmulateIE8 -> DOCTYPE 宣言の内容によって IE8 標準モードにするか IE5 モードにするかを判定する
- IE=EmulateIE9 -> DOCTYPE 宣言の内容によって IE9 標準モードにするか IE5 モードにするかを判定する
webデザイナーの卵さんから、こんな質問が来ました。

===
あたしは、先月までパソコンスクールKENで、webデザインの講座を勉強してきました。
それで、KENのデザイン講座はあくまでも基礎中の基礎であり、webデザイナーとして働けるには、まだまだ未熟というのがよく分かりました。。

そこで、さらに本などを買って勉強していきたいと思っているのですが、どんな本を選べばいいのか分かりませんあせあせ(飛び散る汗)
もし、良かったら良本などを教えて頂けないでしょうか

具体的には、HTML、HTML5、CSS6、DREAMWEAVER、FLASH、Photoshop・Illustratorについて深く勉強したいと考えていますexclamation
あくまでも、あたしの勝手な分け方ですが、上記の言語についてそれぞれ「基礎向け」にはこの本を、「応用向け」にはこの本を、「プロレベル向け」にはこの本を、といったように分けて良本を教えて頂けたら幸いです。
===

私も卵なりたてのとき、同じ質問をしていた気がします。

最近のwebデザイナースクールは酷いなと思います。

webデザインを学べば、すぐにでも再就職ができるとか、フリーランスになれるとか、
まぁ、色々上手いことを言います。
嘘ではないです。

でも、ここに条件を書いていただきたいです。

※デザインや絵を描くのが得意な人なら

webデザイナー向けスクールは正直、技術を教えてくれるだけです。
高価なadobeソフトの使い方をね。

デザインについては、デの字すら教えてくれません。
好きにやれーーーって。

私がまだスクールで勉強していたとき、別の人が行っていました。
デザイナーなんて、名乗ったもん勝ちよ。
名乗ったその人からデザイナー。

なるほど、その通り!!って思いましたが、
現実はそんなに甘くありません。

デザインを勉強したことのない人が、ある日突然デザインができるように
なるはずがありません!!

もちろん、元々得の上手い人、元々デザインが好きな人は
もう、大いに活躍してください!って感じですが、
そうではない人は、ここが始まりだと思ったほうがいいです。

で、先ほどの質問者のような方への回答としては、、、

あなたの目的にあった本はないです。
webデザイナー技術は本で勉強するのではなく、8割が現場で覚えるものです。
あえて言うなら、教科書は、実際にwebサイトにUPされている、企業のサイトです。
是非、企業が作っているサイトの真似をして作ってみてください。

デザインも、コーディングも全部そうです。
真似して作ってみるとわかりますが、結構難しいです。
その際、技術がわからなければ、ここで初めてwebまたは本で調べてみましょう。

それらが、そこそこ作れるようになったら、あとは実践あるのみです。
自ら客を取りに行くなり、派遣会社で働くなり、うまく企業に入り込むなり
webデザイナーで食べてる人は、そうやって技術を磨いている人が殆どです。

勉強だってそうです。
ほら、よく優秀な大学に行く人の勉強方はとにかく書きまくるって言うじゃないですか。
どんなに優秀な画家でも、まずは模写から始めます。

つまり、できないならできる人のを真似て練習しろ。

それが全てです。

てことで、もしこれを呼んだwebデザイナーの卵さんがいたなら、
一緒に茨の道を歩きましょう。

諦める必要はありません。
人間何度も繰り返せばできるようになるものです。

頑張って!!!
2012年12月22日から24日 京都旅行に行ってきた。
今回のテーマは、龍が如く見参の舞台をめぐること!!
http://ryu-ga-gotoku.com/kenzan/外部リンク

プランを考えるべく、まずは全ての場所を探った。龍が如く見参は主人公を宮本武蔵に見立て、その生涯を追いながらゲームを進めていくもの。

1.メインの舞台である祇園
祇園は京都駅の北側に位置している。
すぐに向かえそう。

2.洛外町→清水寺
洛外町は祇園の南と思われる。
南東方向に進めば清水寺にいける。

3.山道
山道らしきものは近くにはない。
坂本龍馬の墓あたりが若干その雰囲気。
龍馬の墓でも見ようぞ。

4.河原町 光悦宅
河原町は今では発展しすぎていて、大手のショッピングモールばかりっぽい。
当時の雰囲気は味わえないかな?
光悦宅はどうやら本阿弥光悦という人物の寺が金閣寺の方にあるらしい。

5.吉岡道場
一乗寺のあたりに武蔵名残のものが集結。
しかし、実際に決闘が会った場所は
小さく追いやれているが上京区の
一条戻り橋が本物らしい。

6.三十三間堂→鴨川
これは有名だから当然残っている。

7.林道、宍戸梅軒 洞窟
林道は少し違うエリア、嵐山にある。
梅軒は多分トロッコに乗ったら
いける松尾山のところだろう。

8.奈良 宝蔵院
宝蔵院は奈良。
奈良までいけなくないけど、今回のテーマは京都なので、
いけそうなら行こうか。

9.奈良 柳生の里
柳生石舟斎が切ったと言う岩がある
剣豪の里、だが、、、奈良。。




10.巌流島
無人島巌流島。
山口県下関市 なので却下。




ということで、大体行き先は決まった。
もう少し前なら、紅葉が見ごろを迎えるのだが、もう12月の末、
紅葉のない京都に果たして魅力はあるのだろうか?
盆地だけに、寒いだけじゃなかろうか、、、
そんな不安を抱きつつ、いざ出発した。

12月22日(月)あいにくの大雨
天気予報を見ても、雨と雪。

12:16 こだま653に乗って京都へ向かった。
楽しみはやっぱり駅弁だよね♪とノロを気にしつつ、駅弁を購入し、
席に座ると駅弁をほうばった。

15:34 中学生の修学旅行ぶりの京都!
雨も上がってわくわくしながら、ホテルがある四条駅に向かった。
ホテルは京都からすまホテル。
外見はなかなか豪華な感じで、1Fにスターバックスがついていた。
結構いいホテル?と思いつつ、うきうきしてチェックイン。
中はそんなに広くなかった。

さてと、早速回ろうかね?
近場をうろうろすることにした。

三条の辺りまでうろうろ歩きつつ、祇園の町などを堪能した。
舞妓さんとかが歩いてるらしいが、その日はクリスマス3連休。
もう、それどころじゃないくらい、人がごった返していて、歩くのも大変だった。

でもなんかないかな~と歩いていたら、見つけたよ。


桐生一馬之助が番傘のみで敵役を倒して観客を盛り上げ役を
演じるとお金がもらえたこの舞台。

八坂神社とか色々あったけど、まぁ、すっかり暗くなったので、
ご飯でも食べるかと辺りを見渡した。

とっさに天下一品の本店は京都だ!と行って見つけだした。
でも、せっかく京都にきたんだから、らーめんじゃなくて、京都らしいものを
食べようよ~ということで、昔ながらの建物で、にしん蕎麦の総本山を発見!

これがなかなか美味しい。

ニシンがまるごと燻製になっていて全然臭みがない。
この蕎麦の下に丸々一匹埋まってる。

美味しくいただいて、再び街散歩。
6時頃から店が閉まりだしてしまい、8時には殆どの店が閉店してしまった。
仕方がないので、ビールとおつまみと八橋を買ってホテルへ。

明日どこを回るかを話しつつ、飲んでると、
あの、鳥居が沢山並んでるのって京都じゃなかったっけ?と言う話になり、
携帯は忘れたくせに、ノートPCは持ってきたので、それで検索。
伏見稲荷ということが判明した。

ただ、ここの稲荷は、稲荷神社の総本山というだけあり、すごく強いらしい。
霊感の強い人が行くと、体調が悪くなるそうだ。
私、大丈夫かな~と思い、色々稲荷の神様についてとか調べてみた。

稲荷の神様は女性だった。
何でも即効性のある神様で、昔は狐が守っていただけに、狐は見返りを求めるそうだ。
なので、お礼とか感謝とかをしないと、せっかくその力でビジネスがうまく行っても潰されてしまうそうだ。
しかし、最近になってその女性の神様がやってきたので、そんなことはないとか色々説はあった。

そんなことを話して眠ったら、次の日寝坊した。。。

12月23日(日)起きたら9時だった。
天気は快晴!なんだよ、自転車乗れたじゃん!!
自転車に乗るにも、自転車に乗れる格好をしていない。
仕方がない、電車で伏見稲荷へ行こうか。
ということで、地下鉄に乗った。

伏見稲荷駅を降りるとすぐに、鳥居と狐が迎えてくれた。
すごいな、この狐。




わくわくしながら進んでいくと、こ、これだ!!



5000本はあるという千本鳥居。
途中で道が分かれたりする。


おびただしい数の鳥居。
ひたすら山を登る感じなので、途中で上るのをやめる方々もいる。



人がだんだん減っていく。
でも、頂上まで行きたい。
願いを込めてから持って、思ったより重いと願いは叶わない、
思ったより軽いと願いは叶うという重かる石を試したい。
そんなことを思いつつ進んでいった。

途中茶屋があった。
更にすすんだ。
狐さんが勇ましい顔をしてる。


頂上についた、そこからは下り。
神様から見えるように鳥居の裏側は奉納した企業名が書かれている。


重かる石は割と下の方にあった。
足をがくがくさせながら、ひたすら下った。

そして、入口まで戻ってきた。
なぜか一番最初の1本目には割りと新しめの電通w
金にもの言わせて置いたんじゃないかとwww



神社をでると、朝から何も食べていなかったので、お腹がすいたので、
いなりずしとうどんをいただいた。




稲荷を出た次は、三十三間堂を目指すことにした。
電車に乗って七条へ。

この辺りに、光悦が言っていた茶屋の草団子が、、
探してみると、あ、あった!!


しかも、美味しそう♪
ということで、これもいただいた。

ゲームで歩いた感覚どおりに歩いていくと、あったあった三十三間堂。
あのゲーム、偉いな。
ここまで再現されてるとは。。。

靴脱いで、スリッパで三十三間堂の色んな神様を見た後に、
そうそう、ここだよね。



吉岡道場の門下生、祇園藤次と戦ったとこ。

そして、次は清水寺。
これまたゲーム内で歩いたとおりに歩いてみる。
おお!!ついた!清水寺!!!
ここで宍戸梅軒の手下と戦ったよね。


でもって、ここで宍戸梅軒と戦って、


記憶を戻したところで、佐々木小次郎が現れて、
お遥が殺されそうになったところで、
やめ~いって狸爺、徳川家康が現れると。。。

清水寺。。。いいね~。。。



そこから3年坂、2年坂を下って、



あまりの寒さにちょっとお茶屋さんで休憩。




鴨川のこの感じを味わって



夕食っと。

京野菜のてんぷらにぶり大根、うどん。
にしも、京都ってうどんと蕎麦の店ばっか。
他にないの???

そんなことをぶつくさ言いながら、今日もビールで乾杯して寝た。

12月24日(月)
またまた寝坊した!!
11時チェックアウトなのに、起きたら10:30!!!
あぁ、、、予定が。。。
でも、おかげで行きたかった11時オープンの店にいけた。

チェックアウトして、周辺の店に行った後、今日は嵐山に向かった。
バスを利用して、嵐山へ。
途中で、広隆寺により、再び都電に乗って、嵐山へ。

晴天の中、雪が降ってた。
まずは腹ごしらえしよう、せっかくだから京の料理を。
うどん、蕎麦以外でと見渡すと、今度は、豆腐と湯葉ばっかりだった。
ご膳を頼んでみた。



湯豆腐に豆腐の煮物に、ゴマ豆腐に豆腐田楽、これまた豆腐ばっか。
おなかいっぱいになったけど、何だか食べた気がしないね~といいつつ、店を出た。

さて、きたよきたよ渡月橋。


おお!横から見ると素敵!
でも、上を歩くと舗装されすぎてて、バスは通るは車は多いわ、全然味がないね。。。

そして、次は竹林通り。
おお!これは、CMによくでるあれじゃないか。



冬でもいけるね♪

ここで、光悦寺に行く手段が足しかないという事態に気づいた。
そうだ、カーシェアリングをしよう。

車を借りて、時間もなかったので金閣寺は省略。
龍安寺に向かった。

おお、これが龍安寺か。
これこれ、こういうのみたかった。

にしても、靴を脱いでの古家の廊下はなんと寒いことか。。。。
でも、コケまで美しかった。

時間がないので、念願の光悦寺へ!
わ~きたきた。
ここだここだ。



芸術家本阿弥光悦が徳川に与えられた家。
そして、宮本武蔵が良く遊びに来ていた場所。
さすが、全てが綺麗に配置されてる。


紅葉の季節だったらもっと綺麗だったんだろうな~。。。

満足したら、急いで京都駅へ。
21:02京都発にのり、仮はのぞみなので23:01に到着。

京都は、店が開いてる時間が短いので、
場所を決めたらとっとと移動しないとなかなか回れないのね。

吉岡道場と決闘した場所だけいけなかったけど、まぁ、仕方ない。
それよりも、死ぬほど寒かったので、靴下まで工夫する必要ありでした。

でも、すごく満足した旅でした♪
次は、どこ行くかな~。
javascriptって、難しくない?
phpの方がまだ理解できる気がする。。。

といいつつ、何とか解決できちゃうのがjavascriptだから、
こっちの方が簡単なのか。。。

とりあえず、今日の苦戦ポイント。

検索した売上推移表をエクセルみたいに
年間表示させているのだが、
このテーブルで組んだ部分にデータがたくさん入っている。

もっとみるってやると、更に横に倉庫別のデータが広がるようになっているのだが、
このもっと見るを押して、横幅が広くなったときに、
背景を突き抜けて表示されてしまった。
だから、背景も一緒に伸ばしておくれって要望が来た。

widthは全てmin-widthで書いているので、横幅が伸びてくれてもいいはずなのに
伸びない。

なんで~?

伸びない。

どうやら、横幅が広がらない理由は、javascriptで広げたtableの領域のみと思われ、
レンダリングの問題のよう。

つまり、ロード完了後にスタイルが決まるのでJavascriptで横幅が広がっても
スタイルには変化がないのでそのままという・・・
そんな状態。

解決策としてはJavascriptで広げたtable領域の横幅を取得し、背景の横幅を書き換え
ると言った事で行けるんじゃないかと、、、

という想定で、やってみた。


あと、tdの方にはid="chk1"がふられているのでこれを活用して
    <td rowspan="<?php echo count($goods)+2; ?>" class="vertical" id="chk1" onclick="fTableWidth('auto')">もっと見る«»</td>


<script type="text/javascript">
$(function(){
function showWidth(elm, w) {
    var e = 400;
    $("body").width(w+e);
}
$("#chk1").click(function () {
    showWidth("table要素", $("table").width());
});
});
</script>

てな感じで、だいぶコピペでやつけたwww

お疲れした。


あ、、、まだ、phpの方のバグ対応があったんだった。。。
ライトボックスは画像を表示してくれるけど、
そういう動作で、画像じゃなくてテキストを表示したいんだよね。
ってことがありました。

ライトボックステキスト版、で色々探していて
jqueryにgrayboxというのがありました。
これも使えそう、、だけど、使っていた別のjqueryとかち合っちゃった、、、。。

てことで、どうしようと悩んでいて、気づきました!
そうか、アラート機能でいいんだ!ってことに。

で、見つけたのがこれ。
http://labs.abeautifulsite.net/archived/jquery-alerts/demo/

使い方は簡単。

ここのページから、jsをダウンロードしてきて
http://www.abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/

あとは、さっきのページを見ながら真似して設置するだけ。
ほらできました~!