Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 440
  • Last Modified:

IE and z-index problems

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
colinspurs
Asked:
colinspurs
  • 9
  • 4
  • 3
2 Solutions
 
darren-w-Commented:
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
 
colinspursAuthor Commented:
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
 
colinspursAuthor Commented:
OK, I commented out the jquery function I added.  Obviously there is an error in there somewhere.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
darren-w-Commented:
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
 
colinspursAuthor Commented:
Thanks; as I said I will look at this but I was hoping for a quick CSS or jquery fix.
0
 
mickey159Commented:
Try
$('.toolTipWrapper').css({ 'opacity' : 1});
0
 
darren-w-Commented:
Ok,

try adding a z-index to . toolTipMid on your stylesheet on line 78
0
 
mickey159Commented:
Sorry I missed, I mean insert it after
$('.toolTipWrapper').fadeIn(300);

Good luck!
0
 
colinspursAuthor Commented:
No luck with either I'm afraid - no difference.

Ta, Col
0
 
mickey159Commented:
Would you post the code of the whole page so that we can test? (HTML is enough)

Thank you!
0
 
colinspursAuthor Commented:
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
 
colinspursAuthor Commented:
For posting the html, what do you need that you can't get from view source?
0
 
mickey159Commented:
I am busy but I will get u the ans asap

Thanks
0
 
colinspursAuthor Commented:
Don't rush...I need to go out for the day soon anyway.  Didn't expect any responses over the weekend.
0
 
colinspursAuthor Commented:
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
 
colinspursAuthor Commented:
I found the solution myself, but the contributors helped me on my way.
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 9
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now