I cannot get a javascript text resizer to work on document library item titles RRS feed

  • Question

  • I have a simple (I thought) text resizer on a SharePoint site that takes a class and adds text size to it. On the master page there is this bit of code:

         function TextResize(size) {
             getElementsByClass('ms-WPBody', size);
             getElementsByClass('pageContent', size);
             getElementsByClass('footerContent', size);
             getElementsByClass('tabContent', size);
             getElementsByClass('description', size);
             getElementsByClass('item link-item', size);

    And it is called when one of the below links is clicked.

    <div id="fontSize">
           &nbsp;&nbsp;&nbsp;Text Size:&nbsp;&nbsp;&nbsp;<a href="#" onclick="TextResize('13');" title="Small Font"><font size="2">M</font></a>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onclick="TextResize('15');" title="Medium Font"><font size="4">L</font></a>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onclick="TextResize('19');" title="Large Font"><font size="5">XL</font></a>

    I am displaying a content query web part on the page that grabs the title, description, and rollup image from a content type and turns the title into a link to the main article page under a rollup image with a paragraph of discussion under it. 

    When the user clicks on the various font sizes (the links shown above), the CQWP description field on the page changes size, as does the other text fields on the page, but the title in the CQWP does not.

    The code surrounding the title and description as seen with a "View source" is as follows:

    <div WebPartID="487ab323-6f2f-4c16-8e8a-b6341ab6b240" HasPers="false" id="WebPartWPQ7" width="100%" class="ms-WPBody" allowDelete="false" style="" >

    <table id="cbqwp" cellspacing="0" cellpadding="0" class="cbq-layout-main">


    <td id="column" width="100%" valign="top">

    <div id="linkitem" class="item link-item">

           <a href="http://test-someURL.com/news/Pages/SpringMockExamAnnouncement.aspx" target="" title="">Spring Mock Exam Announcement</a>

           <div class="description">Register now for the Spring Mock Exams</div>


    I have tried adding link item and item link-item to the list of classes affected to no avail. I am at a loss for how I can get the attention of the page and change the font size on the anchor part of the listings. Like I said, the description class designation works fine and the text in that tag changes size just fine. Looks stupid with a dinky title though.

    Neither 'description' nor 'item link-item' are mentioned in our custom CSS it is a straight SharePoint native Class designation.

    I realize that there are core styles as well but am not sure where to look or if to look at those to see what I could tweak.

    Any ideas?

    Later: I think that I may have to look in the underlying style sheets??? Such as Band, Controls, etc.
    • Edited by Mike Walsh FIN Wednesday, January 25, 2012 7:41 AM Later section added - was posted as a reply ten minutes later
    Tuesday, January 24, 2012 9:45 PM


  • Hi Lalewicz,


    The style effect is based on distance of the css . so you need not to modify SharePoint itself css. I suggest you to  get element by document id, then add some style on the element. Here is the simple code.


    document.getElementById('test').style.font-size = '10px';






    Wednesday, February 1, 2012 2:18 AM