I need to remove the label "Time:" as well as the time field. I could only remove the field using the following code:
$('#fieldIncidentTime').remove();
How do I remove the time as well?
<tr>
<td><label style="white-space:nowrap;">Incident Date</label></td>
<td colspan="3" width="85%">
<div style="float: left;">
<div id="wwgrp_myForm_incidentDate" class="wwgrp">
<div id="wwctrl_myForm_incidentDate" class="wwctrl">
<b class="dpWrapper"><input placeholder="MM/DD/YYYY" name="incidentDate" size="12" value="08/09/2016" id="myForm_incidentDate" class="psDateWidget unvalidated hasDatepicker" type="text"><button tabindex="-1" aria-hidden="true" class="ui-datepicker-trigger" type="button"></button></b>
</div>
</div>
</div>
<div style="float: left; padding: 0px 0px 0px 10px;">
Time: <span class="timeEntry_wrap"><input id="fieldIncidentTime" name="incidentTime" value="04:35 PM" size="10" class="timeEntry hasTimeEntry" type="text"></span>
</div>
</td>
</tr>
Just remove parent of his parent. Like this:
$('#fieldIncidentTime').parent().parent().remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td><label style="white-space:nowrap;">Incident Date</label></td>
<td colspan="3" width="85%">
<div style="float: left;">
<div id="wwgrp_myForm_incidentDate" class="wwgrp">
<div id="wwctrl_myForm_incidentDate" class="wwctrl">
<b class="dpWrapper"><input placeholder="MM/DD/YYYY" name="incidentDate" size="12" value="08/09/2016" id="myForm_incidentDate" class="psDateWidget unvalidated hasDatepicker" type="text"><button tabindex="-1" aria-hidden="true" class="ui-datepicker-trigger" type="button"></button></b>
</div>
</div>
</div>
<div style="float: left; padding: 0px 0px 0px 10px;">
Time: <span class="timeEntry_wrap"><input id="fieldIncidentTime" name="incidentTime" value="04:35 PM" size="10" class="timeEntry hasTimeEntry" type="text"></span>
</div>
</td>
</tr>
Related
EDITED: the first one was already solved but this is the project that I've been working on the one that i deleted was just a test, anyways the answer on the previous post before i edit this was solved, i applied the same solution but can't seem to be solve the problem. can someone tell me the difference why this won't work compare to the previous one, thanks :).
<!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="src/jquery.timepicker.min.css">
<script src="src/jquery.timepicker.min.js"></script>
</head>
<style>
#media print {
.active {
background-color: #ff0000;
}
}
.card-default {
color: #333;
background: linear-gradient(#fff,#ebebeb) repeat scroll 0 0 transparent;
font-weight: 600;
border-radius: 6px;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: center;
}
.signature {
border: 0;
border-bottom: 1px solid #000;
}
.active {
background-color: #ff0000;
}
input {
text-align: center;
}
</style>
<script type="text/javascript">
var total = 0;
var meal_allow_table = document.getElementsByClassName("meal_allow");
var days = [];
$(document).ready(function() {
$("table").find("input").attr("disabled", true);
$('input[name="inlineRadioOptions"]').change(function () {
$("table").find("input").removeAttr("disabled");
if ($('#pay_period_from').prop('checked')) {
$('.first-period').addClass('active');
$('.second-period').removeClass('active');
}else if ($('#pay_period_to').prop('checked')) {
$('.second-period').addClass('active');
$('.first-period').removeClass('active');
}
});
});
function printForm() {
window.print();
}
</script>
<body>
<div class="container">
<div id="accordion">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<h3>LINA GROUP OF COMPANIES</h3>
</div>
</div>
</div>
<div class="card card-default">
<div class="card-header">
<h4 class="card-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<i class="glyphicon glyphicon-search text-gold"></i>
<b>Meal and Overtime Authorization Form</b>
</a>
</h4>
</div>
<div id=hideDiv>
<form action="index.php" method="POST">
<div id="collapse1" class="collapse show">
<div class="card-body">
<div class="row">
<div class="col-md-3 col-lg-6">
<div class="form-group">
<label class="control-label">Company:</label>
<input id="inputCompany" name="company" type="text" class="form-control" />
</div>
</div>
<div class="col-md-1 col-lg-4">
<!-- <div class="form-group">
<label class="control-label">Dept/Location:</label>
<input type="text" class="form-control" />
</div> -->
</div>
</div>
<div class="row">
<!-- <div class="col-md-2 col-lg-3">
<div class="form-group">
<label class="control-label">City</label>
<input type="text" class="form-control" />
</div>
</div> -->
<div class="col-md-2 col-lg-6">
<div class="form-group">
<label class="control-label">Pay Period:</label>
<div class="row">
<div class="form-check col-lg-2"></div>
<div class="form-check col-lg-5">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="pay_period_from" value="option1">
<label class="form-check-label" for="inlineRadio1">Day 1 - 15 </label>
</div>
<div class="form-check col-lg-5">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="pay_period_to" value="option2">
<label class="form-check-label" for="inlineRadio2">Day 16 - 31 </label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="pull-right">
<button class="btn btn-success btn-lg" type="submit" name="btnSubmit" id="btnSubmit"><i class="fa fa-save"></i> Save</button>
<button class="btn btn-success btn-lg" type="submit" name="btnPrint" id="btnPrint" onclick="printForm()"><i class="fa fa-save"></i> Print</button>
<a class="btn btn-warning btn-lg" href="#" id="btnToTop"><i class="fa fa-arrow-up"></i> Top</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="div">
<table class="table" style="width:100%">
<tr>
<th colspan="2" rowspan="3" style="vertical-align: middle;" >Date</th>
<th colspan="2" style="vertical-align: middle;">OT Field</th>
<th rowspan="3" style="vertical-align: middle;">Purpose of Overtime</th>
<th rowspan="3" style="vertical-align: middle;">OT hours</th>
<th rowspan="3" style="vertical-align: middle;">Meal Allow</th>
<th rowspan="3" style="vertical-align: middle;">Boss</th>
</tr>
<tr>
<th colspan="2">() rarbk & file ()</th>
</tr>
<tr>a
<th style="max-width: 40px">From</th>
<th style="max-width: 40px">To</th>
</tr>
<tr>
<td colspan="2">December</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="width:10%" class="first-period">1</td>
<td style="width: 10%" class="second-period">16</td>
<td class="timepicker_from" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td class="timepicker_from" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td class="pot" style="width: 250px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td class="pot" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td style="width: 100px; table-layout: fixed; padding: 0">
<input class="meal_allow" value="0" type="text" style="width: 100%; height: 50px;">
</td>
<td class="pot" style="width: 200px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
</tr>
<tr>
<td class="first-period">2</th>
<td class="second-period">17</td>
<td class="timepicker_from" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td class="timepicker_from" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td class="pot" style="width: 250px; table-layout: fixed; padding: 0">
<input type="textarea" style="width: 100%; height: 50px;">
</td>
<td class="ot" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td style="width: 100px; table-layout: fixed; padding: 0">
<input class="meal_allow" value="0" type="text" style="width: 100%; height: 50px;">
</td>
<td class="boss" style="width: 200px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
</tr>
<tr>
<td class="total"><b>TOTAL</b></th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td id="total"></td>
<td></td>
</tr>
</table>
<div style="margin-top: 15px" class="footer">
<p>Note: Pls Encircle corresponding meal allowance and always indicate covered pay period.</p>
</div>
</div>
</div>
</div>
</div>
<input type="text" id="inputMultiDate" class="form-control" placeholder="Pick the multiple dates">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body>
By default the majority (afaik) of browsers disable backgrounds when printing html. In chrome, after clicking the button and the print dialog appears, click on "more settings" -> "background graphics"
Add a #media rule to the CSS file
#media print {
.print-para {
background-color: #ff0000;
}
}
add this class when printing the clicking the button
$('#btnChange').click(function() {
$('body').addClass('print-para');
window.print();
});
Enable background display in the print preview settings in your browser
Print Preview > More Settings > Background Graphics
I'm trying to pass values from a table to a modal window, but I'm not getting it
I tried something from jQuery, but I do not know what I might be doing wrong. I'll post the code, which is working, but no changes I made In the attempts.
When you click change, I would like to take the values and move to the dialog.
<c:if test="${fn:length(lista) > 0 }">
<table class="table table-hover">
<tr>
<th >Código</th>
<th>Nome</th>
<th>Descrição</th>
<th>Medida</th>
<th>Fornecedor</th>
<th>Quantidade Mínima</th>
<th>Quantidade Máxima</th>
<th>Estoque</th>
<th>Categoria</th>
<th>Preço</th>
<th></th>
</tr>
<c:forEach items="${lista }" var="mat">
<tr>
<td>${mat.codigo }</td>
<td>${mat.nome }</td>
<td>${mat.descricao }</td>
<td>${mat.medida }</td>
<td>${mat.fornecedor }</td>
<td>${mat.qtd_Min }</td>
<td>${mat.qtd_Max }</td>
<td>${mat.estoque }</td>
<td>${mat.categoria.categoria }</td>
<td>${mat.preco }</td>
<td>Alterar
<a href="remover.html?id_material=${mat.id_material }"class="btn btn-xs btn-danger" >Remover</a>
</td>
</tr>
</c:forEach>
</table>
</c:if>
Panel to change
<div id="DialogAlterarMaterial" class="modal fade"
aria-hidden="true" aria-labelledby="myModalLabel" role="dialog"
tabindex="-1" style="display: none;">
<div class="modal-dialog" style="width: 800px;">
<div class="modal-content">
<div class="modal-header">
<button class="close" aria-hidden="true" data-dismiss="modal"
type="button">×</button>
<h4 class="modal-title">Cadastro de Materiais</h4>
</div>
<div class="modal-body" style="min-height: 500px;">
<form action="alterar.html" method="post">
<div class="form-group" style="width: 80px; float: left;margin-top: 0%">
<label for="codigo">Código</label> <input name="codigo"
class="form-control" type="text" value="${mat.codigo }">
</div>
<div class="form-group"
style="width: 300px; float: left; margin-top: 9%; margin-left: -10.5%">
<label for="nome">Nome</label> <input name="nome"
class="form-control" type="text">
</div>
<div class="form-group"
style="width: 430px; float: left; margin-left: 2%; margin-top: 9%;">
<label for="descricao">Descrição</label> <input
name="descricao" class="form-control" type="text">
</div>
<div class="form-group"
style="width: 130px; float: left; margin-left: 0%; margin-top: 0%">
<label for="unimed">Unidade de Medida</label> <input
name="unimed" class="form-control" type="text">
</div>
<div class="form-group"
style="width: 155px; float: left; margin-left: 2%;margin-top: 0%">
<label for="preco">Preço</label> <input name="preco"
class="form-control" type="text">
</div>
<div class="form-group"
style="width: 430px; float: left; margin-left: 2%;margin-top: 0%">
<label for="fornecedor">Fornecedor</label> <input
name="fornecedor" class="form-control" type="text">
</div>
<div class="form-group"
style="width: 85px; float: left; margin-left: 0%;">
<label for="qtdMin">Qtd. Mínima</label> <input
name="qtd_Min" class="form-control" type="text">
</div>
<div class="form-group"
style="width: 85px; float: left; margin-left: 2%;">
<label for="qtdMax">Qtd. Máxima</label> <input
name="qtd_Max" class="form-control" type="text">
</div>
<div class="form-group"
style="width: 85px; float: left; margin-left: 2%;">
<label for="estoque">Estoque</label> <input
name="estoque" class="form-control" type="text">
</div>
<div class="form-group"
style="width: 130px; float: left; margin-left: -38%;margin-top: 10%;">
<label for="categoria">Categoria</label> <select
name="categoria" class="form-control" type="text" onchange='CheckCat(this.value);'>
<option selected disabled hidden>Categoria</option>
<c:forEach items="${cBean.listarCategoria}" var="cat">
<option value="${cat.categoria }">${cat.categoria }</option>
</c:forEach>
</select>
</div>
<div class="form-group"
style="width: 130px; float: left; margin-left: -19%;display: none; margin-top: 10%" id="Outros">
<label for="catOutros">Outros</label> <input name="catOutros"
class="form-control" type="text" >
</div>
<div style="width: 30px; margin-top: 25%;float: right;margin-right: 8%">
<button class="btn btn-primary" type="submit">Cadastar</button>
</div>
</form>
</div>
</div>
</div>
</div>
You can add a click event handler on Alterar.
When click "Alterar" button, use jquery to find data in tds, then set data to modal dialog.
snippet for reference:
var $tds = $(this).parent().siblings();
var codigo = $tds.eq(0).html();
...
First of all I already did try researching how to make my input to be dynamic based from the from the width of its data but all answers that I could see is from the input which is not disabled. Its trigger is from key up or onclick which is not applicable to mine since my input is disabled.
This is the screenshot of my problem. As you can see my amount in words in Pesos is cut and is not dynamically expanding.
This is my html:
<table width="100%">
<tr>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabelBold">Check Number:</div>
<div style="float:left">
<input type="password" name="checkNumber" class="text ui-widget-content ui-corner-all" style="width:250px; height: 17px;" />
</div>
</div>
</td>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Check Date:</div>
<div style="float:left">
<input name="checkDate" class="checkDate text ui-widget-content ui-corner-all" style="width:250px;" readonly /></div>
</div>
</td>
</tr>
<tr>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Client Name:</div>
<div style="float:left"><input name="clientName" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly /> </div>
</div>
</td>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Amount:</div>
<div style="float:left"><input name="amount" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly/></div>
</div>
</td>
</tr>
<tr>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Pesos:</div>
<div style="float:left"><input id="amountInWords" name="amountInWords" class="text ui-widget-content ui-corner-all"
style="min-width:250px;" readonly /></div>
</div>
</td>
</tr>
</table>
Question:
Is it really possible to be dynamic even though my input is disabled? If yes how? if no why?
Requirements:
The minimum width of my input Pesos should be 250px because it needs to be aligned to other input.
My problem is only with the input of Pesos
HTML, CSS or Javascript solution is accepted.
I think I don't need to include my css styles anymore since it would not be needed. If css is the solution just add a new class.
I prepared a jsfiddle here
Using only CSS, one cannot make an <input> expand its size based on content. It is possible via Javascript, though (see Rayon Dabre's solution).
But the simple answer here would be to use an element that naturally expands to show its content, like a <span>, and style it to look like an input:
From your picture, I'm approximating something close to :
span.disabledInput {
display: inline-block;
background-color: #F0F0F0;
border-radius: 6px;
border: 1px solid #EEE;
}
You can even make it editable. Here's a more convincing example:
.form-control.disabledInput {
height: initial;
background-color: #eee;
border: 1px solid #ccc;;
display: inline-block;
clear: left;
width: auto;
color: #666;
box-sizing: border-box;
}
.form-control.disabledInput:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-group.col-xs-12 label {
display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="form-group col-sm-6">
<label for="checkNumber">Check Number:</label>
<input type="password" class="form-control" name="checkNumber" id="checkNumber">
</div>
<div class="form-group col-sm-6">
<label for="checkDate">Check Date:</label>
<input type="text" class="form-control" name="checkDate" id="checkDate" readonly>
</div>
<div class="form-group col-sm-6">
<label for="clientName">Client Name:</label>
<input type="text" class="form-control" name="clientName" id="clientName" readonly>
</div>
<div class="form-group col-sm-6">
<label for="amount">Amout:</label>
<input type="text" class="form-control" name="amout" id="amount" readonly>
</div>
<div class="form-group col-xs-12">
<label>Pesos:</label>
<span type="text" tabindex="0" contenteditable="true" class="form-control disabledInput">To make this <code>span</code> not editable, remove the <code>contenteditable</code> attribute... <br />Don't forget to resize your browser!</span>
</div>
</div>
If you want to match the exact styling, you should inspect the disabled <input>. Pay close attention to line-height, font-size, padding and margin properties. Also, don't forget to add the tabindex attribute so it can be :focus-ed, like the real <input>s in the page.
Now, because your input is disabled, that's about all you need to do.
However, if your fake "input" wasn't disabled you'd have to add contenteditable="true" to it. And if it had to be part of your form on submission, you'd also have to add an <input type="hidden"> that would change its value to match the .text property of your <span>. Again, resorting to JavaScript.
Consider static constant as the width of the character Which can not be accurate by the way as H and I can not consume same space.
Try this:
document.getElementById('amountInWords').style.width = document.getElementById('amountInWords').value.length * 7 + 'px'
<table width="100%">
<tr>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabelBold">Check Number:</div>
<div style="float:left">
<input type="password" name="checkNumber" class="text ui-widget-content ui-corner-all" style="width:250px; height: 17px;" />
</div>
</div>
</td>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Check Date:</div>
<div style="float:left">
<input name="checkDate" class="checkDate text ui-widget-content ui-corner-all" style="width:250px;" readonly />
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Client Name:</div>
<div style="float:left">
<input name="clientName" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly />
</div>
</div>
</td>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Amount:</div>
<div style="float:left">
<input name="amount" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly/>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Pesos:</div>
<div style="float:left">
<input id="amountInWords" name="amountInWords" class="text ui-widget-content ui-corner-all" style="min-width:250px;" value="One Thousand Nine Hundred Forty Nine Pesos only and this is fake msg" readonly />
</div>
</div>
</td>
</tr>
</table>
It is not expanding because it’s a part of your first column. It just cannot go on the second one.
To fix it, add
<td colspan='2'>
on your last TD (To indicate it to take space of both columns)
Example : http://reference.sitepoint.com/html/th/colspan/demoframe
I have this code snippet from an html page:
<td class="alltablergt ">
<div class="allocsz">
<table class="table-allocsz">
<tbody>
<tr>
<td>
<div class="sigle-sz">
<span class="label-sz">36</span>
<input class="size-quantity" type="tel" value="" name="" >
<div class="available yes"><i aria-hidden="true" class="availablespot"></i></div>
</div>
I am in the input element "size-quantity" and I would reach the "alltablergt" element.
If $this is the size-quantity element, I thought the way to reach the "alltablergt" element was:
$(this).parentsUntil(".alltablergt")
but this doesen't work.
How can I reach it?
You could use closest().
$('.size-quantity').closest(".alltablergt").addClass('highlight');
.highlight {
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="alltablergt ">
<div class="allocsz">
<table class="table-allocsz">
<tbody>
<tr>
<td>
<div class="sigle-sz">
<span class="label-sz">36</span>
<input class="size-quantity" type="tel" value="" name="">
<div class="available yes"><i aria-hidden="true" class="availablespot"></i>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I'm making a Jquery popup / dialog and I've manged to position it on the page at a click so that the div renders over the other elements but the page is transparent and when I drag it, I can drag it upwards and downwards but when I drag it sideways it resizes instead of moves. can you tell me what I could do to resolve these 2 issues?
It looks like this
My popup HTML is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>popup</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="2" align="center" class="TB_nb">
<tr>
<td colspan="3" class="pusher TB_nb"><h2>Sök person/företag</h2>
</td>
<td><a href="javascript:void(0)" onclick="document.getElementById('popupSokNamn').style.display = 'none';" >X</a></td>
</tr>
</table>
<br><br>
<h2 class="pusher">Sök person/företag</h2>
<div id="Vsok">
<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;">
<span onClick="getElementById('sokF').style.display='', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display='none'" class="link_sm">Visa sökformulär</span>
</div>
</div>
<div id="sokF">
<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;; padding-bottom: 5px;">
<span onClick="getElementById('sokF').style.display='none', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display=''" class="link_sm">Dölj sökformulär</span>
</div>
<div style="width: 100%; margin-left: 15px; margin-right: 80px;" class="fontS80">
<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Fysisk</legend>
<div class="fl30"> Förnamn:</div>
<div class="fl50"><input type="text" size="60" name="searchFornamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30"> Efternamn:</div>
<div class="fl50"><input type="text" size="60" name="searchEfternamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
</fieldset>
<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Juridisk</legend>
<div class="fl30"> Företag:</div>
<div class="fl50"><input type="text" size="60" name="searchForetag" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30"> Organisationsnummer:</div>
<div class="fl50"><input type="text" size="60" name="searchOrgNummer" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
</fieldset> <br><br>
<!-- <div class="fl30">Attention, c/o etc.:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
<div class="fl30">Postadress:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
<div class="fl30">Postnummer:</div>
<div class="fl50"><input type="text" size="30"></div>
<div class="clear"></div> -->
<div class="fl30">Postort:</div>
<div class="fl50"><input type="text" size="40" name="searchPostort" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30">Land:</div>
<div class="fl50"><input type="text" size="2" name="searchLandKod" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
<select name="searchLand" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
<option value="1" SELECTED></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5">---------------------------------</option>
</select></div>
<div class="clear"></div>
<!-- <div class="fl30">Region:</div>
<div class="fl20"><select name="">
<option value="1" SELECTED></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5">-----------------------------------------------</option>
</select></div>
<div class="clear"></div>
<div class="fl30">Tel:</div>
<div class="fl50"><input type="text" size="40"></div>
<div class="clear"></div>
<div class="fl30">Fax:</div>
<div class="fl50"><input type="text" size="40"></div>
<div class="clear"></div>
<div class="fl30">E-post:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
-->
<div class="fl50"> </div>
<div class="fl5"><input type="button" value="Rensa"></div>
<div class="fl10"><input type="button" value=" Sök " onclick="javascript:doSubmit('Namnsokning', 'search')"></div>
<div class="clear"> </div>
<div class="clear"> </div>
</div>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="4" align="center">
<tr>
<td><h3>Sökresultat:</h3></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="4">En massa text <span class="link">Hjälp!</span> </td>
</tr>
<tr>
<td><input type="button" value="Visa alla"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="smallb">
<td>Antal ärenden: 527</td>
<td> </td>
<td>Visa ärenden: << 1-200 201-400 401-527 >> </td>
<td> </td>
</tr>
</table>
<table width="100%" cellspacing="0" align="center" class="sortable" id="unique_id">
<tr>
<th class="thkant">Förnamn</th>
<th class="thkant">Efternamn</th>
<th class="thkant">Adress</th>
<th class="thkant">Postnr</th>
<th class="thkant">Postort</th>
<th class="thkant">Region</th>
<th class="thkant">Land</th>
<th class="thkant">Telefonnummer</th>
</tr>
</table>
<div id="bottomV">
<table width="100%" align="center">
<tr>
<td align="left"><input type="button" id="visaknapp" value="Visa" disabled style="width:150px;" onClick="getElementById('sokR').style.display='', getElementById('bottomA').style.display='', getElementById('bottomV').style.display='none', getElementById('Vsok').style.display='', getElementById('sokF').style.display='none'"></td>
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" disabled style="width:150px;"></td>
</tr>
</table>
</div>
<div id="bottomA" style="display: none">
<table width="100%" align="center">
<tr>
<td align="left"><input type="button" value="Ändra i register" style="width:150px;"></td>
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" style="width:150px;"></td>
</tr>
</table>
</body>
</html>
The CSS is
.newpopup {
position: absolute;
top:50%;
left:50%;
}
The Javascript is
function popup() {
alert('test');
var popup = $('.newpopup');
popup.draggable();
popup.resizable();
//popup.html('<p>Where is pancakes house?</p>');
//popup.show('fast');
$.get('/PandoraArendeWeb/popup.jsp', function(data) {
popup.html(data);
popup.show('fast');
});
var screen_width = $(document).width();
var screen_height = $(document).height();
var box_width = popup.width();
var box_height = popup.height();
var top = (screen_height - box_height) / 2; // you might like to subtract a little to position it slightly higher than half way
var left = (screen_width - box_width) / 2;
popup.css({ 'position': 'absolute', 'top':top, 'left':left });
}
$(document).ready(function(){
$('button').click(function(){
popup();
});
})
Please tell me how to
1) make the popup not transparent
2) make the popup sideways draggable
The HTML that actually activates the popup is trivial:
<div class='newpopup'>
</div>
<button>popup</button>
Thank you
Ok I created simple test case using jsfiddle here, i dont think theres anything wrong with your jquery but i believe it the ajax call so to test this as on your server to make sure your ajax call is working (as i cant), if your ajax call falls it will not popup. in the test case it will alert "Error".
HTML:
<button>popup</button>
<div class='newpopup'>
</div>
jQuery:
function popup() {
alert('opening popup');
var popup = $('.newpopup');
popup.draggable();
popup.resizable();
//popup.html('<p>Where is pancakes house?</p>');
//popup.show('fast');
//Comment me out and use the version below to show working
$.ajax({url:'/PandoraArendeWeb/popup.jsp',
error: function() {
alert('Error');
},
success: function(data) {
popup.html("test");
popup.show('fast');
}
}
);
/*
popup.html("test");
popup.show('fast');
*/
var screen_width = $(document).width();
var screen_height = $(document).height();
var box_width = popup.width();
var box_height = popup.height();
var top = (screen_height - box_height) / 2; // you might like to subtract a little to position it slightly higher than half way
var left = (screen_width - box_width) / 2;
popup.css({ 'position': 'absolute', 'top':top, 'left':left });
}
$(document).ready(function(){
$('button').click(function(){
popup();
});
})
CSS:
.newpopup {
position: absolute;
top:50%;
left:50%;
background-color:#ff0; //Yellow
}
EDIT
Just remembered try commenting out the ajax and use the bit below. the popup shows and you can drag it :)