I created a demo that accomplished this. I'll try to explain it. Here's what I did--
1. Open up the page (or template) you need to know the width of.
2. Right click the page's background and click "Description".
3. In "Advanced", under the "HTML code added to the page header", paste this code (delete the extra spaces I added at "< script" and "< /script"):
< script src="[code.jquery.com]; /script>
< script src="[code.jquery.com]; /script>
4. Click "Validate" on this dialog.
5. Create a text box (edit) control.
6. Right click the control and open the "Description".
7. You can give it any name (i.e. EDT_ResizeDetect), but you must set the "Caption" to:
Window Resize Event
8. Click "Validate" and close this dialog.
9. Right click the page's background and choose "Code".
10. Inside the code block for "Load (onload) of PAGE_....", paste this code:
jQuery(function() {
// Define
var resizeTimeout = null;
// Detect Resize Event
jQuery(window).resize(function () {
// Clear Previous Timer
window.clearTimeout(resizeTimeout);
// Set New Timer
window.setTimeout(function () {
// Trigger Event
jQuery("td:contains('Window Resize Event')").parents("tr").find("input").val(jQuery(window).width()).trigger("change");
}, 350);
});
})
11. Notice in that JavaScript above, the phrase "Window Resize Event". This is what link's this code to your control.
That should be it! Run the page and resize it. The value of your text box should reflect the window's width in pixels.
The uses jQuery (which we applied in Step #3). While it's not necessary to use jQuery to achieve your goal, it simplifies the JavaScript and it's required to use my sample code.
Let me know if you experience any issues!