dlcmpls Posted July 7, 2007 Share Posted July 7, 2007 Hi all. I need a little help with a small problem. I've written a bit of script that allows a user to change the font size on a web page. I am aware that this can be done via browser settings, but the client wants the feature on the web page. My script uses a cookie to keep the users font choice persistent. However, when I run the script, the web page doesn't recognize the users font choice unless I refresh the page. Once I refresh the page, everything works fine. So I'm confused as to why the browser doesn't recognize the font choice right away. Any suggestions? Here's my code: <?php //////// CHECK TO SEE IF THE FONTCHOICE VARIABLE IS FOUND IN THE URL. THE VARIABLE WILL BE PASSED IF A USER CLICKS A LINK TO CHANGE THE FONT SIZE //////// IF WE FIND THE VARIABLE fontchoice SET A COOKIE SO THE USERS FONT CHOICE WILL PERSIST if ($_GET['fontchoice']) { setcookie(CookieFontSize, $_GET['fontchoice'], time() +60*60*24*7*365); } //////// CHECK TO SEE IF A COOKIE EXISTS. IF IT DOES, SET THE FONT SIZE TO THE USERS DESIRED SIZE if(isset($_COOKIE['CookieFontSize'])) { $fontsize = $_COOKIE['CookieFontSize']; echo "Your font size is " . $fontsize; } //////// NO COOKIE FOUND SO SET THE FONT SIZE TO A DEFAULT OF 12 else { $fontsize = "12" ; echo "No font set!"; } ?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <style type="text/css"> <!-- p, li, br, div, span, td { font-family: Arial, Helvetica, sans-serif; font-size: <? echo $fontsize ; ?>px; color: #000000; text-decoration: none; } .style12 {font-size: 12px} .style18 {font-size: 18px} .style24 {font-size: 24px} .style30 {font-size: 30px} --> </style> </head> <body> <p>Lorem ipsum dolor sit amet. </p> <p> </p> <hr> <p> </p> <p>change font size:</p> <p><a href="cookie.php?fontchoice=12" class="style12">A</a> <a href="cookie.php?fontchoice=18" class="style18">A</a> <a href="cookie.php?fontchoice=24" class="style24">A</a> <a href="cookie.php?fontchoice=30" class="style30">A</a> </p> </body> </html> Link to comment https://forums.phpfreaks.com/topic/58848-solved-help-with-dynamic-css-changing-font-size/ Share on other sites More sharing options...
sKunKbad Posted July 7, 2007 Share Posted July 7, 2007 If you want to have the font change immediately before refreshing, you will need to use javascript to apply the fontsize to the body of the page. I have only limited experience with javascript, but you will need an onclick event. The cookie will have the fontsize for the following pages. Link to comment https://forums.phpfreaks.com/topic/58848-solved-help-with-dynamic-css-changing-font-size/#findComment-291992 Share on other sites More sharing options...
Wuhtzu Posted July 7, 2007 Share Posted July 7, 2007 I seems like you can't set a cookie and retrieve it's value in the same request.. <?php $cookie_name = "test_cookie_" . rand(0,100000); setcookie($cookie_name,"Some test value" , time()+10); echo $_COOKIE[$cookie_name]; ?> The above code never resulted in "Some test value" being printed in my browser. Even when I hardcoded the cookie name it didn't print anything. So I guess it must be a fact that you can't set and access a cookie in the same request. <?php $cookie_name = "test_cookie_" . rand(0,100000); setcookie($cookie_name,"Some test value" , time()+10); if(isset($_COOKIE[$cookie_name])) { echo "Cookie set"; } else{ echo "Cookie not set"; } ?> Also, the above code always resulted in "Cookie not set" being displayed. So if you set a cookie and test for it's existence with isset() in the same request isset() will return false. Link to comment https://forums.phpfreaks.com/topic/58848-solved-help-with-dynamic-css-changing-font-size/#findComment-291998 Share on other sites More sharing options...
Wuhtzu Posted July 7, 2007 Share Posted July 7, 2007 This is an example of how you can achieve your functionality. <?php //If the fontsize parameter has a meaningful value (numeric) use that if(preg_match("/^[0-9]+$/",$_GET['fontsize'])) { $fontsize = $_GET['fontsize']; setcookie("FontSize",$fontsize,time() + 60 * 60 *24 *365); } //Else if the FontSize-cookie is set use that elseif($_COOKIE['FontSize']) { $fontsize = $_COOKIE['FontSize']; } //Else use some standard value else{ $fontsize = 12; } ?> <html> <head> <style type="text/css"> p { font-size: <?php echo $fontsize; ?>px; } </style> </head> <body> <p>Some text to test the dynamic font-size change</p> <br> <a href="cookietest.php?fontsize=24">Fontsize 24</a> <br> <a href="cookietest.php?fontsize=48">Fontsize 48</a> <br> <a href="cookietest.php?fontsize=96">Fontsize 96</a> </body> </html> The only fundamental difference between your code and my snippet above is that I set assign $fontsize a value in all my "if-cases". This ensures that if the cookie is being set, which it is when the url parameter is present, the $fontsize variable will be set anyway and therefore the user will see the change in font size immediately Link to comment https://forums.phpfreaks.com/topic/58848-solved-help-with-dynamic-css-changing-font-size/#findComment-292028 Share on other sites More sharing options...
Wuhtzu Posted July 7, 2007 Share Posted July 7, 2007 I can't seem to find the edit function... :S The code in my previous reply was saved as a file called cookietest.php which is why the links look like tihs: <a href="cookietest.php?fontsize=96">Fontsize 96</a> Those of course needs to be changed if you wanna save the file under another name. Alternatively you can try it out here: http://wuhtzu.dk/random/cookietest.php Link to comment https://forums.phpfreaks.com/topic/58848-solved-help-with-dynamic-css-changing-font-size/#findComment-292043 Share on other sites More sharing options...
dlcmpls Posted July 7, 2007 Author Share Posted July 7, 2007 Thanks Wuhtzu. I got the code. Works like a charm. As always, the folks here at the "freaks" forum are the greatest! dlc Link to comment https://forums.phpfreaks.com/topic/58848-solved-help-with-dynamic-css-changing-font-size/#findComment-292051 Share on other sites More sharing options...
Barand Posted July 7, 2007 Share Posted July 7, 2007 I've included js code to five immediate size change and option to save to cookie <?php if (isset($_GET['fontsize'])) { $fontsize = $_GET['fontsize']; setcookie('fontsize', $fontsize); } elseif (isset($_COOKIE['fontsize'])) { $fontsize = $_COOKIE['fontsize']; } else $fontsize = '12pt'; ?> <html> <head> <meta name="generator" content="PhpED Version 4.5 (Build 4513)"> <title>Font Change</title> <meta name="author" content="Barand"> <script language="javascript"> function changefont (sz) { obj = document.getElementById("main"); obj.style.fontSize = sz; document.fm1.fontsize.value = sz; } </script> </head> <body onload='changefont("<?php echo $fontsize ?>")'> <div style="font-size: 12pt" id="main"> Set font size <a href='javascript:changefont("12pt")'>12</a> <a href='javascript:changefont("18pt")'>18</a> <a href='javascript:changefont("24pt")'>24</a> <a href='javascript:changefont("48pt")'>48</a> <a href='javascript:changefont("72pt")'>72</a> <p>Hello world! </p> <form name="fm1"> <input type="hidden" name="fontsize" value="12pt"> <input type="submit" name="sub" value="Save font size"> </form> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/58848-solved-help-with-dynamic-css-changing-font-size/#findComment-292058 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.