Ok So I am making a 2.0 version of a my website and completely re-designing the layout I have brought in bootstrap because what I mainly want to do is make the website mobile friendly so basically what I'm trying to do is something along the lines of this and done in php
if(browser-width < 600px && browser-width > 100px) {
<div class="mobileHeader">stuff here</div>;
}elseif(browser-width > 700px) {
<div class="sidebar">stuff here</div>;
};
I hope this makes sense I have been trying to figure this out for awhile to no avail.
You can't access browser width (or any other user properties) with PHP. The only thing possible would be to set the width in a cookie (with JS) and then read it with PHP. However, this works only on the second request, as PHP gets executed before JS.
I do suggest you read something about responsive webdesign and you might find out you don't actually need this.
You cannot know the browser-width in php. You have to do this with javascript. Also even if php had this result, it is static, so what if you resized the window? Php wouldn't detect that. In my opinion you are choosing the wrong tools for your task.
Source to prove my point
The browsers don't report chrome width on the request. So PHP will never know that. You will need to do that with CSS media queries or with JavaScript.
Related
Any idea how to achieve this? Basically I need different div widths for different devices (its complicated and cannot be achieved through css)
if screen width < 786 {
echo div.span3
} else {
echo div.span6
PHP can't get screen width because there is no screen for PHP :) It only executes on server and returns HTML to the browser, so PHP got no direct contact with browser.
Elon Than is correct - PHP doesn't know anything about the browser widths. Maybe what you are looking to achieve can be done with media queries: http://css-tricks.com/css-media-queries/?
Maybe you could display both divs and toggle the display depending upon the screen width?
Hope this helps.
PHP is a server side language, it has no interaction with users browser whatsoever.
Look into JavaScript to achieve what you're trying to do. It can detect screen width, and you can manipulate DOM with it to show the content that is needed.
If browser backwards compatibility is not important look into CSS media queries. (I am not really sure about the browser support, but I reckon it's IE9+)
Hi I am currently using jQuery to load a variable php layout depending on the browser width.
function setLocation(url) {
if (window.location.href.indexOf(url) === -1)
window.location = url;
}
function reloadPage(width) {
width = parseInt(width);
if (width < 701) {
setLocation("yournarrowpage.php");
} else if (width < 900) {
setLocation("yourmediumpage.php");
} else {
setLocation("yourwidepage.php");
}
}
$(function() {
reloadPage($(this).width());
$(window).resize(function() {
reloadPage($(this).width());
});
});
Is it possible to accomplish this with just php?
If yes, how? Please help.
Why do I want to do this when I can simply re-arrange my layout with CSS?
I do not want to use the CSS property #div { display:none } as the issue is that my layouts are loaded with very many images, javascript and also widgets.
I even tried a responsive layout but unfortunately some of the image details are hardly visible in small screens.
Using css property display:none, will still loads the un-displayed content wasting a lot of bandwidth. Lets say for a mobile browser to load 1.5 MB of site and then hide 1.2 MB of it???? Well that may not be a good idea.
For smaller browsers these widgets will not make any sense, hence I would want to load a lighter version of the same.
This is what I think. Please feel free to correct me if I am wrong as I am still a novice when it comes to programming and am still in the learning stage.
Combine CSS media queries and javascript to prevent loading of the larger items/areas you don't want to load...
if ($('window').width() > 1000) {
// load your full functions and stylesheet
}
if ($('window').width() < 1000) {
// load your narrow functions and stylesheet
}
I've recently combined css media queries in a method similar to this, and then added animations to help make the transition less painful.. it's quite nice.
The problem with attempting this in PHP is that you cannot tell the client width from your web server, which means you would have to dip into the request headers.
There is a library to help with device detection using PHP on Google Code.
Finally a word or two of warning. You will need to keep this script up to date in order for it to keep working. The methods it uses to tell what the device is falls under the banner of "browser sniffing", which relies on browsers sending through certain headers, which are subject to change in later versions / new browsers. Also, most of the time, you simply don't want to force mobile users to view a mobile version of your website, so if you do decide to implement things this way, give people an option to view the normal website on their mobiles.
PHP just outputs text to the client. It knows absolutely nothing about the client that the client doesn't tell it.
I say client, because there is no guarantee that the software that initiated the request to your PHP script is even a browser.
You've ruled out CSS, but honestly, if you don't want to use javascript then it's the only other option you have. The selectors in CSS3 are really quite powerful and you can make the same page appear completely different for different browser widths.
There are many ways we can deal with CSS browser compatibility issue.
Such as using Box model design or developing different style sheets for different browsers or using Dynamic CSS techniques (writing PHP script in CSS file).
Is there any way that we can know that Style which is being executed in the browser is supported by that browser or not?
Can we write code something like below in dynamic CSS using PHP code. I mean is there any function or way to achieve this functionality.
FILENAME: styles.css.php
<?php
header("content-type: text/css");
// isStyleSupported() function will return true or false with respect to the browser it is being executed
if (isStyleSupported('min-width')) {
// styles here
} else {
// alternative style here
}
?>
I know it might be difficult to keep the record of different version of browsers with respect to its CSS support. But still curious, if anyone know any solution or alternative method?
You can't determine the browser of the client with a purely server side solution like PHP, since the server only sends information out and receives no feedback from the browser.
This sounds like a job for Javascript, where you'd check if a particular CSS style is supported by the client's browser..
Once you determine what styles the requesting browser supports, you can use AJAX and PHP to serve the correct styles. On the other hand, you could also use pure Javascript to serve the correct styles.
The advantage of using a Javascript function vs an AJAX triggered PHP function, to test for CSS style support, is that you can actually test the individual browser CSS support with JS instead of relying on some documentation of what styles are supported by what browsers, which you would have to do with a PHP function.
At any rate, you need Javascript to determine the browser being used.
I Googled for IE hack and found pages like CSS hacks which are relevent to your question: how to embed conditional processing within the CSS (not using PHP).
I need some opinions on using PHP to make completely "scalable" websites.. For instance, using viewport resolution and resizing images, applying dynamic css styles..... In my mind doing this just add's to the complexity and should not be done, it should be fixed or fluid using strictly css and no server-side languages to generate layouts based on the device size..
I need some input and maybe some philosophy on why using this approach is not used at all..
Manipulating a web page in this way is the domain of CSS controlled by Javascript (or a library such as JQuery, see CSS docs). You shouldn't be wasting your server's processor cycles when client-side implementations will be far more responsive for the user and allow all the flexibility you require. Changing font size etc can be done almost instantly in the browser without the user having to request another page from your (remote) server, which would result in a slower user experience.
Really, really DON'T
As Andy says it is the domain of CSS.
Trying to adapt a design with PHP will make your code unmaintainable. You should really learn to use CSS efficiently to avoid this kind of hack.
The only reason for which you could use PHP to detect browser and adapt content is mobile browser.
Given the number of the existing User Agent tokens, it'll be almost impossible to make y scalable websites.
I'm really not that good at Javascript and that, so I need another bit of help. I want to be able to do a quick bit of AJAX using PHP then when the ajax response is finished show the response in a div and SLIDE it down nicely.
The basic AJAX side of it is no problem. But I want to be able to have it slide nicely without using any framework like jQuery or MooTools. Mainly for learning, but there are other reasons. So, any help on a very simple way od doing so would be handy. I can't really find much online. If I have to use jQuery then I guess I can, I have played about with it but I'm not a fan of Javascript at the best of times...
So yeah, pretty much any advice/tips/thoughts/help would be really handy!
I guess the basics would be something of a timeOut() in combination with increasing the height until it is full height:
set the display of the element to none
get the full height of the element, something like:document.getelementById('IDofElement').style.height
set the height to 0 and the display to something like block
set a timeOut() and increase the height in the called function, activate a new timeOut() if the element is not already full height.
The only real disadvantage of not using a library would be that you would have to test in a lot of different browsers and perhaps make modifications according to the browser used. Libraries have already solved that problem for you.
Personally, I'd just use JQuery. If you want to see how they do it, then download the developer version of the library and look at the code.
If you're not a fan of javascript, then use a library, it means you have to write less.