Mozilla Firefox margin spaces - javascript

When I try to use a statement like document.write() with object tag parameters in Javascript part of a webpage, Mozilla Firefox seems to put extra marginal spaces on the edges of the page while other browsers behave normally. What is the reason of this difference? How can I get rid of these marginal spaces?
Note: (I'm trying to load an applet in a web application.)

I think the real answer here is "don't use document.write" :-) See this related SO post for why:
Why is document.write considered a "bad practice"?
So what should you do if not document.write? Well, ideally JQuery (it's all but a requirement for writing JS nowadays IMHO). With jQUery your problem is as simple as:
$(document.body).append(
"<object><embed type = 'application/x-java-applet;version=1.5' \ CODE = ...");
If you don't want to use jQuery (not-so-subliminal message: use jQuery!) you can also use either innerHTML (as Kiva suggested), or document.createElement + document.body.appendChild to add the element to the page.
I suspect if you use any of these techniques, instead of document.write, you'll see similar behavior to just having the element there in the HTML in the first place.

What is your code ?
Maybe Firefox add a default margin for applet application, try to look at this with firebug.

Maybe the problem in the CSS. May be about to fix this situation:
html, body{margin: 0; padding: 0;}

Related

How to properly assign style.backgroundClip = "text"?

I am having trouble with one line of code. I have been searching the web for hours now and had to resort to stack overflow. When I run this code, it does nothing. Here is the code:
e.style.backgroundClip = "text";
When I researched this, I found that the "text" is not officially existing, however if I use this in the css with background-clip it works. If you have any idea why this is not working, please help. I am using a device running iOS 8 if that helps.
I AM USING A PROGRAM CALLED "EXPRESSO HTML"
Setting text as the value for background-clip property is not a recognised value in the specification:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip#Values
You could force the element to take the inline styling like so:
el.setAttribute("style", "-webkit-background-clip:text");
Notice it also takes the -webkit- vendor prefix. I think only Chrome supports it, I may be wrong.
Fiddle: http://jsfiddle.net/crwk2mac/
Since this variation of background-clip is not well supported, it would not be advisable to use it without decent and well tested fallbacks. This would be best done in CSS and could give you a real headache trying to implement entirely in javascript.

Create a <noscript> element with content fails on IE7 and IE8 (jQuery)

I've seen several threads about reading contents, but nothing on writing to noscript.
$('body').append('<noscript><div></div></noscript>');
In Chrome and IE9 I get a noscript-element with a empty div inside like I expect, but in IE7 and IE8 I just get a empty noscript-element without the div inside.
Example: http://jsfiddle.net/cEMNS/
Is there a way to add HTML inside the noscript-tag that works in all browsers? What I need is to add some tracking code into a noscript-element at the end of the page, but the info I need isn't available until after document ready.
Edit: I'm getting a lot of comments on "why". It's some poorly done tracking library that requires this. We don't have access to the code to change it. Regardless, I find it interesting that it works in some browsers and not in others since jQuery was supposed to work equally in all browsers. Is it simply a bug?
Edit2: (2 years later) Adding a noscript on the browser doesn't make sense, I know. My only excuse not the question the task I had was because of lack of sleep, like everyone else in the project. But my rationale was that jQuery should behave the same on all browsers and someone might want to do this on the server.
Regardless of the tracking code, what you are doing (or are required to do) makes no sense!
Why? There are two cases possible here:
user has JavaScript enabled in which case the NOSCRIPT get's inserted into the DOM but is ignored by the browser (does nothing)
user does not have JavaScript enabled, NOSCRIPT does not get inserted and does not "execute"
The end result of both cases is that nothing actually happens.
Just an idea: You could try giving your noscript tag an ID, and then try to use native js.
for example:
$('body').append('<noscript id="myTestNoScript"></noscript>');
document.getElementById('myTestNoScript').innerHTML = '<div></div>';
I would claim that if it does not work with native js, it will not work with any library (feel free to correct me on this one).
I tried following simple HTML code:
<html>
<body>
<noscript>I'm a noscript tag.</noscript>
</body>
</html>
Then I did analyse this with IE8 (in IE7 mode) and his integrated code insprector. Apparently the IE7 checks are script allowed. If so he declared it as empty. And empty tags will be ignored. Unfortunatly I could not try that with disabled script option, because only the Systemadministrator can change the settings (here at my work).
What I can assure you, the noscript does exists. If you add
alert($('noscript').size());
after the creation, the result will be 1.

AppendChild issue with Internet Explorer Javascript

The following piece of code, works correctly in Firefox and Chrome, but it gives me a headache in IE.
var anotherDiv= document.getElementById("anotherDiv");
var destination = document.getElementById("mySourceDiv");
destination.appendChild(anotherDiv);
I'm trying to get a Div element and place it inside another div.
I get an error message (in the debug console in IE) similar to "interface not supported", and points me to the appendChild line.
What I've seen is that the type of the destination variable is an object rather then a DOM element.
What can I do to append the anotherDiv to mySourceDiv?
I'm trying this in IE 8.
You probably will need something like an importNode, there are various cross browser solutions around. The issue is that each node has a corresponding document object on it, in IE and so called security doesn't play nice moving things from one document to another.
So, essentially it's doing a deep clone, but the difference between using cloneNode is that cloneNode also sets the document which you don't want.
This might get you going in the right direction:
IE support for DOM importNode
I'd recommend using a library designed to sort through the browser incompatibilities for you. I've personally found jQuery to be quite good. jQuery has an append function.

Most efficient way to use selectors in jQuery?

is it more efficient to use $('.active') or $('div.active') ? I have always avoided including "div" because it's extra text in the javascript file I don't want the user to have to download.
Older versions of IE will benefit from the inclusion of div because they don't support getElementsByClassName().
Because of that, every element on the page needs to be selected with:
document.getElementsByTagName('*');
...and manually tested to see if it has the active class.
If you include div, then it is able to narrow it down a bit, since it can do:
document.getElementsByTagName('div');
...then test only those elements.
When I say older versions, I mean IE6 and IE7 since IE8+ supports querySelectorAll.
EDIT:
Browser suppport:
getElementsByClassName: http://www.quirksmode.org/dom/w3c_core.html#t11
querySelectorAll: http://www.quirksmode.org/dom/w3c_core.html#t13
It depends. If you mean performance.
I prepared special test for everyone on JSPerf: jquery class selector test.
On my browser and computer (FF 3.6.13 and Core 2 Duo 1.6) div.active is a bit slower. But found it variable - it seems GC has something doing here.
And after few more tests it seems that div.active:
Speed is variable on FF, sometimes GC turns on 'div.active' test, but generally difference is very small.
Unnoticable difference on Chrome and Safari
Faster on IE9
I like to include the tag name if it helps self-document the code. If I can use
$("nav.primary")
instead of
// this is the primary nav
$(".primary")
I tend to do it.
I guess the best way to get some speed on large pages is to use find instead.
$( your-container ).find("div.active")
Since you always? know where you should look, you can create your own scope. So that the browser only need to search within that area of code.
By the way, you don't need to care about size of the css, EVER :)
Use css minifing tools to minimize the css when the site is in production mode. You can also set your web server to automatically gzip your css files before sending the to the user. And if you don't change your css filename on every pageload, the browser cache up to whole css file.
CSS selectors in jQuery used to be optimized similar to how you would do it for browsers, see: http://css-tricks.com/efficiently-rendering-css/
Specifying a generic tag anywhere, even with an ID or class would be dramatically slower than just specifying the ID or class alone. See:
http://www.no-margin-for-errors.com/demos/how-to-optimize-jquery-selectors/
The above uses jQuery 1.3. Since jQuery 1.4 and the introduction of the Sizzling selector engine, this is less important from what I understand. See:
http://hungred.com/useful-information/jquery-optimization-tips-and-tricks/
For myself, I decided in CSS to use whatever reads the easiest, and I am more specific there since that is only parsed once. In jQuery, however, I have been more careful since those selectors could run thousands of times over the life of a page.

Reliably detecting <img> tag support for SVG

I'm currently doing some redesign of a website, basically just upgrading it to a more up-to-date look and trying to make it as resolution independent as possible, and in the name of resolution independence I figured I'd try to use SVG images in the design where the browser supports SVG images in <img> tags. The reason I want to stick to just using SVG in <img> tags rather than using some more ambitious solution is that AFAIK Chrome, Opera and Safari all support it and FF4 seems like it may finally get it as well combined with the fact that the entire site is built on a custom CMS which would have to be partially rewritten to start changing the output HTML (currently it supports custom design images, custom CSS and custom JS includes for each theme).
Now, I've looked around the net a bit myself trying to figure out the best way of doing this and for some reason pretty much every suggested solution I've found has worked poorly (one detect FF3.x as supporting SVG in <img> tags so they didn't display properly there, another one never tried at all, several were overly complex "replace all images with SVG if there is support for it" functions which won't work too well either.
What I'm looking for is really a small snippet that can be called like this (btw, I'm using JQuery with this new theme for the website):
if(SVGSupported()) {
$('#header img#logo').attr('src','themes/newTheme/logo.svg');
/* More specified image replacements for CSS and HTML here */
}
Does anyone actually have a working solution for this that doesn't give inaccurate output? If so I'd be very grateful.
This appears to be the ultimate answer: Javascript: How can I delay returning a value for img.complete. Unless someone comes up with something yielding the correct results immediately.
For old browsers you could use the <object> or <iframe> tag, but that is not a nice solution. Firefox and IE9 (don't know about other browsers) have implemented inline svg now, which can easily be detected:
// From the Modernizr source
var inlineSVG = (function() {
var div = document.createElement('div');
div.innerHTML = '<svg/>';
return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
})();
if( inlineSVG ){
alert( 'inline SVG supported');
}
So, you could replace all images by svg tags then. And I hope, but I have to google on that, that every browser that supports inline svg will support svg as image source.
A good discussion/comparison of methods is here:
http://www.voormedia.nl/blog/2012/10/displaying-and-detecting-support-for-svg-images
Based on that page, I wound up using this:
svgsupport = document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")
I've been meaning to write a blog post about this, but here's a snippet that should work:
function SVGSupported() {
var testImg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';
var img = document.createElement('img')
img.setAttribute('src',testImg);
return img.complete;
}
Based on a script by Alexis "Fyrd" Deveria, posted on his Opera blog.
I'm using something similar on my blog, which you can see in action here: http://blog.echo-flow.com/2010/10/16/masters-thesis-update-1/
It will use <img> if supported; if not, and we're not on IE, it will use the a regular object tag; otherwise, it will use an object tag specially created for svg-web. fakesmil is used for the gradient animation. It seems to work everywhere I've tested it. The script that does the work for this example can be found here: http://blog.echo-flow.com/media/js/svgreplace.js

Categories

Resources