473,411 Members | 2,093 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,411 software developers and data experts.

jquery text sizer issue

Hi,

I am new to jquery, experts please solve this issue and post me a reply.

I created a textsizer in css and jquery. The purpose of this is,

1) on webpage there is a link called "textsize", when you click a popup is shown and it contains 3options (increase font, decrease font and reset font).

2) The web page is designed with three column layout, when i click on text sizer only the contents in the second column increases remaining column-1 and column-3 will remain the same as default.

Now the problem is,
--> I had contents,headings and links inside the column-2 layout, but when i click on text sizer(increase font, decrease font and reset font), only the content is increasing, the heading and the links are not increasing. I want the headings and links inside the column-2 also to be increased, decreased and reset.

Expand|Select|Wrap|Line Numbers
  1. /* starting of textsize */ 
  2. li a.textTool:hover, li a.textToolActive {  
  3.     background:#0063be url('../Images/tools/text-on.gif') -1px 0px no-repeat; 
  4.     color:#ffffff; 
  5.     text-decoration:none; 
  6.     height:25px; 
  7. /*    width:55px; */ 
  8.     margin-top:0px; 
  9.     background-color:#0063be; 
  10.  
  11.  
  12. .text-tool { 
  13.     position:absolute; 
  14.     left:704px; 
  15.     width:125px; 
  16.     top:228px; 
  17.     right:260px; 
  18.  
  19.         -moz-box-shadow: 3px 3px 4px #000;     
  20.     -webkit-box-shadow: 3px 3px 4px #000;      
  21.     box-shadow: 3px 3px 4px #000;     
  22.     /* For IE 8 */     
  23.     -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";     
  24.     /* For IE 5.5 - 7 */     
  25.     filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); 
  26.  
  27. .text-tool .header {  
  28.     background:#0063be; 
  29.     width:125px; 
  30.     height:25px; 
  31.     position:relative; 
  32. }  
  33. .text-tool .header h5 {  
  34.     color:#fff; 
  35.     padding:5px 0 12px 2px; 
  36.     font-size:1.1em; 
  37.     font-weight:bold; 
  38. .text-tool .header .close { 
  39.     position:absolute; 
  40.     top:10px; 
  41.     right:10px; 
  42.     cursor:pointer;  
  43. .text-tool .body {  
  44.     background:#fff; 
  45.     border-bottom:#ccc solid 1px; 
  46.     border-right:#ccc solid 1px; 
  47.     border-left:#ccc solid 1px; 
  48.     padding:5px 15px 0 0px; 
  49.     height:25px; 
  50.     width:125px; 
  51.     position:relative; 
  52. }  
  53. .text-tool .body .a1{ 
  54.     display:inline; 
  55.  
  56. /* End of textsize section */ 
  57.  
Expand|Select|Wrap|Line Numbers
  1. /********************/ 
  2.   $("#content-top a.textTool").click(function () {
  3.    $('a.textTool').removeClass("textTool").addClass('textToolActive');
  4.       $('#content-top a.textTool').removeClass("textTool").addClass('textToolActive');
  5.    var offset = $(this).offset();  
  6.    var tLeft = offset.left;  
  7.    var tTop = offset.top;
  8.    var topOffset = $(this).height();
  9.    var tWidth = $(this).width();
  10.    var xTip = (tLeft-tWidth+6)+"px";  
  11.    var yTip = (tTop+topOffset+12)+"px";  
  12.    $('#content-top .text-tool').css({'top' : yTip, 'left' : xTip});    
  13.       $('#content-top .text-tool').removeClass("hide");
  14.   });
  15.  
  16.   $("#content-top .text-tool .close").click(function () {
  17.    $('#content-top a.textToolActive').removeClass("textToolActive").addClass('textTool');
  18.    $('#content-top .text-tool').addClass("hide");
  19.    $('#content-top .text-tool .body .page-tools-email').css({ 'display': 'none' });
  20.    $('#content-top .text-tool .body').css({ 'height': '25px' });
  21.   });
  22.   /********************/
  23.   //Font sizer starts here
  24. $(" a.textTool").click(function () {
  25.       $('a.textTool').removeClass("textTool").addClass('textToolActive');
  26.       $('.page-tool').removeClass("hide");
  27.   });
  28. $(document).ready(function(){
  29.           //$(document).height(".page-tool .body"); // returns height of HTML document
  30.  var MaximumFontSize = 15;
  31.  var MinimumFontSize = 6;
  32.  var $currentObject = $(".threecoloumlayout") .children(".column-2");
  33.  
  34.  
  35.   // Reset Font Size
  36.   var originalFontSize = $currentObject.css('font-size');
  37.   $("#resetFont").click(function(event){
  38.  event.preventDefault();        
  39.  $currentObject.css('font-size', originalFontSize);
  40.   });
  41.   // Increase Font Size
  42.   $("#increaseText").click(function(){
  43.  var currentFontSize = $currentObject.css('font-size');  
  44.  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  45.     var newFontSize = currentFontSizeNum+1;
  46.  if (newFontSize < MaximumFontSize) {
  47.   $currentObject.css('font-size', newFontSize);
  48.  } 
  49.  return false;
  50.   });
  51.   // Decrease Font Size
  52.  
  53.      $("#DecreaseText").click(function(){
  54.    var currentFontSize = $currentObject.css('font-size');
  55.   var currentFontSizeNum = parseFloat(currentFontSize, 10);
  56.     var newFontSize = currentFontSizeNum-3;
  57.  //alert('currentFontSizeNum');
  58.  if (newFontSize > MinimumFontSize) {
  59.   $currentObject.css('font-size', newFontSize);
  60.  }
  61.  return false;
  62.   });
  63.  
  64. });
  65. //Font sizer Ends here
  66.  
  67.  
Expand|Select|Wrap|Line Numbers
  1. <div class="text-tool hide"> 
  2.           <div class="header"> 
  3.             <h5>Text sizer</h5> 
  4.             <div class="close"><img src="http://bytes.com/submit/images/tools/close.gif" width="10" height="10" alt="Close" title="Close" /></div> 
  5.           </div> 
  6.           <div class="body"> 
  7.           <div class="a1"> 
  8.           <a href="#" id="increaseText"><img src="http://bytes.com/submit/images/tools/BigA.jpg"/></a> 
  9.           <a href="#" id="resetFont"><img src="http://bytes.com/submit/images/tools/textreset.jpg"/></a> 
  10.              <a href="#" id="DecreaseText"><img src="http://bytes.com/submit/images/tools/smallA.jpg"/></a> 
  11.           </div> 
  12.  
  13.           </div> 
  14.           </div> 
  15.           </div> 
  16.  
Appreciate your replies.

Thanks,
Jai
Dec 22 '10 #1
6 2302
acoder
16,027 Expert Mod 8TB
If you notice, on line 32:
Expand|Select|Wrap|Line Numbers
  1. var $currentObject = $(".threecoloumlayout") .children(".column-2");
you're selecting column-2 and the rest of the code only applies the font size changes to $currentObject.
Dec 23 '10 #2
Thanks for your reply. Since i am new to jquery. i was googling and trying to solve the above problem but i was unable to find the solution. It would be grateful if you could suggest me on how to change the code.
Dec 23 '10 #3
acoder
16,027 Expert Mod 8TB
Post the HTML code of the page.
Dec 23 '10 #4
the HTML code is
Expand|Select|Wrap|Line Numbers
  1. <!-- Start of Text Tool -->
  2.           <div class="text-tool hide">
  3.             <div class="header">
  4.               <h5>Text sizer</h5>
  5.               <div class="close"><img src="http://bytes.com/topic/javascript/images/tools/close.gif" width="10" height="10" alt="Close" title="Close" /></div>
  6.             </div>
  7.             <div class="body">
  8.               <div class="a1"> <a href="#" id="increaseText"><img src="http://bytes.com/topic/javascript/images/tools/BigA.jpg"/></a> <a href="#" id="resetFont"><img src="http://bytes.com/topic/javascript/images/tools/textreset.jpg"/></a> <a href="#" id="DecreaseText"><img src="http://bytes.com/topic/javascript/images/tools/smallA.jpg"/></a> </div>
  9.             </div>
  10.           </div>
  11.         </div>
  12.         <!-- End of text Tool --> 
  13.  
  14.  
CSS code
Expand|Select|Wrap|Line Numbers
  1. /* starting of textsize */  
  2. li a.textTool:hover, li a.textToolActive {   
  3.     background:#0063be url('../Images/tools/text-on.gif') -1px 0px no-repeat;  
  4.     color:#ffffff;  
  5.     text-decoration:none;  
  6.     height:25px;  
  7. /*    width:55px; */  
  8.     margin-top:0px;  
  9.     background-color:#0063be;  
  10. }  
  11.  
  12.  
  13. .text-tool {  
  14.     position:absolute;  
  15.     left:704px;  
  16.     width:125px;  
  17.     top:228px;  
  18.     right:260px;  
  19.  
  20.         -moz-box-shadow: 3px 3px 4px #000;      
  21.     -webkit-box-shadow: 3px 3px 4px #000;       
  22.     box-shadow: 3px 3px 4px #000;      
  23.     /* For IE 8 */      
  24.     -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";      
  25.     /* For IE 5.5 - 7 */      
  26.     filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');  
  27. }  
  28.  
  29. .text-tool .header {   
  30.     background:#0063be;  
  31.     width:125px;  
  32.     height:25px;  
  33.     position:relative;  
  34. }   
  35. .text-tool .header h5 {   
  36.     color:#fff;  
  37.     padding:5px 0 12px 2px;  
  38.     font-size:1.1em;  
  39.     font-weight:bold;  
  40. }  
  41. .text-tool .header .close {  
  42.     position:absolute;  
  43.     top:10px;  
  44.     right:10px;  
  45.     cursor:pointer;   
  46. }  
  47. .text-tool .body {   
  48.     background:#fff;  
  49.     border-bottom:#ccc solid 1px;  
  50.     border-right:#ccc solid 1px;  
  51.     border-left:#ccc solid 1px;  
  52.     padding:5px 15px 0 0px;  
  53.     height:25px;  
  54.     width:125px;  
  55.     position:relative;  
  56. }   
  57. .text-tool .body .a1{  
  58.     display:inline;  
  59.  
  60. }  
  61. /* End of textsize section */  
  62.  
Jquery code
Expand|Select|Wrap|Line Numbers
  1. $("#content-top a.textTool").click(function () { 
  2.    $('a.textTool').removeClass("textTool").addClass('textToolActive'); 
  3.       $('#content-top a.textTool').removeClass("textTool").addClass('textToolActive'); 
  4.    var offset = $(this).offset();   
  5.    var tLeft = offset.left;   
  6.    var tTop = offset.top; 
  7.    var topOffset = $(this).height(); 
  8.    var tWidth = $(this).width(); 
  9.    var xTip = (tLeft-tWidth+6)+"px";   
  10.    var yTip = (tTop+topOffset+12)+"px";   
  11.    $('#content-top .text-tool').css({'top' : yTip, 'left' : xTip});     
  12.       $('#content-top .text-tool').removeClass("hide"); 
  13.   }); 
  14.  
  15.   $("#content-top .text-tool .close").click(function () { 
  16.    $('#content-top a.textToolActive').removeClass("textToolActive").addClass('textTool'); 
  17.    $('#content-top .text-tool').addClass("hide"); 
  18.    $('#content-top .text-tool .body .page-tools-email').css({ 'display': 'none' }); 
  19.    $('#content-top .text-tool .body').css({ 'height': '25px' }); 
  20.   }); 
  21.   /********************/ 
  22.   //Font sizer starts here 
  23. $(" a.textTool").click(function () { 
  24.       $('a.textTool').removeClass("textTool").addClass('textToolActive'); 
  25.       $('.page-tool').removeClass("hide"); 
  26.   }); 
  27. $(document).ready(function(){ 
  28.           //$(document).height(".page-tool .body"); // returns height of HTML document 
  29.  var MaximumFontSize = 15; 
  30.  var MinimumFontSize = 6; 
  31.  var $currentObject = $(".threecoloumlayout") .children(".column-2"); 
  32.  
  33.  
  34.   // Reset Font Size 
  35.   var originalFontSize = $currentObject.css('font-size'); 
  36.   $("#resetFont").click(function(event){ 
  37.  event.preventDefault();         
  38.  $currentObject.css('font-size', originalFontSize); 
  39.   }); 
  40.   // Increase Font Size 
  41.   $("#increaseText").click(function(){ 
  42.  var currentFontSize = $currentObject.css('font-size');   
  43.  var currentFontSizeNum = parseFloat(currentFontSize, 10); 
  44.     var newFontSize = currentFontSizeNum+1; 
  45.  if (newFontSize < MaximumFontSize) { 
  46.   $currentObject.css('font-size', newFontSize); 
  47.  }  
  48.  return false; 
  49.   }); 
  50.   // Decrease Font Size 
  51.  
  52.      $("#DecreaseText").click(function(){ 
  53.    var currentFontSize = $currentObject.css('font-size'); 
  54.   var currentFontSizeNum = parseFloat(currentFontSize, 10); 
  55.     var newFontSize = currentFontSizeNum-3; 
  56.  //alert('currentFontSizeNum'); 
  57.  if (newFontSize > MinimumFontSize) { 
  58.   $currentObject.css('font-size', newFontSize); 
  59.  } 
  60.  return false; 
  61.   }); 
  62.  
  63. }); 
  64. //Font sizer Ends here 
  65.  
Dec 24 '10 #5
acoder
16,027 Expert Mod 8TB
No, I've seen that code. I meant the HTML code of the page that needs resizing, i.e. the 3 column layout page.
Dec 24 '10 #6
Here is the html code in which the text sizer should affect on all the links, headings and contents.

Expand|Select|Wrap|Line Numbers
  1. <div class="column-2">
  2.         <div class="formHeader section">
  3.           <form action="#">
  4.             <fieldset>
  5.               <div class="formHeaderTitle section">
  6.                 <div class="title">
  7.                   <h4>What is the location's address?</h4>
  8.                   If you prefer, <a href="#" title="provide the meter number"> provide the meter number. </a> </div>
  9.                 <div class="explanation"> All fields are required unless noted. </div>
  10.               </div>
  11.               <div class="formInput section">
  12.                 <div class="fields">
  13.                   <div class="row1 rows">
  14.                     <div class="col1">
  15.                       <div class="inner">
  16.                         <label for="housenumber">House#:</label>
  17.                         <div class="note"></div>
  18.                       </div>
  19.                       <div class="flyout"></div>
  20.                     </div>
  21.                     <div class="col2">
  22.                       <div class="floatLeft">
  23.                         <input name="housenumber" title="House#" type="text" id="housenumber"/>
  24.                       </div>
  25.                       <div class="formInputHelp">&nbsp;&nbsp;<img alt="Help Icon" src="http://bytes.com/topic/javascript/images/blueQuestionMark.gif"/></div>
  26.                       <div class="note"></div>
  27.                     </div>
  28.                   </div>
  29.                   <div class="row1 rows">
  30.                     <div class="col1">
  31.                       <div class="inner">
  32.                         <label for="streetdirection">Street Direction:</label>
  33.                         <div class="note">(Optional)</div>
  34.                       </div>
  35.                       <div class="flyout"></div>
  36.                     </div>
  37.                     <div class="col2">
  38.                       <div class="floatLeft">
  39.                         <select name="streetdirection" title="Street Direction" id="streetdirection">
  40.                           <option>Select</option>
  41.                         </select>
  42.                       </div>
  43.                       <div class="formInputHelp">&nbsp;&nbsp;<img alt="Help Icon" src="http://bytes.com/topic/javascript/images/blueQuestionMark.gif"/></div>
  44.                       <div class="note"></div>
  45.                     </div>
  46.                   </div>
  47.                   <div class="row1 rows">
  48.                     <div class="col1">
  49.                       <div class="inner">
  50.                         <label for="street_name">Street Name:</label>
  51.                         <div class="note"></div>
  52.                       </div>
  53.                       <div class="flyout"></div>
  54.                     </div>
  55.                     <div class="col2">
  56.                       <input name="street_name" title="Street Name" type="text" id="street_name"/>
  57.                       <div class="note"></div>
  58.                     </div>
  59.                   </div>
  60.                   <div class="row1 rows">
  61.                     <div class="col1">
  62.                       <div class="inner">
  63.                         <label for="suffix">Suffix:</label>
  64.                         <div class="note">(Optional)</div>
  65.                       </div>
  66.                       <div class="flyout"></div>
  67.                     </div>
  68.                     <div class="col2">
  69.                       <div class="floatLeft">
  70.                         <select name="suffix" title="Suffix" id="suffix">
  71.                           <option>Select</option>
  72.                         </select>
  73.                       </div>
  74.                       <div class="formInputHelp">&nbsp;&nbsp;<img alt="Help Icon" src="http://bytes.com/topic/javascript/images/blueQuestionMark.gif"/></div>
  75.                       <div class="note"></div>
  76.                     </div>
  77.                   </div>
  78.                   <div class="row1 rows">
  79.                     <div class="col1">
  80.                       <div class="inner">
  81.                         <label for="unitapt">Unit/Apt:</label>
  82.                         <div class="note">(Optional)</div>
  83.                       </div>
  84.                       <div class="flyout"></div>
  85.                     </div>
  86.                     <div class="col2">
  87.                       <div class="floatLeft">
  88.                         <select name="unitapt" title="Unit/Apt" id="unitapt">
  89.                           <option>Select</option>
  90.                         </select>
  91.                       </div>
  92.                       <div class="formInputHelp">&nbsp;&nbsp;<img alt="Help Icon" src="http://bytes.com/topic/javascript/images/blueQuestionMark.gif"/></div>
  93.                       <div class="note"></div>
  94.                     </div>
  95.                   </div>
  96.                   <div class="row1 rows">
  97.                     <div class="col1">
  98.                       <div class="inner">
  99.                         <label for="unitnumber">Unit#:</label>
  100.                         <div class="note">(Optional)</div>
  101.                       </div>
  102.                       <div class="flyout"></div>
  103.                     </div>
  104.                     <div class="col2">
  105.                       <input name="unitnumber" title="Unit#" type="text" id="unitnumber"/>
  106.                       <div class="note"></div>
  107.                     </div>
  108.                   </div>
  109.                   <div class="row1 rows">
  110.                     <div class="col1">
  111.                       <div class="inner">
  112.                         <label for="city">City:</label>
  113.                         <div class="note">(Optional)</div>
  114.                       </div>
  115.                       <div class="flyout"></div>
  116.                     </div>
  117.                     <div class="col2">
  118.                       <input name="city" title="City" type="text" id="city"/>
  119.                       <div class="note"></div>
  120.                     </div>
  121.                   </div>
  122.                   <div class="row1 rows">
  123.                     <div class="col1">
  124.                       <div class="inner">
  125.                         <label for="state">State:</label>
  126.                         <div class="note">(Optional)</div>
  127.                       </div>
  128.                       <div class="flyout"></div>
  129.                     </div>
  130.                     <div class="col2">
  131.                       <select name="state" title="State" id="state">
  132.                         <option>Select</option>
  133.                       </select>
  134.                       <div class="note"></div>
  135.                     </div>
  136.                   </div>
  137.                   <div class="row1 rows">
  138.                     <div class="col1">
  139.                       <div class="inner">
  140.                         <label for="zipcode">Zip Code:</label>
  141.                         <div class="note"></div>
  142.                       </div>
  143.                       <div class="flyout"></div>
  144.                     </div>
  145.                     <div class="col2">
  146.                       <input name="zipcode" title="Zip Code" type="text" id="zipcode" />
  147.                       <div class="note"></div>
  148.                     </div>
  149.                   </div>
  150.                 </div>
  151.               </div>
  152.               <div class="whitespacer"></div>
  153.               <div class="floatRight">
  154.                 <button type="button" class="buttonSubmit" title="Check service availability">Check service availability</button>
  155.               </div>
  156.             </fieldset>
  157.           </form>
  158.         </div>
  159.       </div>
  160.  
Dec 24 '10 #7

Sign in to post your reply or Sign up for a free account.

Similar topics

9
by: Andrew Durstewitz | last post by:
Hi! I am having a really strange issue. I have a few users calling in saying they are getting an error. On further review I found this line is what is causing it... Set strLookup =...
0
by: Sébastien Bicaïs | last post by:
Hi, I made a VB class to generate images on the fly. The idea is to generate an image with a text, a font, a font size, a maximum width and height given as parameters, and the text to fit in the...
2
by: Danny J. Lesandrini | last post by:
OK, I have never noticed this before, but I'm getting a consistent issue with text boxes on my Access form in an ADP with data in SQL Server. 1) Click in a text box with text 2) Cursor is...
3
by: SalimShahzad | last post by:
DEAR GURUS, CAN ANY ONE CHECK THIS CODE WHEN I RUN ON UNBOUND TEXT BOX IT WORKS 100%, BUT IF I USED ANY BOUND TEXTBOX IT WORKS SOME TIME AND SOME TIME NOT???? AND IN THE TABLE IT IS SET AS DATE,...
0
by: Catherine Jones | last post by:
I have one more issue, please help me to find the solution , My question as follows.. In the rich text box, after an undo or redo operation how can we get information on the following things.....
1
by: John | last post by:
I have a process that reads a text file then uploads the data into a database table. The text file has 10 lines at the end of the file that are blank BUT it appears that the enter key or space bar...
8
chunk1978
by: chunk1978 | last post by:
hi there... i've been building an internet form recently, and i've realized there seems to be a slight difference between the way HTML text is processed between my Mac (Mac OS X v10.4.8) and my PC...
1
by: Simon Gare | last post by:
Hi, I cant seem to alter the text size on the code below only the colour, the code you see is all that the page consists of from start to finish that's all of it, cant apply css nothing works. ...
2
by: Mr. B | last post by:
In my application, I have a Combo Box and Text Box. At Startup, I fill the Combo Box with information that I allow the Users to select to do certain Calculations. My Text Box shows a Value...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.