Develop Reference

SVG inside an HTML-Object

I have built a website with 2 SVG-files, each one inside an object tag.
Chrome returns 'null' when I try to access the SVG-Root element with .getSVGDocument() and also with .contentDocument (!). In Opera I have the same problem. In Firefox and Safari it works.
I heard that Chrome denies access to external files by default, for security reasons. Hence, the only way to solve the problem is to put the SVG-Code inline HTML !? Or is there another option?
Thanks for your hints!
Kind regards,
Codebastler

Toggle multiple div elements

On my page I'm currently doing something like this: http://jsfiddle.net/FBCSt/6/ I really don't know why, but in Chrome I got some strange issues with that - sometimes the contents of the div elements are not loaded correctly. In IE, Safari and Firefox it work fine, but as I said, in Chrome it is causing some trouble.
That's why I want to know, if there is a more sleek way to do this? (There are three buttons, every one is assigned to one div. Only one div should be visible)
I am thankful for every answer =)
EDIT: Thanks everybody. This is the solution. It works well =)
"a better way: jsfiddle.net/FBCSt/13 – #Mohammed ElSayed 20 mins ago"

Try this: http://jsfiddle.net/FBCSt/10/

In IE, Safari and Firefox it work fine, but as I said, in Chrome it is
causing some trouble.
I really don't see an issues when testing under Google Chrome 19.0.1084. But in any case,
That's why I want to know, if there is a more sleek way to do this?
Yep, there is. Since one of your tags is jQuery, I suggest you take a look at jQuery UI's tabs.

Why don't you use show() instead of toggle()? Maybe the issue is related to using toggle(). And you can combine the elements to be hidden: For example,
$('#page2,#page3').hide();
$('#page1').show();
Or as nicely put by Mohammad,
$('#page1').show().siblings().hide();

I have working solution on this url : pastebin it works in chrome and also in FF.also it will work even if you add 1000 id with page#100 but still it will not have too much code. thanks.

Like Abody97 said: try JQuery UI tabs
If you're looking for a "more sleek" way of doing this, try this fiddle: http://jsfiddle.net/NCbW6/
It doesn't bother with specific ids for each element so you can add as many as you'd like without changing the JS.

jQuery Find() not working in Firefox or IE

I'd like to change the attribute of a Google Calendar select element.
The code I'm trying works in WebKit browsers, but not in FF or IE.
Here's what I have:
$jqry('iframe').contents().find('.calendar-nav').attr('style','display: table; background: blue');
I think it's getting stuck on the find() function. Is my iframe being treated as ajax? Is the issue being caused by mime/content type? Please help with a code example if possible.
Many thanks!

Try this,
Chrome/Firefox:
xml.children[0].childNodes[1].innerHTML
IE8+/Safari:
xml.childNodes[0].childNodes[1].textContent
IE8:
xml.documentElement.childNodes[1].text;

I found a solution that worked for me. It seems Firefox and IE didn't like the vagueness of having only a tag selector: $('iframe'). As soon as I added a class it worked: $('.myiframe'). I'm guessing an ID would work just the same: $('#myiframe'). I was only using the tag selector because I didn't want to modify the plugin I was using, and it was the only iframe on the page -- oh well. Thanks to those who provided input.

In IE, when binding to the 'load' event of an IFRAME, this.contentDocument is undefined

Ok, bear with me folks, the setup on this one is long.
I have a simple page. It loads an iframe. Inside that iframe is a form. I want the form inside the iframe to interact with the parent page via jQuery.
This works correctly in Firefox, Chrome, and Safari. See for yourself here:
http://dl.dropbox.com/u/58785/iframe-example/index.htm
However, in Internet Explorer 6/7/8/9, it does not work. The load event fires, but jQuery cannot get a handle on elements inside the iframe.
I'm using the second 'context' argument of the jQuery function to set the context of the selector, like this: var form = $('#myform'), this.contentDocument)
Here's what is batty. Using the F12 Developer Tools in IE9, I can set a breakpoint in my JavaScript and look at how IE is evaluating the JavaScript. If I hover over this, I can see that it does have a contentDocument property. BUT, if I hover over this.contentDocument, it tells me it's undefined.
Because it's undefined, the jQuery selector returns no elements. Again, this is only in IE. And the IFRAME is on the same domain, so it's not a same-origin issue.
Any pointers?

Not to trample on Roatin's answer, but this issue can also be fixed by specifying a DOCTYPE declaraction. Internet Explorer 8 and over require it for contentDocument. Otherwise, as he said, contentWindow can be used (for earlier versions of IE, too). See the information at W3Schools.

prevent iframe content reload on hide in firefox

In my webapplication I hide an iframe using jquery hide() function.
Surprisingly firefox reload the content of iframe when the iframe is hidden.
Is this a known problem? Is there a workaround?
I also tried to hide the iframe setting css style display to 'none'. Same result.
The script work as expected in opera.
I'm using firefox 3.5.1

Some say the solution might be in providing a different
id or name attribute for each IFRAME =
but it did not work in my Case (FF 3.6+)
Another possible solution is to make sure the iframe's content
is not taken from the browsers cache.
this can be done by concatenating a randomizing string to the the iframe's source URL, making sure the content will never come from the cache.
all in all, its a bug that should be fixed by the Mozilla team!..

Don't know about that bug, but one possible solution is to set height and width to 0px instead, maybe?