JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

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

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
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
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug captchaformproblem checkbox close codes createrange() css cursor debugger decimal dependent disablefirebug dom download dropdown editor element engine enter error events explorer ext file firefox form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsp jump listbox maps masterpage math media menu microsoft mp4 object onmouseoutdivproblem onreadystatechange paypal pdf php player position programming progressbar prototype redirect regex runtime safari scale scriptlets search security select size software sql text textarea unicode w3c window windowofwords windowsxp \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC