How to set a php variable with javascript?

Question

I am going to set a php variable with javascript, the php variable.

I want to give size of browser to a php variable and then echo best css for that (a kind of responsive website by different css and not css3).

<script src="jquery-1.10.2.js"></script>
<script>
$(function(){
    var size=($(document).width());
    if(size>300){
           <?php
            $size="more";
           ?>
    }else if(size<300){
          <?php
            $size="less";
          ?>
    }

})  
</script>
<?php
if($size=="more"){
    echo '<link rel="stylesheet" href="index-1024.css"/>';
}else if($size=="less"){
    echo '<link rel="stylesheet" href="index-less-1024.css"/>';
}
?>

With this code php variable $size is always 'less'

PHP runs on the server, javascript runs in the browser. By the time the page is in the browser and javascript is running, it's way too late to try and change anything in PHP, you have to use ajax or reload the page to send a request back to the server to change the PHP. — adeneo, Jul 09 '14 at 10:37
PHP is a server side language while javascript is a client side language. Therefore, you can't set a php variable's value through javascript, unless you use AJAX requests. In any case, someone already thought about this kind of stuff. There are many libraries that does this job very well, don't waste your time trying to do things that has already been done previously by someone else in a very efficient way :P. In your case, I would rather check http://getbootstrap.com/ :) and use http://css-tricks.com/css-media-queries/ — briosheje, Jul 09 '14 at 10:38
You should just use some front side frameworks like Bootstrap.. there is no need to do those things with PHP.. http://getbootstrap.com/ — Hardy, Jul 09 '14 at 10:40
Of course that I know the different between server-side and client-side languages. but how can I import different css? — , Jul 09 '14 at 10:42

score 1 · Accepted Answer · edited Jul 10 '14 at 08:34

1

PHP scripts are executed at server. and Javascripts(jQuery) scripts are executed at your browser. There is no way you can set variables like that. Perhaps consider switching the css entirely in javascript:

script src="jquery-1.10.2.js"></script>
<script>
$(function(){
    var size=($(document).width());
    //if large screen, swap in large css
    if(size>300){
          $('#mystyle').attr("href", "index-1024.css"); 
    }

})  
</script>
<?php
//load small css as default
echo '<link rel="stylesheet" href="index-less-1024.css" id="mystyle"/>';

?>

edited Jul 10 '14 at 08:34

BoltClock

700,868
160
1,392
1,356

answered Jul 09 '14 at 10:37

JayKandari

1,228
4
16
33

He said that needs to use a diffrent css – Mohammad Kermani Jul 09 '14 at 10:41
@user574632 how is this working? – Mohammad Kermani Jul 09 '14 at 10:48
@user574632 there are a problem. what is $('#mystyle').href("index-1024.css"); – Jul 09 '14 at 10:49
@Kermani simply, the page is set from the server with the `index-less-1024.css` stylesheet. On page load, the widows size is checked with js, and if larger than 300, `index-1024.css` is swapped in. – Steve Jul 09 '14 at 10:50
@user3819979 That is simply selecting the link tag - i added the id `mystyle" to the markup so it is easy to select in js. Of course you can change the id to anything. – Steve Jul 09 '14 at 10:51
@user574632 but does not working and I got an error from firebug – Jul 09 '14 at 10:52
@user3819979 Oops, i ment to write `attr("href",` not `.href()` (confused jquery with vanilla js) see edit! – Steve Jul 09 '14 at 10:53
@user574632 nope, that does not working, again css file is **index-less-1024.css** and did not changed – Jul 09 '14 at 10:56
@user574632 thats a good way. thanks – Mohammad Kermani Jul 09 '14 at 11:02
What happens when user resizes the browser? Turns phone from portrait to landscape...?? :) – Hardy Jul 09 '14 at 11:27
@Hardy I told you about it. we should make our website responsive with css rules for some size for example if we load a css that is for width=342 we set a bigger css file for that for example width=480 – Mohammad Kermani Jul 10 '14 at 06:26

How to set a php variable with javascript?

1 Answers1

Linked