?
Solved

problem with a "modal" on  IE7

Posted on 2009-12-20
19
Medium Priority
?
487 Views
Last Modified: 2012-08-13
hi

i have a gallery that have a link for the bigger picture. that should open a window with the big picture or a swf.

it all works on IE8 FF safari and chrome, but on IE7 it just does not show at all.

i attche to code.

best regards

ron
the html:
<div id="modals">	

	<div id="bigpic" class="windowpic">

		<a  href="#" class="close"></a>

	</div>

</div>

the jquery:
	             $('a[name=bigpic]').click(function(e) {
	         		//Cancel the link behavior
	         		e.preventDefault();
	         		//alert(bigpic);
	         		//set different z-index for the menu
	         		
	         		
	         		
	         		$("#pictures img").hide();
	         		$("#sitespictures img").hide();
	         		$("#bannerspictures img").hide();
	         		$('#next img').hide();
	         		$('#prev img').hide();
	         		$('#sitesnext img').hide();
	         		$('#sitesprev 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>' );
	         		
	             });

Open in new window

0
Comment
Question by:derrida
  • 10
  • 8
19 Comments
 
LVL 1

Author Comment

by:derrida
ID: 26089948
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
0
 
LVL 1

Author Comment

by:derrida
ID: 26090929
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
0
 
LVL 4

Expert Comment

by:Sammaye
ID: 26095074
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
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 4

Expert Comment

by:Sammaye
ID: 26095083
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.
0
 
LVL 1

Author Comment

by:derrida
ID: 26095248
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

Open in new window

0
 
LVL 4

Expert Comment

by:Sammaye
ID: 26095660
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
0
 
LVL 4

Expert Comment

by:Sammaye
ID: 26095888
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
0
 
LVL 4

Accepted Solution

by:
Sammaye earned 2000 total points
ID: 26095905
so to just clarify in IE8 and FF:

var id = $(this).attr('href');

returns "#bigpic" but in IE7 is returns "http://192.168.0.2/blah.htm#bigpic" and that is why it won't work.
0
 
LVL 1

Author Comment

by:derrida
ID: 26096014
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
0
 
LVL 1

Author Comment

by:derrida
ID: 26096118
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
0
 
LVL 1

Author Closing Comment

by:derrida
ID: 31668216
not just a working help but with great explanation.
0
 
LVL 4

Expert Comment

by:Sammaye
ID: 26096154
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];
         		}

Open in new window

0
 
LVL 4

Expert Comment

by:Sammaye
ID: 26096158
Don't test useragent it is flimsy at best.
0
 
LVL 1

Author Comment

by:derrida
ID: 26096324
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
0
 
LVL 4

Expert Comment

by:Sammaye
ID: 26096427
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.
0
 
LVL 4

Expert Comment

by:Sammaye
ID: 26096460
javascript header fields like useragent are considered the same as $_SERVER variables in PHP.....pure evil
0
 
LVL 1

Author Comment

by:derrida
ID: 26096484
i must tell you that is so great to be helped by someone who give full explanations.
most appriciate it.
 
ron
0
 
LVL 4

Expert Comment

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

Happy coding,

Sam
0
 
LVL 43

Expert Comment

by:David S.
ID: 26097714
> 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'));
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
This article discusses how to create an extensible mechanism for linked drop downs.
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

839 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