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 :)
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
Trying to get text of alert but getting exception Exception in thread "main" org.openqa.selenium.NoAlertPresentException: no alert open looks like it is a modal box please check code for more detail on this.
driver.findElement(By.name("submit_formset")).click();
Alert alt = driver.switchTo().alert()
String without_data = alt.getText();
System.out.println("alert message when no data is entered:- "+without_data);
Check url of image for more details about alert : https://i.stack.imgur.com/Rk7Ox.png
Html code for current pop-up window is given below let me know for more clarification on this:
<body>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PF9P8P9" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<section class="main-section">
<footer class="main-footer noprint">
<script src="/static/newdesign/bower_components/foundation/js/foundation.min.js">
<script src="/static/newdesign/js/app.js">
<script src="/static/js/tables/responsive-tables.js">
<script type="text/javascript">
<div id="modal_message" class="reveal-modal" data-reveal="">
<script src="/static/slick/slick.min.js" type="text/javascript">
<script id="" type="text/javascript">
<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1157897200940118&ev=PageView&noscript=1"></noscript>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front loadingDialog ui-draggable" style="display: none;" tabindex="-1" role="dialog" aria-describedby="loadingDialog" aria-labelledby="ui-id-1">
<div class="reveal-modal-bg" style="display: block;"></div>
<div id="formset-modal" class="fixed-size-reveal-modal-vehicle open" data-reveal="" style="display: block; opacity: 1; visibility: visible; top: 50px;">
<div class="row">
<div class="form-container">
<form data-add="true" method="post" action="/vehicle-check/add-vehicles/">
<input type="hidden" value="4J9zftpcYjBkGa93ZNCbEAClbxXAwhEFZVKsw9cKOb01KrtNbXMQviYEyzl4nT02" name="csrfmiddlewaretoken">
<input id="id_form-TOTAL_FORMS" type="hidden" value="1" name="form-TOTAL_FORMS">
<input id="id_form-INITIAL_FORMS" type="hidden" value="0" name="form-INITIAL_FORMS">
<input id="id_form-MIN_NUM_FORMS" type="hidden" value="0" name="form-MIN_NUM_FORMS">
<input id="id_form-MAX_NUM_FORMS" type="hidden" value="1000" name="form-MAX_NUM_FORMS">
<table style="width: 100%;">
<thead>
<tbody>
<tr class="even_row extra-row">
<td>
<select id="id_form-0-vehicle_type" required="" name="form-0-vehicle_type">
<option selected="" value="">---------</option>
<option value="2">VAN</option>
<option value="1">HGV</option>
<option value="3">LGV</option>
<option value="4">BUS</option>
<option value="5">PSV</option>
<option value="6">CAR</option>
<option value="7">Small Passenger</option>
</select>
</td>
<td>
<input id="id_form-0-registration" type="text" maxlength="10" required="" name="form-0-registration">
</td>
<td class="text-center">
<input id="id_form-0-can_attach_trailer" class="can_attach_trailer-field img-checkbox hidden" type="checkbox" name="form-0-can_attach_trailer" style="display: none;">
<img class="img-checkbox" src="/static/kinesisapp/images/empty-checkbox.png" alt="Checkbox" style="cursor: pointer;">
</td>
<td class="vehicle-groups">
<select id="id_form-0-groups" name="form-0-groups">
</td>
<td class="text-center">
<td class="text-center">
<input id="id_form-0-id" type="hidden" name="form-0-id">
</tr>
<tr class="due-date-fields even_row extra-row">
<tr class="error-messages hidden extra-row">
</tbody>
</table>
<div style="display:block; width: 330px;">
</form>
</div>
<div id="extra-form-fields" class="hidden">
</div>
</div>
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
</body>
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 );
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 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(' ');
});