- 締切済み
cookieを使ったフォントチェンジ
kiyoto-777の回答
- kiyoto-777
- ベストアンサー率74% (133/178)
１． 作ってみました。下記を参照 http://code.google.com/p/newblue/source/browse/font_change_cookie.html ２．$(".main").attr("class",$.cookie("file")); は、main のクラスが 消えていましますので、addClassにする必要があります。 ３．クッキーを追加するのしかなく、フォントサイズが変更された時には 前に追加したクッキーを消す必要があります。
関連するQ&A
- jqueryでのフォント変更について
今jqueryを勉強していまして、 今回サイトでよくある大中小ボタンを押すとサイト全体のフォントが変更されるように なっているものを制作しようと思っています。 実際実装はできるのですが、キャッシュに入れ次アクセスしても同じフォントサイズ（フォントの大を押してみていた人が、またアクセスした際に同じ）のままでいてほしいんですね。 いろいろと調べましてやったのですがなかなかうまくいかず、 ご教示して頂ければ幸いです。 jquery.jsと、 jquery.cookie.jsは入れています。 jqueryとcssを掲載します。 自分の考えとしましては、boxという箱にclassname(bodyに大きさによって振り分けるためのクラス)と、保持する期間、あとサイトのパスを入れればいいのではないかと思ってるのですが。。。 fontswictherはリストをくくっている親のul要素のID名です。 あとちなみにですが、下記のjsをスマートにまとめられる書き方はございますでしょうか。 そちらも一緒に教えて頂ければ幸いです。 $("#fontswitcher li").attr({href:$.cookie('box')}); var classname = "font-s , font-m , font-l"; $("#fontswitcher li:eq(0)").click(function(){ $('body').removeClass(classname); $('body').addClass('font-s'); $.cookie('box',classname,{expires:10,path:'/'}); }); $("#fontswitcher li:eq(1)").click(function(){ $('body').removeClass(classname); $('body').addClass('font-m'); $.cookie('box',classname,{expires:10,path:'/'}); }) $("#fontswitcher li:eq(2)").click(function(){ $('body').removeClass(classname); $('body').addClass('font-l'); $.cookie('box',classname,{expires:10,path:'/'}); }) body.font-s{ font-size:10px; } body.font-m{ font-size:12px; } body.font-l{ font-size:14px; } お忙しい中恐縮ではございますが、 おわかりになる方、ご教示いただければ幸いです。 どうぞ宜しくお願い致します。
- ベストアンサー
- JavaScript
- フォントサイズの変更
jqueryを使用したフォントサイズの変更について質問です。 サイズの変更は以下のスクリプトで動作するのですがクラス名(active)が付与されずうまく動作しません。 html <ul class="switch"> <li><span class="fontChangeSmall">小</span></li> <li><span class="fontChangeNormal">中</span></li> <li><span class="fontChangeLarge">大</span></li> </ul> font-change.js $(document).ready(function() { var bodyClass = 'font'; var switchClass = 'fontChange'; var startClass = 'Normal'; var activeClass = 'active'; var value = $.cookie('fontSize'); if ( value ) { $('body').addClass(bodyClass + value); $('.switch .' + switchClass + value).addClass(activeClass); } else { $('body').addClass(bodyClass + startClass); $('.switch .' + switchClass + startClass).addClass(activeClass); } $('.switch span').click( function() { value = $(this).attr('class').replace(switchClass, ''); $('body').removeClass(bodyClass + 'Normal').removeClass(bodyClass + 'Small').removeClass(bodyClass + 'Large'); $('body').addClass(bodyClass + value); $('.switch span').removeClass(activeClass); $('.switch .' + switchClass + value).addClass(activeClass); $.cookie('fontSize', value); }); }); 上記だけであれば動作するのですが下記のスクリプトがあるとactiveが付与されない状況です。 下記をコメントすると正常に動作します。 ※どちらのjsも外部ファイルとして読込みしてます。 common.js $(function() { $('body :first-child').addClass('firstChild'); $('body :last-child').addClass('lastChild'); }); どのようにすればactiveが付与されるようになりますでしょうか？
- ベストアンサー
- JavaScript
- javascriptとcssでフォントサイズを切り替えたい
javascriptとcssでフォントサイズを大中小で切り替えたいと思い、いろいろとサイトをまわりながら以下のようなものを作成しました。 しかし、どうもうまく動いてくれません。 ●●●●●javascript●●●●● function fontChange(str){ var targetFile; switch(str){ case "small": targetFile="../css/font_small.css"; break; case "medium": targetFile="../css/font_medium.css"; break; case "big": targetFile="../css/font_big.css"; break; default: alert("error"); break; } //フォント用CSSのファイル名をクッキーの値として保存 //フォント切り替え機能をサイト全体適用するためpathに/（ルート）を指定 document.cookie="fontstyle="+targetFile+";path=/;"; window.location.reload(); //ページをリロードして設定を反映。 } //以下はページが読み込まれる際必ず実行される処理 var name="fontstyle"; var cookie=document.cookie; //クッキーを取得 if(-1==cookie.indexOf(name)){ //クッキーがなければmediumを指定（デフォルト） var file='../css/font_medium.css'; }else{ var pos_s=cookie.indexOf(name)+name.length+1; //クッキーの値の開始位置 var pos_e=cookie.indexOf(";",pos_s); //クッキーの値の終了位置 if(-1==pos_e){ //末尾にセミコロンがあるか？ var file=cookie.slice(pos_s); //無い }else{ var file=cookie.slice(pos_s,pos_e); //有る } } //クッキーの値に対応するCSSを読み込む。 document.write('<link rel="stylesheet" href="'+file+'" type="text/css" />'); ●●●●●css●●●●● 各種用意しました ●●●●●XHTML●●●●● <ul> <li onclick="fontChange('big')">大</li> <li onclick="fontChange('medium')">中</li> <li onclick="fontChange('small')">小</li> </ul> ちなみにこちらのサイトを参考にいたしました。 http://ks-product.com/arc/2007/01/0701082109.html また、XHTML内の<li onclick～>というのをCSSにして<li id="●●">にしたいと思っているのですが、その際CSSにはどのように記載すればよろしいのでしょうか？ 長々と大変申し訳ありませんが、よろしくお願いいたします！
- ベストアンサー
- JavaScript
- Cookieの設定
JavaScriptでCookieを使ってみようと思い、 以下のようなサンプル関数をもらってきたのですが。 この中の 24 * 60 * 60 * 1000 * 31 * 1 ってそれぞれの数値は何を示しているのでしょうか？？ 消去日の設定部分なのは良くわかるのですが。 初歩的な質問で、すいませんが、どなたか教えてください。 －－－－－－以下サンプルの関数－－－－－－ function SetCookie (name,value) { var argv = SetCookie.arguments; var argc = SetCookie.arguments.length; var expires = (argc > 2) ? argv[2] : null; var path = (argc > 3) ? argv[3] : null; var domain = (argc > 4) ? argv[4] : null; var secure = (argc > 5) ? argv[5] : false; document.cookie = name + "=" + escape (value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : ""); } // 消去日の設定は、この関数の中に指定します function set_data(name,put_data) { var expdate = new Date (); expdate.setTime (expdate.getTime() + (24 * 60 * 60 * 1000 * 31 * 1)); SetCookie (name,put_data,expdate); }
- ベストアンサー
- JavaScript
- Ｃｏｏｋｉｅが消える？
こんにちは 自作のWebページを作成したのですが 画面遷移を繰り返しているとCookieが 消えることがあるのです。 こういうことってあるのでしょうか？ 環境は以下の通りです。 OS:Win2000,XP Pro ブラウザ：IE 6.0 Cookie書込み：javascript setCookie("bbb","hammy") function setCookie(key, val, tmp) { tmp = key + "=" + escape(val) + "; "; tmp += "path=/aaa/;"; tmp += "expires=Tue, 31-Dec-2030 23:59:59; "; document.cookie = tmp; } Cookie読込み：javascript function getCookie(key, tmp1, tmp2, xx1, xx2, xx3) { tmp1 = " " + document.cookie + ";"; xx1 = xx2 = 0; len = tmp1.length; while (xx1 < len) { xx2 = tmp1.indexOf(";", xx1); tmp2 = tmp1.substring(xx1 + 1, xx2); xx3 = tmp2.indexOf("="); if (tmp2.substring(0, xx3) == key) { return(unescape(tmp2.substring(xx3 + 1, xx2 - xx1 - 1))); } xx1 = xx2 + 1; } return(""); } Cookie削除 javascript delCookies("CCC") function delCookies(key) { tmp = key; tmp += "=;path=/aaa/;"; tmp += "expires=Thu,01-Jan-2000 00:00:01 GMT"; document.cookie = tmp; } 画面遷移 A画面でCookie書込み⇒B画面でCookie情報を読込み ⇒C画面でCookie情報を読込み 現象:C画面でCookieが読込めない。 備考:C画面では読込みの前に別のCookieを削除しています。 B画面ではCookieの有無をチェックしているだけです。 何か疑問に思えることがありましたら教えてください。
- ベストアンサー
- JavaScript
- jquery.cookieを利用しての表示
cookieを使用した表示内容の変更を行おうとしています たとえば <a href="javascript:void(0);" onclick="Display('no1')">ID1</a> を押したら <div id="ID1"><p>これはID1のエリアです</p></div> が出てきて、cookieが残っている限り上記文章が表示されている 以前の質問に載っていたソースを使用し、製作しようと思っていたのですが リンク部分を下記のようにすると <a href="javascript:void(0);" onclick="Display('no1')">ID1</a> ↓ <a href="next.html" onclick="Display('no1')">ID1</a> 当たり前といえば当たり前なのですが リンクをクリックした際に、切り替わったエリアが一瞬表示し ページに移動してしまいます 私としてはページが移動した後に切り替わってほしいのですが なかなか上手くいきません 何か良い方法はないでしょうか・・・ 下記元ソースになります <script type="text/javascript"> function Display(no){ switch(no){ case 'no1': $("#ID1").show(); $("#ID2").hide(); $("#ID3").hide(); $.cookie('area',no,{expires:1}); break; case 'no2': $("#ID1").hide(); $("#ID2").show(); $("#ID3").hide(); $.cookie('area',no,{expires:1}); break; case 'no3': $("#ID1").hide(); $("#ID2").hide(); $("#ID3").show(); $.cookie('area',no,{expires:1}); break; } } $(function($){ if($.cookie('area')){ Display($.cookie('area')); }else{ Display('no1'); } }); </script> <h5><a href="javascript:void(0);" onclick="Display('no1')">ID1</a></h5> <h5><a href="javascript:void(0);" onclick="Display('no2')">ID2</a></h5> <h5><a href="javascript:void(0);" onclick="Display('no3')">ID3</a></h5> <div id="ID1"><p>これはID1のエリアです</p></div> <div id="ID2"><p>これはID2のエリアです。</p></div> <div id="ID3"><p>これはID3のエリアです。</p></div>
- ベストアンサー
- JavaScript
- jquery.cookie.jsを使用していますが
jquery.cookie.jsを使用していますが、ページ遷移した際に、クッキーが外れるみたいなのです。 現象としては、文字サイズや背景色を変えて（別CSSを読み込む）同じ階層のページへ遷移してもそのまま文字サイズも背景色も適用されたままなのですが、別階層（index.htmlからlink/a.htmlなどフォルダ内のHTMLファイル）に遷移すると適用が外れます。そしてlink/a.htmlでサイズ変更してそこからindex.htmlに戻ると変えたはずの文字サイズなどは解除されています。 おそらくjquery.cookie.jsの問題かと思いますが、どこをいじればいいのか分かりません。 お願いします。 以下、jquery.cookie.jsのソースです。 jQuery.cookie = function (key, value, options) { // key and value given, set cookie... if (arguments.length > 1 && (value === null || typeof value !== "object")) { options = jQuery.extend({}, options); if (value === null) { options.expires = -1; } if (typeof options.expires === 'number') { var days = options.expires, t = options.expires = new Date(); t.setDate(t.getDate() + days); } return (document.cookie = [ encodeURIComponent(key), '=', options.raw ? String(value) : encodeURIComponent(String(value)), options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : '' ].join('')); } // key and possibly options given, get cookie... options = value || {}; var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; };
- ベストアンサー
- JavaScript
- RubyのCookie読み込みにで躓いており、質問させて頂きました。
RubyのCookie読み込みにで躓いており、質問させて頂きました。 ------------------------------------------------------------------------------------ module Main def Cookie_r(cookie_kye = "") require "cgi" cgi = CGI.new cgi.cookies[cookie_kye]#.gsub(cookie_kye, "").gsub("; path=/cgi-bin/","") end end include Main print Cookie_r("userid") ------------------------------------------------------------------------------------ 結果：userid=1; path=/cgi-bin/ 「; path=/cgi-bin/」 は削除して「1」と返して欲しいのですが、 #以下の.gsubを記入すると応答してくれません。 「1」と回答させるにはどのようにすれば良いか？教えて頂けないでしょうか？ 環境： ・windows_xp_sp3+iis ・ActiveScriptRuby 1.8.7 ・IE8
- ベストアンサー
- Ruby
- id 及び class の指定についてです。
中途半端な知識で対応できず、苦しんでおります。 下のJavaScriptは、jquery.cookie.js 使用で <p>タグ内の文字のフォントサイズを変更しているのですが… <p>の指定を、idやclass の指定にするには、どう書き換えたら良いのでしょうか？ <script type="text/javascript"> <!-- $(function(){ $("p").css("font-size",$.cookie('fsize')); }); function font(size){ $("p").css("font-size",size); $.cookie("fsize",size,{expires:30,path:'/'}); } //--> </script> ちなみに、分かりやすく詳しく教えて頂けると非常に助かります。 もし宜しければ何方か教えて下さい。宜しくお願いします。
- 締切済み
- JavaScript
- jQueryで６行表示のループ
大雑把な質問なのですが、自分でもわかっているのですが、 もっと簡単なやり方がないものかと色々とやっていたのですが、 ありませんでしょうか？ $(document).ready(function() { var nCnt2 = 1; var nMax2 = 6; if(nMax2 < $('ul#portfolio li').length) { $('ul#portfolio li').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').each(function() { if(nCnt2 <= nMax2) { $(this).fadeIn('slow').removeClass('hidden'); } nCnt2++; }); } $('ul#navi a').click(function() { $(this).css('outline','none'); $('ul#navi .all').removeClass('current'); $(this).parent().addClass('current'); var filterVal = $(this).text().toLowerCase().replace(' ','-'); var nCnt = 1; var nMax = 6; if(filterVal == 'all') { $('ul#portfolio li').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').each(function() { if(nCnt <= nMax) { $(this).fadeIn('slow').removeClass('hidden'); } nCnt++; }); } else { $('ul#portfolio li').hide('fast').addClass('hidden'); $('ul#portfolio li').each(function() { if(!$(this).hasClass(filterVal)) { $(this).fadeOut('normal').addClass('hidden'); } else if (nCnt <= nMax) { $(this).fadeIn('slow').removeClass('hidden'); nCnt++; } }); } return false; }); });
- 締切済み
- JavaScript