displaying value from database to html modal in php not working - javascript

I have a PHP page where I am displaying data according to the id fetched from the URL, the data is displayed fine, now I place of a field name called comment, I have given a button, which on click gives a modal. if I click the button the value should come according to the corresponding id in the modal, but when I click the button, the modal is coming blank, I have done the following code:
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1000;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 20%;
height: 40%
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<table class="table table-borderless table-striped table-earning">
<thead>
<tr>
<tr>
<th>S.NO</th>
<th>View</th>
<th>Edit</th>
<th>Full Name</th>
<th>Mobile</th>
<th>Comment</th>
<th>Space</th>
<th>Email</th>
<th>Enquiry Date</th>
</tr>
</tr>
</thead>
<?php
$ret=mysqli_query($con,"select * from enquiry where Space IS NOT NULL");
$cnt=1;
while ($row=mysqli_fetch_array($ret)) {
?>
<tr>
<td>
<?php echo $cnt;?>
</td>
<td><i class="fa fa-edit fa-1x"></i></td>
<td><i class="fa fa-edit fa-1x"></i></td>
<td>
<?php echo $row['name'];?>
</td>
<td>
<?php echo $row['phone'];?>
</td>
<td><input id="myBtn" type="button" value="Comment"></td>
<td>
<?php echo $row['Space'];?>
</td>
<td>
<?php echo $row['email'];?>
</td>
<td>
<?php echo $row['date'];?>
</td>
</tr>
<?php
$cnt=$cnt+1;
}?>
</table>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close"><!-- × --></span>
<div class="form-style-10">
Hi
<?php echo $row['name'];?>
</div>
</div>
</div>
i have tried closing the while loop after the modal, but then the only one values is displayed in my table, and the modal is displaying that values comment and some html code.
can anyone please tell me what could be wrong here, thanks in advance

please use jQuery a, ajax and bootstrap modal and try the following code
give a class to your comment button and get id as attribute of button
//your jquery function to trigger modal and load data to it
// get_details.php serve the data
$(".your_comment_button").click(function(e){
var modal = document.getElementById("myModal");
e.preventDefault();
var id = $(this).attr('enq_id');
$.ajax({
type:'GET',
url:'get_deatils.php?id='+id,
success:function(data){
$('#myModal').find('.modal-content').html(data);
$('#myModal').modal('show');
}
});
});
});
and your get_details.php looks like
<?php
$con = mysqli_connect("localhost","root","","yourdb");
$id=$_REQUEST['id'];
$enq = mysqli_query($con, "SELECT enquiry.* from enquiry Where id=$id");
$row = mysqli_fetch_array($enq);
?>
<div class="form-style-10">
Hi
<?php echo $row['name'];?>
</div>

Related

Showing div with info while hovering a table does not work

I have a tal template that draws a table, but the function that shows a cell header when hovering doesn't work.
This is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="container"><input class="form-control" id="multi_host_filter" type="text" placeholder="Filter"></div>
<div class="container" tal:repeat="machine_result item.items()">
<button class="btn btn-info btn-sm btn-block btn-expand" type="button" data-toggle="collapse" data-target="#${machine_result[0]}_div" aria-expanded="false" aria-controls="${machine_result[0]}_div" tal:content="machine_result[0]"/>
<div class="collapse container" id="${machine_result[0]}_div">
<table class="table table-hover table-sm table-responsive table-bordered">
<tr tal:repeat="tuple machine_result[1].get('return')">
<th tal:condition="repeat['tuple'].index==0" tal:repeat="data tuple.split(';;')" tal:content="data"/>
<td class="td-hover" tal:condition="repeat['tuple'].index!=0" tal:repeat="data tuple.split(';;')" tal:content="data"/>
</tr>
</table>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#multi_host_filter").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("table tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
$("td").on({
mouseenter: function(e){
var $cell = $(this);
var headerVal = $cell.closest("table").find("tr > th").eq($cell.index()).html();
var paragraph = '<p>' + headerVal + '</p>';
$('#floating_div').html(paragraph);
$('#floating-div').stop(true);
$('#floating_div').css({left: e.pageX, top: e.pageY});
$('#floating_div').width(150);
$('#floating_div').css('z-index', 4000);
$('#floating_div').height(40);
},
mouseleave: function(e){
$('#floating_div').css('z-index', -4000);
$('#floating-div').css('display', 'none');
},
});
</script>
I have already tried $('table').hover(function(){//something}
, function(){//something when leave}) but div is not hidden when i leave table
"#floating-div" is already created at index.html, and i can modify it from this script
Any idea?
When looking over your code, for the most part it seems to be exactly what you are trying to accomplish -- the table was a bit wonky in how it was formatted ( open and close THs and TDs <th>...</th> and <td>...</td> -- but I'm also not familiar with tal templates ).
But reducing your code to the minimums and reusing a lot of it, I generated the below solution.
The only other real edit is that I added in a mouseleave() event on the #floating_div, populating the div immediately underneath the cursor can cause cursor-confusion. Where it thought it was sitting on top of a <td> it is now suddenly sitting on top of a #floating_div. So, "leaving" the <td> doesn't work. This is because the cursor is now on top of something else and will leave that.
$("td").on({
mouseenter: function(e){
//console.log( 'in', this );
let output = $(this).closest("table").find("tr > th").eq($(this).index()).html();
$('#floating_div').html( output );
$('#floating_div').removeClass('hidden');
$('#floating_div').css({left: e.pageX, top: e.pageY});
},
mouseleave: function(e){
//console.log( 'out', this );
$('#floating_div').addClass('hidden');
},
});
$('#floating_div').mouseleave( function(){
$(this).addClass('hidden');
});
*{ margin: 0; padding: 0; font-family: Arial, sans-serif; }
table, td, th{ padding: 5px; border: solid 1px rgba( 0, 0, 0, 0.25); }
#floating_div{
position: absolute;
top: 0;
left: 0;
padding: 15px;
display: block;
background-color: rebeccapurple;
color: white;
pointer-events: none;
}
#floating_div.hidden{
display: none;
top: -1000px;
left: -1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
</tr>
</table>
<div id="floating_div" class="hidden"></div>

Multiple buttons only opening most recent modal in code

Very new to coding here, but I am coding a web app, and I want to have two buttons at the top of the page. one to login/create an account, and another to add a review of the page. I added the first button and got it to display a modal when it was pressed, this all worked fine. I then tried to add a second button that would display another modal, but now both buttons only display the second modal.
Each modal had a small 'x' at the top right corner to exit and this also doesn't work now. Here is my code
The style is all in the head.
/* The Modal (background) */
.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.3); /* Used to grey out the rest of the screen */
}
/* Modal Content */
.modal-content {
background-color: #fefefe; /* Background colour of Modal */
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
The rest of the code is all in the body.
<h2>Modal Testing</h2>
<!-- Buttons to open Modals -->
<button id="loginBtn">Account</button>
<button id="reviewBtn">Add Review</button>
<!-- The Modals -->
<!-- Login/Create Account Modal -->
<div id="loginModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Login details</p>
<!-- Allows the user to input information-->
<form action="/action_page.php">
Username:<br>
<input type="text" name="username" value="">
<br>
Password:<br>
<input type="password" value="" id="userInput">
<br><br>
<input type="checkbox" onclick="visible()">Show Password
</form>
<button id="signInBtn">Sign In</button>
<p>Not got an account? Sign up now!</p>
<button id="signUpBtn">Sign Up</button>
<button id="cancelBtn">Cancel</button>
</div>
</div>
<script>
function visible(){
var x = document.getElementById("userInput");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
<script>
// Get the modal
var modal = document.getElementById('loginModal');
// Get the button that opens the modal
var btn = document.getElementById("loginBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<!-- Add Review Modal -->
<div id="addReviewModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Add Review</p>
<!-- Allows the user to input information-->
<form action="/review_page.php">
Location:<br>
<input type="text" name="location" value="">
<br>
Comments:<br>
<input type="text" name="comments" value="">
<br>
</form>
<button id="submitBtn">Submit Review</button>
<button id="cancelBtn">Cancel</button>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('addReviewModal');
// Get the button that opens the modal
var btn = document.getElementById("reviewBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
You are using your JavaScript in different <script> tags. This does not mean that they are seperate blocks, They just get appended to each other. This means, that when you declare the Variable modal in one block and then declare it again in the second block, the Variable will get overwrited. I changed the Var names to XXX1 and XXX2.
function visible(){
var x = document.getElementById("userInput");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
// Get the modal
var modal1 = document.getElementById('loginModal');
// Get the button that opens the modal
var btn1 = document.getElementById("loginBtn");
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn1.onclick = function() {
modal1.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
modal1.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
}
// Get the modal
var modal2 = document.getElementById('addReviewModal');
// Get the button that opens the modal
var btn2 = document.getElementById("reviewBtn");
// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn2.onclick = function() {
modal2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
modal2.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal2) {
modal2.style.display = "none";
}
}
.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.3); /* Used to grey out the rest of the screen */
}
/* Modal Content */
.modal-content {
background-color: #fefefe; /* Background colour of Modal */
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<h2>Modal Testing</h2>
<!-- Buttons to open Modals -->
<button id="loginBtn">Account</button>
<button id="reviewBtn">Add Review</button>
<!-- The Modals -->
<!-- Login/Create Account Modal -->
<div id="loginModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Login details</p>
<!-- Allows the user to input information-->
<form action="/action_page.php">
Username:<br>
<input type="text" name="username" value="">
<br>
Password:<br>
<input type="password" value="" id="userInput">
<br><br>
<input type="checkbox" onclick="visible()">Show Password
</form>
<button id="signInBtn">Sign In</button>
<p>Not got an account? Sign up now!</p>
<button id="signUpBtn">Sign Up</button>
<button id="cancelBtn">Cancel</button>
</div>
</div>
<!-- Add Review Modal -->
<div id="addReviewModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Add Review</p>
<!-- Allows the user to input information-->
<form action="/review_page.php">
Location:<br>
<input type="text" name="location" value="">
<br>
Comments:<br>
<input type="text" name="comments" value="">
<br>
</form>
<button id="submitBtn">Submit Review</button>
<button id="cancelBtn">Cancel</button>
</div>
</div>
Now the buttons open the corresponding modal.
I will post an update if I figured yout the "Close on X" thing.
Sorry for my bad english ;)
instead of
document.getElementsByClassName("close")[0];
use
modal.getElementsByClassName("close")[0];

Modal With Button Add New Row (ONE ROW EVERY CLICK)

I having issue with modal in headers. When i click header "Safety", it open safety's modal and have manage to add item ONE ROW EVERY CLICK, which is great. When i duplicate my codes for second header, which is "Operate". The issue started.
After i open Safety's modal, added new item and close the modal, I open Operate's modal and add new item. The new item i added is not ONE ROW EVERY CLICK, it added TWO Row EVERY CLICK and sometimes THREE ROW EVERY CLICK.
Please help.
// Get the that opens the Safety NewsFeed
var s_news = document.getElementById('s_news');
var safety = document.getElementById('Safety');
safety.onclick = function() {
s_news.style.display = "block";
$('.AddNew').click(function() {
var row = $(this).closest('tr').clone();
row.find('input').val('');
$(this).closest('tr').after(row);
$('input[type="button"]', row).removeClass('AddNew').addClass('RemoveRow').val('Remove item');
});
$('table').on('click', '.RemoveRow', function() {
$(this).closest('tr').remove();
});
}
// Get the <span> element that closes the modal
var snews_span = document.getElementsByClassName("s_newsclose")[0];
// When the user clicks on <span> (x), close the modal
snews_span.onclick = function() {
s_news.style.display = "none";
}
// Close Safety NewsFeed
window.addEventListener("click", function(s_newsevent) {
if (s_newsevent.target == s_news) {
s_news.style.display = "none";
}
});
///
// Get the that opens the Quality Internal NewsFeed
var qi_news = document.getElementById('qi_news');
var qualityint = document.getElementById('QualityInt');
qualityint.onclick = function() {
qi_news.style.display = "block";
$('.AddNew').click(function() {
var row = $(this).closest('tr').clone();
row.find('input').val('');
$(this).closest('tr').after(row);
$('input[type="button"]', row).removeClass('AddNew').addClass('RemoveRow').val('Remove item');
});
$('table').on('click', '.RemoveRow', function() {
$(this).closest('tr').remove();
});
}
// Get the <span> element that closes the modal
var qinews_span = document.getElementsByClassName("qi_newsclose")[0];
// When the user clicks on <span> (x), close the modal
qinews_span.onclick = function() {
qi_news.style.display = "none";
}
// Close Safety NewsFeed
window.addEventListener("click", function(qi_newsevent) {
if (qi_newsevent.target == qi_news) {
qi_news.style.display = "none";
}
});
/* News Feed (background) */
.s_news,
.qi_news {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
.headercolor {
background-color: rgba(255, 0, 0, 1);
}
/* The Newsfeed Close Button */
.s_newsclose,
.qi_newsclose {
color: #aaa;
float: left;
font-size: 28px;
font-weight: bold;
}
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h2 style="font-size:1.5rem" id=Safety>Safety</h2>
<h2 style="font-size:1.5rem" id=QualityInt>Operate</h2>
<div id="s_news" class="s_news">
<table>
<tr>
<td class=headercolor>ISSUE</td>
<td class=headercolor>ACTION</td>
<td class=headercolor>Add/Remove Item</td>
</tr> <span class="s_newsclose">×</span>
<tr>
<td><input type='text' value='Add New'></td>
<td><input type='text' value='Add New'></td>
<td><input type='button' class='AddNew' value='Add new item'></td>
</tr>
</table>
</div>
<div id="qi_news" class="qi_news">
<table>
<tr>
<td class=headercolor>ISSUE</td>
<td class=headercolor>ACTION</td>
<td class=headercolor>Add/Remove Item</td>
</tr> <span class="qi_newsclose">×</span>
<tr>
<td><input type='text' value='Add New'></td>
<td><input type='text' value='Add New -->'></td>
<td><input type='button' class='AddNew' value='Add new item'></td>
</tr>
</table>
</div>
</body>
</html>
Examine the code nested within the safety.onclick code block. Each time you click "Safety", you're binding a jQuery click() event handler to all elements that have a class attribute of AddNew. You can see this for yourself in the code snippet you provide. Click the header, and immediately close it. Repeat two more times. Now when you click the "Add Item" button you'll see that three new rows display.
Also, notice how the effect you want to achieve is the same for each of your divs. I would recommend a more DRY approach to your code here. Consider an alternative solution where your jQuery event bindings utilize the .on() method and are not nested within the vanilla onclick handler.
$('#s_news, #qi_news').on('click', '.AddNew', function() {
var row = $(this).closest('tr').clone();
row.find('input').val('');
$(this).closest('tr').after(row);
$('input[type="button"]', row)
.removeClass('AddNew')
.addClass('RemoveRow')
.val('Remove item');
});
$('#s_news, #qi_news').on('click', '.RemoveRow', function() {
$(this).closest('tr').remove();
});
Here's an example of implementing the add/remove event handling code: https://jsfiddle.net/v5r2f913
One more bit of general commentary on the provided code sample: since you are using jQuery, you may consider just using that library's selectors and event model, rather than a mixture of jQuery and vanilla JavaScript.
The problem is that your .AddNew class is getting call more than once. Just change the name of the class that targets the click event on both (Safety and Operate). Example: change the first class to ".AddNew1" and the second one to ".AddNew2".
Here's a working solution. Hope it helps!
// Get the that opens the Safety NewsFeed
var s_news = document.getElementById('s_news');
var safety = document.getElementById('Safety');
safety.onclick = function() {
s_news.style.display = "block";
$('.AddNew1').click(function() {
var row = $(this).closest('tr').clone();
row.find('input').val('');
$(this).closest('tr').after(row);
$('input[type="button"]', row).removeClass('AddNew').addClass('RemoveRow').val('Remove item');
});
$('table').on('click', '.RemoveRow', function() {
$(this).closest('tr').remove();
});
}
// Get the <span> element that closes the modal
var snews_span = document.getElementsByClassName("s_newsclose")[0];
// When the user clicks on <span> (x), close the modal
snews_span.onclick = function() {
s_news.style.display = "none";
}
// Close Safety NewsFeed
window.addEventListener("click", function(s_newsevent) {
if (s_newsevent.target == s_news) {
s_news.style.display = "none";
}
});
///
// Get the that opens the Quality Internal NewsFeed
var qi_news = document.getElementById('qi_news');
var qualityint = document.getElementById('QualityInt');
qualityint.onclick = function() {
qi_news.style.display = "block";
$('.AddNew2').click(function() {
var row = $(this).closest('tr').clone();
row.find('input').val('');
$(this).closest('tr').after(row);
$('input[type="button"]', row).removeClass('AddNew').addClass('RemoveRow').val('Remove item');
});
$('table').on('click', '.RemoveRow', function() {
$(this).closest('tr').remove();
});
}
// Get the <span> element that closes the modal
var qinews_span = document.getElementsByClassName("qi_newsclose")[0];
// When the user clicks on <span> (x), close the modal
qinews_span.onclick = function() {
qi_news.style.display = "none";
}
// Close Safety NewsFeed
window.addEventListener("click", function(qi_newsevent) {
if (qi_newsevent.target == qi_news) {
qi_news.style.display = "none";
}
});
.s_news,
.qi_news {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
.headercolor {
background-color: rgba(255, 0, 0, 1);
}
/* The Newsfeed Close Button */
.s_newsclose,
.qi_newsclose {
color: #aaa;
float: left;
font-size: 28px;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 style="font-size:1.5rem" id=Safety>Safety</h2>
<h2 style="font-size:1.5rem" id=QualityInt>Operate</h2>
<div id="s_news" class="s_news">
<table>
<tr>
<td class=headercolor>ISSUE</td>
<td class=headercolor>ACTION</td>
<td class=headercolor>Add/Remove Item</td>
</tr> <span class="s_newsclose">×</span>
<tr>
<td><input type='text' value='Add New'></td>
<td><input type='text' value='Add New'></td>
<td><input type='button' class='AddNew1' value='Add new item'></td>
</tr>
</table>
</div>
<div id="qi_news" class="qi_news">
<table>
<tr>
<td class=headercolor>ISSUE</td>
<td class=headercolor>ACTION</td>
<td class=headercolor>Add/Remove Item</td>
</tr> <span class="qi_newsclose">×</span>
<tr>
<td><input type='text' value='Add New'></td>
<td><input type='text' value='Add New -->'></td>
<td><input type='button' class='AddNew2' value='Add new item'></td>
</tr>
</table>
</div>

javascript/php simple drop down menu logout

to save space, I would like to consolidate the username and logut buttons at the top of web template into one link. The username would be visible and when you hover over it as in stack overflow or click as in gmail or fb, you have option to logout or do other account related things. Ideally, would like to do this in css or javascript without jquery overhead.
Can anyone recommend simple javascript or other technique as I am very inexperienced in javascript. Don't need complicated full blown drop down menu. It should be something like below, but below is unpredictable...shows menu when page loads etc. Thx.
<html>
<head>
<script>
showMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'block';
}
hideMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'none';
}
</script>
</head>
<body>
<table>
<tr>
<td onmouseover="showMenu()" >username</td>
</tr>
</table>
<div id="box1" onmouseout="hideMenu()">
Logout<br>
</div>
</body>
</html>
UPDATE- this should fix the "jumping" problem:
<html>
<head>
<style type="text/css">
.username {
width: 100px;
border: 1px solid #ff0000;
padding: 3px;
text-align: center;
position: relative;
display: inline-block;
}
#box1 {
display: none;
text-align: center;
position: absolute;
background-color: #ccc;
}
</style>
<script>
showMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'block';
}
hideMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'none';
}
</script>
</head>
<body>
<table>
<tr>
<td colspan=3 align="left">
<img src=":">
</td>
<td colspan=6 valign="bottom" align="right">Menu1 Menu2 Menu3 Menu4 Menu5 Menu6 Menu7
<div class="username" onmouseover="showMenu();" onmouseout="hideMenu();">Username
<span id="box1">
Logout
</span>
</div>
</td>
</tr>
<tr>
<td colspan=9>
<hr color="red">
</td>
</tr>
</table>
</body>
</html>
The problem is that absolute positioning doesn't work the same inside of a span than as it does a div. So I had to change the "username" span to a div and use absolute position for the "box1" span. You could even change the "box1" span to a div as well so it occupies the whole width possible of the "username" div. Let me know how this one goes!
Here is the version where it jumps up. If you put position: absolute; in the style tag the menu extends one more cell to the right past the other columns...
.username {
}
#box1 {
display: none;
}
</style>
<script>
showMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'block';
}
hideMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'none';
}
</script>
</head>
<body>
<table><tr>
<td colspan=3 align="left"><img src=":"></td>
<td colspan=6 valign="bottom" align="right">Menu1 Menu2 Menu3 Menu4 Menu5
Menu6 Menu7 <span class="username" onmouseover="showMenu();"
onmouseout="hideMenu();">Username<span id="box1">
Logout
</span>
</span></b></td></tr>
<tr><td colspan=9><hr color = "red"></td></tr>
</table>
</body>
</html>

Jquery javascript not working on Safari 5

This script works fine in IE & FF not in safari 5. It appears not to intialize (ie nothing works). The Script will display one row of the table at a time hiding the others until next or previous is clicked. Original can be viewed on halifaxhype.com If anyone can make a suggestion I would appreciate it as I am not normally working with java script or Jquery or Safari. (java script followed by HTML below - due to posting restrictions anchor links and image links removed from the html)
JS - initial
$(document).ready(function () {
$('#myTable').paginateTable({ rowsPerPage: 1 });
});
JS - main
(function ($) {
$.fn.paginateTable = function(options) {
var settings = jQuery.extend({
rowsPerPage: 1, /* the number of rows that comprise a page */
nextPage: ".nextPage", /* selector for "Next Page" dom element. Click to change page. */
prevPage: ".prevPage", /* selector for "Previous Page" dom element. Click to change page. */
currentPage: ".currentPage", /* selector for "Current Page" dom element. Display only. */
totalPages: ".totalPages", /* selector for "Total Pages" dom element. Display only. */
pageNumbers: ".pageNumbers", /* selector for container for autogenerated page number links */
pager: ".pager",
pagernext: ".pagernext",
pagerprev: ".pagerprev", /* selector for container of all paging dom elements */
autoHidePager: true /* hides the pager (see selector above) if there is only a single page */
}, options || {});
return this.each(function(){
var table = $(this);
var pager = $(settings.pager);
var pagernext = $(settings.pagernext);
var pagerprev = $(settings.pagerprev);
var nextPage = pagernext.find(settings.nextPage);
var prevPage = pagerprev.find(settings.prevPage);
var currentPage = pager.find(settings.currentPage);
nextPage.click(function(){
var pageNum = getCurrentPage(currentPage.text());
displayPage(table, pageNum+1, settings);
return false;
});
prevPage.click(function(){
var pageNum = getCurrentPage(currentPage.text());
displayPage(table, pageNum-1, settings);
return false;
});
displayPage(table, getCurrentPage(currentPage.text()), settings);
});
};
function getCurrentPage(pageText){
var pageNum = parseInt(pageText,10);
if (isNaN(pageNum)){
pageNum = 0;
}
return Math.max(1, pageNum);
}
function displayPage(table, pageNum, settings){
pageNum = Math.max(1, pageNum);
if (settings.rowsPerPage > 0){
var rows = table.find("tbody tr");
var totalPages = Math.ceil(rows.size() / settings.rowsPerPage);
if (pageNum <= 1){
$(settings.pagerprev).hide();
}
if (pageNum > 1){
$(settings.pagerprev).show();
}
if (pageNum >= totalPages){
$(settings.pagernext).hide();
}
if (pageNum < totalPages){
$(settings.pagernext).show();
}
if (settings.autoHidePager && totalPages <= 1){
$(settings.pager).hide();
}
else if (totalPages > 0){
pageNum = Math.min(pageNum, totalPages);
var rowStartIndex = (pageNum - 1) * settings.rowsPerPage;
var rowEndIndex = pageNum * settings.rowsPerPage;
$.each(rows, function(index, row){
if (index >= rowStartIndex && index < rowEndIndex){
$(row).show();
}
else{
$(row).hide();
}
});
var pager = $(settings.pager);
pager.find(settings.currentPage).text(pageNum);
pager.find(settings.totalPages).text(totalPages);
var pageNumbers = pager.find(settings.pageNumbers);
if (pageNumbers.size() > 0){
pageNumbers.empty();
for(var i = 1; i <= totalPages; i++) {
pageNumbers.append("<a href='#' id='" + i + "'>" + i + "</a>");
}
pageNumbers.children('a').click(function(){
displayPage(table, $(this).attr("id"), settings);
return false;
});
}
}
}
}
})(jQuery);
HTML
<!-- Main Body (middle) -->
<table><tr>
<td style='padding-left: 0px; padding-right: 0px; height: 275px; ; width: 666px;' >
<!-- Table to Contain 1-Prev, 2-Events, 3-Next -->
<table border=0 bordercolor=orange width='100%' cellpadding='0' cellspacing='0'><tr>
<!-- 1-Prev -->
<td width='25' valign='middle' align='center'> <div class='pagerprev'>
<a href='#' alt='Previous' class='prevPage'> <PREV image link removed</div> </td>
<!-- 2-Events -->
<td>
<!-- Table for Events This is what Slides in and out-->
<table id="myTable" border=0 bordercolor=red width=100%><tbody>
<!--- Event loop#1 Event ID#52 --->
<tr><td style='padding-left: 15px; padding-right: 15px;' valign='top' width='508'><div class='eslider' align='left' style='float: left; width=200'>image</div><div id='eslider' align='right' style='float: right;width=300'><span style='font-family: Verdana; color: #ffffff; font-size: 23px; font-weight: bold;'>Bitter End</span><br><span style='font-family: Verdana; color: #D4D4D4; font-size: 18px;'>Martini Monday at The Bitter End!</span> <hr height='1' width='100%'><span style='font-family: Verdana; color: #D4D4D4; font-size: 12px;'> <p>Absolutely the best place to be on a Monday night in Halifax! Featuring a discounted martini menu and DJ Nigel Lutes. Disc<br><br>Mon, Jan 31, 2011 - All Day </div> </center></td></tr>
<!--end event-->
<!--- Event loop#2 Event ID#95 --->
<tr><td style='padding-left: 15px; padding-right: 15px;' valign='top' width='508'><div class='eslider' align='left' style='float: left; width=200'>image</div><div id='eslider' align='right' style='float: right;width=300'><span style='font-family: Verdana; color: #ffffff; font-size: 23px; font-weight: bold;'>Mexicali Rosa's</span><br><span style='font-family: Verdana; color: #D4D4D4; font-size: 18px;'>Double Margaritas! Only $6.00!</span> <hr height='1' width='100%'><span style='font-family: Verdana; color: #D4D4D4; font-size: 12px;'> <p>Every Monday!<br />- Double Margaritas! Only $6.00! (Taxes in)<br />- 32 oz. Canadian or Coors Light Draught - $8.99</p>
<br><br>Mon, Jan 31, 2011 - All Day </div> </center></td></tr>
<!--end event-->
<!--- Event loop#3 Event ID#54 --->
<tr><td style='padding-left: 15px; padding-right: 15px;' valign='top' width='508'><div class='eslider' align='left' style='float: left; width=200'>image</div><div id='eslider' align='right' style='float: right;width=300'><span style='font-family: Verdana; color: #ffffff; font-size: 23px; font-weight: bold;'>Economy Shoe Shop</span><br><span style='font-family: Verdana; color: #D4D4D4; font-size: 18px;'>Homemade Lasagna & House Salad only $9.00!</span> <hr height='1' width='100%'><span style='font-family: Verdana; color: #D4D4D4; font-size: 12px;'> Hungry? Stop by The Economy Shoe Shop for our "Feature Of The Day"! Only $9.00 all day long! Monday's Feature Of The Day: We<br><br>Mon, Jan 31, 2011 - 08:00</div> </center></td></tr>
<!--end event-->
<tbody>
</table>
<!-- END Table for Events -->
</td>
<!-- 3-Next -->
<td width='25' valign='middle' align='center'><div class='pagernext'>next link removed</div> </td>
</tr>
<tr valign="top"><td colspan="3" height="33" align='center'>
<div class='pager'>
<!-- bottom stuff to view events and profile more neatly this could be removed if <Div> code could be fixed see above -->
View Profile
Click Here For More Detailsbr><br>
<!-- End of bottom stuff to veiw events and profile more neatly-->
<font color='#ffffff' size='5'>
<span class='currentPage' ></span></font>
<font color='#ffffff' size='2'> of </font>
<font color='#ffffff' size='5'><span class='totalPages'></span></font>
</div>
</td></tr>
<!-- END Main Body (middle) -->
</table>
Your HTML is very broken. Validate your HTML first, then try again. I have attempted to reproduce your problem here, but see no problems with Safari.

Categories

Resources