Before:
After
The first image is of the login page, but when I click login button the navigation bar becomes like the second picture, spaces appear between the blocks. This happens when a sevlet is called and has this code:
out.print("<p style='position:absolute;top:200px;left:300px;color:#CC0066;'>Sorry username or password error! </p>");
RequestDispatcher rd=request.getRequestDispatcher("login.jsp");
rd.include(request, response);
The CSS code is:
#menuli{
display: inline;
float: left;
color: #CCCCCC;
}
#menuA,#menuAL {
display: block;
width: 180px;
padding: 10px;
color: #FFFFFF;
font-size: x-large;
font-variant: normal;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
margin: 10;
text-decoration: none;
opacity: 0.9;
border-spacing:0;
border-collapse:collapse;
text-align: center;
background-color: #000033;
/*font-weight: bold;
/*border-radius: 20px;*/
}
#menuA:hover, #menuAL:hover
{
/*color: #699;*/
background-color: #003;
/*text-shadow: 10px 0px 10px; */
font-weight: bold;
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(65,62,110,1.00)),color-stop( 40.94% , rgba(7,5,53,1.00)),color-stop( 49.74% , rgba(9,8,56,1.00)),color-stop( 100% , rgba(12,11,60,1.00)),color-stop( 100% , rgba(54,56,116,1.00)));
background-image: -webkit-linear-gradient(270deg,rgba(65,62,110,1.00) 0%,rgba(7,5,53,1.00) 40.94%,rgba(9,8,56,1.00) 49.74%,rgba(12,11,60,1.00) 100%,rgba(54,56,116,1.00) 100%);
background-image: linear-gradient(180deg,rgba(65,62,110,1.00) 0%,rgba(7,5,53,1.00) 40.94%,rgba(9,8,56,1.00) 49.74%,rgba(12,11,60,1.00) 100%,rgba(54,56,116,1.00) 100%);
}
#menu
{
position: absolute;
top: 126px;
left: 139px;
}
The JSP code is:
<div name="header" id="header">
<img id="logo" style="position:absolute; left:145px; top:10px; "src="images/logo.jpg">
<div id="menu" >
<ul>
<li id="menuli"><a id="menuA" href="index.jsp#header">Home</a></li>
<li id="menuli"><a id="menuA" href="index.jsp#services">Services</a></li>
<li id="menuli"><a class="prod" id="menuA" href="Display?course=6">Products</a>
</li>
<li id="menuli"><a id="menuA" href="index.jsp#contact">Contact</a></li>
<li id="menuli"><a id="menuA" href="index.jsp#about">About</a></li>
</ul>
</div>
</div>
It's happening with all the pages after any servlet includes it.
Please see the links for images.
Printing the html content inside servlet is considered as bad practice . you can rather set the attribute in the request . so instead of this ,
out.print("<p style='position:absolute;top:200px;left:300px;color:#CC0066;'>Sorry username or password error! </p>");
RequestDispatcher rd=request.getRequestDispatcher("login.jsp");
rd.include(request, response);
use,
request.setAttribute("message","Sorry username or password error!");
RequestDispatcher rd=request.getRequestDispatcher("login.jsp");
rd.include(request, response);
And try to print the message in the jsp page,
simply using the scriptlet as ,
<p style='position:absolute;top:200px;left:300px;color:#CC0066;'><%=message></p>
or using EL
<p style='position:absolute;top:200px;left:300px;color:#CC0066;'>${message}</p>
using scriptlets are also considered to be bad practices since a decade . see this How to avoid java codes inside jsp
Hope this helps !!
Got it fixed. I had margin:10px in the CSS part of the navigation bar. Removed it and the problems are all gone.
:)
Related
In Chrome everything works good, but is aligned to the right in Safari, I don't know why. It's a button with text. I tried text-align center;, justify-content: center; or text-align: -webkit-center; but nothing happened.
.box-product .add-items .bttn-add {
width: 115px;
height: 30px;
display: block;
background-color: var(--naranjoAgro);
color: #fff;
text-transform: uppercase;
font-size: 1em;
font-weight: 700;
line-height: 30px;
border-radius: 15px;
margin: 0 0 0 1em;
transition: .3s;
-webkit-transition: .3s;
-moz-transition: .3s;
justify-content:center;
}
<div class="buttonbox">
<c:choose>
<c:when test="${(autentificar == 'true')&&(statusUsuario == 2)}">
<a class="bttn-add btncarr spinner-button" onclick="mensajeBloqueoCompras();" type="submit">agregar</a>
</c:when>
<c:when test="${autentificar == 'true'}">
<a class="bttn-add btncarr spinner-button" onclick="agregarProducto(this, '${oferta.codigo_material}', 'cantidadProdu${oferta.codigo_material}', '${contexto}', '${cantidadMinPed}', '${cantidadMaxUni}', 'HOME - PRODUCTOS EN OFERTA')" data-button-action="add-to-cart"
type="submit">agregar</a>
</c:when>
</c:choose>
</div>
For justify-content:center to work it has to be in a display:flex or display:grid block.
You can change your display: block to display:flex.
It also seems to me that your css classes do not correspond to those in your html.
The program I have made contains only one search bar, so I can't filter more accurate or related tables.
I need one more search bar in order to enter the value in two search field by clicking post it will search from database and get most related once.
<?php
if(isset($_POST['search']))
{
$valueToSearch = $_POST['valueToSearch'];
// search in all table columns
// using concat mysql function
$query = "SELECT * FROM `included` WHERE CONCAT(`id`, `a`, `b`,
`c`,`c`,`d`,`e`,`f`,`g`,`h`,`i`) LIKE '%".$valueToSearch."%'";
$search_result = filterTable($query);
}
else {
$query = "SELECT * FROM `included`";
$search_result = filterTable($query);
}
// function to connect and execute the query
function filterTable($query)
{
$connect = mysqli_connect("localhost", "root", "", "hospitaldata");
$filter_Result = mysqli_query($connect, $query);
return $filter_Result;
}
?>
<!DOCTYPE html>
<html>
<head>
<img src="nop.jpg">
<title>PHP HTML TABLE DATA SEARCH</title>
<style>
table,tr,th,td{
border:.3px solid blue;
color:#000;
font-family:sans-serif;
}
div.relative {
position: relative;
top: -50px;
width: 1400px;
height: 100px;
color: #0C3;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 24px;
}
div.absolute {
position: absolute;
top: 51px;
right: 20;
width: 1261px;
height: 40px;
color: #999;
font-family: Verdana, Geneva, sans-serif;
left: 65px;
}
input[type=text] {
alignment-baseline:central;
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image:url('ds.jpg');
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 50%;
}
table,tr,th,tr
{
border:1px solid blue;
}
</style>
</style>
</head>
<body>
<div class="relative"><h1 align="center">HOSPITAL</h1>
<div class="absolute" align="center">Check provided points here</div>
</div>
<form action="index.php" method="post">
<input type="text" name="valueToSearch" placeholder="Search..."><br>
<input type="submit" name="search" value=">>"><br><br>
<table>
<tr>
<th>Building</th>
<th>Floor</th>
<th>zone</th>
<th>Room no</th>
<th>Room Type</th>
<th>Room Name</th>
<th>Types of Connection</th>
<th>Suggested</th>
<th>Provided</th>
</tr>
<!-- populate table from mysql database -->
<?php while($row = mysqli_fetch_array($search_result)):?>
<tr>
<td><?php echo $row['a'];?></td>
<td><?php echo $row['b'];?></td>
<td><?php echo $row['c'];?></td>
<td><?php echo $row['d'];?></td>
<td><?php echo $row['e'];?></td>
<td><?php echo $row['f'];?></td>
<td><?php echo $row['g'];?></td>
<td><?php echo $row['h'];?></td>
<td><?php echo $row['i'];?></td>
</tr>
<?php endwhile;?>
</table>
</form>
</body>
</html>
From your comments I understand the following:
you have a webpage with a search input field
you want a second input so your users can search more presice
one serach button should send both input fields
A really plain (and untested) version could look like this:
<form action="search.php" method="post">
<label><input name="search1"/> First keyword</label>
<label><input name="search2"/> Second keyword</label>
<input type="submit" value="Serach"/>
</form>
<?php
// If the Search button was pressed
if(isset($_POST['search1'])) {
$stmt = $pdo->prepare($query = "SELECT * FROM `included` WHERE CONCAT(`id`, `a`, `b`, `c`) LIKE '%:search1%' OR CONCAT(`d`, `e`) LIKE '%:search2%'");
$stmt->execute(['search1' => $POST['search1'], 'search2' => $POST['search2'] :? 'default');
foreach ($stmt as $row) {
// do something with $row
}
}
Of course you have to fit the SQL statement to your needs.
For infos about how to setup the $pdo database connection, please refer to the link: http://stackoverflow.com/a/60496/1152471
I need to get whole content of an iframe using selenium API in java.
This is the expected result:
<div id="WIN_0_304255502" arid="304255502" artype="View" ardbn="z2VF_02"
arcontainerid="304255802" arpercentwidth="100"
arpercentheight="100" class="arfid304255502 ardbnz2VF_02"
ardcf="1" style="top: auto; left: auto; width: 1318px;
height: 744px; z-index: 1135; min-width: 20px;
max-width: 32767px; min-height: 20px;
max-height: 32767px; position: relative; overflow: hidden;
background-color: transparent;"
arvfframe="<iframe style="top:0px; left:0px; width:1170px;
height:744px;
background-color: transparent;" name="VF304255502" frameborder=0
scrolling="no"
allowtransparency="true" arviewbordercolor="null" title="z2VF_02" src="javascript:"<HTML></HTML>""
onload="DVFol()">
</iframe>
" arwindowid="0" arstop="1">
//more elements
For now I try:
WebDriver driver= new HtmlUnitDriver();
driver.get(url3);
saveFile(driver.getPageSource());
After run the program, the result that I have it´s not what I expected. Maybe because of iframe that exists.
Result:
<div id="WIN_0_304255502" arid="304255502" artype="View" ardbn="z2VF_02" arcontainerid="304255802"
arpercentwidth="100" arpercentheight="100" class="arfid304255502 ardbnz2VF_02"
ardcf="1" style="top:0px; left:0px; width:1170px; height:744px;z-index:1135;background-color:transparent;min-width:20px;max-width:32767px;min-height:20px;max-height:32767px;"
arvfframe="<iframe style="top:0px; left:0px; width:1170px;
height:744px;background-color: transparent;" name="VF304255502"
frameborder=0 scrolling="no" allowtransparency="true" arviewbordercolor="null"
title="z2VF_02" src="javascript:"<HTML></HTML>""
onload="DVFol()">
</iframe>
">
</div>
I also try to access iframe (driver.switchTo().frame(driver.findElement(By.name("VF304255503")), but occurs an exception (org.openqa.selenium.NoSuchElementException: Unable to locate element with name: VF304255503).
I'm developing a website for the first time. I have used two div tags. One is outer container whose width and height are set to 100%. Other one is inside container. I want to set this to the center vertically. similar to this website: http://www.bigcinemas.com/IN/home.aspx.
But its not working. I tired something like this:
index.jsp
<div class="container">
<div class="banner">
<a class="logo" href="index.jsp">
<img src="images/logo.png" alt="Rainbow Entertainment" width="250px" height="50px"/></a>
<div id="login">
<table style="background-color: purple">
<tr><td>Username : <input type="text"></td>
<td>Password : <input type="password"></td>
<td>Sign in<input type="submit"></td></tr>
</table>
</div>
</div>
</div>
</body>
</html>
menu.css
.container{
width: 100%;
height: 100%;
}
#banner{
width: 60%;
padding-left: 30%;
padding-right: 30%;
position: absolute;
}
.logo{
margin-top: 5px;
float: left;
width: 20%;
position: relative;
}
#login{
width: 30%;
float: right;
padding-left: 10%;
}
#menu{
height: 20%;
width: 70%;
}
.menu_items{
width: 80%;
color: white;
}
Also I want to the difference between id and class.
I was looking for a similar solution earlier today - check the answer on this question. How to vertically center a div for all browsers? . It sounds like the code provided there will suit your needs.
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
CSS
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: /*whatever width you want*/;
}
I'm new to GCM / Java, I'm experienced in php, but only mysql.
I found this tutorial:
http://www.androidhive.info/2012/10/android-push-notifications-using-google-cloud-messaging-gcm-php-and-mysql/
It was very useful, and I got it to work. My only problem is that this code is for sending to one device at a time.
I tryed to edit it so it sends to multiple devices using one form & one submit button, but without a success.
This code gets from Java (Client) Info and puts it in a mysql database using php (Server).
It also registers the GCM registration id of the device in the mysql DB,
and than you can send notifications by id to the device using the id's GCM reg id.
Here is the index.php where you fill in the form:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
function sendPushNotification(id){
var data = $('form#'+id).serialize();
$('form#'+id).unbind('submit');
$.ajax({
url: "send_message.php",
type: 'GET',
data: data,
beforeSend: function() {
},
success: function(data, textStatus, xhr) {
$('.txt_message').val("");
},
error: function(xhr, textStatus, errorThrown) {
}
});
return false;
}
</script>
<style type="text/css">
.container{
width: 950px;
margin: 0 auto;
padding: 0;
}
h1{
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 24px;
color: #777;
}
div.clear{
clear: both;
}
ul.devices{
margin: 0;
padding: 0;
}
ul.devices li{
float: left;
list-style: none;
border: 1px solid #dedede;
padding: 10px;
margin: 0 15px 25px 0;
border-radius: 3px;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #555;
}
ul.devices li label, ul.devices li span{
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: bold;
color: #393939;
display: block;
float: left;
}
ul.devices li label{
height: 25px;
width: 50px;
}
ul.devices li textarea{
float: left;
resize: none;
}
ul.devices li .send_btn{
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0096FF), to(#005DFF));
background: -webkit-linear-gradient(0% 0%, 0% 100%, from(#0096FF), to(#005DFF));
background: -moz-linear-gradient(center top, #0096FF, #005DFF);
background: linear-gradient(#0096FF, #005DFF);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
border-radius: 3px;
color: #fff;
}
</style>
</head>
<body>
<?php
include_once 'db_functions.php';
$db = new DB_Functions();
$users = $db->getAllUsers();
if ($users != false)
$no_of_users = mysql_num_rows($users);
else
$no_of_users = 0;
?>
<div class="container">
<h1>No of Devices Registered: <?php echo $no_of_users; ?></h1>
<hr/>
<ul class="devices">
<?php
if ($no_of_users > 0) {
?>
<?php
while ($row = mysql_fetch_array($users)) {
?>
<li>
<form id="<?php echo $row["id"] ?>" name="" method="post" onsubmit="return sendPushNotification('<?php echo $row["id"] ?>')">
<label>Name: </label> <span><?php echo $row["name"] ?></span>
<div class="clear"></div>
<label>Email:</label> <span><?php echo $row["klas"] ?></span>
<div class="clear"></div>
<div class="send_container">
<textarea rows="3" name="message" cols="25" class="txt_message" placeholder="Type message here"></textarea>
<input type="hidden" name="regId" value="<?php echo $row["gcm_regid"] ?>"/>
<input type="submit" class="send_btn" value="Send" onclick=""/>
</div>
</form>
</li>
<?php }
} else { ?>
<li>
No Users Registered Yet!
</li>
<?php } ?>
</ul>
</div>
</body>
</html>
It's using ajax to send it to GCM:
Send_message.php:
<?php
if (isset($_GET['regId']) && (isset($_GET["message"]))) {
$regId = $_GET['regId'];
$message = $_GET["message"];
include_once './GCM.php';
$gcm = new GCM();
$registatoin_ids = array($regId);
$message = array("price" => $message);
$result = $gcm->send_notification($registatoin_ids, $message);
echo $result;
}
?>
As you see, it gets everthing by id,
but I want to use one form, one submit button & one text field to send to multiple devices.
Would really appreciate it if someone could instruct me how to do it or give me some examples.
I don't know php, but GCM.php from the link you provided seems to already support sending push notifications to multiple devices :
public function send_notification($registatoin_ids, $message) {
// include config
include_once './config.php';
// Set POST variables
$url = 'https://android.googleapis.com/gcm/send';
$fields = array(
'registration_ids' => $registatoin_ids,
'data' => $message,
);
You should simply pass to the send_notification function an array that contains multiple Registration IDs, and it would send notifications to all of them.