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
Hi I only have one question more. How can I do this example with prototype:
Example in jQuery
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
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(); })
Isn't that what prototype's dom:loaded event does (http:// www.prototypejs.org/api/document/observe )
Fred
Frederick Cheung 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.
