I am using PHP to determine if a user is on a mobile device or desktop browser. Right now I have the statement set to echo a "yes" or "no." Those are both functioning correctly. However, I want to add certain CSS code if the device is mobile and certain CSS code if it is not. Is this possible?
Here is an example:
$ismobile = check_user_agent('mobile');
if($ismobile) {
<div id="slider1">
Sample Text
</div>
} else {
<div id="slide2">
Sample Text 2
</div>
Thanks!
$ismobile = check_user_agent('mobile');
if($ismobile) {
?><link rel="stylesheet" type="text/css" href="mobile.css">
<?php
} else {
?><link rel="stylesheet" type="text/css" href="desktop.css">
<?php
}
Yes, just like you echo "yes" and "no", you can echo your CSS styles inside a HTML style tag, or, even better, load a CSS file (<link rel="stylesheet" type="text/css" href="mystyle.css">).
You can put a class on your body like <body class="mobile">
and then use css to target specifically the mobile or not
.mobile #mydiv {background:red}
There are a few ways of doing this. I would first look into media queries because it is a bit of a neater solution and means you dont need to mix in php.
However the quick way would be
<?php
$ismobile = check_user_agent('mobile');
if($ismobile) {?>
<div id="slider1"> Sample Text</div>
<?php } else { ?>
<div id="slide2">Sample Text 2</div>
<?php } ?>
You could add two different style sheets:
<link rel="stylesheet" type="text/css" href="<?php echo check_user_agent('mobile') ? 'mobile' : 'desktop'; ?>.css">
Or just add a class to the body tag:
<body class="<?php echo check_user_agent('mobile') ? 'mobile' : ''; ?> another-body-class">
But you really should be using CSS Media queries which bases appearance off of screen resolution not the User Agent screen.
$ismobile = check_user_agent('mobile');
$style = $ismobile ? 'mobile' : 'notmobile';
echo '<div id="slider1" class='.$style.'>
Sample Text
</div>';
While the other replies work, I like to slimline code, so I'd stick it on 2 lines and be done with it.
$ismobile = check_user_agent('mobile') ? 'mobile' : 'main' ;
echo '<link rel="stylesheet" type="text/css" href="' . $ismobile . '.css">';
The logic behind it is simple. You have 2 stylesheets, named main.css for the main template, while mobile.css is for the mobile layout.
With that in mind, $ismobile always returns true or false, ending in mobile.css or main.css, depending on return value.
As you will ALWAYS catch one of the 2 (true or false), you will always have a value for the included stylesheet.
The end result is that you have 2 stylesheets, rendering the need to have 2 divs, which duplicated the code at html level, since #slider can be defined with 2 separate sets of attributes in each, which means #slide2 isn't needed.
Related
I want to set color for specific string in ZendFrame work, is it the best way?
View:
.not-found{color : red;}
<?php
echo '<div class="not-found">';
echo $this->not_found;
echo '</div>';
?>
Controller:
$this->view->not_found='no result';
Yes this is correct just wrap your css code within css html markup
If you want your css to work it needs to be in a css file linked to the view or in a style like :
<style>
.not-found{color : red;}
</style>
I need to change the CSS on a webpage based on a query string in the URL... but I'm new to PHP and havn't been able to find sufficient examples on how to do it.
Basically when a user clicks on a menu link, and is then sent to an "aboutUs.php" page, I need the CSS on the aboutUs.php page to change based on the string query.
If I understand what you want correctly:
if (isset($_GET['query'])){
$query = $_GET['query'];
}else{
$query = NULL;
}
Then something like this:
if ($query == 'x'){
echo "
<style>
Whatever style you need...
</style>
";
}elseif ($query == 'y'){
echo "
<style>
Whatever other style you need...
</style>
";
}else{
echo "
<style>
Whatever default style you need...
</style>
";
}
Of course you can echo stylesheet link instead of style tags, but the logic is the same.
You can change your style.css to style.php which you can load in the page as a style sheet.
You need to include a header type in your php file:
<?php
header("Content-type: text/css");
?>
and then generate the content dynamically.
In hope I didn't missunderstand the question. This can help you change the content of the css file.
If you have multiple css files and you want to import one of them depending on the parameters to aboutus.php, that's a different story.
In the head of your program (where you would include the css stylesheets) do a simple if else:
if (isset($REQUEST['query_string'])) {?>
stylesheet link
<?php } else { ?>
stylesheet link 2
<?php } ?>
You can save the selected CSS into a cookie:
if (isset($_GET['setstyle'])) {
setcookie('style', $_GET['setstyle'], time()+60*60*24*30, '/');
}
The Style can then be read like this: $_COOKIE['style'].
http://example.com/?setstyle=black -> Style is set to „black“
not very pretty solution but for example something like this would work
<? php
if($str=="main"){
echo '<link rel="stylesheet" type="text/css" media="all" href="/css/main.css" />'
}
else if($str=="other"){
echo '<link rel="stylesheet" type="text/css" media="all" href="/css/other.css" />'
}
?>
be careful with doing something like:
<link rel="stylesheet" type="text/css" media="all" href="/css/$str.css" />
it is not very secure way, unless you do for example an array with possible values, something like
$possibleCss = array("main", "other");
if(in_array($str, $possibleCss){
<link rel="stylesheet" type="text/css" media="all" href="/css/$str.css" />
}
You need to create a php file with header text/css, this file you can call with get parameters.
example:
$style = $_GET["style"];
header("Content-type: text/css");
if($style=="blue")
echo ".class{background-color:blue;}";
else
echo ".class{background-color:white;}";
Call the css with get parameters
<link rel="stylesheet" type="text/css" href="style_file.php?style=blue" />
Knowing the purpose of your question, from here, I would put all of your common css in on stylesheet, and simply call out specific display properties for the elements you care about. Make all of your elements display: none in your main stylesheet.
<link type="text/css" rel="stylesheet" href="mainStyleSheet.css" />
<style type="text/css">
<?php
if (isset($_GET['section'])){
// Sanitize
$section = preg_replace('/[^a-zA-Z]/', $_GET['section']);
echo '#' . $section . ' { display: block; }';
}
?>
</style>
In this case, section is a parameter, set to ourMisson, ourHistory, etc., called like this:
http://beta.***.com/aboutUs.php?section=ourMission
I have a standard html page so:
<html>
<head>..
.
..
and so on
and i have a php script linked to that html page with:
if blablabla {
change background color;
}
does anyone know how to change the background color of my page if the conditions in the if statement are met?
I hope i made this clear, if not, please say which bit is unclear.
Thanks for any help in advance
put your <body> tag inside the if else
if blablabla {
echo '<body style="background-color:white">';
}
else {
echo '<body style="background-color:orange">';
}
It's not necessarily great practice, but it should get the job done:
if ( your_conditional ) {
$styleBlock = sprintf('
<style type="text/css">
body {
background-color:%s
}
</style>
', $yourColor);
echo $styleBlock;
}
One good (?) thing about this is that with this technique, you can put your if statement anywhere - it'll act on the body tag regardless of where you put it.
One caution: if you have additional style rules for the body tag's background color farther down your page, those will take precedence over the one from your if statement.
here is code that i whant to change background of body
<body bgcolor="<?php echo $name2; ?>">
I am using the following code
<div id="content"> <?php
$homepage = file_get_contents("www.yahoo.com");
echo $homepage;
?></div>
The page appears fine but its without the style sheet. How do i call those style sheets ?
and the link which appears are not Valid (it appears through my domain )
How do i fix it ?
The code that i was using for iFrame which is not working is below
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var iframe = document.getElementById("frm");
selection = getIframeSelectionText(iframe);
alert(selection);
if(selection.length >= 3)
{ el = $('body', $('iframe').contents());
el.html(el.html().replace(selection, "<span class='highlight'>" + selection + "</span>"));
}
});
});
function getIframeSelectionText(iframe) {
var win = iframe.contentWindow;
var doc = win.document;
if (win.getSelection) {
return win.getSelection().toString();
} else if (doc.selection && doc.selection.createRange) {
return doc.selection.createRange().text;
}
}
</script>
If stylesheet URLs in the page are absolute, everything should display correctly. Otherwise you will have to modify their URLs in the page code (either str_replace or regular expressions).
Also, you can expect at least some styles of the page to break, since you are embedding the whole HTML in an "alien" HTML structure. Generally, HTML tag should always be the out-most tag in the page.
I doubt you will come up with solution which works flawlessly for all websites. Why don't you use IFRAME instead?
This isn't a perfect approach, but you could make use of the <base> tag to change relative URLs so that they match against the domain you're fetching from; that should instruct the browser to load relative URLs.
<div id="content">
<base href="http://www.scraped-domain.com/" />`
<?php
$homepage = file_get_contents("http://www.scraped-domain.com/");
echo $homepage;
?></div>
<base href="http://your-domain.com" /> <!--reset after outputting the contents, so that your page resumes treating your relative URLs to your domain. -->
(Untested.)
I would like to add a feature onto my site that would allow a user to choose between multiple styles. I have seen this feature on other sites. How would I go about doing this or could somebody refer me to a tutorial or guide on how this can be done?
To start you off, you could simply make the stylesheet link(s) dynamic:
<link rel="stylesheet" href="<?=$style?>" type="text/css"/>
And provide links that change them:
Racecar
On the server, assign $style according to the query string, it would also be a good idea to default to something in case the user decides to modify the URL:
<?php
$stylesArr = array('racecar', 'magenta', 'cartman');
if(isset($_GET['theme']) && in_array($_GET['theme'], $stylesArr)) {
$style = $_GET['theme'] . '.css';
setcookie("theme", $style, time()+(3600*24*30));//expires in one month
} else {
if(isset($_COOKIE['theme']) && in_array($_COOKIE['theme'], $stylesArr)) {
$style = $_COOKIE['theme'] . '.css';
} else {
$style = 'default.css';
}
}
?>
<link rel="stylesheet" href="<?=$style?>" type="text/css"/>
You can propogate the user's style via the query string, cookies or sessions.
You can store information about style in cookies, or in database if users are regitered. And then depending on value add required css file on page with php.
Depending on how your pages are rendered it might be best to store the theme in a cookie once a theme has been selected otherwise you need to append ?theme=racecar to every link on your page.
if(isset($_GET['theme']))
{
setcookie('theme', $_GET['theme']);
$style = $_GET['theme'];
}
else if(isset($_COOKIE['theme']))
{
$style = $_COOKIE['theme'];
}
else
{
$style = 'default';
}
<link href="/styles/<?php echo $style; ?>.css" rel="stylesheet">
I've also seen it done with javascript.
Same basic idea as a few other answers: you write the chosen style to a cookie, and then read that when the page loads to determine which stylesheet to load.
With javascript, you have the added benefit of being able to switch styles without reloading the page, and if you set up your css nicely, you can switch something like the body's id or class and have a new style without having to download a new stylesheet, so the style-switch happens almost instantly.
Very sweet effect, good luck with the implementation.