jquery text sizer issue

[nataraj jaideep]

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,headin gs 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.

/* starting of textsize */ 
li a.textTool:hover, li a.textToolActive {  
    background:#0063be url('../Images/tools/text-on.gif') -1px 0px no-repeat; 
    color:#ffffff; 
    text-decoration:none; 
    height:25px; 
/*    width:55px; */ 
    margin-top:0px; 
    background-color:#0063be; 
} 
 
 
.text-tool { 
    position:absolute; 
    left:704px; 
    width:125px; 
    top:228px; 
    right:260px; 
 
        -moz-box-shadow: 3px 3px 4px #000;     
    -webkit-box-shadow: 3px 3px 4px #000;      
    box-shadow: 3px 3px 4px #000;     
    /* For IE 8 */     
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";     
    /* For IE 5.5 - 7 */     
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); 
} 
 
.text-tool .header {  
    background:#0063be; 
    width:125px; 
    height:25px; 
    position:relative; 
}  
.text-tool .header h5 {  
    color:#fff; 
    padding:5px 0 12px 2px; 
    font-size:1.1em; 
    font-weight:bold; 
} 
.text-tool .header .close { 
    position:absolute; 
    top:10px; 
    right:10px; 
    cursor:pointer;  
} 
.text-tool .body {  
    background:#fff; 
    border-bottom:#ccc solid 1px; 
    border-right:#ccc solid 1px; 
    border-left:#ccc solid 1px; 
    padding:5px 15px 0 0px; 
    height:25px; 
    width:125px; 
    position:relative; 
}  
.text-tool .body .a1{ 
    display:inline; 
 
} 
/* End of textsize section */ 
 

/********************/ 
  $("#content-top a.textTool").click(function () {
   $('a.textTool').removeClass("textTool").addClass('textToolActive');
      $('#content-top a.textTool').removeClass("textTool").addClass('textToolActive');
   var offset = $(this).offset();  
   var tLeft = offset.left;  
   var tTop = offset.top;
   var topOffset = $(this).height();
   var tWidth = $(this).width();
   var xTip = (tLeft-tWidth+6)+"px";  
   var yTip = (tTop+topOffset+12)+"px";  
   $('#content-top .text-tool').css({'top' : yTip, 'left' : xTip});    
      $('#content-top .text-tool').removeClass("hide");
  });
 
  $("#content-top .text-tool .close").click(function () {
   $('#content-top a.textToolActive').removeClass("textToolActive").addClass('textTool');
   $('#content-top .text-tool').addClass("hide");
   $('#content-top .text-tool .body .page-tools-email').css({ 'display': 'none' });
   $('#content-top .text-tool .body').css({ 'height': '25px' });
  });
  /********************/
  //Font sizer starts here
$(" a.textTool").click(function () {
      $('a.textTool').removeClass("textTool").addClass('textToolActive');
      $('.page-tool').removeClass("hide");
  });
$(document).ready(function(){
          //$(document).height(".page-tool .body"); // returns height of HTML document
 var MaximumFontSize = 15;
 var MinimumFontSize = 6;
 var $currentObject = $(".threecoloumlayout") .children(".column-2");
 
 
  // Reset Font Size
  var originalFontSize = $currentObject.css('font-size');
  $("#resetFont").click(function(event){
 event.preventDefault();        
 $currentObject.css('font-size', originalFontSize);
  });
  // Increase Font Size
  $("#increaseText").click(function(){
 var currentFontSize = $currentObject.css('font-size');  
 var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum+1;
 if (newFontSize < MaximumFontSize) {
  $currentObject.css('font-size', newFontSize);
 } 
 return false;
  });
  // Decrease Font Size
 
     $("#DecreaseText").click(function(){
   var currentFontSize = $currentObject.css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum-3;
 //alert('currentFontSizeNum');
 if (newFontSize > MinimumFontSize) {
  $currentObject.css('font-size', newFontSize);
 }
 return false;
  });
 
});
//Font sizer Ends here
 
 

<div class="text-tool hide"> 
          <div class="header"> 
            <h5>Text sizer</h5> 
            <div class="close"><img src="http://bytes.com/submit/images/tools/close.gif" width="10" height="10" alt="Close" title="Close" /></div> 
          </div> 
          <div class="body"> 
          <div class="a1"> 
          <a href="#" id="increaseText"><img src="http://bytes.com/submit/images/tools/BigA.jpg"/></a> 
          <a href="#" id="resetFont"><img src="http://bytes.com/submit/images/tools/textreset.jpg"/></a> 
             <a href="#" id="DecreaseText"><img src="http://bytes.com/submit/images/tools/smallA.jpg"/></a> 
          </div> 
 
          </div> 
          </div> 
          </div> 
 

Appreciate your replies.

Thanks,
Jai

[acoder]

If you notice, on line 32:

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.

[nataraj jaideep]

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.

[acoder]

Post the HTML code of the page.

[nataraj jaideep]

the HTML code is

<!-- Start of Text Tool -->
          <div class="text-tool hide">
            <div class="header">
              <h5>Text sizer</h5>
              <div class="close"><img src="http://bytes.com/topic/javascript/images/tools/close.gif" width="10" height="10" alt="Close" title="Close" /></div>
            </div>
            <div class="body">
              <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>
            </div>
          </div>
        </div>
        <!-- End of text Tool --> 
 
 

CSS code

/* starting of textsize */  
li a.textTool:hover, li a.textToolActive {   
    background:#0063be url('../Images/tools/text-on.gif') -1px 0px no-repeat;  
    color:#ffffff;  
    text-decoration:none;  
    height:25px;  
/*    width:55px; */  
    margin-top:0px;  
    background-color:#0063be;  
}  
 
 
.text-tool {  
    position:absolute;  
    left:704px;  
    width:125px;  
    top:228px;  
    right:260px;  
 
        -moz-box-shadow: 3px 3px 4px #000;      
    -webkit-box-shadow: 3px 3px 4px #000;       
    box-shadow: 3px 3px 4px #000;      
    /* For IE 8 */      
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";      
    /* For IE 5.5 - 7 */      
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');  
}  
 
.text-tool .header {   
    background:#0063be;  
    width:125px;  
    height:25px;  
    position:relative;  
}   
.text-tool .header h5 {   
    color:#fff;  
    padding:5px 0 12px 2px;  
    font-size:1.1em;  
    font-weight:bold;  
}  
.text-tool .header .close {  
    position:absolute;  
    top:10px;  
    right:10px;  
    cursor:pointer;   
}  
.text-tool .body {   
    background:#fff;  
    border-bottom:#ccc solid 1px;  
    border-right:#ccc solid 1px;  
    border-left:#ccc solid 1px;  
    padding:5px 15px 0 0px;  
    height:25px;  
    width:125px;  
    position:relative;  
}   
.text-tool .body .a1{  
    display:inline;  
 
}  
/* End of textsize section */  
 

Jquery code

$("#content-top a.textTool").click(function () { 
   $('a.textTool').removeClass("textTool").addClass('textToolActive'); 
      $('#content-top a.textTool').removeClass("textTool").addClass('textToolActive'); 
   var offset = $(this).offset();   
   var tLeft = offset.left;   
   var tTop = offset.top; 
   var topOffset = $(this).height(); 
   var tWidth = $(this).width(); 
   var xTip = (tLeft-tWidth+6)+"px";   
   var yTip = (tTop+topOffset+12)+"px";   
   $('#content-top .text-tool').css({'top' : yTip, 'left' : xTip});     
      $('#content-top .text-tool').removeClass("hide"); 
  }); 
 
  $("#content-top .text-tool .close").click(function () { 
   $('#content-top a.textToolActive').removeClass("textToolActive").addClass('textTool'); 
   $('#content-top .text-tool').addClass("hide"); 
   $('#content-top .text-tool .body .page-tools-email').css({ 'display': 'none' }); 
   $('#content-top .text-tool .body').css({ 'height': '25px' }); 
  }); 
  /********************/ 
  //Font sizer starts here 
$(" a.textTool").click(function () { 
      $('a.textTool').removeClass("textTool").addClass('textToolActive'); 
      $('.page-tool').removeClass("hide"); 
  }); 
$(document).ready(function(){ 
          //$(document).height(".page-tool .body"); // returns height of HTML document 
 var MaximumFontSize = 15; 
 var MinimumFontSize = 6; 
 var $currentObject = $(".threecoloumlayout") .children(".column-2"); 
 
 
  // Reset Font Size 
  var originalFontSize = $currentObject.css('font-size'); 
  $("#resetFont").click(function(event){ 
 event.preventDefault();         
 $currentObject.css('font-size', originalFontSize); 
  }); 
  // Increase Font Size 
  $("#increaseText").click(function(){ 
 var currentFontSize = $currentObject.css('font-size');   
 var currentFontSizeNum = parseFloat(currentFontSize, 10); 
    var newFontSize = currentFontSizeNum+1; 
 if (newFontSize < MaximumFontSize) { 
  $currentObject.css('font-size', newFontSize); 
 }  
 return false; 
  }); 
  // Decrease Font Size 
 
     $("#DecreaseText").click(function(){ 
   var currentFontSize = $currentObject.css('font-size'); 
  var currentFontSizeNum = parseFloat(currentFontSize, 10); 
    var newFontSize = currentFontSizeNum-3; 
 //alert('currentFontSizeNum'); 
 if (newFontSize > MinimumFontSize) { 
  $currentObject.css('font-size', newFontSize); 
 } 
 return false; 
  }); 
 
}); 
//Font sizer Ends here 
 

[acoder]

No, I've seen that code. I meant the HTML code of the page that needs resizing, i.e. the 3 column layout page.

[nataraj jaideep]

Here is the html code in which the text sizer should affect on all the links, headings and contents.

<div class="column-2">
        <div class="formHeader section">
          <form action="#">
            <fieldset>
              <div class="formHeaderTitle section">
                <div class="title">
                  <h4>What is the location's address?</h4>
                  If you prefer, <a href="#" title="provide the meter number"> provide the meter number. </a> </div>
                <div class="explanation"> All fields are required unless noted. </div>
              </div>
              <div class="formInput section">
                <div class="fields">
                  <div class="row1 rows">
                    <div class="col1">
                      <div class="inner">
                        <label for="housenumber">House#:</label>
                        <div class="note"></div>
                      </div>
                      <div class="flyout"></div>
                    </div>
                    <div class="col2">
                      <div class="floatLeft">
                        <input name="housenumber" title="House#" type="text" id="housenumber"/>
                      </div>
                      <div class="formInputHelp">&nbsp;&nbsp;<img alt="Help Icon" src="http://bytes.com/topic/javascript/images/blueQuestionMark.gif"/></div>
                      <div class="note"></div>
                    </div>
                  </div>
                  <div class="row1 rows">
                    <div class="col1">
                      <div class="inner">
                        <label for="streetdirection">Street Direction:</label>
                        <div class="note">(Optional)</div>
                      </div>
                      <div class="flyout"></div>
                    </div>
                    <div class="col2">
                      <div class="floatLeft">
                        <select name="streetdirection" title="Street Direction" id="streetdirection">
                          <option>Select</option>
                        </select>
                      </div>
                      <div class="formInputHelp">&nbsp;&nbsp;<img alt="Help Icon" src="http://bytes.com/topic/javascript/images/blueQuestionMark.gif"/></div>
                      <div class="note"></div>
                    </div>
                  </div>
                  <div class="row1 rows">
                    <div class="col1">
                      <div class="inner">
                        <label for="street_name">Street Name:</label>
                        <div class="note"></div>
                      </div>
                      <div class="flyout"></div>
                    </div>
                    <div class="col2">
                      <input name="street_name" title="Street Name" type="text" id="street_name"/>
                      <div class="note"></div>
                    </div>
                  </div>
                  <div class="row1 rows">
                    <div class="col1">
                      <div class="inner">
                        <label for="suffix">Suffix:</label>
                        <div class="note">(Optional)</div>
                      </div>
                      <div class="flyout"></div>
                    </div>
                    <div class="col2">
                      <div class="floatLeft">
                        <select name="suffix" title="Suffix" id="suffix">
                          <option>Select</option>
                        </select>
                      </div>
                      <div class="formInputHelp">&nbsp;&nbsp;<img alt="Help Icon" src="http://bytes.com/topic/javascript/images/blueQuestionMark.gif"/></div>
                      <div class="note"></div>
                    </div>
                  </div>
                  <div class="row1 rows">
                    <div class="col1">
                      <div class="inner">
                        <label for="unitapt">Unit/Apt:</label>
                        <div class="note">(Optional)</div>
                      </div>
                      <div class="flyout"></div>
                    </div>
                    <div class="col2">
                      <div class="floatLeft">
                        <select name="unitapt" title="Unit/Apt" id="unitapt">
                          <option>Select</option>
                        </select>
                      </div>
                      <div class="formInputHelp">&nbsp;&nbsp;<img alt="Help Icon" src="http://bytes.com/topic/javascript/images/blueQuestionMark.gif"/></div>
                      <div class="note"></div>
                    </div>
                  </div>
                  <div class="row1 rows">
                    <div class="col1">
                      <div class="inner">
                        <label for="unitnumber">Unit#:</label>
                        <div class="note">(Optional)</div>
                      </div>
                      <div class="flyout"></div>
                    </div>
                    <div class="col2">
                      <input name="unitnumber" title="Unit#" type="text" id="unitnumber"/>
                      <div class="note"></div>
                    </div>
                  </div>
                  <div class="row1 rows">
                    <div class="col1">
                      <div class="inner">
                        <label for="city">City:</label>
                        <div class="note">(Optional)</div>
                      </div>
                      <div class="flyout"></div>
                    </div>
                    <div class="col2">
                      <input name="city" title="City" type="text" id="city"/>
                      <div class="note"></div>
                    </div>
                  </div>
                  <div class="row1 rows">
                    <div class="col1">
                      <div class="inner">
                        <label for="state">State:</label>
                        <div class="note">(Optional)</div>
                      </div>
                      <div class="flyout"></div>
                    </div>
                    <div class="col2">
                      <select name="state" title="State" id="state">
                        <option>Select</option>
                      </select>
                      <div class="note"></div>
                    </div>
                  </div>
                  <div class="row1 rows">
                    <div class="col1">
                      <div class="inner">
                        <label for="zipcode">Zip Code:</label>
                        <div class="note"></div>
                      </div>
                      <div class="flyout"></div>
                    </div>
                    <div class="col2">
                      <input name="zipcode" title="Zip Code" type="text" id="zipcode" />
                      <div class="note"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="whitespacer"></div>
              <div class="floatRight">
                <button type="button" class="buttonSubmit" title="Check service availability">Check service availability</button>
              </div>
            </fieldset>
          </form>
        </div>
      </div>