I'm using the following code to add some conditional styles to a webpage (I use traditional conditional comments for IE 9 and down):
<?php if (stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10')) { ?>
<link href="/css/ie9.css" media="screen" rel="stylesheet" />
<?php } ?>
The problem is that the style sheet is still not being applied to some versions of IE 10, and definitely not IE 11 preview. Is there a way to target all versions of IE 10 and up? I've only seen formatting that uses [1-9], but [10-11] doesn't seem to be working.
Put some code in your user agent check to see if anything is being returned at all, it may be returning something other than "MSIE 10", it is possible that IE 10+ returns simply IE or some other statement. I have been using javascript to do this very same thing. (despite the cat-calls from the purists about using conditional comments)
Here is my javascript:
function isIE(ver)
{
var myNav = navigator.userAgent.toLowerCase();
var IEVer = parseInt(myNav.split('msie')[1]);
if ((typeof IEVer == "undefined") || (IEVer == null)) {
IEVer = 0;
}
if IEVer = ver {
return true;
}
else {
return false;
}
}
Then in where i'm adding stylesheets is do something like:
if isIE(10) { do something }
Update: according to Microsoft, you should use feature detection instead of browser detection: http://msdn.microsoft.com/en-us/library/ie/hh273397%28v=vs.85%29.aspx
Related
The PHP redirect should working for IE version 8 and below. version 9 is working fine but IE 10.0 is not working with this code (looks like IE 10.0 gets dismissed or etc.):
if ( preg_match("/(?i)msie [1-8]/",$_SERVER['HTTP_USER_AGENT'])) {
header("Location: http://www.XYXYXYX.com");
}
my goal would be, that the redirecting should only work for MS IE 8 and below.
Thanks alot.
EDIT2 / SOLUTION:
i should have changed my code to this:
if ( preg_match("/(?i)msie [1-8]\./",$_SERVER['HTTP_USER_AGENT'])) {
header("Location: http://www.XYXYXYX.com");
}
The trailing dot ensures the version number is only one digit.
I think a more reliable way of redirecting for IE would be to do it via javascript using conditional HTML statements:
<!--[if lte IE8]>
<script>
window.location.assign('http://www.XYXYXYX.com')
</script>
<![endif]-->
Make sure you check the FULL version number.
if ( preg_match("/(?i)msie [1-8]\.0/",$_SERVER['HTTP_USER_AGENT'])) {
header("Location: http://www.XYXYXYX.com");
}
Note the ".0" suffix that gets checked. That way, you'll never need to change the code again for versions of 10, 20, 30 or even 80 that might come.
Ah, well, IE 5.5 was once released...
if ( preg_match("/(?i)msie [1-8]\./",$_SERVER['HTTP_USER_AGENT'])) {
header("Location: http://www.XYXYXYX.com");
}
Check that after the ONE single digit, there is a dot. If it is not a dot, it probably is a digit from a two-digit version number like "10".
preg_match('/(?i)msie (6|7|8|9|10)/',$_SERVER['HTTP_USER_AGENT'])
or
if(preg_match('/(?i)msie [1-9]/',$_SERVER['HTTP_USER_AGENT']))
{
// if IE <= 10
echo "version is less than 10"; //rest of your code
} else if(preg_match('/(?i)msie [10]/',$_SERVER['HTTP_USER_AGENT']))
{
// if IE = 10
echo "version is IE 10"; //rest of your code
}
else
{
// if not 10
echo " other browser"; //rest of your code
}
I have a website(www.website.com) and a mobile site (m.website.com) and I'm trying to allow users to "View Full Site" if they want from mobile. Currently I am using some Javascript to check screen width on full site then redirecting to mobile.
if (screen.width <= 699) {
document.location = "http://m.website.com";
}
This works fine. On the mobile site there is a "View Full Site" button. When you click this it redirects you to my script "force_desktop.php" which sets a cookie and then sends you to the main site.
<?php
setcookie("force_desktop", "1");
header("Location: http://www.mywebsite.com");
?>
Now that we set a cookie and redirected to the main website we need to check for the cookie instead of just checking for the screen width.
Logic
If Cookie force_desktop is found
Then exit
Else
run screen size test
Here is the code I attempted to use but doesn't work. This code is placed in my head.php file which will be run on every page and is placed between the script opening and closing tags.
Attempt 1
if($_COOKIE['force_desktop'] == '1' {
exit;
} else if($_COOKIE['force_desktop'] != '1' {
if (screen.width <= 699) {
document.location = "http://m.website.com";
}
};
Attempt 2
if(isset ($_COOKIE["force_desktop"])){
exit;
else
if (screen.width <= 699) {
document.location = "http://m.mywebsite.com";
};
Alternative logic that could work
IF Cookie force_desktop is not found AND screen.width <= 699
Then redirect to m.myseite.com
Else
Exit
Note
I have run the following script to make sure a cookie is being placed, and it is.
<?php
print_r($_COOKIE);
?>
I've run out of ideas and know my coding isn't correct, especially the If/Else statement within the If/Else statement. I also am not sure if it is better to use the "isset" to see if the cookie is being used or ($_COOKIES['variable'] == "#"). I'd really appreciate some good feedback on this one.
Thanks in advance for your help and suggestions,
Matt
You're mixing JavaScript and PHP. You're trying to use screen.width in your PHP script, which doesn't make sense. You need to use an echo statement to output the JavaScript into the page. It'll then check the user's screen resolution and do the redirect.
Try this:
if(isset ($_COOKIE["force_desktop"])){
exit;
}
else
{
echo '<script>
if (screen.width <= 699) {
document.location = "http://m.mywebsite.com";}
</script>';
};
you should do this test at the top of the php page, and for sure you cannot mix php and java script like this
u can alter this code like
<?php
$flag = 0;
if(isset($_COOKIE['force_desktop']))$flag++;
?>
later in the page use the code as soon as <head> tag starts
..
..
<head>
<?php
if(!$flag){
echo '<script>
if (screen.width <= 699) {
document.location = "http://m.mywebsite.com";
</script>';
}
?>
You cannot mix javascript and PHP, javascript is front end and PHP is back end. Try something like this:
if( $something ){
Header("Location: somewhere.php");
}
I found many questions about Retina Display, but none of the answers were on the server side.
I would like to deliver a different image according to the screen, ex (in PHP):
if( $is_retina)
$thumbnail = get_image( $item_photo, 'thumbnail_retina' ) ;
else
$thumbnail = get_image( $item_photo, 'thumbnail' ) ;
Can you see a way of dealing with this?
I can only imagine a test in JavaScript, setting a Cookie. However this requires an initial exchange to set it. Anyone have a better solution?
Cookie setting code:
(function(){
if( document.cookie.indexOf('device_pixel_ratio') == -1
&& 'devicePixelRatio' in window
&& window.devicePixelRatio == 2 ){
document.cookie = 'device_pixel_ratio=' + window.devicePixelRatio + ';';
window.location.reload();
}
})();
Alright since it seems there's no better way for the moment, here is my solution combining JS, PHP and Cookies.
I hope there will be better answers in the future
<?php
if( isset($_COOKIE["device_pixel_ratio"]) ){
$is_retina = ( $_COOKIE["device_pixel_ratio"] >= 2 );
if( $is_retina)
$thumbnail = get_image( $item_photo, 'thumbnail_retina' ) ;
else
$thumbnail = get_image( $item_photo, 'thumbnail' ) ;
}else{
?>
<script language="javascript">
(function(){
if( document.cookie.indexOf('device_pixel_ratio') == -1
&& 'devicePixelRatio' in window
&& window.devicePixelRatio == 2 ){
var date = new Date();
date.setTime( date.getTime() + 3600000 );
document.cookie = 'device_pixel_ratio=' + window.devicePixelRatio + ';' + ' expires=' + date.toUTCString() +'; path=/';
//if cookies are not blocked, reload the page
if(document.cookie.indexOf('device_pixel_ratio') != -1) {
window.location.reload();
}
}
})();
</script>
<?php } ?>
in function.php :
add_action( 'init', 'CJG_retina' );
function CJG_retina(){
global $is_retina;
$is_retina = isset( $_COOKIE["device_pixel_ratio"] ) AND $_COOKIE["device_pixel_ratio"] >= 2;
}
Then after I can use the following GLOBAL:
global $is_retina; or $GLOBALS['is_retina'];
As you do not specify for what exact use-case you are needing this and i do not really see a use-case for the server knowing what resolution the client wants it's images in (in my opinion the client should decide) here is my suggestion:
Use something like Retina.js or use the srcset attribute <img src="low-res.jpg" srcset="medium-res.jpg 1.5x, high-res.jpg 2x">
This way you could also leverage browser caching of the images. which you can't do if you have one url for two different image sizes. Even if its an automatically created/updated image caching works using last-modified or etag headers.
I'm not sure exactly how, but the pure PHP way of figuring this out would be using get_browser which returns the browser version and SOME capabilities. This may be able to tell you some information that MAY lead to whether its running on a retina.
http://php.net/manual/en/function.get-browser.php
Additionally, you can look at $_SERVER['HTTP_USER_AGENT'] which will tell you the things about the device. then you need a list of Devices that have retinas and do a comparison to get the answer.
Doing your retina detection in the JS is probably much easier and foolproof.
In all major browsers, except Internet Explorer, the following script returns the page to its previous vertical position on reload:
<?php $y = $_COOKIE["y"]; ?> //in head tag before any output
and
<?php
print "<body onScroll=\"document.cookie='y=' + window.pageYOffset\" onLoad='window.scrollTo(0,$y)'>";
Can someone please tell me how I would modify this code to remember the page's vertical position in IE? Thanks.
From w3Schools :
IE 8 and earlier does not support this property, but may use "document.body.scrollLeft" and "document.body.scrollTop" instead.
I use the following code to do basic IE/not-IE browser detection:
if(document.all) { //if IE
//code
} else { //if not IE
//code
}
You should be able to combine this with AlecTMH's document.body.scrollLeft and document.body.scrollTop suggestion to get where you're going. But you're likely going to have to write a function for it and then call that in onScroll().
I'm not exactly a JavaScript wiz, but...
function blah() {
if(document.all) { //if IE
document.cookie='y=' + document.body.scrollTop
} else { //if not IE
document.cookie='y=' + window.pageYOffset
}
}
...might almost be functional code.
See following code
<div id="news-ticker">
<marquee id="news-marquee" scrollamount="3" onmouseover="stop()" onmouseout="start()" style="padding-top:2px; padding-bottom:2px;">
Latest News
</marquee>
</div>
<script type="text/javascript">
var currenturl = document.URL;
if ((currenturl.indexOf("&lang=nl") != -1) || (currenturl.indexOf(";lang=nl") != -1) || (currenturl.indexOf("&lang=nl#content") != -1)) {
document.getElementById("news-marquee").innerHTML = '<?php require_once("news_nl.php"); ?>';
}
else if ((currenturl.indexOf("&lang=en") != -1) || (currenturl.indexOf(";lang=en") != -1) || (currenturl.indexOf("&lang=en#content") != -1)) {
document.getElementById("news-marquee").innerHTML = '<?php require_once("news_en.php"); ?>';
}
else if ((currenturl.indexOf("&lang=fr") != -1) || (currenturl.indexOf(";lang=fr") != -1) || (currenturl.indexOf("&lang=fr#content") != -1)) {
document.getElementById("news-marquee").innerHTML = '<?php require_once("news_fr.php"); ?>';
}
else {
document.getElementById("news-marquee").innerHTML = '<?php require_once("news_nl.php"); ?>';
}
</script>
On a HTML page, I have a div that contains a marquee to display the latest news on the webpage. The contents that need to be displayed in the marquee are taken from a php file. Here's what's happening:
When the page loads, I first see "Latest News" appearing in the marquee. That is to say: It displays shortly before the javascript gets executed.
After that, the news-marquee shows the correct content: If I'm on the Dutch (&lang=nl) part of the website, the Dutch news items are shown, the French items are shown on the French site etc. So that works.
But some pages don't have the "&lang=xx" trail on the URL, so in those cases I have the else condition which displays the Dutch news items by default. This however, does not get executed. The news-marquee stays blank. Not even "Latest News" is shown anymore.
Firebug doesn't throw any errors at me, so I have no idea what could be going on here.
Your issue is your use of require_once instead of include. require_once only allows the file to be included once.
I would recommend doing the check in PHP and only giving the client one of the files to reduce bandwidth usage too.
Don't use innerHTML period. It's a proprietary Microsoft JScript method that does not correctly parse code it inserts in to the DOM. In translation when you try to interact with code you have "inserted" via innerHTML it may or may not be visible to the browser.
Stick to W3C standard methods such as appendChild, importNode, insertBefore and replaceChild.
If you need to convert between text and code use new DOMParser() to parse text-to-code and new XMLSerializer() to parse code-to-text.
Also you should stick to using single quotes in PHP as double quotes are used to interpret variables as text which requires more resources. I am presuming that the includes are being executed on the server and that you're not actually expecting those to be executed at the client.