Search code examples
jquerycross-browseroperaincompatibility

jQuery width() not working in Opera but works in FF, IE, Chrome, Safari


I have an accordian menu on my site. I use jQuery to get the menu's width, subtract that from the window width, then set the width of the content to the difference. This works correctly in every browser I've tried - except Opera, which apparently does not set the content's width.

Here's the relevant HTML:

<table style="width:100%;margin:0;border-spacing:0;border:0"><tr>
    <td id="sf_page_contents" style="vertical-align:top;padding:7px">
        ...
    </td>
    <td class="tocBackground" id="toc">
        ...
    </td>
</tr></table>

Here's the relevant Javascript:

function initFloatMenu()
{   var content=$("#sf_page_contents");
    var toc=$("#toc");
    var mX=0;    // menu X-position (left)
    var wnWidth=$(window).width();
    if (content.width()>wnWidth) mX=content.width()+"px";
    else
    {   mX=wnWidth-toc.outerWidth()+"px";
        content.css("width",mX);
    }
    toc.css("left",mX);
}

I've also tried

    else
    {   mX=wnWidth-toc.outerWidth();
        content.width(mX);
        mX+="px";
    }

but neither content.css("width",mX) nor content.width(mX) cause Opera to set the width of the sf_page_contents element.

As I've said, this code works correctly in Firefox, IE, Chrome and Safari, but not in Opera.

About Opera
Version information

Version     12.17
Build       1863
Platform    Win32
System      Windows 7

Browser identification
Opera/9.80 (Windows NT 6.1) Presto/2.12.388 Version/12.17

What do I have to do to get Opera to set the width of the content section correctly?

I'm not looking for "why not do it this way" types of answers, I'm looking for a way to fix the existing code's operation in Opera.


Solution

  • This problem went away when I discovered I had Opera 18 installed and tried using it instead of 12, after I told Opera to do an update and it downloaded version 50 - but the one launched by my winDoze desktop icon is still Opera 12.