Diese Seite mit anderen teilen ...

Informationen zum Thema:
Forum:
WebDev Solutions
Beiträge im Thema:
2
Erster Beitrag:
vor 4 Jahren, 7 Monaten
Letzter Beitrag:
vor 2 Jahren, 2 Monaten
Beteiligte Autoren:
Andrew Strubhar, NH

Media Queries

Startbeitrag von NH am 27.06.2013 15:23

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

Antworten:

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="http://code.jquery.com/jquery-1.9.1.js"><; /script>
< script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"><; /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!

von Andrew Strubhar - am 24.11.2015 17:06
Zur Information:
MySnip.de hat keinen Einfluss auf die Inhalte der Beiträge. Bitte kontaktieren Sie den Administrator des Forums bei Problemen oder Löschforderungen über die Kontaktseite.
Falls die Kontaktaufnahme mit dem Administrator des Forums fehlschlägt, kontaktieren Sie uns bitte über die in unserem Impressum angegebenen Daten.