Solved

IE and z-index problems

Posted on 2010-09-10
16
390 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

861 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

28 Experts available now in Live!

Get 1:1 Help Now