Comments on: Showing and hiding elements with CSS and JavaScript http://www.chapter31.com/2008/03/10/showing-and-hiding-elements-with-css-and-javascript/ Rich Internet Application development Tue, 31 Jan 2012 15:10:27 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Michael Sharman http://www.chapter31.com/2008/03/10/showing-and-hiding-elements-with-css-and-javascript/comment-page-1/#comment-46364 Michael Sharman Sat, 19 Apr 2008 23:49:58 +0000 http://www.chapter31.com/2008/03/10/showing-and-hiding-elements-with-css-and-javascript/#comment-46364 @Zac - Yep, jQuery will show an element which has been hidden using a style in an external .css file (display:none;). Not really sure why Prototype has problems with this, hence the workaround. I assume you're not using "window.onload" if you have a JS framework in place? That would be much slower than using the "DOM ready" approach that either Prototype or jQuery provide. @Zac – Yep, jQuery will show an element which has been hidden using a style in an external .css file (display:none;).

Not really sure why Prototype has problems with this, hence the workaround.

I assume you’re not using “window.onload” if you have a JS framework in place? That would be much slower than using the “DOM ready” approach that either Prototype or jQuery provide.

]]> By: Zachary Crockett http://www.chapter31.com/2008/03/10/showing-and-hiding-elements-with-css-and-javascript/comment-page-1/#comment-46362 Zachary Crockett Sat, 19 Apr 2008 23:10:28 +0000 http://www.chapter31.com/2008/03/10/showing-and-hiding-elements-with-css-and-javascript/#comment-46362 The way I've been handling this case is similarly using the onload property of the DOM window object. I'm curious whether it's functionally exactly the same as your solution -- if so, this code is slightly shorter: <code> window.onload = init; function init() { $('myEl').hide(); } </code> Also, for the record, this will work with jQuery with one tiny modification. Add the pound sign for selecting an ID: <code>$('#myEl').hide();</code> The way I’ve been handling this case is similarly using the onload property of the DOM window object. I’m curious whether it’s functionally exactly the same as your solution — if so, this code is slightly shorter:


window.onload = init;
function init() {
$('myEl').hide();
}

Also, for the record, this will work with jQuery with one tiny modification. Add the pound sign for selecting an ID:
$('#myEl').hide();

]]> By: Michael Sharman http://www.chapter31.com/2008/03/10/showing-and-hiding-elements-with-css-and-javascript/comment-page-1/#comment-41254 Michael Sharman Tue, 11 Mar 2008 12:27:38 +0000 http://www.chapter31.com/2008/03/10/showing-and-hiding-elements-with-css-and-javascript/#comment-41254 I must admit this particular scenario I've only had to do when using Prototype. I have of course manipulated stylesheets with jQuery, just not with hiding/showing elements. That is great news that it is possible with jQuery. I'll have to give it a go when I get a chance. Thanks I must admit this particular scenario I’ve only had to do when using Prototype.

I have of course manipulated stylesheets with jQuery, just not with hiding/showing elements.

That is great news that it is possible with jQuery.

I’ll have to give it a go when I get a chance.

Thanks

]]> By: Seb Duggan http://www.chapter31.com/2008/03/10/showing-and-hiding-elements-with-css-and-javascript/comment-page-1/#comment-41231 Seb Duggan Tue, 11 Mar 2008 08:52:02 +0000 http://www.chapter31.com/2008/03/10/showing-and-hiding-elements-with-css-and-javascript/#comment-41231 As far as I can see, this seems to be a problem with Prototype, rather than JS/CSS as a whole. I have done exactly what you describe using jQuery, and it works perfectly, and as expected. You mention having to use your workaround in jQuery too - have you actually tried it in jQuery, or did you assume it would behave the same way as Prototype (of which, for the record, I have no working experience...)? As far as I can see, this seems to be a problem with Prototype, rather than JS/CSS as a whole.

I have done exactly what you describe using jQuery, and it works perfectly, and as expected.

You mention having to use your workaround in jQuery too – have you actually tried it in jQuery, or did you assume it would behave the same way as Prototype (of which, for the record, I have no working experience…)?

]]>