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 );
Related
when i click on dropdown then select multiple after that i have show same table repeatedly, But i want to show that table with different colors.I have append a table on click function, but i want to stop append when i click fourth time on button and also change the color of table at that time
I am new in coding..please help me!
<script>
function yesnoCheck(that) {
if (that.value == "single") {
document.getElementById("first").style.display = "block";
$("#dynamic-forms").empty();
document.getElementById("dynamic-forms").style.display = "none";
document.getElementById("t1").value = "";
$("#dynamic-forms").empty();
document.getElementById("t2").value = "";
$("#dynamic-forms").empty();
document.getElementById("t3").value = "";
$("#dynamic-forms").empty();
document.getElementById("t4").value = "";
$("#dynamic-forms").empty();
document.getElementById("t5").value = "";
$("#dynamic-forms").empty();
document.getElementById("t6").value = "";
$("#dynamic-forms").empty();
document.getElementById("formButton").value = "";
// document.getElementById("form1").value = "clear";
// this.removeparent(form.firstElementChild);
}
else {
document.getElementById("first").style.display = "none";
}
if (that.value == "multiple") {
document.getElementById("second").style.display = "block";
}
else {
document.getElementById("second").style.display = "none";
}
}
// $(document).ready(function () {
$(document).on("click","#tbl1",function (click) {
click.preventDefault();
this.parentElement.remove();
})
$(document).ready(function () {
$("#formButton").click(function () {
// document.form1.style.backgroundColor = 'salmon';
// event.target.style.backgroundColor = 'salmon';
// form1.style.backgroundColor = 'coral';
document.getElementById("dynamic-forms").style.display = "block";
// form1.style.backgroundColor = 'coral';
$("#dynamic-forms").append(
`
<form id="form1" style="margin-bottom:10px;margin-top:10px">
<button style="float:right; margin-right:400px;" type="button1" id="tbl1" value="clear">-</button>
<table style="background-color: #91c8e3;">
<tr>
<td id="location">Location
<input type="text" value="`+$("#pan").val()+`">
</td>
<td>P1
<input type="text">
</td>
</tr>
<tr>
<td>P2
<input type="text">
</td>
<td>P3
<input type="text">
</td>
</tr>
<tr>
<td>Sometime
<input type="text">
</td>
<td>Full day
<input type="text">
</td>
</tr>
</table>
</form>
`
)
$("#pan").val("");
});
});
jQuery(function ($) {
function copyForms($pan, $location) {
$(':input[name]', $location).val(function () {
return $(':input[name=' + this.name + ']', $pan).val();
});
}
$('#pan').on('click', function () {
copyForms($('#pan'), $('#location'));
});
});
</script>
</head>
<body style="background-color: #0979ad; ">
<br><br>
<center>
<div>
<select id="selector" onchange="yesnoCheck(this);">
<option value="select">__Select__</option>
<option value="single">Single</option>
<option value="multiple">Multiple</option>
</select>
</div>
</center>
<br><br>
<center>
<div id="first" style="display: none;">
<table id="tbl" style="background-color: #225670ad;">
<tr>
<td>Location
<input id="t1" type="text">
</td>
<td>P1
<input id="t2" type="text">
</td>
</tr>
<tr>
<td>P2
<input id="t3" type="text">
</td>
<td>P3
<input id="t4" type="text">
</td>
</tr>
<tr>
<td>Sometime
<input id="t5" type="text">
</td>
<td>Full day
<input id="t6" type="text">
</td>
</tr>
</table>
</div>
</center>
<center>
<div id="second" style="display:none;">
<label>Location</label>
<input type="text" id="pan" name="pan">
<button type="button" id="formButton">+</button>// when click on this button
</div>
</center>
<br><br><br>
<center id="dynamic-forms">
</center> <br><br>
</body>
</html>
Hello,I am new in coding and this is my code i want to change my table color repeatedly on click function
when i click on dropdown then select multiple after that i have show same table repeatedly, But i want to show that table with different colors.
check this resssources:
How do you get random RGB in Javascript?
https://sebhastian.com/jquery-change-background-color/
I have input textbox that shows on click search button , but it does not show on first click it shows after first click or on double click. How to solve that.
My code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="loaction-search" style="background-color: red; padding: 5px; width:100px; border-radius:5px;"> search </div>
<table>
<tr>
<td>
<div style="position:relative;">
<span class="clear-search"> X</span>
<input type="type" placeholder="search here" name="name" value=" " id="locationsearchbox" style="display:none;" />
</div>
</td>
<td>
<a title="Zoom to India" id="loaction-search" class="map-icon-search">
click
</a>
</td>
</tr>
</table>
<script>
$('#loaction-search').click(function() {
$("#locationsearchbox").animate({
width: 'toggle'
}, 350, function() {
$(this).focus()
});
})
$(document).on('click', function(e) {
var $target = $(e.target);
if (!$target.closest('.clear-search').length && !$target.closest('#locationsearchbox').length) {
$('#locationsearchbox').hide();
}
});
$(".clear-search").click(function() {
$('#locationsearchbox').val('');
})
</script>
</body>
</html>
Use show() before focus.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="loaction-search" style="background-color: red; padding: 5px; width:100px; border-radius:5px;"> search </div>
<table>
<tr>
<td>
<div style="position:relative;">
<span class="clear-search"> X</span>
<input type="type" placeholder="search here" name="name" value=" " id="locationsearchbox" style="display:none;" />
</div>
</td>
<td>
<a title="Zoom to India" id="loaction-search" class="map-icon-search">
click
</a>
</td>
</tr>
</table>
<script>
$('#loaction-search').click(function() {
$("#locationsearchbox").animate({
width: 'toggle'
}, 350, function() {
$()
$(this).show();
$(this).focus();
});
})
$(document).on('click', function(e) {
var $target = $(e.target);
if (!$target.closest('.clear-search').length && !$target.closest('#locationsearchbox').length) {
$('#locationsearchbox').hide();
}
});
$(".clear-search").click(function() {
$('#locationsearchbox').val('');
})
</script>
</body>
</html>
The main issue with tghe code was the logic that you handled to hide the #locationsearchbox was wrong. You have to exclude the #loaction-search element aswell since we are already handling the click event of the same, or else the action will trigger twice
$("#loaction-search").click(function () {
$("#locationsearchbox").animate(
{
width: "toggle",
},
350,
function () {
$(this).focus();
}
);
});
$(document).on("click", function (e) {
var $target = $(e.target);
if (
!$target.closest(".clear-search").length &&
!$target.closest("#locationsearchbox").length &&
!$target.closest("#loaction-search").length
) {
$("#locationsearchbox").hide();
}
});
$(".clear-search").click(function () {
$("#locationsearchbox").val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div
id="loaction-search"
style="
background-color: red;
padding: 5px;
width: 100px;
border-radius: 5px;
"
>
search
</div>
<table>
<tr>
<td>
<div style="position: relative">
<span class="clear-search"> X</span>
<input
type="type"
placeholder="search here"
name="name"
value=" "
id="locationsearchbox"
style="display: none"
/>
</div>
</td>
<td>
<a
title="Zoom to India"
id="loaction-search-2"
class="map-icon-search"
>
click
</a>
</td>
</tr>
</table>
I have create one HTML with the help of AngularJS.
<form name="target" ng-submit="createAllKeywordsJSON(codeMasterList)"><!-- createAllKeywordsJSON() -->
<input type="submit" value="Save" class="myButton" name="submit" style="margin: 0px;float:right;">
<div class="category-placer2" style="width:100%">
<div class="category-header-keywords">
<div class="icon-add"><img src="images/icon-add.png" alt="Add" border="0" title="Add phone Number" /></div>
<div class="category-header-text" ><span ng-bind="dispName"></span></div>
</div>
<div class="category-base">
<div class="keywordplacer">
<table width="99%" border="0" align="center" cellpadding="0" cellspacing="0" class="keywordsList">
<tr>
<th width="60%" colspan="2">Code Master Name</th>
<th width="30%" colspan="2">Status</th>
</tr>
<tr ng-repeat="type in codeMasterList">
<td width="1%" class="">
<input type="hidden" name="codeMasterId" value="{{type.codeMasterId}}" />
</td>
<td width="60%" class="">
<input type="text" name="keywordName" value="{{type.name}}" alt="Name of Keyword" size="60" >
</td>
<td width="30%" class="">
<input type="radio" value="1" name="{{type.codeMasterId}}" alt="Name of Keyword" ng-checked="{{(type.activeInd == 1) && ('true') || ('false')}}" />Active
<input type="radio" value="0" name="{{type.codeMasterId}}" alt="Name of Keyword" ng-checked="{{(type.activeInd == 0) && ('true') || ('false')}}" style="margin-left:50px;" />Inactive
</td>
</tr>
</table>
</div>
<center>
<hr style=" background-color: #ABBFC6; height: 2px; width: 90%;">
<input type="submit" value="Save" class="myButton" style="margin: 0px;"/>
</center>
<!-- <div class="table-index">P - Primary</div> -->
</div>
</div>
</form>
It will show value in editable mode.
I want to save all the list at a single click on save button. how can i do such thing using angularjs ?
Can you please help me to generate JSON data for the name as well as for radio button value ?
below is my controller:
keywordModule.controller('keywordTypeController',['$scope', '$http', 'keywordService',
function($scope, $http, keywordService) {
$scope.createAllKeywordsJSON = function() {
//alert($scope.codeMasterList.codeMasterId);
var tempItemList = [];
angular.foreach($scope.codeMasterList,function(item,index){
tempItemList.push(item);
});
alert(tempItemList);
/*keywordService.createAllKeywordsJSON().query(codeMasterList,
//Success Handler handler
function(data) {
},
//Failure handler
function(error) {
}
);*/
//alert(codeMasterList);
};
}
]);
$scope.codeMasterList would be the JSON data for your list.
You can update the value of the form fields by using ng-model instead of value. This also will bind the input values right back to the item in the list. So then you can just save $scope.codeMasterList
HTML Sample
<input type="text" ng-model="type.name" alt="Name of Keyword" size="60" >
Working Fiddle
I have multiple div's with text box want to get the each div input box value and display it into that div itself
HTML :
<div id="product_data" class="ui-sortable">
<div class="clonedInput" id="add_attribute" style="display: block;">
<div id="add_attributes">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="clonedInput" id="add_attribute_2" style="display: block;">
<div id="add_attributes" class="woocommerce_attribute wc-metabox ">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="clonedInput" id="add_attribute_3" style="display: block;">
<div id="add_attributes" class="woocommerce_attribute wc-metabox ">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
I'm trying to get the input field value "id = attribute_name" and display the value into the " " on blur function and this was dynamic text box
$( "input" ).blur(function() {
var string = $(this).val();
$(this).parent().append(string);
});
This will append the text on removing the cursor from the input . Style it as your requirement. Atleast it should give you an idea of what to do.
http://jsfiddle.net/L4UQJ/
try this..
$("input[type='text']").on('blur', function () {
alert($(this).val());
});
Finally It's working :)
$( "input" ).blur(function() {
var string = $(this).val();
$(this).closest('div').find('h3 > strong').html(string);
});
DEMO
Since those HTML elements are generated dynamically, use this below approach.
$(document).on('blur', '#attribute_name', function () {
console.log($(this).val()); //To get the value of the textbox
$(this).val(' ');
});
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 :)