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:

  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

  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

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



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC