Here is the question i posted and got the answer.
https://stackoverflow.com/questions/17780797/set-contents-of-page-according-to-browser-resolution
Every thing is working fine in Firefox and chrome.But Need is that it must work in IE.But It always gives QR Code under Captcha. Here is what I have changed my code.
<div style="border: 1px solid lightgrey; border-radius: 10px 10px 10px 10px; width: 825px">
<ul id="holder" style="display:inline-block; list-style-type: none;">
<li style="display:inline-block; list-style-type: none">
<div class="captcha" >
@Html.Captcha("Refresh", "Enter Captcha", 5, "Is required field.", true)<div style="color: Red;">@TempData["ErrorMessage"]</div>
</div>
</li>
<li style="display:inline-block; list-style-type: none;">
<div id="qrcode" class="qrcode">
<img src="@Url.Action("QrCode", "Qr", new { url = Model.ShortUrl })" onclick="AppendURL('@this.Model.ShortUrl')"/>
</div>
</li>
</ul>
</div>
And JS code is :
window.onresize = getWindowWidthHeight;
window.onload = getWindowWidthHeight;
function getWindowWidthHeight(event) {
var width = window.innerWidth;
var height = window.innerHeight;
// alert(width);
//alert( $(window).width());
var firstLi = document.getElementById('holder').children[0];
if (width > 600) {
firstLi.style.display = 'inline-block';
} else {
firstLi.style.display = 'list-item';
}
};
Kindly help.Thanks in advance.