To retain vertical scroll positon even after clicking save button in JS - javascript

function successfullySaved()
{
document.getElementById("successfullySaved").value.focus();
}
this function doesnt wrk..
should i try with using scrollBottom?
plz suggest me code so that the succesful msg(comes into pic only onclick of Save button in my case) which is getting displayed at the bottom of the page shd retain the scroll bar in same position even after clicking Button.
<td style="padding-left: 345px">
<button class="save" type="button" title="Save" id="Save" name="Save" onclick="javascript:validateSettings(),successfullySaved('successfullySaved');">
<spring:message code="button.save"/></button>
</td>
<table id="successfullySaved">
<c:if test="${saveSuccess eq true}">
<tr> <td>
<spring:message code="security.successful.save"/> </td>
</tr>
</c:if>
</table>

Use this style for table#successfullySaved
position:fixed;bottom:0;
There's no need to set the focus in this case, the message will always appear at the bottom of the viewport.
If you need to support MSIE<7 too, you have to build a workaround by setting the position to a value depending on document.body.scrollTop , because of MSIE doesnt support position:fixed in elder versions.

Related

How to position dynamic content so that other content doesn't move

I have tried to set the message after user clicked on the save button. Message should be 'Record has been saved successfully!' Next to the Save button or aligned to the right side of the table. Here is my HTML:
<tr>
<td align="center">
<button type="button" name="save" id="save" onclick="pgSave();">Save</button>
<span id="msgSave"></span>
</td>
</tr>
Javascript:
document.getElementById("msgSave").innerHTML = "Record has been saved successfully!";
Current message will show but Save button will slide to the left. I don't want my button to move once message shows up. Is there any way to fix that? Should I set the standard width or something else is wrong in my HTML.
If you align your tr to the left, there will be no slide
<tr>
<td align="left">
<button type="button" name="save" id="save" onclick="pgSave();">Save</button>
<span id="msgSave"></span>
</td>
</tr>
I don't know if your layout allows you to align left, but it's an solution
The problem is that your table cell will adjust when the content inside it changes! That's the nature of table cells using centered content.
Instead you could do something like:
<tr>
<td width="30%" align="center">
<button type="button" name="save" id="save" onclick="pgSave();">Save</button>
</td>
<td width="30%"><span id="msgSave"></span></td>
</tr>
Note that I added widths to the cells - this should keep them the same layout whatever content is in them (more or less).
A better approach would be DIV's though as they don't resize/move like table cells will.
Or inside the same td element put the span enclosed by a p element like this :
<p><span id='msgSave'></span></p>
Since there is a default break for p elements.

Pictures in radio button not working with IE11

I trying use pictures in radio button. But problem is when i running on IE9 it work fine but on IE 11 not. On my jQuery scripts i hide all radio buttons and for actions i using label's. On IE9 i can click on the picture (anywhere) and it is fine. But on IE11 i need click only on left bottom corner.
<div id="div_name">
<table class="tables">
<tr>
<td><input type="radio" name="name"[] id="H1" value="H1" class="me_radio"><label for="H1" class="radio_label"><img src="icons/1.gif"><br>One</label></td>
<td><input type="radio" name="name"[] id="H2" value="H2" class="me_radio"><label for="H2" class="radio_label"><img src="icons/2.gif"><br>Two </label></td>
<td><input type="radio" name="name"[] id="H3" value="H3" class="me_radio"><label for="H3" class="radio_label"><img src="icons/3.gif"><br>Three</label></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
$('#me_radio label').click(function() {
$('#other_div label').removeClass('selected');
.
.// remove classes from another
.
$(this).addClass('selected').siblings().removeClass('selected');
});
And CSS
.selected {
background-color: #ccc;
}
Might be kind of late for this, but the workaround I have been using is
<meta http-equiv="x-ua-compatible" content="IE=10">
You might have already solved this issue, but hope you found another way for it work.

How to display a table inside a modal popup window which is part of a larger form

I have some code below that contains a form which contains a hiddenTable element that will show up once you click the search button. My question is: how would I display the table in a modal popup window while still having it be apart of the same form. The table contains a comment box and a submit button, I want the comment to be submitted along with all the other field's data inside the form.
<!DOCTYPE html>
<html>
<head>
<style>
#hiddenStuff {
display: none;
}
</style>
</head>
<body>
<form action="...">
// search fields here
<input type="button"
value="Search"
onclick="document.getElementById('hiddenTable').style.display='block';">
<table id="hiddenTable" class="form_table" style="display:none;">
<tr>
<td class="form_field_name">Enter a comment</td>
</tr>
<tr>
<td class="form_field_entry">
<textarea required ="true"
name="textarea" rows="10"
cols="50"
placeholder="Please enter a description for the performed task."></textarea>
</td>
</tr>
<tr>
<td class="form_field_entry">
<cfinput type="submit" name="createPeriod" value="Submit"/>
</td>
</tr>
</table>
</form>
</body>
</html>
Please excuse my messy code.
I agree with #Dan that it might be a pain for a ux standpoint to make this an extra modal, but if that's the result you want, you can surround your table in a div and add javascript to make the box "popup". Add CSS styles to create the black transparent background on click, and you will have a very simple modal popup.
I created a codepen for a reference - http://codepen.io/anon/pen/brEHI

Have to click twice on a popup window/Dialog box

I am using a webkit browser and getting an bug as when I am trying to close the popup its not active only and the parent browser is active even after the pop up for uploading files is open.
I have to click on popup to activate it first and then again to make any selection on it.
How can I make the pop up active as soon as its open.
Is there a way to add event handler in the input tag only to make the pop up active and inactive the parent browser.
for eg
<form action="${ctx}/home/step11/uploadReport" method="POST" enctype="multipart/form-data" id="form_upload">
<table style="margin-left:25px">
<tr>
<td colspan="5" style="vertical-align:middle; font-size:100%">Demo Request Upload:</td>
</tr>
<tr>
<td style="vertical-align:middle"><input id="uploadFileId" name="fileName" type="file" multiple="true"/></td>
<td/>
<td>
<c:if test="${empty editable}">
<input id="btnImport" class="active small button" disabled="disabled" type="button" value="Import"/>
</c:if>
<c:if test="${not empty editable}">
<input id="btnImport" class="active small button" type="button" value="Import"/>
</c:if>
</td>
</tr>
</table>
</form>
Try creating an event which automatically clicks on the browser when its opened so it will be active after a couple of micro seconds

Tab through a table inside content editable div?

I am trying to figure out how to tab through HTML tables cells inside a contenteditable div. I know most people would say why are you doing that in the first place. I am working on a text editor that allows the user to insert a pre-formatted table where ever they want. I have tackled inserting the table dynamically at the users cursor but I cannot figure out how to let the user tab from the content to the html table and through each cell. I have tried input boxes which allows them to tab through but it leaves selector bars on each corner and still requires the user to double click on the cell to add content. I have also tried just table cells and it will not tab to the cells it just jumps over them. Any help would be much appreciated... after conquering the tracking of the cursor for inserting the table I thought I was home free... :(
<div id="divbilltext" runat="server" contenteditable="true" style="height:auto;">
<table>
<tr>
<td>
<input type="text" id="a" tabindex="1"/>
</td>
<td>
<input type="text" id="b" tabindex="2"/>
</td>
<td>
<input type="text" id="c" tabindex="3"/>
</td>
</tr>
</table>
</div>
tabindex would be the most consistent way of achieving this:
http://www.w3.org/TR/html4/interact/forms.html#adef-tabindex
however tabindex is supported by specific elements only: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.

Categories

Resources