Including PHP depending on screen width size

Question

I read a lot about it, I tried a lot as well... I almost think it's possible, but I need your help.

I want to load some content depending on the screen width. It's a sticky navbar with social network sharing buttons (follow on twitter, like on facebook, the usual).

Using this code, It loads the html, perfectly. BUT the scripts inside it, does not. I use jQuery animation to show the buttons when the cursor is over the logo, and the buttons use javascript to, well, work. But, loading this way, it's like there was no scripts inside that html.

$(function () {
   var width = $(window).width();
   if (document.documentElement.clientWidth >= 992) 
      $('#Navbar').load('navbar.html');
});

I tried with PHP, then. A simple include() worked. The navbar was loaded the way it was supposed to.

Since PHP cannot know the screen width (and since I am using bootstrap, I following it's screen sizes), I thought I could do this (I changed the .html to .php, it's all the same)

$('#NavBar').append('<?php include "navbar.php"; ?>');

But it doesn't work.

Is there a way for me, using jQuery, to call the include()? Or any other way that could make this work?

Media queries and display: hidden are not options. I don't want to load the content and keep it hidden. I want to just load it when it's needed.

Possible duplicate of [jQuery .load() call doesn't execute javascript in loaded html file](http://stackoverflow.com/questions/889967/jquery-load-call-doesnt-execute-javascript-in-loaded-html-file) — Philip, May 07 '16 at 23:22
Or http://stackoverflow.com/questions/1317080/jquery-ajax-load-java-script-not-executing — Philip, May 07 '16 at 23:25
Or http://stackoverflow.com/questions/16352371/jquery-load-ajax-not-executing-javascript-in-returned-html-after-appende — Philip, May 07 '16 at 23:26
Thank you, @Philip. I've read all of that. Still don't know how to include the PHP using jQuery. :) — borbs, May 07 '16 at 23:29
The problem, as I understood it, is that the JS in your included/loaded HTML file is not executed, right? In that case, the last link's answer should help you with that. (No more need for PHP in this matter :) ) — Philip, May 07 '16 at 23:29
@Philip I tried. This code is supposed to get everything inside the div container and append to "navbar", including the script, right? It doesn't work. Loads nothing, this time. `$.get('navbar.php', function(result){ $result = $(result); $result.find('.container').appendTo('#Navbar'); $result.find('script').appendTo('#Navbar'); }, 'html');` — borbs, May 07 '16 at 23:41
Oh, I think this is important to say: `script` is also inside the container. It's a twitter button, after all... — borbs, May 07 '16 at 23:43
The easiest way, I think, would be to separate the HTML from the JS, so use `.load()` to load the HTML and jQuery's `$.getScript` for the JS content (file of generated JS content from PHP) — Philip, May 07 '16 at 23:45
Or: use `.ajax()` to load the HTML and use the succes callback closure inside jQuery's `.ajax()` to execute the code (if it's always the same) — Philip, May 07 '16 at 23:48

score 0 · Answer 1 · answered May 08 '16 at 00:39

These are two completely different programming languages so you can't call a php function from your javascript.

but you can call a reload of the page with some parameters or some kind of new url to make this work with php.

Example onepage php site:

<html>
<head>
<!--Your Stuff-->
</head>
<body>
<?php
  //access the parameter and it's value with php's global $_GET
  if(isset($_GET["mobile"]) && $_GET["mobile"] == 992){
    include "navbar.php";
  }
?>
<script>
//check if the document has the specified width and also if the parameter is already set
if (document.documentElement.clientWidth >= 992 && window.location.href.indexOf("?mobile=992") == -1) {
  window.location.href = window.location.href + "?mobile=992";
}
</script>
</body>
</html>

The Example above works if you don't have any additional get parameters on the site and navbar.php only contains valid html stuff.

Including PHP depending on screen width size

1 Answers1