Solved

IE and z-index problems

Posted on 2010-09-10
16
407 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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
 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

828 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