Solved

Font Size Increase/Decrease

Posted on 2015-01-05
5
108 Views
Last Modified: 2015-01-15
Hello,

I have a website and I need put in a increase font section... i have the three graphics already inplace but I don't know how to make the buttons work....   Can anyone help with the code for this??

Here is the website address for the site i am using..

ckhatest.jadeddesigns.ca

Thank you,
0
Comment
Question by:cookmyster
  • 3
  • 2
5 Comments
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40532613
With jQuery:

I've used * for all elements, however you may want to just to p elements or divs or spans etc
jQuery(function() {
jQuery('#id_of_increase_btn').on('click', function() {
// to increase
jQuery('*').css('font-size', function(i, size) { return parseFloat(size)*1.2; });
});    

jQuery('#id_of_decrease_btn').on('click', function() {
// to decrease
jQuery('*').css('font-size', function(i, size) { return parseFloat(size)/1.2; });
});

});

Open in new window

0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 40532620
0
 
LVL 2

Author Comment

by:cookmyster
ID: 40533389
Hey Rob,

when i put the javascript into a .js file and call it form the page I am working on... it doesn't seem to work.. but when i put al the javascript on the same page.. it works??  not sure what i am doing wrong

Rich
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40533464
Yeah it shouldn't matter so how are you including it and where in your page?
Is the code exactly the same whether in the page or in an external file?
Regardless the code has to be within a $(function() {...}) initialization or a function that is called after the page had loaded.
0
 
LVL 2

Author Closing Comment

by:cookmyster
ID: 40552174
Awesome!!!  thank you very much
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now