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'] . ">
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.
Here is my code to show blob images on my webpage..
$sql = mysql_query("SELECT slider_id,date,page_image FROM news_slider where date='$ndate' order by slider_id ASC LIMIT $start, $limit");
// the result of the query
// $result = mysql_query("$result") or die("Invalid query: " . mysql_error());
while ($slider_rs = mysql_fetch_array($sql)) {
$sl_id = $slider_rs['slider_id'];
$sl_img = $slider_rs['page_image'];
echo '<div class="showcase-slide">';
echo '<div class="showcase-content">';
echo '<div class="map" style="display: block; background-image:url(' . base64_encode($sl_img) . '); position: relative; padding: 0px; width: 518px; height: 801px; background-position: initial initial; background-repeat: initial initial;">';
echo '<canvas style="width: 518px; height: 801px; position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px; opacity: 0.9999999999999999;" height="801" width="518"></canvas>';
echo '<img id="image' . $sl_id . '" class="map maphilighted" usemap="#Map' . $sl_id . '" src="data:image/jpeg;base64, ' . base64_encode($sl_img) . ' " align="top" style="border: 0px; opacity:0.9999999999999999; position: absolute; left: 0px; top: 0px; padding: 0px;">;';
echo '</div>';
echo '<span id="Label1" style="display:inline-block;height:1px;width:1px;">';
echo '<map name="Map' . $sl_id . '">';
$get_list = "select news_id,x1,y1,x2,y2 from cords where slider_id='{$sl_id}'";
$get_list_res = mysql_query($get_list) or die("Invalid query: " . mysql_error());
if (mysql_num_rows($get_list_res) > 0) {
while ($add_cords = mysql_fetch_array($get_list_res)) {
$news_id = $add_cords[news_id];
$a = $add_cords[x1];
$b = $add_cords[y1];
$c = $add_cords[x2];
$d = $add_cords[y2];
echo '<area shape="rect" coords="' . $a . ',' . $b . ',' . $c . ',' . $d . '" "href=" " onclick="showUser(' . $news_id . ')" alt=" " title=" " id="' . $news_id . '" >' . "\n";
}
}
echo ' </map>';
echo '</span>';
echo '</div>';
echo '</div>';
}
// close the db link
mysql_close($link);
but problem is images are not dispay on chrome and IE???
i used pagination for paginate images.
Please give any solution?
I think you need to also include the mimetype and a base 64 header:
Try changing this:
background-image:url('.base64_encode($sl_img).');
...to this:
background-image:url(data:image/jpeg;base64,'.base64_encode($sl_img).');
Certainly this only works if the blob is a JPEG. You'd use image/png if it's a PNG, for instance.
See this page for a more flexible implementation: http://devin.la/blog/base64-encode-images-css-script-mobile
I would like each entry of a video to be aligned next to each other rather than going under each video. So as with the image example from my current PHP and HTML code below, the parts after "user1" should go to the right and not under (and the same with the rest).
And this is the code that I am now using. I'm using a while loop and I tried fiddling with it for a couple of hours but without success. Could anyone help out please?
include"core/database/connect.php";
$query_pag_data = "SELECT V_TITLE,V_USERNAME from upload LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";
while ($row = mysql_fetch_array($result_pag_data)) {
$htmlmsg=htmlentities($row['V_USERNAME']);
$msg .= "<a href='index.php'><img src='images/link_pic.png' alt='error' width='128' height='96'></a>" . "<li><b>" . $row['V_TITLE'] . "</b> " . $htmlmsg ."</li>";
}
$msg = "<div class='data'><ul>" . $msg . "</ul></div>"; // Content for Data
And my CSS file:
#container .data ul li{
list-style: none;
font-family: verdana;
margin: 5px 0 5px 0;
color: #000;
font-size: 13px;
}
If I add "display: inline-block;" to my css (.data respectively), this is what I get:
The text description I would like it to be under the black image and not next to it.
When you are displaying the items themselves, this line:
$msg .= "<a href='index.php'><img src='images...
Try putting an id attribute, so it would look like:
$msg .= "<a href='index.php'><img id="nextTo" src='images
Then in your css:
#nextTo{
float: left;
}
Wrap your <img> and the <div> with class .data in a <div> and then add display: inline-block; with some padding(for nice look) to make them come in the same line.
So you code would be now like this:
include"core/database/connect.php";
$query_pag_data = "SELECT V_TITLE,V_USERNAME from upload LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";
while ($row = mysql_fetch_array($result_pag_data)) {
$htmlmsg=htmlentities($row['V_USERNAME']);
$msg .= "<div class='inline'><a href='index.php'><img src='images/link_pic.png' alt='error' width='128' height='96'></a>" . "<li><b>" . $row['V_TITLE'] . "</b> " . $htmlmsg ."</li></div>";
}
$msg = "<div class='data'><ul>" . $msg . "</ul></div>"; // Content for Data
And your CSS would be:
.inline {
display: inline-block;
}
Or if it's possible then add this to your .data class:
.data {
display:inline-block;
}
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;
}