Refering to this question , it has a helpful answer but it's partial answer because it only shows three unique popup dialogs - static.
I'm new to jQuery and working in this project. I want this to be dynamic with MySql database. Let's say I have a collection of 20 products stored in a tbl_products and each product has a uniqe id, name and price. When user clicks for more product details, I want to display the Magnific popup dialog that shows the product details, showing the product image(small thumbnail), product name and product price.
This link is inside loop:
<a class="popup-with-zoom-anim" href="#small-dialog" data-item="<?php echo $row["product_id"]; ?>">Open with fade-zoom animation</a><br>
Here is the Code:
<div class="page-content">
<?php
$query = "SELECT * FROM tbl_product ORDER BY product_id ASC LIMIT 20";
$result = mysqli_query($connect, $query);
$ctr = 0;
if(mysqli_num_rows($result) > 0)
{
$i = 0;
$param = 'right';
while($row = mysqli_fetch_array($result))
{
//echo "<h2>" . $row[0] . "</h2>";
$data = $row["product_image"];
$images = explode(";", $data);
if($param=='left'){
$param = "right";
}
else{
$param = "left";
?><div class="clear"></div><?php
}
?>
<a class="popup-with-zoom-anim" href="#small-dialog" data-item="<?php echo $row["product_id"]; ?>">Open with fade-zoom animation</a><br>
<div id="small-dialog" class="zoom-anim-dialog mfp-hide">
<span class="fa fa-check fa-3x" style="color: black; margin-left:45%;"></span>
<h3 style="text-align:center; margin-top:0px;margin-bottom:20px;">Artikulli u shtua në shportë</h3>
<div class="table-responsive" style="border: none !important;">
<table style="border: none !important;">
<tr>
<th width="80%"></th>
<th width="20%"></th>
</tr>
<tr>
<td style="font-size:12px;">
<div class="news-thumbs" style="margin-left:0px; margin-right:20px;">
<a href="#" class="news-item">
<div style="line-height: 0.5cm;border: 1px solid #ccc; margin-bottom:5px; width:100%; height:110px; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 5px 1px rgba(0,0,0,0.1);">
<amp-img class="responsive-img" src="../../../../../images/images/gallery/preview/<?php echo $images[0]; ?>" width="100" height="100" layout="responsive"></amp-img>
<h5><?php echo $row[1];?></h5>
<p style "font-size:11px;">
<?php
foreach(range(1, $row[10]) as $i)
{
?>
<span class="fa fa-star checked" style="color: #ffa500;"></span>
<?php
}
?>
</p>
</div>
</a>
</div>
</td>
<td style="margin-left:-50px; font-size:28px; font-style:bold; line-height:20px;">€<?php echo $row[2];?> <br>
<p style="font-size:11px; font-style:bold;">TVSH - 8% </p>
<p style="font-size:10px; line-height:20px;">Dërgesa Falas</p>
Shiko detalet
</td>
<td style="font-size:12px;"> </td>
</tr>
</table>
</div>
<hr style="border-top: 0.5px solid #E8E8FF;">
<button type="button" class="btn btn-default popup-modal-dismiss">Vazhdo me blerje</button>
<button type="button" style="float:right;" class="btn btn-primary">Kryje porosinë</button>
<!-- </div>
<div class="news-thumbs" style="margin-left:-50px;">
<a href="#" class="news-item">
<div style="line-height: 0.5cm;border: 1px solid #ccc; margin-bottom:5px; width:100%; height:110px; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 5px 1px rgba(0,0,0,0.1);">
<amp-img class="responsive-img" src="../../../../../images/images/gallery/preview/<?php echo $images[0]; ?>" width="100" height="100" layout="responsive"></amp-img>
<h5><?php echo $row[1];?></h5>
<p><?php echo $row[2];?></p>
</div>
</a>
<hr style="border-top: 0.5px solid #E8E8FF;">
</div> -->
</div>
<a href="m-detail-<?php echo $row[0]; ?>.html">
<div class="half-material-box-<?php echo $param; ?>">
<span class="fa fa-heart-o fa-2x"style="color: red; aria-hidden="false";></span>
<!--<i class="center-text full-bottom huge-icon color-yellow-dark fa fa-bolt"></i>-->
<amp-img src="../../../../../images/images/gallery/preview/<?php echo $images[0]; ?>" layout="responsive" width="127" height="130"></amp-img>
<p class="center-text small-text half-bottom">
<!--<i class="fa fa-angle-right"></i><?php echo substr_replace($row[1], "...", 60);?>-->
</p>
<h3 class="small-text lef-text bold" name="hidden_name" style="color:#969696;"><?php echo $row[1]; ?></h3>
<h4 class="left-text thick" name="hidden_price" style="color:#f94b2b;">€ <?php echo $row[2]; ?></h4>
<?php
foreach(range(1, $row[10]) as $i)
{
//echo $i;
?>
<span class="fa fa-star checked" style="color: #ffa500;"></span>
<?php
}
?>
</div>
</a>
<!-- </form> -->
<?php
}
}
?>
<div class="clear"></div>
</div>
jQuery:
(function ($) {
$(document).ready(function() {
$(".popup-with-zoom-anim").each(function() {
$(this).magnificPopup({
type: 'inline',
fixedBgPos: true,
fixedContentPos: true,
overflowY: 'hidden',
closeBtnInside: false,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
})(jQuery);
It shows the Popup dialog the way I want but the problem is that it shows the same data no matter what product I click!
I can't figure it out weather it has problem with Id or .each instance in jQuery. Any help would be appreciated!
Thank you!
Related
I am creating a QR Code scanning web application which will run locally on a pc. It scans a qr code with unique id and marks the entry of the user using pc camera. I want to add a pop up in which before marking entry into the system, it asks whether to enter the person or not (security reasons at my company). If the user clicks yes, it marks the entry otherwise nothing happens.
Here is my code:
index.php
<?php session_start();?>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PBSO GATEPASS</title>
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/instascan.min.js"></script>
<!-- DataTables -->
<link rel="stylesheet" href="plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
#divvideo{
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body style="background:#eee">
<nav class="navbar" style="background:#2c3e50">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> <i class="glyphicon glyphicon-qrcode"></i> WELCOME TO IOCL-PBSO (Marketing Division)</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span> Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-cog"></span> Maintenance <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-user"></span> List of Trainees</li>
<li><span class="glyphicon glyphicon-plus-sign"></span> Add New Trainee</li>
<li><span class="glyphicon glyphicon-calendar"></span> Attendance</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-align-justify"></span> Reports</li>
<li><span class="glyphicon glyphicon-time"></span> Check Attendance</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<!--<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>-->
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-4" style="padding:10px;background:#fff;border-radius: 5px;" id="divvideo">
<center><p class="login-box-msg"> <i class="glyphicon glyphicon-camera"></i> TAP HERE</p></center>
<video id="preview" width="100%" height="50%" style="border-radius:10px;"></video>
<br>
<br>
<?php
if(isset($_SESSION['error'])){
echo "
<div class='alert alert-danger alert-dismissible' style='background:red;color:#fff'>
<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>
<h4><i class='icon fa fa-warning'></i> Error!</h4>
".$_SESSION['error']."
</div>
";
unset($_SESSION['error']);
}
if(isset($_SESSION['success'])){
echo "
<div class='alert alert-success alert-dismissible' style='background:green;color:#fff'>
<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>
<h4><i class='icon fa fa-check'></i> Success!</h4>
".$_SESSION['success']."
</div>
";
unset($_SESSION['success']);
}
?>
</div>
<div class="col-md-8">
<form action="CheckInOut.php" method="post" class="form-horizontal" style="border-radius: 5px;padding:10px;background:#fff;" id="divvideo">
<i class="glyphicon glyphicon-qrcode"></i> <label>SCAN QR CODE</label> <p id="time"></p>
<input type="text" name="studentID" id="text" placeholder="scan qrcode" class="form-control" autofocus>
</form>
<div style="border-radius: 5px;padding:10px;background:#fff;" id="divvideo">
<table id="example1" class="table table-bordered">
<thead>
<tr>
<td>NAME</td>
<td>GATE ID</td>
<td>TIME IN</td>
<td>TIME OUT</td>
<td>LOGDATE</td>
</tr>
</thead>
<tbody>
<?php
$server = "localhost:3404";
$username="root";
$password="hunter2";
$dbname="qrcodedb";
$conn = new mysqli($server,$username,$password,$dbname);
$date = date('Y-m-d');
if($conn->connect_error){
die("Connection failed" .$conn->connect_error);
}
$sql ="SELECT * FROM attendance LEFT JOIN student ON attendance.STUDENTID=student.STUDENTID WHERE LOGDATE='$date'";
$query = $conn->query($sql);
while ($row = $query->fetch_assoc()){
?>
<tr>
<td><?php echo $row['LASTNAME'].', '.$row['FIRSTNAME'].' '.$row['MNAME'];?></td>
<td><?php echo $row['STUDENTID'];?></td>
<td><?php echo $row['TIMEIN'];?></td>
<td><?php echo $row['TIMEOUT'];?></td>
<td><?php echo $row['LOGDATE'];?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-success pull-right" onclick="Export()">
<i class="fa fa-file-excel-o fa-fw"></i> Export to excel
</button>
</div>
<script>
function Export()
{
var conf = confirm("Please confirm if you wish to proceed in exporting the attendance in to Excel File");
if(conf == true)
{
window.open("export.php",'_blank');
}
}
</script>
<script>
let scanner = new Instascan.Scanner({ video: document.getElementById('preview')});
Instascan.Camera.getCameras().then(function(cameras){
if(cameras.length > 0 ){
scanner.start(cameras[0]);
} else{
alert('No cameras found');
}
}).catch(function(e) {
console.error(e);
});
scanner.addListener('scan',function(c){
document.getElementById('text').value=c;
document.forms[0].submit();
});
</script>
<script type="text/javascript">
var timestamp = '<?=time();?>';
function updateTime(){
$('#time').html(Date(timestamp));
timestamp++;
}
$(function(){
setInterval(updateTime, 1000);
});
</script>
<script src="plugins/jquery/jquery.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/datatables/jquery.dataTables.min.js"></script>
<script src="plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script>
$(function () {
$("#example1").DataTable({
"responsive": true,
"autoWidth": false,
"order": [[ 2, "desc" ]],
});
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
});
});
</script>
</body>
</html>
here is CheckInOut.php
<?php
session_start();
$server = "localhost:3404";
$username="root";
$password="hunter2";
$dbname="qrcodedb";
$conn = new mysqli($server,$username,$password,$dbname);
if($conn->connect_error){
die("Connection failed" .$conn->connect_error);
}
if(isset($_POST['studentID'])){
echo "<link rel='stylesheet' href='plugins/css/bootstrap.min.css'>";
echo "<script>";
echo "$(document).ready(function(){";
echo "$('#myModal').modal('show')";
echo "});";
echo "</script>";
echo "<div id='myModal' class='modal fade'>";
echo "<div class='modal-dialog'>";
echo "<div class='modal-content'>";
echo "<div class='modal-header'>";
echo "<h5 class='modal-title'>Attention!!! </h5>";
echo "<button type='button' class='close' data-dismiss='modal'>×</button>";
echo "</div>";
echo "<div class='modal-body'>";
echo "<p>Authorize the user</p>";
echo "</div>";
echo "<div class='modal-footer'>";
echo "<button type='button' class='btn btn-primary'>Allow</button>";
echo "<button type='button' class='btn btn-secondary' data-dismiss='modal'>Deny</button>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<script src='plugins/jquery/jquery.min.js'></script>";
echo "<script src='plugins/bootstrap/js/bootstrap.min.js'></script>";
$studentID =$_POST['studentID'];
$date = date('Y-m-d');
$time = date('H:i:s A');
$sql = "SELECT * FROM student WHERE STUDENTID = '$studentID'";
$query = $conn->query($sql);
if($query->num_rows < 1){
$_SESSION['error'] = 'Cannot find QRCode number '.$studentID;
}else{
$row = $query->fetch_assoc();
$id = $row['STUDENTID'];
$sql ="SELECT * FROM attendance WHERE STUDENTID='$id' AND LOGDATE='$date' AND STATUS='0'";
$query=$conn->query($sql);
if($query->num_rows>0){
$sql = "UPDATE attendance SET TIMEOUT='$time', STATUS='1' WHERE STUDENTID='$studentID' AND LOGDATE='$date'";
$query=$conn->query($sql);
$_SESSION['success'] = 'Successfuly Time Out: '.$row['FIRSTNAME'].' '.$row['LASTNAME'];
}else{
$sql = "INSERT INTO attendance(STUDENTID,TIMEIN,LOGDATE,STATUS) VALUES('$studentID','$time','$date','0')";
if($conn->query($sql) ===TRUE){
$_SESSION['success'] = 'Successfuly Time In: '.$row['FIRSTNAME'].' '.$row['LASTNAME'];
}else{
$_SESSION['error'] = $conn->error;
}
}
}
}else{
$_SESSION['error'] = 'Please scan your QR Code number';
}
header("location: index.php");
$conn->close();
?>
Please help me in creating the pop up. The pop up code does not work, but rest of the code works
the code is working but it has a bug that if you first add a item and go to the modal it will show first the disabled button before the enable if you go back to the item
<script>
$(document).ready(function(){
$("div.container1").click(function(){
$('#show_cart').load('temp_user_cart.php');
if ($("table#dataTable tbody").length) {
$("#deleteButton").attr("disabled", false);
console.log(true);
}
})
});
</script>
Thank for your suggestion and insight, I already solve the problem by using php
<div class="" style="text-align: center; ">
<div class="pl-2 pr-2 pt-3 pb-0" style="display:inline-block;border: 2px solid black; border-radius:5px; ">
<?php
$sqlbd = "SELECT SUM(item_total) AS SUB_TOTAL FROM temp_cart WHERE temp_id = '".$_SESSION['temp_id']."' ";
$resultbd = $conn->query($sqlbd);
while($rowbd = $resultbd->fetch_assoc()){
if ($rowbd['SUB_TOTAL'] == 0) {
?><p style="color: green; ">EMPTY CART</p>
<?php
}else{
?><p style="color: green; "> ₱ <?php echo $rowbd['SUB_TOTAL']; ?>.00</p>
<?php
}
?>
</div>
</div>
<?php
if($rowbd['SUB_TOTAL'] == 0){
?>
<div style="text-align:right;">
<div style="display: inline-block;">
<a href="check-out.php">
<button type="button" id="deleteButton" class="btn btn-primary" disabled="disabled">Go to cart</button>
</a>
</div>
</div>
<?php
}else{
?>
<div style="text-align:right;">
<div style="display: inline-block;">
<a href="check-out.php">
<button type="button" id="deleteButton" class="btn btn-primary">Go to cart</button>
</a>
</div>
</div><?php
}
}
?>
I am trying to display QR code inside the ID card. Now I am trying to print 10 ID cards at single time, so I had put the ID card design inside a for-each loop but I cannot register the JavaScript code inside the for-each loop. Only one QR code is display. I mean JavaScript is registered just once inside a loop.
I have registered JavaScript inside for-each loop and name of .js file is qr.js. My Code for ID card design is:
<div id="printableContainer">
<div class="aaa" style="width: 100%;font-size: 12px;padding: 5px 0px;">
<?php
foreach ($students as $stuKey => $student) {
$patron = \app\models\Patrons::findOne(['patron_id' => $student->patron_id]);
if ($patron) {
if ($patron->type == 1) {
$model = \app\models\std\Student::find()
->joinWith([
"fkStudent",
])
->where(["student.id" => $patron->patron_id])
->one();
if ($model !== null) {
$patrons_details = $model;
}
// $patrons_details = null;
}
} else {
return "No Patron found by this name";
}
?>
<?php if ($i % 6 != 0) {
?>
<div id='data' sid="<?= $patrons_details['student']->id; ?>" >
</div>
<?php
$this->registerJs($this->render("qr.js"), 5);
?>
<div class=" w3-margin-top" style="float: left;margin-left:5px;margin-right:5px;margin-top:5px;margin-bottom:25px;">
<div class="id-card-holder" style="border: 1px solid;">
<div class="id-card">
<div class="row row1">
<div class="header">
<div class="col-md-3 " style="float:left;padding: 0px;">
<img src="<?= Yii::getAlias('#web') . "/images/" . $college->logo ?>" style="width:50px; height: 42px;"/>
</div>
<div class="col-md-9" style="text-align: center;padding: 0px;line-height: 1">
<!--<span style="font-size: 10px; color: red !important;font-weight: bold !important"><?= $college->affiliated_to ?></span><br>-->
<span style='font-size: 10px;color:black !important; font-weight: bold !important'><?= $college->college_name ?></span><br>
<span style="font-size: 9px; color: blue !important;font-weight: bold !important"><?= $college->address ?></span><br>
</div>
</div>
</div>
<div class="row row1" style="background-color:#e48b8b;margin-right: -4px !important;margin-left: -4px !important;margin-top:5px ">
<h6 style="margin-top: 3px;margin-bottom: 3px;">Student ID Card</h6>
</div>
<div class="row row1">
<div class="col-md-6 " style="float:left" >
<div class="photo" >
<img style="width:77px;height:77px;padding-top: 3px;border: 1px solid;" class="" src="<?= \yii\helpers\Url::to(["/image/index", 'name' => $patrons_details['fkStudent']->img, 'fc' => 'student', 'student' => $patrons_details['fkStudent']->id]) ?>" >
</div>
</div>
<div class="col-md-6" >
<div class="qrphoto" >
<div id="qrcode"></div>
</div>
</div>
</div>
<h5 style="margin-top:4px !important;
margin-bottom:0px !important;"><b><?= $patrons_details['fkStudent']->first_name . ' ' . $patrons_details['fkStudent']->middle_name . ' ' . $patrons_details['fkStudent']->last_name ?></b></h5>
<div class="row row1">
<div class="col-md-12" style="text-align: justify;padding: 0px;line-height: 0.74">
<div class="" style="line-height: 1 !important;padding: 1px 0px 0px 3px !important;margin-top: 6px;">
<?php if ($patron->renual_status == 0) { ?>
<span style="font-size: 10px; color: #6d6969; font-weight: bold;">Card No. :-</span> <span style="font-size: 10px; color :#3e3b3b !important;font-weight: bold;"><?= $patron->patron_id ?></span><br>
<?php } else { ?>
<span style="font-size: 10px; color: #6d6969; font-weight: bold;">Card No. :-</span> <span style="font-size: 10px;color :#3e3b3b !important; font-weight: bold;"><?= $patron->patron_id ?>-<?= $patron->renual_status ?></span><br>
<?php
}
?>
<span style="font-size: 10px; color: #6d6969; font-weight: bold;"> Address :-</span><span style="font-size: 10px; color: #3e3b3b; font-weight: bold;"> <?= $patrons_details['fkStudent']->address1 ?></span><br/>
<span style="font-size: 10px; color: #6d6969; font-weight: bold;"> Program :-</span><span style="font-size: 10px; color: #3e3b3b !important; font-weight: bold;"> <?= $patrons_details["fkProgram"]->code . ',' . $patrons_details["fkPeriod"]->code ?></span><br>
<span style="font-size: 10px; color: #6d6969; font-weight: bold;"> Roll No :-</span><span style=" font-size: 10px; color:#3e3b3b !important; font-weight: bold;"> <?= $patrons_details->roll_no; ?> </span><br/>
<span style="font-size: 10px; color: #6d6969; font-weight: bold;"> Phone no.:-</span><span style=" font-size: 10px; color:#3e3b3b !important; font-weight: bold;"><?= $patrons_details['fkStudent']->phone; ?></span><br>
<span style="font-size: 10px; color: #6d6969; font-weight: bold;"> Validity:-</span> <span style="font-size: 10px; color: #3e3b3b !important; font-weight: bold;"> <?= date('Y/m/d', $patron->valid_till); ?></span>
</div>
</div>
</div>
<hr style="margin-bottom:5px">
<div class="row row1">
<div class="col-md-12">
<p>If found please return to office | Tel: <?= $college->phone1 ?> <?php
if (!empty($college->phone)) {
echo ', ' . $college->phone2;
}
?></p>
</div>
</div>
</div>
</div>
</div>
<?php
} else {
echo '</div><div class="w3-padding-16" style="width: 100%;font-size: 12px;padding: 5px 0px;">';
}
}
?>
</div>
</div>
<?php
$this->registerJs($this->render("print.js"), 5);
?>
Now in qr.js file my js file is:
$(document).ready(function () {
var qrcode = new QRCode("qrcode");
var f = $('#data').attr('sid');
qrcode.makeCode(f);
});
How can i solve this problem?
Change id="data" to class="data" and add qr.js only once
$(document).ready(function () {
$(".data").each(function(i,e){
var qrcode = new QRCode("qrcode");
var f = $(e).attr('sid');
qrcode.makeCode(f);
})
});
I am trying to create a dropdown (hamburger) menu for my mobile website using the div tag "mobile-links".
I have it all written out (HTML, CSS, and JavaScript) and it is working fine, except I can not get the menu to close by clicking the hamburger again when the menu is open.
Visitors MUST click a link to exit the dropdown menu, which I do not want them to have to do.
I would like to have the menu close by clicking the hamburger once again.
I can see in my JavaScript code that it is removing "show", which I thought would close the menu.
Here is my HTML/PHP and JavaScript code:
This code lives in my "header.phtml" file
<div class="spanbar">
<div class="header-bar container">
<div class="mobile-links">
<div class="dropdown">
<onclick="myFunction()" class="dropbtn">
<span>
<img src="http://www.smockedoverstocks.net/skin/frontend/lee/default/images/hamburger-menu.png"/>
</span>
</button>
<div class="dropdown-content">
<div class="quick-access five columns omega">
<?php echo $this->getChildHtml('topLinks') ?>
</div>
</div>
</div>
</div>
<span>FREE SHIPPING ON ALL ORDERS<span>
<div class="desktop-links">
<div class="quick-access five columns omega">
<?php echo $this->getChildHtml('topLinks') ?>
</div>
</div>
</div>
</div>
<div class="header-container">
<header class="container main-header">
<?php if ($this->getIsHomePage()):?>
<h3 class="logo seven columns alpha">
<a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo">
<img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" />
</a>
</h3>
<?php else:?>
<h3 class="logo seven columns alpha">
<a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo">
<img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" />
</a>
</h3>
<?php endif?>
<div class="desktop-links">
<div class="quick-access five columns omega">
<?php echo $this->getChildHtml('store_language') ?>
<?php echo $this->getChildHtml('topSearch') ?>
</div>
</div>
<!-- <div class="mobile-links">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">
<span>Menu</span>
</button>
<div class="dropdown-content">
<div class="quick-access five columns omega">
<?php echo $this->getChildHtml('topLinks') ?>
<?php echo $this->getChildHtml('store_language') ?>
<?php echo $this->getChildHtml('topSearch') ?>
</div>
</div>
</div>
</div> -->
<!-- <h3 class="welcome-msg">
<?php echo $this->getChildHtml('welcome') ?>
<?php echo $this->getAdditionalHtml() ?>
</h3> -->
<?php echo $this->getChildHtml('topContainer'); ?>
</header>
<div class="nav-bar-boarder"></div>
</div>
<?php echo $this->getChildHtml('topMenu') ?>
<?php echo $this->getChildHtml('topScripts') ?>
<script language="javascript">
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
My CSS:
.mobile-links .dropdown {
position:relative;
display:inline-block;
padding:2px 13px 0px;
}
.mobile-links .dropdown-content{
display:none;
position:absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 5px 12px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display:block;
}
.show { display:block; }
Any help would be appreciated. Thanks!
I need some help with my navigation bar item, i have a shopping cart that is supposed to expand on mouse over. Which works, but the expansion is appearing behind other menu items and i cant figure out why. I have tried putting the z-index to ridiculous values and made the position absolute. Still no success.
Here is the Nav html:
<nav class="navbar navbar-inverse">
<div class="container">
<div class="container" style="background-color: #2a3968; margin-bottom:10px;">
<ul class="collapse navbar-collapse nav navbar-nav navbar-right" style="margin-top:-10px;">
<li style = "color:white;">
<?php
if($this->request->session()->read('Auth')) {
// user is logged in, show "account" link
echo $this->Html->link(__('Account'), ['controller' => 'Users', 'action' => 'Index']);
}
?>
</li>
<span style="color:white; margin-top:-15px;">
<li style = "color:white; margin-right:15px;">
<?php
if($this->request->session()->read('Auth')) {
// user is logged in, show logout..user menu etc
echo $this->Html->link(__('Logout'), ['controller' => 'Users', 'action' => 'logout']);
} else {
// the user is not logged in
echo '<span style="color:white">'.$this->Html->link(__('Login/Register'), ['controller' => 'Users', 'action' => 'login']).'</span>';
}
?>
</li>
</span>
</ul>
</div>
<div class="navbar-header" style="margin-top:-25px; margin-bottom:-15px;">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container">
<div class="col-sm-6">
<a href="http://localhost/team12/pages/home">
<img src="http://ie.infotech.monash.edu/Team12/Build4/GIT/webroot/img/silverdeals.png" class= "logo" style=" padding-bottom:10px; height:70px; float:left;">
</a>
</div>
<div class="col-sm-6" style="vertical-align:center; color:white; padding-top:10px; padding-right:-15px;">
<ul>
<li style="display: inline-block; float:right;">
<?php
echo $this->element('quick_cart');
?>
</li>
<li style="display: inline-block; float:right;"> | </li>
<li style="display: inline-block; float:right; "> Secure Shipping anytime </li>
<li style="display: inline-block; float:right; "> | </li>
<li style="display: inline-block; float:right; "> <?php echo $this->element('search');?> </li>
</ul>
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><?= $this->Html->link(__('Home'), ['controller' => 'Pages', 'action' => 'home']) ?></li>
<li><?= $this->Html->link(__('Products'), ['controller' => 'Products', 'action' => 'Index']) ?></li>
<li><?= $this->Html->link(__('New Arrivals'), ['controller' => 'Products', 'action' => 'newarrivals']) ?></li>
<li><?= $this->Html->link(__('Rings'), ['controller' => 'Products', 'action' => 'rings']) ?></li>
<li><?= $this->Html->link(__('Bracelets'), ['controller' => 'Products', 'action' => 'bracelets']) ?></li>
<li><?= $this->Html->link(__('Earrings'), ['controller' => 'Products', 'action' => 'earrings']) ?></li>
<li><?= $this->Html->link(__('Necklaces'), ['controller' => 'Products', 'action' => 'necklaces']) ?></li>
<li><?= $this->Html->link(__('Sales'), ['controller' => 'Products', 'action' => 'sales']) ?></li>
<li><?= $this->Html->link(__('Contact Us'), ['controller' => 'Pages', 'action' => 'About']) ?></li>
</ul>
</div>
</nav>
Here is the shopping cart code:
<style>
.hide{display:none}
.quickcart {
position: absolute;
z-index: 99999;
width: 300px;
border: 10px solid #bebebe;
background-color: white;
padding: 8px 10px 10px;
color: #000000;
right:1%;
}
#show-quick-cart {
cursor:auto;
float:none;
color: #000000;
z-index:2000;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:120%;
text-decoration: none;
line-height: 5px;
text-align: center;
display: inline-block;
vertical-align: middle;
box-sizing:inherit;
}
.nav{
z-index: 100;
}
</style>
<div id="pardiv" style=" color:white;">
<?php
$counter = $this->request->session()->read('Cart.count');
echo $this->Html->link('<span style="color:white;" class="glyphicon glyphicon-shopping-cart"></span><span style="color:white; "></span><span class="badge" id="cart-counter"><?php echo $counter ;?></span>', array('controller'=>'Pages','action'=>'display','shoppingCart'), array('escape'=>false, 'id'=>'show-quick-cart'));
?>
<div id="show-quick-cart-zone">
<div id="quickcart" class="quickcart hide">
<div class="quickcarttitle"><span><b>Your cart</b></span></div>
<div class="quickcart-products">
<?php if ($this->request->session()->check('Cart.items')){
?>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<?php
$products = $this->request->session()->read('Cart.items');
$cartTotal = 0;
foreach ($products as $product):
?>
<tbody>
<tr>
<td><img src="<?= h($product['PicURL']) ?>" alt="BlueMountain"></td>
<td><?php echo $product['Quantity'];?></td>
<?php if(isset($product['SalePrice'])){
$cartTotal += $product['SalePrice']*$product['Quantity'];
?>
<td><?php echo $product['SalePrice']*$product['Quantity'];?></td>
<?php
}
else {
$cartTotal += $product['UnitPrice']*$product['Quantity'];
?>
<td><?php echo $product['UnitPrice']*$product['Quantity']; ?></td>
<?php
}
?>
<td><?= $this->Form->postLink(__('x'), ['controller'=>'products', 'action' => 'removeFromCart', $product['ProductID']], ['confirm' => __('Are you sure you want to remove {0} from the cart?', $product['ProductName'])]) ?></td>
</tr>
<?php endforeach; ?>
<tr>
<td></td>
<td><b>Total:</b></td>
<td><?php echo $cartTotal; ?> </td>
<td></td>
</tr>
</tbody>
</table>
</div>
<?php
} else {
?>
<p><b> is empty!</b></p>
<?php
}
?>
</div>
</div>
</div>
</div>
<script>
var flag=0;
$('#show-quick-cart').mouseenter(function () {
$('#quickcart').slideDown(500);
return false;
});
$('#pardiv').mouseleave(function () {
$('#quickcart').slideUp(500);
return false;
});
</script>
Any help is appreciated, thank you all very much.