thr3ads.net - Rails spinoffs - [Rails-spinoffs] Element.show

If this information is useful, please help other people find it:
Share via:

SPENDLOVE, Matt, FM

2005-Aug-31 11:16 UTC

[Rails-spinoffs] Element.show - element.style.display=''''

All

Head up. 

I found that when I had a hidden DIV (using css - display: none) which I
wanted to Effect.Appear on some event (although the underlying problem seems
to be with Element.show()), I had to make an amendment to the underlying
prototype.js code by changing :

element.style.display = '''' -> element.style.display =
''block'';

I think the problem was with the conflicting computed CSS values. If your
interested, the code is below.
Thanks for all your efforts folks.


Matt Spendlove

Prototype 1.3.1
Scriptaculous 1.0
Firefox 1.04
IE6

----------------------------------------------------------------------------
-------------------

Details :

[prototype.js]

  hide: function() {
    for (var i = 0; i < arguments.length; i++) {
      var element = $(arguments[i]);
      alert(''hide ''+element.id+'' :
element.style.display
[''+element.style.display+''] getStyle()
[''+getStyle(element,''display'')+'']'');
      element.style.display = ''none'';
      alert(element.id+'' : element.style.display
[''+element.style.display+'']
getStyle()
[''+getStyle(element,''display'')+'']'');
    }
  },

  show: function() {
    for (var i = 0; i < arguments.length; i++) {
      var element = $(arguments[i]);
      alert(''show ''+element.id+'' :
element.style.display
[''+element.style.display+''] getStyle()
[''+getStyle(element,''display'')+'']'');
      element.style.display = ''block'';
      alert(element.id+'' : element.style.display
[''+element.style.display+'']
getStyle()
[''+getStyle(element,''display'')+'']'');
    }
  }, 

function getStyle(el,styleProp)
{
	var x = $(el);

	if (x.currentStyle)
		var y = eval(''x.currentStyle.'' + styleProp);
	else if (document.defaultView.getComputedStyle)
		var y
document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);

	return y;
}
[/prototype.js]

----------------------------------------------------------------------------
-------------------
[html]
<html>
<head>
<title>Play</title>
	<!--
	http://www.sergiopereira.com/articles/prototype.js.html
	http://script.aculo.us/
	-->
	<script src="js/ajax-play.js"
type="text/javascript"></script>
	<script src="js/prototype.js"
type="text/javascript"></script>
	<script src="js/effects.js"
type="text/javascript"></script>
	<script src="js/dragdrop.js"
type="text/javascript"></script>
	<script src="js/controls.js"
type="text/javascript"></script>


	<style type="text/css">


		body
		{
			text-align: centre;
			margin: 0 auto;
			padding: 0px;
		}

		#statusDiv
		{
			position: absolute;
			top: 0%;
			left: 0%;
			margin: 25%;
			width: 50%;
			height: 50%;
			z-index: 999;
			border: 1px solid #000;
			font-size: 16pt;
			background-color: #ccc;
			text-align: center;
			color: red;
			/*
			opacity: 0.0;
    			filter: alpha(opacity:0);
			*/
    			display: none;


		}

		#statusHeader
		{
			border: 0px solid green;

		}

		#statusBody
		{
			border: 0px solid red;
			height: 70%;
			font-size: 14pt;
		}

		#statusFooter
		{
			border: 0px solid blue;
			font-size: 12pt;
		}

	</style>
</head>
<body >
<div id="statusDiv">
	<div id="statusHeader"><h2>Test</h2></div>
	<hr />
	<div id="statusBody">
		<p id="statusText">Starting text</p>
	</div>
	<hr />
	<div id="statusFooter">
		<p><a href="dummyStatusScreen.htm">Click here for
details</a></p>
	</div>
</div>

<a href="#" onclick="showDiv()">SHOW</a>
<a href="#" onclick="hideDiv()">HIDE</a>

</body>
</html>
[/html]

----------------------------------------------------------------------------
-------------------

[ajax-play.js]

function showDiv()
{
	//alert(getStyle($(STATUS_DOM_DIV_ID),''display''));
	var tmp = new Effect.Appear(STATUS_DOM_DIV_ID);
	var tmp2 = new Effect.Pulsate(STATUS_DOM_DIV_ID);
	//alert(getStyle($(STATUS_DOM_DIV_ID),''display''));
}

function hideDiv()
{
	//alert(getStyle($(STATUS_DOM_DIV_ID),''display''));
	Element.hide($(STATUS_DOM_DIV_ID));
	//alert(getStyle($(STATUS_DOM_DIV_ID),''display''));
	
}

[/ajax-play.js]


***********************************************************************************
The Royal Bank of Scotland plc. Registered in Scotland No 90312.      
Registered Office: 36 St Andrew Square, Edinburgh EH2 2YB.
Authorised and regulated by the Financial Services Authority     
 
This e-mail message is confidential and for use by the                      
addressee only. If the message is received by anyone other             
than the addressee, please return the message to the sender          
by replying to it and then delete the message from your                    
computer. Internet e-mails are not necessarily secure. The               
Royal Bank of Scotland plc does not accept responsibility for          
changes made to this message after it was sent.                              

Whilst all reasonable care has been taken to avoid the                   
transmission of viruses, it is the responsibility of the recipient to        
ensure that the onward transmission, opening or use of this             
message and any attachments will not adversely affect its               
systems or data.  No responsibility is accepted by The Royal           
Bank of Scotland plc in this regard and the recipient should carry   
out such virus and other checks as it considers appropriate.           
                                                                                
Visit our websites at:
http://www.rbs.co.uk/CBFM
http://www.rbsmarkets.com
                                                                                
********************************************************************************

Thomas Fuchs

2005-Aug-31 12:07 UTC

head link

[Rails-spinoffs] Element.show - element.style.display=''''

Yeah. The problem is that you can use Element.show on all elements  
and there''s no way AFAIK to find out the ''default''
display value if
it''s overridden by a CSS declaration. It''s only safe to use
show/hide
on elements that either have the ''display'' CSS attribute not
set or
set by an ''style'' attribute on the element itself.

So, setting display to "block" would be not a good idea on things  
like tables, spans and so on.

Btw, an implementation of Element.getStyle is included with the  
script.aculo.us SVN trunk.

Thomas

Am 31.08.2005 um 18:11 schrieb SPENDLOVE, Matt, FM:
> All
>
> Head up.
>
> I found that when I had a hidden DIV (using css - display: none)  
> which I
> wanted to Effect.Appear on some event (although the underlying  
> problem seems
> to be with Element.show()), I had to make an amendment to the  
> underlying
> prototype.js code by changing :
>
> element.style.display = '''' -> element.style.display =
''block'';
>
> I think the problem was with the conflicting computed CSS values.  
> If your
> interested, the code is below.
> Thanks for all your efforts folks.
>

SPENDLOVE, Matt, FM

2005-Aug-31 19:01 UTC

head link

[Rails-spinoffs] Element.show - element.style.display=''''

All

Heads up. 

I found that when I had a hidden DIV (using css - display: none) which I
wanted to Effect.Appear on some event (although the underlying problem seems
to be with Element.show()), I had to make an amendment to the underlying
prototype.js code by changing :

element.style.display = '''' -> element.style.display =
''block'';

I think the problem was with the conflicting computed CSS values. If your
interested, the code is below. Thanks for all your efforts folks.


Matt Spendlove

Prototype 1.3.1
Scriptaculous 1.0
Firefox 1.04
IE6

----------------------------------------------------------------------------
-------------------

Details :

[prototype.js]

  hide: function() {
    for (var i = 0; i < arguments.length; i++) {
      var element = $(arguments[i]);
      alert(''hide ''+element.id+'' :
element.style.display
[''+element.style.display+''] getStyle()
[''+getStyle(element,''display'')+'']'');
      element.style.display = ''none'';
      alert(element.id+'' : element.style.display
[''+element.style.display+'']
getStyle()
[''+getStyle(element,''display'')+'']'');
    }
  },

  show: function() {
    for (var i = 0; i < arguments.length; i++) {
      var element = $(arguments[i]);
      alert(''show ''+element.id+'' :
element.style.display
[''+element.style.display+''] getStyle()
[''+getStyle(element,''display'')+'']'');
      element.style.display = ''block'';
      alert(element.id+'' : element.style.display
[''+element.style.display+'']
getStyle()
[''+getStyle(element,''display'')+'']'');
    }
  }, 

function getStyle(el,styleProp)
{
	var x = $(el);

	if (x.currentStyle)
		var y = eval(''x.currentStyle.'' + styleProp);
	else if (document.defaultView.getComputedStyle)
		var y
document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);

	return y;
}
[/prototype.js]

----------------------------------------------------------------------------
-------------------
[html]
<html>
<head>
<title>Play</title>
	<!--
	http://www.sergiopereira.com/articles/prototype.js.html
	http://script.aculo.us/
	-->
	<script src="js/ajax-play.js"
type="text/javascript"></script>
	<script src="js/prototype.js"
type="text/javascript"></script>
	<script src="js/effects.js"
type="text/javascript"></script>
	<script src="js/dragdrop.js"
type="text/javascript"></script>
	<script src="js/controls.js"
type="text/javascript"></script>


	<style type="text/css">


		body
		{
			text-align: centre;
			margin: 0 auto;
			padding: 0px;
		}

		#statusDiv
		{
			position: absolute;
			top: 0%;
			left: 0%;
			margin: 25%;
			width: 50%;
			height: 50%;
			z-index: 999;
			border: 1px solid #000;
			font-size: 16pt;
			background-color: #ccc;
			text-align: center;
			color: red;
			/*
			opacity: 0.0;
    			filter: alpha(opacity:0);
			*/
    			display: none;


		}

		#statusHeader
		{
			border: 0px solid green;

		}

		#statusBody
		{
			border: 0px solid red;
			height: 70%;
			font-size: 14pt;
		}

		#statusFooter
		{
			border: 0px solid blue;
			font-size: 12pt;
		}

	</style>
</head>
<body >
<div id="statusDiv">
	<div id="statusHeader"><h2>Test</h2></div>
	<hr />
	<div id="statusBody">
		<p id="statusText">Starting text</p>
	</div>
	<hr />
	<div id="statusFooter">
		<p><a href="dummyStatusScreen.htm">Click here for
details</a></p>
	</div>
</div>

<a href="#" onclick="showDiv()">SHOW</a>
<a href="#" onclick="hideDiv()">HIDE</a>

</body>
</html>
[/html]

----------------------------------------------------------------------------
-------------------

[ajax-play.js]

function showDiv()
{
	//alert(getStyle($(STATUS_DOM_DIV_ID),''display''));
	var tmp = new Effect.Appear(STATUS_DOM_DIV_ID);
	var tmp2 = new Effect.Pulsate(STATUS_DOM_DIV_ID);
	//alert(getStyle($(STATUS_DOM_DIV_ID),''display''));
}

function hideDiv()
{
	//alert(getStyle($(STATUS_DOM_DIV_ID),''display''));
	Element.hide($(STATUS_DOM_DIV_ID));
	//alert(getStyle($(STATUS_DOM_DIV_ID),''display''));
	
}

[/ajax-play.js]


***********************************************************************************
The Royal Bank of Scotland plc. Registered in Scotland No 90312.      
Registered Office: 36 St Andrew Square, Edinburgh EH2 2YB.
Authorised and regulated by the Financial Services Authority     
 
This e-mail message is confidential and for use by the                      
addressee only. If the message is received by anyone other             
than the addressee, please return the message to the sender          
by replying to it and then delete the message from your                    
computer. Internet e-mails are not necessarily secure. The               
Royal Bank of Scotland plc does not accept responsibility for          
changes made to this message after it was sent.                              

Whilst all reasonable care has been taken to avoid the                   
transmission of viruses, it is the responsibility of the recipient to        
ensure that the onward transmission, opening or use of this             
message and any attachments will not adversely affect its               
systems or data.  No responsibility is accepted by The Royal           
Bank of Scotland plc in this regard and the recipient should carry   
out such virus and other checks as it considers appropriate.           
                                                                                
Visit our websites at:
http://www.rbs.co.uk/CBFM
http://www.rbsmarkets.com
                                                                                
********************************************************************************

Sam Foster

2005-Sep-07 23:18 UTC

head link

[Rails-spinoffs] Element.show - element.style.display=''''

I hit the same issue. We want to do most of the positioning and so on 
with CSS, but that mean that invariably the display property is set via 
a class somewhere, so setting back to '''' doesn''t
work. And as you say
"block" may not be appropriate. It can actually be very useful to give
a
div  the display of table-cell for example (or a span block etc.) so you 
cant even rely on a lookup table for  non-"none" values for elements. 
Really, the solution is to set it back to whatever it was, so I''m
trying
something like this. Comments?
 
Object.extend(Element, {
    show: function() {
        for (var i = 0; i < arguments.length; i++) {
            var element = $(arguments[i]);
            element.style.display = 
element.getAttribute("_showproperty") || "block";
        }
    },
    hide: function() {
        for (var i = 0; i < arguments.length; i++) {
            var element = $(arguments[i]);
            var display = Element.getStyle(element, "display");
            // store the current display property to restore to when we 
need to show the element
            if(display.toLowerCase() != "none") 
element.setAttribute("_showproperty", display);
            element.style.display = "none";
        }
    },
});

Sam
-i-am

Thomas Fuchs wrote:
> Yeah. The problem is that you can use Element.show on all elements  
> and there''s no way AFAIK to find out the
''default'' display value if
> it''s overridden by a CSS declaration. It''s only safe to
use show/hide
> on elements that either have the ''display'' CSS attribute
not set or
> set by an ''style'' attribute on the element itself.
>
> So, setting display to "block" would be not a good idea on things
> like tables, spans and so on.
>
> Btw, an implementation of Element.getStyle is included with the  
> script.aculo.us SVN trunk.
>
> Thomas

Martin Bialasinski

2005-Sep-08 06:19 UTC

head link

[Rails-spinoffs] Element.show - element.style.display=''''

On 08/09/05, Sam Foster <sam@sam-i-am.com> wrote:
> We want to do most of the positioning and so on
> with CSS, but that mean that invariably the display property is set via
> a class somewhere, so setting back to '''' doesn''t
work.
It does work, if you do the hiding with Element.hide() and only use
stylesheets, not inline styles. Element.show() will then remove the
display: none from element.style (this is what assigning "" does), and
the value defined by the cascade will kick in. So it will work in your
case.

The problem of the original poster was, that he has display: none in a
style for some element. Now he wants to make this element appear. Your
suggestion does not solve this problem. To compute the proper display
property, you would have to parse the stylesheets, find out which
definitions apply to the element, remove any with display: none and
compute the cascade for the remaining ones (including default values
for the elements).
> It can actually be very useful to give a
> div  the display of table-cell for example
As long as IE is not important. Damn thing.
> Really, the solution is to set it back to whatever it was
Element.show() does this, as long as display is not set in inline
styles. But a getStyle() approach would also make Element.show() work
in these cases. Could be worthwhile.

Bye,
  Martin

Reasonably Related Threads

Search for more apparently analagous threads

Rails spinoffs - Aug 2005 - Element.show - element.style.display=''''

[Rails-spinoffs] Element.show - element.style.display=''''

[Rails-spinoffs] Element.show - element.style.display=''''

[Rails-spinoffs] Element.show - element.style.display=''''

[Rails-spinoffs] Element.show - element.style.display=''''

[Rails-spinoffs] Element.show - element.style.display=''''

Reasonably Related Threads