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-->
}
Related
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 this slideToggle code. When I click the button that says "open", it changes the text to "close" but the problem It stays as "close" even if you click it again so I want to change the text back to "open" when I click on "close"
this code was working perfectly but now its not working with no reason.
<script>
$(document).ready(function () {
$("#open").click(function () {
$("#close").slideToggle("slow");
var t=$("#open").html()==="close"?"open:close";
$("#open").html(t);
reset ();
});
});
</script>
<div id="open" align="center"><p>open</p></div>
<div id="close"> <p>dddddddddddd</p></div>
<style type="text/css">
#open {
background:blue;
height:25px;
color:white;
}
#close {
background:green;
height:300px;
color:white;
display:none;
}
</style>
Use this instead:
$("#open").click(function(){
$("#close").slideToggle("slow");
$("#open").text($(this).text()=="open" ? "close" : "open");
});
try using .text() instead of .html()
also a better approach may be to toggle a class name on the container, and base your function on that, rather than on the inner text.
your updated jquery click handler would look something like this:
$('#toggler').click(function(){
$(this).next('.textBit').slideToggle().toggleClass('open');
if($(this).next('.open').length){
$(this).text('closed');
}
else{
$(this).text('open');
}
});
heres a quick slideToggle demo that you can feel free to edit
and this is a version using a ternary operator
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>
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
I am trying to load WalkScore Map into one of div's on the page. For some reason my code works only if I alert() something right after $.get() method. Have no idea why.
Can someone suggest something? Thanks.
<html>
<head>
<title>jQuery - Ajax dynamic content loading</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function loadWalkScore()
{
$.get("http://www.walkscore.com/tile/show-tile.php?wsid=567f19156a706dddb8a799630d85467e",null,null,"script");
alert("hello");
}
</script>
<div id="contentArea" style="margin: 20px 0px 10px 10px; border: 1px solid #CCC;">
<script type="text/javascript">
var ws_lat = "40.710318";
var ws_lon = "-74.016553";
var ws_width = "630";
loadWalkScore();
</script>
</div>
Try using something like this, to make the call when the DOM is ready.
<script type="text/javascript">
$(function()
{
$.get("http://www.walkscore.com/tile/show-tile.php?wsid=567f19156a706dddb8a799630d85467e",null,null,"script");
});
</script>
Put this block after your first <script> element.
For me is working. I had to change the wsid for my domain. I've checked the get request using Firebug and I get a javascript as a response. At the begining I was getting an error because I was using you wsid and it seems that for each calling sides they generate a new one. Try to see if your wsid is the correct one.