Solved

IE and z-index problems

Posted on 2010-09-10
16
413 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying 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

Suggested Solutions

Title # Comments Views Activity
JQuery & Classic ASP 10 39
Adding Clickable Links to JQuery Data Items 24 54
center text in div with CSS3 2 28
css messed up 8 26
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…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

737 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