Jquery styling a little help?

Jquery styling a little help?

Hello,

I am new to jquery and found a script that toggles anything within a div container and counts the words/letters and restricts typing after xx letters etc.

I basically was wondering if someone could take a look at the script below and tell me how do i add:

margin-left: 166px; and Width 160px; ,

I did use css to style it but the jquery styling overides the css i have in my sites css file.

Currently the width is 0 so the character/word count appears over three lines hence why i want to adjust the width and it does not display in line with my text area hence why i need a margin left. If i cant add the above to jquery can someone edit it for me please? to remove all the css so i can simply use my own css in my website css file.

Thanks
PHPLOVER

  1. /*
  2.  * jQuery Textarea Characters Counter Plugin
  3.  * Examples and documentation at: http://roy-jin.appspot.com/jsp/textareaCounter.jsp
  4.  * Copyright (c) 2010 Roy Jin
  5.  * Version: 1.0.0 (11-JUN-2010)
  6.  * Dual licensed under the MIT and GPL licenses:
  7.  * http://www.opensource.org/licenses/mit-license.php
  8.  * http://www.gnu.org/licenses/gpl.html
  9.  * Requires: jQuery v1.4.2 or later
  10.  */
  11. (function($){ 
  12.     $.fn.textareaCount = function(options) {  
  13.         var defaults = { 
  14.             maxCharacterSize: -1, 
  15.             textFontSize: '10px',
  16.             textColor: '#000000',
  17.             textFamily: 'Tahoma,sans-serif',
  18.             textAlign: 'right',
  19.             warningColor: '#FF0000', 
  20.             warningNumber: 20,
  21.             isCharacterCount: true,
  22.             isWordCount: false
  23.         }; 
  24.         var options = $.extend(defaults, options);
  25.        
  26.         var container = $(this);
  27.         if(options.maxCharacterSize < 0){
  28.             return;
  29.         }
  30.         $("<div class='charleft'>&nbsp;</div>").insertAfter(container);
  31.         //create charleft css
  32.         var charLeftCss = {
  33.             'font-size' : options.textFontSize,
  34.             'font-family' : options.textFamily,
  35.             'color' : options.textColor,
  36.             'text-align' : options.textAlign,
  37.             'width' : container.width()
  38.         };
  39.         var charLeftInfo = getNextCharLeftInformation(container);
  40.         charLeftInfo.css(charLeftCss);
  41.        
  42.         container.bind('keyup', function(event){limitTextAreaByCharacterCount();})
  43.                  .bind('mouseover', function(event){setTimeout(function(){limitTextAreaByCharacterCount();}, 10);})
  44.                  .bind('paste', function(event){setTimeout(function(){limitTextAreaByCharacterCount();}, 10);});
  45.        
  46.         function getNextCharLeftInformation(container){
  47.                 return container.next('.charleft');
  48.         }
  49.        
  50.         function limitTextAreaByCharacterCount(){
  51.             var content = container.val();
  52.             var contentLength = content.length;
  53.             var resultString = '';
  54.            
  55.             if(options.isCharacterCount){
  56.                 //If copied content is already more than maxCharacterSize, chop it to maxCharacterSize.
  57.                 if(contentLength >= options.maxCharacterSize) {
  58.                     content = content.substring(0, options.maxCharacterSize);                
  59.                 }
  60.                
  61.                 var count = 0;
  62.                 for(var i=0; i<contentLength;i++){
  63.                     if(content.charAt(i) == '\n'){
  64.                         count++;
  65.                     }
  66.                 }
  67.                 var systemmaxCharacterSize = 0;
  68.                
  69.                 var strOS = navigator.appVersion;
  70.                 if (strOS.toLowerCase().indexOf('win') != -1){
  71.                     /**
  72.                      * Count new line character.
  73.                      * For windows, it occupies 2 characters
  74.                      */
  75.                      systemmaxCharacterSize = options.maxCharacterSize - count;
  76.                 }else{
  77.                      systemmaxCharacterSize = options.maxCharacterSize
  78.                 }
  79.                
  80.                 if(contentLength > systemmaxCharacterSize){
  81.                     //avoid scroll bar moving
  82.                     var originalScrollTopPosition = this.scrollTop;
  83.                     container.val(content.substring(0, systemmaxCharacterSize));
  84.                     this.scrollTop = originalScrollTopPosition;
  85.                 }
  86.                
  87.                 if(systemmaxCharacterSize - contentLength <= options.warningNumber){
  88.                     charLeftInfo.css({"color" : options.warningColor});
  89.                 }else {
  90.                     charLeftInfo.css({"color" : options.textColor});
  91.                 }
  92.                
  93.                 resultString = 'Characters: '
  94.                 if (strOS.toLowerCase().indexOf('win') != -1){
  95.                     resultString += (container.val().length + count) + "/" + options.maxCharacterSize
  96.                 }else{
  97.                     resultString += container.val().length + "/" + options.maxCharacterSize
  98.                 }
  99.             }
  100.            
  101.             if(options.isWordCount){
  102.                 var word_count = countWord(getCleanedWordString(container.val()));
  103.                 resultString += ' Words: ' + word_count;
  104.             }
  105.            
  106.             charLeftInfo.html(resultString);
  107.         }
  108.        
  109.         function getCleanedWordString(content){
  110.             var fullStr = content + " ";
  111.             var initial_whitespace_rExp = /^[^A-Za-z0-9]+/gi;
  112.             var left_trimmedStr = fullStr.replace(initial_whitespace_rExp, "");
  113.             var non_alphanumerics_rExp = rExp = /[^A-Za-z0-9]+/gi;
  114.             var cleanedStr = left_trimmedStr.replace(non_alphanumerics_rExp, " ");
  115.             var splitString = cleanedStr.split(" ");
  116.             return splitString;
  117.         }
  118.        
  119.         function countWord(cleanedWordString){
  120.             var word_count = cleanedWordString.length-1;
  121.             return word_count;
  122.         }
  123.     }; 
  124. })(jQuery);