I have an AJAX application which has used CSS divs to create panels on the screen, which are loaded separately and in succession, depending on what was loaded before it. The bottom "panel" is a table showing a list or records from a database. At the top of the database is the name of the table, and I would like a way to have it be always above the list of records. I am unsure of how to do this, if it is with Javascript, or PHP, or css and html.
edit: I tried wrapping the table header in a div and setting the css for this purpose, but the table header does not seem to be in its own header and does not stay on screen separate from the records.
.tableheader {
position: absolute;
}
and
$table = 'AUCTIONS';
$rows = getRowsByArticleSearch($query, $table);
echo '<div id="tableheader" class="tableheader">';
echo "<h1>{$query} Auctions</h1>" . "\n";
echo "</div>";
Have I missed something fundamental here?
I assume you mean to be able to scroll the table without moving the header?
I think your easiest option is the CSS overflow property.
<style type="text/css">
div#dblist {
overflow: scroll;
height: 400px;
}
</style>
<!-- ... -->
<div>Database Title</div>
<div id="dblist">
<table>
<!-- ... -->
</table>
</div>
#Joshxtothe4: It sounds like you've got scrolling set to the wrong element:
<div> <!-- sounds like you have it set here -->
<div><h1>Query Archive</h1></div>
<div> <!-- and want it set here -->
<table>
<!-- ... -->
</table>
</div>
</div>
You shouldn't need absolute positioning for this.
Do you want the table name to be inside the panel with the table? If so, I think it should be pretty straightforward, but maybe I am missing something.
If you want the table name to be positioned outside the panel it comes from, perhaps you could use the CSS property position: absolute (along with a top and left property) to put it at the top of the page.
Alternatively, you may want to use javascript to re-parent the div. For example, if you create an empty div at the top of the page, where you want the title to go, and give it an id titleParent and put the title in a div with id parent, the following javascript snippet should move the title div from the bottom panel to the top div:
var title = document.getElementById('title');
document.getElementById('titleParent').appendChild(title);
Just put that snippet in a <script> block after the bottom panel.
You will want to use tbody (table body) to contain your data, and set overflow:scroll on that element to get the effect you are looking for.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style type="text/css" media="screen">
table {
margin:0;
padding:0px;
}
tbody {
height:80px;
overflow-x:hidden;
overflow-y:scroll;
margin:0;
padding:0;
}
table td, table th{ padding:2px;}
</style>
</head>
<body>
<table>
<thead>
<tr><th>Header</th><th>Header</th><th>Header</th><th>Header</th></tr>
</thead>
<tbody>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
</tbody>
</table>
</body>
</html>
Related
I am using a basic html structure for my PDF template together with <htmlpagefooter> according to the mPDF docs.
A sample implementation can be found here
<html>
<head>
<style>
.mydiv {
color: red;
}
</style>
</head>
<htmlpagefooter name="myfooter">
Page {PAGENO} of {nb}
</htmlpagefooter>
<sethtmlpagefooter name="myfooter" value="on" />
<body>
<div class="mydiv">
This is my PDF file
</div>
</body>
</html>
When I generate my PDF it will refuse to show the footer on any page. When I put PHP code inside it will throw an appropriate error proving that it is parsed into the mPDF.
Because you are using a <body> tag inside an <html> tag, you have to make sure your footer is included in code that will be rendered on a page.
When you include the footer outside of the body, it will not be shown in the PDF.
When you include the footer inside the body, it will render as expected.
So a succesfull implementation of a footer in mPDF would look like this;
<html>
<head>
<style>
.mydiv {
color: red;
}
</style>
</head>
<body>
<htmlpagefooter name="myfooter">
Page {PAGENO} of {nb}
</htmlpagefooter>
<sethtmlpagefooter name="myfooter" value="on" />
<div class="mydiv">
This is my PDF file
</div>
</body>
</html>
I have a php file called shtype_porosine.php and also an external css file style.css. The php file I use to login to the web site and it has three different div tags. For the first one (div id="container_dyte") the body backgraound color must be white, but for the two others that are included include('include/administrator_index_nsp.php'); and include('include/login_forma.php'); the body color must be black.
I am not sure if a can use the body tag three times in the same php document, if so than the problem is solved (with body class="" i founded in the previous question "how-to-css-if-else-to-change-body-background-color"), but if not than which would be the solution?
Below is the code of the php file shtype_porosine.php
Thank you
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>website</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
session_start();
// this is for an administrator
if(isset($_SESSION['auser'])){
?>
<div id="container_dyte">
<span>Something here...</span>
</div>
<?php
}else{
// these is for a user
if(isset($_SESSION['p_user'])){
include('include/administrator_index_nsp.php');
}else{
// this is the login form to apear if fails the adminstrator and the user
include('include/login_forma.php');
}
}
?>
</body>
</html>
Check if $_SESSION[ 'auser'] is set, if it is, make a body with a white background-color.
Otherwise make a body with a black background-color.
Like this:
<?php
session_start();
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>website</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<?php
if(isset($_SESSION['auser'])){ ?>
<body style='background-color:white'>
<?php } else { ?>
<body style='background-color:black'>
<?php }
if(isset($_SESSION['auser'])){
?>
<div id="container_dyte">
<span>Something here...</span>
</div>
<?php
}else{
// these is for a user
if(isset($_SESSION['p_user'])){
include('include/administrator_index_nsp.php');
}else{
// this is the login form to apear if fails the adminstrator and the user
include('include/login_forma.php');
}
}
?>
</body>
</html>
<body class="<?= isset($_SESSION['auser']) ? 'white' : 'black';?>">
<body style="background-color:<?= isset($_SESSION['auser']) ? 'white' : 'black';?>">
You don't have to change any "body". Just set the background-color css property for each of the div:
<div id="container_dyte" style="background-color:white">
In file include/administrator_index_nsp.php
<div style="background-color:black">
In file include/login_forma.php
<div style="background-color:black">
Easy way:
Give the divs diferent ID names and use CSS.
HTML
<div id="the_id">
CSS
#the_id {
background-color:white;
}
Medium way:
Make a container div with a specyfic ID or CLASS and set up a CSS.
CSS
#container div {
background-color: black;
}
#container:first-child {
background-color: red;
}
#container:last-child {
background-color: white;
}
Hard way:
If you have a css specyfic for this page you can select the div number by style property.
body:nth-child(1) { background-color: black; };
body:nth-child(2) { background-color: red; };
body:nth-child(3) { background-color: white; };
If the css is ment for other pages do not use this answer.
In order to solve this issue, include a custom css, which will apply a required background color to the <body> tag. For example:
if (mode=='mode1')
{
echo "<div id='div1'></div>";
echo "<style type='text/css'> body { background-color:red } </style>";
}
if (mode=='mode2')
{
echo "<div id='div2'></div>";
echo "<style type='text/css'> body { background-color:yellow } </style>";
}
if (mode=='mode3')
{
echo "<div id='div3'></div>";
echo "<style type='text/css'> body { background-color:blue } </style>";
}
So using this logic, you can set the background color of the body, according to the divs showed
the problem is, i know i can center all the three objects in the list correctly using 3 while loops with CSS, but i also know than use 3 whiles loops for something like that is a waste of resources
Also i love if the solution includes order them relative to the "white page" too, which, 3 while loops aproach seems to archieve too
so the question is, how will be the best CSS aproach to do that without the need of call three While loops?
(saving responsiveness)
UPDATE: The thing is, the products, types & Price are all almacenated in a database so to make an easy control and administration of all of them at once, and show them on the list to the people who visit them easier.
The Other stuff, the Styles and the "hidden" is because that divs are the black & white squares, which will actualy be white if there is some of the product remaining, and will be black if's not the case.
The Code related are this ones:
Style.CSS
#TextTitl {
font: 38px/1.1em "Fredericka the Great",fantasy;
color: #5D463E;
}
#stylProdct {
background-color:#fff;
width:75%;
}
.whiteAvbly
{
display:hidden;
background-color:#ffffff;
border: 3px solid #333333;
height:15px;
width:15px;
float:left;
left:12.5%;
position:relative;
}
.blackAvbly
{
display:hidden;
background-color:#380807;
border: 3px solid #333333;
height:15px;
width:15px;
float:left;
left:12.5%;
position:relative;
}
#doscinco {
float:left;
left:25%;
position:relative;
}
#cincuenta {
float:left;
left:50%;
position:relative;
}
#sietecinco {
float:left;
left:75%;
position:relative;
}
verduras.php
<?php
include('conection.php');
echo '<center><section id="stylProdct">';
$Verd = 'Verduras';
$smt = $con->prepare("select * from prodcts WHERE Type = :Verduras Order by PrdName ASC");
$smt->bindParam(':Verduras', $Verd, PDO::PARAM_STR);
$smt->execute();
echo '<br /><br /><H2 id="TextTitl">VERDURAS</H2><br />';
while ($smr = $smt->fetch(PDO::FETCH_ASSOC, PDO::FETCH_ORI_NEXT))
{
$idf = $smr['Availblty'];
$ids = (int) $idf;
echo'<p>';
if($ids > 0)
{
echo '<style>.whiteAvbly{display:show;}</style><div class="whiteAvbly"></div>';
}
else
{
echo '<style>.blackAvbly{display:show;}</style><div class="blackAvbly"></div>';
}
echo '<div id="doscinco">'.nl2br($smr['PrdName']).'</div><div id="cincuenta">'.nl2br($smr['SellType']).'</div><div id="sietecinco">$'.nl2br($smr['Cost']).'</div></p><br />
------------------------------------------------------------------------<br />';
}
echo '</section></center>';
?>
Html
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Clone Dinka</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<link href='http://fonts.googleapis.com/css?family=Chelsea+Market' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jqwdinka.js"></script>
</head>
<body>
<div class="mullet"></div>
<header>
<div id="BigSist"><img id="hermana" src="imago/upper_logo.png"/><p class="white">tel</p><p class="black">(+56 9) 65637350</p></div>
<img id="logoc" src="imago/logo.png"/>
<nav>
<div class="container">
<p class="white" id="Tralala">DESPACHO DIRECTO A TU PUERTA</p>
<span>Haz tu pedido / Cotiza</span>
</div>
<ul id="cont">
<li id="than">INICIO</li>
<li class="menuHead">PRODUCTOS
<ul id="cont">
<li>Verduras</li>
<li>Frutas</li>
<li>Mote con Huesillo</li>
</ul>
</li>
<li>¿COMO COMPRAR?</li>
<li>CONTACTO</li>
</ul>
</nav>
</header>
<!--"http://lorempixel.com/g/470/300"-->
<div id="content"></div>
</body>
</html>
Javascript
$(document).ready(function(){
//initial
$('#content').load('main.php');
$('body').load().css('background-image', 'url(' + 'imago_tesla/fondo0.jpg' + ')');
//handle menu clicks
$('ul#cont li a').click(function(e) {
e.preventDefault()
var page = $(this).attr('href');
$('#content').load(page + '.php');
var pageImages = {
'main': 'imago_tesla/fondo0.jpg',
'verduras': 'imago_tesla/fondo4.jpg',
'Frutas': 'imago_tesla/fondo4.jpg',
'MoteconHuesillo': 'imago_tesla/fondo4.jpg',
'ComoComprar': 'imago_tesla/fondo2.jpg',
'Contacto': 'imago_tesla/fondo.jpg'
}
$('body').css('background-image', 'url(' + pageImages[page] + ')');
});
});
That must be
Please, feel free to ask for clarification, comment, answer, suggest, etc... all the help feedback wherever's the nature of this would be most welcome.
Thanks in advance!
Best use with <table>s, but if must use <div> either you set specific sizes (is not the best option) or, you surround each column in a separate <div> example:
<!-- Column products -->
<div>
<!-- Product lines -->
<div>Product 1</div>
<div>Product 2</div>
<div>Product 3</div>
<div>...</div>
</div>
<!-- Column units -->
<div>
<!-- Product lines -->
<div>kg</div>
<div>l</div>
<div>2/kg</div>
<div>...</div>
</div>
<!-- Column prices -->
<div>
<!-- Product lines -->
<div>800$</div>
<div>200$</div>
<div>342$</div>
<div>...</div>
</div>
And set your formatings to make them inline
As I already said, I suggest using a table, after all this is the type of data tables are meant for.
If changing your markup is not a solution, here's a quick hack, based on the fact that apparently you want every field occupying 25% of the total width. Just change the last part of your CSS to:
#doscinco {
float:left;
left:25%;
width:25%;
position:relative;
}
#cincuenta {
float:left;
width:25%;
}
#sietecinco {
float:left;
width:25%;
}
But there are still other problems in there:
Your HTML will have several tags with the same ID, because you're using IDs in a loop.
You are repeating style definitions that you could put in a separate class and reuse that class to keep your definitions easier to maintain
You're using <center>. It's better to put all style information in your CSS.
Last but not least: display:show is not valid CSS and making those 2 classes hidden hidden just to unhide them is superfluous anyway.
I'm actually working on a PHP project using MVC structure, including DOCTYPE & HEAD tag via a single file during an output buffering using ob°start().
The problem comes when i wanna declare a min-height property for may page container, in order to stick the footer at the bottem of the page. ob_start() -- ob_get_clean() use seems to forbid browsers to access these properties in time so they can't evaluate height value.
This is my index.php file:
<?php
include_once('global/init.php');
ob_start();
if(isset($_GET['module'])){
$module = dirname(__FILE__).'/modules/'.htmlspecialchars($_GET['module']).'/';
$action = (isset($_GET['action'])) ? htmlspecialchars($_GET['action']).'.php' : 'index.php';
if(!file_exists($module.$action)){
include('global/home.php');
}else{
include($module.$action);
}
}else{
include('global/home.php');
}
$content = ob_get_clean();
include_once('global/header.php');
echo $content;
include_once('global/footer.php');
the header.php file contains the doctype, and the first basics of html:
<html>
<head>
<meta charset='UTF-8' />
<title><?php echo "LiveSession".' '.DOMAIN_INFOS;?></title>
<meta name='description' content='<?php echo $_SESSION['currentDesc'];?>' />
<meta name='keywords' content='<?php echo $_SESSION['currentKWds'];?>' />
<link rel='stylesheet' media='screen and (max-width:480px)' href='css/smartphones.css' />
<!-- TABLETS -->
<script type='text/javascript' src='scripts/jquery.1.7.js'></script>
<script type='text/javascript' src='scripts/poll_edit.js'></script>
<script type='text/javascript' src='scripts/smartphones.js'></script>
</head>
<body>
<div id='page'>
<div id='header'>
<h1><a href='index.php'>InteractivePollSession</a></h1>
<?php
if(is_connected_user()){
echo "<span id='disconnector'><a href='index.php?module=members&action=dscnx' title='disconnect'>Disconnect</a></span>";
}
?>
</div>
<div id='contentWrap'>
the footer:
</div>
<div id='footer'>
<span id='central-footer'>© <a href='http://www.jsteitgen.com'>JSTeitgen</a></span>
</div>
</div>
</body>
And a basic css exemple:
body{height:100%;}
#page{min-height:100%; position:relative;}
#footer{position:absolute; bottom:0; width:100%;}
Does any one know how to fix this using ob_start() ?
Of course, every other CSS rules work fine except this ...
Thank's
JS
The ob_start() is not the problem. The problem is only a html/css problem. You can only use a height in percentage if the parent of the element has a fixed height.
In your case, #page parent is body and the body's height is 100%, so you can't use a height in percentage for #page. But you can try this for example :
body{height: 1000px;}
#page{min-height:100%; position:relative;}
#footer{position:absolute; bottom:0; width:100%;}
I think the problem is with the css; you are setting the body element's height to 100% of its parent, the html element, which does not necessarily have a height of 100%.
You should be able to solve your problem using:
html, body {
height: 100%;
}
I created this question before but in another way and got no answers. So today I wrote some simple code to share my problem in a clear way.
I used jQuery to call an image slideshow function.
The AJAX function in show.php will call get.php and print the results in a DIV.
My problem is that sliding (prev - next) inside the DIV supplied by get.php does not work in show.php. But if I call get.php directly in my browser, then it works.
I am confused, I guess I have an error in my div when calling AJAX.
My Files
show.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test </title>
<link rel="stylesheet" type="text/css" href="demo.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="newscript.js"></script>
<link href="themes/2/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/2/js-image-slider.js" type="text/javascript"></script>
<link href="generic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
include("samiloxide.php");
$sql=mysql_query(" select * from section ");
while($r=mysql_fetch_array($sql)){
echo "<li><a onclick='loadpage($r[id])' >$r[section]</a></li>" ;
}
?>
<div id="pageContent"></div>
</body>
</html>
newscript.js
var section;
function loadpage(section){
var section = section.toString();
$.ajax({
type: "POST",
url: "get.php",
dataType: "script",
data: ({section : section}),
success: function(html){
$("#pageContent").empty();
$("#pageContent").append(html);
}
});
}
get.php
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
<!--
#gallery-wrap{margin: 0 auto; overflow: hidden; width: 732px; position: relative;}
#gallery{position: relative; left: 0; top: 0;}
#gallery li{float: left; margin: 0 20px 15px 0;}
#gallery li a img{border: 4px solid #40331b; height: 175px; width: 160px;}
#gallery-controls{margin: 0 auto; width: 732px;}
#gallery-prev{float: left;}
#gallery-next{float: right;}
-->
</style>
<script type="text/javascript">
<!--
$(document).ready(function(){
// Gallery
if(jQuery("#gallery").length){
// Declare variables
var totalImages = jQuery("#gallery > li").length,
imageWidth = jQuery("#gallery > li:first").outerWidth(true),
totalWidth = imageWidth * totalImages,
visibleImages = Math.round(jQuery("#gallery-wrap").width() / imageWidth),
visibleWidth = visibleImages * imageWidth,
stopPosition = (visibleWidth - totalWidth);
jQuery("#gallery").width(totalWidth);
jQuery("#gallery-prev").click(function(){
if(jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")){
jQuery("#gallery").animate({left : "+=" + imageWidth + "px"});
}
return false;
});
jQuery("#gallery-next").click(function(){
if(jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")){
jQuery("#gallery").animate({left : "-=" + imageWidth + "px"});
}
return false;
});
}
});
-->
</script>
<?php
include("samiloxide.php");
//if(!$_POST['page']) die("0");
$section = (int)$_POST['section'];
$sql=mysql_query(" select * from images where section='$section'");
echo "
<div id='gallery-wrap'>
<ul id='gallery'>
";
while($rr=mysql_fetch_array($sql)){
echo " <li><a href='$rr[image]'><img src='$rr[image]' alt='' /></a></li>";
}
echo "
</ul>
</div>
<div id='gallery-controls'>
<a href='#' id='gallery-prev'><img src='images/prev.png' alt='' />next</a>
<a href='#' id='gallery-next'><img src='images/next.png' alt='' />last</a>
</div>
";
?>
This is a bit complicated, and I am unable to provide a quick fix to your code that you could just copy, paste and verify.
In get.php, you load a document with a gallery, and you make it a working gallery from $(document).ready().
But in show.php, when you load the get.php file, $(document).ready() is not called. The $(document).ready() of show.php was already called long before, and your document is now in the interactive state. So when you load the layout, you do not automaticallly execute the code that makes that layout work.
You have to move the $(document).ready() code in your get.php into show.php, and then bind it to the AJAX call completion. Or unbind the code in get.php: just call it from the end of the HTML without wrapping it in $(document).ready().
This is not guaranteed in all browsers all the time, though, because while $(document).ready() is called properly on document being ready, in show.php what you do is you ask to load a HTML file.
And the HTML gets loaded, and so onLoad gets fired. You can't expect different.
Then that HTML asks to load other assets (such as images), but the browser did not know this. It has already fired the onLoad and so you already executed the gallery setup code. If the layout requires the images' SRC to be already loaded in order to style properly, then it will not always work. It might work the second time because the images are in the browser cache. It may work on fast connections and not on slow connections; it may work with small images, quickly loaded, and not with larger images. All these behaviours indicate that images being already loaded is necessary.
Again, a quick and dirty fix is to fire the setup after a suitable delay (but what is suitable? You can't know). Another possibility, if all the images are of known sizes, is to supply those sizes in HTML or CSS. After all, the layout usually requires images being loaded so that they occupy space on the page, but for that, you don't need images to be actually displayable. They might be empty spaces (maybe styled with a background).
A third possibility, more complicated but guaranteed to work in all browsers, is to save the image SRC's into another kind of tag (e.g. DIVs with a class of imageloading, by default hidden), and after the load() success to analyze these tags and convert them to IMGs attaching an onload to them. When all those onloads have fired, you know that it's OK to launch the gallery setup. While longer to describe (and code), this last method is actually much faster than the naive "quick fix: wait a bit and fire setup" one.