Develop Reference

Add event listener on element focus

I have a search box input that opens when an icon is clicked on. I would like to give the input focus when the icon is clicked and call the function addLabel() that adds a label as placeholder text until a “onkeydown” event is fired, at which time it should call the function removeLabel(). Currently, my script adds focus(), but doesn’t acknowledge the other event listeners. Any help would be appreciated!
window.onload = function() {
<!-- create absolutly positioned label as placeholder text for search -->
var el = document.getElementById('gsc-i-id1');
var label = document.createElement('label');
var labelText = document.createTextNode('Enter your search term...');
label.appendChild(labelText);
label.className += 'search-label-placeholder';
var searchParent = el.parentNode;
searchParent.insertBefore(label, el);
var searchIcon = document.getElementById('search-icon');
searchIcon.addEventListener('click', function(e) {
el.addEventListener('focus', addLabel );
el.addEventListener('keydown', removeLabel );
el.focus();
}, false );
function removeLabel() {
el.style.textIndent = '0';
el.setAttribute('placeholder', 'removeLabel');
el.style.background = 'none';
el.style.textIndent = '0';
label.style.display = 'none';
};
function addLabel() {
el.style.textIndent = '0';
el.setAttribute('placeholder', 'addLabel');
el.style.background = 'none';
el.style.textIndent = '0';
label.style.display = 'block';
};
};
<div class="header-holder">
<!-- header logotype -->
<strong class="header-logo">
<img alt="Rose-Hulman Institute of Technology" src="../../../assets/images/logo-header.svg">
</strong>
<!-- header actions -->
<ul class="header-actions">
<li>
<button class="header-actions-btn header-actions-btn-search" data-action="search" id="search-icon">
<span class="icon icon-search"><span class="hide-for-screen-reader">Search</span></span>
</button>
</li>
<li>
<button class="header-actions-btn header-actions-btn-menu" data-action="menu">
<span class="icon icon-menu"><span class="hide-for-screen-reader">Menu</span></span>
</button>
</li>
</ul>
<!-- header search form -->
<div class="header-search">
<div id="___gcse_0">
<div class="gsc-control-searchbox-only gsc-control-searchbox-only-en" dir="ltr">
<form class="gsc-search-box gsc-search-box-tools" accept-charset="utf-8">
<table cellspacing="0" cellpadding="0" class="gsc-search-box">
<tbody>
<tr>
<td class="gsc-input">
<div class="gsc-input-box" id="gsc-iw-id1">
<table cellspacing="0" cellpadding="0" id="gs_id50" class="gstl_50 " style="width: 100%; padding: 0px;">
<tbody>
<tr>
<td id="gs_tti50" class="gsib_a">
<label class="search-label-placeholder" style="display: none;">Enter your search term...</label>
<input autocomplete="off" type="text" size="10" class="gsc-input" name="search" title="search" id="gsc-i-id1" x-webkit-speech="" x-webkit-grammar="builtin:search" lang="en" dir="ltr" spellcheck="false" placeholder="removeLabel" style="width: 100%; padding: 0px; border: none; margin: 0px; height: auto; outline: none; background: none left center no-repeat rgb(255, 255, 255); text-indent: 0px;">
</td>
<td class="gsib_b">
<div class="gsst_b" id="gs_st50" dir="ltr"><a class="gsst_a" href="javascript:void(0)" style="display: none;"><span class="gscb_a" id="gs_cb50">×</span></a></div>
</td>
</tr>
</tbody>
</table>
</div>
<input type="hidden" name="bgresponse" id="bgresponse">
</td>
<td class="gsc-search-button">
<input type="image" src="https://www.google.com/uds/css/v2/search_box_icon.png" class="gsc-search-button gsc-search-button-v2" title="search">
</td>
<td class="gsc-clear-button">
<div class="gsc-clear-button" title="clear results"> </div>
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0" class="gsc-branding">
<tbody>
<tr>
<td class="gsc-branding-user-defined"></td>
<td class="gsc-branding-text">
<div class="gsc-branding-text">powered by</div>
</td>
<td class="gsc-branding-img"><img src="https://www.google.com/cse/static/images/1x/googlelogo_grey_46x15dp.png" class="gsc-branding-img" srcset="https://www.google.com/cse/static/images/2x/googlelogo_grey_46x15dp.png 2x"></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>

Your code if fine. Workable fiddle: https://jsfiddle.net/wostex/0j3rom2m/
Check input element in the dom - it has 'removeLabel' placeholder as you start typing.
SO wants some code when you link to fiddle, so:
searchIcon.addEventListener('click', function(e) {
console.log('clicked');
el.addEventListener('focus', addLabel );
el.addEventListener('keydown', removeLabel );
el.focus();
}, false );

Call a JavaScript function from HTML doesn't work

I have this function and HTML file:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%# 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"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
<link href="resources/css/stiylesheet1.css" rel="stylesheet" media="screen">
<link href="resources/css/printStyle.css" rel="stylesheet" media="print">
<title></title>
<script type="text/javascript">
window.onload = function () {
document.getElementById("cancelSubSubjectDialog").addEventListener('click', function(e) {
e.preventDefault();
document.getElementById("addSubSubjectDialog").close();
});
document.getElementById("saveSubSubjectDialog").addEventListener('click', function(e) {
e.preventDefault();
document.getElementById("addSubSubjectDialog").close();
});
document.getElementById("cancelSubjectDialog").addEventListener('click', function(e) {
e.preventDefault();
document.getElementById("addSubjectDialog").close();
});
document.getElementById("saveSubjectDialog").addEventListener('click', function(e) {
e.preventDefault();
document.getElementById("addSubjectDialog").close();
});
}
function updateSubSubject(param)
{
selectList();
document.getElementById("addSubSubjectDialog").showModal();
document.getElementById("Departments_Select").value=param;
}
function selectList(){
var selectDepartment=document.getElementById("Departments_Select");
var selectSubjects=document.getElementById("Subjects_Select");
var departmentsArray =getList("departments");
var subjectsArray= getList("subjects");
for (var i = 0; i < departmentsArray.length; i++) {
var departmentsOption = document.createElement("option");
departmentsOption.value = departmentsArray[i];
departmentsOption.text = departmentsArray[i];
departmentsOption.name = departmentsArray[i];
selectDepartment.appendChild(departmentsOption);
}
for (var i = 0; i < subjectsArray.length; i++) {
var subjectsOption = document.createElement("option");
subjectsOption.value = subjectsArray[i];
subjectsOption.text = subjectsArray[i];
subjectsOption.name = subjectsArray[i];
selectSubjects.appendChild(subjectsOption);
}
}
</script>
</head>
<body class="grad" style="font-family: 'Open Sans', sans-serif;">
<div class="header"
style="height: 100px; background-image: url(resources/images/streep_green.gif); margin: 0px;">
</div>
</div>
<div align="center" class="main"
style="background-image: url(resources/images/final_background.gif); background-repeat: repeat-x; margin: 0">
<div class="main"
style="background-image: url(resources/images/final_background.gif); background-repeat: repeat-x; margin: 0">
<div class="searchDiv" style="margin-top:5%;width:50%;overflow-y: scroll;overflow-x: hidden; height:500px" >
<form:form method="post" modelAttribute="sub_subjects">
<table dir="rtl" class="table" >
<th><label style="float:right;"><fmt:message key="subjectName" /></label></th>
<th><label style="float:right;"><fmt:message key="subSubjectName"/></label></th>
<th><label style="float:right;"><fmt:message key="department" /></label></th>
<c:forEach items="${sub_subjects.sub_subjects_list}" var="subsubject" varStatus="status" >
<tr id="tr">
<td ><form:hidden path="" name="sub_subjects_list[${status.index}].subjectObj.view" value="${subsubject.subjectObj.view}"/>${subsubject.subjectObj.view}</td>
<td ><form:hidden path="" name="sub_subjects_list[${status.index}].description" value="${subsubject.description}"/>${subsubject.description}</td>
<td ><form:hidden path="" name="sub_subjects_list[${status.index}].departmentObj.inCurrentLanguage" value="${subsubject.departmentObj.inCurrentLanguage}"/>${subsubject.departmentObj.inCurrentLanguage}</td>
<td >
<input id="editSubSubject" onClick="updateSubSubject("this is the text")" style="width:30%; height: 80%;" type="button"> </input>
</td>
</tr>
</c:forEach>
</table>
<br/>
</div>
</form:form>
</div>
</div>
</div>
</div>
</div>
<dialog id="addSubSubjectDialog" style="width:25%; height:35%;">
<div style="width:100%; hegit:20%;"><h2 style="font-size:100%;"><fmt:message key="add_sub_subject_dialog_title" /></h2></div>
<form action="addSubSubject" method="post" >
<div style="width:100%; hegit:20%;">
<h2 style="font-size:100%;"><input id="subSubjectName" name="subSubjectName" style="font-size:100%;text-align: right;"></input> <fmt:message key="insert_sub_subject_name" /> </h2>
</div>
<div style="width:100%; hegit:20%;">
<h2 style="font-size:100%; ">
<h2 style="float:right; width: 20%; font-size: 100%;">
<fmt:message key="select_subject" /> </h2>
<select id="Subjects_Select" name="Subjects_Select" class="form-control" style="width: 50%; text-align:right; float:right;"> </select>
</h2>
</div>
<div style="width:100%; hegit:20%; margin-top: 15%;">
<h2 style="font-size:100%;">
<h2 style="float:right; width: 20%; font-size: 100%;"> <fmt:message key="select_department" /></h2>
<select id="Departments_Select" name="Departments_Select" class="form-control" style="width: 50%;text-align:right;float:right; "> </select>
</h2>
</div>
<div style="height: 60px;margin-top:30% ;">
<fmt:message key="save" var="save"/>
<input type="submit" class="btn btn-success" style=" float: left; width:40%; "value="${save}"></input>
<button id="cancelSubSubjectDialog" class="btn btn-warning" style="float: right; width: 40%;" ><fmt:message key="cancel" /></button>
</form>
</div>
</dialog>
</body>
<script type="text/javascript">
function getList(listName){
var ListFromDB = [];
if(listName=="departments")
{
<c:forEach items="${departmentsList}" var="listItem">
ListFromDB.push( "<c:out value="${listItem.inCurrentLanguage}"/>" );
</c:forEach>
}
else if(listName=="subjects")
{
<c:forEach items="${subjectsList}" var="listItem">
ListFromDB.push( "<c:out value="${listItem.description}"/>" );
</c:forEach>
}
return ListFromDB;
}
</script>
</html>
The problem is that when I run this HTML file and click on the "editSubSubject" button nothing happens. The JavaScript function doesn't get called. When I remove the params of this function and call it like this: onClick="updateSubSubject()" it works fine and opens the dialog,
What is wrong in my code?

You are escaping your double quotes here, which is causing the error:
onClick="updateSubSubject("this is the text")"
You need to either escape the double quotes (using ") or use single quotes:
onClick="updateSubSubject('this is the text')"

Dojo Dynamically add form elements

I am trying to add form fields dynamically with a template html. I have managed to get the dojo/Declaration to write to the DOM, but calling parser.parse(new element) does not seem to parse the elements.
The code I have now is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script>
var dojoConfig = {
async: true,
parseOnLoad: false,
has: {
"dojo-debug-messages": true
}
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<script>
require(["dojo/parser",
"dojo/domReady!"
], function(parser) {
parser.parse();
});
</script>
</head>
<body>
<form>
<div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;">
<div data-dojo-type="dijit/layout/ContentPane" id="contentTab" title="My first tab" data-dojo-props="selected:true">
<div id="formContents">
<div>
<button id="add">Add</button>
</div>
<fieldset data-dojo-type="dijit/Fieldset">
<legend style="align:left">
<label>Form</label>
</legend>
<table>
<tbody>
<tr>
<td>
<input type="text" name="formItem[0]" data-dojo-type="dijit/form/TextBox" />
</td>
</tr>
</tbody>
</table>
</fieldset>
<div data-dojo-type="dijit/Declaration" data-dojo-props="widgetClass:'formBlock', defaults:{row_id:0}">
<fieldset data-dojo-type="dijit/Fieldset">
<legend style="align:left">
<label>Form</label>
</legend>
<table>
<tbody>
<tr>
<td>
<input type="text" name="formItem[${row_id}]" data-dojo-type="dijit/form/TextBox" />
</td>
</tr>
</tbody>
</table>
</fieldset>
</div>
<script>
var jsp_row = 0;
require(["dojo/ready", "dojo/dom", "dojo/on", "dojo/dom-construct", "dojo/parser", "dojo/query", "dojo/dom-attr"], function(ready, dom, on, domConstruct, parser, query, domAttr) {
ready(function() {
on(dom.byId("add"), "click", function(e) {
e.preventDefault();
console.log("<div data-dojo-type='formBlock' data-dojo-props='row_id:" + (++jsp_row) + "></div>");
var form = domConstruct.toDom("<div data-dojo-type='formBlock' data-dojo-props='row_id:" + (++jsp_row) + "'></div>");
var newForm = domConstruct.place(form, "formContents", "after");
parser.parse(newForm);
});
});
});
</script>
</div>
</div>
</div>
</form>
</body>
</html>
How would I get it so that if I click add, I can add the Declared fieldset below the current displayed one?
Thank you very much!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script>
var dojoConfig = {
async: true,
parseOnLoad: false,
has: {
"dojo-debug-messages": true
}
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<script>
require(["dojo/parser","dijit/layout/TabContainer", "dijit/layout/ContentPane", "dijit/Fieldset", "dijit/form/TextBox", "dijit/Declaration",
"dojo/domReady!"
], function(parser) {
parser.parse();
});
</script>
</head>
<body>
<form>
<div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;">
<div data-dojo-type="dijit/layout/ContentPane" id="contentTab" title="My first tab" data-dojo-props="selected:true">
<div id="formContents">
<div>
<button id="add">Add</button>
</div>
<fieldset data-dojo-type="dijit/Fieldset">
<legend style="align:left">
<label>Form</label>
</legend>
<table>
<tbody>
<tr>
<td>
<input type="text" name="formItem[0]" data-dojo-type="dijit/form/TextBox" />
</td>
</tr>
</tbody>
</table>
</fieldset>
<div data-dojo-type="dijit/Declaration" data-dojo-props="widgetClass:'formBlock', defaults:{row_id:0}">
<fieldset data-dojo-type="dijit/Fieldset">
<legend style="align:left">
<label>Form</label>
</legend>
<table>
<tbody>
<tr>
<td>
<input type="text" name="formItem[${row_id}]" data-dojo-type="dijit/form/TextBox" />
</td>
</tr>
</tbody>
</table>
</fieldset>
</div>
<script>
var jsp_row = 0;
require(["dojo/ready", "dojo/dom", "dojo/on", "dojo/dom-construct", "dojo/parser", "dojo/query", "dojo/dom-attr"], function(ready, dom, on, domConstruct, parser, query, domAttr) {
ready(function() {
on(dom.byId("add"), "click", function(e) {
e.preventDefault();
console.log("<div data-dojo-type='formBlock' data-dojo-props='row_id:" + (++jsp_row) + "></div>");
var form = domConstruct.toDom("<div data-dojo-type='formBlock' data-dojo-props='row_id:" + (++jsp_row) + "'></div>");
var newForm = domConstruct.place(form, "formContents", "after");
parser.parse(newForm);
});
});
});
</script>
</div>
</div>
</div>
</form>
</body>
</html>

Programmatically Click a Button on Web GUI after passing from Login Page

I would like to programmatically Power on a Server Using SuperMicro Web GUI.
Initially the login page form http://server1 code is
<form name="form1" action="/cgi/login.cgi" method="post" autocomplete="off">
<label style="width:85px; text-align:left; margin-right: 2px;">
<script>
document.writeln(lang.LANG_LOGIN_USERNAME)
</script>Username
</label>
<input name="name" size="20" maxlength="64" style="width:146px;" type="text" onkeydown="checkEnt(event)">
<label style="width:85px; text-align:left; margin-right: 2px;">
<script>
document.writeln(lang.LANG_LOGIN_PASSWORD)
</script>Password
</label>
<input name="pwd" size="20" maxlength="64" style="width:146px;" type="password" onkeydown="checkEnt(event)">
<input id="login_word" class="btnStyle" name="Login" type="button" onclick="javascript: checkform(this)" value="login">
</form>
After Typing the userename:password as ADMIN:PASSWORD it goes to a control page http://server1/cgi/url_redirect.cgi?url_name=mainmenu where the server can be switched on by clicking a button whose code is given below
<input type="button" class="btnStyle" id="btn_poweron" align="left" value="Power On">
The Entire HTML Code of the Login Page is
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Pragma" content="no_cache">
<meta name="ATEN International Co Ltd." content="(c) ATEN International Co Ltd. 2010">
<title></title>
<!-- <link rel="shortcut icon" href="../images/favicon.ico"> -->
<link rel="stylesheet" href="../css/basic.css" type="text/css">
<script language="JavaScript">
if (window != top)
top.location.href = "/"; //location.href;
</script>
<style type="text/css"></style>
<script language="JavaScript" src="../js/utils.js"></script>
<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript" ,="" src="../js/lang/English/lang_str.js"></script>
<script language="JavaScript" type="text/javascript">
var lang_setting;
lang_setting = ReadCookie("language");
if (lang_setting == null) {
CreateCookie("langSetFlag", "0");
CreateCookie("language", "English");
lang_setting = "English";
}
document.write("<script type=\"text/javascript\", src = \"../js/lang/" + lang_setting + "/lang_str.js\"><\/script>");
function checkform() {
if (Trim(form1.name.value) == "") {
alert(lang.LANG_LOGIN_INVALID_USERNAME);
form1.name.focus();
return;
}
if (Trim(form1.pwd.value) == "") {
alert(lang.LANG_LOGIN_INVALID_PASSWORD);
form1.pwd.focus();
return;
}
document.form1.submit();
return;
}
function checkEnt(e) {
var key = window.event ? e.keyCode : e.which;
if (key == 13) {
checkform();
}
}
function PageInit() {
var msg = document.getElementById("login_word");
msg.setAttribute("value", lang.LANG_LOGIN_LOGIN);
return;
}
</script>
<script type="text/javascript" ,="" src="../js/lang/English/lang_str.js"></script>
</head>
<body onload="PageInit()">
<table style="margin: 0px; height: 100%; width: 100%" border="0" background="#FFFFFF" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="height: 25%; vertical-align: bottom; text-align: center">
<table style="margin: 0 auto;" border="0" width="412px">
<tbody>
<tr>
<td>
<img src="../images/logo.gif" style="margin: 0px; padding: 0px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="width: 100%">
<td style="height: 75%; vertical-align: top; text-align: center">
<table class="login">
<tbody>
<tr>
<td>
<h3><script>document.writeln(lang.LANG_LOGIN_PROMPT);</script>Please Login
</h3>
<form name="form1" action="/cgi/login.cgi" method="post" autocomplete="off">
<label style="width:85px; text-align:left; margin-right: 2px;">
<script>
document.writeln(lang.LANG_LOGIN_USERNAME)
</script>Username
</label>
<input name="name" size="20" maxlength="64" style="width:146px;" type="text" onkeydown="checkEnt(event)">
<br>
<br>
<label style="width:85px; text-align:left; margin-right: 2px;">
<script>
document.writeln(lang.LANG_LOGIN_PASSWORD)
</script>Password
</label>
<input name="pwd" size="20" maxlength="64" style="width:146px;" type="password" onkeydown="checkEnt(event)">
<br>
<br>
<input id="login_word" class="btnStyle" name="Login" type="button" onclick="javascript: checkform(this)" value="login">
</form>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
And the Entrie HTML Code of the PowerOn Page is
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Pragma" content="no_cache">
<meta name="ATEN International Co Ltd." content="(c) ATEN International Co Ltd. 2010">
<title></title>
<!-- <link rel="shortcut icon" href="../images/favicon.ico"> -->
<script language="JavaScript" src="../js/utils.js"></script>
<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript" ,="" src="../js/lang/English/lang_str.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
var lang_setting;
/*
EraseCookie("langSetFlag");
EraseCookie("language");
*/
EraseCookie("mainpage");
EraseCookie("subpage");
EraseCookie("RELOAD");
lang_setting = ReadCookie("language");
if (lang_setting == null) {
CreateCookie("langSetFlag", "0");
CreateCookie("language", "English");
lang_setting = "English";
}
document.write("<script type=\"text/javascript\", src = \"../js/lang/" + lang_setting + "/lang_str.js\"><\/script>");
onunload = function() {
var url = '/cgi/logout.cgi';
var pars = '?time_stamp=' + (new Date());
var myAjax = new Ajax.Request(
url, {
method: 'post',
parameters: pars
} //reigister callback function
);
}
-->
</script>
<script type="text/javascript" ,="" src="../js/lang/English/lang_str.js"></script>
<style type="text/css"></style>
</head>
<frameset cols="100%,*" border="0" frameborder="no" framespacing="0">
<frame src="../cgi/url_redirect.cgi?url_name=topmenu" id="TOPMENU" name="topmenu" scrolling="yes" noresize="false" marginheight="0" marginwidth="0">
</frameset>
</html>

How to make my popup not transparent and sideways draggable?

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 :)