PHP conditions depending on window width (media queries?) - php

I have a responsive website and I need some PHP conditions depending on the windows width (or media queries).
Example:
if ($window_width > 1400px) {
echo 'Your window is wider than 1400px';
}
elseif ($window_width > 1000px) AND ($window_width < 1399px) {
echo 'Your window is between 1000px and 1399px';
}
else {
echo 'Your window is narrower than 1000px.';
}
Thanks for your help!

check this
Goolgle Mobile Detect
Try to use http://www.php.net/get_browser and check for isMobileDevice field. It might help only, of course, if the path to browscap.ini is set up in php.ini. If not, you can use php classes like https://github.com/garetjax/phpbrowscap

Nope you can not do it with php.
php is strictly server side
user javascript instead.
Below is my code to get device resolution using javascript
<script>
screenWidth = window.screen.width,
screenHeight = window.screen.height;
console.log(screenWidth);
console.log(screenHeight);
</script>

In views you can show/hide divs, something like this:
<style>
#web {display: block;}
#mobile {display: none;}
#media screen and (max-width: 320px) {
#web {display: none;}
#mobile {display: block;}
}
</style>
<div id="mobile">
<?php echo "is mobile"; //include("page_mobile.phtml"); ?>
</div>
<div id="web">
<?php echo "is web"; //include("page_web.phtml"); ?>
</div>

I'm assuming this is for device detection. I'm not sure if you can detect window width using PHP alone. If you can then this information would appear in the HTTP headers. I would recommend using an open source PHP class built for this: http://mobiledetect.net/

Here is the trick:
Evaluate the window width with js, then load your PHP in a frame and put the width in a parameter. Your PHP script then can read that parameter and perform different conditions depending on that value.
Here is the js part:
<script type="text/javascript">
var width = window.innerWidth;
document.write('<iframe src="content.php?w='+width+'"></iframe>');
</script>
Within your content.php file just read the width parameter and do something with it:
<?php
//Get width of browser window
$width = $_GET['w'];
echo ('width: '.$width);
?>

Related

Different Width for Image if Mobile - PHP

Below you will see that I am trying to add a 40% width to my image if not a mobile device. However, the image is still showing with 100% width even on Desktop Devices. You can view this page here: https://www.tattiniboots.com/product/terranova/
This is the code that I am using
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
// Any mobile device (phones or tablets).
if (!$detect->isMobile()) {
add_action('woocommerce_after_single_product_summary', 'bbloomer_add_below_prod_gallery', 5);
function bbloomer_add_below_prod_gallery()
{
global $product;
$id = $product->id;
if ($id == 5735) {
echo '<div class="woocommerce-product-gallery" style="padding: 1em 2em; clear:left;">';
echo '<center><h2>MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png">';
echo '</div>';
}
}
} else {
add_action('woocommerce_after_single_product_summary', 'bbloomer_add_below_prod_gallery', 5);
function bbloomer_add_below_prod_gallery()
{
global $product;
$id = $product->id;
if ($id == 5735) {
echo '<div class="woocommerce-product-gallery" style="padding: 1em 2em; clear:left;">';
echo '<center><h2>NOT MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png" width="40%">';
echo '</div>';
}
}
}
Echoing html inside a php file is a bad idea, both for readability, and debugging. Having inline css is also not a good thing. I would honestly recommend using media queries instead of using mobile detect, because it's not 100% accurate (it doesn't recognize some phones, and you have to keep it up to date).
With all that said, are you trying to "increase" 40% width to a 100% width image? It's not possible to have more than 100% width. You can try to increase the width of the surrounding div with the "woocommerce-product-gallery" class.
I also notice an inconsistency here:
if ( !$detect->isMobile() ) {
...
echo '<center><h2>MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png">';
}
It looks like it's checking if it's not mobile, and adding the mobile img, and the reverse for the else.
I think you've choosen a bad way to solve this problem.the best way is using css (media query).
you can't use "%" in html tag width.
width as an attribute inside the img tag always has a value in pixels (it's written without the pixels, just as the number), so the way you wrote it won't work.
If you want a percentage value for width as an inline attribute for the img tag, you should use the style attribute. So your img tag should look like this:
<img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png" style="width:40%;">
Yes this solution was resolved by simple declaring the sizing options within CSS. Remember that it is also possible to add a class within php to the image you have added to further facilitate this CSS declaration

How to change css based on url

I have a site that I want the user to be able to change the background image and some other css elements. The way I have attempted to do it is be having multiple html pages that the user can change via a dropdown and reload the page.
example:
href 1 = index.html
href 2 = red.html
href 3 = blue.html
Each page is identical and all point to the same stylesheet (style.php), but I want the linked stylesheet elements to change based on the url selected by the user.
So style.php starts like this
<?php
header("Content-type: text/css; charset: UTF-8");
include 'blue.php';
?>
body {
background: url(../images/backgrounds/<?php echo $background; ?>.jpg) no-repeat;
background-attachment: fixed;
}
Each html page has a matching .php page that defines each variable for the background.
So what I need is a way of selecting include 'blue.php' if the user is on blue.html. I could just use different style sheets but that would get cumbersome when altering the css.
Is there a way of doing this with php case based on url?
Lets say you have three themes:
Hot (red)
Cold (blue)
Neutral (default)
Create a class and theme for each one in CSS. E.g
body.hot
{
/*Set Base Theme details here, including background*/
}
body.hot p
{
/*Styles for hot paragraphs*/
}
/*etc*/
body.cold
{
/*Set Base Theme details here, including background*/
}
body.cold p
{
/*Styles for cold paragraphs*/
}
/*etc*/
Now use a session variable to hold the users choice and then add a class as required to the body tag:
$bodyClass = "";
switch($_SESSION['bodyClass']) {
case "hot":
break;
case "cold":
$bodyClass= "class='cold'";
break;
default:
$bodyClass = "";
}
Now insert that into the body tag
<body <?=$bodyClass ?> >
Why not use a $_SESSION variable for the user's background choice instead of having multiple HTML pages? That way, you could avoid duplicating code.
If you wanted to try this route, you could include switch.php in your stylesheet instead of include blue.php, where switch.php checks which background to apply:
<?php
// switch.php
switch($_SESSION['background']) {
case "red":
// apply red background
break;
case "yellow":
// apply yellow background
break;
default:
// apply blue background
}
?>
I have a site where the user can edit the color/ font-size and font type and i'm saving the values in my db.
Only the editable elements in my site are in a php called file "style.php" like this (no header or anything):
.main-header{ background: none repeat scroll 0% 0% <?php echo $edge_background ?> }
.sub-menu .arrow{ border-bottom: 9px solid <?php echo $edge_background ?> }
In my header i have a sql that check if the user have any value in my db and, if it does, include that file like this.
<head>
<!-- your stuff -->
<?php
//after sql check with results
$edge_background = "my value";
$color2 = "my value";
?>
<style type="text/css">
<?php include('styles.php') ?>
</style>
</head>
I dont know if that is the best way, but works fine and dont need to create alot of files.
In your case the value will change with the url. You can just check the url and then give a value to your styles with $_SERVER['SERVER_NAME'] and $_SERVER['REQUEST_URI']

PHP <Style> change background color of div

I have a variable with a score and I'm having php change the color of a div element based on this variable. This if statement is always resolving to True. Anyone see the flaw?
<style>
.poster{
background-color:<?php
if($voteRating > 80.0){
echo "#2ecc71;";
}
else{
echo "#f1c42c;";
}
?>
}
.year{
color:;
}
</style>
Personally, I would create two CSS classes and echo an appropriate class name on the element instead.
if($voteRating < 80)
{
echo "<div class='one-class'>";
}
else
{
echo "<div class='another-class'>";
}
Or, considering this is more of front-end thing, maybe use ajax to determine the $voteRating and then change the style with javascript. Just some alternatives.
Nothing wrong with code. Try echoing $voteRanking to see if it gives more then 80.0
try something like this:-
<style>
.poster{
background-color:<?php echo ($voteRating > ceil(80.0)) ? "#2ecc71;" : "#f1c42c;"; ?>
}
.year{
color:;
}
</style>
You should create different classes for each color and then use javascript or php conditions to set the class upon page rendering or any other event triggering. This way its easy to debug issues with your code.
for example
<style>
.posterhigh{
background: #2ecc71;
}
.posterlow {
background: #f1c42c;
}
</style>

Passing a php/mysql value to a div, accessible from javascript

I am creating a <div> that represents a table row in sql, with php. Fine.
Then I am using a javascript function to test the values of the div (position, width etc).Fine.
But I need to pass another value to the div to be checked by the function. It is there in the database but I don't know if there is a (simple) way to do it. Ideally it would look something like this.
<div id='plumber5' class='plumber' style='width:50px;left:100px' value='numericValue'>Derek</div>
The inline styles are generated in php, and can't think of a way of passing a numeric value other than by style (width, height etc) that js can detect.
eg.
<script>
a=document.getElementById('plumber5');
if (a.style.width=>75){
execute something here}
</script>
Instead of using style as a source for testing
Its very troubling!
Thanks
EDIT - solution
function checkData($type){
a = document.getElementsByClassName($type);
for(i = 0; i < a.length; i++)
{
if (a[i].getAttribute('data-dob') >= sessionStorage.Value) {
// execute something here
}
}
}
You can use the data attribute of HTML5 to add some custom data to your HTML tags:
http://ejohn.org/blog/html-5-data-attributes/
Example:
<div data-value='10' id='plumber5' class='plumber' style='width: 50px; left: 100px;'>
Derek
</div>
You can get the value like this:
<script>
a = document.getElementById('plumber5');
if (a.getAttribute('data-value') => 75) {
// execute something here
}
</script>
You can use data- attributes this way:
<div id='plumber5' class='plumber' style='width: 50px; left: 100px'
data-value='numericValue'>Derek</div>
Note: HTML5 Data Attributes are supported only in modern browsers like IE 9+, Chrome 12+, Firefox 5+.
Notice that you have an error in the style attribute. Replace:
style='width=50px;left=100px'
With:
style='width: 50px; left: 100px'
If your audience doesn't support HTML5, you can embed a div like:
<div id="plumber5" class="plumber" style="width:50px;left:100px">
Derek
<div style="display: none">numericValue</div>
</div>
That would hide the value from view, but would allow you to access it view Javascript.
HTML5 supports data-* tag attributes, so you can use:
<div id='plumber5' class='plumber' data-value='numericValue' data-myothervalue='otherOne'>
Derek
</div>
EDIT
Since it looks messy in comments, here's how to access the example values:
var myDiv = document.getElementById('plumber5');
var myVal = myDiv.getAttribute('data-value'); // 'numericValue'
var myVal2 = myDiv.getAttribute('data-myothervalue'); // 'otherOne'

PHP in CSS - "If page is in this directory, echo this"

I have several sites on the same hosting package. They’re all in different directories. ( i.e. “htdocs/site1”). I want to be able to have them all share one CSS file.
I was wondering if there is a way to change the color of certain elements based on which directory the site is in.
Ideally I would like to be able to define what directory the page is in and what color to use for each directory. Then in my CSS do something like:
.button { color: <?php echo $color ?> ;}
to each element that gets a color change.
Is this possible and if so, how do I go about setting this up?
thank you
You could add different classes to your body tag depending on the directory:
<body class="<?php echo $dir; ?>">
where the $dir variable is given a different value (let's say $dir = 'site1',...) for each directory...
... And then have something like:
.site1 #button { /*styles*/ }
.site2 #button { /*styles*/ }
.site3 #button { /*styles*/ }
in your CSS file.
You could add a CSS class to the body tag of the HTML document to determine the site. In PHP you would have to find a way to write the correct site into to the document. Do you use some kind of global template?
Just to give you an idea:
PHP:
<?php
// some code
// some logic to determine which site you are on - let's say ...
$site = 'SITE1';
?><body class="<?php echo $site; ?>"><?php
// more code
?>
CSS:
body.SITE1 #button { color: #ff0000; }
body.SITE2 #button { color: #0000ff; }
body.SITE2 #button { color: #123456; }
You could dynamically generate the css file using php, where you'd have
<?php
switch ($_SERVER['SERVER_NAME']) {
case 'www.site1.com':
$color = '#ff0000';
break;
case 'www.site2.com':
$color = '...';
break;
...
default:
$color = '...';
?>
.someclass { color : <?php echo $color ?>; }
This is somewhat inefficient, however. You'd be building a css file just to change a single color each time. Better way is to simply embed the color change in the page's header as an in-line style. That way you don't have to mess with making your server parse CSS files as if they were PHP scripts, and you can put the site-specific css overrides into that inline style in the site's header.
Honestly, I would suggest you add a class to your html tag:
<html class="site1">
And within your CSS, define your css:
.site1 * .button1{ background:#f00;}
.site2 * .button1{ background:#f0f;}
.site3 * .button1{ background:#ff0;}
You can find some more information on this subject here for a PHP approach.

Categories