I am trying to echo a CSS style in php. basically I want to make a Div visible.
the Div's visibility is set to hidden in the css stylesheet and i need to make it visible in an else statement in php.
I am using this code:
<?php
} else {
echo '<style type="text/css">
#apDiv1 {
visibility:visible;
}
</style>';
}
?>
but that doesn't work! it doesn't make the Div visible. I tried it this way as a test and this way worked and it echo-ed hello world:
<?php
} else {
echo 'hello world';
}
?>
so is there any other way to do this? am I doing anything wrong?
You can also try like
<?php
} else {
?>
<style type="text/css">
#apDiv1 {
visibility:visible;
}
</style>
<?php
}
?>
Or directly give the div style like
<?php
} else {
?>
<div id="appDiv1" style="visibility:visible"></div>
<?php }
?>
Even you can put !important if any other styles are applied on that div.
try visibility: visible !important;, or display: block.
You can use javascript instead of css
<script>
document.getElementById('apDiv1').style.visibility = 'visible';
</script>
Do directly on the div:
<div id="apDiv1" <?php if(/* Your condition */){ /* Do something */ }else{ echo 'style="visibility:visible;"';} ?>></div>
Related
Is there a way to change the style of something from display none to display block after a form has been submitted? I'm checking if the form has been submitted:
if(isset($_POST['submit'])){
I'm guessing it goes somewhere after here..?
I've tried this but no joy...
echo '<style type="text/css">
.login {
display: block;
} </style>';
thanks
You should probably define a style for hidden, and then add/remove that class from the parent element.
So in css:
<style type="text/css">
hidden{
display:none;
}
</style>
Then in your code something like:
$submitted = isset($_POST['submit']);
And when you render your form:
<div class="<?=($submitted)?'':'hidden'; ?>">
<form...
</div>
Alternatively, just don't render the form at all:
<?if(!$submitted){?>
<form...
<?}?>
I would tell you to add on your <form> an onsubmit:
<form onsubmit="DisplayLogin()">
And elsewhere some JS
<script>
function DisplayLogin(){
$('.login').css('display','block'); //using jquery
}
</script>
I think the piece of jQuery below should work for you, but it's very difficult because you didn't include a lot of code. Replace button with the button's id or class.
$('.button').click(function() {
$('.login').css('display', 'block');
});
JSFIDDLE
You can do something like this:
if(isset($_POST['submit'])){
<!--here you close the php tag-->
<style type="text/css">
.login {
display: block;
}
</style>
<!--here you open the php tag-->
}
i have a code:
<body <?php if( in_category( 11446 ) ) { echo "style=\"background-image: url('my-background-url-of-image');background-repeat:repeat;\" onclick=\"window.open('http://www.domain.com');\""; } ?> >
This code works only until page loads fully than something happens and it doesn't work i assume from inspect element that onclick function changes and i'm failing to find what part tricks that.
What this code does is it sets unique body background that are in specific category and background is clickable.
But because of some javascript error it doesn't work when page loads full so maybe somebody could explain me how to remove attr on Javascript and than add my with domain i want. Or maybe give example how to do alternative code just with href.
Thank you.
I'm assuming you are building a Wordpress template and the background image to be used is based upon the category of a Wordpress post.
This uses no Javascript. Instead, what it does is create the CSS declaration block inside the head tag of the HTML5 document on the fly. It does no inline CSS for the body tag.
<?php
// ====================================================
// Solution #1
// Background Image Only
// ====================================================
function GetThisWordpressPostCategory() {
// Do post category to filename mapping here
return("cars");
}
function in_category() {
// Just a dummy to simulate Wordpress in_category call
return(true);
}
function BodyBackground($category) {
$bodyCss = "";
if (in_category($category)) {
$bodyCss =<<<CSS
<style type="text/css">
body {
background-image: url('{$category}.jpg');
}
</style>
CSS;
}
return($bodyCss);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Category background</title>
<?php
$category = GetThisWordpressPostCategory();
echo BodyBackground($category);
?>
</head>
<body>
</body>
</html>
<?php
// ====================================================
// Solution: 2
// Clickable div spanning viewport
// ====================================================
function GetThisWordpressPostCategory() {
// Do post category to filename mapping here
return("cars");
}
function in_category() {
// Just a dummy to simulate Wordpress in_category call
return(true);
}
function PageCss($category) {
$pageCss = "";
if (in_category($category)) {
$pageCss =<<<CSS
<style type="text/css">
html, body, #page {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-image: url('{$category}.jpg');
}
#page-anchor {
display: block;
width: 100%;
height: 100%;
}
</style>
CSS;
}
return($pageCss);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Category background</title>
<?php echo PageCss(GetThisWordpressPostCategory()); ?>
</head>
<body>
<div id="page">
<a id="page-anchor" href="http://www.google.com"></a>
</div>
</body>
</html>
I have the following shortcodes in a page or post:
[custom_width width='500' color='red']
[custom_width width='600' color='blue']
The shortcode function is to display 2 buttons with their respective width. The problem is that the buttons are displayed the same width using the last width of 600.
The function:
<?php
function xyz ($attr) {
$xyzwidth = $attr['width'];
$xyzcolor = $attr['color'];
my_style($xyzcolor);
?>
<style type="text/css">
.mystyle {
width: <?php echo $xyzwidth; ?>px;
}
</style>
<div class="mystyle">
My Text
</div>
<?php } ?>
note: the rest of the css is in its own .css file
function my_style($xyzcolor) {
switch ($xyzcolor) {
case 'red': my_red();
break;
case 'blue': my_blue();
break;
}
<?php function my_red() { ?>
<style type="text/css">
.mystyle {
............
}
.mystyle: hover {
............
}
.mystyle a {
............
}
.mystyle a:hover {
............
}
</style>
<?php } ?>
If you're using the same class (mystyle) on both buttons, the last width defined on that class will apply to both elements.
For your purposes, you're probably better off with:
<?php
function xyz ($attr) {
$xyzwidth = $attr['width'];
?>
<div style="width: <?php echo $xyzwidth; ?>px">
My Text
</div>
<?php
}
?>
Define your blue and red CSS in general. Not in your loop every time. Something like this:
<style type="text/css">
// red
.mystyle.red {
............
}
.mystyle.red:hover {
............
}
.mystyle.red a {
............
}
.mystyle.red a:hover {
............
}
// blue
.mystyle.blue {
............
}
.mystyle.blue:hover {
............
}
.mystyle.blue a {
............
}
.mystyle.blue a:hover {
............
}
</style>
And in your xyz function, give your div the desired class, and set the width of div internal:
<?php
function xyz ($attr) {
$xyzwidth = $attr['width'];
$xyzcolor = $attr['color'];
my_style($xyzcolor);
?>
<div class="mystyle <?php echo $xyzcolor; ?>" style="width: <?php echo $xyzwidth; ?>px;">
My Text
</div>
<?php } ?>
I don't know if this is possible but I want to know if I can set the background color of a page depending on an if/else statement?
What I want is that if the if statement is met, then I want the background color of the body to be white, if the else statement is met where it contains a div, then I want the background color of the body to be grey.
Can this be done?
<?php
if (page()){
//all the code in the page
}else{
?>
<div class="boxed">
</div>
<?php
}
?>
UPDATE:
<?php
if (page()){
?>
<body class="bodypage <?php echo page()? "color1":"color2" ?>" >
</body>
<?php
}else{
<div class="boxed">
Continue with Current Assessment
</div>
}
?>
Yes it can be. How about you use a predefined class that have the background color you need:
.color1 {
background-color:red;
}
.color2 {
background-color:yellow;
}
<body class="boxed <?php echo page()? "color1":"color2" ?>" >
</body>
UPDATE:
<body class="bodypage <?php echo page()? "color1":"color2" ?>" >
<?php if (page()){?>
... all the page code
<?php else {?>
<div class="boxed">
Continue with Current Assessment
</div>
?>
A zillion ways to do this.
PHP:
$bodyClass = $condition ? 'foo' : 'bar';
...
echo <<< END_HTML
<body class="$bodyClass">
<!-- stuff here -->
</body>
END_HTML;
CSS:
body.foo { background-color:#fff; }
body.bar { background-color:#888; }
..is one way to do it.
Cheers
Try this
<body <?php if(true) {echo('style="background:red"'); } else { echo('style="background:white"'); } ?> >
</body>
You can do it this way using javascript & jQuery:
<script>
$(document).ready(function(condition){
if (cond) {
$(body).css("background-color","red");
} else {
$(body).css("background-color","blue");
}
});
</script>
Or in php you can just echo that code, with some changes.
Try to minimize the php influence on your design. (CSS for design, html for semantics, php for structure and javascript for interaction)
To accomplish this I recommend sending a hidden input to the browser containing a value:
if(statement) {
$color = '#ffffff';
} else {
$color = '#ff0000';
}
echo '<input id="pageColor" type="hidden" value="'.$color.'" />';
Now do the following with (for example) jquery:
$(document).ready(function() {
//change bg color based on input value
$('body').css('background-color', $('#pageColor').val());
});
Yep, you can do this.
One of the most elegant ways:
PHP part:
<?php
$style = 'background:'; # property
$given = page() ? 'red;' : 'black;'; # Ternary operator
$style .= $given; # Concatenate two strings
?>
HTML part:
<div class="boxed" style='<?php echo $style; ?>'></div>
Also you can create special CSS classes with predefined variety of CSS properties:
PHP part:
<?php
$class = page() ? 'first' : 'second'; # CSS classes defined in your stylesheet.
?>
HTML part:
<div class="boxed <?php echo $class;?>"></div>
And here you go. That's just a quick demonstration, you can replace this with you parameters.
i have a page like:
and i need to print to pdf ( or physical printer directly ) the content of yellow div.
I need to print the div like you see.. with css style too.. how can i do it? i see in other post that they print only text content..
Can someone help me?
You can assign different CSS properies for different device types.
For example:
<style type="text/css">
/* all devices */
#media all
{
#content { display:block;}
}
/* printer specific CSS */
#media print
{
#content { display:none;}
#content div#yellow { display:block;}
}
</style>
To print a page you can use javascript window.print() method:
<form>
<input type="button" value="Print this page" onClick="window.print()">
</form>
Use the following code:
<script type="text/javascript">
function CallPrint(strid) {
var prtContent = document.getElementById(strid);
var WinPrint = window.open('', '', 'letf=0,top=0,width=400,height=400,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
</script>
Print