filling a blank between two bars - css - html

I'm trying to move the blue bottom bar to paste it to the top blue bar, but I can't find how, any help please?
screenshot: http://hpics.li/1b82a29
Fiddle
HTML code :
<%# page pageEncoding="UTF-8"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<script language="javascript">
var timeforhide;
function showMenu(menuID) {
clearTimeout(timeforhide)
document.getElementById('menu').style.visibility = 'visible'
}
function hideMenu(menuID) {
timeforhide = setTimeout("didHideMenu()", 700)
}
function didHideMenu() {
document.getElementById('menu').style.visibility = 'hidden'
}
</script>
</head>
<body>
<div>
<ul id="nav">
<li>Forum</li>
<c:if test="${!empty utilisateur }">
<li>Profil</li>
<li>Se déconnecter</li>
</c:if>
<c:if test="${empty utilisateur}">
<li>Se connecter</li>
<li>S'inscrire</li>
</c:if>
<li>Nous contacter</li>
<form method="post" action="<c:url value="/search"/>">
<input type="text" placeholder="recherche..." class="search"
required onFocus="showMenu('menu')" onBlur="hideMenu('menu')"/>
</form>
</ul>
<table id="menu"
style="position: absolute; visibility: hidden; margin-left: 850px; width: 400px; color: #ffffff;">
<tr>
<td>Recherche par :
<td><input type="radio" name="choice" value="sujet" checked />sujet</td>
<td><input type="radio" name="choice" value="post" />post</td>
<td><input type="radio" name="choice" value="utilisateur" />utilisateur</td>
</tr>
</table>
</div>
</body>
</html>

I think this is probably what you're after: http://jsfiddle.net/UQzQD/3/
You should start with a good CSS reset. I used * selector to reset padding and margin in this example and it looks like what I think you want in FF, Chrome, and Safari.
http://meyerweb.com/eric/tools/css/reset/
I fixed some errors in your HTML as well.
language="javascript" is obsolete, <form method="post" action="<c:url value="/search"/>"> isn't valid.

Related

HTML form with dropdownlist using jsp code

I have this form used to insert data into a database.
I want to change one value selecting from a dropdownlist connected to a mysql database.
This is the form:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<body>
<div id="container">
<form onsubmit="return checkempty(form1)" action="Data_insert.jsp" method="post" name="form1">
<table id="table" width="25%">
<tr>
<td><label for="emp_name">Name: </label></td>
<td><input type="text" name="emp_name" id="emp_name"></td>
</tr>
<tr>
<td><label for="emp_country">Country: </label></td>
<td><input type="text" name="emp_country" id="emp_country"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="button" id="button" value="Add"></td>
</tr>
</table>
<p><br>
</p>
</form>
</div>
</body>
</html>
But to fill the country I want to use a jsp getting the data from Mysql DB with a jsp code:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<%# page import="java.sql.*" %>
<%ResultSet resultset =null;%>
<HTML>
<%
try{
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/db","root","1234");
Statement statement = connection.createStatement() ;
resultset =statement.executeQuery("select country_id, country_name from country") ;
%>
<center>
<h1> Drop down box or select element</h1>
<select>
<option value="0">Select Country</option>
<% while(resultset.next()){ %>
<option value="<%=resultset.getInt("country_id")%>"> <%= resultset.getString("country_name")%></option>
<% } %>
</select>
</center>
<%
//**Should I input the codes here?**
}
catch(Exception e)
{
out.println("wrong entry"+e);
}
%>
</BODY>
</HTML>
Both codes work independent. My question is how can I integrate the Country dropdown list into the form.
Thanks !
You can achieve above in following ways :
1) . Put all your code in same page and use jquery/js to assign value of <select> to your <input..> like below :
//onchange of select this will execute
$("select").on("change", function() {
//getting value of select-box
var value = $(this).val();
//assign value to input with id="emp_country"
$("#emp_country").val(value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!-- put your db connection code here-->
Select-box:
<select>
<option value="0">Select Country</option>
<!--put your option code here-->
<option value="something">Something</option>
</select>
<!--put catch block here-->
<form onsubmit="return checkempty(form1)" action="Data_insert.jsp" method="post" name="form1">
<table id="table" width="25%">
<tr>
<td><label for="emp_name">Name: </label></td>
<td><input type="text" name="emp_name" id="emp_name"></td>
</tr>
<tr>
<td><label for="emp_country">Country: </label></td>
<td><input type="text" name="emp_country" id="emp_country"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="button" id="button" value="Add"></td>
</tr>
</table>
<p><br>
</p>
</form>
2).In CountryDropdown.jsp put your select-box inside <form></form> with a submit button like below :
<form method="post" action="Yourformpagename">
<%
<!--connection code->
%>
<center>
<h1> Drop down box or select element</h1>
<select name="country">
<option value="0">Select Country</option>
<% while(resultset.next()){ %>
<option value="<%=resultset.getInt(" country_id ")%>">
<%= resultset.getString("country_name")%>
</option>
<% } %>
</select>
</center>
<%
<!--catch block code here-->
%>
<input type="submit" value="SEND" />
</form>
And then get it in your form page like below:
<input type="text" name="emp_country" id="emp_country" value="${param.country}"/>

Some css is not working in IE

I am working on the application. Some of the css are not working in IE, whereas working in Firefox, such as Scrollbar, input types, placeholder, required etc. All of the things are working fine in Firefox as well as Chrome, but not in IE. My IE version is 9.
My Firefox view is
whereas my IE view is -
My css code is -
input[type="submit"]{
background:#3399cc;
width:100%;
border:0;
padding:4%;
font-family:'Open Sans',sans-serif;
font-size:100%;
color:#fff;
cursor:pointer;
transition:background .3s;
-webkit-transition:background .3s;
}
input[type="submit"]:hover{
background:#EE2C2C;
}
input[type="text"]{
width:100%;
background:white;
margin-bottom:2%;
margin-top:2%;
border:1px solid #ccc;
padding:4%;
font-family:'Open Sans',sans-serif;
font-size:95%;
color:black;
}
input[type="password"]{
width:100%;
background:white;
margin-bottom:2%;
margin-top:2%;
border:1px solid #ccc;
padding:4%;
font-family:'Open Sans',sans-serif;
font-size:95%;
color:black;
}
I tried to figure out the issue by so many ways such as change Compatibility View, try but unsucceed.
My html file is -
<%# page contentType="text/html; charset=UTF-8" %>
<%# page import="java.util.*" %>
<html>
<head>
<link rel="shortcut icon" href="images/imageIcon.png" />
<title> IETM Solutions </title>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="styles/ietmLogin.css" type="text/css"></link>
<%
response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
response.setDateHeader("Expires", 0); // Proxies.
response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
System.out.println("session -- A1 - " + session);
if(session != null)
{
session.invalidate();
session = null;
}
System.out.println("session -- A2 - " + session);
%>
</head>
<body>
<div id="LoginImage">
<div id="login">
<h1>IETM Document Management System</h1>
<form action="Login" method="post">
<table>
<tr>
<input type="text" name="user" placeholder="UserName" required = "true"/>
</tr>
<tr>
<input type="password" name="password" placeholder="Password" required = "true"/>
</tr>
<tr>
<input type="submit" value="Login"/>
</tr>
</table>
</form>
</div>
<%
String error = (String) request.getAttribute("error");
//System.out.println("error : "+ error);
if(error != null)
{
%>
<h4 align="center" style="color: red">Invalid User Name/Password</h4>
<% }
%>
</div>
</body>
</html>
Any suggestion/solution will be very helpful.
Thank you.
You have no doctype.
<!DOCTYPE html>
<html>
...
IE is rendering in Quirks Mode, which doesn't support most styles on <input> elements.
Seeing your HTML one question knocking me repeatedly. You drew a table only with <table> and <tr> tags but where is <td> tag which is equally required for drawing table as well? I just simply rewrote your html and it worked fine for me:
<form action="Login" method="post">
<table>
<tr>
<td>
<input type="text" name="user" placeholder="UserName" required="true" />
</td>
</tr>
<tr>
<td>
<input type="password" name="password" placeholder="Password" required="true" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Login" />
</td>
</tr>
</table>
</form>
IE9 is not smart enough to understand markup error. If this works fine in your case please don't forget to widen or style and for more room.

HTML with JavaScript Form validation and JQuery Mobile

In a HTML form I am using JavaScript Form validation to avoid empty fields. This is the code for the form:
<form method="post" name="form1" onsubmit="return validateForm()" action="<?php echo $editFormAction; ?>">
<table align="center">
<tr valign="baseline">
<td nowrap align="right">Nickname:</td>
<td>
<input type="text" name="nickname" value="" size="32">
</td>
</tr>
<tr valign="baseline">
<td nowrap align="right">Email:</td>
<td><input type="text" name="email" value="" size="32"></td>
</tr>
<tr valign="baseline">
<td nowrap align="right">Password:</td>
<td><input type="text" name="password" value="" size="32"></td>
</tr>
<tr valign="baseline">
<td nowrap align="right"> </td>
<td><input type="submit" value="Insert record"></td>
</tr>
</table>
<input type="hidden" name="estado" value="0">
<input type="hidden" name="MM_insert" value="form1">
</form>
And this is the JavaScript function:
<script>
function validateForm()
{
var x=document.forms["form1"]["nickname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
As expected, if the user clicks on the submit button and the field 'nickname' is empty, the Alert Dialog is shown, but after closing it, the form is submitted. I am using Dreamweaver as editor and JQuery Mobile in my web, may be this is the problem.
Any help is welcome.
Working example: http://jsfiddle.net/Gajotres/vds2U/50/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<form method="post" id="form1" name="form1" action="" data-ajax="false">
<table align="center">
<tr valign="baseline">
<td nowrap align="right">Nickname:</td>
<td>
<input type="text" name="nickname" value="" size="32"/>
</td>
</tr>
<tr valign="baseline">
<td nowrap align="right">Email:</td>
<td><input type="text" name="email" value="" size="32"/></td>
</tr>
<tr valign="baseline">
<td nowrap align="right">Password:</td>
<td><input type="text" name="password" value="" size="32"/></td>
</tr>
<tr valign="baseline">
<td nowrap align="right"> </td>
<td><input type="submit" value="Insert record"/></td>
</tr>
</table>
<input type="hidden" name="estado" value="0"/>
<input type="hidden" name="MM_insert" value="form1"/>
</form>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second" data-theme="a" >
<div data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
JavaScript:
$(document).on('submit', '#form1', function(){
var x=document.forms["form1"]["nickname"].value;
if (x==null || x=="") {
alert("First name must be filled out");
return false;
} else {
return true;
}
});
Changes:
jQuery Mobile has its own way of form handling, you need to disable it if you want to have classic form handling. It is done via attribute data-ajax="false".
Never use inline javascript with jQuery Mobile, I mean NEVER.
For me this is working fine :
<script>
function validateForm()
{
var x=document.forms["form1"]["nickname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}else{
return true;
}
}
</script>
Just added a else statement. It's working fine for me.
I think your code should work. But If not you can make some changes as
Change 1 Remove Submit event from tag
<form method="post" name="form1" action="<?php echo $editFormAction; ?>">
Change 2.
Change submit button to default button and validate event here
<input type="button" onclick="javascript:validateForm();" value="Insert record">
Change 3.
Now change in javascript Add code form sub
<script>
function validateForm()
{
var x=document.forms["form1"]["nickname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
}else{
document.forms["form1"].submit();
}
}
</script>

Populate data on same window

Hi, my requirement is to populate the data on same window where i have provide the employee id , Employee Id button and input field is present on left corner the of window and i want to populate the data on right corner of window as shown on figure right now i m population data on different window please help me out .
Here is my JS
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%# taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<jsp:include page="Header.jsp" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="../css/style1.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="1255" height="952" border="0">
<tr>
<td width="357" height="251" bgcolor="#CC6600">
<table width="285" border="0" align="center" bgcolor="#FF9900">
<c:if test="${requestScope.x}">
<div id="div3">
<form:form commandName="departmentForm"
action="/EmployeeWebAppUI/DepartmentController/findbydepartmentid">
<span>Find By ID </span>
<form:input path="departmentId" />
<input type="submit" name="submit1" value="search" />
</form:form>
<br>
</div>
</c:if>
<c:if test="${requestScope.y}">
<div id="div1">
<form:form commandName="departmentForm"
action="/EmployeeWebAppUI/DepartmentController/findbydepartmentname">
<span>Find BY Name</span> <form:input
path="departmentName" />
<input type="submit" name="submit" value="search" />
</form:form>
</div>
</c:if>
<c:if test="${requestScope.w}">
<div id="div2">
<form:form commandName="projectForm"
action="/EmployeeWebAppUI/ProjectController/getprojectsbyId">
<span>Employee Number: </span>
<form:input path="employeeNumber" />
<input type="submit" name="submit2" value="search" />
</form:form>
<br>
</div>
</c:if>
<c:if test="${requestScope.A}">
<div id="div2">
<form:form commandName="employeeForm"
action="/EmployeeWebAppUI/EmployeeGetController/findbyid"
method="get">
<span>Employee Id:</span>
<form:input path="employeeNumber" />
<input type="submit" name="Search" value="Search" />
</form:form>
</div>
</c:if>
<c:if test="${requestScope.B}">
<div id="div1">
<form:form commandName="employeeForm"
action="/EmployeeWebAppUI/EmployeeGetController/findbyname"
method="post">
<span>Employee Name:</span>
<form:input path="firstName" />
<input type="submit" name="Search" value="Search" />
</form:form>
</div>
</c:if>
<c:if test="${requestScope.C}">
<div id="div1">
<form:form commandName="employeeForm"
action="/EmployeeWebAppUI/EmployeeGetController/findByDepatmentId"
method="post">
<span>Department ID:</span>
<form:input path="departmentId" />
<input type="submit" name="Search" value="Search" />
</form:form>
</div>
</c:if>
</table>
<p> </p>
</td>
<td width="888" rowspan="2">
<tr>
<td height="693" bgcolor="#CC6600"></td>
</tr>
</table>
</body>
</html>
Instead of getting complete page get only data from Server and then render data on page using JavaScript.
This is typically possible if you post page asynchronously ( or using Ajax). The way you do is :
Call action by passing input parameters to the server using Ajax.
Get response in JSON form from server
Parse JSON data and then populate page using DOM manipulation.
You can use any JS library like jQuery to simplify your Ajax call as well as doing DOM manipulation.
Assuming you are using jquery
on click of tab or lable do AJAX request .
It will call your servlet and write the data into ajax response there.
on client side onsuccess do the required stuff .
function changeCOntent(type){
$.ajax({
type: 'POST',
url: 'servletpath?type=passtype',
success:function(data){
$('#contentDiv').innerHTML = data;
}
});
}

Table disappears in Firefox and Chrome

I have a table and when I load the page in Firefox or chrome its shifted off the screen to the the right leading to most of the table disappearing, the table should be located in the middle of the screen and seems to be overlapping on the right outside of the page area.
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Small North Run</title>
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<link rel="stylesheet" href="default.css" type="text/css">
<link rel="stylesheet" href="sponsor.css" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<h1>SMALL NORTH RUN</h1>
</header>
<nav>
<ul id="navlist">
<li>HOME</li>
<li>TRAINING REGIME</li>
<li>FORUM</li>
<li>SPONSOR</li>
<li>CONTACT</li>
</ul>
</nav>
<hr id="hrnav" />
<div id="content">
<p>This page allows you to sponsor a particular runner. Just simply select the name of the runner you wish to sponsor from the drop down list, then enter the amount you wish to donate followed by a brief message for the runner and then your name. Once making a donation the runner you have sponsored will be notified by email that you have made a donation.</p>
<br/>
<br/>
<br/>
<br/>
<form method="post" action="test.php">
<table>
<tr><td><label>Runner:</label></td>
<td>
<select name="fullname">
<?php do{?>
<option value="<?php echo $rsNames['user_ID']; ?>"> <?php echo $rsNames['first_Name'];?> <?php echo $rsNames['last_Name'];?></option>
<?php } while ( $rsNames= mysql_fetch_assoc($names_query))?>
</select>
</td>
</tr>
<tr><td><label>Donation (£):</label></td><td><input type="text" maxlength="9" value="0.00" name="donation"/></td></tr>
<tr>
<td>
<label>Message:</label>
</td>
<td>
<textarea name="donationmessage" maxlength="200" cols="25" rows="6"> </textarea>
</td>
</tr>
</tr>
<tr><td><label>Your Name:</label></td><td><input type="text" maxlength="30" name="donator"/></td></tr>
<tr>
<td>
<tr><td><input id="submit" type="submit" value="Confirm Donation"/></td></tr>
</table>
</form>
</div>
</div> <!-- END WRAPPER -->
</body>
</html>
CSS
#content { text-align: left; margin: 2px; padding: 10px; }
#content p { font: font: 12px/1.5 Verdana, sans-serif; float: left; }
try to add a doctype :
for example, here is the HTML5 doctype
<!DOCTYPE html>
It seems to work fine for me.
Maybe you have a problem in your css?
EDIT:
The float style on your P tag is causing the trouble.
A simple solution could be to use a defloating-break-div (I'm not sure what the proper name is) underneath your P tag:
<div style="float:none;">
<br />
</div>
This causes the rest of your code to resume the normal layout
1) You have some errors in table structure
2) If you need to center table, you can setup it margin-left and margin-right auto.
There is possible table code with align:
<table style='margin: 0 auto;'>
<tr>
<td><label>Runner:</label></td>
<td>
<select name="fullname">
<?php do{?>
<option value="<?php echo $rsNames['user_ID']; ?>"> <?php echo $rsNames['first_Name'];?> <?php echo $rsNames['last_Name'];?></option>
<?php } while ( $rsNames= mysql_fetch_assoc($names_query))?>
</select>
</td>
</tr>
<tr>
<td><label>Donation (£):</label></td>
<td><input type="text" maxlength="9" value="0.00" name="donation"/></td>
</tr>
<tr>
<td><label>Message:</label></td>
<td><textarea name="donationmessage" maxlength="200" cols="25" rows="6"> </textarea></td>
</tr>
<tr>
<td><label>Your Name:</label></td>
<td><input type="text" maxlength="30" name="donator"/></td>
</tr>
<tr>
<td><input id="submit" type="submit" value="Confirm Donation"/></td>
<td> </td>
</tr></table>
If you still have troubles: post somewhere full HTML and CSS code for detailed analysis.