I build my website for fun and want to put different banner on each page, in my header i have random banners who appear with this code,
<div style=' height:145px; background-image:url(images/banners/banner<?php
echo rand(1,3); ?>.jpg); background-position:center center; border-
radius:4px;'></div>
So there is 3 banners and each time i refresh random one appear, but i want to have another 3 banners for my other page but with the same include"inc/header.php", maybe 'if' statement could work but i really don't know how to do it.
Sorry for my English i'm french.
Assuming the three banners are in the same folder, the following would be a simple solution:
Place the banner code in a separate file:
banner.php
<div style=' height:145px; background-image:url(images/banners/banner<?php
echo rand($start,$end); ?>.jpg); background-position:center center; border-
radius:4px;'></div>
Then you can call it from your page:
$start = 4; //First banner number
$end = 6; //Last banner number
include('inc/banner.php');
This is not the most elegant solution, but it's a simple nice simple one for a novice programmer that introduces some concepts.
I found how to do it myself:
<?php if ($title == "page1"): ?>
<div style=' height:145px; background-image:url(images/banners/banner<?
php echo rand(1,6); ?>.jpg); background-position:center center; border-
radius:4px;'></div>
<?php elseif ($title == "page2"): ?>
<div style=' height:145px; background-image:url(images/banners/banner<?php
echo rand(7,9); ?>.jpg); background-position:center center; border-
radius:4px;'></div>
<?php endif; ?>
I just need to create new "elseif" for every page and assign new banners with the same header.php all over my website.
use if
example
if ($id == 1){
<div style=' height:145px; background-image:url(images/banners/banner<?
php
echo rand(1,3); ?>.jpg); background-position:center center;
border-
radius:4px;'></div>
}
if ($id == 2){
<div style=' height:145px; background-
image:url(images/banners/banner<?php
echo rand(1,3); ?>.jpg); background-position:center center; border-
radius:4px;'></div>
}
if ($id == 3){
echo "no banner";
}
help fixing this sh!t mod, thanks
Related
Having a bit of an issue here. Could use some insight. I'm displaying user created events to visitors to my website. I'm using a while loop to display everything that hasn't not yet already passed. My goal is to display two separate events right next to each other, then another two below that and so on. Currently I'm using the flex box css property to achieve this, but it's only displaying the output vertically and not the way I want it to, meaning it's only putting one event per line. Here is my current output for displaying the events.
include 'db_connect.php';
$event_type = $_POST['event_type'];
$state = $_POST['state'];
$current_date = date("Y-m-d");
$sql = "SELECT * FROM events WHERE event_type LIKE '%".$event_type."%' AND state LIKE '%".$state."%' AND end_date > '$current_date' ORDER By end_date ASC";
$result = mysqli_query($conn, $sql);
if (isset($_POST['search-events']) && !empty($event_type) && !empty($state)) {
while($row = mysqli_fetch_array($result)) {
$event_name= $row['event_name'];
$image = $row['image'];
$start_date = $row['start_date'];
$end_date = $row['end_date'];
$start_time = $row['start_time'];
$end_time = $row['end_time'];
$street = $row['street'];
$city = $row['city'];
$state = $row['state'];
$zip_code = $row['zip_code'];
$id = $row['event_id'];
echo '<div class="filter-wrap">';
echo '<div id="filter-boxes">';
echo '<div id="list_image"><img src="'.$image.'"></div>';
echo '<div id="list_name">'.$event_name.'</div>';
echo '<div id="list_date">'.$start_date. ' - ' .$end_date. '</div>';
echo '<div id="list_time">' .$start_time. ' - ' .$end_time. '</div>';
echo '<div id="list_location">'.$street.''.$city.''.$state.''.$zip_code.'</div>';
echo '</div>';
echo '</div>';
}
}
Then there's the css that I'm using.
.filter-wrap {
display: flex;
flex-direction: row;
padding: 10px;
justify-content: center;
align-items: center;
}
#filter-boxes {
border: 2px solid #999;
text-align: center;
width: 50%;
height: 150px;
}
As you can see, I'm using the flex property inside the container that holds each of the individual boxes that holds each event. I have the flex direction set to row since I want it to display horizontally, then go the next line after it runs out of room on each line.
I tried a few things. I tried switching to the css column count property but didn't get the results I was expecting. I honestly probably didn't tweak with that property enough, but I have my heart set on the flex box property. I also tried setting the flex direction to column and also tried adding an inline-block display property to the boxes that are suppose to repeat on the while loop with each event. I'm finding this online that are kind of similar to my issue, but not quite. One uses javascript, but this can obviously also be accomplished somehow with php. I also found several articles talking about centering the content using flexbox, which is not the goal here.
Try move your .filter-wrap div element to outside of the while() {} loop.
Your current coding:
while() {
echo '<div class="filter-wrap">';
echo '<div id="filter-boxes">';
// content goes here...
echo '</div>';
echo '</div>';
}
will result in following structure where each .filter-wrap only container a single child .filter-boxes, which will always results in vertical presentation:
<div class="filter-wrap">
<div id="filter-boxes"> content </div>
</div>
<div class="filter-wrap">
<div id="filter-boxes"> content </div>
</div>
<div class="filter-wrap">
<div id="filter-boxes"> content </div>
</div>
For horizontal presentation, the correct structure should be one .filter-wrap consists of multiple .filter-boxes childs:
<div class="filter-wrap">
<div id="filter-boxes"> content </div>
<div id="filter-boxes"> content </div>
<div id="filter-boxes"> content </div>
</div>
So you can try change your coding to:
echo '<div class="filter-wrap">';
while() {
echo '<div id="filter-boxes">';
// content goes here...
echo '</div>';
}
echo '</div>';
Snippet for demo to you the coding logic result. It is in JS but you just have to apply the same in your PHP
Hope it helps and Happy coding!
var result_1 = document.getElementById('result_1');
var result_2 = document.getElementById('result_2');
var content_1 = '';
var content_2 = '';
content_2 = '<div class="filter-wrap">';
for (var i = 1; i <= 5; i++)
{
// result 1
content_1 += '<div class="filter-wrap"> <div class="filter-boxes">content ' + i + '</div> </div>';
// result 2
content_2 += '<div class="filter-boxes">content ' + i + '</div>';
}
content_2 += '</div>';
result_1.insertAdjacentHTML('beforeend', content_1);
result_2.insertAdjacentHTML('beforeend', content_2);
.filter-wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 10px;
justify-content: center;
align-items: center;
}
.filter-boxes {
border: 2px solid #999;
text-align: center;
width: 50%;
height: 50px;
/* for two columns display */
max-width: 49%;
}
#result_1,
#result_2 {
background-color: lightgray;
border: 1px dashed black;
margin: 3px;
}
result 1
<div id="result_1"></div>
result 2
<div id="result_2"></div>
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function Send1()
{
adress="1.php"
$.get(adress,Get1)
}
function Get1(answer)
{
$("#Show1").html(answer)
}
function Send2()
{
$("#Show1").click(function( event ) {
var cty = $(event.target).attr('id');
adress="2.php?cty="+ cty
$.get(adress,Get2)
})
}
function Get2(answer)
{
$("#Show2").html(answer)
}
</script>
</head>
<body>
<form method="post">
<div style="margin-top: 1vh; margin-bottom: 1vh;">
<input type="button" onclick="Send1()" style="height:4vh; width: 19.7vw;" value="Button">
</div>
</form>
<div id="Show1" style="border:1px solid black; height: 600px; width:300px; float:left; margin-right: 1vw;" onclick="Send2()"></div>
<div id="Show2" style="border:1px solid black; height: 600px; width:1000px;"></div>
</body>
</html>
1.php
<?php
require 'vendor/autoload.php';
$adress="http://localhost:3000/Country";
$clienthttp=new EasyRdf\Http\Client($adress);
$req=$clienthttp->request();
$resultJSON=$req->getBody();
$country=json_decode($resultJSON);
foreach ($country as $countries)
{
echo "<a href='#'><span id='$countries->id'> $countries->name </span></a> <br>";
}
?>
2.php
<?php
require 'vendor/autoload.php';
$cty = $_GET["cty"];
$adress="http://localhost:3000/City?CountryId=$cty";
$clienthttp=new EasyRdf\Http\Client($adress);
$req=$clienthttp->request();
$resultJSON=$req->getBody();
$city=json_decode($resultJSON);
echo "<div style='text-align: center; margin-bottom: 5vh;'>";
echo "<span style='font-size: 3vh'> Name </span>";
echo "<span style='margin-left: 10vw'> Surface </span>";
echo "<span style='margin-left: 10vw'> Population </span>";
echo "</div>";
foreach ($city as $cities)
{
echo "<div style='text-align: center; margin-bottom: 22.5vh;'>";
echo "<span style='font-size: 3vh;'> $cities->name </span>";
echo "<span style='margin-left: 10vw'> $cities->surface </span>";
echo "<span style='margin-left: 10vw'> $cities->population </span>";
echo "</div>";
}
?>
Short description: first request (Send1 and Get1) shows a list of countries. When I click one of the countries, I want to get the cities from it (that's what Send2 and Get2 are for). For some reason, the request is duplicated times x (first request goes once, second twice, so on). And sometimes it just randomly changes the values between cities from different countries. Basically, the code works but it produces some strange behaviours.
Every time you run Send2 it executes $("#Show1").click... which creates a new click event handler for the show1 button. But you never remove any of the previous handlers. So when you click show1 it runs all the handlers (and thus all the Ajax requests) ever attached to the button.
That's fine the first time obviously, but after that the number of requests triggered will keep going up proportional to every execution of the Send2 function. The mess is also exacerbated by the fact that Send2 is triggered by clicking on show1!
It would make more sense to define the event handler once, outside the Send2 function. You don't need the Send2 function at all, in fact.
I'm using dreamweaver and php to return a list of images based on search critiera.
I have used Dreamweaver's repeat function and can get the images to repeat below each other (as below).
<table width="100" height="38" border="1">
<?php do { ?>
<tr>
<td width="38">
<img class='example' src="images/<?php echo $row_getresult['image_name']; ?>.png"/><br>
</a></td></tr>
<?php } while ($row_getamenityaccommodation = mysql_fetch_assoc($getamenityaccommodation));
?>
</table>
How can I get the images to go across from each other within a CSS Div e.g. float:left; width:45%; so that if there are more images than what would fit in 45%, the images would continue onto a new line?
Would somehow 'printing' the array work?
Remove the table and replace with
<div style='width:45%'>
<?php do{ ?>
<img style='float:left;class='example' src="images/<?php echo $row_getresult['image_name']; ?>.png"/>
<?php } while ($row_getamenityaccommodation = mysql_fetch_assoc($getamenityaccommodation)); ?>
</div>
or for a more semantic version use a ul since you are showing a list of images.
<ul class='gallery'>
<?php do{ ?>
<li><img style='float:left;class='example' src="images/<?php echo $row_getresult['image_name']; ?>.png"/></li>
<?php } while ($row_getamenityaccommodation = mysql_fetch_assoc($getamenityaccommodation)); ?>
</ul>
and in css
ul.gallery {
width: 45%;
list-style: none;
margin:0; padding:0;
}
ul.gallery li {
float:left;
padding: 5px;
}
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
I've been away from programming in general for a long time. Amazing how you forget the simplest things. So I'm trying to warm-up my web design/PHP by making a resume generator.
I made my resume in Word, and I want to try to mimic the document formatting.
I tried doing this with tables, and then I scraped that because it wasn't working exactly like I wanted, and now I'm using divs and spans.
But that's breaking the formatting even more so I don't know what to do...
My main problem is getting spaces to line up precisely the way tabs do in Microsoft Word, on the same line as other things.
Here is the code I'm using
function fieldFill($fieldL, $fieldR = 'NoneAtAll'){
$numOfSpaces = 50;
echo '<div class="left">' . $fieldL . '</div>';
//if ($fieldR != 'NoneAtAll'){
// for($i = 0; $i <= $numOfSpaces - strlen($fieldL); $i++){
// echo ' ';
// //echo $i;
if ($fieldR != 'NoneAtAll'){
for($i = 0; $i <= $numOfSpaces; $i++){
echo ' ';
}
echo '<span class="rightt">' . $fieldR . '</span>';
echo '<br></br>';
}
}
And here is the CSS section
<style>
.rightt {margin: 0 0 0 300px;}
.name { font-size: 22pt;}
.sections {
padding: 15px 0px 0px 0px;
font-size: 12pt;
font-weight: bold;
text-decoration: underline;
}
.years {
font-size: 12pt;
font-weight: bold;
/*white-space:pre*/
}
.jobtits {
font-size: 12pt;
font-weight: bold;
}
</style>
I know there's already good resume generators out there but I'm doing this for the practice. Thanks
Here we go, I want to mimic this format
As of today I'm finding that this code
<div id="page-container">
<div id="leftside">
<div class="name">Name</div>
Address
<br>
City
<br>
State
<div class="sections">Objective</div>
To do good stuff!
<div class="sections">Education</div>
A college
<div class="sections">Awards</div>
Did some good stuff
<div class="sections">Job Experience</div>
<div class="jobtits">Some place</div>
Was an editor
<div class="jobtits">Another place</div>
Did stuff there too.
<div class="sections">Skills</div>
</div>
<div id="rightside">
<div class="name">That's my name</div>
Mobile: 334-223-3244
<br>
Home: 334-223-3244
<br>
Email: Email#me.com
<div class="sections">Filler</div>
Filler
<div class="sections">Filler</div>
2012-1030
<div class="sections">Filler</div>
Filler
<div class="sections">Job Experience</div>
<div class="jobtits">Jul 00 - 32</div>
Filler
<div class="jobtits">Everybody's heard</div>
About the bird.
<div class="sections">Skills</div>
</div>
</div>
is working for the most part, but there are still parts that need to overlap, such as the objective line. I probably need to make a new div/table for that huh? I'm walking through the html static before making it dynamic.
SPAN tag is inline element so margin will not be appled to it, use DIV tag instead.