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.

[code=css]
/* starting of textsize */
li a.textTool:hove r, li a.textToolActiv e {
background:#006 3be 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:absolu te;
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:DXImage Transform.Micro soft.Shadow(Str ength=4, Direction=135, Color='#000000' )";
/* For IE 5.5 - 7 */
filter: progid:DXImageT ransform.Micros oft.Shadow(Stre ngth=4, Direction=135, Color='#000000' );
}

.text-tool .header {
background:#006 3be;
width:125px;
height:25px;
position:relati ve;
}
.text-tool .header h5 {
color:#fff;
padding:5px 0 12px 2px;
font-size:1.1em;
font-weight:bold;
}
.text-tool .header .close {
position:absolu te;
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:relati ve;
}
.text-tool .body .a1{
display:inline;

}
/* End of textsize section */
[/code]

[code=javascript]
/*************** *****/
$("#content-top a.textTool").cl ick(function () {
$('a.textTool') .removeClass("t extTool").addCl ass('textToolAc tive');
$('#content-top a.textTool').re moveClass("text Tool").addClass ('textToolActiv e');
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({'to p' : yTip, 'left' : xTip});
$('#content-top .text-tool').removeCl ass("hide");
});

$("#content-top .text-tool .close").click( function () {
$('#content-top a.textToolActiv e').removeClass ("textToolActiv e").addClass('t extTool');
$('#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").cl ick(function () {
$('a.textTool') .removeClass("t extTool").addCl ass('textToolAc tive');
$('.page-tool').removeCl ass("hide");
});
$(document).rea dy(function(){
//$(document).hei ght(".page-tool .body"); // returns height of HTML document
var MaximumFontSize = 15;
var MinimumFontSize = 6;
var $currentObject = $(".threecoloum layout") .children(".col umn-2");


// Reset Font Size
var originalFontSiz e = $currentObject. css('font-size');
$("#resetFont") .click(function (event){
event.preventDe fault();
$currentObject. css('font-size', originalFontSiz e);
});
// Increase Font Size
$("#increaseTex t").click(funct ion(){
var currentFontSize = $currentObject. css('font-size');
var currentFontSize Num = parseFloat(curr entFontSize, 10);
var newFontSize = currentFontSize Num+1;
if (newFontSize < MaximumFontSize ) {
$currentObject. css('font-size', newFontSize);
}
return false;
});
// Decrease Font Size

$("#DecreaseTex t").click(funct ion(){
var currentFontSize = $currentObject. css('font-size');
var currentFontSize Num = parseFloat(curr entFontSize, 10);
var newFontSize = currentFontSize Num-3;
//alert('currentF ontSizeNum');
if (newFontSize > MinimumFontSize ) {
$currentObject. css('font-size', newFontSize);
}
return false;
});

});
//Font sizer Ends here

[/code]

[code=HTML]
<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="increaseTex t"><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="DecreaseTex t"><img src="http://bytes.com/submit/images/tools/smallA.jpg"/></a>
</div>

</div>
</div>
</div>
[/code]

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>