Multiple Div Toggle Show/Hide... IE7 not hiding.

Reply

•
•
Join Date: Aug 2008
Posts: 1
Reputation: wallwriter is an unknown quantity at this point 
Solved Threads: 0
wallwriter wallwriter is offline Offline
Newbie Poster

Multiple Div Toggle Show/Hide... IE7 not hiding.

 
0
  #1
Jun 23rd, 2009
Hi guys.
I have a page for a choir. There is an image of each member's head which when clicked on a div slides in containing an image and blurb of each individual.

The problem.... the div isn't hidden in IE7 or below.

Here's a link.

The page uses mootools v.1.1. and here's the script:

javascript Syntax (Toggle Plain Text) 
  1. window.addEvent('domready', function(){
  2. 	var stretchers = $$('.display');
  3. 	var toggles = $$('.button');
  4. 	var mySliders = {};
  5. 	var myHiders = {};
  6. 	var visible = null;
  7. 	var marginreset;
  8.  
  9. 	stretchers.each(function(el, i){
  10. 		mySliders[i] = new Fx.Slide(stretchers[i]);	
  11. 		myHiders[i] = new Fx.Slide(stretchers[i].getParent(), 
  12. 				    {			
  13.                    onComplete: function(){ 
  14. 							marginreset = this.wrapper.firstChild.getStyle('margin');
  15. 							this.wrapper.firstChild.firstChild.setStyle('margin', marginreset);
  16.  
  17. 							this.wrapper.firstChild.setStyle('margin', '0');
  18. 							this.wrapper.firstChild.setStyle('height', '0');
  19.  
  20. 							this.wrapper.setStyle('height', 'auto');
  21.  
  22. 							mySliders[myHiders['next']].toggle();
  23. 							visible = myHiders['next'];
  24.                    }
  25.            })	
  26. 		mySliders[i].hide();
  27. 	});
  28. 	toggles.each(function(el, i){
  29. 			toggles[i].addEvent('click', function(){				
  30. 					if ((visible != null) && (i != visible)) {
  31. 						myHiders['next'] = i;	
  32. 						myHiders[visible].toggle();
  33. 					}
  34. 					else {
  35. 						mySliders[i].toggle();
  36. 						visible = i;
  37. 					}
  38. 			});
  39. 	});
  40. });

and relevant CSS

css Syntax (Toggle Plain Text) 
  1.  
  2. .button {
  3. 	color: #222;
  4. 	margin: 0 0.25em;
  5. 	padding: 2px 2px;
  6. 	border-bottom: 1px solid #000;
  7. 	border-right: 1px solid #000;
  8. 	border-top: 1px solid #000;
  9. 	border-left: 1px solid #000;
  10. 	font-size: 11px;
  11. 	font-weight: normal;
  12. 	font-family: 'Andale Mono', sans-serif;
  13. 	display:block;
  14. 	text-align:center;
  15. 	background-color:#000000
  16.  
  17. }
  18.  
  19. a {
  20. 	outline: none !important; /* @ Firefox, remove ugly dotted border */
  21.  }
  22.  
  23. a.button {
  24. 	text-decoration : none;
  25. }
  26.  
  27.  
  28. a.button:hover {
  29. 	border-bottom: 1px solid #fff;
  30. 	border-right: 1px solid #fff;
  31. 	border-top: 1px solid #fff;
  32. 	border-left: 1px solid #fff;
  33.  
  34.  
  35. }
  36.  
  37. .display {
  38.  
  39. 	padding-top : 1em;
  40. 	color:#FFFFFF;
  41. }
  42.  
  43.  
  44. .display p {
  45. 	margin: 0;
  46. 	padding: 4px;
  47. 	color:#FFFFFF;
  48. }
  49.  
  50. #membtext {position:relative;width:700px; height:405px; background-image:url(../images/BG/memberbg.png); }


It all works fine in FF, Safari, Chrome, IE8, it's just IE7 and below that's the problem.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum


Views: 1947 | Replies: 0
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
ad ajax ajaxcode ajaxhelp alignment animate api array automatically box browser bug calendar calling checkbox child class content cookies createrange() css cursor div dom dropdown editor element events explorer file firehose flash form forms function google html htmlform ie8 iframe image() images insertbefore internet java javascript jawascriptruntimeerror jquery jsf jsfile jsp jump list load maps math matrixcaptcha microsoft mp3 mysql object objects offline onmouseoutdivproblem onreadystatechange parent passing php player post progressbar refresh regex resize runtime script scrubber search select selection session shopping size sql star stars stretch text textarea twitter validation values variables web website window windowsxp wysiwyg xspf \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2010 DaniWeb® LLC