Ruby on Rails | Screencasts | Download | Documentation | Weblog | Community | Source

Ticket #3868 (new enhancement)

Opened 4 years ago

Last modified 3 years ago

[PATCH] preserve display styles applied inline when showing/hidding an element

Reported by: anonymous Assigned to: sam@conio.net
Priority: normal Milestone:
Component: Prototype Version: 1.0.0
Severity: minor Keywords: hide show
Cc: mislav

Description (Last modified by bitsweat)

The current (1.4.0) implementation supplies two functions: Element.show and Element.hide. Element.hide sets style.display to 'none', whereas show sets it to . It would be better to save to original value of style.display and restore it latter.

see attach patch: 

Index: C:/Dokumente und Einstellungen/fra/workspace/Prototype/src/dom.js
===================================================================
--- Prototype/src/dom.js	(revision 3595)
+++ Prototype/src/dom.js	(working copy)
@@ -28,14 +28,16 @@
   hide: function() {
     for (var i = 0; i < arguments.length; i++) {
       var element = $(arguments[i]);
+      element.styleDisplay = element.style.display;
       element.style.display = 'none';
+      element.styleDisplay = undefined;
     }
   },
   
   show: function() {
     for (var i = 0; i < arguments.length; i++) {
       var element = $(arguments[i]);
-      element.style.display = '';
+      element.style.display = element.styleDisplay || '';
     }
   },

Attachments

hide-show.diff (4.0 kB) - added by Tobie on 12/20/06 09:04:34.
js + tests

Change History

10/02/06 23:37:14 changed by mislav

Writing to the styleDisplay property of the element might be obtrusive. It is better that the name of the property contains an underscore (or better two).

Something like: 

element.__old_display

It's ugly but it shouldn't be pretty, either.

11/04/06 19:08:47 changed by mislav

  • cc set to mislav.
  • severity changed from normal to minor.

12/05/06 19:11:43 changed by mislav

related: #4854

12/05/06 19:13:59 changed by bitsweat

  • description changed.

12/05/06 21:24:01 changed by Tobie

Why you would want to use inline styling for the display property (except to hide an element using none - because, and only because it is currently needed by Prototype and script.aculo.us) is beyond me. That kind of styling should definitely go in external stylesheets.

Remember that setting element.style.display to an empty string defaults back to whatever display value had previously been set using CSS.

I'm not against adding this patch, I'm just wondering if there is any real life case where it would be useful.

12/10/06 01:38:32 changed by Tobie

The problem with the proposed patch is that if the original inline display style was none calling show on the element will actually hide it!

12/11/06 00:08:35 changed by Tobie

This should work... but needs some tests. 

  hide: function(element) {
    element = $(element);
    var originalDisplay = element.style.display;
    if(originalDisplay && originalDisplay != 'none')
      element._originalDisplay = originalDisplay;
    element.style.display = 'none';
    return element;
  },

  show: function(element) {
    element = $(element);
    element.style.display = element._originalDisplay ? element._originalDisplay : '';
    return element;
  },

12/20/06 07:44:13 changed by Tobie

  • keywords set to hide show.
  • summary changed from Showing/Hidding a DOM Element to [PATCH] preserve display styles apllied inline when showing/hidding a DOM Element.

Added a diff against release [5741].

Now preserves display styles applied inline when hidding, showing or toggling an element.

Comes with tests for: visible(), hide(), show(), and toggle().

12/20/06 07:47:25 changed by Tobie

  • summary changed from [PATCH] preserve display styles apllied inline when showing/hidding a DOM Element to [PATCH] preserve display styles applied inline when showing/hidding an element.

12/20/06 09:04:34 changed by Tobie

  • attachment hide-show.diff added.

js + tests