This question already has answers here:
Is there ever any reason to use padding-top and padding-bottom for inline elements?
(1 answer)
Padding for Inline Elements
(3 answers)
Closed 4 years ago.
This is my code
ul li{
display:inline;
}
li {
padding: 10px;
border: 1px solid brown;
margin-right: 5px;
position: relative;
background-color: Bisque ;
}
<div class="fr_station">
<span id="route">
<?php
// print_r($route);
$pLine = 0;
$cLine = 0;
echo "<ul>";
foreach ($route as $value) {
$result = mysqli_query($conn,'select station,line,stnCode from stn_name where stnCode='.$value.' LIMIT 1') or die(mysqli_error());
$res = mysqli_fetch_array($result);
echo "<li>".$res['station']."</li>";
//echo str_repeat(" ", 3);
if (!isset($previous)) {
$previous = $source;
$present = $source;
} else {
$current = $value;
$d_result = mysqli_query($conn,'SELECT * FROM alt_station_data WHERE stnCode ='.$previous.' AND nei='.$current.' LIMIT 1');
$d_res = mysqli_fetch_array($d_result);
$tot_dist += $d_res['dis'];
$previous = $value;
echo "</tr>";
$floored = floor($tot_dist);
}
}
echo "</ul>";
echo "</span>";
echo "<br>";
echo "</div>";
When I am printing the elements then the elements from 2nd line is overlapping with the ones on the first line and so on at the end of the line it is printing half content on one line and remaining content on next line.
Try this:
li {
display: inline-block;
}
By using inline each li behaves like a word so doesn’t have it’s own ‘box’. inline-block lets them sit side-by-side but gives each one it’s own ‘box’.
If you need even more control then start looking at flex-box: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout but don’t forget you will need flex-wrap: wrap
On a side note, with your example it would be easier if you just provide the outputted HTML without the php code as that’s not required. :)
Related
I'm a complete beginner in php and I am working on a front end project where I have to create a hangman game based on 12 island names stored in a mysql xampp server . I have to get a random island from the database as an unordered string displayed in my html and guess which island it is . I have no idea how to implement this using php since I am a complete beginner but I have watched tutorials about how to send data from html forms to an sql server with php . I guess this is kinf of the opposite task .
I have written complete html css and js code about displaying my hangman game and I use a simple word to be displayed randomly via javascript and when you fill the spaces a submit button appears .
function hangman(){
var island = "Santorini"; //the given word that is supposed to be found
var t = document.createTextNode(shuffleWord(island))
document.getElementById("hidden-word").appendChild(t);
createSpaces(island);
const inputLists = document.querySelectorAll("input");
document.querySelectorAll("input").forEach(el => {
el.addEventListener('input', evt => {
const showButton = [...inputLists].filter(ip => ip.value.trim() !== '').length === inputLists.length;
document.getElementById('submitbtn').style.display = showButton ? 'block' : 'none';
});
});
}
function shuffleWord (word){
var shuffledWord = '';
word = word.split('');
while (word.length > 0) {
shuffledWord += word.splice(word.length * Math.random() << 0, 1);
}
return shuffledWord;
}
function createSpaces(text){
for(var i=0;i<text.length;i++){
var space = document.createElement("input");
space.setAttribute("class" , "dash");
document.getElementById("hangman-container").appendChild(space);
}
}
.transparent-box{
border:none;
position:absolute;
top:10%;
left:15%;
background-color:black;
height:500px;
width:70%;
opacity: 0.6;
}
.transparent-box p{
color:white;
text-align:center;
}
.transparent-box h1{
color:white;
position: relative;
text-align:center;
font-size:20px;
top:30px;
}
#hangman-container{
position: relative;
width:auto;
top:30%;
left:0%;
background-color: transparent;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.dash{
margin:0;
padding:20px;
align-items: flex-start;
width:4%;
border:none;
border-radius: 5%;
background-color: turquoise;
color:red;
font-size:40px;
}
.dash:focus{
opacity:0.8;
}
#submitbtn{
display: none;
position: absolute;
top:200%;
left:80%;
float:right;
}
<body onload=hangman()>
<div class="transparent-box" id="t-box">
<p>Play here </p>
<h1 id="hidden-word">The word is : </h1>
<form id="hangman-container" method="POST">
<button type="submit" class="hide" id="submitbtn">Submit</button>
</form>
</div>
</body>
The problem is how to use php to get a random island name from my database and display it instead of sending a string via javascript .
I would appreciate your help with this . Thank you in advance .
First create a table:
CREATE TABLE islands(
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL
);
Insert the islands names there (add as many as you wish in place of the ...):
INSERT INTO islands(name) VALUES
("Santorini"),("Tassos"),...;
Now the following SELECT query will fetch one random island name from the DB:
SELECT name
FROM islands
ORDER BY RAND()
LIMIT 1;
In PHP you can execute the query like this:
// replace the words in uppercase with your actual credentials!
$link = #mysqli_connect('localhost','USERNAME','PASSWORD','DBNAME');
if(!$link){
echo 'Error connecting to the DB';
exit;
}
$sql = "SELECT name FROM islands ORDER BY RAND() LIMIT 1";
$result = #mysqli_query($link, $sql);
if(!$result){
echo 'There is an issue with the database';
exit;
}
$row = #mysqli_fetch_assoc($result);
// This will give you the random island name (if they are inserted properly)
echo $row['name']??'No islands are inserted in the database yet';
Now to shuffle it, we can use str_shuffle() function. Finally your code may start to look like this:
<body onload=hangman()>
<div class="transparent-box" id="t-box">
<p>Play here </p>
<h1 id="hidden-word">The word is :
<?php
// replace the words in uppercase with your actual credentials!
$link = #mysqli_connect('localhost','USERNAME','PASSWORD','DBNAME');
if(!$link){
echo 'Error connecting to the DB';
exit;
}
$sql = "SELECT name FROM islands ORDER BY RAND() LIMIT 1";
$result = #mysqli_query($link, $sql);
if(!$result){
echo 'There is an issue with the database';
exit;
}
$row = #mysqli_fetch_assoc($result);
echo str_shuffle($row['name']);
?>
</h1>
<form id="hangman-container" method="POST">
<button type="submit" class="hide" id="submitbtn">Submit</button>
</form>
</div>
</body>
Now you will need to adjust your JavaScript code of course.
I have a dropdown menu geneated by php and javascript. The code is the below one:
<script type="text/javascript">
$(document).ready(function() {
<?php $query = "sp_region_info 0";
$select_region_query = sqlsrv_query($con, $query);
while ($row = sqlsrv_fetch_array($select_region_query)) {
$region_id = $row['region_id'];
$region_name = $row['region_name'];
$result_array[]= $region_name;
}
$json_array = json_encode($result_array);
?>
var country = <?php echo $json_array; ?>;
$("#region").select2({
data: country
});
});
</script>
<div class="input-group col-sm-3 search">
<label class="bd-form-label">Destination</label>
<select id="country"></select>
</div>
It is working properly I can search and use it as dropdown.
I was wonder whats the way to display next to results an icon?
e.g
That's my result: https://i.stack.imgur.com/b2FhA.png
And I need to display my Icon next to Destination title:
https://i.stack.imgur.com/Bq0Z0.png
I tried by adding <i class="fa fa-map-marker"></i> inside my div but doesnt work..
Any thoughts ?
You can't use <i> tag in select option, instead you can use unicode:
while ($row = sqlsrv_fetch_array($select_region_query)) {
$region_id = $row['region_id'];
$region_name = $row['region_name'] . ' ';
$result_array[]= $region_name;
}
and use this css:
.select2-results__option {
font-family: 'FontAwesome', 'Tahoma'
}
Example
OR a simpler solution is using pseudo element:
.select2-results__option::after {
content: "\f041";
font-family: FontAwesome;
}
Example
Add the <i> within your while loop like this:
while ($row = sqlsrv_fetch_array($select_region_query)) {
$region_id = $row['region_id'];
$region_name = $row['region_name'].'';
$result_array[]= $region_name;
}
you can do it just using css, for example:
.select2-results__option:after {
content: '\F041';
font-family: FontAwesome;
font-size: 20px;
color: pink;
}
Thats work for me)
Iam truncating a large field in php. Its all working fine except that iam getting an error on the following line. Iam truncating more than 25 characters with a more hyperlink. When i click the more link, a javascript alert triggers with the actual data.
$length_limit = 25; //limit to this number of characters
$actual_length = strlen($value); //count characters in the $value
$original_text = $value;
$truncated_text = substr($value,0,$length_limit);
if($actual_length <= $length_limit){
$value = $original_text;
} else {
$value = $truncated_text." ... <a onclick='alert(\"'.$original_text.'\")'>more</a>";
Iam getting the error from the last line $value=.... May be some quoatation mark problem. Can someone pls help me with the same.
try this
echo $value = $truncated_text." ... <a onclick=\"alert('".$original_text."')\">more</a>";
You can do it like below (anyone of them):-
echo $value = $truncated_text.' ... <a onclick=\'alert("'.$original_text.'")\'>more</a>';
Or
echo $value = $truncated_text." ... <a onclick=\"alert('".$original_text."')\">more</a>";
Pop-Up Window code:-
<style>
#edit_price_background_overlay {
background: rgba(0, 0, 0, 1) none repeat scroll 0 0;
bottom: 0;
display: none;
overflow-y: auto;
position: fixed;
top: 0;
width: 100%;
z-index: 999999;
}
#mainnew_window {
color: white;
float: left;
margin: 20px;
padding: 100px;
text-align: center;
}
</style>
<div id="edit_price_background_overlay">
<div id="mainnew_window">
</div>
</div>
<?php
$value = 'dhgffdhgfhfhfhghgfhgfhgfhfghfghgfhgfhgfhgfgfhgfhgfhgfhgfhfgrtdyretrertertretgfdvfgvdfgdfbdfgdfbgfnbgbgfhnhhethfgbgfdnggrehgteggbfdvgfdfgergfdgfdrfgrdfgert4gtrhnfgbfdbvcvcbvcbbvcbhrgdghgyfgbfdbgfvfdbtgf';
$length_limit = 25; //limit to this number of characters
$actual_length = strlen($value); //count characters in the $value
$original_text = $value;
$truncated_text = substr($value,0,$length_limit);
if($actual_length <= $length_limit){
echo $value = $original_text;
} else {
echo $value = $truncated_text." ... <a onclick=\"showdata('".$original_text."','mainnew_window','edit_price_background_overlay')\">more</a>";
}
?>
<script>
function showdata(mytext,innerdiv,outerdiv){
var elem = document.getElementById(innerdiv);
var elem2 = document.getElementById(outerdiv);
console.log(elem);
if(typeof elem !== 'undefined' && elem !== null) {
document.getElementById(innerdiv).innerHTML = mytext;
document.getElementById(outerdiv).style.display = 'block';
}
}
</script>
Note:- put this whole code in php file as it is and check.
I'm using php and jquery to print out articles on my webpage. And I want to be able to use show/hide jquery on one article at the time. As it is right now, when I press hide or show all <article> elements in my foreach loop is effected.
HTML and PHP code
<section class='col-md-8'> <!-- Div for content, images etc. -->
<?php
$page = new CMS();
$gp = $page->getPage();
foreach ($gp as $sp) {
//var_dump($sp);
echo "<div id='pub'>";
echo "<h4>" . $sp['title'] . "</h4>";
echo "<article id='pub_art'>" . $sp['content'] . "</article>";
echo "<p>" . $sp['created'] . "</p>";
echo "<p>". $sp['writer'] ."</p>";
echo "<button id='hide'>Hide</button>";
echo "<button id='show'>Show</button>";
echo "</div>";
}
?>
</section>
Jquery code
$(document).ready(function(){
$("#hide").click(function(){
$("article").hide();
});
$("#show").click(function(){
$("article").show();
});
});
CSS
#pub_art {
width: 100%;
height: 100%;
background-color: blue;
display: none;
}
So, first of all, you're using the same id multiple times, changes these to class instead (as id's can only be used once, and classes can be used multiple times). like this:
$output = '';
foreach($gp as $sp){
$output .= "<div class='pub'>";
$output .= "<h4>" . $sp['title'] . "</h4>";
$output .= "<article class='pub_art'>" . $sp['content'] . "</article>";
$output .= "<p>" . $sp['created'] . "</p>";
$output .= "<p>". $sp['writer'] ."</p>";
$output .= "<button class='hide'>Hide</button>";
$output .= "<button class='show'>Show</button>";
$output .= "</div>";
}
echo $output;
As you can see i've concatenated every single echo into one variable and echo it all at once, which is a better aproach (performance wise)
now for the javascript, you're selecting every single article tag, instead of this we're gonna look for the sibling article which is inside the same div as the hide or show class.
$(document).ready(function(){
$(".hide").click(function(){
$(this).siblings('article').hide();
});
$(".show").click(function(){
$(this).siblings('article').show();
});
});
And your CSS (now also with the class selector)
.pub_art {
width: 100%;
height: 100%;
background-color: blue;
display: none;
}
As you are producing invalid markup with php with having same ids for multiple instances of elements, so change the attribute id to class:
<?php
$page = new CMS();
$gp = $page->getPage();
foreach ($gp as $sp) {
//var_dump($sp);
echo "<div class='pub'>"; // <-----here
echo "<h4>" . $sp['title'] . "</h4>";
echo "<article class='pub_art'>" . $sp['content'] . "</article>"; //<---here
echo "<p>" . $sp['created'] . "</p>";
echo "<p>". $sp['writer'] ."</p>";
echo "<button class='hide'>Hide</button>"; // <------here
echo "<button class='show'>Show</button>"; // <------here
echo "</div>";
}
?>
css:
.pub article.pub_art {
width: 100%;
height: 100%;
background-color: blue;
display: none;
}
Now you can use this script to work:
$(document).ready(function(){
$(".hide, .show").click(function(){
$(this).siblings("article").toggle(this.className === 'show');
});
});
The .hide and .show buttons are siblings of the element then you just need to use .siblings() to access the its sibling article as they all are been wrapped inside a div .pub.
You can ask Jquery to hide the first article above the element clicked by doing so :
$(document).ready(function(){
$("#hide").click(function(){
$(this).prev("article").hide();
});
$("#show").click(function(){
$(this).prev("article").show();
});
});
However i suggest you to change your PHP so that it generate unique IDs in order to create valid HTML.
I have a #val container div that stretches to accommodate Javascript content within a div called #cat-container.
cat-container has 4 tabs above it and are numbered 1 - 4, so if you click 1, it will load content from a php array, and similar for tabs 2 -3.
When you click on each tab, #val-container successfully stretches to the correct height, however I have set tab 1 and its content to display by default as the page loads. The problem is that the content from all the other tabs gets loaded into tab 1 onpage load.
<script type="text/javascript">
var i=1;
var tab;
document.getElementById('cat-container').style.position='relative';
document.getElementById('val-container').style.height='auto';
while(tab=document.getElementById('option'+i+'-body'))
{
tab.style.position='absolute';
tab.style.top='0';
tab.style.left='0';
i++;
}
var urllocation = location.href; //find url parameter
if(urllocation.indexOf("#") == -1)
{
displayTab(1);
}
else
{
if(urllocation.indexOf("#option1")>-1)displayTab(1);
else if(urllocation.indexOf("#option2")>-1)displayTab(2);
else if(urllocation.indexOf("#option3")>-1)displayTab(3);
else if(urllocation.indexOf("#option4")>-1)displayTab(4);
else displayTab(1);
}
</script>
Essentially I would like tab 1 to just show just its content on page load.
This line is the issue:
document.getElementById('val-container').style.height='auto';
So if the dispalyTab(1), just show its content!
The code that actually displays the tabs:
<script type="text/javascript">
function displayTab(num)
{
var tab,x;
x=1;
while(tab=document.getElementById('option'+x+'-body'))
{
if(num!=x)tab.style.display='none';
else tab.style.display='inherit';
x++;
}
}
</script>
<div class="category-tab" id="aoption1">Tab1</div>
<div class="category-tab" id="aoption2">Tab2</div>
<div class="category-tab" id="aoption3">Tab3</div>
<div class="category-tab" id="aoption4">Tab4</div>
<br><br>
Here is the PHP/HTML:
I have used tab 1 - 4 to simplify things but in actual fact they represent price ranges:
echo "<div id=\"cat-container\">";
echo '<div id=\"val-contain\">';
$cats=array(0,1000,5000,10000,100000);
for($ci=1;$ci<count($cats);$ci++)
{
if($ci==4)echo "<div class=\"category-body\" id=\"option".$ci."-body\"><a name=\"option".$ci."\"><h3>Gifts for over £100!</h3></a>";
else echo "<div class=\"category-body\" id=\"option".$ci."-body\"><a name=\"option".$ci."\"><h3>Gifts for under ".fixedToFloatCurrency($cats[$ci])."!</h3></a>";
$i=0;
for ($p = 0; $p < count($game); $p++ )
{
$game[$p]->getProduct();
if($game[$p]->price<$cats[$ci] && $game[$p]->price>=$cats[$ci-1])
{
if (($i % 3) == 0 )
{
if($i)echo "</tr></table>";
echo "<table id=\"newarrivals\" style=\"padding-top:5px;\"><tr>";
}
echo "<td>";
$game[$p]->getLink();
echo $game[$p]->link;
echo "<h2 class=\"section-tab-game2\">".$game[$p]->name."</h2>";
echo "<div class=\"container\" style=\"text-align:center;\"><div class=\"image-spacer\">";
echo $game[$p]->getImage();
echo $game[$p]->image;
echo "</div>";
echo "<div class=\"specialprice\" >";
if(!is_numeric($game[$p]->price)){
echo $game[$p]->price;
}
else
{
if($game[$p]->price < $game[$p]->maxprice)
{echo "From only: £".fixedtofloat($game[$p]->price);}
else
{echo "Only: £".fixedtofloat($game[$p]->price);}
}
echo "</div></div></a>";
echo "</td>";
$i++;
}
}
echo "</tr></table></div>";
}
echo "</div>";
echo '</div>';
?>
CSS:
#val-contain { }
#cat-container { }
.category-tab { width:125px;border:2px solid white; height: 50px; background:url('images/design- gac/valentines-navigation.png')0 0 no-repeat;float:left; text-align:center; font-family:Arial,sans-serif;font-size:12pt;font-weight:bold; color:white; padding-top: 7px;}
.category-tab a { color:white; }
.category-tab a:hover { color:#white; }
.category-body { width:515px; border:1px solid #3c2130; height: auto; overflow:hidden; background:url('images/design-gac/valentines-navigation-back.png')0 0 repeat-x;}
.category-body h3 { font-size:27pt; text-align:center; color: #ffffff; font-family: Arial,sans- serif;}
.container { background-color:white; }
.imgpad { margin-bottom: 10px; }
.vallinks {color: #c50f07; font-weight: bold; }
Hope someone can help?
Volterony
This is a pure html/inline css solution with one static tab.
<body>
<style>
html{
height: 100%;
}
body {
min-height: 100%;
}
</style>
<div style="max-height: 5%;min-height: 5%; background-color: #d9edf7;display: block">
<div class="category-tab" style="float: left" id="aoption1"><a href="#option1" onclick="displayTab(1);
return false;">Tab1</a></div>
<div class="category-tab" style="float: left" id="aoption2"><a href="#option2" onclick="displayTab(2);
return false;">Tab2</a></div>
<div class="category-tab" style="float: left" id="aoption3"><a href="#option3" onclick="displayTab(3);
return false;">Tab3</a></div>
<div class="category-tab" style="float: left" id="aoption4"><a href="#option4" onclick="displayTab(4);
return false;">Tab4</a></div>
</div>
<div style="max-height: 95%;min-height: 95%; background-color: red;display: block">
Tab 1 content
</div>
</body>
you used 'val-contain' as your div's id
echo '<div id=\"val-contain\">';
but you are trying to change it with
document.getElementById('val-container').style.height='auto';
change the div's id to val-container.