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
Related
I'm using jquery serialize to send the form data from cordova app to PHP server, the form is a dynamic cart for user orders, it works with 30-35 items, but when user try to send more items, app fails.
We changed the post_max_size = 8M to 30M in php.ini but it fails too.
This is part of the form...
<li class="checkoutrow" style="position: relative;">
<input type="hidden" name="idproduct[]" value="'+cart[i].idproduct+'" id="idproduct" class="idproduct">
<input type="hidden" name="cod_prod[]" value="'+cart[i].cod_prod+'" id="cod_prod" class="cod_prod">
<input type="hidden" name="subtotal[]" value="'+subtotalneto+'" >
<input type="hidden" name="subtotaliva[]" value="'+subtotaliva+'" >
<h3 class="product-name">
<textarea name="description[]" style="width: 90%; color: #ae0000;" rows="2" readonly>'+cart[i].description+'</textarea>
</h3>
<span class="cart-delete"><a onclick="delete_cart_item('+i+', this);" href="#"><i class="fa fa fa-times"></i></a></span>
<div class="table">
<div class="qty col" style="width: 20%;"><input style="width: 98%; border: none;" type="number" name="qty[]" value="'+cart[i].qty+'" readonly ></div>
<div class="price col" style="width: 27%;"><input style="width: 98%; border: none;" type="text" name="price[]" value="'+cart[i].price+'" readonly></div>
<div class="col" style="width: 23%;"><input type="text" style="width: 98%; border: none; text-align: center;" name="descuento[]" value="'+cart[i].descuento+'" readonly></div>
<div class="subtotalitem col" style="width: 30%;"><input style="width: 98%; border: none; text-align: right;" type="text" name="subtotalitem[]" value="'+subtotalitem+'" readonly></div>
</div></li>
Finally it works only when I send 30 to 40 items. I solved making a pagination of data. When detect last package I change the order status and give it as sent.
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>
As I have almost no knowledge of HTML and I had no idea where to ask, I decided to come here. I am trying to edit HTML Weebly web editor generated and add a "contact us" form which will direct messages to my email. I found some source code on the web and tried to incorporate it with the form Weebly generated for me, however I have not had any success. My code is below:
<div>
<form enctype="multipart/form-data" name="contactform" method="post" action="" onsubmit="myFunction()">
<div id="466589977852666939-form-parent" class="wsite-form-container" style="margin-top:10px;">
<ul class="formlist" id="466589977852666939-form-list">
<h2 class="wsite-content-title" style="text-align:left;">SEND US AN EMAIL</h2>
<div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;">
<label class="wsite-form-label" for="Email_Address">Email <span class="form-required">*</span></label>
<div class="wsite-form-input-container">
<input id="Email_Address" class="wsite-form-input wsite-input wsite-input-width-370px" type="text" name="Email_Address" maxlength="100" />
</div>
<div id="instructions-270584481949385592" class="wsite-form-instructions" style="display:none;"></div>
</div></div>
<div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;">
<label class="wsite-form-label" for="Your_Message">Your Message <span class="form-required">*</span></label>
<div class="wsite-form-input-container">
<textarea id="Your_Message" class="wsite-form-input wsite-input wsite-input-width-370px" name="Your_Message" style="height: 200px"></textarea>
</div>
<div id="instructions-137987539423347553" class="wsite-form-instructions" style="display:none;"></div>
</div></div>
</ul>
</div>
<div style="text-align:left; margin-top:10px; margin-bottom:10px;">
<input type='submit' style='position:absolute;top:0;left:-9999px;width:1px;height:1px' /><a class='wsite-button' ><span class='wsite-button-inner'>Submit</span></a>
</div>
</form>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
</div>
It obviously has something to do with the button click not being registered, so I made my own much simpler form to test it out.
<form name="contactform" method="post" action="" onsubmit="myFunction()">
<table width="400px" class="contactform">
<tr>
<td valign="top">
<label for="Email_Address" class="required">Email Address<span class="required_star"> * </span></label>
</td>
<td valign="top">
<input type="text" name="Email_Address" id="Email_Address" maxlength="100" style="width:230px">
</td>
</tr>
<tr>
<td valign="top">
<label for="Your_Message" class="required">Your Message<span class="required_star"> * </span></label>
</td>
<td valign="top">
<textarea style="width:230px;height:160px" name="Your_Message" id="Your_Message" maxlength="2000"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center" >
<br /><br />
<input type="submit" value=" Submit Form " style="width:200px;height:40px">
<br /><br />
</td>
</tr>
</table>
</form>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
And in this case, the function actually fired! So now I am unsure as to what the difference is between my first example, and my second much simpler piece of code. Could anyone help me out?
You could add an onclick() to the submit <a> tag to submit the form.
Like so, change...
<a class='wsite-button' ><span class='wsite-button-inner'>Submit</span></a>
To...
<a class="wsite-button" onclick="document.contactform.submit(); return false;"><span class="wsite-button-inner">Submit</span></a>
This is because in your simplified example you used a Submit button.
Where as in you original form the button is moved out of the screen using CSS and only the text 'Submit' is left there. And your function triggers when the input is clicked, not the text.
This is the CSS style attributes that are hiding the button:
position: absolute;
top: 0;
left: -9999px;
width: 1px;
height: 1px;
Replace this:
<input type="submit" style="position:absolute;top:0;left:-9999px;width:1px;height:1px">
By this:
<input type="submit" />
The button will reappear and clicking on it will trigger your message box.
Here is the JSFiddle demo
so this is a problem I'm having:
I want to style the height of the select to that of my input. The select uses the ui-btn-inner class which has padding, and when changed, the height of the select changes.
Here's the padding created by ui-btn-inner:
Here is my code:
<div class="ui-grid-a">
<div class="ui-block-a" style="width: 80%;">
<div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
Amount:
</div>
<input type="text" autocomplete="off" class="translate" placeholder="0.0" data-clear-btn="true" autofocus required autocorrect="off" autocapitalize="off" data-theme="d"/>
</div>
<div class="ui-block-b" style="width: 20%; padding-left: 15px;">
<div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
Amount:
</div>
<select name="select-choice-1" id="select-choice-1" data-theme="a" style="height: 40%; padding: 0; margin: 0;">
<option value="" style="padding: 0;">CAD</option>
<option value="" style="padding: 0;"></option>
</select>
</div>
</div>
Notice wherever I put style="padding: 0;" it still doesn't affect the padding? jQuery Mobile generates code and I am unable to attach classes to that code.
I'm a complete noob at jQuery and have no idea how to simply change the height of this select..
You are missing the obvious.
Your original select is not longer visible. Also as you can see new one is just custom combination of <div>'s and <span>'s. New custom select box will not inherit css from the old one. New select box CSS structure needs to be changed in order for this to work.
Working example: http://jsfiddle.net/Gajotres/PMrDn/107/
HTML:
<div class="ui-grid-a">
<div class="ui-block-a" style="width: 80%;">
<div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
Amount:
</div>
<input type="text" autocomplete="off" class="translate" placeholder="0.0" data-clear-btn="true" autofocus required autocorrect="off" autocapitalize="off" data-theme="d"/>
</div>
<div class="ui-block-b" style="width: 20%; padding-left: 15px;" id="grid-container">
<div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
Amount:
</div>
<select name="select-choice-1" id="select-choice-1" data-theme="a">
<option value="" style="padding: 0;">CAD</option>
<option value="" style="padding: 0;"></option>
</select>
</div>
</div>
CSS:
#grid-container .ui-select div span {
padding-bottom: 0.14em !important;
}
Or if you want for select box text to be perfectly centered take a look at this example: http://jsfiddle.net/Gajotres/PMrDn/108/
CSS:
#grid-container .ui-select div span {
padding-top: 0.2em !important;
padding-bottom: 0.2em !important;
}
grid-container is just an id given to the grid container, so we can affect only this select box. If we change .ui-select it will affect every single select box.
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 :)