「more」タグの「続きを読む」をページを開かずに続きを読めるプラグインの「Content with show/hide javascript for "more"」・・・長い名前だ・・・σ(^◇^;)ヒヤアセ
それを、カスタマイズしてゆっくりスライドさせる、小粋空間さんのページを前回紹介しましたが、初心者の自分は今日気づいたのですが、これは「WP-dtree」のエフェクト効果と同じ物を使っているようですね・・・・ということは・・・・
追記・・・下の方で「firefox」の問題について言っていますがこちらで解決しました。
・・・前回こちらの「WP-dtree」のページでカスタマイズ（ブラウザによってエフェクト効果を変える）したことと同じことが出来るかも・・・・(゜口゜;)うっ・・・・・やりたい！！ やってみたい！！
またまた無駄にカスタマイズ心を揺さぶられチャレンジ！！
・・・そして、結果は・・・・・・・・・・・・（￣□￣；）！！ 失敗・・・なんで？？ 絶対間違って無いと思うんだけど？？ アレ_(・・?..)?アレェ ・・・・・しばらくして原因に気づく！！ (>_<) こ！これは！！ ・・・「php」ではなく、「java script」ではないですか？？ ・・・・・・・(゜＿゜i)タラー・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
気を取り直して、「java script」 のブラウザ取得方法を調べる・・・・・しばぁ～～～～らくして、やっと完成！！ ・・・「php」と、「java script」は関数が微妙に違う・・・紛らわしい・・・同じにしてくれればいいのに・・・・初心者の自分はそう願いました・・・σ(^◇^;)ヒヤアセ
・・・しかし、またまた「firefox」に問題が・・・まぁ～同じスクリプトを使っているから当たり前といえば当たり前なのかな？ ・・・そこで、今回も同様 「firefox」 のみ使える「Blind」効果を指定し、「Opera」では開く時に「Apper」、閉じる時に「SlideUp」を使用、その他のブラウザでは、開く時に「Grow」、閉じる時に「Fade」を使用してみることにしました。
・・・それにしても、何故「WP-dtree」の時は、「Blind」すらダメだった「firefox」なのに、これでは使えるのでしょうか？・・・こっちで使っていたから使えないのかな？？？ ・・・あっ！ でも、開く時はゆっくりスライドはしないんだけどね。閉じる時だけゆっくりスライドできる・・・不思議・・・
カスタマイズ
小粋空間 様でカスタマイズした 「getContentforShowHide.php」 のファイルの２５行目あたりでしょうか？
背景が青色になっているところがエフェクトの種類です・・・お好みで変更してください。
例 ： 開く時（上部の黄色背景）「SlideDown」 「BlindDown」 「Appear」 「Grow」
閉じる時（下部の黄色背景）「SlideUp」 「BlindUp」 「Fade」 「Shrink」 があります。
↑ クリック （文章長いです σ(^◇^;)ヒヤアセ ）function output_showHide_js() {
?>
<script type="text/javascript">
Effect.DefaultOptions = {
transition: Effect.Transitions.sinoidal,
duration: 0.5, // seconds
fps: 60.0, // max. 60fps due to Effect.Queue implementation
sync: false, // true for combining
from: 0.0,
to: 1.0,
delay: 0.0,
queue: 'parallel'
}
function ajaxShowHide(entryID) {
element = $('Text' + entryID);
if(element.style.display == 'none') {
options = {
afterFinish: function(effect) {
$('Link' + entryID).firstChild.innerHTML = '« Hide more';
Element.show(effect.element);
}
};
if (navigator.userAgent.indexOf("Firefox") != -1){
Effect.BlindDown(element, options);
}
else if (navigator.userAgent.indexOf("Opera") != -1){
Effect.Apper(element, options);
}
else {
Effect.Grow(element, options);
}
} else {
options = {
afterFinish: function(effect) {
$('Link' + entryID).firstChild.innerHTML = 'Read more »';
Element.hide(effect.element);
}
};
if (navigator.userAgent.indexOf("Firefox") != -1){
Effect.BlindUp(element, options);
}
else if (navigator.userAgent.indexOf("Opera") != -1){
Effect.slideUp(element, options);
}
else {
Effect.Fade(element, options);
}
</script>
<?php
}
と、赤文字の部分を追記すると、ブラウザによってエフェクト効果を変更できます。?>
<script type="text/javascript">
Effect.DefaultOptions = {
transition: Effect.Transitions.sinoidal,
duration: 0.5, // seconds
fps: 60.0, // max. 60fps due to Effect.Queue implementation
sync: false, // true for combining
from: 0.0,
to: 1.0,
delay: 0.0,
queue: 'parallel'
}
function ajaxShowHide(entryID) {
element = $('Text' + entryID);
if(element.style.display == 'none') {
options = {
afterFinish: function(effect) {
$('Link' + entryID).firstChild.innerHTML = '« Hide more';
Element.show(effect.element);
}
};
if (navigator.userAgent.indexOf("Firefox") != -1){
Effect.BlindDown(element, options);
}
else if (navigator.userAgent.indexOf("Opera") != -1){
Effect.Apper(element, options);
}
else {
Effect.Grow(element, options);
}
} else {
options = {
afterFinish: function(effect) {
$('Link' + entryID).firstChild.innerHTML = 'Read more »';
Element.hide(effect.element);
}
};
if (navigator.userAgent.indexOf("Firefox") != -1){
Effect.BlindUp(element, options);
}
else if (navigator.userAgent.indexOf("Opera") != -1){
Effect.slideUp(element, options);
}
else {
Effect.Fade(element, options);
}
</script>
<?php
}
背景が青色になっているところがエフェクトの種類です・・・お好みで変更してください。
例 ： 開く時（上部の黄色背景）「SlideDown」 「BlindDown」 「Appear」 「Grow」
閉じる時（下部の黄色背景）「SlideUp」 「BlindUp」 「Fade」 「Shrink」 があります。
「java script」 と 「php」 の記述の違いについて・・・
前回の「php」と、今回の「java script」では、条件分岐の記述方法が違う・・・・「if」文の中の「else if」も「php」では、「elseif」スペースがない・・・微妙な違い・・・忘れぬように上記を無意味に「Opera」だけ分けたのですが（笑）ブラウザ判別の記述も違う・・・上記の「java script」の場合は、
条件指定の「 (navigator.userAgent.indexOf("Firefox") != -1) 」の部分の
「navigator.userAgent」でナビゲーター情報のuserAgentを取得して、
その文の中から 「.indexOf」で「"Firefox"」の文字を探して
「!=」で「-1」と等しくなければ、OKみたいな感じでしょうか？ ・・・素人メモ！！
※ 「indexOf」は、指定した文字が含まれていない場合、「-1」を返す。
他にもありましたが、自分が探したブラウザ判定法の中では上記が一番記述が簡単そうでした。
ちなみに・・・「php」の場合は、
条件指定の「 (strstr($_SERVER['HTTP_USER_AGENT'], "Firefox")) 」の部分の
「($_SERVER['HTTP_USER_AGENT'],」で、サーバーからUSER_AGENTを取得して
その文の中から 「strstr」で「"Firefox"」の文字を探して含まれていれば、OKみたいな感じでしょうか？ ・・・素人メモ２！！
・・・「php」の方が「if」文は、判りやすいと思いました。（笑） 「-1」を返すって・・・そんなの知らなきゃ判りませんしね・・・どうせなら「 if (navigator.userAgent.indexOf("Firefox") == "Firefox")」 の方が判りやすいのですが・・・（笑）
※ 自分は初心者のため知識不足です。あくまで自分メモですので、「java script」でも、もっと簡単な記述方法があるかも知れません！！！ ・・・あったら教えてください ペコリ(o_ _)ｏ)) 勉強中です。
人気度 : 23 %
（ 参考になったら、評価してねぇ～ (o*。_。)oペコッ
最上階
1階
関係のある記事
No user の書き込みがあります
コメントほしぃ～よぉ～ σ(^◇^;)