getting screen width into javascript variable and sending it through ajax to a php page to avoid page load

Question

This is the JS to detect the screen resolution on my page naming index.html and sending it to php, so that the values can be retrived using $

Answer 1

I finally get the solution for my own question :)

<script type="text/javascript">
var width = screen.availWidth;
var fwidth = (width - 270);
var i, k = 0;
var j =2;
for (i=1; i<=j; i++)
{
    fwidth = fwidth - 220;
    if (fwidth < 220)
    {
        j = j -1;
    }
    else {
        k = k + 1;
        j = j + 1;
    }
}
var containerwidth = (width - (fwidth + 10));
var contentwidth = containerwidth - 250;
document.write('<style type="text/css"> .container {width:' + containerwidth + 'px; } .mainContent { width:' + contentwidth + 'px; } </style>');
</script>

Where contentwidth is the grey content and containerwidth is the #Wrapper as per question asked by me...

Answer 2

I'm not sure if I understood your problem but this is what I've got: if you only intend to get the screen width and then set the class I disencourage you to do it that way. It's not nice and in the future if you need to change your page layout you'll be doomed by having all those echo in php and you'll avoid a lot of redirects (index.html -> process.php -> index.php).

By your example you can do it all in Javascript.

This is example is with JQuery

var width = $(window).width(); //get the width of the screen
$('#Wrapper').css("width",width); //set the width to the class

If the idea is for very different screen resolutions (from PCs to SmartPhones), you should consider changing your approach.

Good luck :)

---

TRY THIS: (I believe is what you want)

You can do this with just JS and CSS. Here is an example:

set the style for your body margin and your test div:

<style type="text/css">
    body {
        margin: 0px 0px 0px 200px;
}
    .divForTesting {
        width: 250px;
        border: 1px solid green;
        height: 100px;
        float: left;
}
</style>

then add this script:

<script>
    // get the screen width
    var width = $(window).width();
    // get the number of pixels left in the screen (which is the width
    // minus the margin you want, rest by 250px which is the "inner boxes" width)
    var size = (width - 200) % 250;
    // then re-set the margin (the "-10" is because you'll need extra space
    // for borders and so on)
    $('body').css("margin-left",200+(size-10));
</script>

and test it with this html:

<!-- I've aligned the outter div to the right -->
<div style="border: 1px solid red; float:right;" id="test">
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
</div>

It works in different resolutions.

Give it a try :)

Answer 3

You can use a javascript lib like jQuery. Instead of:

window.location.href = "http://localhost/main.php?width=" + width + "&height=" + height;

You can call:

$.get("http://localhost/main.php?width=" + width + "&height=" + height, function(data, textStatus, jqXHR) {
    // replace the html body with the output of main.php
    $('body').html(data); // you might want to customize that
});

Documentation of $.get() jQuery function.