I have a map on a page where I have an image that I can move from X to Y as a still png image.
I would like to change this to having the still image become an animated image and then return to a still image.
This is what I have now in my CSS file and in my PHP file. How can I change the CSS or PHP file so that I don't see all the images? I want to create a 'walking' motion (maybe by showing one image after the other? then hiding the prior shown image?)
div.animate-stills
{
width: 13px;
height: 30px;
position: absolute;
-webkit-animation: mymove 5s 1;
animation: mymove 5s 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
<head>
<link rel="stylesheet" href="vault/style_animate.css">
<?php /* my php here */ ?>
<style>
/* ANY DIRECTION */
#-webkit-keyframes mymove
{
from {top: <?php echo "$playerlocation_y"; ?>px; left: <?php echo "$playerlocation_x"; ?>px;}
to {top: <?php echo "$move_y"; ?>px; left: <?php echo "$move_x"; ?>px;}
}
#keyframes mymove
{
from{top: <?php echo "$playerlocation_y"; ?>px; left: <?php echo "$playerlocation_x"; ?>px;}
to{top: <?php echo "$move_y"; ?>px; left: <?php echo "$move_x"; ?>px;}
}
</style>
</head>
<body>
<?php /* my php here */
echo '<div class="animate-stills" syle="position: absolute; top: ' . $playerlocation_y . 'px; left: ' . $playerlocation_x . 'px; background-image: url(' . $img_1 . '),url(' . $img_2 . '),url(' . $img_3 . '),url(' . $img_4 . '),url(' . $img_5 . '),url(' . $img_6 . '),url(' . $img_7 . '),url(' . $img_8 . '); background-size: contain; background-position: center center; width: 13px; height: 30px;"></div>';
?>
</body>
I have simplified the php so you can make some sense of it. all the $variables are declared and or taken from the database.
HTML outputs the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SKULLS AND BONES</title>
<link rel="stylesheet" href="vault/style.css">
<link rel="stylesheet" href="vault/style_animate.css">
<link rel="stylesheet" href="vault/style_hex50.css">
<link rel="icon" href="favicon.ico" />
<!-- <script src="script.js"></script> -->
<style>
/* ANY DIRECTION */
/* Chrome,Safari,Opera */
#-webkit-keyframes mymove
{
from {top: 86px; left: 232px;}
to {top: 86px; left: 284px;}
}
/* Default syntax */
#keyframes mymove
{
from {top: 86px; left: 232px;}
to {top: 86px; left: 284px;}
}
</style>
</head>
<body>
<div class="animate-stills" style="position: absolute; top: 86px; left: 232px; background-image: url(vault/images/alpha/player_male_1.png), url(vault/images/alpha/test_male02.png), url(vault/images/alpha/test_male03.png), url(vault/images/alpha/test_male04.png), url(vault/images/alpha/test_male05.png), url(vault/images/alpha/test_male06.png), url(vault/images/alpha/test_male07.png), url(vault/images/alpha/test_male08.png); background-size: contain; background-position: center center; width: 32px; height: 32px;"></div>
</body>
</html>
I have shortened the output for better reading.
After a long time of fiddling arround and searching google more on the subject I found some solution. I had to make a few changes. Here is the CSS file.
div.animate-movement
{
background: url(images/alpha/MaleWalkingSheet128x30.png);
width: 16px;
height: 30px;
transform: translate3d(0,0,0);
-webkit-animation: mymove 2.1s steps(8) 3;
animation: mymove 2.1s steps(8) 3;
}
And here is some of the output from the php in the html file. I have placed this in the php file because the values are always changing.
/* ANY DIRECTION */
/* Chrome,Safari,Opera */
#-webkit-keyframes mymove
{
from {top: 209px; left: 206px;}
to {top: 250px; left: 232px;}
from {background-position: 0px; }
to {background-position: -128px; }
}
/* Default syntax */
#keyframes mymove
{
from {top: 209px; left: 206px;}
to {top: 250px; left: 232px;}
from {background-position: 0px; }
to {background-position: -128px; }
}
<div class="animate-movement"></div>
The only problem I now seem to have with this is that it sometimes looks like the image is 'warping' backward to where it was before ending the animation. I searched google for this and therefore I added: transform: translate3d(0,0,0); to the css file. apparantly that turns the animation over to the GPU?
The animation sometimes 'warps' any way to fix this?
Related
I am trying to make a webpage which displays rectangles of different sizes in a grid.
The code below works to display 3 rectangles all height: 50px and width equal to $rectangleWidth = "200px".
<html>
<head>
<style>
<?php
$rectangleWidth = "200px";
?>
.grid-container {
margin: auto 1fr;
max-width: 8000px;
display: grid;
grid-template-columns: 400px
}
.grid-container div {
border: 1px dashed gray;
text-align: center;
padding: 12px;
}
.pre { display: inline; }
<?php echo ".rectangleRed {
height: 50px;
width: " . $rectangleWidth . ";
background-color: #ff1a1a;
float: left;
margin-right: 0px;
}";
?>
</style>
</head>
<body>
<div class="grid-container">
<?php
for ($x = 0; $x < 3; $x++) {
echo '<div><pre class="rectangleRed"></pre></div>';
}
?>
</div>
</body>
</html>
I have an array with three different widths $rectangleWidths = ["100px", "200px", "300px"]. I am struggling to make the rectangles change size according to the widths.
I tried to put the CSS code for .rectangleRed { } into a php block with the width as a variable so that the width of the rectangle is redefined each increment of the loop. This didn't work. The CSS code was displayed on screen instead of redefining the width of the rectangle. Here is the code from my attempt:
<html>
<head>
<style>
<?php
$rectangleWidths = ["100px", "200px", "300px"];
?>
.grid-container {
margin: auto 1fr;
max-width: 8000px;
display: grid;
grid-template-columns: 400px
}
.grid-container div {
border: 1px dashed gray;
text-align: center;
padding: 12px;
}
.pre { display: inline; }
</style>
</head>
<?php
for ($x = 0; $x < 3; $x++) {
$rectangleWidth = $rectangleWidths[$x];
echo "<style><head>.rectangleRed {
height: 50px;
width: \"" . $rectangleWidth . "\";
background-color: #ff1a1a;
float: left;
margin-right: 0px;
}</style></head>";
echo '<body><div class="grid-container"><div><pre class="rectangleRed"></pre></div></div></body>';
}
?>
</html>
My only guess for why this doesn't work is that maybe I incorrectly used the , , and tags. I'm not sure how I could do this differently to make it work.
I looked at similar questions including Apply CSS Styling to PHP output and How to add CSS styles to a PHP code within a loop?. The solutions for those questions did not resolve my issue.
i need to loop the code so i tried to print it from php
i can't get it to work
<html>
<head>
<style>
.percentbar { background:#CCCCCC; border:1px solid #666666; height:10px;
}
.percentbar div { background: #28B8C0; height: 10px; }
</style>
</head>
<body>
<?php
$scale=1.0
$procentused[0]=3;
$scale100=$scale*100;
$cpu1g=round($procentused[0]*$scale);
echo '<div class="percentbar" style="position:relarive; width:10px;
height:'.$scale100.'px;">';
echo '<div style="width:10px; position: absolute; bottom: 0;
height:'.$cpu1g.'px;"></div></div>';
?></body></html>
I expect the output to be the vertical "usage bar"
From this code i get only background of the bar
It's modified code to be vertical from
https://joshuawinn.com/quick-and-simple-css-percentage-bar-using-php/
I don't have reputation to post img unfortunatly
Edit 1: repaired syntax errors from lukasz's answer , still not working
Edit 2: added more details of result
You have some syntax errors in your code:
echo '<div style="width:10px; position: absolute; bottom: 0;
height:'.$cpu1g.'px;"</div</div>';
should be:
echo '<div style="width:10px; position: absolute; bottom: 0;
height:'.$cpu1g.'px;"></div></div>';
Found the problem
position:relarive
should be
position:relative
I think this is a more css + php elegant solution for the vertical bar using flexbox. The color area will automatically scale to the .percentbar element. There is no need to calculate the number of pixel of the .used element.
<?php
// an array of percentage inputs
$percentUsedArray = [30, 20, 50, 80, 12, 19, 5, 3, 1, 0, 70, 80, 45, 56];
?>
<html>
<head>
<style>
.percentbar-container {
display: flex;
height: 100px;
align-items: stretch;
}
.percentbar {
background: #CCCCCC;
border: 1px solid #666666;
display: flex;
flex-direction: column-reverse;
align-items: stretch;
width: 10px;
}
.percentbar .used {
height: 0;
background: #28B8C0;
}
.percentbar .unused {
flex: 1;
background: transparent;
}
</style>
</head>
<body>
<div class="percentbar-container">
<?php foreach ($percentUsedArray as $percentUsed): ?>
<div class="percentbar" title="<?php echo $percentUsed; ?>%">
<div class="used" style="height: <?php echo $percentUsed; ?>%;"></div>
<div class="unused"></div>
</div>
<?php endforeach; ?>
</div>
</body>
</html>
I want to find a way to make hexagons be a good looking container for text at all window widths. At this point it only looks alright at a few window widths. I'd like to make it so that I can have code that will only show at the good width then hide itself when the screen width changes to a new range so that a new piece of code that does look good can take its place. How am I to do this?
My php code:
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css"href="css/styleshexagon.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<?php
//for Medium screen width
print"<div class = \" d-none d-md-block d-lg-none\"\>\n";
$numHexes=3;
for($i = 0;$i<$numHexes;$i++)
{
print"<div class=\"hexagon \">\n";
print" <span class=\"text\">XYZ</span>\n";
print" </div>\n";
}
for($i = 0;$i<$numHexes;$i++)
{
print"<div class=\"hexagon \" style = \"
margin-left:auto ;
margin-bottom: auto;
\">\n";
print" <span class=\"text\">XYZ</span>\n";
print"</div>\n";
}
print"</div>\n";
//for Small screen width
/*Code for that goes here*/
?>
</body>
</html>
My SASS code:
$hex-size: 300px;
$hex-height: $hex-size / sqrt(3);
$hex-color: #C6538C;
.hexagon {
position: relative;
display:inline-block;
width: $hex-size;
height: $hex-height;
background-color: $hex-color;
margin: $hex-height/2;
margin-left:auto;
margin-bottom:auto;
left:-10px;
}
.hexagon .text {
position: absolute;
top: -80px;
left: 0;
font: 12px sans-serif;
color: #ff00ff;
width: $hex-size;
height: $hex-height;
text-align: center;
overflow: hidden;
line-height: $hex-height;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: $hex-size/2 solid transparent;
border-right: $hex-size/2 solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: $hex-height/2 solid $hex-color;
}
.hexagon:after {
top: 100%;
left: 0;
width: 0;
border-top: $hex-height/2 solid $hex-color;
}
It seems your asking for a few different things here. Displaying only certain elements at certain screen sizes, and formatting elements so they are suitable for most if not all screen sizes.
#media (max-width: 700px) {
.mydiv {
width: 100%; /* adds full width to mydiv which is best for mobiles */
display: block; /* displays mydiv as a block */
}
.mydiv-2 {
display: none; /* Doesn’t display mydiv-2 at screen sizes upto 700px */
}
}
Note that you can use both max-width and min-width
Hope this helps!
One possible solution is to use the #media CSS rule Which can apply different styling based on different display media. In your case, to customize based on screen size you could use the min-width and max-width properties.
This example would hide someElement if the screen was smaller than 200 pixels wide.
#media min-width: 200px {
someElement {
display: none
}
}
I am writing a website for my Uncle's business. I just started today.
**Update: I have fixed the website as I got an answer.
But to all who want to know, what I was dealing with,
I put a code snippet below. Win-Win for all.**
I am stuck at one thing.
First have a look here : MyWebsiteIsHere
Have a look at my code, its pretty primitive:
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<?php include 'php/start.php'; ?>
<?php include 'php/start2.php'; ?>
<?php include 'php/start3.php'; ?>
</body>
</html>
php/start.php
<?php
echo '<head><title>Super Express Logistics</title></head>';
echo "<header style=\"background-color:pink\">
<p class=\"centered\">Hello</p></header>";
?>
php/start2.php
<?php
echo "<header style=\"background-color:brown\"><p class=\"centered\">Ola!
</p></header>";
?>
php/start3.php
<?php
echo "<header style=\"background-color:lightblue\">
<p class=\"centered\">こんにちわ ！</p></header>";
?>
css/stylesheet.css
header{
width: 100%;
height: 100vh;
background-color: #000000;
color: white;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The Question
As you see in my website (kinda), when you scroll, there is some weird text overlapping in the middle. All the three texts are enclosed in <p> SomeTextHere </p>
I put position:fixed in the css only to put the text in the perfect center, but because of that, ALL of those texts jump to the center
Can I like, fix the position for each text in the center of their parent and when I scroll, it scrolls with the parent ?
header{
width: 100vw;
height: 100vh;
color:white;
}
.centered{
position:fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
<html>
<body>
<header style="background-color:pink"><p class="centered"> Hi !</p></header>
<header style="background-color:brown;"><p class="centered"> Ola !</p></header>
<header style="background-color:teal"><p class="centered"> こんにちわ !</p></header>
</body>
</html>
You can update the CSS in the below way:
header{
position: relative;
width: 100vw;
height: 100vh;
color:white;
}
.centered{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
I am trying to make a log-in/register website, and it is all going well, but then when I came to do the nav bar.
EDIT: That works, but the nav bar buttons defined in the PHP code are not clickable.
index.php code
<html>
<head>
<LINK href="css/style.css" rel="stylesheet" type="text/css">
</head>
<header>
</header>
<body>
<nav id="menu">
<ul id="menu">
<li onclick="document.getElementById('content_box').src='pages/home.html'">Home</li>
<li onclick="document.getElementById('content_box').src='pages/videos.html'">Videos</li>
<li onclick="document.getElementById('content_box').src='pages/news.html'">News</li>
<?php
session_start();
if(isset($_SESSION['username']))
{
echo "<li onclick=" . "document.getElementById(" . "content_box" . ").src=" . "pages/accounts/php/user.php" . ">Account</li>";
}
else
{
echo "<li onclick=" . "document.getElementById(" . "content_box" . ").src=" . "pages/accounts/login.html". ">Log In</li>";
}
?>
</ul>
</nav>
<iframe id="content_box" src="pages/home.html" style="border: none;"></iframe>
</body>
</html>
Stylesheet
#blue_dl_button {
width: 200;
height: 50;
background-color: 00cffc;
color: ffffff;
font-family: Tahoma;
font-size: 14;
border-color: 00cffc;
border-radius: 0;
padding: 0;
margin 0;
float:left;
}
#green_dl_button {
width: 200;
height: 50;
background-color: 33CC00;
color: ffffff;
font-family: Tahoma;
font-size: 14;
border-color: 33CC00;
border-radius: 0;
padding: 0;
margin 0;
float: left;
}
#red_dl_button {
width: 200;
height: 50;
background-color: CC3300;
color: ffffff;
font-family: Tahoma;
font-feature-settings:
font-size: 14;
border-color: CC3300;
border-radius: 0;
padding: 0;
margin 0;
float:left
}
#header_image{
max-width: 100%;
width: auto;
height: auto;
}
header{
background-image: url("/header.png");
width: 100%;
padding: 169px 0px;
color: white;
display: block;
margin-left: auto;
margin-right: auto;
background-repeat: no-repeat;
background-position: center;
}
#content_box{
max-width: 100%;
width: 99.85%;
height: 100%;
}
ul#menu{
background-color: #00C1A7;
overflow: hidden;
font-family: Tahoma;
color: white;
padding: 0;
text-align: center;
margin: 0;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
ul#menu li{
display: inline-block;
padding: 20px;
}
ul#menu li:hover{
background: #00FFE1;
}
#news_title{
font-family: Tahoma;
font-size: 28;
}
#text{
font-family: Tahoma;
font-size: 18;
}
It ends up looking like https://puu.sh/9uVEy/5b39cb95e6.png
I am stumped as I have looked all over for a solution and could not find one!
Updated code with echo (PHP Bit only)
<?php
session_start();
if($_SESSION['username'])
{
echo "<li onclick='document.getElementById('content_box').src='pages/accounts/php/user.php''>Account</li>";
}
else
{
echo "<li onclick='document.getElementById('content_box').src='pages/accounts/login.html''>Log In</li>";
}
?>
Your li item is in the php tag. You need to either echo it out, or push it out of the php coding. I would do it outside of it, since you use single as well double quotes within it.
Try
<?php
session_start();
if($_SESSION['username'])
{
?>
<li onclick="document.getElementById('content_box').src='pages/accounts/php/user.php'">Account</li>
<?php
} else {
?>
<li onclick="document.getElementById('content_box').src='pages/accounts/login.html'">Log In</li>
<?php
}
?>
Also, it's $_SESSION not _$SESSION. I fixed that too.
Last but not least. Your file extention. You use the index.html file as readout. HTML files cant read the php code and won't accept your script within the <?php ?> tags. They will read over it, but won't execute it, because HTML won't do server side scriptwork. So in your case, simply change index.html to index.php and it should work fine.