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 $_GET:-

<script type="text/javascript">

width = screen.availwidth;
height = screen.availheight;

if (width > 0 && height >0) {
    window.location.href = "http://localhost/main.php?width=" + width + "&height=" + height;
} else 
    exit();

</script>

This is the content of my PHP file naming process.php:-

<?php
$screen_width = $_GET['width'];
$screen_height = $_GET['height'];

//EDITED PORTION
echo '<style>#Wrapper {width:'.$screen_width.';}</style>';
?>

Now after getting the screen size i want to display the index.php.

NOTE THESE STEPS, AS TO UNDERSTAND THE WAY I WANT THINGS TO WORK:-

1. Page Load Started
2. Javascript detected available screen width.
3. It passes it to php file and the PHP variable got the screen available screen width.
4. Then page get displayed using that php variable (Means the page width is being set using that php variable)

In the whole process the index.php should not be reloaded. So, How it can be done?

EDIT:

As the JS passes the value to the php file it gets loaded, what i want is to get the screen resolution and accordingly set the website page width. But if JS send the data to php file and if at all we get it through ajax, it may can happen that my website get fully loaded and the style would not be implemented because it has already been loaded all the stuffs before the ajax work.

Is there any method which is efficient enough or we can do this one in a way that it become efficient.

This is my EDIT:2

To be more clear i'll actually explain what i want to achieve using the following image:-

Now if ill get the screen resolution say 800px then i know that i want to deduct 200px of left side from it, so it will become 600px and as my divs are 250px i'll be able to add only two. Therefore, to avoid showing that 100px in right i'll adjust my website page width to 700px.

Things i can do in php, but how to get all things get done at same time on same page?

The whole area you can call as #Wrapper Right One as #SideBar Left Area as #LeftContent

Hope i have explained things well. So please if someone can help me doing the needful :)

Answer 1

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 2

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 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.