We Keep Coding

IE won't toggle element

I have this JavaScript on my page to toggle a div and switching between two images
<script type="text/javascript">
function toggleArchiv() {
document.getElementById('cat').toggle();
var image = document.getElementById('arrow');
if (image.src == 'bullet_arrow_down.png')
{
image.src = 'bullet_arrow_up.png';
}
else
{
image.src = 'bullet_arrow_down.png';
}
}
</script>
Works fine on modern browsers, but IE keeps saying there is an error at that line
document.getElementById('cat').toggle();
So it doesn't toggle the div and neither switches the image. What to do?

It looks to me like you're using the PrototypeJS library. The library will add methods to DOM elements, in this particular case it's adding HTMLElement.prototype.toggle. DOM prototyping is only supported in IE8 and later and it must be rendering in standards mode. In order to get it working in all browsers, use the $() method instead of getElementById():
$('cat').toggle();
http://api.prototypejs.org/dom/element/toggle/

I think the problem is calling toggle() on a HTMLElement not a jQuery object. You should use the jQuery selector instead of getElementById() like this:
$('#cat').toggle();

$(window).load(function()-how it works with FF

I have a jquery code.
$(window).load(function() {
document.title = $("#myid").text(); //not working in FF
});
Here I have used $(window).load(function() because in the #myid I am getting value through another javascript, if I use ready(), its giving me error. so I am first loading the window then start reading value.
Now in IE, after the window loads itself , I am getting the value of document.title,
but for FF its coming as blank.undefined.
Why? any idea or alternate sln.

It might be a rendering/timing issue.
How are you setting the #myid text? Im assuming you are running this code on page load?
Personaly on another note, i like to use the shorthand version of jQuery DOM ready, this might also fix your problem too.
jQuery(function(){
document.title = jQuery("#myid").text();
});
And i would make sure that you call it at the end of the body or ideally in the head tag.

I think it is possible that firefox triggers ready and load at the same time when it loads quickly (localhost, small experiment page with one div, etc.)
Why not put the title setting in the ready function right after getting it? If You put it in a div, You can put it in the title too.

I didn't check this code and it isn't a good way, but maybe it help you...
If your code isn't working in Firefox only, you can check browser by Javascript and execute my code for Firefox only.
<script type="text/javascript">
var timerId = 0;
function checkElement() {
// If don't work: try .html() or $("#myid").text() != undefined or smth like this
if($("#myid").text()) {
document.title = $("#myid").text();
clearInterval(timerId);
}
}
$(document).ready(function() {
timerId = setInterval('checkElement()', 500);
});
</script>

Hide an html element using javascript only if browser is firefox

How can I hide a div with javascript if the browser is firefox only?

To check Firefox browser
//Javascript
var FIREFOX = /Firefox/i.test(navigator.userAgent);
if (FIREFOX) {
document.getElementById("divId").style.display="none";
}
<!-- HTML-->
<div id="divId" />

Just check a FF-specific JavaScript property. E.g.
var FF = (document.getBoxObjectFor != null || window.mozInnerScreenX != null);
if (FF) {
document.getElementById("divId").style.display = 'none';
}
This is called feature detection which is preferred above useragent detection. Even the jQuery $.browser API (of which you'd have used if ($.browser.mozilla) for) recommends to avoid useragent detection.

“Is the browser Firefox” is almost always the wrong question. Sure, you can start grovelling through the User-Agent string, but it's so often misleading that it's not worth touching except as a very very last resort.
It's also a woolly question, as there are many browsers that are not Firefox, but are based around the same code so are effectively the same. Is SeaMonkey Firefox? Is Flock Firefox? Is Fennec Firefox? Is Iceweasel Firefox? Is Firebird (or Phoenix!) Firefox? Is Minefield Firefox?
The better route is to determine exactly why you want to treat Firefox differently, and feature-sniff for that one thing. For example, if you want to circumvent a bug in Gecko, you could try to trigger that bug and detect the wrong response from script.
If that's not possible for some reason, a general way to sniff for the Gecko renderer would be to check for the existence of a Mozilla-only property. For example:
if ('MozBinding' in document.body.style) {
document.getElementById('hellononfirefoxers').style.display= 'none';
}
edit: if you need to do the test in <head>, before the body or target div are in the document, you could do something like:
<style type="text/css">
html.firefox #somediv { display: none }
</style>
<script type="text/javascript">
if ('MozBinding' in document.documentElement.style) {
document.documentElement.className= 'firefox';
}
</script>

if(document.body.style.MozTransform!=undefined) //firefox only

function detectBrowser(){
....
}
hDiv = .... //getElementById or etc..
if (detectBrowser() === "firefox"){
hDiv.style.display = "none"
}

You might try Rafeal Lima's CSS Browser Selector script. It adds a few classes to the HTML element for OS, browser, js support, etc. You can then use these classes as hooks for further CSS and/or JS. You might write a CSS (or jQuery) selector like html.gecko div.hide-firefox once the script has run.

How do I programatically scroll down the page?

When the page loads, I want to use Javascript/Jquery to automatically take the user to the 500px downwards. But it has to seem natural.
How can that be done?

Just Javascript: window.scrollBy(0,500);

You can use the jquery scrollto plugin. It's very easy.
http://plugins.jquery.com/scrollTo/

Is there a lighter version? Just using javascript?
You could consider calling window.location.hash during onload. Have an element with an ID at about 500px down and just do
window.onload = function() {
window.location.hash = '#foo';
}
Oh, the # is mandatory for IE compatibility ;)

use the jquery one Jourkey suggested. Cross platform easy to use etc. There is pure JavaScript one you can try, though YMMV on browsers other than IE
"scrollTo Method
Scrolls the window to the specified x- and y-offset. "
http://msdn.microsoft.com/en-us/library/ms536731(VS.85).aspx

$().scrollTop(500);

What about navigating to some predefined link inside the page. Foe example see URL pointing to the location inside the page http://en.wikipedia.org/wiki/Uniform_Resource_Locator#cite_note-0

Click event not worked in Firefox

I am using a jquery click function:
Button code
<input type="button" id="myButtton">
Jquery code
$(document).ready(function () {
$("#myButtton").click(function () {
alert("Mybutton");
});
});
This code works in Internet Explorer but does not work in Firefox.
What am I doing wrong?

In the code:
$(document).ready(function(){
$("#myButtton").click(function(){
alert("Mybutton");
});
I believe it's missing another closing brace:
$(document).ready(function(){
$("#myButtton").click(function(){
alert("Mybutton");
});
});

My best guess is that you have other input with the same ID? Try using classes instead, or use jQuery's CSS selector like $('input[type=button]') instead.
I'd also recommend installing FireBug plugin for FireFox if you haven't done so already (http://www.getfirebug.com/). It'll help you debug JavaScript issues like this, and a whole lot more.

Are you sure that element has an id attribute? Or does it have only a name attribute with a value of "myButton". In order to work cross browser the id attribute is mandatory, whereas name is optional (only IE and Opera AFAIK).
N.B.: My answer may seem idiot, but it was not the original poster that added the code example in the question (view edit history).