Currently testing page templates for a forthcoming output from an HTTP server application. These pages are intended to be viewed on mobile browsers, so I'm focusing on creating a neat layout with scrolling capabilities to prevent any detrimental wrapping that could disrupt the vertical alignment. However, in one of my test runnings using jsFiddle, I've hit a snag that I can't quite grasp:
Why is it that the element.style.width property is showing up as blank in this particular fiddle?
https://jsfiddle.net/bkilmer/bcwmozmd/
// Fiddle's JavaScript Section
//Function to fetch elements by their IDs
function xid(id) {
return document.getElementById(id);
}
//Function to generate debugging information
function EStr(EID) {
var E=xid(EID);
var sep=' '
return 'E = ' + E + sep + 'E.id = ' + E.id + sep +
'E.style.width = ' + E.style.width; // The issue lies here at E.style.width
}
//Function to synchronize header and list horizontal scroll positions
function SyncIndexHeaderScroll() {
var SLStr = 'scrollLeft='+xid('IndexListDiv').scrollLeft;
var IC = xid('IndexContainer');
var IH = xid('IndexHeader');
var ILT = xid('IndexListTable');
// Synchronize header position
xid('IndexHeader').style.left = -xid('IndexListDiv').scrollLeft + 'px';
// Debugging markers
xid('AName0').innerHTML = SLStr+'; '+SLStr+'; '+SLStr+'; '+SLStr;
xid('AName1').innerHTML = EStr(IC.id);
xid('AName2').innerHTML = EStr(IH.id);
xid('AName3').innerHTML = EStr(ILT.id);
}
// Fiddle's HTML Section
<div id="IndexContainer">
<div id="IndexHeader">
<div id="IndexTimeStampHeader">Time Stamp</div>
<div id="IndexAlarmNameHeader">Alarm Name / Event</div>
</div>
<div id="IndexListDiv" onScroll="SyncIndexHeaderScroll()">
<table id="IndexListTable">
<tr>
<td class="IndexListTimeCol" id="TStamp0">Wed Jan 20 @ 22:23:33</td>
<td class="IndexListNameCol" id="AName0">Alarm 0</td>
</tr>
... (continued)
</table>
</div>
... (continued)
</div>
// Fiddle's CSS Section
#IndexContainer {
position: fixed;
left: 0;
top: 0;
height: 400px;
width: 600px;
padding: 0px;
margin: 0px;
background-color: #FDD;
border: none;
}
#IndexHeader {
position: fixed;
... (continued)
overflow: hidden;
}
... (continued)
<button type="button" class="BB" onclick="BackToMenu()">Back To Menu</button>
The primary objective was to create column headers that track horizontal scrolls while staying vertically fixed, accomplished through the use of the SyncIndexHeaderScroll function in the fiddle.
The next task involves adjusting the IndexHeader.style.width and the IndexAlarmNameHeader.style.width dynamically based on the required width to accommodate horizontal scrolling. Unfortunately, progress is hindered due to the unavailability of the style.width property value. Despite setting defaults in the specified widths within the CSS, the discrepancy between the default values and DOM/Javascript references persists.
This anomaly led to adding code snippets displaying key elements (IndexContainer, IndexHeader, and IndexListTable) in the second column of the scrolling list for debugging purposes; the actual content will be updated through AJAX queries in the final template.
- Fixed several syntax errors such as `<` becoming `<` - Adjusted text formatting and improved readability throughoutTo experience the described issue firsthand, adjust the horizontal scroll and observe the debug outputs. The last three lines should display 'E.style.width = '. Expected outcomes include '600px' for IndexContainer and IndexHeader along with '1000px' for IndexListTable.
The fiddle employs a No-Library (pure JS) JavaScript framework and adopts a No wrap - in head load style. While tackling challenges, JQuery usage is avoided for self-containment and independence purposes.
Thank you!