www.webdeveloper.com
Results 1 to 8 of 8

Thread: Scripted Text Resize Tool Will Not Work in Firefox

Threaded View

  1. #1
    Join Date
    Mar 2009
    Posts
    13

    Scripted Text Resize Tool Will Not Work in Firefox

    I've created a text resizing tool (option) at the top a web page. My code works perfectly in all major browsers with the exception of Firefox.

    Scenario:
    There is a "<div>" containing the text "Text Size", and two .png's floating to the right of that text ("Text Size"). When you click on the text "Text Size", the text nested within an article (id = "article1") should return to the default "fontSize" if not currently the default "fontSize". When you click on the first image, a minus symbol, the text nested within this article (id = "article1") should become smaller in pixel size down to "8px". When you click on the second image, a plus symbol, the text nested within the same article should become larger in pixel size up to "24px".

    In Firefox only, the proceding code will result in absolutely nothing upon clicking on either the text "Text Size", the minus symbol image, or the plus symbol image.

    The following code includes the javaScript and valid XHTML. A link to the webpage concerning this example is to follow in my next post, in the morning once I've uploaded the latest files to the server.

    CODE:
    Javascript:


    //variables for the text sizing feature.
    var totalArticles = 1;
    var defaultTextSize = 12;
    var currentTextSize = defaultTextSize;

    //Intializes the text sizing feature.
    function initializeTextSizers() {
    var defaultTextSizeLink = document.getElementById("defaultTextSize");
    var decreaseTextBtn = document.getElementById("decreaseTextBtn");
    var increaseTextBtn = document.getElementById("increaseTextBtn");

    decreaseTextBtn.style.cursor = "pointer";
    increaseTextBtn.style.cursor = "pointer";

    defaultTextSizeLink.onclick = resetTextSize;
    decreaseTextBtn.onclick = textMinimize;
    increaseTextBtn.onclick = textMaximize;
    }

    function resetTextSize() {
    increaseTextBtn.style.cursor = "pointer";
    decreaseTextBtn.style.cursor = "pointer";

    if(currentTextSize < defaultTextSize || currentTextSize > defaultTextSize) {

    for (var i=1; i <= totalArticles; i++) {
    var article = document.getElementById("article" + i);

    article.style.fontSize = defaultTextSize + "px";

    currentTextSize = defaultTextSize;
    }
    }
    }

    function textMinimize() {
    increaseTextBtn.style.cursor = "pointer";

    if(currentTextSize > 8) {

    for (var i=1; i <= totalArticles; i++) {
    var article = document.getElementById("article" + i);

    article.style.fontSize = currentTextSize - 2 + "px";

    currentTextSize -= 2;
    }
    }

    else {
    decreaseTextBtn.style.cursor = "none";
    }
    }

    function textMaximize(index) {
    decreaseTextBtn.style.cursor = "pointer";

    if(currentTextSize < 24) {

    for (var i=1; i <= totalArticles; i++) {
    var article = document.getElementById("article" + i);

    article.style.fontSize = currentTextSize + 2 + "px";

    currentTextSize += 2;
    }
    }

    else {
    increaseTextBtn.style.cursor = "none";
    }
    }

    /////////////////////////////////////////////////////////////////////////////////////

    XHTML relavant to the issue:

    <div class="grid_2 copySizer omega">

    <div class="floatObjectRight copySizerBtns">

    <div id="decreaseTextBtn" class="floatObjectLeft"><a href="#"><img src="../images/shared/links/text_decrease_btn.png" height="16" width="16" /></a></div>

    <div id="increaseTextBtn" class="floatObjectLeft"><a href="#"><img src="../images/shared/links/text_increase_btn.png" height="16" width="16" /></a></div>

    </div>

    <div id="defaultTextSize" class="copySizerTxt">

    <a href="#">Text Size</a>

    </div>

    </div>

    ...AND...

    <div id="article1">
    <!--Introduction-->
    <div class="grid_12 infoBar_41px">

    //content in "article1"
    <a name="introduction"></a>

    <div class="floatObjectLeft">

    <div class="imgAlpha"><img src="../images/library/chiro_an_intro/info_bar_header_introduction.png" height="41" width="159" /></div>

    </div>

    <div class="floatObjectLeft">

    <img class="imgOmega" src="../images/library/chiro_an_intro/info_bar_introduction.png" height="41" width="771" />

    </div>

    </div>

    <div class="clearByZero"></div>

    <div class="grid_12 infoWindowBg">

    <div class="lastInfoWindowBlock">

    //text to change in "article1".
    <p>Chiropractic is a health care approach that focuses on the relationship between the body's structure—mainly the spine—and its functioning. Although practitioners may use a variety of treatment approaches, they primarily perform adjustments to the spine or other parts of the body with the goal of correcting alignment problems and supporting the body's natural ability to heal itself.</p>

    </div>

    <div class="topOfPageLink">

    <div class="topOfPageArrow floatObjectLeft"><img src="../images/shared/top_of_page_arrow.png" height="12" width="12" /></div>

    <a href="#top">Top</a>

    </div>

    </div>

    <div class="clearByZero"></div>

    <div class="grid_12 infoWindowBottom"></div>

    <div class="clear_8px"></div>

    ...more of this same sort of code continues after this.

    //////////////////////////////////////////////////////////////////////////////////

    Any help is appreciated! Thanks!
    Last edited by existing; 04-27-2009 at 02:06 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles