How to apply rule css to div with php - php

I want to apply a css property to a div but don't know how to do it using php. I have a variable called rollover, when it is off, the button would change opacity: 1 to make this visible. How do I do it?
This is the code:
$button_style = "letter-spacing: " . $a['button_letter_spacing'] . ";";
$button_style .= " font-size: " . $a['button_font_size'] . ";";
$button_style .= " color: " . $a['button_color'] . "; border-color: " . $a['button_color'] . ";";
if($a['rollover'] == off)
$button_style .= " opacity: " . 1 . ";";
But with $button_style don't work. Because the container that I want to change the opacity property, called button_container, is a div.
<?php if ($a['button'] != ''): ?>
<div class="button_container <?php echo $a['align']; ?>" style="<?php echo "top: " . $a['button_top']; ?>; ">
<span><?php echo $a['button']; ?></span>
</div>
In this part of the code you can see the container (button_container) to which you need to change the opacity property when rollover is off.
How I can do this?
I just want that when the variable rollover is off, the opacity property button_container change its value to 1.

Related

Problem with displaying photo from database on page

I have problem with displaying photo from database on the page. I made a path in database column image_src = "../GameForest/gamephoto/gta5.jpg". And path is correct I checked it several times.
//This is a class that displaying all the data from the database
<?php
class Game extends Dbh {
public function gameDiv() {
$id = $_GET['id'];
$stmt = $this->connect()->query("SELECT g.game_id, g.game_name, g.image_src, g.genre_id, g.developer_id, g.release_date, g.platfrom_id, g.game_price, g.game_description, g.processor, g.graphic, g.ram\n" . "FROM game AS g\n" . "LEFT JOIN genre AS z\n" . "ON g.genre_id = z.id WHERE game_id = '$id'");
while ($row = $stmt->fetch()) {
echo "<div class='gameName'><h2>" . $row['game_name'] . "</h2></div>";
echo "<div class='buying'><p>" . $row['game_price'] . "€</p><a href='bought.php'><button>Buy Game</button></a></div>";
//This next echo is for displaying photo from database:
echo "<div class='gamePhoto'><img>" . $row['image_src'] . "</img></div>";
echo "<div class='gameGenre'><b>Genre: </b><p>" . $row['genre_id'] . "</p></div>";
echo "<div class='gameDeveloper'><b>Created by: </b><p>" . $row['developer_id'] . "</p></div>";
echo "<div class='gamePlatform'><b>Platform: </b><p>" . $row['platfrom_id'] . "</p></div>";
echo "<div class='gameRdate'><b>Release date: </b><p>" . $row['release_date'] . "</p></div>";
echo "<div class='gameDescription'><b>Description: </b><p>" . $row['game_description'] . "</p></div>";
echo "<div class='sysRequirements'><p>Recommended System Requirements:</p><b>Processor:</b><p>" . $row['processor'] . "</p>" . " Heading <b>Graphic:</b><p>" . $row['graphic'] . "</p>" . " <b>RAM:</b><p>" . $row['ram'] . "</p>";
}
}
}
**//This is instance for previous class:**
<?php
#istance for printing information about a Game
$game = new Game;
echo $game->gameDiv();
?>
**//This is CSS code of that photo:**
.gamePhoto {
margin: 10px 0 20px 10%;
width: 200px;
height: 400px;
float: left;
}
.gamePhoto img {
width: 500px;
height: 600px;
}
?>
I expect that there is a picture from database but I get only a gray frame where the image should actually be below that it writes "../GameForest/gamephoto/gta5.jpg" (the path I wrote in the base).
The rest of the database data are displayed normally it's just a problem with images.
On the other page (and other class) the same picture from the same database is normally displayed and I have no problem.
img is inline block,use it like <img src="" />
Change this
<img>" . $row['image_src'] . "</img>
to this
<img src=" . $row['image_src'] . ">

Styling so a user sees the same exact style no matter what their user id is

In my code, I have a center tag and have styled the center tag so it looks the way I want it to look. It currently looks like this:
Whenever I go on my admin account (one that has a different user id than the normal users) it looks way different than if a regular user would see it. It looks like this:
I would like to know if there is any way around this so it looks the same as if a regular would see it on an admin account.
I've tried putting a div tag around it and using the same styling features, but that didn't work. I've tried putting the center tag around different parts of the code, but since it's an "if" statement, it will look different.
Here is the code:
<style>
center{
border-left: .17em dashed;
border-top: .17em solid;
border-right: .17em dashed;
border-bottom: .17em solid;
padding-left:25px;
padding-bottom: 20px;
width: 1000px;
background-color: #E1A0A0;
border-color: black;
margin: auto;
text-align: left;
}
</style>
<?php
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
echo '<center><b><h2>' . $row['title'] . '</h2></b>' . $row['post'] . '<br/><br/> <b>Posted On: </b>' . $row['postdate'] . '<br/>View Post Comments | ';
if($_SESSION['user_id'] == 3) {
echo '<a href="update.php?id=' . $row['blogid'] . '" >Update Blog Post</a> | <a href="' . basename(__FILE__) . '?id=' . $row['blogid'] . '" >Delete Blog Post</a></center>';
}
}
?>
I know that I can't just put another center tag around the
"echo '<center><b><h2>' . $row['title'] . '</h2></b>' . $row['post'] . '<br/><br/> <b>Posted On: </b>' . $row['postdate'] . '<br/>View Post Comments |';"
part of the code and
"echo '<a href="update.php?id=' . $row['blogid'] . '" >Update Blog Post</a> | <a href="' . basename(__FILE__) . '?id=' . $row['blogid'] . '" >Delete Blog Post</a></center>';"
part of the code because it will look like this:
Additionally, if I put the center tag around everything, it will look like this:
I just want to make it look the same no matter who views it.
after the close of the if(){} you need to echo '</center>' and remove it from inside the if(){}. You have setup a loop where sometimes center is not closed
echo '<center><b><h2>' . $row['title'] . '</h2></b>' . $row['post'] . '<br/><br/> <b>Posted On: </b>' . $row['postdate'] . '<br/>View Post Comments | ';
if($_SESSION['user_id'] == 3) {
echo '<a href="update.php?id=' . $row['blogid'] . '" >Update Blog Post</a> | <a href="' . basename(__FILE__) . '?id=' . $row['blogid'] . '" >Delete Blog Post</a>';
}
echo '</center>';
Not sure if I quite understand what is being asked for, but if all you want to do is make everything look like the last image you posted, remove this in the css:
padding-left:25px;

Using PHP to change the information displayed inside a label

I have the following code that is supposed to be a list of "facilities" and I made a div acting as a popUp that contain information that should change depending on the Lab I click info, I already made the popUp appear and dissapear playing with adding a hide and show class to it using Js.
But I don´t really know how should I write that each li element has to retrive information from a database I made in wamp for practice purposes, should I use a label? Or perhaps create a table instead of a list?
In short I need that when I click Lab 1 the popUp says Name: Lab1, if the clicks Lab 2, then Lab2 and so on. The code I was going to use in PHP is below as well.
HTML
<div class="box">
<p>Lab #1</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>
<div class="box">
<p>Lab #2</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>
<div class="box">
<p>Lab #3</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>
<div class="popUp1 hide" id="popUpCorrecto1">
<div class="estiloPopUp">
<span>Información de laboratorio</span>
<span value="Cerrar" id="btnCerrar">x</span>
</div>
<ul>
<li>Nombre: Lab #1</li>
<li>Carrera: Desarrollo</li>
<li>Capacidad: 20</li>
<li>Ubicación:Abajo</li>
<li><a href='horarios.html'>Ver horarios</a></li>
</ul>
<input type = "button" value = "Eliminar" id = "btnEliminar" onclick="window.location='labEliminado.html';" />
<input type = "button" value = "Modificar" id = "btnModificar" onclick="window.location='modificarLab.html';" />
</div>
PHP
function displayLab(){
$query = "SELECT bk.idLab , bk.capacidad, bk.carrera, bk.ubicacion FROM labs";
$result = do_query($query);
return $result;
}
function displayBooks(){
$books = getBooks();
while($row = mysql_fetch_assoc($books)){
echo '<tr>' .
'<td>' . $row['idLab'] . '</td>' .
'<td>' . $row['carrera'] . '</td>' .
'<td>' . $row['capacidad'] . '</td>' .
'<td>' . $row['ubicación'] . '</td>' .
'</tr>';
}
}
Gonna add the box CSS just in case:
.box {
color: #ecf0f1;
background-color: #34495e;
display: inline-block;
padding: 2px;
width: 75px;
border: 2px solid black;
margin: 3px;
}
.box:hover{
border:2px solid white;
}
JS for PopUp
var elementoVerInfo = document.getElementById('lnkInfo'),
elementoBotonCerrar = document.getElementById('btnCerrar');
elementoVerInfo.addEventListener('click', function () {
displayPopUp('popUpCorrecto1');
});
elementoBotonCerrar.addEventListener('click', function () {
hidePopUp('popUpCorrecto1');
});
function displayPopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('hide','');
fElementDivToShow.className = newClass + ' show';
}
function hidePopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('show','');
fElementDivToShow.className = newClass + ' hide';
}
That is if I decide to use a table...and if the code runs >.>
Anyway thanks a lot in advance
Best Wishes
If anyone else wants to do something similar I came with a solution:
function displayLabs(){
$labs = getLabs();
while($row = mysql_fetch_assoc($labs)){
echo '<ul>' .
'<li>"Nombre: "'. $row['idlab'] . '</li>' .
'<li>"Capacidad: "'. $row['capacidad'] . '</li' .
'<li>"Carrera: "'. $row['carrera'] . '</li>' .
'<li>"Ubicación: "'. $row['ubicacion'] . '</li>' .
'</ul>';
}
}

Styling code within php

I'm having trouble styling the information that I'm pulling from the database. If anyone can help I'd really appreciate it. I tried defining $style within the while loop, and then assigning it the $questions, but nothing happens on the webpage. I'm new with coding in general, and while I have some knowledge of css, I don't know how you use it within php script.
style for the background I was trying to put behind each question*
#frm1
{
background: #D9D9D9;
margin:auto;
top:150px; left:200px; width:880px; height:60px;
position:absolute;
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 9px;
font-style: italic;
line-height: 24px;
font-weight: bold;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
border: 1px solid #999;
border: inset 1px solid #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.7);
}
PHP code retrieving info from database*
if (mysql_num_rows($result) >= 0)
{
$toggle = false;
while ($rows = mysql_fetch_array($result, MYSQL_ASSOC) and $i<10 )
{
$i++;
$toggle = !$toggle;
if($toggle)
$style = "id:frm1;";
else
$style = "background: white;";
questions .= "<a style='$style'> </a>";
questions .= "Titlee: " ."<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['title'] . "</a> <br> ";
questions .= "Details: " . "<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['detail'] . "</a> <br> ";
questions .= "Category: " . "<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['categories'] . "</a> <br> <br> <br> ";
}
echo questions;
}
while I have some knowledge of css, I don't know how you use it within
php script.
Okay.
Your PHP script is a PHP script on the server, and results in a regular HTML page for the user. [See the bottom of the answer, I'll try to give you a quick overview]
You can use CSS exactly as you would with a plain HTML page, and it will work just fine despite being backed by PHP.
This means do not use style="$style". Style attributes are Bad.
As it looks like you want to construct your CSS conditionally, my suggestion is either:
Change a class using PHP, and have an external stylesheet which acts on that class
Put the styles you're conditionally changing inside <style> tags in your header, and change those with PHP.
This answer will use the first option
(Edited to take into account new information)
In your PHP code, before your links:
if($toggle) {
$questions.='<div id="frm1">';
}
else {
$questions.='<div id="frm2">';
}
In your PHP code, after your links:
$questions .= "</div>";
And finally, in either your external stylesheet, or your in-head <style> tags:
#frm1 {
...
}
#frm2 {
...
}
Quick overview of server-side languages
So, web programming. This is generally done in two ways. client side (read: javascript) and server side (in your case, read: php, but there's a lot more to this).
With a client side language like javascript, the code actually gets sent to the web browser. The web browser then modifies the contents of the page according to what the script says for it to do. This means your users can see the code, even turn it off in their web browser or execute other javascript in its place.
With a server side language, there's a different workflow.
The user asks for your webpage (identified by its URL)
The web server (read: your webhosting) receives this request, and looks up what the webpage is
Finding that the webpage is a php page, the server executes the php code
The php code gives the server an html page (which you have built, as you can see, your php script outputs HTML)
The server sends the resulting html code to the user
Note that the web browser, which is the component doing all of the processing of HTML and CSS, never sees the php. By the time your php script reaches your users, it's just an html page.
Because the web browser only sees an HTML page, there is no functional difference between using CSS on your php script, and using CSS on a regular HTML page.
This will work:
if (mysql_num_rows($result) >= 0) {
$toggle = false;
while ($rows = mysql_fetch_array($result, MYSQL_ASSOC) and $i<10 ) {
$i++;
$toggle = !$toggle;
if($toggle)
$style = "background: #D9D9D9;"; else
$style = "background: green;";
questions .= "<a href='#' style='display:block;$style'> </a>";
questions .= "Titlee: " ."<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['title'] . "</a> <br> ";
questions .= "Details: " . "<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['detail'] . "</a> <br> ";
questions .= "Category: " . "<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['categories'] . "</a> <br> <br> <br> ";
}
echo questions;
}
The problem was your a-tag doesn't have a href attribute and since it's displayed inline (default-behaviour) the background CSS property won't work.
Instead of style, build classes and define them in css.
if ($toggle)
$questionClass="redBackground";
else
$questionClass="greenBackground";
$questions.="<a class='$questionClass'>";
Also, definitely look into mysqli or pdo. mysql_ functions are deprecated and not nearly as cool!
You can do -
if (mysql_num_rows($result) >= 0)
{
$toggle = false;
while ($rows = mysql_fetch_array($result, MYSQL_ASSOC) and $i<10 )
{
$i++;
$toggle = !$toggle;
if($toggle)
$style = "bg";
else
$style = "bg_green";
echo("<a class='".$style."'> </a>");
echo("Titlee: " ."<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['title'] . "</a> <br> ");
echo("Details: " . "<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['detail'] . "</a> <br> ");
echo("Category: " . "<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['categories'] . "</a> <br> <br> <br> ");
}
In this file add -
<style type="text/css">
.bg {
background: #D9D9D9;
}
.bg_green {
background: green;
}
</style>
As ben said use class.
first create a class
<style>
.gray{background: #D9D9D9;}
.green{background: green;}
</style>
Then try this
if (mysql_num_rows($result) >= 0)
{
$toggle = false;
while ($rows = mysql_fetch_array($result, MYSQL_ASSOC) and $i<10 )
{
$i++;
$toggle = !$toggle;
$style = ($toggle)?"green":"gray";
$questions .= "<a class='".$style."'> Put some thing here </a>";
$questions .= "Titlee: " ."<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['title'] . "</a> <br> ";
$questions .= "Details: " . "<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['detail'] . "</a> <br> ";
$questions .= "Category: " . "<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['categories'] . "</a> <br> <br> <br> ";
}
echo $questions;
}
Please try it, I have not tested but it should work, according to your need.
You can alternate on your counter $i with $i % 2 to switch between two CSS classes. This will give you 0, 1, 0, 1, 0, 1, ... and so select the first and second CSS class name in turn.
PHP:
$css_class = array('frm1', 'second');
while ($rows = mysql_fetch_array($result, MYSQL_ASSOC) and $i<10 )
{
$i++;
questions .= "<a class='$css_classes[$i % 2]'> </a>";
questions .= "Titlee: " ."<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['title'] . "</a> <br> ";
questions .= "Details: " . "<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['detail'] . "</a> <br> ";
questions .= "Category: " . "<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['categories'] . "</a> <br> <br> <br> ";
}
and in your CSS file you define the two classes
.frm1 {
background: #D9D9D9;
margin:auto;
top:150px; left:200px; width:880px; height:60px;
position:absolute;
...
}
.second {
background: white;
}

foreach loop not displaying desired result

Hi guys and thank you for your time. My question is regarding.
I am trying to loop over images in my folder along with a post in the database with the end result looking like this:
Post 1 Image 1
Post 2 Image 2
Post 3 Image 3
At the moment i get this result:
Post 1 Image 1
Post 1 Image 2
Post 1 Image 1
Post 2 Image 1
Post 2 Image 2
Post 2 Image 3
I do not want this result.
Below is my code:
$post_info = get_posts();
foreach ($post_info as $info){
$photos = glob('design/img/*');
foreach($photos as $photo) {
echo " <a href='feed.php?pid=".$info['post_id']." ' >
<div style='background:#FFF5C3'> <br> <h2> ".$info['person_mentioned']." </h2>
<h3 style='color: black'> ".$info['body']." </h3> </div> </a>";
echo " <img src='{$photo}' width='285px' height='200px' style='border: 5px solid black'>";
}
}
Thanks for your time.
Try this out (minus potential language specifics since I didn't actually run to check this code).. It's basically a regular for loop instead of a foreach.
$post_info = get_posts();
$photos = glob('design/img/*');
if (count($post_info) === count($photos)) { // According to your requirement, the counts would be the same
$count = count($post_info);
for ($i = 0; $i < $count; $i++) {
$info = $post_info[$i];
$photo = $photos[$i];
echo " <a href='feed.php?pid=".$info['post_id']." ' > <div style='background:#FFF5C3'> <br> <h2> ".$info['person_mentioned']." </h2>
<h3 style='color: black'> ".$info['body']." </h3> </div> </a>";
echo " <img src='{$photo}' width='285px' height='200px' style='border: 5px solid black'>";
}
}
Hope that helps :)
Getting image details from get_posts() and removing inner foreach loop may fix your problem.
Note: replace $info['something_like_post_image'] with your image field.
$post_info = get_posts();
foreach ($post_info as $info) {
//$photos = glob('design/img/*');
//foreach ($photos as $photo) {
echo " <a href='feed.php?pid=" . $info['post_id'] . " ' >
<div style='background:#FFF5C3'> <br> <h2> " . $info['person_mentioned'] . " </h2>
<h3 style='color: black'> " . $info['body'] . " </h3> </div> </a>";
echo " <img src='" . $info['something_like_post_image'] . "' width='285px' height='200px' style='border: 5px solid black'>";
//}
}
UPDATE
/*
* If your images have any naming convention like
* imageFileName = "image_{POST_ID}.jpg"
* then you can use below code (NO DATABASE ENTRY REQUIRED)
* (ie, For post #1 image file would be "image_1.jpg";
* and for post #2 image file would be "image_2.jpg")
*/
$post_info = get_posts();
foreach ($post_info as $info) {
//filename = image_1.jpg or image_2.jpg or...
$photoFileName = 'design/img/' . 'image_' . $info['post_id'] . '.jpg';
if (file_exists($photoFileName)) {
echo " <a href='feed.php?pid=" . $info['post_id'] . " ' >
<div style='background:#FFF5C3'> <br> <h2> " . $info['person_mentioned'] . " </h2>
<h3 style='color: black'> " . $info['body'] . " </h3> </div> </a>";
echo " <img src='" . $photoFileName . "' width='285px' height='200px' style='border: 5px solid black'>";
}
}
NOTE: You should have to keep a relation with each post against your unique image; otherwise you will not be able to get that unique image with your post, while listing.
Checkout below options to handle this situation.
You can keep image name in database (for each post, you can get your image name directly from database)
Use a naming convention for your images (for post #1 use unique image name (say image_1, for post #2 image_2 etc)
UPDATE - 2
If you are looking for a cycle-through images (without any condition), use below code
/*
* If you are looking for a solution that cycles each images
* along with each post, try this one
*/
$post_info = get_posts();
$photos = glob('design/img/*');
$numPhotos = count($photos) + 1;
//assuming your post# starts with 1
$imageId = 1;
foreach ($post_info as $info) {
//cycling
if ($imageId % $numPhotos === 0) {
$imageId = 1;
}
$photoFileName = 'design/img/' . 'image_' . $imageId++ . '.jpg';
//no need of this checking, since you are cycling
//if (!file_exists($photoFileName)) {
// $photoFileName = 'path/to/default/image.jpg';
//}
echo " <a href='feed.php?pid=" . $info['post_id'] . " ' >
<div style='background:#FFF5C3'> <br> <h2> " . $info['person_mentioned'] . " </h2>
<h3 style='color: black'> " . $info['body'] . " </h3> </div> </a>";
echo " <img src='" . $photoFileName . "' width='285px' height='200px' style='border: 5px solid black'>";
}

Categories