I have my result in Windows PC like this:
pic, and everything is fine.
My piece of css code is like this:
.colkiri{
display: table-cell;
border-left: 1px solid #FEBA0E; /*orange*/
min-width: 20px;
}
But, if i open it in my IPAD 2, it looks like this: pic. It's like the border-left none, not solid anymore, whereas i don't change anything in my code. Why?
My fully css (admintree.css):
#boxpost{
height: auto;
border-bottom: 1px dotted #FEBA0E; /*orange*/
}
#commentleftside{
margin-left:10
}
#bigbox{
width: auto;
display: table;
}
.nomorver{
color: #369; /*biru gelap*/
font-size: 80%;
font-weight: bold;
font-family: verdana; /*nempel tulisannya*/
word-spacing: 15px;
display: table-cell;
vertical-align:middle;
width: 40px;
}
.colkiri{
display: table-cell;
border-left: 1px none #FEBA0E; /*orange*/
min-width: 20px;
}
.colkanan{
display: table-cell;
}
.colkananchild{
border-left: 1px solid #FEBA0E; /*orange*/
float: left;
}
#username{
white-space:nowrap;
padding-top: 0px;
}
#username:before{
content:" \00a0\00a0\00a0\00a0\00a";
text-decoration:line-through;
color: #FEBA0E;
}
.usernamechild{
color: #369; /*biru gelap*/
font-size: 80%;
font-weight: bold;
font-family: verdana; /*nempel tulisannya*/
word-spacing: 15px;
}
.usernamechild a {
color: #369; /*biru gelap*/
text-decoration: none;
}
.usernamechild a:hover {
color: #369; /*biru gelap*/
text-decoration: underline;
mouse: pointer;
}
.note{
color: #888;
font-size: x-small;
font: normal x-small verdana,arial,helvetica,sans-serif;
}
.joinunder{
color: #FFFF00;
font-size: x-small;
font: normal x-small verdana,arial,helvetica,sans-serif;
background-color: red;
padding-left: 5px;
padding-right: 5px;
border-radius: 25px;
}
.joinunder a {
color: #FFFF00; /*biru gelap*/
text-decoration: none;
}
.joinunder a:hover {
color: #FFFF00; /*biru gelap*/
text-decoration: underline;
mouse: pointer;
}
and my fully HTML:
<?php
include('sbmcon.php');
include('logincheckadmin.php');
?>
<html>
<head>
<title>Admin Tree</title>
<link rel="shortcut icon" href="/img/sbmico.ico">
<link rel='stylesheet' type='text/css' href='/css/admintree.css'>
<style>
.umpetin{
margin-left:50px;
}
</style>
<style>
.borderred{
border:2px solid red;
padding-left: 2px;
padding-right: 2px;
}
.bordergreen{
border:2px solid green;
padding-left: 2px;
padding-right: 2px;
}
</style>
<script type="text/javascript">
function pujoinunder(pageURL, title, w, h) {
var left = (screen.width - w) / 2;
var top = (screen.height - h) / 2; // for 25% - devide by 4 | for 33% - devide by 3
var targetWin = window.open(pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
}
function pudelrec(pageURL, title, w, h) {
var left = (screen.width - w) / 2;
var top = (screen.height - h) / 2; // for 25% - devide by 4 | for 33% - devide by 3
var targetWin = window.open(pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.min.js"></script>
</head>
<body ng-app="ctrljs">
<?php
$page=isset($_REQUEST['page'])?$_REQUEST['page']:null;
$ssloginadmin=$_SESSION['ssloginadmin'];
$qitungitung=mysql_query("SELECT a.cv AS CountVer, a.mv AS MaxVer, a.cv-a.mv AS selisih FROM
(SELECT COUNT(ver) AS cv, MAX(ver) AS mv FROM t_un WHERE upgrade='1') a");
$fitungitung=mysql_fetch_object($qitungitung);
if($fitungitung->selisih<>0){
$msgitungitung="<span class='borderred'><font color='red'><strong>pohon rusak (please press fixver and fixtcount)</font></span>";
}else{
$msgitungitung="<span class='bordergreen'><font color='green'><strong>pohon bagus</strong></font></span>";
}
echo "
<a href='?page=fixver' style='text-decoration: none' ><input type='button' value='fix ver'></input></a>
<a href='?page=fixtcount' style='text-decoration: none' ><input type='button' value='fix tcount'></input></a>
<button type='button' onclick=\"javascript:putreeadd('treeadd.php?start=yes','test',400,250)\">add</button>
<button type='button' onclick=\"javascript:pudelrec('admintreedelrec.php?page=form','test',400,250)\"><font color='red'>Delete Multiple Record</font></button>
<a href='treefilter.php?start=yes' style='text-decoration: none' target='_blank'><input type='button' value='filter'></input></a>
<br>
CountVer=$fitungitung->CountVer, MaxVer=$fitungitung->MaxVer, Selisih=$fitungitung->selisih, berarti=$msgitungitung
";
//executed
$q=mysql_query("SELECT ai,ver,hor,t,username,namealias,city,sponsor,upline,sponsorcount,sponsorcounttree,t1name,t2name,t1count,t2count,email,mlmid,hp,bb,ve,status,upgrade FROM t_un WHERE upgrade='1' ORDER BY ver,t");
while($f=mysql_fetch_object($q)){
echo "
<div id='bigbox'><span class='nomorver' nowrap>$f->ver.</span>
";
for($a=1;$a<=$f->hor-1;$a++){
echo "
<div class='colkiri'></div>
";
}
echo "
<div class='colkanan'>
<div class='colkananchild'>
<div id='username'>
<span class='usernamechild'>$f->username</span>
";
if($f->t1count==0 || $f->t2count==0){
echo "<span class='joinunder'>join under</span> ";
}
if($f->t1count==0 && $f->t2count==0){
echo "<span class='joinunder'>x</span> ";
}
echo "
<span class='note'>hor=$f->hor, t=$f->t, email=$f->email, ".($f->mlmid=="none"?"<span class='joinunder'>IDC2G=$f->mlmid</span>":"IDC2G=$f->mlmid").", <font color='red'>sponsor=</font>$f->sponsor, <font color='blue'>upline=</font>$f->upline, t1name=$f->t1name, t2name=$f->t2name, <font color='red'>sponsorcount=</font>$f->sponsorcount, <font color='red'>sponsorcounttree=</font>$f->sponsorcounttree, t1count=$f->t1count, t2count=$f->t2count, <font color='red'>ve=</font>$f->ve, <font color='red'>upgrade=</font>$f->upgrade
<!--
<div class='umpetin' id='formjoin$f->ver' style='display:none;'>
<iframe style='border: 1px solid #FEBA0E; padding: 5px' src='admintreeupgrade.php?page=form&un=$f->username' width='400px' height='205px'></iframe>
</div>
-->
</div>
</div>
</div>
</div>
";
}
echo "
</div>
";
if($page=='fixver'){
fixver();
}
if($page=='fixtcount'){
fixtcount();
}
if($page=='delrec'){
$un=isset($_REQUEST['un'])?$_REQUEST['un']:null;
mysql_query("DELETE FROM t_un WHERE username='$un'");
fixver();
fixtcount();
echo "<script type='text/javascript'>window.location='admintree.php'</script>";
}
$submit=isset($_REQUEST['submit'])?$_REQUEST['submit']:null;
if($submit=='yes'){
$cl=isset($_REQUEST['cl'])?$_REQUEST['cl']:null;
$arrayid = implode(', ',$cl);
mysql_query("UPDATE t_un SET mw='1' WHERE ai IN(".$arrayid.")");
echo "<script type='text/javascript'>window.location='admintree.php'</script>";
}
$signout=isset($_REQUEST['signout'])?$_REQUEST['signout']:null;
if($signout=='yes'){
unset($_SESSION['ssloginadmin']);
unset($ssloginadmin);
echo "<script type='text/javascript'>window.location = 'http://sbm.website'</script>";
}
function fixver(){
//blocking, jika sedang ada proses
$q6=mysql_query("SELECT status FROM t_process");
$f6=mysql_fetch_object($q6);
if($f6->status=='yes'){
echo "
<center>
<div class='alert alert-danger'>
<h3><span class='glyphicon glyphicon-remove'></span> Wait....</h3>
Someone is processing , try again in a few second, thank you.
</div>
<button type='button' onclick=\"history.back();\" class='btn btn-danger'>back</button>
</center>
";
exit;
}
//start
mysql_query("UPDATE t_process SET status='yes'");
$n=0;
$q2=mysql_query("SELECT ver,username FROM t_un WHERE upgrade='1' ORDER BY ver");
while($f2=mysql_fetch_object($q2)){
$count++;
mysql_query("UPDATE t_un SET ver='$count' WHERE username='$f2->username'");
}
//finish
mysql_query("UPDATE t_process SET status='no'");
echo "<script language=javascript> alert('Fix Ver done')</script>";
echo "<script type='text/javascript'>window.location='admintree.php'</script>";
//echo "fixver ready";
}
function fixtcount(){
mysql_query("UPDATE t_process SET status='1'");
mysql_query("UPDATE t_un SET t1count='0',t2count='0',t1name=null,t2name=null");
$q2=mysql_query("SELECT username FROM t_un WHERE upgrade='1' ORDER BY ver DESC");
while($f2=mysql_fetch_object($q2)){
$simpanupline=$f2->username;
do {
//penghitungan upline nomor 2 dan seterusnya keatas
$simpanupline2=$simpanupline;
$q=mysql_query("SELECT upline,t FROM t_un WHERE username='$simpanupline2'");
$f=mysql_fetch_object($q);
$simpanupline=trim($f->upline);
$simpanT=$f->t;
mysql_query("UPDATE t_un SET t$simpanT".'count'."=t$simpanT".'count'."+1, t$simpanT".'name'."='$simpanupline2' WHERE username='$simpanupline'");
} while($simpanupline2<>'sbm');
}
mysql_query("UPDATE t_process SET status='0'");
echo "<script language=javascript> alert('Fix Tcount done')</script>";
echo "<script type='text/javascript'>window.location='admintree.php'</script>";
//echo "fixtcount ready";
}
?>
<script>
$('.joinunder').click(function(){
var divToToggle = $($(this).find('a').attr('href'));
divToToggle.slideToggle('slow');
$('.umpetin:visible').not(divToToggle).hide('slow');
});
</script>
</body>
</html>
Related
I have done this right now with html/css only. But problem is I have used position - relative for outer bar and position absolute for inner item's placement. But as the text gets big/small the positioning isnt center (text below or above charts)
And if I dont use position on elements, the texts below graph floats on top or above that. Also the amount showing up just above chart goes in straight line.
<div class="bar-container">
<div class="fl width-100 r">
<div class="donut-bg width-100 fl mr-c">
<div class="bar" ng-repeat="d in barData track by $index" style="margin: 0 {{chartData.marginRight}}%">
<div class="bar-value" style="bottom: {{+d.perc+20}}%">{{d.value}}K</div>
<div class="bar-chart" style="height: {{d.perc}}%;"></div>
<div class="bar-name c">d.text</div>
</div>
</div>
</div>
</div>
barData = [{"value":33,"text":"AU","perc":"35.36","padPerc":"39.64"},{"value":0,"text":"BD","perc":"0.00","padPerc":"75.00"},{"value":0,"text":"DB","perc":"0.00","padPerc":"75.00"},{"value":11,"text":"ED","perc":"11.79","padPerc":"63.21"},{"value":70,"text":"EI","perc":"75.00","padPerc":"0.00"}]
I have done something like this with HTML, CSS and PHP in the past - maybe this gives you an idea:
diagram.css
#diagram
{
position: relative;
padding: 0;
border: 1px solid #000;
font-family: verdana;
background: #fff;
}
#diagram div.title
{
padding: 0;
position: relative;
font: 12px;
font-weight: bold;
text-align: center;
line-height: 15px;
top: 5px;
}
#diagram div.axis
{
padding: 0;
position: absolute;
top: 50px;
left: 50px;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
#diagram div.xunit
{
padding: 0;
position: absolute;
font-size: 8px;
text-align: center;
left: 50px;
// border: 1px solid black;
}
#diagram div.yunit
{
padding: 0;
position: absolute;
top: 25px;
left: 25px;
font-size: 8px;
text-align: left;
// border: 1px solid black;
}
#diagram div.xlabels
{
padding: 0;
position: absolute;
left: 50px;
height: 25px;
line-height: 25px;
// border: 1px solid #000;
}
#diagram div.xlabel
{
position: absolute;
left: 0;
height: 25px;
padding: 0;
font-size: 8px;
color: #c00;
// border: 1px solid #000;
}
#diagram div.ylabels
{
padding: 0;
position: absolute;
top: 50px;
left: 25px;
width: 25px;
// line-height: 25px;
// border: 1px solid #000;
}
#diagram div.ylabel
{
position: absolute;
left: 0;
width: 25px;
padding: 0;
font-size: 8px;
color: #c00;
// border: 1px solid #000;
}
#diagram div.bar
{
position: absolute;
text-align: right;
font-size: 10px;
color: #fff;
font-weight: bold;
border: 1px solid #000;
padding: 0px 0 0 0;
background: #c00;
}
diagram1.thtml
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="diagram.css">
</head>
<body>
<div id="diagram" style="width: {DIAGRAMWIDTH}px; height: {DIAGRAMHEIGHT}px;">
<div class="title">{DIAGRAMTITLE}
<form id="diagramform" action="/diagram1.php" method="get">
<input type="text" id ="startcell" name="startcell" value="{DIAGRAMSTARTCELL}" /> - <input type="text" id ="endcell" name="endcell" value="{DIAGRAMENDCELL}" />
<!-- <button type="button" onclick=""><</button> --> <input type="text" id ="date" name="date" value="{DIAGRAMDATE}" /> <button type="button" onclick="var formdate = document.getElementById('date'); var nextdate = new Date(formdate.value); nextdate.setTime(nextdate.getTime() + 1000); formdate.value = nextdate.getFullYear() + '-' + (nextdate.getMonth() + 1) + '-' + nextdate.getDate() + ' ' + nextdate.getHours() + ':' + nextdate.getMinutes() + ':' + nextdate.getSeconds(); document.getElementById('diagramform').submit();">></button>
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1" />
</form>
</div>
<div class="axis" style="width: {AXISWIDTH}px; height: {AXISHEIGHT}px;">
<div class="bar">
<!-- BEGIN XBAR_POS -->
<div class="bar" style="width: {XBAR_WIDTH}px; left: {XBAR_LEFT}px; top: {XBAR_TOP}px; height: {XBAR_HEIGHT}px;"></div>
<!-- END XBAR_POS -->
</div>
</div>
<div class="xunit" style="top: {XLABEL_TOP}px; width: {XLABEL_WIDTH}px;">{XLABEL}</div>
<div class="yunit" style="height: {YLABEL_HEIGHT}px;">{YLABEL}</div>
<div class="xlabels" style="top: {XLABELS_TOP}px; width: {XLABELS_WIDTH}px;">
<!-- BEGIN XLABEL_POS -->
<div class="xlabel" style="left: {XLABEL_VALUE_LEFT}px;">{XLABEL_VALUE}</div>
<!-- END XLABEL_POS -->
</div>
<div class="ylabels" style="height: {YLABELS_HEIGHT}px;">
<!-- BEGIN YLABEL_POS -->
<div class="ylabel" style="top: {YLABEL_VALUE_TOP}px;">{YLABEL_VALUE}</div>
<!-- END YLABEL_POS -->
</div>
</div>
<hr />
Zellenübersicht | Zeitübersicht | Datenübermittlung
</body>
</html>
diagram1.php
<?php
require_once('HTML/Template/PHPLIB.php');
require_once('config.php');
$diagramdate = htmlspecialchars(#$_GET["date"]);
if (empty($diagramdate))
{
$diagramdate = date("Y-m-d");
}
$lasttimestamp = $diagramdate;
$diagramstartcell = htmlspecialchars(#$_GET["startcell"]);
if (empty($diagramstartcell))
{
$diagramstartcell = 1;
}
$diagramendcell = htmlspecialchars(#$_GET["endcell"]);
if (empty($diagramendcell))
{
$diagramendcell = 12;
}
$diagramwidth = 1000;
$diagramheight = 500;
$diagramtitle = 'Zellenübersicht';
$xlabels = array();
$mysqli = mysqli_connect($dbhost, $dbuser, $dbpasswd, $dbschema);
if ($mysqli->connect_errno)
{
printf("Connect failed: %s\n", $mysqli->connect_error);
exit();
}
$res = mysqli_query($mysqli, "select cell_id, cv_volt, cv_time from cell_voltages where cell_id >= " . $diagramstartcell . " and cell_id <= " . $diagramendcell . " and cv_time >= '" . $diagramdate . "' order by cv_time, cell_id"); // TODO prevent sql injection, use prepared statement
if ($res)
{
while ($row = $res->fetch_assoc())
{
if (isset($xlabels[$row['cell_id']]))
{
break;
}
$xlabels[$row['cell_id']] = $row['cv_volt'];
$lasttimestamp = $row['cv_time'];
}
$res->free();
}
$mysqli->close();
$ylabels = array(4.2, 4.0, 3.5, 3.0, 2.5, 2.0, 1.7);
// ----------
$axiswidth = $diagramwidth - 100;
$axisheight = $diagramheight - 100;
$xlabel_top = $diagramheight - 25;
$xlabel_width = $axiswidth;
$xlabel = 'Zellen';
$xlabels_top = $diagramheight - 50;
$xlabels_width = $axiswidth;
$ylabel_height = $axisheight + 25;
$ylabel = 'V';
$ylabels_height = $axisheight;
header('Content-Type: text/html; charset=utf-8');
$t = new HTML_Template_PHPLIB(dirname(__FILE__), 'keep');
$t->setFile('diagram', 'diagram1.thtml');
$t->setVar('DIAGRAMWIDTH', $diagramwidth);
$t->setVar('DIAGRAMHEIGHT', $diagramheight);
$t->setVar('DIAGRAMTITLE', $diagramtitle);
$t->setVar('DIAGRAMDATE', $lasttimestamp);
$t->setVar('DIAGRAMSTARTCELL', $diagramstartcell);
$t->setVar('DIAGRAMENDCELL', $diagramendcell);
$t->setVar('AXISWIDTH', $axiswidth);
$t->setVar('AXISHEIGHT', $axisheight);
$t->setVar('XLABEL_TOP', $xlabel_top);
$t->setVar('XLABEL_WIDTH', $xlabel_width);
$t->setVar('XLABEL', $xlabel);
$t->setVar('XLABELS_TOP', $xlabels_top);
$t->setVar('XLABELS_WIDTH', $xlabels_width);
$t->setVar('YLABEL_HEIGHT', $ylabel_height);
$t->setVar('YLABEL', $ylabel);
$t->setVar('YLABELS_HEIGHT', $ylabels_height);
$t->setBlock('diagram', 'XLABEL_POS', 'XLABEL_POS_ref');
if (count($xlabels) > 0)
{
$xpixelscale = $axiswidth / count($xlabels);
}
else
{
$xpixelscale = 1;
}
$i = 0;
foreach($xlabels as $xkey => $xvalue)
{
$t->setVar('XLABEL_VALUE', $xkey);
$t->setVar('XLABEL_VALUE_LEFT', ($xpixelscale * $i++) + ($xpixelscale / 2));
$t->parse('XLABEL_POS_ref', 'XLABEL_POS', true);
}
if ($i == 0)
{
$t->setVar('XLABEL_VALUE', '');
$t->setVar('XLABEL_VALUE_LEFT', 0);
$t->parse('XLABEL_POS_ref', 'XLABEL_POS', false);
}
$t->setBlock('diagram', 'YLABEL_POS', 'YLABEL_POS_ref');
$topvalue = reset($ylabels);
$bottomvalue = end($ylabels);
$ypixelscale = $axisheight / ($topvalue - $bottomvalue);
foreach($ylabels as $yvalue)
{
$t->setVar('YLABEL_VALUE', $yvalue);
$t->setVar('YLABEL_VALUE_TOP', $axisheight - (($yvalue - $bottomvalue) * $ypixelscale));
$t->parse('YLABEL_POS_ref', 'YLABEL_POS', true);
}
$t->setBlock('diagram', 'XBAR_POS', 'XBAR_POS_ref');
$i = 0;
foreach($xlabels as $xkey => $xvalue)
{
if ($xvalue - $bottomvalue >= 0)
{
$t->setVar('XBAR_WIDTH', $xpixelscale / 2);
$t->setVar('XBAR_LEFT', ($xpixelscale * $i) + ($xpixelscale / 4));
$t->setVar('XBAR_HEIGHT', ($xvalue - $bottomvalue) * $ypixelscale);
$t->setVar('XBAR_TOP', $axisheight - (($xvalue - $bottomvalue) * $ypixelscale));
$t->parse('XBAR_POS_ref', 'XBAR_POS', true);
}
++$i;
}
if ($i == 0)
{
$t->setVar('XBAR_WIDTH', '0');
$t->setVar('XBAR_LEFT', '0');
$t->setVar('XBAR_HEIGHT', '0');
$t->setVar('XBAR_TOP', '0');
$t->parse('XBAR_POS_ref', 'XBAR_POS', false);
}
echo $t->finish($t->parse('OUT', 'diagram'));
?>
The config.php has been left out, the TemplateEngine is the Pear version from PHPLib. Sorry no time to create a screenshot.
I'm trying to get the above table to be displayed in between the header and footer, although it is displaying under the footer and I can't work out why? any help appreciated as always..
Screenshot!
The code for the page is as follows:
<header>
<h1>PRODUCT MANAGEMENT</a></h1>
<h2>By Bradley Boothman</a></h2>
</header>
</div>
<nav>
<ul class="inline-list-custom">
<li><a href="homepage.php" >Home</a></li>
<li><a href="add.php" >Add</a></li>
<li><a href="edit.php" >Edit</a></li>
<li><a href="delete.php" >Delete</a></li>
<li><a href="productlist.php" class="current" >List</a></li>
<li><a href="search.php" >Search</a></li>
</ul>
</nav>
</div>
</div>
</head>
<div align="center">
<?
if (!mysql_connect($db_host, $db_user, $db_pwd))
die("Can't connect to database");
if (!mysql_select_db($database))
die("Can't select database");
$result = mysql_query("SELECT * FROM {$table}");
if (!$result)
{
die("Query to show fields from table failed");
}
$fields_num = mysql_num_fields($result);
echo "<table border='0'><tr>";
for ($i = 0; $i < $fields_num; $i++)
{
$field = mysql_fetch_field($result);
echo "<th>{$field->name}<br></th>";
}
echo "</th>\n";
while ($row = mysql_fetch_row($result))
{
echo "<tr>";
echo "<tr>";
foreach ($row as $cell)
echo "<td><br>$cell</td>";
echo "</tr>\n";
}
mysql_free_result($result);
?>
<html>
<style>
table {
overflow:auto;
border-collapse: collapse;
width: 30%;
overflow-x: hidden;
height: 50%;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
width: -webkit-fit-content;
overflow-y: scroll;
flex: 1;
-webkit-flex: 1;
}
th, td {
text-align: center;
padding: 10px;
font-weight: normal;
}
tr:nth-child(even){background-color: #f2f2f2}
th
{
background-color: #808080;
color: #faf8f7;
font-weight: normal;
}
</style>
</form>
<footer>
<ul>
<li>© 2016 Bradley Boothman. All rights reserved.</li>
<li></i> bradleyboothman#gmail.com</li>
</ul>
</footer>
</div>
</div>
<script src="js/vendor/jquery.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/hawthorne.js"></script>
</body>
</html>
</footer>
I am a beginner, and I'm trying to display a div up to my radio button. I explain the problem inside my code. The autocomplete box displays after the ajax call.
<input type="text" name="search" id="search" autofocus autocomplete="off" />
<input type="submit" id="search_button" title="Check" value="Check"/>
//the suggesstion div move radio button to the right I need it up of the radio buttons !
<div id="suggesstion-box"></div>
<label>Search by :</label>
<input id="radio" name="radio" value="name" type="radio"/>
<span id="radio_text"> name</span>
<input id="radio" name="radio" value="age" type="radio">
<span id="radio_text"/>age</span>
ajax.js to fetch data
$(document).ready(function(){
$("#search").keyup(function(){
if ($("#search").val() == "")
$("#suggesstion-box").hide();
else{
$.ajax({
type: "GET",
url: "getinfo.php",
data:'keyword='+$(this).val(),
success: function(data){
console.log(data);
$("#suggesstion-box").show();
document.getElementById("suggesstion-box").innerHTML=data;
//$("#suggesstion-box").html("data");
$("#search").css("background","#FFF");
}
});
}//else box not empty
});
console.log("print it");
});
function select(val) {
$("#search").val(val);
$("#suggesstion-box").hide();
}
getinfo.php to print data to suggestion box
<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
//include('database.php');
//Sanitize the POST values
$hint = $_GET['keyword'];
$i = 0;
$qry1 = "SELECT * FROM Journals where Journal_name like '" . $hint . "%' AND is_reported=1 LIMIT 3 ";
$qry2 = "SELECT * FROM Publishers where Publisher_Name like '" . $hint . "%' AND is_reported=1 LIMIT 2;";
//$result = mysql_query($qry1);
//$result2 = mysql_query($qry2);
$data = array();
$result2 = $db_handle->runQuery($qry2);
$result1 = $db_handle->runQuery($qry1);
if (!empty($result2)) {
?>
<ul id="country-list">
<?php
foreach ($result2 as $info2) {
?>
<li onClick="select('<?php echo $info2['Publisher_Name']; ?>');"><?php echo $info2['Publisher_Name']; ?></li>
<?php
} if (empty($result1)){
?>
</ul>
<?php } }
if (!empty($result1)) {
if (empty($result2)){
?>
<ul id="country-list">
<?php
}
foreach ($result1 as $info) {
?>
<li onClick="select('<?php echo $info['Journal_name']; ?>');"><?php echo $info['Journal_name']; ?></li>
<?php } ?>
</ul>
<?php
}
?>
s.css
#country-list{float:left;list-style:none;margin:0;padding:0;width:210px; display: inline;}
#country-list li{padding: 10px; background:#FAFAFA;border-bottom:#F0F0F0 1px solid;}
#country-list li:hover{background:#F0F0F0;}
#search {
width: 300px;
height: 10px;
border: thin solid #00B6A8;
margin-top: 10px;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
border-collapse: collapse;
-webkit-box-shadow: 0px 0px 2px;
box-shadow: 0px 0px 2px;
padding: 10px;
display: inline;
//border: #F0F0F0 1px solid;
}
#suggesstion-box {
display: inline;
}
#radio {
margin-top: 10px;
margin-left: 30px;
}
#radio_text {
color: #545454;
font-size: normal;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-style: normal;
font-weight: normal;
}
#label {
/*margin-left: -210px;*/
color: #00B6A8;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-weight: normal;
font-size: medium;
}
Try:
<div id="suggesstion-box"></div>
<div class="wrapper">
<label>Search by :</label>
<input id="radio" name="radio" value="name" type="radio"/>
<span id="radio_text"> name</span>
<input id="radio" name="radio" value="age" type="radio">
<span id="radio_text"/>age</span>
</div>
In the css:
.wrapper {
position: absolute;
}
I keep on searching about this but i didn't find an answer..
I want to print my website page, so i used the margin-top and margin-bottom but it only affected the first sheet.. In the second page, there is no margin on top.. is there a way to do this..
Here is the sample image i am talking about.
Here is the code that I am using. Please help.
<style type="text/css">
.printOnly {
margin-top: 75px;
display: none;
page-break-inside: avoid;
}
.textSummaryTable { page-break-inside:avoid;}
.textSummaryTable tr { page-break-inside:avoid; page-break-after:auto }
#media print {
.summaryTable { page-break-inside: avoid; }
.summaryTable tr:nth-child(odd){ background-color:#E1E4E5; }
.summaryTable tr:nth-child(even) { background-color:#ffffff; }
.printOnly {
display: block;
}
.panel {
border: 1px solid transparent;
padding: 2px;
margin: 0;
}
.textSummaryTable{
border:1px solid gray;
page-break-inside: avoid;
}
.textSummaryTable td{
border:1px solid gray;
page-break-inside: avoid;
}
#main {
overflow: hidden;
position: absolute;
padding: 0px;
height: auto;
width: 100%;
}
#title {
display: none;
}
#line-break {
display: block;
}
.textSummaryTable {
width: 100%;
}
}
#media screen {
#line-break {
display: none;
}
}
</style>
<?php
$this->pageTitle = Yii::app()->name . ' - View Evaluation';
$user = LoginForm::getUser();
?>
<?php
$participants = $modelE->evaluationDetails;
?>
<style type="text/css">
#media print {
body {
overflow: hidden;
}
}
</style>
<div class=" non-printable">
<div class='pull-right non-printable'>
<button id="btnPrint" type="button" class="btn btn-default pull-right" onclick="window.print();">
<span class="glyphicon glyphicon-print"></span> Print
</button>
</div>
<?php
$startDate = date("M j, Y", strtotime($modelE->start_date));
$endDate = date("M j, Y", strtotime($modelE->end_date));
?>
</div>
<div id='line-break'>
<br>
<br>
<br>
</div>
<div class="container-fluid">
<div class="printable">
<h4><?php echo htmlentities($modelE->evaluationForm->name); ?></h4>
<h5><?php echo $startDate; ?> - <?php echo $endDate; ?></h5>
<h5>Candidate: <?php echo htmlentities($modelE->evaluatee); ?></h5>
<h5>Overall Evaluation: <?php echo htmlentities($modelE->getResult()); ?></h5>
<h5>Participants: <?php echo htmlentities(count($participants)); ?></h5>
<div class="panel panel-default">
<div class="panel-body">
<h5><strong>Instructions: </strong> <?php echo htmlentities($modelE->evaluationForm->description); ?></h5>
<!-- <h4>Results Summary</h4> -->
<?php
$radioFlag = false;
foreach ($modelE->evaluationForm->evaluationFormDetails as $question) {
$criteria = new CDbCriteria;
$criteria->with = 'evalResult';
$criteria->addInCondition('eval_form_question_id', array($question->id));
$criteria->addInCondition('evalResult.eval_id', array($modelE->id));
$resultSet = EvaluationResultsDetails::model()->findAll($criteria);
if ( strtolower($question->field_type) != "radioheader" && $question->field_type != "slider" ) {
if($radioFlag){
echo "</table>";
$radioFlag = false;
}
if( $question->field_type == "text" ) {
echo "<h4>" . $question->field_name . "</h4>";
}
else {
echo "<table class='textSummaryTable'><tr><td style='width: 100%'><label>" . $question->field_name . "</label></td></tr>";
foreach ($resultSet as $answer) {
echo "<tr><td>" . $answer->eval_answer . "</td></tr>";
}
echo "</table>";
}
} else {
if(!$radioFlag){
echo '<table border-size = 0px width=100% class="summaryTable">';
$radioFlag = true;
}
echo "<tr><td style='width: 90%'>" . $question->field_name . "";
echo "</td><td style='width: 10%'>";
$sum = 0;
$count = 0;
foreach ($resultSet as $answer) {
$count++;
$sum += $answer->eval_answer;
}
echo $count == 0 ? "-" : number_format($sum / $count, 2);
echo "</td></tr>";
/*** end here ***/
}
}
if($radioFlag){
echo "</table>";
}
?>
<table class="printOnly">
<tr>
<td colspan="2">
<p> I hereby certify that all information declared in this document are accurate and true. Each item have been discussed with my Immediate Superior and mutually agreed upon.</p>
</td>
</tr>
<tr>
<td>
<p>Prepared by
<?= $modelE->project->manager->family_name . ", " . $modelE->project->manager->first_name ?>
</p>
Date <?= date("Y-m-d"); ?>
</td>
<td>
<p>Conformed by <?= $modelE->evaluatee ?></p>
Date
</td>
</tr>
<tr>
<td colspan="2">
<p>Noted by HR Division</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
This is a really frustrating problem... I have made an HTML5 button styled with CSS3 - this button works (functionally) in I.E, but when I open my page in Firefox (v 16.0.2) the button does not work (e.g you can't click on it - it does nothing). What is even weirder is that I put a standard a href link just for testing (on the same page, beside the button), and I can't even click on that (e.g it does nothing). I have tested this page on two different machines in both I.E 9 and FireFox 16.0.2.
Here is the HTML code for my button:
<p><button type="button" onClick="location.href='index.php'" class="navigationButton">Back to World Map</button>
<!-- test link -->
home</p>
And the CSS:
.navigationButton {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#86eb86 0%,
#013006);
background: -webkit-gradient(
linear, left top, left bottom,
from(#86eb86),
to(#013006));
background: -ms-linear-gradient(#86eb86, #013006);
background: -o-linear-gradient(#86eb86, #013006);
background: linear-gradient(#86eb86, #013006);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#86eb86', endColorstr='#013006');
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
border: 3px solid #171717;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 10px rgba(087,087,087,0.7);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 10px rgba(087,087,087,0.7);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 10px rgba(087,087,087,0.7);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px 1px 0px rgba(255,255,255,0.3);
}
If my implementation of this button works for anyone else (in both I.E and Firefox), please let me know - otherwise if I have done something wrong, also let me know with an explanation.
Cheers!
EDIT:
Here is the complete code for one of the pages. It is dynamically generated by PHP/MySQL...
<?php
require_once("includes/dbconnect.php");
$title = "";
$regionName = "";
$mapScript = "";
$mapDivStyle = "";
$pageDimensions = "";
$footerMargin = "";
function numberFormat($item){
return number_format($item, 0, '.', ',');
}
if(isset($_GET['region'])){
$region = htmlentities($_GET['region']);
if($region == "northAmerica")
{
$regionName = "North America";
$title = $regionName . ' | WorldTravel Tourism App';
$mapScript = "js/northAmerica.js";
$mapDivStyle = " style=\"width: 800px; height: 707px; margin-bottom:20px;\"";
$pageDimensions = " style=\"width: 960px; height: 1050px;\"";
$footerMargin = " style=\"margin-top:1159px;\"";
}
else if($region == "southAmerica")
{
$regionName = "South America";
$title = $regionName . " | WorldTravel Tourism App";
$mapScript = "js/southAmerica.js";
$mapDivStyle = " style=\"width: 800px; height: 668px; margin-bottom:20px;\"";
$pageDimensions = " style=\"width: 960px; height: 950px;\"";
$footerMargin = " style=\"margin-top:1059px;\"";
}
else if($region == "eurasia")
{
$regionName = 'Eurasia';
$title = $regionName . " | WorldTravel Tourism App";
$mapScript = "js/eurasia.js";
$mapDivStyle = " style=\"width: 800px; height: 415px; margin-bottom:20px;\"";
$pageDimensions = " style=\"width: 960px; height: 900px;\"";
$footerMargin = " style=\"margin-top:1009px;\"";
}
else if($region == "africaMiddleEast")
{
$regionName = "Africa and the Middle East";
$title = $regionName . " | WorldTravel Tourism App";
$mapScript = "js/africaMiddleEast.js";
$mapDivStyle = " style=\"width: 800px; height: 799px; margin-bottom:20px;\"";
$pageDimensions = " style=\"width: 960px; height: 1150px;\"";
$footerMargin = " style=\"margin-top:1259px;\"";
}
else if($region == "oceania")
{
$regionName = 'Oceania';
$title = $regionName . " | WorldTravel Tourism App";
$mapScript = "js/oceania.js";
$mapDivStyle = " style=\"width: 738px; height: 527px; margin-bottom:20px;\"";
$pageDimensions = " style=\"width: 960px; height: 800px;\"";
$footerMargin = " style=\"margin-top:859px;\"";
}
else{
$invalidRegion = $region;
$title = "Region not found | WorldTravel Tourism App";
}
}
else{
header("Location: index.php");
}
?>
<!DOCTYPE HTML>
<html>
<head>
<title><?php echo($title); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" src="Scripts/swfobject.js"></script>
<script type="text/javascript" src="<?php echo ($mapScript) ?>"></script>
</head>
<body>
<div class="container">
<header class="header">
<p style="margin-left:-14px;"><img src="images/world_globe.png" class="headerImage" alt="World Globe" /></p>
<p style="margin-top:-150px; margin-left:150px; color:white; font-family:'Comic Sans MS', cursive; font-weight:bold; font-size:35px;">WorldTravel Global Tourism Application</p>
</header>
<div class="content"<?php echo ($pageDimensions); ?>>
<h1><?php echo($regionName); ?></h1>
<?php
if(isset($invalidRegion)){
echo ("<p>Sorry, the region \"$invalidRegion\" is not valid</p>");
}
?>
<?php if(isset($region)){ ?>
<div id="flashContent" <?php echo $mapDivStyle; ?>>
</div>
<?php } ?>
<p></p>
<?php
if(!isset($invalidRegion)){
$query = "SELECT * FROM region WHERE region.regionID = (SELECT region.regionID from region WHERE region.regionName = '$region');";
$result = mysql_query($query, $connection);
$row = mysql_fetch_assoc($result);
$regionPopulation = numberFormat($row['regionPopulation']);
$regionLandArea = numberFormat($row['regionLandArea']);
$populationDensity = round((($row['regionPopulation'])/($row['regionLandArea'])), 2);
$regionCountries = $row['regionCountries'];
$numberPrefix = "";
echo("<p><span class=\"infoHeadings\">Region population:</span> " . $regionPopulation . ".</p>");
echo("<p><span class=\"infoHeadings\">Region land area:</span> " . $regionLandArea . " square kilometers.</p>");
echo("<p><span class=\"infoHeadings\">Population density:</span> " . $populationDensity . " people per square kilometer.</p>");
echo("<p><span class=\"infoHeadings\">Countries in region:</span> " . $regionCountries . ".</p>");
}
?>
<p><button type="button" onClick="location.href='index.php';" class="navigationButton">Back to World Map</button><p>
<!-- test link -->
<p>home</p>
</div>
<div class="footer"<?php echo ($footerMargin); ?>>
</div>
</div>
</body>
</html>
It turns out that z-indexing of one of my elements was the issue. On my page, I had my footer div with a z-index of 20 and a top margin of 500px, and the main content area had a lower z-index value (where the button resided). Because the margin area was "covering" the button, I was not able to click on any link or button in the main content area.
So I've fixed the problem, although I am still wondering why FireFox didn't read the z-indexing and I.E did - I used Google's html5shiv to enable html5 elements in older versions of I.E).