January 22, 20206 yr Hello friends, I was .. following a simple font size changing tutorial but everytime i click the bigger or smaller link the paragraphp fonts ... of increase or decrease for an instant and againt returns back to original size here is the code index.php <!DOCTYPE html> <html lang="en-Us"> <head> <meta charset="UTF-8"> <title>Jquery id selector</title> <style> </style> </head> <body> Font size:<br> <a href="" id="smaller">Smaller<a/> <br> <a href="" id="bigger">Bigger<a/> <p>This is some text</p> <p>This is some more text</p> <script type="text/javascript" src ="js/jquery.js"></script> <script type="text/javascript" src ="js/selectors.js"></script> </body> </html> selectors.js function change_size(element,size) { var current = parseInt(element.css("font-size")); if(size == "smaller") { var new_size = current - 2; } else if(size == "bigger") { var new_size = current + 2; } element.css("font-size",new_size + "px"); } $("#smaller").click(function(){ change_size($("p"),"smaller"); }); $("#bigger").click(function(){ change_size($("p"),"bigger"); }); i am testing this on wamp servere
January 22, 20206 yr Author ok i got this fixed adding # in anchor tags fixed this <a href="#" id="smaller">Smaller<a/> <br> <a href="#" id="bigger">Bigger<a/>
January 22, 20206 yr I'd use a button for this, anchors should only really be used if they are going to update the URL in someway. You might also want to store the users preference in a cookie or localStorage so it persists across subsequent visits and while navigating your website.
Create an account or sign in to comment