Media Queries

Hi,

First off, I am a novice at programming but have a good grip on Webdev so far. I am trying build a 'responsive website', but I am struggling to detect the browser width.

Fabrice Harari was kind enough to give me his js code:

function JSGetBrowserWidth()
{
// return document.body.clientWidth;
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
return w
}

Not knowing how to code/handle js. I have pasted the code in my home page's browser code (which is flipped to JS : blue). After this I have no idea what to do....

Can anyone help me detect a browser's width so that I can adjust my content depending on the device that is being used?

Webdev 7-79p
Webdev Dynamic Site
Target Platform: Any

Thanks in advance to all the pro Webdevers!
NH

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!