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+)
Related
I want to remove this background color after 10 seconds using php. I don't want to use js, css. Is it possible to remove background color using pure php code?
<?php $running_location = '<p style="background:#E1FEE0;"></p>' ?>;
PHP runs on the server. All the work it does is finished before the browser receives the page.
Server side code cannot alter the page on the client after the page has been delivered.
You have to use a client side technology for this. Sensible approaches would be CSS animations or JavaScript. (NB: I'm assuming CSS animations can do this, I haven't used them enough to be sure).
Less sensible options would be to use a refresh either via HTML meta or HTTP to load an entirely new page from the server (which is identical but without the background colour).
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.
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.
I apologize for my english. Correct the title if it's necesary, please.
I want different pages of my web site to have different images in some background divs.
I'm using one CSS file for all the site.
For example, the supportingText div for the "about me" page has different image than "my project page".
Right now I use inside every pages (aboutMe.html, myProject.html) for any supportingText div a style attribute for this task.
And for example:
When I want to let surfers change entire web site style design I can change to a different CSS file of course.
But if my pages have some different images, as I explained before, should I change others html files to do it?
I know that probably there is a solution in some way like in php.
Consider that I don't know anything about php but if you explain in very easy way won't be a problem to understand!! ;)
Is there a solution in javascript?
I'm using only XHTML and CSS.
EDIT
Thank you!
You have been very kind.
I understood everything except one concept that I hope you can clarify.
I have many divs with background images, as:
title - myPicture - navigation - supportingText
All of those have a grey levels images.
I would like users can change aspect of the web site.
Something like three options:
black and white pages
green pages
orange pages
So in this case I need to set divs images in a JavaScript script into html file as your example!
So the CSS file only is helpfull for dimension and all other staffs but not anymore for images background? Is it?
Thank you a lot!
I agree with John in that you really shouldn't hardcode style attributes into the HTML. But if for whatever reason you have to you can easily change them using JavaScript.
document.getElementById('supportingText').style.backgroundImage = 'url("image.jpg")';
or if you're using jQuery
$('#supportingText').css('background-image', 'url("image.jpg")');
Update:
Assuming you're using a button to trigger the change, the code (which you would put in your HTML document) would look something like this:
<script type="text/javascript">
function changeBackground(divId, newImage) {
document.getElementById(divId).style.backgroundImage = 'url("' + newImage + '")';
}
</script>
<button onclick="changeBackground('supportingText', 'image.jpg');">Change Background</button>
Essentially what you're doing here is creating a button which calls a JavaScript function (changeBackground()), and you're passing in the ID of the div that you want to change, and the name of the image file that you want to change it to. You could have multiple buttons with different values in the 'supportingText' and 'image.jpg' parameters.
Answer to Part 2:
You can apply styles via CSS or JS (as above). However anything you do in JS will override your CSS. It's really up to you how you divide it up.
If you have hard coded your styles, even just some of them, into your HTML and you want these values to change when someone chooses a new stylesheet then you're in a tough position. Hardcoding those styles into your HTML makes your code inflexible and leaves you unable to make things such as switching stylesheets dynamically easy either with PHP or JavaScript.
Your best bet is to remove the hardcoded style rules from your HTML and place them into your stylesheet. Then switching the stylehseet can be done easily with PHP or JavaScript.
If you can't remove them then you'll need to write your own JavaScript to do this which will be tedious as it will need to dynamically alter each page when it loads. Not only will this probably take a long time to do and be error prone but it can hurt your website's performance if it isn't done well.
Basically, by hardcoding style rules into your HTML you've tied your own hands and have no good options available to you. I recommend removing the hardcoded styles and making sure you avoid doing it again in the future. Not only to avoid issues like this but to make your site faster by allowing your CSS to be cached.
I have a website (using PHP). The main background is of green color and content area is of white. While switching to one page to another (as it takes a few milliseconds) the background color gives a flash before the white takes it over. I think its because of the way the dom element being drawn/created. I tried using ob_start(); and ob_flush(); but not much of a help.
Is there any way to avoid this?
Thanks
JJ
You might try explicitly setting a size (height and width) or min-height for the content area. You can also use a background image that has the white area. If your background is a solid color (or a horizontal gradient), you can use a 1px high gif that would be a very small file size. But you still might have a blink before the background loaded the first time.
Ultimately, I think users are used to seeing this. I don't think it's a big problem and wouldn't spend a lot of time trying to solve it. But maybe your boss disagrees.
Just a guess, but in your CSS, put the two rules in one CSS file, then the content area style declaration first, and make sure this CSS file loads before any others.
I don't know if it is the case, but I saw that to avoid the flickering problem of not stylized elements in IE, somebody added an empty script tag as
<script type="text/javascript">//This is necessary to avoid flickering of not stylized items in IE</script>
I personally quite like the flash. It lets me know a new page has actually loaded. It’s feedback.
An old colleague introduced me to a little-known Internet Explorer <meta> tag... thing that lets you do, amongst other things, a fade transition between pages, e.g.
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)">
It’s IE-only.