Develop Reference

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.

onclick jquery to submit form without reloading the page

hey guys so this page im trying to create has tabs with the names of months for each tab and the content of the tabs is a form and a submit button. The problem im facing is, for example, if im on the February tab and i have filled in the form and when i click submit the page reloads(the data inserted into database) and goes back to the first tab which is January. how do i stop that from happening? meaning after clicking on submit and data is inserted successfully it still stays on the February tab. i read that i have to use tag with onClick attribute but thats it. my knowledge of javascript is minimal.
part of the tab with content:
<div class="tabContent" id="feb">
<form method="post" action="income.php">
<input type="hidden" name="feb" value="February">
<center><h2>February </h2></center>
<div>
<div style="height:0px;">
<div class="rmtotal">
<h3>Your Total Income :</br> RM <input type="text" id="febtotal"
name="febtotal" size="11" readonly value="<?php if(#$fsql) {echo
htmlentities(#$fprev['total']);} if(isset($_POST['febtotal']))
{echo htmlentities($_POST['febtotal']);}?>" ></h3>
</div>
<input type="submit" value="Save" class="save" name="febsave">
<button type="submit" class="prev" name="febprev" id="button"
onClick="">Select from previous Month</button>
</div>
<table border="1" rules="groups" cellpadding="10px;" class="tableincome">
<thead>
<th>Monthly Salary</th>
<th></th>
<th>RM</th>
</thead>
<tr>
<td>Basic Salary</td>
<td></td>
<td><center><input type="text" class="feb" placeholder="0"
name="febbasic" size="11" value="<?php if(#$fsql) {echo
htmlentities(#$fprev['basic']);} if(isset($_POST['febbasic'])){echo
htmlentities($_POST['febbasic']);}?>"></center></td>
</tr>
</table>
</form>
</div>
</div>

You can write a custom function that will be executed when someone clicks the submit button.
That function needs to return false to prevent the default behavior.
For the function itself I would use Ajax to send an asynchronous request to the server that can store the data in the database. If you use jQuery it will be very easy to use Ajax:
function handleClick(){
//send the data to the server
$.post(/*...see jQuery documentation*/)
//prevent the form from submitting and the page from reloading
return false;
}
EDIT: Or just follow the posted link :D, just saw it has the same solution

How to hide a file input item in a form?

I'm developing a web page that lets user upload a font file, but the requirement is to display the font name after user selects a file, then he can decide to upload it or not, the font name is a property in the font file, the file name might be "123.ttf", but when you right click on the font file and look into it "Title" preperty, it's called "ACME Explosive Bold", so my Javascript should ideally find the "tilte" property of this font, but after lots of research, I was told JS can't get this property, while on the other hand I've found a piece of Java code that can get it.
So now I'm trying to hide a 2nd form on the page, with an input field whose value will be the user selected file from the first form, when user selected a file but before he clicks the first form's submit button, my JS calls the 2nd form with user selected file, submit it and run a servlet to find it's "Title" and come back and display it on the page, then delete that file on the server, because user has never officially submitted it.
So my question is how to hide this 2nd form with it's own input file field and browse button on the page, I need the form tag so I can simulate a submit. But I don't want users to see it ?
Here is my code so far :
![<div class="body">
<h1>Upload Font</h1> <%-- \[+\] --%>
<s:form namespace="/font" action="add" method="POST" enctype="multipart/form-data">
<div class="dialog">
<table>
<tbody>
<tiles:insertAttribute name="form" />
<tr class="prop">
<td valign="top" class="name required">
<label for="description">Font File:</label>
</td>
<td valign="top">
<s:file name="file" size="62" theme="simple" id="fname" onchange="fileUpload('/pages/font/getFontTitle.jsp',value,this.files\[0\])"/>
</td>
</tr>
<tr class="prop">
<td>
<span class="button"><s:submit/></span>
</td>
</tr>
</tbody>
</table>
</div>
</s:form>
<s:form namespace="/font" action="hiddenForm" method="POST" enctype="multipart/form-data">
<div class="dialog">
<table>
<tbody>
<tr class="prop">
<td valign="top">
<s:file name="file" size="62" theme="simple" id="fname_1"/>
</td>
</tr>
</tbody>
</table>
</div>
</s:form>
</div>]

You can hide the second form using CSS property visibility : hidden.
<s:form namespace="/font" style ='visibility:hidden' action="hiddenForm" method="POST" enctype="multipart/form-data">

Need a link which works depending on browser's javascript enabled/disabled

I have implemented an Alert pop-up using style-sheet and <noscript> if javascript is disabled.
The pop-up has warning message and Ok button.
Ok button will not work until the javascript is disabled in all the browsers.
When javascript enabled and w/o reloading the page
On FF:- Clicking on Ok button page gets Reload
Other Browsers:- Clicking on Ok button nothing happens
I want my Ok button to behave like FF in all the Other Browsers (IE, Opera, Safari, Chrome), how i can achieve this ?
Edited my code is as follows
<!-- [START] Following code is get runed to show pop-up when javascript is disabled -->
<noscript>
<div id="javascript_disabled_fade" class="black_overlay" style="display:block;"></div>
<div id="pagewrap-light-small" style="display:block;">
<div id="javascript_disabled_popup" class="white_content_javascript_disabled" style="margin-left:-185px;margin-top:-143px;width: 371px;height:287px;padding:0px;">
<div style="margin:0px;padding:0px;">
<table align="center" style="text-align:center;width:371px;height:287px; " cellpadding="0" cellspacing="0" border="0" >
<tr>
<td align="center" style="text-align:center;padding-left:2px;height:150px;padding-top:8px;" colspan="2">
<img style="border: 0px none ;" src="/images/logo-small.png"/><br/>
<img style="border:none;" src="/images/account_management.png"/>
</td>
</tr>
<tr>
<td colspan="2" align="center" style="font-weight:bold;font-size:12px;color:#5a5a5a; text-align:center; line-height:18px;" >
The site makes extensive use of JavaScript.<br/>
Please enable <span style="color:red;">JavaScript</span> in your browser.
</td>
</tr>
<tr>
<td valign="top" align="center" style="padding-top:24px;" colspan="2">
</td></tr>
</table>
</div>
</div>
</div>
</noscript>
<!-- [END] Following code is get runed to show pop-up when javascript is disabled -->

This works in my tests in IE8 and Chrome13
<html>
<head>
<noscript>
Your browser do not support javascript or javascript is currently disabled.<br/>
Enable javascript and press button <Reload Page><br/>
<form name="noscript_reload" method="GET">
<input type="submit" value="Reload Page"/>
</form>
</noscript>
</head>
<body>
BODY TEXT
</body>
</html>

I think the only way to get it to "reload" without javascript would be to make your OK button be an anchor tag with an href pointing to the same page.

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

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.