[Jquery]bxsliderでサムネイルつきスライダーにする

●レスポンシブルデザインにも対応した高性能なスライダー【bxslider】の設置
こちらのサイトさんのサンプル8を最初使用していたのですが、
IE7ではどうにも動かず。2時間くらいうーーーーんと唸ってました。

  //サムネイルつき
  var slider = $('#sample').bxSlider({
    mode:"fade",
    pager: false,
    controls: false
  });
  $('.thumbs a').click(function(){
   var thumbIndex = $('.thumbs a').index(this);
    slider.goToSlide(thumbIndex);
    $('.thumbs a').removeClass('pager-active');
    $(this).addClass('pager-active');
    return false;
  });
  $('.thumbs a:first').addClass('pager-active');

slider.goToSlide(thumbIndex);ここら辺が怪しいのかな?
最終的にサンプルサイトをIE7で見たところ example8だけは効かないようになってたので
素直にあきらめまして、

jQueryプラグイン「bxslider」を利用してサムネイル付スライダーをつくる
こちらのサイトさんのコードをいただくことにしました。

$(function(){
var slider = $('.bxslider2').bxSlider({
mode: 'fade',
pager: false,
pagerCustom: '.samuko',
controls: false
});
});

こちらで試したところ無事希望通りの動作に♪
助かりましたー(- 人 -)

[jquery]横自動スクロール

Jqueryの自動横スクロールでかなり使い勝手が良いのが見つかりました

Javascript(JQuery)で横スクロールのサンプルを作りました。

機能的には
・マウスオーバーで一時停止
・左右ボタンで加速
・画像以外の要素もOKの優れもの
・カスタマイズしやすい

というかなり、かなり、ありがたや~(-人-)なプラグインです。
以外に上記機能を内包してるプラグインが無いんですよね~。
良いのが見つからなくて自作するかと考えてたのでかなり助かりました

カスタマイズすれば、レスポンシブ(横幅可変)なスクロールに対応できます。

あと、読み込むページで高さ指定すれば結構応用が効くものになりそうです。

<script>
$(function(){
	$('#ScrollArea').css('height',"300px");/*要素の高さを指定*/
});
</script>

保護中: php簡易パスワード認証

このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。

php

[DREAMWEARVER]テンプレート変数の設定方法その3<リピート表示>

まとめて1記事にしろよって自分でも思いますが
とりあえずリピートで同じレイアウトを出させる方法

<!-- TemplateBeginRepeat name="repeat_span" -->ここにテキスト<!-- TemplateEndRepeat -->

これだけだと同じ文言をリピートになってしまうので、編集ができるようにするには編集可能領域を追加する

<!-- TemplateBeginRepeat name="repeat_span" -->
<span><!-- TemplateBeginEditable name="repeat_span_txt" -->ここにテキスト<!-- TemplateEndEditable --></span>
<!-- TemplateEndRepeat -->

なかなか便利~。
phpで組んでいるのをhtmlに置き換え&編集できるようにするのは骨が折れますねー

配列は無理っぽいので最初に出したtrueでするか、リピート使うかのどっちかで対応かなー。

[DREAMWEARVER]テンプレート変数の設定方法その2<分岐で表示>

変数 ON(true)・OFF(false)で表示切り替え

ヘッダに

<!-- TemplateParam name="type1" type="boolean" value="false" -->

BODY内に

<!-- TemplateBeginIf cond="type1==true" -->
<!--ここに真(ON)のときの条件-->
<li><img src="aaaaa.png"></li>
<!-- TemplateEndIf -->

次は配列が出来るのか調べないと………………出来るのかしら…?

[DREAMWEARVER]テンプレート変数の設定方法<テキストを表示>

ただ単にテキストを変数にしたかったんですが、
「挿入」→「オプション領域」で追加した後で編集しないといけないっぽいので、メモ。

ヘッダに

<!-- TemplateParam name="title_name" type="text" value="" -->

BODY内に

<title>@@(title_name)@@</title>
<!--~省略~-->
<ul id="topic_path">
 <li>@@(title_name)@@</li>
</ul>

ぜんぜん関係無いですけど、最近は「breadcrumbs」より「topic_path」を見かけることが多くなってきてる気がします。気のせいかな?

htc.js使うときはzoom:1とposition:relative入れる

htc.jsでIE8だけ角丸かけている背景色が出てこないので、
なんでやねーんとひとり突っ込みをしつつ調べてたら
zoomとpositionですよ!入れ忘れてた!

そりゃー無理だよーってことでメモメモ

ふう。。。

    zoom: 1;
    position:relative;
css

chromeで文字サイズ【-webkit-text-size-adjust: none;】が機能削除されたっぽい?

とりあえずメモ。
コーディングしてる際に、どうも「-webkit-text-size-adjust: none;」が
効かないので探してたら気になるフォーラムを見つけてしまった。。。

https://productforums.google.com/forum/#!topic/chrome-ja/7Y2r_dYFWrg

-webkit-text-size-adjustはこれまで規格どおりに動作しておらず、意図しない有害な使われ方が
蔓延してしまったので削除されました。

HTML内のテキストとしては最小フォントより小さい文字を表示する方法はありません。
画像、SVGなどで代替できます。

Google社員 ケント

って書かれてるので、やっぱり効かないか~。うーんどうしたものか。。。

●追記(2/13 18:28)
とりあえずの対処で、今回ラフの指定が9pxだったので、chrome用にハックかけて、lettar-spacingを詰めることでなんとか対応できましたー。
font-size:8px とかだったら危なかったかなー。

@media screen and (-webkit-min-device-pixel-ratio:0) {
.date {
	font-size:10px;
	letter-spacing:-1px;
	}
}
css