I have a php element that I would like to center. At the moment I can only have it either to the right or the left of the page.
<style="text-align: left;"><?php PopupContact(); ?></style>
Is there a simple way of getting this element to sit in the center of the page?
Try this:
<div style="width:300px; margin:auto;"><?php PopupContact(); ?></div>
Where 300px is the width of your popup.
Try setting the text-align to center:
<style="text-align:center;"><?php PopupContact();?></style>
Try this..
You can also use the stylesheet properties like
margin-left:25px; margin-bottom:25px; margin-top:25px; margin-right:25px;
You can change the size of the pixels according to your requirement.
Edit your code exactly for the code which you want to center using:
<center></center>
Edit code which is perhaps with
<?php ?>
As the code in header.php you might need to center only the given code which you want to be centered: Thus giving the exact to use of more <?php codes in the code. Just by centering near exact code by this example:
<center><?php
$code = "code1 to be centered";
?></center>
<?php
$code2 = "code2 which is not centered";
?>
<center><?php
$code3 = "code3 again centered";
?></center>
So perhaps you want to just put into the top of the header.php to be centered with this example:
<center><?php
$code1 "code1 to be centered";
?></center>
<?php
how to add (please wait) on time counter javascript
<script language="javascript">
var timeout,interval
var threshold = <?php global $opt_themes; if($opt_themes['timer_active_']) { ?><?php echo $opt_themes['timer_fake_download']; ?>000<?php } else { ?>3000<?php } ?>;
var secondsleft=threshold;
window.onload = function()
{
startschedule();
}
function startChecking()
{
secondsleft-=1000;
document.querySelector(".div").innerHTML = "<span style=\"padding: 10px 30px;font-size: 40px; display:block;text-align:center;\">" + Math.abs((secondsleft/1000))+" </span>";
if(secondsleft == 0)
{
//document.getElementById("clickme").style.display="";
clearInterval(interval);
document.querySelector(".div").style.display="none";
document.querySelector(".div2").style.display="";
}
}
function startschedule()
{
clearInterval(interval);
secondsleft=threshold;
document.querySelector(".div").innerHTML = "<span style=\"padding: 10px 30px;font-size: 40px; display:block;text-align:center;\"> " + Math.abs((secondsleft/1000))+" </span>";
interval = setInterval(function()
{
startChecking();
},1500)
}
function resetTimer()
{
startschedule();
}
</script>
Related
As we all know inline styles are not good practice and they are not compatible with e.g. the Content Security Policy.
This is what I want to achieve without inline styles:
<?php
$spacer_height = 390; // this is a dynamic value from user input could be any integer
?>
<div class="spacer" style="height:<?php echo $spacer_height; ?>"></div>
This is what I want:
HTML:
<?php
$spacer_height = 390; // this is a dynamic value from user input
?>
<div class="spacer spacerheight-<?php echo $spacer_height; ?>" data-height="<?php echo $spacer_height; ?>"></div>
External Stylesheet:
.spacer {
height: spacer_height + "px"; // this line is dummy code
}
Is where a way to achieve this with CSS only. No JavaScript. No Polyfill.
What I have already found is this 5 year old question: CSS values using HTML5 data attribute
However is there a solution meanwhile or is there a CSS solution not using attributes? Is there at least a solution for integers?
Edit: Even a working polyfill may be a welcome answer if there is no other solution.
As you can't do this CSS only (yet, since the attr() function only returns string value), here is a simple script that will do something similar what attr() does, though this parse the data and sets it dynamically using cssText.
Let me know if I got this right
window.addEventListener("load", function() {
var mb = isMobile();
var el = document.querySelectorAll('[data-css]');
for (i = 0; i < el.length; i++) {
var what = el[i].getAttribute('data-css');
if (what) {
what = what.split(',');
el[i].style.cssText = what[0] + ': ' + ((mb) ? what[2] : what[1]) + 'px';
}
}
});
function isMobile() {
//function that check if user is on mobile etc.
return false; // return false for this demo
}
html, body {
margin: 0;
}
div {
background-color: lightgreen;
padding: 10px 0;
height: auto;
box-sizing: border-box;
}
div ~ div {
margin-top: 10px;
}
<div data-css="height,60,30"></div>
<div></div>
<div></div>
<div data-css="height,60,30"></div>
<div></div>
Another option would be to run something server side, where you simply create the CSS rule and class and insert it into CSS file and markup respectively, before sending to the client
You might consider moving the dynamic part from being inline to being referenced in a <style>.
<style>
.spacer {
height:<?php echo $spacer_height; ?>
}
</style>
<?php
$spacer_height = 390; // this is a dynamic value from user input could be any integer
?>
<div class="spacer"></div>
i have a case in which the two values of the following should be changing according to the data in database.
In a external css file i have this.
#wow-container1 {
zoom: 1;
position: relative;
width: 100%;
max-width:960px;
max-height:360px;
margin:0px auto 0px;
z-index:90;
border:2px solid #FFFFFF;
text-align:left;
font-size: 10px;
}
my requirement is i need to change the max-height:max-width: when the height and width stored in database is changed.Is there any possible solution.?
Try this using jQuery .css()
var width = "value from DB";
var height = "value from DB";
$('#wow-container1').css({ 'max-width' : width, 'max-height' : height });
you can get max-height,max-width from db,
Example in php:
<?php
$max_height='300px';//you have to get the value form db
$max_width='300px'; //you have to get the value form db
?>
then write beloved css part after calling your external css file
<style>
#wow-container1 {
max-width:<?php echo $max_width; ?>;
max-height:<?php echo $max_height; ?>;
}
</style>
You can do it in your programming language.
.css() jquery is the best solution for this. If you want to change it using css,
you have to put database value in inline css written in same page. like this :
<style>
#wow-container1 {
max-width:<?php echo $width; ?>;
max-height:<?php echo $height; ?>;
}
</style>
If you want to use jquery .css(), it will be like this :
var width = "width from database";
var height = "height from database";
$('#wow-container1').css({ 'max-width' : width, 'max-height' : height });
When you learn http://VueJS.org you can use 'v-blind' to do that, very simple!
I have a strange blank space in top of one of my divs.
Heres the html:
<!-- ### Bottom content container ### -->
<div class="bottom_content">
<div class="messages"><!-- include problems.php - down devices -->
<?php include "problems.php";?>
</div>
</div>
<!-- ### End bottom content container ### -->
When I examine the output I notice there are two ""after the comment inside the messagesclass. Like this:
<div class="messages"><!-- include problems.php - down devices -->
" "
<?php include "problems.php";?>
</div>
Heres the messages css:
.messages {
display:block;
width: auto;
padding: 10px;
padding-top: -10px; /* Added this to try to remove blank space in top of div */
background: rgb(255, 255, 255); /* The Fallback */
background: rgba(255, 255, 255, 0.5);
-moz-border-radius: 10px;
border-radius: 10px;
border: #ffffff 1px solid;
}
This creates a blank line in top of the div. How can I remove this? I can't find the these two "" anywhere in the code, nor can I find any blank spaces.
EDIT:
Here's the problems.php:
<center><div id="chkerror"></div></center>
This is autofilled with content from a separate php file every 30 seconds using the following jquery:
// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('#chkerror').load('chkIncludes.php');
}, 30000); // the "30000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]>
And heres the content of chkIncludes.php:
<?php include "chkLoc1.php";?>
<?php include "chkLoc2.php";?>
chkLoc1.php and chkLoc2.php contains :
<?php
$host = "10.10.10.1";
$loc = ("Location 1");
$output = array();
exec("ping -n 1 $host 2>&1", $output);
//you can use print_r($output) to view the output result
if (count($output) > 7) {
$output = null;
$status = ("up");
$formattedstatus = ("<font color='green'><b>$status</b></font>");
}
else {
$output = null;
$status = ("down");
$formattedstatus = ("<font color='red'><b>$status</b></font>");
};
echo ("<div class='$status'><a href='#18/58.99940/5.62324' class='locLink' title='Click to show'><b>$loc</b> <i>(IP: $host)</i> is $formattedstatus</a></div>");
?>
Make sure that problems.php file is encoded without BOM (Byte order mark).
If you're using Notepad++, you can achieve that through:
Encoding > Encode in UTF-8 without BOM
I have a question in regards to a progress bar. I've read pretty much all the posts here but it appears I can't make any of them work in my scenario.
I have the following which shows numbers such as 50/500 where 50 is the actual number and 500 is the max.
$SQL = "SELECT * FROM db_ships WHERE ship_id = $user[ship_id] LIMIT 1";
$result = mysql_query($SQL);
while ($db_field = mysql_fetch_assoc($result)) {
print $db_field['shields'] . " / ";
print $db_field['max_shields'] . "";
Most progress bars that I see depict timeframes, I need to visually show the fraction
print $db_field['shields'] . " / ";
print $db_field['max_shields'] . "";
How can I place this so I can have a progress bar depicting the progress?
I am sorry I am not good at css. Any help would be greatly appreciated.
One simple way of doing it is placing a div inside a larger div and setting the percentage width of the inner div. Here's a fiddle showing what I mean.
You can get the percentage of max_shields by writing (Assuming they are both numbers)
$percentage = $db_field['shields'] * ($db_field['max_shields'] / 100);
Apply the percentage as the width of the inner div.
<div id="progress-inner" style="width: <?php echo $percentage; ?>%;"></div>
It would be a breeze to animate that progress bar using jQuery animate if you wanted to.
echo "<div class=\"progressbar_container\"><div class=\"progressbar\" style=\"width: ".($db_field['shields']/$db_field['max_shields']*100)."%\"></div></div>";
And define styles as needed. Maybe a border for the container and a background colour for the main bar. That's all there is to a basic progress bar.
<style type="text/css">
.table, th
{
background-color:Blue;
border-collapse:collapse;
}
<table class="table" >
<tr id = "row1" >
<td id ="cell1" class="td"></td>
</tr>
</table>
<script language="javascript" type="text/javascript" >
var i = 1;
var timerID = 0;
timerID = setTimeout("progress()",200);
var scell = '';
var sbase = '';
sbase = document.getElementById("cell1").innerHTML;
function progress()
{
var tend = "</tr></table>";
var tstrt = "<table><tr>";
scell = scell + "<td style='width:15;height:25' bgcolor=blue>";
document.getElementById("cell1").innerHTML = sbase + tstrt + scell + tend;
if( i < 50)
{
i = i + 1;
timerID = setTimeout("progress()",200);
}
else
{
if(timerID)
{
document.getElementById("cell1")
.innerHTML=document.getElementById("cell1").innerHTML
+ "</tr></table>";
clearTimeout(timerID);
}
}
}
</script>
In my site template I want to place an image code which re-sizes images with a width larger than 910px down to 910px, but leaves those with a width smaller than 910px. If the image is resized it should offer a show original image option.
I would like to implement something like this http://www.mangareader.net/94-8-3/bleach/chapter-1.html
This is the code I have so far:
HTML:
<img src="http://localhost/manga2anime/upload/Bleach/1/03.png" class="resize">
CSS:
.resize {
max-width: 910px;
max-height : auto;
}
Easiest would be if you also stored the img's width in your database. If that's the case, something like this will do:
<?php
// Connect to DB etc.
$result = mysql_query("SELECT 'img_path', 'width' FROM table");
if(mysql_row_count($result) != 0){
while($row = mysql_fetch_array($result)){
$img = "<img src='" . $row['img_path'] . "'";
if($row['width'] > 910){
$img .= " class='resize'";
// OR
// $img .= " width='910'";
echo "<a onclick='showOriginal()'>Show Original</a>";
}
$img .= " >";
echo $img;
}
}else{
echo "No images found.";
}
?>
If the img is already loaded and your php isn't that handy, you can also adjust it with jQuery:
function adjustImage(){
if($('img#needed_img').width() > 910){
$(this).addClass('resize');
// OR
// $(this).attr('width', '910');
$('#show_original_button').show();
}
}
And just call the above function when the document loads (so not in combination with the jQuery ready function). I dont know what your HTML looks like, so its hard to also come up with a working 'show original' function.. but i think something like a lightbox or modal would be most useful in your case to show the original img, for it wont alter your template and just 'sit on top of it'.