I'm trying to create a font preview but I can't get the font to change. When I run the code shown below, the output is
my Text - Arial.ttf - 1
my Text - Batman.ttf - 1
my Text - Verdana.ttf - 1
So the font is being found. It just isn't working. If I replace the key/data with an actual name, like Batman and Batman.ttf, it works, though every line is in that font. Any ideas on why this is not working?
<div>
<?php
$fontlist['Arial'] = 'Arial.ttf';
$fontlist['Batman'] = 'Batman.ttf';
$fontlist['Verdana'] = 'Verdana.ttf';
$preview = 'my Text';
foreach ($fontlist as $key => $data) { ?>
<style>
#font-face {font-family:<?php echo $key; ?>; src: url(fonts/<?php echo $data; ?>); }
.headerText {font-family:<?php echo $key; ?>; font-weight:bold; font-style:none; font-size:40px; padding:10px 0; text-align:center;
width:100%; color:rgb(204,204,204); overflow-x:auto; overflow-y:hidden; white-space:nowrap; height:auto
}
</style>
<?php
echo '<span class="headerText">' . $preview . ' - '.$data.' - ' . file_exists('fonts/'. $data) . '</span><br>';
} ?>
</div>
Try this one..
<div>
<?php
$fontlist['Arial'] = 'Arial.ttf';
$fontlist['Batman'] = 'Batman.ttf';
$fontlist['Verdana'] = 'Verdana.ttf';
$preview = 'my Text';
foreach ($fontlist as $key => $data) { ?>
<style>
#font-face {font-family:<?php echo $key; ?>; src: url(fonts/<?php echo $data; ?>); }
.headerText { font-weight:bold; font-style:none; font-size:40px; padding:10px 0; text-align:center;
width:100%; color:rgb(204,204,204); overflow-x:auto; overflow-y:hidden; white-space:nowrap; height:auto
}
</style>
<?php
echo '<span class="headerText" style="font-family:'.$key.'">' . $preview . ' - '.$data.' - ' . file_exists('fonts/'. $data) . '</span><br>';
} ?>
</div>
Its because in the loop you are adding the font to the same class. And when the page gets loaded, the last font style in the loop gets applied. So instead of that, try adding the font-family as inline style.
Related
A couple of months ago, I asked a similar question like this and the answer that where given worked for me. I now have another change I would like to add to my page. I would like that each post I create has its own unique div. My page currently looks like this:
the previous question helped me break the div each 3 post, so what I tried was within the if statement that creates a new dive each 3 div was to add another if which would break each 1 div so that each post has its own div and it still breaks to a new div section each 3, maybe I just complicated everything with my description, but I want to get something like:
Here is my code
CSS:
.column {
display: inline-flex;
border: 5px black;
border-style: solid;
padding: 10px;
background: #ffa500;
}
PHP:
else {
$break = 0;
$nRows = $connection->prepare("SELECT post_id, post_title,
post_author, post_file, post_time
FROM posts
ORDER BY post_id DESC");
$nRows->execute();
if($nRows->rowCount() > 0) {
while ($row = $nRows->fetch()) {
$post_title = str_replace('_', ' ', $row['post_title']);
$post_author = $ed->encrypt_decrypt('decrypt',$row['post_author']);
$post_file = $row['post_file'];
$post_date = $row['post_time'];
// Create a new div each 3 columns
if ($break % 3 === 0) {
echo '<br><div class="column"><br>';
}
$break++;
?>
<!-- Blog Content BEGIN Display-->
<div class="box"><?php
// Display the content
$file_parts = pathinfo($post_file);
if(isset($file_parts['extension'])) {
switch ($file_parts['extension']) {
case "jpg":
if(!empty($post_file)) { ?>
<img src="post/postFiles/<?php echo $post_file;?>"><?php
}
break;
case "mp4":?>
<div class="thumbnail">
<video preload="auto" loop muted>
<source src="post/postFiles/<?php echo $post_file;?>">
</video>
</div>
<!-- Preview video on hover -->
<script>
$(document).ready(function () {
$(".thumbnail").hover(function () {
$(this).children("video")[0].play();
}, function () {
var el = $(this).children("video")[0];
el.pause();
el.currentTime = 0;
});
});
</script><?php
break;
case "": // Handle file extension for files ending in '.'
case NULL: // Handle no file extension
break;
}
}
// Title URL Variable
$urlFetchPostId = '<h2><a href="post/postFetch/fetchByTitle/fetchByPT.php?post_id=';
$urlFetchPostTitle = '&post_title=';
$urlFetchPostAuthor = '&post_author=';
echo $urlFetchPostId . $row['post_id'] . $urlFetchPostAuthor. $row['post_author']. $urlFetchPostTitle . $row['post_title'] . '"' . 'class="link-post-title" style="font-family: Arial">' . " ". $post_title . '</a></h2>';
// Author/User URL Variable
$urlFetchPostUser = '<a href="post/postFetch/fetchByAuthor/fetchByPA.php?post_author=';
echo $urlFetchPostUser . $row['post_author'] . '"' . 'class="link-post-author" style="font-family: Arial">' . " ". strtoupper($post_author) . '</a>';
// Posted Date
echo '<br><p style="font-family: Arial">Posted on ' . $post_date . '</p>';
?>
</div><?php
if ($break % 3 === 0) {
echo '<br></div><br>';
}?>
<!-- Blog Content END Display --><?php
}
} else { ?>
<p style="color: darkgoldenrod" class="mssgAlign"><u>NO RECORDS</u></p><?php
}
$nRows = null;
}
Any help, tip or improvement suggestion is welcomed
You want to use margins. Margins specify a buffer around the outside of your container. As opposed to padding, which specifies buffer inside the container. Add this to your css
.column {
display: inline-flex;
border: 5px black;
border-style: solid;
padding: 10px;
background: #ffa500;
margin-left: 20px;
margin-right: 20px;
}
I want to generate a list of links to other pages for my website (using a mix of PHP/HTML/CSS) and align them on the right side of the page without them overlapping. I am able to generate the links/pictures, but the problem I am having is they overlap on top of each other when I try to use position absolute.
<style>
body{
background: lightblue;
margin: 25px;
}
.title{
font-size: 20px;
}
.recipe{
width: 60%;
}
.related{
position: absolute;
float: right;
right: 10px;
width: 25%;
list-style-position: inside;
}
.a{
float: right;
right: 5px;
}
.relatedImages{
}img{
width: 15%;
height: 17%;
}
</style>
<title><?php $recipeInfo['title']; ?></title>
<body>
<br>
<?php
//Title and image of recipe
echo '<br><br><div class="title">' .$recipeInfo['title']. '</div><br>
<div class="mainImage"><image src="' . $recipeInfo['image']. '"> </div>
<br><h2> Ingredients </h2>';
//Unfinished (Needs to be styled correctly)
//Generating related links with clickable images
for($r = 0; $r < $relatedLinks[$r]; $r++){
echo '<div class = "related">
<a href = "recipeInfo.php?id='.$relatedLinks[$r]['id']. '">'.$relatedLinks[$r]['title'].'<br>
<image src = "https://spoonacular.com/recipeImages/' . $relatedLinks[$r]['image'] . '"></a>
<br>
</div>';
};
;
//Loop that generates a list of the ingredients used
for($i = 0; $i < $recipeInfo['extendedIngredients'][$i]; $i++){
$amount = $recipeInfo['extendedIngredients'][$i]['amount'];
$unit = $recipeInfo['extendedIngredients'][$i]['unit'];
$ingrName = $recipeInfo['extendedIngredients'][$i]['name'];
echo '<div class = "ingredients">' . $amount , " " , $unit , " " , $ingrName .' </div>';
}
//Instructions with error handling for no instructions found
$instructions = $recipeInfo['instructions'];
if($instructions == ""){
$instructions = "Whoops, there are no available instructions for this recipe.";
}
echo '<br><h2> Insructions </h2>
<div class="recipe">' . $instructions . '</div><br>';
//Unfinished, but will hopefully print a better list of instructions than just a dense paragraph
//for($j = 0; $j < sizeOf($recipeInstr); $j++){
// echo '<h3>' .$recipeInstr[$j]['name'].'</h3>';
// for($n = 0; $n < $recipeInstr[$j]['steps']; $n++){
// echo '<div class="instruction">'. $n , " " , $recipeInstr[$j]['steps'][$n]['step'] . '<div>';
// }
//}
?>
</body>
</html>
The intended effect I am going for is one similar to how youtube has related videos on the right side of the page.
Well cou could try this code:
<body>
<br>
<div class="maincontent">
<div class="main">
<?php
//Title and image of recipe
echo '<br><br><div class="title">' .$recipeInfo['title']. '</div><br>
<div class="mainImage"><image src="' . $recipeInfo['image']. '"> </div>
<br><h2> Ingredients </h2>';
//Loop that generates a list of the ingredients used
for($i = 0; $i < $recipeInfo['extendedIngredients'][$i]; $i++){
$amount = $recipeInfo['extendedIngredients'][$i]['amount'];
$unit = $recipeInfo['extendedIngredients'][$i]['unit'];
$ingrName = $recipeInfo['extendedIngredients'][$i]['name'];
echo '<div class = "ingredients">' . $amount , " " , $unit , " " , $ingrName .' </div>';
}
//Instructions with error handling for no instructions found
$instructions = $recipeInfo['instructions'];
if($instructions == ""){
$instructions = "Whoops, there are no available instructions for this recipe.";
}
echo '<br><h2> Insructions </h2>
<div class="recipe">' . $instructions . '</div><br>';
//Unfinished, but will hopefully print a better list of instructions than just a dense paragraph
//for($j = 0; $j < sizeOf($recipeInstr); $j++){
// echo '<h3>' .$recipeInstr[$j]['name'].'</h3>';
// for($n = 0; $n < $recipeInstr[$j]['steps']; $n++){
// echo '<div class="instruction">'. $n , " " , $recipeInstr[$j]['steps'][$n]['step'] . '<div>';
// }
//}
?>
</div>
<div class="sidelinks">
<?php
//Unfinished (Needs to be styled correctly)
//Generating related links with clickable images
for($r = 0; $r < $relatedLinks[$r]; $r++){
echo '<div class = "related">
<a href = "recipeInfo.php?id='.$relatedLinks[$r]['id']. '">'.$relatedLinks[$r]['title'].'<br>
<image src = "https://spoonacular.com/recipeImages/' . $relatedLinks[$r]['image'] . '"></a>
<br>
</div>';
};
;
</div>
</div>
</body>
</html>
and css code:
<style>
.maincontent {
display: grid;
grid-template-columns: 70% 30%;
}
body{
background: lightblue;
margin: 25px;
}
.title{
font-size: 20px;
}
.recipe{
width: 60%;
}
.related{
list-style-position: inside;
}
.a{
float: right;
right: 5px;
}
.relatedImages{
}img{
width: 15%;
height: 17%;
}
</style>
this should work, i couldnt test it
This is main problem of my system I can display images and their names but it cant't be a horizontal.. Need help please. Cause when I run my codes the images will be vertically but I want to be in a horizontal
Here;s the code:
echo'<?php $src=array("candidates/images/".$rows["image"]); for($i=0;$i<2;$i++){ ?>';
echo '<div clas ="image">';
echo '<img src="candidates/images/'.$rows['image'].'" width="10" height="20px" />'.', '.'<br>'.$rows['lastname'].', '.$rows['firstname'].'<br>'.' = '.$rows['votes'];
// echo '<br>';
}
$sdsd=$dsada
?>
<img src="candidates/images/percent.gif"width='<?php echo(100*round($rows['votes']/($sdsd),2)); ?>'height='10'>
<?php
if ($rows['votes']==0){
echo "<br>";}
else {
// echo(100*round($rows['votes']/($sdsd),2)); /
/*?>%<br>*/
/*<?php
}
*/echo '</div>';
}
}
Here's the CSS:
.image {
position: relative;
width: 150px;
display: inline-bloxk;
}
Remove the <br> ?
echo ''.', '.''.$rows['lastname'].', '.$rows['firstname'].''.' = '.$rows['votes'];
my site which is a search engine returns many many results with a foreach loop as such:
foreach ($xml->channel->item as $result) {
$ltitle = $result->title;
$ldesc = $result->description;
$url = $result->displayUrl;
$link = $result->link;
if (strlen($ltitle) > 60)
{
$title = substr($ltitle,0,60).'...' ;
}
else
{
$title = $ltitle;
}
if (strlen($ldesc) > 195)
{
$desc = substr($ldesc,0,195).'...' ;
}
else
{
$desc = $ldesc;
}
echo "
<br>
<div class='resultbox'>
<a class='normal' style='text-decoration:none;font-size:huge;font-weight:bold' href='$link'>$title</a><br>
<div style='padding-top:3px;padding-bottom:4px;width:580px;'>
<font style='text-decoration:none;font-size:small;font-family:Arial;'>$desc<br></font></div>
<a style='text-decoration:none;' href='$link'><font style='text-decoration:none;font-size:small;color:green;font-weight:bold;'>$url<br></font></a>
</div>
";
}
And the resultbox class above styles all of the results with this
.resultbox
{
height:auto;
width:600px;
background-color:transparent;
font-size:19px;
padding:10px;
padding-left: 30px;
padding-right: 30px;
border-left: 6px solid #333;
}
.resultbox:hover
{
border-left: 8px solid #555;
}
The border-left color is what i want changed, i would like it to generate or to style randomly off of a list of colour codes so the results, insead of being all #333 can be #333 #555 #999 and so on..... any ideas?
If u have no problems using JS , You can certainly do this :
$(document).ready(function () {
$('.resultbox').mouseenter(function() {
var randomColor = Math.floor(Math.random()*16777215).toString(16);
$('.resultbox').css("border-left", " 8px solid #"+randomColor);
});
});
change <div class='resultbox'> to <div class='resultbox random-color-".rand(1,YOUR_COLOR_LIMIT)."'> AND define colors like
.random-color-1 {
border-left: 8px solid #555;
}
.random-color-2 {
border-left: 8px solid #555;
}
.....
.random-color-YOUR_COLOR_LIMIT {
border-left: 8px solid #555;
}
change
<div class='resultbox'>
to
<div class='resultbox' style='border-left-color:$yourColorInCssFormat;'>
the style attribute overrides the css from class.
set $yourColorInCssFormat to the color you wish to have for the div. for example: $yourColorInCssFormat = '#999';
You can use inline style for that. Or alternatively you can user nth-child selector of css to repeat the border-color scheme something like this:
.resultbox:nth-child(n+1):hover {
}
.resultbox:nth-child(2n+1):hover {
}
.resultbox:nth-child(3n+1):hover {
}
First off, try this out for your foreachloop:
<?php foreach ($xml->channel->item as $result): ?>
<?php
$ltitle = $result->title;
$ldesc = $result->description;
$url = $result->displayUrl;
$link = $result->link;
if (strlen($ltitle) > 60){
$title = substr($ltitle,0,60).'...' ;
}else{$title = $ltitle;}
if (strlen($ldesc) > 195){
$desc = substr($ldesc,0,195).'...' ;
}else{$desc = $ldesc;}
?>
<div class='resultbox'>
<a class='normal' style='text-decoration:none;font-size:huge;font-weight:bold' href='<?php echo $link ?>'><?php echo $title; ?></a>
<br>
<div style='padding-top:3px;padding-bottom:4px;width:580px;'>
<font style='text-decoration:none;font-size:small;font-family:Arial;'>
<?php echo $desc; ?><br>
</font>
</div>
<a style='text-decoration:none;' href='<?php echo $link; ?>'><font style='text- decoration:none;font-size:small;color:green;font-weight:bold;'><?php echo $url; ?><br></font> </a>
<?php endforeach; ?>
That way you're not playing with big echos.
Now for generating random colors your could use php rand();
For example:
//Generate a random number between the two parameters
$randomNumber = rand(1, 3);
//Use this number to dictate what the variable color should be
if($randomNumber == 1){$color = "#333"}
elseif($randomNumber == 2){$color = "#555"}
elseif($randomNumber == 3){$color = "#999"}
You can then use the variable $color in your code to randomly assign one of the colors to elements.
Hope this helps!
-Gui
im trying to float left every other UL tag, and i know i should flaot left every item and every other item clear:left, from what i've read, but the thing is i dont know how many UL or LI would appear because im echoing from a data base.
this is the CSS:
.clientes_provincia li{
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size:10px;
font-weight:bold;
text-decoration:none;
list-style-type:none;
text-align:left;
margin-top:0px;
margin-left:10px;
}
.clientes_comuna li{
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-weight:bold;
font-size:10px;
font-weight:bold;
text-decoration:none;
list-style-type:none;
list-style-position:inside;
}
.clientes_giro li{
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size:10px;
font-weight:normal;
text-decoration:none;
list-style-type:disc;
}
.clientes_nombre li{
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size:10px;
font-weight:normal;
text-decoration:none;
list-style-type:circle;
margin-left:20px;
}
and this is the php code, where i echo the list:
<?php
$nombreProvincia = "";
$nombreComuna = "";
$nombreGiro = "";
$nombreNombre = array();
while ($row = mysql_fetch_assoc($resultAraucania)) {
if ($nombreProvincia == $row['nombreProvincia']) {
if ($nombreComuna == $row['nombreComuna']) {
if ($nombreGiro == $row['nombreGiro']) {
$nombreNombre[] = $row['nombreNombre'];
}
else { //nombreGiro
echo '<li>' . implode('</li><li> ', $nombreNombre).'</li></ul></li></ul>';
$nombreGiro = $row['nombreGiro'];
echo '<ul class="clientes_giro"><li>'.$nombreGiro.'<ul class="clientes_nombre">';
$nombreNombre = array($row['nombreNombre']);
}
}
else { // nombreComuna
echo '<li>' . implode('</li><li> ', $nombreNombre).'</li></ul></li></ul></li></ul>';
$nombreComuna = $row['nombreComuna'];
echo '<ul class="clientes_comuna"><li>'.$nombreComuna;
$nombreGiro = $row['nombreGiro'];
echo '<ul class="clientes_giro"><li>'.$nombreGiro.'<ul class="clientes_nombre">';
$nombreNombre = array($row['nombreNombre']);
}
}
else { // nombreProvincia
if (!empty($nombreNombre)) {
echo '<li>' . implode('</li><li> ', $nombreNombre).'</li></ul></li></ul></li></ul></li></ul>';
}
$nombreProvincia = $row['nombreProvincia'];
// this is the UL i'd like float for every other one.
echo '<ul class="clientes_provincia"><li>'.$nombreProvincia;
$nombreComuna = $row['nombreComuna'];
echo '<ul class="clientes_comuna"><li>'.$nombreComuna;
$nombreGiro = $row['nombreGiro'];
echo '<ul class="clientes_giro"><li>'.$nombreGiro.'<ul class="clientes_nombre">';
$nombreNombre = array($row['nombreNombre']);
}
}
echo '<li>' . implode('</li><li> ', $nombreNombre).'</li></ul></li></ul></li></ul></li></ul>';
?>
So what I'd like to do is float every other UL tag of the 'Provincia' echo.
Thanks for the help!
at this moment with what i have i get a list like this:
Provincia1
Comuna1
Giro1
Nombre1
Nombre2
Provincia2
Comuna2
Giro2
Nombre3
Nombre4
I want the provincia 2 be on the right side of provincia 1, and if I have another list
provincia 3 i want it to be under pronvincia 1, and a prinvia 4 beside provincia 3 and so on.., thats what i mean with floating every other UL provincia, hope that helps as an example.
$i = 0;
while ($row = mysql_fetch_assoc($resultAraucania)) {
$class = $i++ % 2 ? 'odd' : 'even';
...
echo '<li class="' . $class . '">';
...
}
This allows you to easily distinguish between even and odd columns and float "every other" column left.
If you don't care about IE too much, you can use
.clientes_provincia:nth-of-type(odd) { float: left }
I think that your markup and looping is making this problem harder than it should be. I actually think it could just be 1 loop.
The trick here is to use a width on a container <div> and each <ul> which automatically forces the browser to float two <ul>s and then drop to the next row for the following <ul>. If you can't use this static width idea then you have 2 very good other solutions already.
Here is a small example which I have tested at http://writecodeonline.com/php/
$dataRow = array();
$dataRow[0] = array('nombreProvincia' => 'A123', 'nombreComuna' => 'A456', 'nombreGiro' => 'A789', 'nombreNombre' => array(101, 102));
$dataRow[1] = array('nombreProvincia' => 'B123', 'nombreComuna' => 'B456', 'nombreGiro' => 'B789', 'nombreNombre' => array(201, 202));
$dataRow[2] = array('nombreProvincia' => 'C123', 'nombreComuna' => 'C456', 'nombreGiro' => 'C789', 'nombreNombre' => array(301, 302));
echo '<div style="width:600px">';
foreach ($dataRow as $key => $row) {
$nombreProvincia = $row['nombreProvincia'];
$nombreComuna = $row['nombreComuna'];
$nombreGiro = $row['nombreGiro'];
$nombreNombre = '<li>'.implode('</li><li>', $row['nombreNombre']).'</li>';
echo $provincia = <<<HTML
<ul class="clientes_provincia" style="width:200px;float:left;">
<li>$nombreProvincia
<ul class="clientes_giro">
<li>$nombreGiro
<ul class="clientes_nombre">
$nombreNombre
</ul>
</li>
</ul>
</li>
</ul>
HTML;
}
echo '<br style="clear:both"></div>';
Also, heredoc is awesome if you use PHP >= 4.