I am showing all my products in rows, but the code which I am using shows the result in columns. I am using the datatable pagination, I don't know how I am using pagination in my web site please help me. enter image description here
<table id="datatables" class="table no-margin">
<thead >
<tr>
<th></th>
</tr>
</thead>
<tbody class="df">
<?php
$pr = mysqli_query($link,"select * from product where company_id = '".$company_id."'");
while($prd = mysqli_fetch_array($pr))
{
$price = mysqli_fetch_array(mysqli_query($link,"select * from
admin_price where p_code = '".$prd['p_code']."'"));
?>
<tr>
<td>
<?php echo("<a href='single.php?
p_code=".$prd['p_code']."'>"); ?>
<div class="part-secz">
<img src="<?php echo("images/".$prd['image']); ?>" alt=""/>
<div class="part-infoz">
<?php
echo("<a class='asd' href='single.php?p_code=".$prd['p_code']."'>");
?>
<h5>
<?php echo($prd['p_code']); ?><span>$ <?php echo($price['price']); ?>
</span>
</h5>
<?php
echo("</a>");?>
<?php echo("<a class='add-cart' href='single.php p_code=".$prd['p_code']."'>"); ?> Quick View<?php
echo("</a>");?>
<?php echo("<a class='qck' href='single.php p_code=".$prd['p_code']."'>"); ?>BUY NOW</a><?php
echo("</a>");?>
</div>
</div>
</td>
<div class="clearfix">
</div>
</tr>
<?php
}
?>
Just get your tag outside of while loop
<tr>
while($prd = mysqli_fetch_array($pr))
{
<td> Your Values </td>
}
</tr>
Basically, your code is a cycle of :
<table id="datatables" class="table no-margin">
<thead><tr><th></th></tr></thead>
<tbody class="df">
<?php
$pr = mysqli_query($link,"select * from product where company_id = '".$company_id."'");
while($prd = mysqli_fetch_array($pr))
{
<tr>
<td>
{{some display logic}}
</td>
<div class="clearfix">
</div>
</tr>
<?php } ?>
If you want your products to be in one line fix it, so new row is not created
<table id="datatables" class="table no-margin">
<thead><tr><th></th></tr></thead>
<tbody class="df">
<tr>
<?php
$pr = mysqli_query($link,"select * from product where company_id = '".$company_id."'");
while($prd = mysqli_fetch_array($pr))
{
<td>
{{some display logic}}
</td>
<div class="clearfix">
</div>
<?php } ?>
</tr>
<html>
<head>
</head>
<style>
#myInput {width: 90px; height: 10px; border-radius: 12px;
};
.button1 {width: 90px;
height: 10px; border-radius: 20px;
}
.button1:hover, .button1:active {
background-color: #008B8B;
color: white;
}
</style>
<style>
.paginationbutton {
font: bold 11px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 4px 6px 4px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 12px;
}
a.paginationbutton:hover, a.paginationbutton:active {
background-color: #008B8B;
color: white;
}
</style>
<script>
//document.getElementById('currentPage').value=1;
gotoFirstPage();
function gotoFirstPage(){
paginate(100,1);
}
function gotoPrevPage(){
var currentPg=document.getElementById('currentPage').value;
var prevPage=currentPg-1;
if (prevPage < 1) {
prevPage = 1;
}
paginate(100,prevPage);
}
function gotoNextPage(){
var currentPg=document.getElementById('currentPage').value;
var totalItems=document.getElementById('totalItems').value;
var pageSize=10;
var nextPage=parseInt(currentPg)+1;
var totalPages = Math.ceil(totalItems / pageSize);
alert(nextPage);
alert(totalPages);
if (nextPage > totalPages) {
nextPage = totalPages;
}
var start=1;
var end=10;
paginate(totalItems,nextPage);
}
function gotoLastPage(){
var totalItems=document.getElementById('totalItems').value;
var pageSize=10;
var totalPages = Math.ceil(totalItems / pageSize);
paginate(100,totalPages);
}
function paginate(
totalItems ,
currentPage
) {
// var totalItems=document.getElementById('totalItems').value;
var pageSize=10;
// calculate total pages
var totalPages = Math.ceil(totalItems / pageSize);
// ensure current page isn't out of range
if (currentPage < 1) {
currentPage = 1;
} else if (currentPage > totalPages) {
currentPage = totalPages;
}
var startPage, endPage ;
// calculate start and end item indexes
var startIndex = (currentPage - 1) * pageSize;
var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
alert(""+startIndex+""+endIndex);
document.getElementById('currentPage').value=currentPage;
}
</script>
<div id="buttons" style="text-align:right">
Total Items<input type="text" id='totalItems' value="" size=3 class="paginate_control_prev">
currentPage<input type="text" id='currentPage' value="1" size=3 class="paginate_control_prev">
<span id="pageLabel" >
«« First
«Previous
Next »
Last »»
<input type="text" id='nthPage' size=3 maxlength=3 class="paginate_control_prev">
<input type="button" id="paginate-go-button" class="button1" value="Go" onclick="goToNthPage()"> </div>
<script>
document.getElementById('currentPage').value="2";
</script>
</body></html>
Related
I have a HTML table where user can choose products from MySql db.
I have a "add new row" possibility where new row is added to DOM.
Once I add new row, select-2 is no longer functioning in this new row - I beleive it is a problem, that it is searching for input only in first example of select-2 dropdown. How can I show dropdown for each instance?
Code:
<table id="add_new" style="width: 100%; margin-top:40px;" class="col-12 col-lg-12 col-md-12 col-sm-12 col-xl-12">
<thead>
<tr>
<th style="text-align:left; font-size: 10px; color:#8f8f8f; padding-bottom: 15px; width: 10%;">
Zap. št.: </th>
<th style="text-align:left; font-size: 10px; color:#8f8f8f; padding-bottom: 15px; width: 50%;">
Naziv artikla </th>
<th style="text-align:left; font-size: 10px; color:#8f8f8f; padding-bottom: 15px; width: 20%;">
Količina </th>
<th style="text-align:right; font-size: 10px; color:#8f8f8f; padding-bottom: 15px; width: 20%;">
EM (kos/m/colli,...) </th>
</tr>
</thead>
<tbody>
<tr id="mainsection">
<td> <p href="#" id="count" style="font-size: 13px; text-decoration: none; line-height: 1; color:#909090; margin-top:0px; margin-bottom:0;">
1</p> </td>
<td contenteditable style="padding-top:0px; padding-bottom:5px;">
<h4 style="font-size: 16px; line-height: 1; margin-bottom:0; color:#303030; font-weight:500; margin-top: 10px;">
<select class="form-control select2-multiple" id="dd_artikli" data-width="100%">
<option value="">Select country</option>
<?php
if (count($itemRecords_artikli) > 0) {
foreach ($itemRecords_artikli as $ct) {
?>
<option value="<?php echo $ct['id']; ?>">
<?php echo $ct['name']; ?>
</option>
<?php
}
}
?>
</select>
</h4>
</td>
<td contenteditable> <p href="#" style="font-size: 13px; text-decoration: none; line-height: 1; color:#909090; margin-top:0px; margin-bottom:0;"> </p> </td>
<td contenteditable style="padding-top:0px; padding-bottom:0; text-align: right;"> <p style="font-size: 13px; line-height: 1; color:#303030; margin-bottom:0; margin-top:0; vertical-align:top; white-space:nowrap;"> </p> </td>
</tr>
</tbody>
</table>
<script>
var number = 1;
document.getElementById("newsectionbtn").onclick = function() {
var container = document.getElementById("add_new");
var section = document.getElementById("mainsection");
var count = document.getElementById('count');
number++;
count.textContent = number.toString();
container.appendChild(section.cloneNode(true));
}
</script>
<
?php
/*
#Author: Sanjay Kumar
#Project: PHP MySQLi How To Use Select2 for Multiple Select Tutorial
#Email: onlinewebtutorhub#gmail.com
#Website: https://onlinewebtutorblog.com/
*/
// Include the database configuration file
require 'dbconfig.php';
$countrySelect = $conn->prepare("SELECT * FROM artikli");
$countrySelect->execute();
$countries = $countrySelect->get_result();
$itemRecords_artikli = array();
while ($item = $countries->fetch_assoc()) {
extract($item);
$itemDetails = array(
"id" => $id,
"name" => $naziv
);
array_push($itemRecords_artikli, $itemDetails);
}
?>
After drop-down bind run this command.
jQuery('#dd_artikli').select2();
Or use the jquery ready function.
$(document).ready(function() { jQuery('#dd_artikli').select2(); });
I am a new developer. I am now doing a search function for multiple tables. The issue is when I search it only appears the jobname but not the whole information in the same table. The output is supposed to show the work information together with the jobname searched. I hope you guys can help me. Thank you in advance !! Below is my current output before & after search with codes attached.
Before search
After search
Codes
<!DOCTYPE html>
<html>
<head>
<title>My Job</title>
<script>
//searching
function myFunction() {
var input, filter, table, tr, td, i,alltables;
alltables = document.querySelectorAll("table[data-name=mytable]");
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
alltables.forEach(function(table){
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none"
}
}
}
});
}
</script>
<link rel="stylesheet" type="text/css" href="joblist.css">
</head>
<body><br>
<div class="title">
<center>APPLY JOB<center>
</div><br>
<ul align="center">
<li>HOME</li>
</ul>
<br><br>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search your job" class="carian">
<br><br>
<ol>
<?php
include("DB.php");
$query = "SELECT * FROM createjob";
$result = mysqli_query($link,$query);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while ($row = mysqli_fetch_assoc($result)){
$id = $row["id"];
$jobname = $row["jobname"];
$jobtime = $row["jobtime"];
$jobday = $row["jobday"];
$venue = $row["venue"];
$worker = $row["worker"];
$inform = $row["inform"];
$phonenum = $row["phonenum"];
?>
<fieldset class="box" >
<table data-name="mytable">
<tr>
<th align="left">Job Name </th>
<td><?php echo $jobname ; ?></td>
</tr>
<tr>
<th align="left">Job Time </th>
<td><?php echo $jobtime; ?></td>
</tr>
<tr>
<th align="left">Job Day </th>
<td><?php echo $jobday; ?></td>
</tr>
<tr>
<th align="left">Venue </th>
<td><?php echo $venue; ?></td>
</tr>
<tr>
<th align="left">Number Of Worker </th>
<td><?php echo $worker; ?></td>
</tr>
<tr>
<th align="left">Phone Number </th>
<td><?php echo $phonenum; ?></td>
</tr>
<tr>
<th align="left">Information </th>
<td><?php echo nl2br($inform);?></td>
</tr>
</table>
<br>
<button class="bottom">Apply</button>
</fieldset>
<?php
}
}else {
echo "0 results";
}
?>
</ol>
</body>
</html>
body{
background-image: linear-gradient(rgba(0, 0, 0, 0.45),
rgba(0, 0, 0, 0.45)), url("16.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
border-collapse: collapse;
}
thead{
background-color: #FFD34E;
}
.bottom{
background-color: #FFD34E;
border-radius: 4px;
height: 30px;
padding-top: 5px;
width: 100px;
border: none;
}
.box
{
background-color:white;
border-radius: 10px;
float:left;
width:320px;
border-style: outset;
bottom:10px;
}
.carian{
position: relative;
left:55px;
height:20px;
width: 190px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
background-color: white;
background-image: url('18.png');
background-position: 7px 0px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
.carian:focus {
width: 20%;
}
.title{
font-weight:bold;
font-size:40px;
color:white;
text-shadow: 4px 4px black;
}
.bottom
{
background-color: #FFD34E;
border-radius: 4px;
height: 30px;
padding-top: 5px;
border: none;
width:100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FFD34E;
position: -webkit-sticky; /* Safari */
position: sticky;
width: 100%;
}
li {
float: center;
}
li a {
display: block;
color: black;
text-align: center;
padding: 20px 340px;
text-decoration: none;
}
li a:hover {
color: white;
background-color:#552B00;
}
This is maybe a better way to create your table:
<fieldset class="box">
<table id="myTable" data-name="mytable">
<thead>
<tr>
<th>Job Name</th>
<th>Job Time</th>
<th>Job Day</th>
<th>Venue</th>
<th>Number Of Worker</th>
<th>Phone Number</th>
<th>Information</th>
<th></th>
</tr>
</thead>
<tbody>
<?php while ($row = mysqli_fetch_assoc($result)): ?>
<tr>
<td><?= $row["jobname"]; ?></td>
<td><?= $row["jobtime"]; ?></td>
<td><?= $row["jobday"]; ?></td>
<td><?= $row["venue"]; ?></td>
<td><?= $row["worker"]; ?></td>
<td><?= $row["inform"]; ?></td>
<td><?= $row["phonenum"]; ?></td>
<td>
<button class="bottom">Apply</button>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</fieldset>
With a normal table like this your able to use the search function from w3schools:
https://www.w3schools.com/howto/howto_js_filter_table.asp
I also made an extended version of the example from w3schools. This function will search in all td fields:
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
var tds = tr[i].getElementsByTagName("td");
console.log(tds.length);
var found = false;
for (var ii = 0, c = tds.length; ii < c; ii++) {
var td = tds[ii];
if (td && found == false) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
found = true;
} else {
found = false
}
}
if (found) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
I've been working on a Library Management Sys in PHP.
It has a page (collect_fine.php) where I've been calling all the fields related to the each & every member from the DB in a loop.
Along with all the records, I'm also echoing a button to activate a modal on getting click.
The code is as below -
do{?>
<?php
$br_id = $row['Member_id'];
?>
<tr>
<td style="outline:1px dotted #000000" height="auto" width="80px" align="center"><?php echo $row['Member_id']?></td>
<?php
$mem_id = $row['Member_id'];
?>
<td style="outline:1px dotted #000000" height="auto" width="340px" align="justify"> <?php echo $row["Member_name"]?></td>
<td style="outline:1px dotted #000000" height="auto" width="130px" align="center"><?php echo $row['Class']?></td>
<td style="outline:1px dotted #000000" height="auto" width="150px" align="center"><?php echo $row['Contact']?></td>
<td style="outline:1px dotted #000000" height="auto" width="120px" align="center"><?php
$count=mysqli_query($conn,"SELECT COUNT(Book_id) AS total_things FROM issued_books WHERE Borrower_id = '$br_id' AND Date_returned = '0'");
$cnt = mysqli_fetch_array($count,MYSQL_ASSOC);
$num_results = $cnt["total_things"];
echo $num_results;
?></td>
<td style="outline:1px dotted #000000" height="auto" width="80" align="center"><?php echo $row['Fine_Amt']?></td>
<td style="outline:1px dotted #000000" width="120px" align="center">
<?php
date_default_timezone_set('Asia/Kolkata');
$date = date('Y-m-d H:i:s');
if($row['Fine_Amt']>0)
{
echo '<style>
#media screen {
#printSection {
display: none;
}
}
#media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
<button id="myBtn">Collect Fine</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>';
echo '<p><h1>NTHS eLibrary</h1></br>
<h2>Fine Reciept of '.$row['Member_name'].'</h2></br>
<div align="center">';
?>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
<?php }while($row=mysqli_fetch_array($Result));?>
The above code works perfectly fine but only for the top row :(
What could possibly the reasons for this. Please help
In HTML, 'id' attribute should be unique. You are trying to set same 'id' to all buttons. Try to set button id dynamically.
The main aim is to display the row when the master row is clicked, there will be multiple records for one single incident id. how to apply jquery function for this type of output. Helps appreciated.
I tried using jexpand function but its not working.
The main aim is to get output like, when one particular row is clicked the remaining set of row with same id should be expanded and vice-versa.
The table results are fetched from mysql database.
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img { float:right;}
#report ul { margin:10px 0 10px 40px; padding:0px;}
#report th { background:#7CB8E2 url(header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}
#childALL { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
#report tr.td { background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer; }
#report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#report tr:siblings").show();
$("#report tr:siblings").hide();
$("#report div.arrow").click(function(){
$(this).next("#childALL").toggle();
$(this).find(".arrow").toggleClass("up");
});
//$("#report").jExpand();
});
</script>
</head>
<body>
<center>
<img src="abc.jpg" width="400px" height="100px" />
</center>
<?php
$con= mysqli_connect("172.28.212.145", "root", "root", "xxx");
if(!$con)
{
die('not connected');
}
$con= mysqli_query($con, "Select Incident_id,name,qualification from masterdata;");
?>
<div>
<center>
<table id="report">
<tr>
<th>Incident Id</th>
<th>name</th>
<th>Qualification</th>
<th></th>
</tr>
<?php
$incident = null;
while($row = mysqli_fetch_array($con))
{
if( $row['Incident_id'] != $incident )
{
$incident = $row['Incident_id'];
?>
<tr>
<td>
<?php echo $row['Incident_id']; ?>
</td>
<td>
<?php echo $row['name']; ?>
</td>
<td>
<?php echo $row['JournalUdpdateChanges']; ?>
</td>
<td><div class="arrow"></div></td>
</tr>
<?php } else { ?>
<tr id="childALL">
<td >
<?php echo $row['Incident_id']; ?>
</td>
<td >
<?php echo $row['name']; ?>
</td>
<td >
<?php echo $row['qualification']; ?>
</td>
<td >
<?php echo $row['Priority_im']; ?>
</td>
</tr>
<?php
}
}
?>
</table>
</center>
</div>
</body>
</html>
Bootstrap makes really easy work out of this.
Bootstrap Accordion
I am having a right nightmare with Chrome and a single Ajax request on a little page I am building. I am ok when it comes to Javascript/jQuery but this is driving me nuts.
Basically I have the page http://www.neuralnode.com/STARMAN/ (Warning, this seems to crash Chrome sometimes) and it works on most versions of Firefox and IE 9+ but whenever I try it on chrome it doesn't work at all, then if you leave it too long Chrome crashes. I have no idea what is wrong and I have searched all over the place. Let me explain the code:
We have at base 2 pages, index.php and viewer.php.
index.php loads viewer.php using an variety of methods, $.ajax at present but I have tried $.get, .load() as well.
Here is the full code with all of the other Javascript functionality removed for clarity's sake. In the live site, all code but the ajax load is commented out.
index.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>StarViewer V1</title>
<style type="text/css">
<!--
html {
width:100%;
height:100%;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #666;
width:100%;
height:100%;
overflow:hidden;
}
#controls {
position: absolute;
left: 50%;
margin-left:-450px;
top: 0px;
background-color: #333;
width: 900px;
height: 100px;
font-family: Arial, Helvetica, sans-serif;
color: #CCC;
font-size: 12px;
z-index: 999999;
opacity: 90%;
border: 2px solid;
border-radius: 5px;
-moz-border-radius: 5px; /* Old Firefox */
box-shadow: 3px 3px 3px #3E3E3E;
margin-top: 20px;
}
#container {
width: 100%;
height: 100%;
background-image: url(img/bkg_full.gif);
}
#bigcontainer {
height: 100%;
width: 100%;
overflow: scroll;
position: relative;
z-index: 1;
}
.navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 8px;
}
-->
</style></head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script language="javascript" type="application/javascript">
$(document).ready(function() {
function navigation(typ){
var Top = $('#bigcontainer').scrollTop();
var Left = $('#bigcontainer').scrollLeft();
var zoomspeed = $("#Speed").val();
var speed = parseFloat(zoomspeed);
if(typ == 'LEFT UP') {
NewLeft = Left - speed;
NewTop = Top - speed;
} else if (typ == 'UP') {
NewLeft = Left;
NewTop = Top - speed;
} else if (typ == 'RIGHT UP') {
NewLeft = Left + speed;
NewTop = Top - speed;
} else if (typ == 'RIGHT') {
NewLeft = Left + speed;
NewTop = Top;
} else if (typ == 'RIGHT DN') {
NewLeft = Left + speed;
NewTop = Top + speed;
} else if (typ == 'DN') {
NewLeft = Left;
NewTop = Top + speed;
} else if (typ == 'LEFT DN') {
NewLeft = Left - speed;
NewTop = Top + speed;
} else if (typ == 'LEFT') {
NewLeft = Left - speed;
NewTop = Top;
} else if (typ == '+') {
NewLeft = 12100;
NewTop = 4400;
}
$('#bigcontainer').animate({ scrollTop: NewTop, scrollLeft: NewLeft}, 300 );
//$('#bigcontainer').animate({ }, 500 );
return false;
};
var currlevel = $("#currzoom").attr("value");
function LoadDataIntoDiv(data) {
$('#bigcontainer').html(data);
navigation('+');
}
$.ajax({
url: "viewer.php",
data: {
zoom:'-250'
},
method: 'POST',
datatype: 'html',
async: true,
success: function(html) {
LoadDataIntoDiv(html)
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus+" - "+errorThrown);
}
});
/*$('#bigcontainer').load('', function() {
navigation('+');
});*/
});
//?
</script>
<body>
<div id="container">
<div id="controls">
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td width="39%" align="center"><div id="zoommenu">Zoom [ <span class="item" title="-250">200%</span> | <span class="item" title="-110">150%</span> | <span class="item" title="-10">100%</span> | <span class="item" title="40">50%</span> | <span class="item" title="75">25%</span> | <span class="item" title="90">10%</span> ]</div></td>
<td width="15%" align="center">Selected Locations</td>
<td width="14%" align="right"><label>
<input type="button" name="lu" class="navigation" value="LEFT UP"/>
</label></td>
<td width="6%" align="center"><label>
<input type="button" name="up" class="navigation" value="UP"/>
</label></td>
<td width="9%" align="left"><label>
<input type="button" name="ru" class="navigation" value="RIGHT UP" />
</label></td>
<td width="17%">Curr H
<label>
<input name="CurrHPos" type="text" id="CurrHPos" size="7" />
</label></td>
</tr>
<tr>
<td align="right">From:
<input name="starsearch" type="text" id="starsearch" size="45" />
<input name="currzoom" type="hidden" id="currzoom" value="-250" /></td>
<td align="center"><div id="searchreturn"></div></td>
<td align="right"><label>
<input type="submit" name="LEFT" id="LEFT" class="navigation" value="LEFT" />
</label></td>
<td align="center"><label>
<input type="submit" name="CENTER" id="CENTER" class="navigation" value="+" />
</label></td>
<td align="left"><label>
<input type="submit" name="RIGHT" id="RIGHT" class="navigation" value="RIGHT" />
</label></td>
<td>Curr V
<label>
<input name="CurrVPos" type="text" id="CurrVPos" size="7" />
</label></td>
</tr>
<tr>
<td align="right">To:<input name="starsearch2" type="text" id="starsearch2" size="45" /></td>
<td align="center"><div id="searchreturn2"></div></td>
<td align="right"><label>
<input type="button" name="ld" class="navigation" value="LEFT DN" />
</label></td>
<td align="center"><label>
<input type="button" name="dn" class="navigation" value="DN" />
</label></td>
<td align="left"><label>
<input type="button" name="rd" class="navigation" value="RIGHT DN" />
</label></td>
<td>Scroll Speed:
<label>
<input name="Speed" type="text" id="Speed" value="300" size="7" />
</label></td>
</tr>
</table>
</div>
<div id="bigcontainer"></div>
</div>
</body>
</html>
and viewer.php - it's quite a long foreach loop ofc, and it has messy code in general, but this shouldn't affect anything much as it works in the other two main browsers - I do plan to tidy it later, just need to figure this out...
<?php
include 'database.class.php';
$database = new DatabaseConnector;
$Query = "SELECT * FROM startrekplanets";
$current = $database->ExecuteQuery($Query,"SELECT");
$zoomlevel=$_POST['zoom'];
?>
<style type="text/css">
<!--
body {
background-color: #000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.roundedname {
}
.roundedname span {
font-family: "Arial Black", Gadget, sans-serif;
color: #FFF;
opacity:0.9; /* Transparent Background 50% */
display: inline-block;
width: 150px;
}
#planetinformation {
overflow: hidden;
position: absolute;
z-index: 888888888;
width: 185px;
background-color: #005BCC;
border: 2px solid;
border-radius: 5px;
-moz-border-radius: 5px; /* Old Firefox */
box-shadow: 3px 3px 3px #3E3E3E;
}
#planetinformation .ItemTitle{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #F60;
padding: 3px;
margin: 0px;
}
#planetinformation td {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000;
padding: 0px;
}
-->
</style>
<script language="javascript" type="application/javascript">
$(document).ready(function() {
$("#planetinformation").hide();
$(".planetaryobject").click(function () {
var planid = $(this).attr("title");
$.ajax({
type: "POST",
url: "starquery.php",
data: "sstring="+planid+"&currzoom="+<?php echo $zoomlevel; ?>,
success: function(html) {
var SortedVars = new Object;
var SplitVars = html.split(',');
SortedVars = CollectVars(SplitVars);
$('#planetinformation').show('slow', function() {
$("#planetinformation").css("margin-top", SortedVars.V+40);
$("#planetinformation").css("margin-left", SortedVars.H+40);
$('#planetinformation').show('slow', function() {
$("#planetinformation .ItemTitle").html(SortedVars.Name);
$("#planetinformation .ItemQuadrant").html(SortedVars.Quadrant);
$("#planetinformation .ItemGrid").html(SortedVars.Grid);
$("#planetinformation .ItemCords").html(SortedVars.HCord+'/'+SortedVars.VCord);
$("#planetinformation .ItemStatus").html(SortedVars.Status);
$("#planetinformation .ItemOwnership").html(SortedVars.Zoned);
if (SortedVars.WikiLink) {
var formattedlink = 'Link!';
$("#planetinformation .ItemLink").html(formattedlink);
}else{
$("#planetinformation .ItemLink").html('');
}
});
});
},
complete: function (html) {
}
});
});
function CollectVars(varsin) {
var ReturnVars = new Object;
ReturnVars.H = parseFloat(varsin[0]);
ReturnVars.V = parseFloat(varsin[1]);
ReturnVars.IdName = varsin[2];
ReturnVars.Name = varsin[3];
ReturnVars.Special = varsin[4];
ReturnVars.NewW = parseFloat(varsin[5]);
ReturnVars.NewH = parseFloat(varsin[6]);
ReturnVars.Col = varsin[7];
ReturnVars.Done = varsin[8];
ReturnVars.Quadrant = varsin[9];
ReturnVars.Grid = varsin[10];
ReturnVars.HCord = parseFloat(varsin[11]);
ReturnVars.VCord = parseFloat(varsin[12]);
ReturnVars.Status = varsin[13];
ReturnVars.Zoned = varsin[14];
ReturnVars.WikiLink = varsin[15];
ReturnVars.ItemImage = varsin[16];
ReturnVars.ImageH = parseFloat(varsin[17]);
ReturnVars.ImageV = parseFloat(varsin[18]);
return ReturnVars;
}
});
</script>
<?php
$z=1;
foreach($current as $key=>&$val) {
if(empty($zoomlevel)) {
$zoomlevel = -250;
}
$minusH = ($val['Three'] / 100) * $zoomlevel;
$minusV = ($val['Four'] / 100) * $zoomlevel;
$H = $val['Three'] - $minusH;
$V = $val['Four'] - $minusV;
if(empty($val['Col'])) {
$colo = 'FFFFFF';
}else{
$colo = $val['Col'];
}
if($zoomlevel == '-250') {
$fold = 'zoom200/';
$Vsize = 47;
$HSize = 47;
$textsize = 14;
}elseif($zoomlevel == '-110') {
$fold = 'zoom150/';
$Vsize = 30;
$HSize = 30;
$textsize = 12;
}elseif($zoomlevel == '-10') {
$fold = 'zoom100/';
$Vsize = 22;
$HSize = 22;
$textsize = 10;
}elseif($zoomlevel == '40') {
$fold = 'zoom50/';
$Vsize = 15;
$HSize = 15;
$textsize = 8;
}elseif($zoomlevel == '75') {
$fold = 'zoom25/';
$Vsize = 8;
$HSize = 8;
$textsize = 7;
}elseif($zoomlevel == '90') {
$fold = 'zoom10/';
$Vsize = 4;
$HSize = 4;
$textsize = 5;
}
$z++;
if($val['Special'] == 1) {
$HSize = $val['NewH'];
$Vsize = $val['NewW'];
$H = $H - ($val['NewW'] / 1.5);
$V = $V - ($val['NewH'] / 1.5);
$op = 'opacity:0.4; filter:alpha(opacity=40);';
}else{
$op = '';
}
$CurrName = str_replace(' ','',str_replace('(','',str_replace(')','',$val['Name'])));
?>
<div class="planetaryobject" title="<?php echo $val['Id']; ?>" style="margin-left:<?php echo $H; ?>px; margin-top:<?php echo $V; ?>px; width:<?php echo $Vsize; ?>px; height:<?php echo $HSize; ?>px; position: absolute; z-index: <?php echo $z; $z++; ?>; <?php echo $op; ?> background-image: url(img/<?php echo $fold.$colo; ?>);" id="<?php echo $CurrName; ?>"></div>
<?php
if($val['Special'] == 1) {
$H = $H+($HSize/2);
$V = $V + 50;
}else{
$H = $H+10;
$V = $V-15;
}
?>
<div style="margin-left:<?php echo $H; ?>px; margin-top:<?php echo $V; ?>px; position: absolute; z-index: <?php echo $z; ?>; font-size: <?php echo $textsize; ?>px; font-family: Arial, Helvetica, sans-serif;"><div class="roundedname"><span><?php echo $val['Name']; ?></span></div></div>
<?php } ?>
<div id="planetinformation">
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td colspan="2"><h1 class="ItemTitle">Title</h1></td>
</tr>
<tr>
<td width="48%">Quadrant:</td>
<td width="52%" class="ItemQuadrant"> </td>
</tr>
<tr>
<td>Grid:</td>
<td class="ItemGrid"> </td>
</tr>
<tr>
<td>Cordinates:</td>
<td class="ItemCords"> </td>
</tr>
<tr>
<td>Status:</td>
<td class="ItemStatus"> </td>
</tr>
<tr>
<td>Ownership:</td>
<td class="ItemOwnership"> </td>
</tr>
<tr>
<td>Link:</td>
<td class="ItemLink"> </td>
</tr>
</table>
</div>
In my limited knowledge of this, I've never encountered a problem like this where a browser crashes before I can even see what firebug has to say about it. Can anyone help me shed any light on what might be happening here. Any help is much appreciated.
Google Chrome is supported by jQuery. It seems your jQuery is not loaded.
Your jQuery script URL seems to be misspelled.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Try this instead :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>