Solved

IE and z-index problems

Posted on 2010-09-10
16
382 Views
Last Modified: 2012-06-21
Hi experts,

With IE 7 or below (I think it's OK with IE8) please see

http://www.fobgfc.org/upcoming_new.php   and run your cursor over a fixture.  The tooltip should be solid / opaque.

After doing some research I added a function to my jquery file upcoming_z.js. to add z-index to all divs. This is the first time I have used jquery so I'm not sure whether that's working or how to improve it.

If I haven't given enough info, please tell me what you need and I'll provide!

Thanks for looking.

Col

 
$(document).ready(function() {
	
	
	function() {
       var zIndexNumber = 1000;
       // Put your target element(s) in the selector below!
       $("div").each(function() {
               $(this).css('zIndex', zIndexNumber);
               zIndexNumber -= 10;
        }
	)};
	   
	   
	   
	$('.toolTip').hover(
		function() {
		this.tip = this.title;
		$(this).append(
			'<div class="toolTipWrapper">'
				+'<div class="toolTipMid">'
					+this.tip
				+'</div>'
			+'</div>'
		);
		this.title = "";
		this.width = $(this).width();
		$(this).find('.toolTipWrapper').css({left:this.width-22})
		$('.toolTipWrapper').fadeIn(300);
	},
	function() {
		$('.toolTipWrapper').fadeOut(100);
		$(this).children().remove();
			this.title = this.tip;
		}
	);

});

Open in new window

main2.css
0
Comment
Question by:colinspurs
  • 9
  • 4
  • 3
16 Comments
 
LVL 13

Assisted Solution

by:darren-w-
darren-w- earned 200 total points
ID: 33644927
Hi,

I've had a look at it in FireFox, and it just shows the html, could I suggest you try using the JQuery Dialog, http://jqueryui.com/demos/dialog/ and style it to your needs, it is compliant with all browsers.

here is some example code I use:


$('.fillme').each(function() {
         var $link=$(this);       
         var $dialog = $("div."+this.id)         
         .dialog({
            autoOpen: false,
            resizable: false,
            width:180,
            minHeight:20
         });

		$link.mouseover(function() {
                  $dialog.dialog("open");
               }).mousemove(function(event) {
                  $dialog.dialog("option","position", {
                     my: "left",
                     at: "right",
                     of: event,
                     offset: "20 20"
                  });
               }).mouseout(function() {
                  $dialog.dialog("close");
               });
            });


<div id="10064588">text</div>
<div class='10064588'>Fill text</div>

Open in new window

0
 
LVL 3

Author Comment

by:colinspurs
ID: 33645015
Oh for crying out loud!!!

darren, thanks for pointing that out.  I am losing track of all the versions I have of the PHP files, js files, FF, IE7, IE8, live server, dev server, compatibility view on/off....etc etc etc!!!!  No two seem to be the same!

I'll look at the jQuery dialog but I really don't want to start over if it can be avoided.

Cheers

0
 
LVL 3

Author Comment

by:colinspurs
ID: 33645063
OK, I commented out the jquery function I added.  Obviously there is an error in there somewhere.
0
 
LVL 13

Expert Comment

by:darren-w-
ID: 33645208
Ok,

To get you started; and give you some pointers.

Initially you will need to download the ui code from here:

http://jqueryui.com/download

 I would just select all, you can fine tune it you needs to later,

Unzip the downloaded files to your file system, and then attach the css and the js like this:

<link rel="stylesheet" href="jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />

you can style your dialogue here http://jqueryui.com/themeroller/ using the theme roller (this changes the css)

use the code example and adjust to your needs

If you want to take off the title bar on the top of the box, use this line of jquery:

$(".ui-dialog-titlebar").hide();


Darren

0
 
LVL 3

Author Comment

by:colinspurs
ID: 33645340
Thanks; as I said I will look at this but I was hoping for a quick CSS or jquery fix.
0
 
LVL 6

Expert Comment

by:mickey159
ID: 33645487
Try
$('.toolTipWrapper').css({ 'opacity' : 1});
0
 
LVL 13

Expert Comment

by:darren-w-
ID: 33645490
Ok,

try adding a z-index to . toolTipMid on your stylesheet on line 78
0
 
LVL 6

Accepted Solution

by:
mickey159 earned 300 total points
ID: 33645491
Sorry I missed, I mean insert it after
$('.toolTipWrapper').fadeIn(300);

Good luck!
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 3

Author Comment

by:colinspurs
ID: 33645538
No luck with either I'm afraid - no difference.

Ta, Col
0
 
LVL 6

Expert Comment

by:mickey159
ID: 33652676
Would you post the code of the whole page so that we can test? (HTML is enough)

Thank you!
0
 
LVL 3

Author Comment

by:colinspurs
ID: 33652740
Hi Mickey,

I will but...

I did some more research.  Seems that IE / z-index bug is well known.  Suggested solution is to give parent element a higher z-index.  Parent in this case is a <td>.  I have never heard of giving z-index to a <td> but tried it anyway.  Still no difference.

More research, and I find that sometimes the parent element must be given position:relative.  Again, not heard of that for a <td> but the result is interesting...take a look at it now!

http://www.fobgfc.org/upcoming_new.php

Other cells with a fixture come over the top of the tooltip, presumably because THEY have a higher z-index!

Can't think of a way outta this one!  Unless...when a hover, use jquery to negate z-index of all other <td>'s?


Col
0
 
LVL 3

Author Comment

by:colinspurs
ID: 33652754
For posting the html, what do you need that you can't get from view source?
0
 
LVL 6

Expert Comment

by:mickey159
ID: 33652770
I am busy but I will get u the ans asap

Thanks
0
 
LVL 3

Author Comment

by:colinspurs
ID: 33652779
Don't rush...I need to go out for the day soon anyway.  Didn't expect any responses over the weekend.
0
 
LVL 3

Author Comment

by:colinspurs
ID: 33654824
Hi guys,

Well I think i have nailed it.  A bit of added jquery to fiddle the z-indexes...
On the hover...

            $(this).parent().parent().siblings().children().css('z-index', 1);
            $(this).parent().parent().siblings().children().css('position', 'static');  
            
            $(this).parent().siblings().css('z-index', 1);
            $(this).parent().siblings().css('position', 'static');  

and the reverse when the cursor is moved away.

Thanks again for your help.
0
 
LVL 3

Author Closing Comment

by:colinspurs
ID: 33654848
I found the solution myself, but the contributors helped me on my way.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now