This code works fine in Chrome, Firefox but not in IE - javascript

I'm trying to make a jquery tooltip that appears when a user mouses over a link. In my case the link is using display:block style so that it covers a large area. It works perfectly in Chrome and Firefox but in Internet Explorer it doesn't work at all. The tooltip doesn't show, the browsers own tooltip shows etc... IE!!!!
http://pastebin.com/1kBaMujV
Any ideas? Got to love internet explorer...

Ok well i took your advice and went for a pre existing one using jQueryTools from flowplayer. This is the result:
http://pastebin.com/gxSQx64B
Works great in chrome, firefox and internet explorer. I guess it is best to use one that is mature. The only thing that still annoys me is in firefox if you click on the link then click the browser back button, the tooltip is statically displayed over the link area until you move the mouse back over the link area. This doesn't happen with the other browsers.

Which version of IE you are using? In IE 8 it is fine.

Related

"background-clip:text" has weird behaviour

I am using a page that is using the css of -webkit-background-clip:text with a polyfill to get it working in browsers that don't support this.
Obviously, some browsers use Webkit (Chrome, Opera & Safari) and some don't (Firefox, IE), and I want the page to display the same (give or take the background clip) however this isn't happening on Firefox. The polyfill I'm using works but translates the text very weirdly in Firefox. Strangely enough, IE works (though the polyfill doesn't).
This is Firefox:
This is a Webkit browser:
And finally this is IE:
The polyfill I'm using is https://github.com/TimPietrusky/background-clip-text-polyfill
I've tried contacting the guy who made it but can't get any reply out of him.
Basically, I have no idea why Firefox is translating the text at all. I want it to either act as Internet Explorer and just display the text as white, or correctly display it.
How would I go about doing that?
If you need a page to work off, there is too much for a jsfiddle, but a link to the page can be found here.
Your polyfill creates a SVG for Firefox, but doesn't seem to do a very good job at it. Removing
overflow: hidden from the SVG element (set in svg.css) will let all the generated SVG show.

how do i get a tooltip such as cluetip, to work in Internet Explorer?

My cluetip works great in Chrome, but whenever I bring the same exact code to IE it doesn't even show up or it shows the default tooltip. Any suggestions? Is there some code I can put in my cluetip to make it work in IE? Any help would be appreciated.
Is there some code needed to make cluetip or other customer tooltips work in IE??
Try my tooltip plugin for jQuery. It is optimized for the use with mobile phones and works with IE lt 7: https://github.com/yckart/jquery.tooltip.js
That is not an answer but an alternative to cluetip.

error in Chrome when displaying inline-block li elements

I'm pretty new to web-coding and in my attempt to create jQuery based menu bars complete with dropdowns I have stumbled upon some vast differences between broswers. Below you can see that while FF and Safari are the same, IE is actually behaving and Opera is ok-ish, Chrome gets it totally wrong. As far as I can tell I have all the latest versions.
I removed the code from here and pasted it in: (doesn't want to let me link properly) so: jsfiddle.net/2hCR2/
Just in case, support for older versions of IE (6-7) is not required.
Right now I'm mostly concerned with the positioning aspect. Any assistance is much appreciated!
****EDIT:** After continuing to play with the chrome developer tools I realized that when I manually set the 1st list (pants/t-shirt) to display:block it displays as expected (exactly like FF and Safari in the image) so it appears that this is more of a javascript/jQuery issue not updating the DOM correctly(?). I also noticed that when I put the code is JSFiddle and ran the script in Chrome it produced the same error, but when I ran JSFiddle in FF (exact same fiddle link) it renders correctly.
It does not happen in Chrome Canary (version 24) but it does in stable (version 22). Apparently it is a bug which has been fixed.
You can either wait a month or two so that all Chrome users get the fix, or just use .show() instead of .show(0).

How does IE work with contentless anchor tags?

I am trying to do a hover over effect on an image on a site that I am working on. I am having two problems with this. The first is browser specific and is my main worry.
Anchor tag problem:
When I view the site on Chrome, Safari and Firefox the tooltip (Jquery tools) works as expected. When viewed IE, the hover over is really strange. It seems as though the hover only is recognized when your mouse is over the outermost row of pixels (the border) on the anchor tag. The result is not being able to view the tool tip while in Internet Explorer. I have tried doing this in ways other than with Jquery tools, but even with the HTML event "onmouseover", the same effect happens.
I tried a few things while experimenting with this, and it seems that if I put something inside the anchor tag like some text, the text expands the hoverable area. This is interesting because this only happens in internet explorer.
For my environment, I am running on a 27" monitor with the latest Chrome, Firefox, Safari, and Internet Explorer 8 to test for compatibility.
Second z-index problem:
The second problem I am having is with the tooltip. It seems as though the tooltip, although styled with the highest z-index, goes behind an image of a school that I have infront of it. I figured that one of you might have a clue on what is going on with that, because I am stumped.
View the site
I put the site up and minimized it on jsfiddle.com. Here is the link to the project that I posted.
http://jsfiddle.net/keirp/B9Cgc/
Give your <a> some dimensions and/or display block or inline block. IE has trouble getting position for <a> when they are inline with nothing in them

jCarousel not showing next button correctly in Safari

Im having a little problem with jCarousel ( http://sorgalla.com/projects/jcarousel/ ).
Everything works fine in Firefox and IE, however in Safari the carousel displays but the next button is inactive when there are actually more elements. Firefox and IE show the next button as active.
Is there a common fix for this or a known bug in jCarosuel?
Thanks!
Oops, found the solution.
http://groups.google.com/group/jquery-en/browse_thread/thread/8f30314e21bbaa6f
Nice to know the author doesn't upkeep the code.

Categories