Jump to content

[SOLVED] Help with dynamic CSS - Changing font size

dlcmpls

By dlcmpls
in PHP Coding Help

 Share

Recommended Posts

dlcmpls Member

dlcmpls

Posted
Posted

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
Share on other sites
sKunKbad Advanced Member

sKunKbad

Posted
Posted

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
Share on other sites
Wuhtzu Member

Wuhtzu

Posted
Posted

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
Share on other sites
Wuhtzu Member

Wuhtzu

Posted
Posted

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
Share on other sites
Wuhtzu Member

Wuhtzu

Posted
Posted

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
Share on other sites
Barand Prolific Member

Barand

Posted
Posted

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
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.