943,078 Members | Top Members by Rank

Ad:
Jun 23rd, 2009
0

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

Expand Post »
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.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
wallwriter is offline Offline
1 posts
since Aug 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: How to remove underline and blue color from text in html?
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Mouse drag selection box





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC