www.webdeveloper.com
Results 1 to 8 of 8

Thread: Scripted Text Resize Tool Will Not Work in Firefox

Hybrid 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.

  2. #2
    Join Date
    Mar 2009
    Posts
    13

    Update: Scripted Text Resize Tool Will Not Work in Firefox

    I figured out what was causing this feature to not work in Firefox.

    Solution:
    I decided to take all the "...style.cursor..." instances out of my javaScript code. I saved the .js file, then refreshed my webpage in Firefox, and "magic", the text resize feature works now in ALL browsers!

    One thing though, everytime I use this feature by clicking on the action buttons ("Text Size", +, -), In Opera 9.64, an annoying context popup menu keeps appearing, and I'm only left clicking.

    Does any know a way to fix this?

    Webpage link to come.

  3. #3
    Join Date
    Mar 2009
    Posts
    13

    Question ...Contuation of topic.


  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Works correctly in Opera, no context menu.
    What you are seeing is the double-click action.
    Last edited by Fang; 04-27-2009 at 01:18 PM.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Mar 2009
    Posts
    13

    ...Opera flaw continued...

    I have attached a cropped screenshot of what is happening when I click on any of the three text resizing links.

    This happens when clicking on them too quickly. There are only no problems when I click slowly. Other browsers do not have this problem. I am using Opera 9.64.
    Attached Images Attached Images

  6. #6
    Join Date
    Mar 2009
    Posts
    13

    Question

    Oh, I just noticed that Fang said "What you are seeing is the double-click action."

    Yes, that is true, but no other browsers do this. The "double-click action" is a very undesired effect. Do I need to specify that nothing should happen during the ondblclick event?

    Thanks!

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Opera users are aware of the double click action. Don't mess with the browser's UI.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  8. #8
    Join Date
    Mar 2009
    Posts
    13

    resolved

    Yes, that's good advice.

    Thanks FANG!

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