I have a banner on my website that by default is not shown. The code I am using to get it to show is
document.getElementById("cookie1").style = "display:block;"
This works in Chrome but is not working in safari. I am not getting any errors in Safari either, It just doesn't show the banner.
Any ideas on what could be causing this? Or a better way to hide/show a page element?
Thanks!
From testing this in Chrome and Safari, it seems Chrome is more forgiving in that it parses the style string and puts the right style in place for you, but Safari does not.
Try:
document.getElementById("cookie1").style.display = 'block';
It's probably best to be explicit like that anyway, instead of relying on string parsing for the style itself.
Related
I have a chrome extension which allows to write on screen in chrome tabs. The default behaviour looks like :
It works be simply inserting a canvas tag in the DOM and doing all the stuff in it. It works well in all sites. However, chrome PDF viewer behaves strangely when I use it :
Before -
After -
I don't think there is any issue with the extension because it works on all other sites. I think there is an issue with chrome PDF viewer itself.
I can attach the code here if asked in comments.
Ok, so I tried to replace all innerHTML += <value>; by insertAdjacentHTML("afterbegin",<value>); And now it's working fine.
It's because your canvas must be on top to ensure it will works on every website.
The z-index propery is not enough for that.
Hope that helped !
Inserting an animated SVG via jquery (or plain javascript) makes them appear static in Chrome and Edge, although they show up fine in Firefox:
$(".loader").prepend("<svg><use xlink:href='/images/icons.svg#loading-ring'></use></svg>");
Inserting from a separate file and using an object or img tag seems to work fine in Firefox and Chrome, but still not Edge:
$(".loader").prepend("<object data='/images/loading-ring.svg' type='image/svg+xml'></object>");
Also see:
jsfiddle
Am I going about this the wrong way or is browser compatibility just really spotty?
Yes, you are right, unfortunately edge and old ie doesn't support the svg animations with SMIL.
Check here: http://caniuse.com/#search=svg%20animation
I am developing a website with has a header as (channels,...) and the header is working fine in all the browser except safari. The code is work fine on chrome as well still i facing the issue on safari browser. Is there anything which i missed in the code specified in the link. I also tried with the code to fetch browser and write a separate code for it but it also not works for me. Should anybody help me how to fix it. What i have already tried is : http://www.code-dynamix.com/blazemedia/services-channels.html
Problem exist at the Second header (Channels,...) where slider comes little bit down in safari.For better clarification just see the same header in any other browsers such as firefox, chrome and then see the header in safari.
Thanks in advance.
The JavaScript works fine for me in Safari 5.1.7 on Windows 7, but there are differences with how the header is rendered. This is an issue with CSS however. As best I can tell, there are no defined heights on any of the containing elements. You should define the heights when you can, this will help keep a universal look and feel.
My problem only happens on Safari. IE, FF, Chrome and Opera all work flawlessly. I am adding an object to the DOM (exactly the same way YouTube does it, depending on ActiveX or NPAPI) so after I determine the write object type I add it to the DOM via :
document.write(MyObject)
At the head section of the page, so that js functions called from body can access it. It works on everything except Safari. The only way I can let Safari work is by adding an alert after document.write! I even tried setTimeout, but it works one time and fails 10.
Have you considered using document.body.appendChild(MyObject)?
Document.write doesn't work correctly in the body itself, and document.body.appendChild to add an object tag doesn't work.
So what I did was
var objectContainer = createElement("div");
objectContainer.innerHTML = "<object blah blah> <\/object>"; //<--notice the escaping of /
document.body.appendChild(objectContainer);
And now it works everywhere.
I have an iframe on my index.html and this iframe is dynamic.
on my index.html I have a form, which when submitted, shows the results inside the iframe.
The problem is the Iframes height also has to be dynamic for the website to look "clean".
So in the Iframes php page, I have this code:
<body onload="parent.resize_iframe(document.body.scrollHeight)">
And in the index.html (which is the parent in this case) I have this function:
function resize_iframe(new_height){
byId('iframe001').style.height=parseInt(new_height) + 20 + 'px';
}
The problem here is not the function, but that Safari and Chrome thinks the scrollHeight is something alot bigger than it is.
I have tried alerting the scrollHeight, and the nr is always around 2000px in Chrome and Safari, but in other browsers it is dynamic as it should be (500, 300, 800 etc)...
Any ideas?
UPDATE:
I noticed when I click a link on the index, and then click the browser back button, the iframe DOES resize correctly in SAFARI and CHROME.
But I must click back in the browser for it to work...
SEE THIS QUESTION FOR FURTHER INFORMATION: Can't figure out why Chrome/Safari can't get the ScrollHeight right here
I am not sure but however I want to say what I want say. Safari and Chrome both webkit based browsers so its normal to behaviour like that. So I guess that they calculating the height adding padding and margin to normal height. please google it "webkit calculated style"
Sometimes javascript does not work as expected when the page has validation errors.
First try validating your markup (HTML).
If validating does not work, try using jQuery.
jQuery is cross-browser compatible; you should get the exact same result on every browser.