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.
1 answers
solution1
0 2016-05-08 00:39:04
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.