I am trying to fetch data from a Mysql database (specifically images) and then display them in a carousel, like for example on the amazon.com homepage.
I am a beginner in CSS. I haven't used it much.
I have looked at a earlier question, but mine is not a list of images together. I just through the data from the database.
Any help will be appreciated.
From what I understood in your comment below, your problem is strictly related to CSS.
The images are showing vertically because the <li> aren't floated next to each other.
Here's the code:
<html>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.jcarousel.js"></script>
<style type="text/css">
.jcarousel {position:relative; overflow:hidden;}
.jcarousel ul {width: 20000em; position:relative; list-style:none; margin:0; padding:0;}
.jcarousel li {float:left;}
</style>
</head>
<body>
<div class="jcarousel">
<ul>
<li><img src="image1.jpg" alt="" /></li>
<li><img src="image2.jpg" alt="" /></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$('.jcarousel').jcarousel();
});
</script>
</body>
</html>
I know this is an old question but it might be useful for future users.
Here is a simple solution to implement a Bootstrap carousel to display images from database:
Fetch all imageID from the database and insert it in an array (note that I store the images as BLOB in my database:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="jquery-3.1.0.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<style>
.myCarousel{
height: 100%;
width: 700px ;
margin-top: 5px;
}
.slideimage{
width: 700px;
height: 320px !important;
}
</style>
</head>
<body>
<?php
include ('DBconnection.php');
$ImageArray = array();
$queryImages = "SELECT * FROM imagetable ";
$result = mysqli_query($conn,$queryImages);
if(mysqli_num_rows($result) >0){
while ($row = mysqli_fetch_array($result)){
$ImageArray[] = $row;
}
}
?>
<div id="myCarousel" class="myCarousel carousel
slideCarousel" data-ride="carousel" data-interval="5000" >
<ol class="carousel-indicators">
<?php
// creating indicators - note that at least one must be set as active
for($j=0;$j<count($ImageArray);$j++){
if($j==0){
echo ' <li data-target="#myCarousel" data-slide-to="'.$j.'" class="active"></li>';
}else{
echo ' <li data-target="#myCarousel" data-slide-to="'.$j.'"></li>';
}
}
?>
</ol>
<div class="carousel-inner" role="listbox">
<?php
for($j=0;$j<count($ImageArray);$j++){
//If it is the first image set it as active
if($j==0){
echo '<div class="item active">
<!--Using image id and url -->
<img class="slideimage" src="GetImageID.php?id=' .$ImageArray[$j]['ImageID'].'" />
<!-- or using base64_encode
<img src="data:image/jpeg;base64,'.base64_encode($ImageArray[$j]['Image']).'"/>
-->
</div>';
}
else{
echo '<div class="item">
<img class="slideimage" src="GetImageID.php?id=' .$ImageArray[$j]['ImageID'].'" />
</div>';
}
}
?>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
The GetImageID.php:
include ('DBconnection.php');
$imageid = $_GET['id'];
$query = "Select Image from imagetable WHERE ImageID = '$imageid'";
$result = mysqli_query($conn,$query);
$row = mysqli_fetch_array($result);
header("Content-type: image/jpeg");
echo $row['Image'];
Related
I have a bootstrap carousel that works perfectly when i only have images included, but as soon as i add a video, my indicators don't work and i can't click through the remaining slides? Does anyone know what i've done wrong? Here is my code with a little bit of dodgy php:
echo "<div class='carousel-item";
if ($caroselCount == "1") { echo " active"; }
echo "'>";
if($extraPicDetails['file_type'] == "image") {
echo "<img src='Members/".$Details['file_name']."' alt='' style='margin: auto; display: block; background-color: #ffffff;'>";
}
elseif($extraPicDetails['file_type'] == "video") {
echo "<video src='Members/".$Details['file_name']."' loop autoplay muted playsinline width='100%' style='display: block;'>";
}
echo "</div>";
$caroselCount = "0";
All works fine if i just loop through a bunch of pics, but if there are a couple of images and a video... NOPE! Can't click through the slides, can anyone help me please?
Here is the rendered code:
<div class="carousel-inner">
<div class='carousel-item active'>
<video src='Members/44_Pic1_ezgifcomgifmaker.mp4' loop autoplay muted playsinline width='100%' style='display: block;'>
</div>
<div class='carousel-item'>
<img src='Members/44_Pic2_Polish_20200814_165321683.jpg' alt='' style='margin: auto; display: block; background-color: #ffffff;'>
</div>
<div class='carousel-item'>
<img src='Members/44_Pic1_image.jpg' alt='' style='margin: auto; display: block; background-color: #ffffff;'>
</div>
</div>
I tried to reproduce your error but it works all fine. I downloaden a video and images from pixabay and loaded bootstrap 4 through cdn links. Instead of inline css I use the bootstrap class img-fluid to make the media fit better in the carousel, I disabled the indicators in my example.
Below the code I tested:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- <ul class="carousel-indicators">-->
<!-- <li data-target="#demo" data-slide-to="0" class="active"></li>-->
<!-- <li data-target="#demo" data-slide-to="1"></li>-->
<!-- <li data-target="#demo" data-slide-to="2"></li>-->
<!-- </ul>-->
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-inner">
<div class='carousel-item active'>
<video src='media/Golden - 48569.mp4' loop autoplay muted playsinline class="img-fluid">
</div>
<div class='carousel-item'>
<img src='media/20201102_14%20-%20Foto.jpg' alt='' class="img-fluid">
</div>
<div class='carousel-item'>
<img src='media/20201102_17%20-%20Fotoe.jpg' alt='' class="img-fluid">
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
I want to open and have access to my 2 different databases from mysql and display it on 2 different charts respectively. I have put a bootstrap carousel that would ease navigation between 2 charts. Below is my code.
$connect = mysqli_connect("localhost", "root", "", "ws_monitoring");
$query = "SELECT mb_weight, mb_weight_dt, mb_refno, mb_date, mb_weight FROM conveyor_in_entry";
$result = mysqli_query($connect, $query);
$chart_data = '';
while($row = mysqli_fetch_array($result))
{
$chart_data .= "{ mb_weight_dt:'".$row["mb_weight_dt"]."', mb_refno:".$row["mb_refno"].", mb_date:".$row["mb_date"].", mb_weight:".$row["mb_weight"]."}, ";
}
$chart_data = substr($chart_data, 0, -2);
$newconnection = mysqli_connect("localhost", "root", "", "cut" )
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>chart with PHP & Mysql | lisenme.com </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<h2>Carousel Test</h2>
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="2000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div id="chart" class="chart" style="width:100%; height:300px;"></div>
</div>
<div class="item">
<div id="chart1" class="chart" style="width:100%; height:300px;"></div>
</div>
<div class="item">
<div id="chart2" class="chart" style="width:100%; height:300 px;"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel" href="#carousel" role="button" data-slide="prev">
<span class="sr-only"></span>
</a>
<a class="right carousel" href="#carousel" role="button" data-slide="next">
<span class="sr-only "></span>
</a>
</div>
</body>
</html>
<script>
Morris.Line({
element : 'chart',
data:[<?php echo $chart_data; ?>],
xkey:'mb_weight_dt',
ykeys:['mb_refno', 'mb_date', 'mb_weight'],
labels:['mb_refno', 'mb_date', 'mb_weight'],
hideHover:'auto',
stacked:true
});
</script>
Chart2 will be coming from a new from a different database with different attributes, so far when I create another query for mysql the same database from the first one appears for the 2nd chart.
The div id = "retrieve" is the div where I am retrieving my data from a database. But then the footer below appears in the div id ="retrieve".
Where am I going wrong?
Retrieval happens properly but it displays footer inside it too.
<!DOCTYPE html>
<html>
<head>
<title>Shreegurudev Datta | Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans&subset=devanagari,latin-ext" rel="stylesheet">
<!--fonts-->
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Advent+Pro" rel="stylesheet">
<!--Let browser know website is optimized for mobile-->
<style>
body{
background:url("bg.jpg");
background-size: cover;
font-family: 'Dosis', sans-serif;
}
slider{
width:100%;
height:auto;
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from {
bottom:-100px;
opacity:0
}
to {
bottom:0px;
opacity:1
}
}
#keyframes animatebottom {
from{
bottom:-100px;
opacity:0
}
to{
bottom:0;
opacity:1
}
}
</style>
</head>
<body>
<!-- Corousel-->
<div class = "navbar">
<nav class="orange">
<div class="nav-wrapper">
<image src = "dattaguru.jpg" style = "padding-top : 10px; padding-left:10px;"/>
<i class="material-icons" style = "color:indigo;">menu</i>
<ul class="right hide-on-med-and-down" >
<li class = "active"><i class="material-icons left">home</i>Home</li>
<li><i class="material-icons left">stars</i>History</li>
<li><i class="material-icons left">equalizer</i>Festivals</li>
<li><i class="material-icons left">widgets</i>Sevas</li>
<li><i class="material-icons left">wallpaper</i>Gallery</li>
<li><i class="material-icons left">today</i>Projects</li>
<li><i class="material-icons left">contacts</i>Contact</li>
<li><i class="material-icons left">payment</i>Donations</li>
</ul>
<ul class="side-nav" id="mobile-demo" style = "color:white;">
<img src="logo.png">
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
<div style="" id="main" class="animate-bottom">
<div class = "header">
<h3 style="text-align:center; color: #b91100; font-weight: bolder">|| श्रीगुरूदेव दत्त ||</h3>
<marquee scrollamount="7" behavior="infinite" hspace="70"><h5 style="text-align:center; color: #b91100; font-weight: bold">|| दिगंबरा दिगंबरा श्रीपाद वल्लभ दिगंबरा ||</h5></marquee>
</div>
<div class = "cover">
<img src="banner.jpg" style="padding-left:250px; width:1100px; height:420px;">
</div>
<div class="row">
<h2 style="text-align:justify; padding-left:60px; color:green;">Shree Gurudev Datta</h2>
<hr width="90%">
<h5 style="text-align:justify; padding-left:60px; color:green;">|| Digambara Digambara Shreepad Vallabh Digambara ||</h5>
<div class="col s9" style="text-align:justify; padding-left:50px;">
<p style="font-size:20px; color:maroon; padding-left:5px; padding-right:5px; border-radius:10px;"> Shree Saunsthan Dattawadi, Sankhali, The Holy Abode of Shree Dattaguru - the trinity of Lord Brahma, Lord Vishnu and Lord Mahesh - evokes deep devotion in the heart of every devotee residing not only in Goa but other parts of the world as well.
Situated in beautiful sylvan surroundings, the heavenly and serene ambience pervading within the precincts of the temple catapults visiting devotees to world full of divine bliss.
The precincs normally referred to as 'Dattawadi', is the pilgrimage centre visited by thousands of devotees and legend has it that their prayers are answered by the Almighty. It is also famous as a centre for miraculous cure for mental troubles. This beautiful structure was established way back in the year 1925 ('shakey' 1804 according to the Hindu almanac).
The Dattatray temple completed 125th anniversary of it's inception in April 2007 with great pomp and splendour. The centenary celebrations in 1982, too, had witnessed similar grandeur.</p></div>
<div id = "retrieve" class="col s3" style="text-align:justify; background-color:orange; width:250px; height:300px; margin-top:23px; border-radius:10px;">
<?php
$host="localhost";
$user="root";
$password="";
$db="db_name";
$con=mysqli_connect($host,$user,$password,$db);
$sql_query="select * from Notifications";
$result=mysqli_query($con,$sql_query);
//echo '<h1>News Flash</h1>';
echo "<center><table cellpadding='5' border='5'>
<tr>
<th>Date</th>
<th>News</th>
</tr></center>
";
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC))
{
echo '
<tr>
<td>'.$row['date'].'</td>
<td>'.$row['news'].'</td>
</tr>
';
}
?>
</div>
</div>
<!--this footer comes in the div id ="retrieve"-->
<div class="footer-copyright" style="padding-left:100px;">
<p style="text-align:center; background-color:#004d40; width:auto; height:50px; padding-top:15px;color:#ffffff;">In memory of late Sau Sunanda & late Avadhut Dattatraya Gaitonde</p>
</div>
<!--close loader-->
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="js/init.js"></script>
<script>$(document).ready(function(){
$('.slider').slider({full_width: true});
});</script>
</body>
</html>
The problem seems to be the 'table' tag on line 126 since I can't find it's counterpart anwhere in the code:
[...]
echo "<center><table cellpadding='5' border='5'>
<tr>
<th>Date</th>
<th>News</th>
</tr></center> //<-- there is no </table> before </center>
";
[...]
I have a bootstrap carousel. I have two column in each row. I want my images to come from database through php.
Here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/full-slider.css">
<title>Untitled Document</title>
</head>
<body>
<!-- Full Page Image Background Carousel Header -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<?php
$query = mysql_query("select * from slides");
while($row = mysql_fetcj_array($query)){
$slides = $row['image'];
?>
<div class="item active">
<div class="row">
<div class="col-sm-6 col-xs-6"> <img src="<?php echo $slides ?>" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-6 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
</div>
</div>
<?php } ?>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</body>
</html>
Now the problem is that I have my first div class (item active), and others are just item. When I applied my PHP every div gets class (item active) how I applied loop in PHP that my html did not disturb and my slider run accurately.
I don't know if this is the right way to do it or not..but what i will suggest is to not to apply the active class in the loop.. Let the DOM load and then apply it to the first index of class using JS(or Jquery).
$(document).ready(function(){
$("item")[0].addClass("active");
})
OR you can just add an if in the PHP code for the first index
if(index==0){
echo "<p class='item active'></p>";
}else{
echo "<p class='item'></p>";
}
Something like this? Check for first iteration:
<?php
$isFirst = true;
while (image loop) {
// echoing image start...
echo "<img ";
// echoing stuff
if ($isFirst) {
echo "class='active'";
}
// echoing the end of image
echo " />";
$isFirst = false;
}
?>
Can't comment so will answer, sorry.
Where is your PHP? Hard to figure out whats wrong with it without seeing it..
EDIT: Your code only has one item defined. It's surprising the carousel even works. You need to close the div
I had some very strange annoying results while working on my 'project'.
To loop through MySQL results I used a while loop.
One of the lines echo'ed in the while loop now keeps appearing after every closed div.
This is only visible in firebug or another DOM inspector and not in the source code.
I have no idea what is causing it, so any help is appreciated.
Underneath I included all the code involved.
Thanks,
Sam
Btw. This is still in early development so please take that into consideration.
Code:
Firebug:
<div class="contentainer_wrapper">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="wrapper">
<div class="sidebar_navigation gradient">
<ul class="navigation">
<li id="nav1" class="active tip-right" style="height: auto;" data-original-title="Dashboard">
<li id="nav2" class="tip-right" style="height: auto;" data-original-title="Forms">
<li id="nav3" class="tip-right" style="height: auto;" data-original-title="UI Elements">
<li id="nav4" class="tip-right" style="height: auto;" data-original-title="Typography">
<li id="nav5" class="tip-right" style="height: auto;" data-original-title="Tables">
<li id="nav6" class="tip-right" style="height: auto;" data-original-title="Gallery">
<li id="nav7" class="tip-right" style="height: auto;" data-original-title="Grid">
<li id="nav8" class="tip-right" style="height: auto;" data-original-title="Charts">
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</ul>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')">
<div id="canvas" class="content_wrapper">This page was loaded succesfully :D</div>
<div id="loading_modal" class="modal hide fade">
</a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')">
</body>
</html>
Php File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="author" content="Sam Kool">
<title>Admin panel</title>
<link rel="stylesheet" href="../css/bootstrap.css"/>
<link rel="stylesheet" href="../css/bootstrap-responsive.css"/>
<link rel="stylesheet" href="../css/style.css"/>
<!--[if IE 8]><link href="css/ie8.css" rel="stylesheet"><![endif]--><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body onLoad="prepare()">
<?php
session_start();
if(!isset($_SESSION['name'])){
header('Location: http://localhost/CMS/Admin/');
}
include ('../config.php');
?>
<div class="highligts_content">
<div class="container-fluid">
<div class="stats">
<div class="row-fluid">
<div class="span12">
<div class="statistics">
<ul class="quickstats">
<?php
$conn = mysql_connect($config['db_host'], $config['db_user'], $config['db_pass']);
$conn = mysql_select_db($config['db_db']);
$mysql['sql'] = " SELECT *
FROM admin_layout
WHERE enabled = '1' and type = 'quickstats'
";
$mysql['query'] = mysql_query($mysql['sql']);
while($row = mysql_fetch_array($mysql['query'])){
echo '<li> <img src="../img/icons/'.$row["image"].'" alt=""> <span>'.$row["title"].'</span> </li>';
}
mysql_close();
?>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="contentainer_wrapper">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="wrapper">
<div class="sidebar_navigation gradient">
<ul class="navigation">
<?php
$i = 1;
$conn = mysql_connect($config['db_host'], $config['db_user'], $config['db_pass']);
$conn = mysql_select_db($config['db_db']);
$mysql['sql'] = " SELECT *
FROM admin_components
WHERE enabled = '1'
";
$mysql['query'] = mysql_query($mysql['sql']);
while($row = mysql_fetch_assoc($mysql['query'])){
echo '<li id="nav'.$i.'" class="tip-right" data-original-title="'.$row["title"].'" style="height: auto;">';
echo '<a class="'.$row["icon"].'" onClick="load_page(\'nav'.$i.'\', \''.$row["url"].'\')">';
echo '<span class="tab_label" style="visibility: visible;">'.$row["title"].'</span>';
echo '<span class="tab_info" style="visibility: visible;">'.$row["description"].'</span></li>';
$i ++;
}
mysql_close();
?>
</ul>
</div>
</div>
<div class="content_wrapper" id="canvas">
</div>
<div class="modal hide fade" id="loading_modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Loading....</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function load_page(id, component){
if($('#'+id).attr('class') == 'active tip-right'){
alert('nope');
return;
}
$('.navigation li').each(function(i){
var myClass = $(this).attr("class");
if(myClass == 'active tip-right'){
$(this).attr('class', 'tip-right');
}
});
$('#'+id).attr('class', 'active tip-right');
$('#loading_modal').modal('show');
setTimeout(function(){
$('#canvas').load('/SCMS/admin/components/'+component, function(){
$('#loading_modal').modal('hide');
});
},1000);
}
function prepare(){
$('#nav1').attr('class', 'active tip-right');
$('#canvas').load('/SCMS/admin/components/dashboard.php');
$('#loading_screen').modal({
keyboard: false,
hide: true
})
}
</script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/jquery.dataTables.js"></script>
</body>
</html>
The DOM inspector is almost always correct, your HTML source is wrong. When things like this happen, it usually indicates you forgot to close a tag, or that you closed them in the wrong order.
This is an extremely easy mistake to make when echoing out html, because you dont usually have indentation or IDE color coding to help you out.
In your second while loop, it appears you opened an a tag and didnt echo out the closing tag.
echo '<li id="nav'.$i.'" class="tip-right" data-original-title="'.$row["title"].'" style="height: auto;">';
//OPENED AN A TAG HERE
echo '<a class="'.$row["icon"].'" onClick="load_page(\'nav'.$i.'\', \''.$row["url"].'\')">';
echo '<span class="tab_label" style="visibility: visible;">'.$row["title"].'</span>';
echo '<span class="tab_info" style="visibility: visible;">'.$row["description"].'</span></li>';
//OOPS, ENDED LI WITHOUT ENDING A