Forum: Ruby on Rails How to hide an object???

Hi everyone:
I want to hide an object before it load. I see in the API the function
page.hide but I don´t have any idea about how to use it properly. Anyone
can help me?? Is there any other form to do that??

THANKs

Guille San wrote:
> Hi everyone:
> I want to hide an object before it load. I see in the API the function
> page.hide but I don´t have any idea about how to use it properly. Anyone
> can help me?? Is there any other form to do that??

By "object" I assume you mean "HTML element."

<div id='my_element'>
  This should get hidden
</div>

Prototype
-------------------
$('my_element').hide();
-------------------

jQuery
-------------------
$('#my_element').hide();
-------------------

RJS
-------------------
page['#my_element'].hide
-------------------

In any of these cases you also need to wait for the DOM to fully load 
before attempting to hide the element:

Example in jQuery
-------------------
$(document).ready(function() {
  $('#my_element').hide();
});
-------------------

Or, in case you want the element initially hidden, then use JavaScript 
to show it later.

<div id='my_element' style='display: none;'>
  This should get shown later
</div>

jQuery
-------------------
$('#my_element').show();
-------------------

Hi
I only have one question more. How can I do this example with prototype:

Example in jQuery
-------------------
$(document).ready(function() {
  $('#my_element').hide();
});

THANKS!!

On Wed, Mar 10, 2010 at 7:33 AM, Guille San <lists@ruby-forum.com> 
wrote:

> I only have one question more. How can I do this example with prototype:
>
> Example in jQuery
> -------------------
> $(document).ready(function() {

google: prototype.js api document ready

>  $('#my_element').hide();

google: prototype.js api hide element

--
Hassan Schroeder ------------------------ hassan.schroeder@gmail.com
twitter: @hassan

Guille San wrote:
> Hi
> I only have one question more. How can I do this example with prototype:
> 
> Example in jQuery
> -------------------
> $(document).ready(function() {
>   $('#my_element').hide();
> });

I wish Prototype had this built-in. However, it's pretty easy to add the 
onDOMReady extension script and then use the following:

Event.onDOMReady(function() {
  $('my_element').hide();
});

You can find that extension script here:
http://smoothoperatah.com/files/onDOMReady.js

Otherwise, you can also just wait for the whole page to load with 
something like:
Event.observe(window, "load", function() {
  $('my_element').hide();
});

I prefer using the onDOMReady extension because it's designed to wait 
only for the DOM itself to load and not the entire page, and does so 
with cross browser support.

Hi:
Sometimes I feel that I am so stupid. I put in my view the following:

<script type="text/javascript">

function lastSpy() {

            var target = $('imagen');

            if (!target) return false;
      new Ajax.PeriodicalUpdater(target, 
'http://localhost:3000/',{frequency:'1'})
}

       Event.observe(window, 'load', lastSpy, false);
     </script>
<div id="imagen">
<%=image_tag("/guarrada/Debug/foto.jpg") %>
</div>

$(document).ready(function() {
  $('#imagen').hide();
});


and in the layout carpet inthe home.html.erb I added
  <%= javascript_include_tag 'jquery'%>

What´s exactly wrong??

Thanks for your time

Some questions:

I want to hide the object while it loading and show it when it load 
completely, it could be something like that, or I´m totally wrong:


<script type="text/javascript">
Object.extend(Event, {
  _domReady : function() {
    if (arguments.callee.done) return;
    arguments.callee.done = true;

    if (this._timer)  clearInterval(this._timer);

    this._readyCallbacks.each(function(f) { f() });
    this._readyCallbacks = null;
},
  onDOMReady : function(f) {
    if (!this._readyCallbacks) {
      var domReady = this._domReady.bind(this);

      if (document.addEventListener)
        document.addEventListener("DOMContentLoaded", domReady, false);

        /*@cc_on @*/
        /*@if (@_win32)
            document.write("<script id=__ie_onload defer 
src=javascript:void(0)><\/script>");
            document.getElementById("__ie_onload").onreadystatechange = 
function() {
                if (this.readyState == "complete") domReady();
            };
        /*@end @*/

        if (/WebKit/i.test(navigator.userAgent)) {
          this._timer = setInterval(function() {
            if (/loaded|complete/.test(document.readyState)) domReady();
          }, 10);
        }

        Event.observe(window, 'load', domReady);
        Event._readyCallbacks =  [];
    }
    Event._readyCallbacks.push(f);
  }
});
function lastSpy() {

            var target = $('imagen');

            if (!target) return false;
      new Ajax.PeriodicalUpdater(target, 
'http://localhost:3000/',{frequency:'1'})

}
Event.observe(window, 'load', lastSpy, false);

     </script>
<div id="imagen" style='display: none;'>
<%=image_tag("/guarrada/Debug/foto.jpg") %>
</div>
Event.onDOMReady(function() {
  $('imagen').show();
})

On Mar 10, 3:51 pm, Robert Walker <li...@ruby-forum.com> wrote:
> I wish Prototype had this built-in. However, it's pretty easy to add the
> onDOMReady extension script and then use the following:
>
Isn't that what prototype's dom:loaded event  does (http://
www.prototypejs.org/api/document/observe )

Fred

Frederick Cheung wrote:
> On Mar 10, 3:51�pm, Robert Walker <li...@ruby-forum.com> wrote:
>> I wish Prototype had this built-in. However, it's pretty easy to add the
>> onDOMReady extension script and then use the following:
>>
> Isn't that what prototype's dom:loaded event  does (http://
> www.prototypejs.org/api/document/observe )

Good catch Frederick! The last time I looked for this in the Prototype 
API docs they showed the example as using the window load event. This is 
why I went looking for the onDOMLoaded in the first place.

I had seen something like this before, but didn't realize that it was 
Prototype that was adding the "dom:loaded" event. I was assuming that 
event didn't work across all browsers, but I see from the above link 
that Prototype should be taking care of that.

Hi everyone:

I probe to use the function that Frederick says, but it doesn´t work 
because mi image don´t load the new periodical image. Where I´m doing 
something wrong??

<script type="text/javascript">

function lastSpy() {

            var target = $('imagen');

            if (!target) return false;
      new Ajax.PeriodicalUpdater(target, 
'http://localhost:3000/',{frequency:'1'})

}
Event.observe(window, 'load', lastSpy, false);
document.observe("dom:loaded", function() {

  $$('imagen').invoke('hide');
});

     </script>
<div id="imagen" >
<%=image_tag("/guarrada/Debug/foto.jpg") %>
</div>

Guille San wrote:
> Hi everyone:
> 
> I probe to use the function that Frederick says, but it doesn´t work 
> because mi image don´t load the new periodical image. Where I´m doing 
> something wrong??
> 
> <script type="text/javascript">
> 
> function lastSpy() {
> 
>             var target = $('imagen');
> 
>             if (!target) return false;
>       new Ajax.PeriodicalUpdater(target, 
> 'http://localhost:3000/',{frequency:'1'})
> 
> }
> Event.observe(window, 'load', lastSpy, false);
> document.observe("dom:loaded", function() {
> 
>   $$('imagen').invoke('hide');

This is what you're saying, "Search using CSS selector 'imagen' for all 
<imagen> tags and invoke 'hide' on each." This tag does not exist in 
your DOM.

I assume what you want is to find the element with id='imagen' and hide 
it. That would be:

$('imagen').hide();

> });
> 
>      </script>
> <div id="imagen" >
> <%=image_tag("/guarrada/Debug/foto.jpg") %>
> </div>

Move your JavaScript outside of your page. This technique is designed to 
be unobtrusive, then your jamming it right back into your page making 
obtrusive again.

Start by putting your script code in the JavaScript file that Rails 
provides you by default (public/javascripts/application.js). And make 
sure you include the default script files in your <head> section:

<head>
  ...
  <%= javascript_include_tag :defaults %>
  ...
</head>

This one line will include the necessary Prototype JavaScript files, and 
also include public/javascripts/application.js for you.

Robert Walker wrote:
> Guille San wrote:
>> <script type="text/javascript">
>> 
>> function lastSpy() {
>> 
>>             var target = $('imagen');
>> 
>>             if (!target) return false;
>>       new Ajax.PeriodicalUpdater(target, 
>> 'http://localhost:3000/',{frequency:'1'})
>> 
>> }
>> Event.observe(window, 'load', lastSpy, false);
>> document.observe("dom:loaded", function() {
>> 
>>   $$('imagen').invoke('hide');
>
> I assume what you want is to find the element with id='imagen' and hide 
> it. That would be:
> 
> $('imagen').hide();
>
>> });
>> 
>>      </script>
>> <div id="imagen" >
>> <%=image_tag("/guarrada/Debug/foto.jpg") %>
>> </div>

I also just noticed that once you get the hide() working, you have 
nothing in your script to show it again. You are trying to make an AJAX 
call to update it's contents every second, but the element would still 
be hidden. Is that what you intended?

Hi Robert:
First of all I want to thank you for all the time you are spending 
helping me.

> I also just noticed that once you get the hide() working, you have 
> nothing in your script to show it again. You are trying to make an AJAX 
> call to update it's contents every second, but the element would still 
> be hidden. Is that what you intended?
I would try to spend clearly what I´m trying to do, because I thing that 
sometimes I´m not explaining well. That I want to do is:
1- I have a program that takes a picture from a camera every 700ms.
2- Those images are save at \public\guarrada\Debug
3- I want to show that images that I take every second in the webpage
4- I want that the serie of images seems like a video.For that purpose I 
want to change the latest image only when it were fully loaded, because 
if I don´t do that the video have a white line continuos moving on the 
image doing like a blind.

I think I expressed it well this time, but if you have any question do 
that.

Guille San wrote:
> Hi Robert:
> First of all I want to thank you for all the time you are spending 
> helping me.
> 
>> I also just noticed that once you get the hide() working, you have 
>> nothing in your script to show it again. You are trying to make an AJAX 
>> call to update it's contents every second, but the element would still 
>> be hidden. Is that what you intended?
> I would try to spend clearly what I´m trying to do, because I thing that 
> sometimes I´m not explaining well. That I want to do is:
> 1- I have a program that takes a picture from a camera every 700ms.
> 2- Those images are save at \public\guarrada\Debug
> 3- I want to show that images that I take every second in the webpage
> 4- I want that the serie of images seems like a video.For that purpose I 
> want to change the latest image only when it were fully loaded, because 
> if I don´t do that the video have a white line continuos moving on the 
> image doing like a blind.
> 
> I think I expressed it well this time, but if you have any question do 
> that.

I think you're going to have a lot of problem with this approach. I 
would not attempt to use JavaScript to flood the DOM with a bunch of 
images. This might work for a minute or two, but is going to look very 
much like a huge memory leak in the browser. It might work until you 
fill up the machines memory, but you'll most likely, and soon, crash the 
browser.

Instead convert your image sequence in to "real" movie clips and let 
that play in the browser using a proper plugin.

I didn't look at the very thoroughly, but this is a much better 
approach:
http://electron.mit.edu/~gsteele/ffmpeg/

Hello:
> I didn't look at the very thoroughly, but this is a much better 
> approach:
> http://electron.mit.edu/~gsteele/ffmpeg/

Thanks for the link. This link could be very useful for other reserch 
that I´m done, but I think that not for this one I´m doing now, because 
my intention it´s to see tha camera images live(not live at all, but 
with 2 or 3 seconds of delay). My idea is see tha "video" directly in 
the webpage. Do you know if with other programming lenguage could be 
possible.

THANKS!!!

Guille San wrote:
> Hello:
>> I didn't look at the very thoroughly, but this is a much better 
>> approach:
>> http://electron.mit.edu/~gsteele/ffmpeg/
> 
> Thanks for the link. This link could be very useful for other reserch 
> that I´m done, but I think that not for this one I´m doing now, because 
> my intention it´s to see tha camera images live(not live at all, but 
> with 2 or 3 seconds of delay). My idea is see tha "video" directly in 
> the webpage. Do you know if with other programming lenguage could be 
> possible.

The language we're talking about here is JavaScript. The server-side 
language has nothing to do with this. I'm not exactly an expert on this, 
but I just have a feeling that attempting to push an image into the DOM 
every half second, or even every full second, will create a lot of 
problems for the browsers. I think it will look to the browser as if it 
were a constant stream of data flowing into the page and it will 
probably just keep consuming system resources with every new image.

I could be wrong, but from past experience I don't believe you'll get 
satisfactory results with this approach. If you continue with this 
design you'll need to monitor the system resource usage of various 
browsers to see how they behave.