I am facing a kind of problem that maybe I can't properly tell you guys about. I am working with a management system where my menu bar is fixed to display the whole page. meaning the menu bar is always showed. But the problem is-->my other page content displayed upon my menu bar,that is occurred.please show this pic below->
look my search box is displaying upon my menu bar. That is happening when I scroll my page.
First my menu bar is inside my body tag. the for selving this problem is took it to the head tag->but still problem is occurring.
code->
<!-- top navigation bar -->
<div style="position: fixed; width: 100%" class="w3-container w3-teal">
<ul class="w3-navbar w3-container">
<li class="w3-right" >Log Out</li>
<li class="w3-right w3-dropdown-hover w3-hover-orange">
<a class="w3-hover-orange" >Options<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
change password
</div>
</li>
<li class="w3-right" >User Profile</li>
<li class="w3-right" >Home</li>
<li class="w3-right" ><button class="w3-btn w3-black" id="sgo">Go</button></li>
<li class="w3-right" ><input type="text" class="w3-input" id="text-search" placeholder="Search.."></li>
</ul>
</div>
<!-- end of top navigation bar -->
and body->
<body class="w3-theme">
<?php include 'pageSideNavigationBar.php'; ?>
<section class="w3-row-padding w3-theme" style="margin-left:165px;" id="main-content">
<div id="guts">
<a style=" margin-left: 88%;width: 11%;border-radius: 2px;" class="w3-btn-block w3-green w3-section w3-padding" onclick="$('#addABatch').show()">Add A Batch</a><br>
<!-- TABLE TO SHOW THE DATA -->
<div class="w3-container">
<p>Available Batch details....</p>
<table id="myTable" class="display" data-page-length="25" data-order="[[ 1, "asc" ]]" width="100%">
<thead>
<tr>
<th>Batch Code</th>
<th>Course Name</th>
<th data-orderable="false">Batch Starting Date</th>
<th>Faculty Name</th>
<th>Room Number</th>
<th>Amount</th>
<th>Routine</th>
<th>Delete Batch</th>
</tr>
</thead>
<tbody>
and closing tags. sorry can't give full code->>>>
what is the problem. why this is happening.....
add this to your navbar style
z-index: 99999;
it should work
Related
I am creating a website that uses SQL queries to show, input, modify, delete data from a database. I am using CSS to show/hide the main div (#accounts-page/#hardware-page) content for the main navigation menu. This works good, but the issue comes in when I have another menu inside that div element and try to navigate to content within that submenu. The desired is that the table on each 'page' will still be shown after a submenu button is clicked, along with the content of that submenu button below it.
I have tried using JavaScript, jQuery, plain CSS & HTML, but can't seem to wrap my head around all the examples that I've searched up online and apply it to my situation.
Here is a stripped down version of HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="wrapper">
<ul id="main-nav" class="menu">
<li>Accounts</li>
<li>Hardware</li>
</ul>
<div id="accounts-page" class="">
<table id="accounts-table">
<tr>
<th>ID</th>
<th>Email</th>
<th>Password</th>
<th>Recovery Email</th>
<th>Phone Number</th>
<th>Birth Date</th>
<th>Username</th>
</tr>
</table>
<ul class="submenu" style="text-align:center">
<button>Add account</button>
<button>Modify Accounts</button>
<button>Delete Account</button>
</ul>
<div class="column" id="add-acc">
<p>Add account content</p>
</div>
<div class="column" id="del-acc">
<p>Delete account content</p>
</div>
</div>
<div id="hardware-page">
<table id="hardware-table">
<tr>
<th>ID</th>
<th>Category</th>
<th>Manufacturer</th>
<th>Model</th>
</tr>
</table>
<div class="submenu">
<ul class="" style="text-align:center">
<button>Add hardware</button>
<button>Modify hardware</button>
<button>Delete hardware</button>
</ul>
</div>
<div class="full" id="add-hdwre">
<p>Add hardware content</p>
</div>
<div id="edit-hdwre">
<p>Edit hardware content</p>
</div>
<div id="del-hdwre">
<p>Delete hardware content</p>
</div>
</div>
<div id="computers-page" class="tab-content">
</div>
<div id="games-page" class="tab-content">
</div>
</div>
</body>
</html>
And CSS:
#accounts-page #add-acc,
#edit-acc,
#del-acc,
#add-hdwre,
#edit-hdwre,
#del-hdwre {
display: none;
}
#accounts-page #add-acc:target,
#edit-acc:target,
#del-acc:target,
#add-hdwre:target,
#edit-hdwre:target,
#del-hdwre:target {
display: block;
}
#accounts-page,
#hardware-page {
display: none;
}
#accounts-page:target,
#hardware-page:target {
display: block;
}
Or the JSFiddle for your convinience
My first thought is to use child selectors, but I can't quite seem to figure out how to implement it. Any pointers or recommendations would be highly valued.
If there is an easier way to implement this within javascript/jQuery then please let me know.
EDIT: When the submenu links on each 'page' are clicked (add-acc,edit-acc, etc) the URL is changed to that ID, which I am assuming is where the problem lies and I need to direct the link to the child of the page. Example: #accounts-page > #add-acc
Images:
URL after 'Add Account' submenu link is clicked
URL after 'Accounts' main menu link is clicked
I eventually got to the solution by following this StackOverflow Question and it's Answers, who helped me tremendously.
Here is the JSFiddle with the desired result.
Using Javascript to navigate the main navigation solved the issue. I don't know why I couldn't understand from the countless other questions I saw but this solution works for me.
Thanks to Jared for his explanation in the comments about display:block;, it was insightful to debugging the issue.
Added Javascript:
function ShowContent(content) {
document.getElementById("accounts-page").style.display = 'none'
document.getElementById("hardware-page").style.display = 'none';
document.getElementById(content).style.display = 'block';
}
Modified CSS:
.submenu {
margin: auto;
padding: 7px 0 7px 0;
font-size: 24px;
text-align: center;
}
.hide {
display: none;
}
.hide:target {
display: block;
}
Updated HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="wrapper">
<ul class="menu">
<li>Accounts</li>
<li>Hardware</li>
</ul>
<div id="accounts-page" class="hide">
<table id="accounts-table">
<tr>
<th>ID</th>
<th>Email</th>
<th>Password</th>
<th>Recovery Email</th>
<th>Phone Number</th>
<th>Birth Date</th>
<th>Username</th>
</tr>
</table>
<ul class="submenu" style="text-align:center">
<button>Add account</button>
</ul>
<div class="hide" id="add-acc">
<p>Add account content</p>
</div>
</div>
<div id="hardware-page" class="hide">
<table class="hardware-table">
<tr>
<th>ID</th>
<th>Category</th>
<th>Manufacturer</th>
<th>Model</th>
</tr>
</table>
<div class="submenu">
<ul class="submenu" style="text-align:center">
<button>Add hardware</button>
</ul>
</div>
<div class="hide" id="add-hdwre">
<p>Add hardware content</p>
</div>
</div>
</div>
</body>
</html>
I have 4 tab menus. Initially,I have displayed the last inserted db record in one of the tabs.
But after some period of time duration,the content in that tab where checked and move to the next tab.
I will be using javascript,php and laravel framework.And I have no idea with this.
Please give me some references on this.
Controller code:
public function show()
{
$pendingFiles= priceInfo::all()->first();
$count= count($pendingFiles);
return view('MyList')->with('pendingFiles',$pendingFiles)-
>with('count',$count);
}
this is my controller code..Here itself I had a doubt that,How to get the records based on updated time.
View code:
<div id="nonlive" class="tab-pane fade pull-center">
<br/>
<ul class="nav nav-tabs navbar-centre">
<li class="active pull-left" ><a data-toggle="tab" href="#qcverified">
<h4 ><strong>QCVerified</strong></h4></a></li>
<li class="pull-center"><a data-toggle="tab" href="#qcfailed"><h4>
<strong>QCFailed</strong></h4></a></li>
<li class="pull-center"><a data-toggle="tab" href="#qcpending"><h4>
<strong>QCPending ({{$count}})</strong></h4></a></li>
<li class="pull-center"><a data-toggle="tab" href="#archieved"><h4>
<strong>Archieved;</strong></h4></a></li>
<br>
</ul>
<div class="tab-content">
<div id="qcverified" class="tab-pane fade in active">
</div>
<div id="qcfailed" class="tab-pane fade pull-center">
</div>
<div id="qcpending" class="tab-pane fade pull-center">
<div class="row marketing">
<div class="col-lg-15 tab-div" id="version_database" >
<div class='div-tab'>
<div class="box">
<div class="box-header">
</div><!-- /.box-header -->
<div class="box-body table-responsive">
<table id="example1" class="table table-bordered table-
hover dataTable" role="grid" aria-describedby="example2_info">
<thead>
<tr class="header">
<th valign="middle" width="3%">S.no</th>
<th valign="middle" width="10%">Product Details</th>
<th valign="middle" width="5%">SKUID</th>
<th valign="middle" width="20%">Type of Request</th>
<th valign="middle" width="5%">Action</th>
</tr>
</thead>
<tbody role="alert">
<td>{{$pendingFiles->productId}}</td>
<td>{{$pendingFiles->productName}}</td>
<td>{{$pendingFiles->SKUID}}</td>
<td>Create Request Listing</td>
<td>action</td>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="archieved" class="tab-pane fade pull-center">
</div>
</div>
</div>
You can try like this.
Firstly, you add url on each tab. like following.
Tab1: http://localhost/somepage/tab/1
Tab2: http://localhost/somepage/tab/2
Tab3: http://localhost/somepage/tab/3
And in javascript, you can trigger timer.
<script>
var tab_id = '{{$tab_id}}';
var time_in_ms = 10000;
setTimeout(function(){
location.href = '/somepage/tab/' + (tab_id + 1);
}, time_in_ms);
</script>
So, I have build a simple page with bootstrap, which has two links on it. The idea is that when a one of them is clicked a different some content contained in a div must be shown.
This is one of the divs(the other one follows the same pattern) :
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li id = "productsActive" **class="active"**><a href="#">
PRODUCTS
<span class="sr-only">(current)</span></a></li>
<li id = "usersActive"><a href="#">
USERS
</a></li>
</ul>
</div>
<div id = "products">
<input id="txtProductName" type="text" placeholder="productname">
<input id="txtProductPrice" type="text" placeholder="product price">
<button id="btnAddProduct">Add product</button>
<input id="txtSearch" type="text" placeholder="search">
<div class="bs-example" data-example-id="hoverable-table">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>product Name</th>
<th>Price</th>
</tr>
</thead>
<tbody id="lblProducts">
</tbody>
</table>
</div>
Then, when the users link is clicked I am giving it's in the navbar an active status.
I am doing this with this code :
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
And here all my problems start.
I am unable to make so that the content for users is shown when the users <li> is active and the same for products when it's clicked instead of suers.
if($('#productsActive').hasClass('active')){
console.log("xxx");
$('#products').hide();
$('#users').show();//users is set is always huidde with the hide() function.
}
All I get is a mess of everything displayed silumtaneously without being able to control the content display by clicking on the links.
Please help.
Any input will be highly appreciated.
I want to display a different image in JSP on clicking a different links in the same JSP.
Can any one please help me in displaying image with respect to the DIV id.
here are my links bellow
<table class="contentTable" cellspacing=1 cellpadding=0 border=0 >
<tr class="altRow1">
<th class="fieldName" nowrap="nowrap" align="center" colspan="<%=metricCols %>">Business statistics </th>
</tr>
<tr>
<div class="greyBorderBox bottomSpacer10">
<ul class="noBullet" >
<li class="nav-off" ><a class="headerNav-myworkspace" href="#" onClick="show_app1(this.id);" id="id_1">link1</a></li>
<li class="nav-off" ><a class="headerNav-myworkspace" href="#" onClick="show_app2(this.id);" id="id_2">link2</a></li>
</ul></td></tr>
below are the two DIV parts to be displayed
<tr class="altRow1">
<!-- if link1 is clicked this part should be displayed -->
<%if(bus.exists())){ %>
<div id="id1"> <td class="fieldName" style="vertical-align:top;" id="id1">
<img height="240px" src= "C:\Users\Desktop\graph.GIF" style="align:'center';" ></img>
</td></div>
<!-- if link2 is clicked this part should be displayed -->
<% }else { %>
<div id="id2"><td class="fieldName" style="vertical-align:top;">
<img height="240px" src= "C:\Users\Desktop\Capture.GIF" style="align:'center';" ></img>
</td>
<%
}
</div> </tr>
Put user defined attribute inside link and send only this param as a references like so :
<li class="nav-off" ><a class="headerNav-myworkspace" href="#" onClick="show_app(this);" id="id_1" data-target="id1">link1</a></li>
<li class="nav-off" ><a class="headerNav-myworkspace" href="#" onClick="show_app(this);" id="id_2" data-target="id2">link2</a></li>
One more thing, id should be unique(remove id="id1" inside img tag), change into this :
<div id="id1" style="display:none">
<td class="fieldName" style="vertical-align:top;" >
<a href="C:\Users\Desktop\graph.GIF" target="_blank"><img height="240px" src= "C:\Users\Desktop\graph.GIF" style="align:'center';" ></img>
</a>
</td>
</div>
For initial state, just hidden those two div using style="display:none", see above code. Same applied for second div.
And JS would be :
<script>
function show_app(e){
var target = $(e).data('target');
$('#'+target).toggle();
// ... another rest of code
}
</script>
In HTML, you can try like this: Demo
Added #id1, #id2 in href of <a> and used those id's for <div>
<ul class="noBullet" >
<li class="nav-off" ><a class="headerNav-myworkspace" href="#id1">link1</a></li>
<li class="nav-off" ><a class="headerNav-myworkspace" href="#id2">link2</a></li>
</ul>
<div id="id1">test 1 </div>
<div id="id2">test 2 </div>
I'm currently designing a UI for an automated parking system. One of the pages (garage status) has a table which contains spot numbers and their corresponding ticket numbers. The valet has to be able to type in either a spot number or ticket number into the search box and as he types each letter, the options in the table are filtered according to what he types. I'm using List.js for this, however, I also need to have an onscreen keypad for the valet to input the numbers, which for that I use jQuery Keypad plugin. Unfortunately, filtering is only performed if I directly input from my laptop keyboard, not when I use the keypad plugin. I would be very grateful if someone could give some input on how to solve this problem.
<!DOCTYPE html>
<html>
<title>Garage Status</title>
<head>
<!-- Import materialize.css -->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="css/menu.css"/>
<!--Import Material Design icons-->
<link href="font/material-design-icons/material.css" rel="stylesheet" />
<!--Import jQuery before materalize.js-->
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<!--Import jQuery Keypad CSS-->
<link type="text/css" href="css/jquery.keypad.aps.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.plugin.js"></script>
<script type="text/javascript" src="js/jquery.keypad.js"></script>
<!--Touchscreen keypad for ticket num input just in case ticket scanner doesn't work or they want to edit the ticket number (e.g.ticket scanner makes mistake)-->
<script>
$(document).ready(function(){
$('#grgKeypad').keypad({target: $('.search'),layout: ['789'+ $.keypad.CLEAR,'456' + $.keypad.BACK,'1230-']
});
});
</script>
</head>
<body>
<!--Page Title Panel-->
<div class="card-panel">
<h4>GARAGE STATUS</h4>
<!--Options button, reveals dropdown menu with options to switch to other pages-->
<a id="optionsbtn" class='dropdown-button btn-large' href='#' data-activates='dropdown1' data-constrainwidth='false'>Options</a>
<!--Quick access buttonss to inpark and outpark menus-->
<a id="quick_outpark_btn" class="waves-effect waves-light btn-large" href="outmenu.html">OUTPARK</a>
<a id="quick_inpark_btn" class="waves-effect waves-light btn-large" href="inmenu.html">INPARK</a>
</div>
<!--Dropdown menu structure and it's items-->
<ul id="dropdown1" class="dropdown-content">
<li>Dashboard</li>
<li class="divider"></li>
<li>Inpark</li>
<li class="divider"></li>
<li>Outpark</li>
<li class="divider"></li>
<li>Shuffle</li>
<li class="divider"></li>
<li>Outpark Queue Menu</li>
<li class="divider"></li>
<li>Transactions</li>
</ul>
<!--Dashboard Button, press to return to dashboard-->
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large waves-effect waves-light" href="dashmenu.html">
<!--Home icon-->
<i class="material-icons" style="font-size: 48px"></i>
</a>
</div>
<!--Form that takes ticket number or spot number and searches for that car's ticket number and spot number-->
<!--Note that the search form shouldn't be sending data back to the server to search for the car, the data should already be loaded onto the page and the search should be performed with the already loaded data or something like that idk if you want to change-->
<div id="locations">
<div class="row">
<form class="col s7" style="margin: 0px; padding: 0px;">
<div class="row">
<div class="input-field col s9">
<input placeholder="Enter ticket or spot number" id="search" type="search" class="search">
<label for="search"><i class="material-icons" id="searchicon"style="font-size: 48px"></i></label>
</div>
</div>
</form>
</div>
<!--Table that displays cars in the garage-->
<!--Data will be dynamically displayed, currently these are just placeholder data-->
<div class="table" id="searchtable">
<table class="centered striped bordered scroll">
<thead>
<tr>
<th>Spots</th>
<th>Ticket Number</th>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="spot">1-22-35</td>
<td class="ticketnum">696969</td>
</tr>
<tr>
<td class="spot">1-22-34</td>
<td class="ticketnum">696968</td>
</tr>
<tr>
<td class="spot">6-22-33</td>
<td class="ticketnum">696967</td>
</tr>
<tr>
<td class="spot">1-22-32</td>
<td class="ticketnum">696966</td>
</tr>
<tr>
<td class="spot">8-22-31</td>
<td class="ticketnum">696965</td>
</tr>
<tr>
<td class="spot">8-22-30</td>
<td class="ticketnum">696964</td>
</tr>
<tr>
<td class="spot">1-22-39</td>
<td class="ticketnum">696953</td>
</tr>
</tbody>
</table>
</div>
<!--Div containing the keypad-->
<div id="grgKeypad"></div>
<!--Import List.js-->
<script src="list.js"></script>
<script>
var options = {
valueNames: ["spot","ticketnum"]
};
var userList = new List("locations",options);
</script>
</body>
</html>