We Keep Coding

how to set different height for different browser?

I have div that has a height: 300px; and overflow: auto;. It looks good in Chrome, but in Firefox it start scroll the page. When I decrease the height to height: 200px;` it looks good.
Can we give different div height when html page open in Chrome and Firefox?

Use the below CSS block for firefox
#-moz-document url-prefix() {
.selector {
width:200px;
}
}
and use the below CSS block for chrome
#media screen and (-webkit-min-device-pixel-ratio:0) {
.selector {
width:300px;
}
}

You can write browser specific code by detecting browser.
Here is the link for browser detection Browser detection in JavaScript?

Give the condition according to the browser using javascript
if (!!window.chrome == true) {
//condition for chrome
}
else if (typeof InstallTrigger !== 'undefined') {
//condition for firefox
}
else if (/*#cc_on!#*/false == true) {
//condition for safari
}
else if (!!window.opera || navigator.userAgent.indexOf('Opera') >= 0) {
//condition for opera
}
else if (Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0) {
//condition fo IE
}
This javascript code will detect the browser. Give onload function for body and give the code for that function.

I think better way to change the css files based on the browser. As I think it is better to separate the styles functionality from the JavaScript. It will be good coding practice and maintainability will be easier.

Use different styles sheets (css) based on the browser.
E.g.
<script type="text/javascript">
var browser=navigator.appName;
if browser == "Microsoft Internet Explorer"
{
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"IE.css\">");
}
else if browser == "Firefox"
{
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"Firefox.css\">");
}
else
{
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"generic.css\">");
}
</script>
or
<!--[if IE]><link href="/ie.css" rel="stylesheet" type="text/css" /><![endif]-->

Javascript IE conflict

the following javascript code is working in FF and Chrome but in an any versions of IE. There does not appear to be any obvious errors I can find.
Any help will be appreciated.
<script type="text/javascript">
// hide/expose search_by2 to/from dates
function hide_search_by2(that){
selected_value = that.options[that.selectedIndex].value;
if(selected_value == 'vehicles_sales.nodate'){
document.getElementById("search_by2_from_row").hidden=true;
document.getElementById("search_by2_to_row").hidden=true;
} else {
document.getElementById("search_by2_from_row").hidden=false;
document.getElementById("search_by2_to_row").hidden=false;
}
}
</script>

What is hidden?
Set display to none if you want to hide an element.
hide
document.getElementById("search_by2_from_row").style.display = "none";
show
document.getElementById("search_by2_from_row").style.display = "inline"; //or "block"
or visibility
hide
document.getElementById("search_by2_from_row").style.visibility = "hidden";
show
document.getElementById("search_by2_from_row").style.visibility = "visible";

JavaScript not working in IE 6/7 for my website

I have some code running on my website which will detect if a div with the id, photo, is showing on the screen or is scrolled onto the screen. If the div is showing, a class is added to the div which will cause a background image to load inside the div. The intent is to lazyload the image so that the site loads faster.
It is working great in all browsers except for IE 6/7. Can someone tell me what is wrong with the below code that prevents it from working in these IE browsers?
function $(a){
return document.getElementById(a)
}
function scrll(){
function a(d){
var f=d.offsetTop,
e=d.offsetLeft,
c=d.offsetWidth,
b=d.offsetHeight;
while(d.offsetParent){
d=d.offsetParent;
f+=d.offsetTop;
e+=d.offsetLeft
}
return(f<(window.pageYOffset+window.innerHeight)
&&e<(window.pageXOffset+window.innerWidth)
&&(f+b)>window.pageYOffset&&(e+c)>window.pageXOffset)
}
if(a($("photo"))){
$("imgholder").className="pic11 pic21";
if(window.removeEventListener){
window.removeEventListener("scroll",scrll,false)
}else{
if(window.detachEvent){
window.detachEvent("onscroll",scrll)
}else{
window.onscroll=null
}
}
}
}
if(window.addEventListener){
window.addEventListener("scroll",scrll,false);
}else{
if(window.attachEvent){
window.attachEvent("onscroll",scrll);
}else{
window.onscroll=scrll;
}
}
setTimeout(scrll,1);
The code is active on my website: http://www.ericperrets.info/

IE doesn't have innerHeight. Use this function instead:
function getWindowHeight()
{
if (window.innerHeight) return window.innerHeight;
if (window.document.documentElement.clientHeight) return window.document.documentElement.clientHeight;
return window.document.body.clientHeight;
}
Also, a good article explaining differences between browsers is at http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

Printing just an iFrame

I'm working on a case resolution system, and am currently using a jquery colorbox to display a list of open tasks to the user. Users want to be able to print this list, and I guess you can do it from within the page itself by adding a JavaScript link that triggers window.print from within the iframe. However, I've also got to account for users possibly selecting print from the browser's menu. In that case, if the colorbox is open, I just want to print its contents and not the overlying page.
Is it possible to hide everything except for the iframed content using a print media CSS file? If so, how can this be achieved? Failing that, I'll need to resort to JavaScript, so would achieving the effect in JavaScript be possible?

// suppose that this is how your iframe look like <iframe id='print-iframe' name='print-frame-name'></iframe>
// this is how you do it using jquery:
$("#print-iframe").get(0).contentWindow.print();
// and this is how you do it using native javascript:
document.getElementById("print-iframe").contentWindow.print();

In case the pure CSS solution will fail (didn't work for me but maybe I just missed something) you can have combined solution of CSS and JavaScript. First have this:
<style type="text/css" media="print">
.hideonprint { display:none; }
</style>
Then such JavaScript will cause all content to be hidden when printing, except your frame:
<script type="text/javascript">
window.onbeforeprint = function WindowPrint(evt) {
for (var i = 0; i < document.body.childNodes.length; i++) {
var curNode = document.body.childNodes[i];
if (typeof curNode.className != "undefined") {
var curClassName = curNode.className || "";
if (curClassName.indexOf("hideonprint") < 0) {
var newClassName = "";
if (curClassName.length > 0)
newClassName += curClassName + " ";
newClassName += "hideonprint";
curNode.setAttribute("original_class", curClassName);
curNode.className = newClassName;
}
}
}
document.getElementById("myframe").className = document.getElementById("myframe").getAttribute("original_class");
}
</script>
This also assume the iframe is direct child of the body otherwise it won't work either.

I have found a method that works to print just the IFrame's content even if the client uses the browser's print menu item, but I couldn't tell you why that is. The trick is to set the focus to the IFrame before printing. The print stylesheet is needed too, although the javascript seems to be what is happening when the user prints from the menu. You need both parts for it to work. It prints the entire document, even if it is larger than the IFrame! I have successfully tested it in IE8, Firefox 5 and 6 and Safari 3.2.
I use this script as a handler for an onclick event for a button or "print me" link:
<script type="text/javascript" language=JavaScript>
function CheckIsIE()
{
if (navigator.appName.toUpperCase() == 'MICROSOFT INTERNET EXPLORER')
{ return true; }
else
{ return false; }
}
function PrintThisPage()
{
if (CheckIsIE() == true)
{
document.content.focus();
document.content.print();
}
else
{
window.frames['content'].focus();
window.frames['content'].print();
}
}
</script>
The IFrame in question is named and id'd content. My button is in a div called print_iframe The browser sniffing is essential!
Then I use a print only stylesheet linked in like this:
<link href="/styles/print.css" rel="stylesheet" type="text/css" media="print" />
#charset "utf-8";
/* CSS Document */
body { background:none; }
#left { display:none; }
#main img { display:none; }
#banner
{
display:none;
margin-top:0px;
padding:0px;
}
#main
{
margin-top:0px;
padding:0px;
}
#print_iframe
{
display:none;
}

This could work if the iframe is a direct child of body
<style type="text/css" media="print">
body *{display:none}
iframe{display:block}
</style>

JavaScript progress bar

I want to have a progress bar which should show when I click on a button, e.g. "validate now". My requirement is to check 2000 URLs whether they are working or not. This was taking a lot of time while executing in program. So I need to show a progress bar to the user to know the status. How can I do this using JavaScript?

you could use the jQuery UI Progress bar simple, good looking and easy to implement, you just need to update the value every second or two.
$("#progressbar").progressbar({
value: 37
});

You would have to use Ajax and hit the server/ database every 2-3 second and fetch the status and display on web page. To display progress bar you can use table with different tds and set the background color of these td cells with the status result.
For progress bar create a table with 10 cells of equal width and say the status is 40% then you will set background of first 4 cells indicating 40%.

You could use ProgressBar.js. No dependencies, easy API and supports major browsers.
var line = new ProgressBar.Line('#container');
line.animate(1);
See more examples of usage in the demo page.

Pure JavaScript is not possible, you need to use Ajax to get the current status which requires Server-Side Scripting (I guess PHP in your case).
Store the total and completed URLs (or their counts) in the database or in a session and use get the percentage of completed URLs from there in PHP, called by a JavaScript Ajax request. Then give the percentage to the jQuery bar as Prutswonder suggested in another answer.
I suggest using JSON or simply Plaintext to receive the Data in JavaScript, XML would be unneccessary overhead (so it's actually AJAJ or AJAP, not Ajax).

I found a pop up Javascript bar. Might need some modifications to fit what you have in mind, but looks promising.
code is
<style>
<!--
.hide { position:absolute; visibility:hidden; }
.show { position:absolute; visibility:visible; }
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
//Progress Bar script- by Todd King (tking#igpp.ucla.edu)
//Modified by JavaScript Kit for NS6, ability to specify duration
//Visit JavaScript Kit (http://javascriptkit.com) for script
var duration=3 // Specify duration of progress bar in seconds
var _progressWidth = 50; // Display width of progress bar.
var _progressBar = "|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||"
var _progressEnd = 5;
var _progressAt = 0;
// Create and display the progress dialog.
// end: The number of steps to completion
function ProgressCreate(end) {
// Initialize state variables
_progressEnd = end;
_progressAt = 0;
// Move layer to center of window to show
if (document.all) { // Internet Explorer
progress.className = 'show';
progress.style.left = (document.body.clientWidth/2) - (progress.offsetWidth/2);
progress.style.top = document.body.scrollTop+(document.body.clientHeight/2) - (progress.offsetHeight/2);
} else if (document.layers) { // Netscape
document.progress.visibility = true;
document.progress.left = (window.innerWidth/2) - 100+"px";
document.progress.top = pageYOffset+(window.innerHeight/2) - 40+"px";
} else if (document.getElementById) { // Netscape 6+
document.getElementById("progress").className = 'show';
document.getElementById("progress").style.left = (window.innerWidth/2)- 100+"px";
document.getElementById("progress").style.top = pageYOffset+(window.innerHeight/2) - 40+"px";
}
ProgressUpdate(); // Initialize bar
}
// Hide the progress layer
function ProgressDestroy() {
// Move off screen to hide
if (document.all) { // Internet Explorer
progress.className = 'hide';
} else if (document.layers) { // Netscape
document.progress.visibility = false;
} else if (document.getElementById) { // Netscape 6+
document.getElementById("progress").className = 'hide';
}
}
// Increment the progress dialog one step
function ProgressStepIt() {
_progressAt++;
if(_progressAt > _progressEnd) _progressAt = _progressAt % _progressEnd;
ProgressUpdate();
}
// Update the progress dialog with the current state
function ProgressUpdate() {
var n = (_progressWidth / _progressEnd) * _progressAt;
if (document.all) { // Internet Explorer
var bar = dialog.bar;
} else if (document.layers) { // Netscape
var bar = document.layers["progress"].document.forms["dialog"].bar;
n = n * 0.55; // characters are larger
} else if (document.getElementById){
var bar=document.getElementById("bar")
}
var temp = _progressBar.substring(0, n);
bar.value = temp;
}
// Demonstrate a use of the progress dialog.
function Demo() {
ProgressCreate(10);
window.setTimeout("Click()", 100);
}
function Click() {
if(_progressAt >= _progressEnd) {
ProgressDestroy();
return;
}
ProgressStepIt();
window.setTimeout("Click()", (duration-1)*1000/10);
}
function CallJS(jsStr) { //v2.0
return eval(jsStr)
}
</script>
<SCRIPT LANGUAGE="JavaScript">
// Create layer for progress dialog
document.write("<span id=\"progress\" class=\"hide\">");
document.write("<FORM name=dialog id=dialog>");
document.write("<TABLE border=2 bgcolor=\"#FFFFCC\">");
document.write("<TR><TD ALIGN=\"center\">");
document.write("Progress<BR>");
document.write("<input type=text name=\"bar\" id=\"bar\" size=\"" + _progressWidth/2 + "\"");
if(document.all||document.getElementById) // Microsoft, NS6
document.write(" bar.style=\"color:navy;\">");
else // Netscape
document.write(">");
document.write("</TD></TR>");
document.write("</TABLE>");
document.write("</FORM>");
document.write("</span>");
ProgressDestroy(); // Hides
</script>
<form name="form1" method="post">
<center>
<input type="button" name="Demo" value="Display progress" onClick="CallJS('Demo()')">
</center>
</form>
Text link example
<p align="center">This free script provided by<br />
<a href="http://www.javascriptkit.com">JavaScript
Kit</a></p>
found here code

You can make the progress bar by increasing the div width at some interval of time.
For example, you may increase the 1px width of div at each 50 milliseconds like,
var width = 1
function render (){
if(width <=100){
// apply width to div for progress bar
div.style.width = width + "px";
setTimeout(
function (){
render();
width++;
},50
);
}
}
render();