I'm having some cross-browser compatibility problems.
Instead of put all the code here, I link you the page:
http://www.smaskerando.org/spettacoli/disney.html
In the bottom left part of the page, you can see a small gallery. When you click on the small thumbnails, a larger version of the photo appear in the middle of the screen. It works perfectly on Chrome, but it has problems on Firefox and Internet Explorer.
I think the problem is in these lines:
$(".galleryPopUp").load(function(){
var width = $(this).width()
var height = $(this).height()
if (width < height)
{$(this).css("width","25%")}
else
{$(this).css("width", "50%")}
})
They seem to not recognize the .load() method.
You can get the full code from the page looking for the file "script.js" and going to line 379 (the full gallery function).
Have you got any idea how to solve it?
Thank you all!
You should put your own script under jQuery call, cause you're using jQuery and may don't be avaible when you call it.
It's not maybe the cause, but is an goo practice.
I tried on Chrome and it llooks like works OK.
Ok, I found the solution! And I hope it could help.
The problem wasn't about the .load() . It was about the div I was trying to append. Actually is a really small difference I didn't notice till now:
Firefox and Internet Explorer automatically quoted the value of the attribute src of the image I was inserting. Chrome doesn't do it. So to be more clear:
This was what happened on chrome:
... <img src="img/example.jpg" />
And this was happening on firefox/IE:
... <img src=""img/example.jpg"" />
So obviously firefox didn't recognize the image. I solve this problem using jQuery migrate and adding this line if ( $.browser.mozilla ) and I removed the "" from the string when using firefox.
Thank you anyway for the quick answers!
Related
I'm working on a project for my school where the courses, teachers and clasroomnumbers are appearing for the signage TV's.
The start of the project was made by the company who make's our software. The only thing I can do now is change some things with javascript. These changes are working fine in Chrome and Firefox. However I need it to work in Internet Explorer.
You could go to this link to see what happens:
https://www.miras.be/lokaal_bezetting_lijst/57/2019-09-26/08:00/22:00/
When you open in Chome or Firefox it works perfectly
When you open in IE, you see that the hours are not well displayed.
--> Strange manual solutions: When I refresh the page or do something that resizes the window, it does work.
Bad view:
Good view:
Does anyone know a javascript/jquery solution for this?
Thanks in advance!
Laurent
If you want the table column width always fixed you can use
MIN-WIDTH and MAX_WIDTH on the same column. If you will you the both property with width than table column will always same.
After a long search I've found the solution. As I've mentioned, it becomes ok when I resize the window. With this event at the end of my script everything was fixed. Thanks for the answers and help!
$(window).trigger('resize')
I'm developing a website for a client, and although all jQuery/Javascript code works fine in Chrome (e.g. floating navbar, and smooth scroll when you click a navbar item), none of it seems to work in Safari?
I've looked at other questions on StackOverflow, and the only advice I've found is to use a HTML validator, because Safari can be iffy like that.
Although I'm in the process of doing that now, I have a feeling it's something deeper, because most of the HTML issues revolve around obsolete center tags.
At the moment, the site is up at: http://www.grahamcafe.net23.net/Padre/index.html
If I breakpoint at http://stats.hosting24.com/count.php I do not get the error. It document.writes a new jQuery
Try this in script.js
var myWrite = document.write;
document.write = function(str) {
;// ignore document.write
}
to stop your hoster from wrecking your page with their horrible script. You get what you pay for I believe.
It assumes Safari allows replacing document.write with an anonymous function
I am having an issue with Internet Explorer 10 not properly registering the location of the mouse on the <canvas> element if it is not up against the top of the page. Open up IE10 and look at the links below.
The problem:
Click on this link and try dragging the nodes of the graph around:
http://ffi-server.no-ip.biz:257/test/good.html
Now, try the same thing on this page: http://ffi-server.no-ip.biz:257/test/bad.html
Interestingly, IE9 does not have this issue, and adding a <meta> tag to tell IE10 to render the page as IE9 does not solve this issue.
Possible solution?
I think I have found the problematic line of code, I just can't figure out how to correct it. Look at line 3044 in: http://pastebin.com/82GJBiEB
I just don't know how to correct it. I believe that IE10 is reporting a different e.pageY value than browsers which are working correctly. You can verify that by clicking on different areas of the canvas on this page: http://ffi-server.no-ip.biz:257/test/alert.html and see the reported values in IE10 and, say. Chrome.
Could anyone suggest a way to correct this issue?
Thank you for your time!
Try e.layerX, and e.layerY. I had a similar issue, and this fixed it.
So, I stole the script off the internet. Basically, it's supposed to resize an iframe to fit its content.
function sizeIFrame()
{
var helpFrame = jQuery("#elastic");
var innerDoc = (helpFrame.get(0).contentDocument) ? helpFrame.get(0).contentDocument : helpFrame.get(0).contentWindow.document;
helpFrame.height(innerDoc.body.scrollHeight + 35);
}
It doesn't seem to work in Internet Explorer, though! The iframe source is on the same server, so that shouldn't be the problem. Any idea what's wrong? The iframe ID is #elastic. I've tested this in Firefox, Chrome, and Safari, and it works in all three of them just like it's supposed to.
EDIT
I decided to just replace the script with another, more hefty jQuery solution. While it's not as lightweight as I was hoping, it appears to work.
See: http://sonspring.com/journal/jquery-iframe-sizing
I managed to get it working by simply replacing my solution with this larger jQuery solution. Though bigger, it works like a charm!
http://sonspring.com/journal/jquery-iframe-sizing
We have an automatic slider on this website, http://www.realcapfinancial.com and it has been working on all browsers. IE9 doesnt seem to work. It comes up with and error, no object line 298... character 2 etc. I forget what it says but I can't check it again since I'm at work using a mac.
Any help is perfect, thank you
The element with id calcclick is only added after the Resources tab is click. However, this element is already adressed (on line 298) on page load.