jQueryフォントサイズの変更

フォントサイズを変更するのを作ってみました。

プログの場合、タグリストで分類すると、同じクラス属性がでてくるのでこの場合便利な(idで振分けるのも可能ですが)汎用性考えて、

index(subject)

※ jQueryオブジェクト内で、引数で指定されたエレメントのインデックス番号を返す。インデックスは、ゼロから始まる連番。
もし渡されたエレメントがjQueryオブジェクト内に存在しない場合、戻り値には-1が返る。

を使ってクリックされた項目内だけのプログ内容の文字サイズを変更するようしました。

$("h2.date-header").append("<span>[小]</span><span>[並]</span><span>[大]</span><span class=\"font\" style=’_display:none’></span><div>文字サイズ</div>"); //h2タグのクラスdate-header内にhtmlを追加

var fontchange = $("h2.date-header span").not(“span.font”);
$(fontchange).mouseover(function(){$(this).css("color","red")}).mouseout(function(){$(this).css("color","")}); //必要なspanタグだけaタグのようにリンクぽく振舞わせ・・・

$(fontchange).click(function(){
varFontSize=13; //初期のフォントサイズ
var index = Math.ceil(($(fontchange).index(this)+1)/3)-1; //インデックス番号の取り出し0から始まるので1足して3で割って切捨ててから1戻してます。
if(!index){index = 0;}

var Base = $("div.post-body:eq("+ index + ")");
var BaseFontsize = $(Base).css("font-size").replace("px", "");

if ($(this).is(":contains(‘小’)")){FontSize = BaseFontsize*0.9;} //小がクリックされると・・
else if($(this).is(":contains(‘大’)")){FontSize = BaseFontsize*1.1;}
FontSize = Math.round(FontSize);
$(Base).css(‘font-size’,FontSize+"px");
$("div.textarea",Base).css(‘font-size’,FontSize+"px");
$("span.font:eq("+ index + ")").text(FontSize+"px").show("slow").fadeOut("2000");
});

css は
.date-header span{float:right;cursor:pointer;color:#009;font:12px MS UI Gothic;}
.date-header div{float:right;color:#009;font:12px Arial;}

こんな感じです。

先頭の文字を大きくする

先日タグリストを造る時に、先頭の文字を強調するよう
BLOGGERからの移行完了にphpで取り出しを書いたが、

css で 

a:first-letter{font-size:125%;}

なんて簡単なのもあるが、思うようにできず、サクッとjqueryでやってみた。

$("a[rel=’tag’]").each(function() {#a タグに rel=tagをつけた場合で、$("a")ならリンクタグ全て、$("a.inpact")ならclass=inpactのあるaタグという意味です。
var first_letter = $(this).text().substr(0,1);
var after_letter = $(this).text().substr(1,$(this).text().length);

// ランダムカラーの場合 右サイドのタグリスト
//var color = Math.round(0xffffff * Math.random());
//$(this).html("<b style=’color:rgb(" + (color >> 16) + "," + (color >> 8 & 255) + "," + (color & 255)+");font:bold 120%/1.2em \"HG丸ゴシックM-PRO\"’>"+first_letter+"</b>"+after_letter);

//英数字と日本語を分ける場合。
if(first_letter.search(/\w/i) != -1){
$(this).html("<b style=’color:#c09;font:130%/1em \"Comic Sans MS\",\"Times New Roman\"’>"+first_letter+"</b>"+after_letter);
}else{
$(this).html("<b style=’color:#60f;font:bold 125%/1em \"HG丸ゴシックM-PRO\"’>"+first_letter+"</b>"+after_letter);
}

});

iphoneのframeブラウズ

先日iphoneに買い換えました(3GS)。
Wi-Fiでつながるからネットの閲覧が早く快適になっています。
そこでうちのHpをみて見ると、Ifreamのコンテンツがスクロールせずに全て表示されレイアウトが崩れてました。
フッターを画面下部に固定するレイアウトのためとりあえずjqueryを使っているのでhide()でフッターを消し去っていますが、

通販のページはoverflowを使った擬似frameでヘッダー、左にメニュー右にコンテンツとフッターの構成にしており、メニューとコンテンツをoverflow:autoではみ出す内容をスクロールするようにしていましたが、

iphoneの小さな画面で二本指でスクロールするのはcontentsはともかくメニューの小さいサイズは面倒でした。

iphoneはjavascriptが使えるsafariなのでuserAgent で振り分けられます。

通販のページもjqueryを使ってるので、idで操作して閲覧しやすくしました。
if(navigator.userAgent.indexOf(‘iPhone’)!=-1){ 
$(‘#content,#menu’).css(‘overflow’,’visible’);
$(‘#footer’).hide();
}

※フッター位置がcontentsのスクロール無しのhightをうまく収得できずに隠してごましていますが(^_^;)

一部文字の描写がくずれていますが、テストするたびにアップロードするのも面倒で、ローカルでテストしたいところだが、 windows用のsafariがappleからてでいますが、何度やっても起動前に落ちて起動できず・・・そのまま放置・・・

BLOGEERクラシックテンプレート 最近のコメント取り出し3

BLOGGER クラシックテンプレート直近コメントの取り出し
BLOGEERクラシックテンプレート 最近のコメント取り出し2
コメントや最近のエントリーをjavascriptでの取出しを記載していましたが、
いつの間にか、json形式で引っ張ってくるデータの順序が変わっていて、でたらめ なリンク先を取り出していたので修正しました。

(いつからやってんやろ・・・汗ゞ)

function commentcallback(obj) {
var data = obj;
var InsertHTML = ‘<h2 class=”sidebar-title”>直近のコメント5件<\/h2>’;
InsertHTML += ‘<ul>’;
for (var i=0; i<data.feed.entry.length; i++) {
//var anchor=data.feed.entry[i].link[0].href.replace(/(\?[\w]+\=[0-9]+)/, “”);
var anchor=data.feed.entry[i].link[2].href.replace(/(\?[\w]+\=[0-9]+)/, “”);
InsertHTML+= (‘<li><a href=”‘+anchor+'”>’);
//InsertHTML+= (data.feed.entry[i].summary.$t.substring(0,24));if (data.feed.entry[i].summary.$t.length > 24) {InsertHTML+= (‘…’);}
InsertHTML+= (data.feed.entry[i].title.$t.substring(0,22));if (data.feed.entry[i].title.$t.length > 22) {InsertHTML+= (‘…’);}
InsertHTML+= (‘<\/a><br \/>’);
InsertHTML+= (‘[‘+data.feed.entry[i].published.$t.substring(2,10)+’]’);
InsertHTML+= (‘ by ‘+data.feed.entry[i].author[0].name.$t);
InsertHTML+= (‘<\/li>’);
}
InsertHTML += ‘<\/ul>’;
document.getElementById(‘commentcallback’).innerHTML = InsertHTML;
}

function newentry(obj) {
var data = obj;
var InsertHTML = (‘<h2 class=”sidebar-title”>最近のエントリー10件<\/h2>’);
InsertHTML += ‘<ul>’;
for (var i=0; i<data.feed.entry.length; i++) {
InsertHTML+= (‘<li>’);
//InsertHTML+= (‘<a href=”‘+data.feed.entry[i].link[0].href+'”><b>’);
InsertHTML+= (‘<a href=”‘+data.feed.entry[i].link[4].href+'”><b>’);
InsertHTML+= (data.feed.entry[i].title.$t.substring(0,22));if (data.feed.entry[i].title.$t.length > 22) {InsertHTML+= (‘…’);}
InsertHTML+= (‘<\/b><\/a><br \/>’);
InsertHTML+= (‘[‘+data.feed.entry[i].published.$t.substring(2,10)+’]’);
InsertHTML+= (data.feed.entry[i].summary.$t.substring(0,36));if (data.feed.entry[i].summary.$t.length > 36) {InsertHTML+= (‘…’);}
InsertHTML+= (‘<\/li>’);
}
InsertHTML += ‘<\/ul>’;
document.getElementById(‘newentry’).innerHTML = InsertHTML;
}

BLOGEERクラシックテンプレート 最近のコメント取り出し2

BLOGGER クラシックテンプレート直近コメントの取り出し
<script type=”text/javascript” src=”http://www.blogger.com/feeds/8216413096516145501/comments/summary
?alt=json-in-script&callback=commentcallback&max-results=5″></script>
でjson形式でデータを呼び出しているが、

data.feed.entry[i].link[0].href の値が
https://blog.peaks.jp/2008/02/javascript
?showComment=1211451300000#c4957769072170915326
となるので、赤字の部分は必要無いので(多分?)
下記の赤字のように修正して削除しました。これで多少すっきりしたかな・・・

<div id=”commentcallback”></div>
<script type=”text/javascript”><!–
function commentcallback(obj) {
var data = obj;
var InsertHTML = ‘<h2 class=”sidebar-title”>直近のコメント5件<\/h2>’;
InsertHTML += ‘<ul>’;
for (var i=0; i<data.feed.entry.length; i++) {
var anchor=data.feed.entry[i].link[0].href.replace(/(\?[\w]+\=[0-9]+)/, “”);
InsertHTML+= (‘<li><a href=”‘+anchor+'”>’);
InsertHTML+= (data.feed.entry[i].summary.$t.substring(0,24));if (data.feed.entry[i].summary.$t.length > 24) {InsertHTML+= (‘…’);}
InsertHTML+= (‘<\/a><br \/>’);
InsertHTML+= (‘[‘+data.feed.entry[i].published.$t.substring(2,10)+’]’);
InsertHTML+= (‘ by ‘+data.feed.entry[i].author[0].name.$t);
InsertHTML+= (‘<\/li>’);
}
InsertHTML += ‘<\/ul>’;
document.getElementById(‘commentcallback’).innerHTML = InsertHTML;
}
–></script>
<script type=”text/javascript” src=”http://www.blogger.com/feeds/8216413096516145501/comments/summary?alt=json-in-script&callback=commentcallback&max-results=5″></script>