Forums

Board index » YUI 3.x: » Using YUI 3.x Components

Page 1 of 1   [ 8 posts ]
New Topic | Post Reply | Print view

Inactivist

  • Username: Inactivist
  • Joined: Tue Apr 03, 2012 8:40 pm
  • Posts: 12
  • GitHub: inactivist
  • Gists: inactivist
  • Offline
  • Profile
Tags:

Node.show() div with display:none working as expected

Post Posted: Sun Jun 03, 2012 6:28 am
+0-
Calling .show() on a div that has a non-inline CSS style of display:none doesn't work as expected. If I use an inline style instead, .show() works fine.

The CSS file:

Code:
#hidden {display:none;}
#visible {display:block;}


The HTML:
Code:
<div id="hidden">This is initially hidden.</div>
<div style="display:none;" id="hidden-inline-css">This is initially hidden, with an inline style.</div>
<div id="visible">This is initially visible.</div>
<button onClick="doShow()">Do it</button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​


The JavaScript:
Code:
function doShow() {
    YUI().use('node', function(Y) {
        Y.one('#visible').hide();
        Y.one('#hidden').show();
        Y.one("#hidden-inline-css").show();
        alert('Is the hidden div visible?');
    });
}

​


Here's a live example: http://jsfiddle.net/inactivist/MvxG5/

My question: is this a documented/expected behavior? If so, where is it documented? And if not, is it a bug?


Last edited by Inactivist on Mon Jun 04, 2012 6:50 am, edited 1 time in total.

Alberto Santini

YUI Contributor

  • Offline
  • Profile
Tags:

Re: Node.show() on div with css display:none not working

Post Posted: Sun Jun 03, 2012 7:21 am
+1-
Hello Inactivist.

Maybe the following thread is relevant:
viewtopic.php?f=92&t=8954

Hope that helps,
IceBox

Inactivist

  • Username: Inactivist
  • Joined: Tue Apr 03, 2012 8:40 pm
  • Posts: 12
  • GitHub: inactivist
  • Gists: inactivist
  • Offline
  • Profile

Re: Node.show() on div with css display:none not working

Post Posted: Sun Jun 03, 2012 6:37 pm
+0-
Thanks for that info. Is that documented anywhere besides the forum post? I'm wondering if I missed it somewhere...

Alberto Santini

YUI Contributor

  • Offline
  • Profile
Tags:

Re: Node.show() on div with css display:none not working

Post Posted: Sun Jun 03, 2012 11:10 pm
+0-
Hello Inactivist.

I am not aware.

However, usually, I control the style using setStyle, without mixing with css.

Regards,
IceBox

Inactivist

  • Username: Inactivist
  • Joined: Tue Apr 03, 2012 8:40 pm
  • Posts: 12
  • GitHub: inactivist
  • Gists: inactivist
  • Offline
  • Profile
Tags:

Re: Node.show() on div with css display:none not working

Post Posted: Mon Jun 04, 2012 6:43 am
+0-
Addendum: The jQuery .show() method behaves differently (and shows the hidden DIVs as expected), which can confuse those migrating from jQuery to YUI.

Example:
http://jsfiddle.net/inactivist/DyK7a/

Inactivist

  • Username: Inactivist
  • Joined: Tue Apr 03, 2012 8:40 pm
  • Posts: 12
  • GitHub: inactivist
  • Gists: inactivist
  • Offline
  • Profile

Re: Node.show() on div with css display:none not working

Post Posted: Mon Jun 04, 2012 6:48 am
+0-
@icebox:
Quote:
I control the style using setStyle, without mixing with css


I'm not sure what you mean. Would you mind providing an example using your preferred method?

I need to have an initially-hidden DIV (so it's not visible during page load,) then, after the DOM is ready and other conditions are satisfied, I want to toggle the visibility using Node.show() or similar. How would you suggest doing this 'using setStyle, without mixing with css' ?

Dav Glass

  • Username: davglass
  • Joined: Thu Aug 28, 2008 9:28 am
  • Posts: 2088
  • Location: Marion, IL, US
  • Twitter: davglass
  • GitHub: davglass
  • Gists: davglass
  • IRC: davglass
  • Offline
  • Profile
Tags:

Re: Node.show() div with display:none working as expected

Post Posted: Mon Jun 04, 2012 7:05 am
+0-
The issue here is that your other lib "assumes" that showing something means that it needs to be "display: block" which is not always the case.

YUI will simply set the display on the element to '', which should show it:
https://github.com/yui/yui3/blob/master ... iew.js#L35

However, since you are using external CSS to set this property to "none", then in JS when we set it to '' the cascade comes back and it doesn't get shown.

Alberto Santini

YUI Contributor

  • Offline
  • Profile
Tags:

Re: Node.show() div with display:none working as expected

Post Posted: Mon Jun 04, 2012 7:28 am
+0-
Hello Inactivist.

I mean I control the style programmatically and not with css.

Example: YUI Core:
http://yuilibrary.com/yui/docs/yui/yui-core.html

Regards,
IceBox
Page 1 of 1   [ 8 posts ]
New Topic | Post Reply | Print view
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Recent Forums Posts

Recent YUI Blog Posts

Online Users

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group