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 S. 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.”
This should get hidden
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.
This should get shown later
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!!
Guille S. 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:
<%=image_tag("/guarrada/Debug/foto.jpg") %>
$(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
On Wed, Mar 10, 2010 at 7:33 AM, Guille S. [email protected]
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 S. ------------------------ [email protected]
twitter: @hassan
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:
<%=image_tag("/guarrada/Debug/foto.jpg") %>
Event.onDOMReady(function() {
$('imagen').show();
})
On Mar 10, 3:51 pm, Robert W. [email protected] 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://
Prototype API Documentation | document.observe (Deprecated URL) )
Fred
Frederick C. wrote:
On Mar 10, 3:51�pm, Robert W. [email protected] 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://
Prototype API Documentation | document.observe (Deprecated URL) )
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??
<%=image_tag("/guarrada/Debug/foto.jpg") %>
Robert W. wrote:
Guille S. wrote:
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><%=image_tag("/guarrada/Debug/foto.jpg") %>
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?
Guille S. wrote:
Hi everyone:
I probe to use the function that Frederick says, but it doesn´t work
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');
because mi image don´t load the new periodical image. Where I´m doing
something wrong??
This is what you’re saying, “Search using CSS selector ‘imagen’ for all
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><%=image_tag("/guarrada/Debug/foto.jpg") %>
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 section:
This one line will include the necessary Prototype JavaScript files, and
also include public/javascripts/application.js for you.
Guille S. 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/
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 S. 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.
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!!!