टेक्स्ट फ़ॉन्ट का आकार बदलें

Question

मुझे फ़ॉन्ट बढ़ाने/घटाने के लिए jquery फ़ंक्शन को कम करने में समस्या हो रही है। इसमें 3 आकार हैं: बड़े, मध्यम (डिफ़ॉल्ट एक) और छोटे। यहां समस्या वेब पर कई उदाहरणों पर "रीसेट" बटन नहीं है, बल्कि फ़ॉन्ट आकार को बढ़ाने या घटाने के लिए केवल दो बटन हैं।

समस्या तब आई जब मैं बड़े फ़ॉन्ट में बदल गया और मैं बीच में ड्रेक्रैस करना चाहता हूं। यह मध्य में वापस नहीं जाता है, यह छोटे मान या पीछे (छोटे से बड़े) में बदल जाता है। क्या इसे पूरा करने का कोई रास्ता है? मैं किसी भी मदद से आप मुझे दे सकते हैं सराहना करेंगे, धन्यवाद

Answer 1

यहाँ मैं क्या उपयोग है:

<script> 
$(document).ready(function() { 
    var size = $('#container').css('font-size'); 
    $("#largeFont").click(function(){ 
     $('#container').css('font-size', '30px'); 
     return false; 
    }); 
    $("#resetFont").click(function(){ 
     $('#container').css('font-size', size); 
     return false; 
    }); 
    $("#increaseFont").click(function() { 
     var size = $('#container').css('font-size'); 
     $('#container').css('font-size', parseInt(size)+2); 
     return false; 
    }); 
    $("#decreaseFont").click(function() { 
     var size = $('#container').css('font-size'); 
     $('#container').css('font-size', parseInt(size)-2); 
     return false; 
    }); 
    $("#smallFont").click(function(){ 
     $('#container').css('font-size', '10px'); 
     return false; 
    }); 
}); 

</script> 

और एचटीएमएल (इस मामले में, मैं वृद्धि का उपयोग करें, कम करें और रीसेट), लेकिन आप के लिए सेट कर सकते हैं में मन चाहा वर्ण।

<a id="largeFont">Large Font</a> - 
<a id="increaseFont">Increase Font</a> - 
<a id="decreaseFont">Decrease Font</a> - 
<a id="smallFont">Small Font</a> - 
<a id="resetFont">Reset</a> 

<div id="container"> 
Here's some text 
</div> 

यहाँ यदि आप तीन फ़ॉन्ट आकार मैं बटन का उपयोग नहीं बढ़ाने के लिए और अक्षरों का आकार कम करने के लिए सलाह देते हैं चाहते हैं, आम तौर पर JSFiddle

Answer 2

है। मैं सुझाव दूंगा कि आप उपयोगकर्ता को फ़ॉन्ट आकार के उदाहरण प्रदान करें और वे जिस पर चाहें उस पर क्लिक कर सकते हैं। उदाहरण के तौर पर, एंड्रॉइड पर किंडल कैसे करता है (मुझे अभी एक अच्छा सार्वजनिक HTML उदाहरण नहीं मिल रहा है): http://www.techsavys.info/2011/09/review-on-kindle-for-android-an-ereader-which-beats-all.html

हालांकि, यदि आप बटन चाहते हैं, तो आप ऐसा कुछ कर सकते हैं: (ध्यान दें

<button id="largerFont">Larger Font</button> 
    <button id="smallerFont">Smaller Font</button> 
    <p id="container">Change the font size of this.</p> 

और जावास्क्रिप्ट के लिए, यहाँ (नीचे दिए गए 1 पर सेट जब से तुम क्या चाहता है कि) एक विकल्प है कि आप वेतन वृद्धि की संख्या निर्धारित करने की अनुमति देता है है एक वेतन वृद्धि के आकार के रूप में भी आप करेंगे कि शायद इसे थोड़ा साफ करना चाहते हैं):

$(document).ready(function() { 
    var size = parseInt($('#container').css('font-size').replace("px", ""), 10); 
    var incrementAmount = 4; 
    var increments = 1; 
    $("#largerFont").click(function(){ 
    var curSize = parseInt($('#container').css('font-size').replace("px", ""), 10);  

    $('#container').css('font-size', curSize + incrementAmount);   
    if ((curSize + incrementAmount) >= (size + (incrementAmount * increments))) { 
     $("#largerFont").prop("disabled", true); 
    } 
    $("#smallerFont").prop("disabled", false); 

    return false; 
    }); 
    $("#smallerFont").click(function(){ 
    var curSize = parseInt($('#container').css('font-size').replace("px", ""), 10);  

    $('#container').css('font-size', curSize - incrementAmount);   
    if ((curSize - incrementAmount) <= (size - (incrementAmount * increments))) { 
     $("#smallerFont").prop("disabled", true); 
    } 
    $("#largerFont").prop("disabled", false); 

    return false; 
    }); 
}); 

यहां आपके लिए एक पहेली है: http://jsfiddle.net/fordlover49/jbXmE/1/

Answer 3

मैंने इसके लिए एक वास्तविक jQuery प्लगइन बनाया है। आप अपने आकार और बटन कक्षाओं के लिए कस्टम सेटिंग्स को पारित कर सकते हैं। यह मेरी बेला https://github.com/carhartl/jquery-cookie

यहाँ के माध्यम से कुकीज़ का समर्थन करता है: http://jsfiddle.net/skibulk/eh5xr0z3/22/

यहाँ प्लगइन है:

(function($){ 
    $.fontSizer = function(options) { 
     // Load Options 
     var opt = $.extend({ 
      selector:  "body", 
      sizeMaximum: 20, 
      sizeDefault: 14, 
      sizeMinimum: 10, 
      sizeInterval: 2, 
      buttonIncrease: ".font-sizer .increase", 
      buttonDecrease: ".font-sizer .decrease", 
      buttonReset: ".font-sizer .reset", 
     }, options); 

     // Initialize 
     $(opt.buttonIncrease).click(increase); 
     $(opt.buttonDecrease).click(decrease); 
     $(opt.buttonReset).click(reset); 
     render($.cookie('font-size') || opt.sizeDefault); 

     // Increase Handler 
     function increase() { 
      size = parseFloat($(opt.selector).css("font-size")); 
      size = Math.min(size + opt.sizeInterval, opt.sizeMaximum); 
      render(size); 
     } 

     // Decrease Handler 
     function decrease() { 
      size = parseFloat($(opt.selector).css("font-size")); 
      size = Math.max(size - opt.sizeInterval, opt.sizeMinimum); 
      render(size); 
     } 

     // Reset Handler 
     function reset() { 
      render(opt.sizeDefault); 
     } 

     // Render 
     function render(size) { 
      $(opt.selector).css("font-size", size +"px"); 
      $(opt.buttonIncrease).prop("disabled", (size >= opt.sizeMaximum)); 
      $(opt.buttonDecrease).prop("disabled", size <= opt.sizeMinimum); 
      $(opt.buttonReset).prop("disabled", (size == opt.sizeDefault)); 
      $.cookie('font-size', size); 
     } 
    }; 
})(jQuery); 

jQuery.fontSizer({selector:"body"});