Show and Hide functions do not work well in Internet Explorer

Question

Show and Hide functions do not work well in Internet Explorer

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

1

I am trying to adapt a small app. web that uses some jQuery functions and I have found that it does not hide elements of the page when with another browser if it does well.

jQuery(function() {
  // Handler for .ready() called.

  jQuery('.dock').hide();  //esta linea no funciona
  jQuery('#menu a').on('click', function(e){    
    jQuery('.dock').hide();
    var target = jQuery(this.hash);
    console.log(target);
    jQuery(target).show();
    e.preventDefault();
  });
});

Something about html:

<div id="docker" class="clearfix">
  <div id="enfermera" class="dock">
    <a target="_blank" class="dock-item" href="http://lauca3/certificasc"><img src="images/icons/icons8-Nurse_Female_100.png" alt="Panel" /><br/><span>Panel de enfermer&iacute;a</span></a>
    <a target="_blank" class="dock-item" href="http://pabellones.alemana.cl/"><img src="images/icons/pabellon.jpg" alt="Pabell&oacute;n" /><span>Pabell&oacute;n</span></a>

    <a target="_blank" class="dock-item" href="file:///C:/cliexe/shc/Atn.exe"><img src="images/icons/fce.png" alt="F&iacute;cha Cl&iacute;nica" /><span><br/>F&iacute;cha Cl&iacute;nica</span></a>

  </div>
</div>

javascript jquery html internet-explorer-9

asked by Luis F. Elgueta 01.08.2017 в 16:53

source

3 answers

AJAX: XML read error: tag without partner. Expected: / img How can I send multiple emails in PHP Mailer

score 2 · Answer 1

Blessed IE and its incompatibility with everyone.

First try putting the .doc class a relative position in your CSS

.dock{position: relative;}

If it does not work try specifying the compatibility with IE 9 and 10

<meta http-equiv="X-UA-Compatible" content="IE=9,10;" />

If it does not work, change it for Edge support

<meta http-equiv="X-UA-Compatible" content="IE=edge;" />

Example of how to put compatibility

<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=9,10;" />
    <title>Title</title>
    <script src="jquery-2.2.1.js"></script>
    ....

More info here

If none of that works, you will have to change the version of JQuery for 1.9x or 1.7x, which is what I used for IE6 and it works well for me.

score 1 · Answer 2

It's a bug in IE. You can solve it using some CSS. Instead of using hide (), use something that gives the same effect as a display: none;

jQuery(function() {
  // Handler for .ready() called.
  
  jQuery('.dock').attr("style", "display: none;")   //esta linea ya debería funcionar
  jQuery('#menu a').on('click', function(e){	
	
	var target = jQuery(this.hash);
	console.log(target);
	jQuery(target).show();
	e.preventDefault();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="docker" class="clearfix">				
				<div id="enfermera" class="dock" >
					<a target="_blank" class="dock-item" href="http://lauca3/certificasc"><img src="images/icons/icons8-Nurse_Female_100.png" alt="Panel" /><br/><span>Panel de enfermer&iacute;a</span></a>
					<a target="_blank" class="dock-item" href="http://pabellones.alemana.cl/"><img src="images/icons/pabellon.jpg" alt="Pabell&oacute;n" /><span>Pabell&oacute;n</span></a>	
					
					<a target="_blank" class="dock-item" href="file:///C:/cliexe/shc/Atn.exe"><img src="images/icons/fce.png" alt="F&iacute;cha Cl&iacute;nica" /><span><br/>F&iacute;cha Cl&iacute;nica</span></a>	
					 
				</div>
      </div>

score 1 · Answer 3

It may be due to conflict with other libraries. Try using:

$('.dock').hide();

instead of:

jQuery('.dock').hide();

Also check that you do not have any more character in all your javascript, that you have well declared the $(document).ready(function(){} , etc. IE looks at everything.