http://www.gonzoblog.nl/2012/03/21/10-testing-tools-for-responsive-web-design/
Interesting ones …
Use http://responsivepx.com/ for all browsers
or
http://www.jamus.co.uk/demos/rwd-demonstrations/
or
use resize option with web developer plug-in for FF / Chrome
or resolution test chrome plug-in
https://chrome.google.com/webstore/detail/resolution-test/idhfcdbheobinplaamokffboaccidbal?hl=en-US
http://www.codeproject.com/Articles/10240/Detecting-Page-Refresh
http://msdn.microsoft.com/en-us/library/ms379557%28VS.80%29.aspx#bedrockas_topic2
Thx to my colleague who provided these links.
VJIn IE/Firefox we can use window.showModalDialog to show modal popup window.
Use window.returnValue in the popup window to pass the selections to parent window.
Main Page Code ...
<script type="text/javascript">
function ModalPopup() {
var retValue = window.showModalDialog('popup.htm', 'height=200,width=150');
alert(retValue);
}
</script>
<a href="#" onclick='javascript:ModalPopup()'>Click</a>
Popup Window Code ...
<script>
function dosubmit() {
window.returnValue = document.getElementById("txtName").value;
window.close();
}
</script>
<a href='#' onclick='javascript:dosubmit()'>Close</a>
<input value="hi" type="text" id="txtName" />
But this showModalDialog has disadvantages like it will not work in Chrome and some other browsers and also test automation of UI using Selenium software will not.
Refer the below links for solution on Selenium issue ...
http://seleniumdeal.blogspot.com/2009/01/handling-modal-window-with-selenium.html
http://seleniumdeal.blogspot.com/2010/04/working-with-modal-dialogs-and-selenium.html
http://www.codeproject.com/KB/ajax/IntroAjaxASPNET.aspx
ASP.NET callbacks for AJAX using ICallbackEventHandler interface, AJAX Pro (http://ajaxpro.codeplex.com/) some interesting techniques which are good to know even though we have some latest and simple AJAX techniques like JQuery AJAX.
log4net – logging info/warning/errors in your aplication to a log file or to the database (sql server, oracle, DB2, MS Access ) or to send it in a email or to show it as a message on your machine or to write to a event log …
There are users across the internet who don’t have Javascript. Good websites try to code in such a way that allows all users to access content, with or without Javascript or other plugins.
Then all the cool Javascript interaction and such is added on top later, for Javascript-enabled users (the majority). This is called Progressive Enhancement, a buzz word you should know about if you’re in the web development.
Code rendered inside noscript tag will only render when the user doesn’t have javascript enabled. So at the very least we can do something like this
<noscript> Java script is required for this page to view, please enable it through your browser options </noscript>
More about noscript tag …
<noscript>
<div id=”example”>I want to get this innerHTML</div>
</noscript>
<script type=”text/javascript”>
alert($(‘example’).innerHTML);
</script>
This javascript snippet just returns an empty string. To make it work we can sorta hack it in FF, IE, and Opera.
$(“div img[src*=’cg=myspace’]”).attr(“src”, “//secure-nz.imrworldwide.com/cgi-bin/m?ci=nz-fim&cg=myspace-music&cc=1”);
var nos = document.getElementsByTagName(“noscript”)[0];
// in some browsers, contents of noscript hang around in one form or another
var nosHtml = nos.textContentnos.innerHTML;
if ( nosHtml )
{
var temp = document.createElement(“div”);
temp.innerHTML = nosHtml;
// lazy man’s query library: add it, find it, remove it
document.body.appendChild(temp);
var ex = document.getElementById(“example”);
document.body.removeChild(temp);
alert(ex.innerHTML);
}
In Google’s Chrome, the noscript element has no children in the DOM i.e. everything ignored if scripting is enabled in the browser, and we may expect this to be true in other browsers as well as future versions of the browsers.
IE6/IE7 are tough browsers to fix any UI related issues. You need to understand few hacks to solve those issues. Refer http://www.webdevout.net/css-hacks for more details.
A Java/.NET developer (not a core UI developer) may not have thorough idea on following css attributes. Knowing them makes your life easy in case if you are fixing any related UI issues.
Opacity, z-index, float, position
.modal-overlay {
opacity:0.85;
filter: alpha(opacity = 50);
-moz-opacity: 0.5;
overflow:hidden;
cursor:pointer;
position:absolute;
z-index:102;
background:transparent url(‘/close-button.png’) no-repeat scroll right top;
}
IE uses filter attribute and skips opacity attribute & other browsers skips filter.
Ex:
$.ajaxSetup({
url: “/xmlhttp/”,
global: false,
type: “POST”,
data: myData
});
Sets the defaults for Ajax requests to the url “/xmlhttp/”, disables global handlers and uses POST instead of GET. The above Ajax request then sends some data without having to set anything else.
Note: Global callback functions should be set with their respective global Ajax event handler methods-.ajaxStart(), .ajaxStop(), .ajaxComplete(), .ajaxError(), .ajaxSuccess(), .ajaxSend()-rather than within the settings object for $.ajaxSetup().
Show a loading message before AJAX request starts
Ex:
$(“#loading”).ajaxStart(function(){
$(this).text(‘Triggered ajaxStart handler.’);
//$(this).show();
});
Tech Hub 