Member Avatar for bufospro

Hi,
I would like to make two icons in my page so as to click on them and increase or decrease the font size of paragraph.
The problem I have is that I want to change the size only for a paragraph.

My paragraph's text is from a database.
So the id is different in each paragraph.

My code is :

<script type="text/javascript">
function resizeText(multiplier,p) {
   
  if (document.getElementById(p).style.fontSize == "") {
    document.getElementById(p).style.fontSize = "1.0em";
  }
  document.getElementById(p).style.fontSize = parseFloat(document.getElementById(p).style.fontSize) + (multiplier * 0.2) + "em";
}
</script>


 $c=0; //counter for changing id name

//.... select from database 
//......

     while ($row = mysql_fetch_assoc($result))
     {
        $c = $c +1;
                  $text = ... // is from db
                  $p="par".$c;

echo "<p align='right'><img id='plustext' alt='Increase text size' src='images/ste.gif' width='19' height='29' onclick='resizeText(1,".$p.")'/></a>";
         
echo "<p align='justify' id='".$p."'>".$text."</p>";
          }

But it doesn't work.
Any help ?

Thanks a lot

  • 2 Contributors
  • 4 Replies
  • 156 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by nav33n
Member Avatar for bufospro

Any ideas ???

Member Avatar for nav33n

Not sure what exactly I changed, but this works.

<html>
<head>
<script type="text/javascript">
function resizeText(multiplier,p,what) {
	if (document.getElementById(p).style.fontSize == "") {
		document.getElementById(p).style.fontSize = "1.0em";
  	}
  	if(what == "increase") {
  		document.getElementById(p).style.fontSize = parseFloat(document.getElementById(p).style.fontSize) + (multiplier * 0.2) + "em";
  	} else {
  		document.getElementById(p).style.fontSize = parseFloat(document.getElementById(p).style.fontSize) - (multiplier * 0.2) + "em";
  	}
}
</script>
</head>
<body>
<?php 
 $c=0;
 $c = $c +1;
 $text = "Click the button to increase the size of the font. Keep clicking it until you get tired.";
 $p="par".$c;

echo "<p align='right'><input type='button' name='button' value='Increase font' onclick='resizeText(1,\"$p\",\"increase\");' />";
echo "<p align='right'><input type='button' name='button' value='Decrease font' onclick='resizeText(1,\"$p\",\"decrease\");' />";         
echo "<p align='justify' id='".$p."'>".$text."</p>";
?>
</body>
</html>

Cheers!
Naveen

Member Avatar for bufospro

Thanks a lot!!

Member Avatar for nav33n

You are welcome :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.