problem with a "modal" on IE7

hi

when i check in IEtester the code that is generated by the browser on IE8 i see the code for the modals and the swf object.

when i test there for IE7 the modals and the swf is not generated at all.

ron

hi

well the bizzare thing is: if the link to open the modal is not inside the tooltip for the picture, and is in the html itself, it does work on IE7.

maybe i should explain:
i have the gallery and when the mouse is over a picture, a tooltip show its description and a link to open a bigger version. in IE8 FF and others it work but not on IE7. as i said the code does not even generated.

ron

Hi,

This code shows in IE. I am having problems with the code though since I cannot debug it to see whats happening. Firstly though FF and IE8 have repairing properties whilst IE7 will break for even a misplaced html tag. Can you by any chance give us a more complete version so we can debug it? I will in the mean time attempt to rewrite the version you have given to work but a more complete version would go down well.

Maybe an entire page were this code exists with html and you know works for you in FF or IE8.


Thanks,

Sam

Opps forgot to mention in last post:

I cannot get this code to work in FF or IE8 in its current form, so yea that's why I ask for a more complete version.

hi
first thanks for answering.
i attach more code.
ron

this is the html of the gallery:
<div  id="wrapper">
      <div  id="content">
 
       
        <div  id="bannersgallery">
          <div id="bannerspictures">
             <!-- loop the  pictures -->
             <?php 
             foreach ($this->banners as $banner)
             {?>
                <img id="<?php echo $banner->pic_larger ;?>" alt="<?php echo $this->escape($banner->pic_desc);?>" src="/images/galleries/<?php echo $banner->pic_name;?>"/>
             <?php 
             }
             ?>
             <!-- end the loop -->
          </div>
          
          <div  id="bannersprev">
            <a href="#bannersprev"><img src="/images/galleries/left-arrow.gif" alt="prevarrow" /></a>
          </div>
          <div  id="bannersnext">
            <a href="#bannersnext"><img src="/images/galleries/right-arrow.gif" alt="next" /></a>
          </div>
          <div id="bannerstooltip">
          
          <p class="content">
         
          </p></div>
        </div>
		</div>
    </div>

this is the html of the modal/window:

<!-- pics modals -->
<div id="modals">	
	<div id="bigpic" class="windowpic">
		<a  href="#" class="close"></a>
	</div>
</div>
<!-- end pics modals -->

and this is the full jquery for the gallery (sorry but it is very long):

	//banners gallery
	  var bannersz = 0; //for setting the initial z-index's
	  var bannersinAnimation = false; //flag for testing if we are in a animation
	  var bannersimgLoaded = 0; //for checking if all images are loaded
	  
	  $('#bannerspictures').append('<div class="overlayloader"></div>'); //append the loader div, it overlaps all pictures
	  
	  $("#bannerspictures img").mouseover(function(){
	        $('#bannerstooltip').show();
	             var info = $(this).attr('alt');
	             var bigpic = $(this).attr('id');
	             
	             $('#bannerstooltip .content').html(info +  '<a name="biggerpic" class="biglink" href="#bigpic"><img src="/images/enlarge.png" /></a>');
	             //start the bigpic modal
	             $('a[name=biggerpic]').click(function(e) {
	         		//Cancel the link behavior
	         		e.preventDefault();
	         		//alert(bigpic);
	         		//set different z-index for the menu

	         		$("#bannerspictures img").hide();
	         		$('#bannersnext img').hide();
	         		$('#bannersprev img').hide();
	         		
	         		
	         		
	         		//Get the A tag
	         		
	         		var id = $(this).attr('href');
	         	
	         		//Get the screen height and width
	         		var maskHeight = $(document).height();
	         		
	         		var maskWidth = $(window).width();
	         		
	         	
	         		//Set height and width to mask to fill up the whole screen
	         		//$('#bigpic').css({'z-index': 100000000});
	         		$('#bigpicsmask').css({'width':maskWidth,'height':maskHeight});
	         		
	         		//transition effect		
	         		$('#bigpicsmask').fadeIn(600);	
	         		$('#bigpicsmask').fadeTo("slow",0.8);	
	         	
	         		//Get the window height and width
	         		var winH = $(window).height();
	         		var winW = $(window).width();
	                       
	         		//Set the popup window to center
	         		$(id).css('top',  winH/2-$(id).height()/2);
	         		$(id).css('left', winW/2-$(id).width()/2);
	         	
	         		//transition effect
	         		$(id).fadeIn(200);
	         		$(id).append(
	         				  '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="60%" height="90%" id="FlashID" title="swfs">' +
	         				  '<param name="movie" value="images/galleries/' + bigpic + '" />' +
	         				  '<param name="quality" value="high" />' +
	         				  '<param name="wmode" value="transparent" />' +
	         				  '<param name="swfversion" value="9.0.45.0" />' +
	         				  '<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you dont want users to see the prompt. -->' +
	         				  '<param name="expressinstall" value="Scripts/expressInstall.swf" />' +
	         				  '<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->' +
	         				  '<!--[if !IE]>-->' +
	         				  '<object type="application/x-shockwave-flash" data="images/galleries/' + bigpic +'" width="60%" height="90%">' +
	         				    '<!--<![endif]-->' +
	         				    '<param name="quality" value="high" />' +
	         				    '<param name="wmode" value="transparent" />' +
	         				    '<param name="swfversion" value="9.0.45.0" />' +
	         				    '<param name="expressinstall" value="Scripts/expressInstall.swf" />' +
	         				    '<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->' +
	         				    '<div>' +
	         				      '<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>' +
	         				      '<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>' +
	         				    '</div>' +
	         				    '<!--[if !IE]>-->' +
	         				  '</object>' +
	         				  '<!--<![endif]-->' +
	         				'</object>' +
	         				'<script type="text/javascript">' +
	         				'<!--' +
	         				'wfobject.registerObject("FlashID");' +
	         				'//-->' +
	         				'</script>' );
	         		
	             });
	         	//if close button is clicked
	         	$('.windowpic .close').click(function (e) {
	         		//Cancel the link behavior
	         		e.preventDefault();
	         		$('object').remove();
	         		$('#bigpicsmask, .windowpic').hide();
	         		$("#pictures img").show();
	         		$("#sitespictures img").show();
	         		$("#bannerspictures img").show();
	         		$('#next img').show();
	         		$('#prev img').show();
	         		$('#sitesnext img').show();
	         		$('#sitesprev img').show();
	         		$('#bannersnext img').show();
	         		$('#bannersprev img').show();
	         	});		
	            }).mouseout(function(){
	                    $('#bannerstooltip').hide();
	            });
	  //end the bigpic modal
	                        
	 $("#bannerstooltip").mouseover(function(){
		  $(this).show();
			 var info = $(this).attr('alt');
			 $('#bannerstooltip .content').html(info);
			 
			}).mouseout(function(){
		        $('#bannerstooltip').hide();
		});
	  
	  $('#bannerspictures img').each(function() { //set the initial z-index's
		  bannersz++; //at the end we have the highest z-index value stored in the z variable
	    $(this).css('z-index', bannersz); //apply increased z-index to <img>
	    
	    var img = new Image();
	    img.src = $(this).attr('src');
	    
	    if(img.complete)
	    {
	    	$('div.overlayloader').fadeOut('slow');
	    }
	    
	    $(new Image()).attr('src', $(this).attr('src')).load(function() { //create new image object and have a callback when it's loaded
	    	bannersimgLoaded++; //one more image is loaded
	      
	      if(bannersimgLoaded == bannersz) { //do we have all pictures loaded?
	        $('#loader').fadeOut('slow'); //if so fade out the loader div
	      }
	    });
	  });
	
	function swapFirstLastforbanners(isFirst){
		
		if(bannersinAnimation) return false;
		else bannersinAnimation = true;
		
		var bannersproccessZindex,bannersdirection,bannersneZindex,bannersinDeCrease;
		
		if(isFirst)
		{
			bannersproccessZindex = bannersz;
			bannersdirection = '-';
			bannersnewZindex = 1;
			bannersinDeCrease = 1;
		}else{
			bannersproccessZindex = 1;
			bannersdirection = '';
			bannersnewZindex = bannersz;
			bannersinDeCrease = -1;
		}
		
		$('#bannerspictures img').each(function(){
			if($(this).css('z-index') == bannersproccessZindex)
			{
				
				$(this).animate({'top' : bannersdirection+$(this).height()+'px'},'slow',function(){
					$(this).css('z-index', bannersnewZindex).animate({'top' : '0'},'slow',function(){
						bannersinAnimation = false;
					});
				});
			}else{
				$(this).animate({'top' : '0'},'slow',function(){
					$(this).css('z-index',parseInt($(this).css('z-index'))+ bannersinDeCrease);
				});
			}
		});
		return false;
	}
	
	$('#bannersnext a').click(function(){
		
		return swapFirstLastforbanners(true);
	});
	
	$('#bannersprev a').click(function(){
		return swapFirstLastforbanners(false);
	});
	// end of banners gallery

Select allOpen in new window

I have attached a screen shot. The "cheese" below is the tooltip with the blue bordered empty link (this is without CSS) but your saying the link don't work and the modal bails in IE7. If that's the case I'm up to speed. The code gets generated in IE7 for me but I need to do some CSS work before I can mess with the link.

I did notice one thing immediately that when you add <script> tags dynamically it can effect runtime of scripts (this script wouldn't even run until I took out the script from '</script>' );). It is normally better to include the html using JQuery, but I'll do more investigation first into this link before I jump to conclusions.
IE7blurg.png

OK I know the problem. When you click the link in IE8 and FF is comes back with "#bigpic" (or whatever) but in IE7 is it actually "http://192.168.0.2/blah.htm#bigpic" (well something along those lines) so you wanna perform a check to extract the hash from your string otherwise no data gets appended

hi
thanks for the answer. how can i rewrite the id variable so it will include only "#bigpic"?
i`m not that good in JS.
i thought to do something like this:

if (/MSIE (7\.)/.test(navigator.userAgent)) {
var id = $(this).attr('href');
}else{
var id = $(this).attr('href');
}
but then i need to re write the id variable.
 
ron

hi
 
found it:

if (/MSIE (7\.)/.test(navigator.userAgent)) {

var theurl = $(this).attr('href');
var exploded = theurl.split('#');
var newid = "#" + exploded[1];
var id = newid;

}else{
var id = $(this).attr('href');
}
now it work on ie7 too.
 
thanks

not just a working help but with great explanation.

Not the best example but uses regular expressions to understand if IE7 or not...this is tested and works.

         		var re = new RegExp("\#[a-z]+");

         		if(id.match(re)){
	         		var match = id.match(re);
	         		id = match[0];
         		}

Select allOpen in new window

Don't test useragent it is flimsy at best.

hi
first if i can ask you to explain this in more details? cause i have several galleries.
" did notice one thing immediately that when you add <script> tags dynamically it can effect runtime of scripts (this script wouldn't even run until I took out the script from '</script>' );). It is normally better to include the html using JQuery, but I'll do more investigation first into this link before I jump to conclusions"
and second- why not to use useragent ? i searched the net and that was they way some suggested to check which version the user use.
 
again best regards
 
ron

Ok basically the first point is that sometimes IE hates dynamic tags being loaded. This bug is very rare but can occasionally occur and when it does you use the load function:

http://docs.jquery.com/Ajax/load

Most likely you won't encounter it so long as you keep your JQuery inside the document ready function. I only received the error initially because I was being a prat and didn't put the JQuery inside the document ready function.

Don't use useragent because the variable is easily manipulated and changed. There are in fact some privacy software that will not reveal the browser that the user is using and of course useragent is gained from the HTTP header so if the HTTP header has no useragent then javascript won't. Not only that but the variable is insecure and your effectively relying on something outside of your programs operation which is ill advised (maybe not 5 years ago but is now) if you wish to test for IE you test for objects:

http://www.maratz.com/blog/archives/2006/10/31/reliable-ie-7-detection-with-javascript/

but since regular expressions is easier and much more reliable I decided to do it that way.

javascript header fields like useragent are considered the same as $_SERVER variables in PHP.....pure evil

i must tell you that is so great to be helped by someone who give full explanations.
most appriciate it.
 
ron

Anytime :) I know how difficult it is when you don't get a real explanation.

Happy coding,

Sam

> but since regular expressions is easier and much more reliable I decided to do it that way.

Yes, it's best to avoid using browser detection when you can.

> http://www.maratz.com/blog/archives/2006/10/31/reliable-ie-7-detection-with-javascript/

Ironically, none of the methods mentioned on that page are reliable (one can be fixed though). JScript 5.7 was released as an update for IE6, so checking the version number is insufficient to differentiate between IE6 and IE7.

This is what I use:

var isMSIE=/*@cc_on!@*/false; // http://dean.edwards.name/weblog/2007/03/sniff/
var IE7plus=(isMSIE&&(typeof document.body.style.maxHeight=='string'));