Splitter button not acting corrrectly on Samsung Internet

[narnoneParticipant]

I need my design to work across all browsers. Seems a daunting task.
I have stripped my code down but it continues to fail using Samsung browser 4.4.2-I605VRUFND7. I have a Samsung Note 2 and this is the browser it comes with.
Please note: it works fine on all other browsers I have tested but this one.
The code can be seen here:
http://hlsm.com/newlayout/mobile/splitter_3_tab_test.htm
Theme: energyblue
Operation:
First tab, “Sections”, has some navigation, no splitter
Second tab, “Parts Diagram”, has the splitter. Split horizontally. Top panel is the image, bottom panel is a parts list relating to the image above it.
Third tab, “Cart”, would be the parts select for the cart.
Issue:
On the Samsung browser only:
Load/refresh the page.
Select the second tab
The splitter’s center button, which is darker than the splitter bar, appears in the center of the image panel, not in the bar.
If the bar is touched ONLY, the button disappears and the entire bar turns dark blue.
If the bar is moved, the button appears fine.
If the button is double tapped, it does not show the entire bottom panel. It does nothing most of the time. If it does work, when double tapped again, the bar moves to the center, but the button is now at the top of the image panel.
Whenever the bar is moved, the button returns to it’s correct position.
If you refresh the page, click on the second tab, “Part Diagram”, the button is in the center. Click on either the first tab, “Sections” or “Cart’, and then go back to the second tab, the button is now correct.
It only does this in this browser. The others I tested operate fine.

[Peter StoevKeymaster]

It should be initialized within the initTabContent function. My suggestion is to implement this jqxTabs function and put there any widgets initialization code depending on the tab that is current being selected.

[narnoneParticipant]

Tried this:
$(‘#tbSelection’).jqxTabs({ width: ‘99%’, height: lngBodyHe, position: ‘top’, theme: strTheme, animationType: ‘none’, selectionTracker:false, scrollable:true, autoHeight:true,
initTabContent: function(tab){
$(‘#splitPartsList’).jqxSplitter({ width: ‘100%’, height: ‘100%’, theme: strTheme, orientation: ‘horizontal’, panels: [{ size: ‘30%’}, { size: ‘70%’}] });
}
});

Did not work, same results.
Is the format correct?

[narnoneParticipant]

I changed the code and it is getting better but not right.
Original design:
I have three tabs:
<div id = “tbSelection”>

<li id=”tbSection” >Section
<li id=”tbPNList>Parts Diagram
<li id=”tbCart>Cart

The three corresponding divs where:
<div id=”divSections” align=”center”>This is the section list.</div>
<div id=” splitPartsList”>
<div id=”halves”>This is the image</div>
<div id=”halves1″>This is the parts</div>
</div>
<div id=”divCart”>This is the cart</div>
The problem I believe was using the DIV splitPartsList for the splitter and the part of the tab function.
So I changed it to:
<div id=”tbSections” align=”center”>This is the section list.</div>
<div id=”tbPartsList”>
<div id=”splitPartsList”>
<div id=”halves”>This is the image</div>
<div id=”halves1″>This is the parts</div>
</div>
</div>
<div id=”tbCart”>This is the cart</div>

The button is now correct, but when I move the splitter bar, the left portion disappears and is not visible until I stop moving it.
If I move the bar via the left side, even though the bar on that side is not visible while I am moving it, it still follows my finger and reappears when I stop.

[Author]

Posts