0

Caja issue: window.scroll() not working

The below code does not work when I'm trying to call window.scroll():

CODE
<script>
function pageScroll() {
document.getElementById('debug').innerHTML += '<div>scrolling...</div>';
window.scrollBy(0,50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}

function initCanvas() {
document.getElementById('debug').innerHTML += '<div>about to scroll</div>';
window.scroll(0,200);
document.getElementById('debug').innerHTML += '<div>finished scrolling</div>';
document.getElementById('debug').innerHTML += '<div>now try timed scrolling</div>';
pageScroll();
}

gadgets.util.registerOnLoadHandler(initCanvas);

</script>
<!-- VIEW Content -->
<div style="text-align:left;margin: 0px 10px 10px 5px; padding: 4px; font-size: 12px;">
<p style="font-size: 10pt;">Millions of cats and kittens are abandoned to shelters. These innocent pets are hungry, overcrowded, and often given only a few months to live before being euthanized.
We've set up a quick and easy way for you to help them.
</p>
<p>
Simply add one of the pictures of the beautiful shelter cats below to your profile, and then <b>click on them whenever you have a few minutes</b>.
You'll be taken to a <a href="http://www.experienceproject.com/savecats/" target="_blank">fun trivia game</a> where <b>every right answer feeds a shelter cat one kibble of food</b>. By putting it on your profile, you're raising awareness about these
cats and encouraging your friends to help feed them too!
</p>
<p>
To find more pet lovers, please visit <a href="http://www.experienceproject.com" target="_blank">Experience Project</a>.
</p>
</div>
<div id="pet_chosen"></div>
<div id="debug"></div>
<div style="text-align:center;">
<form id="pet_form" name="pet_form">
<div id="pet_choices"></div>
</form>
</div>


Here is the error I'm getting in firebug:

[Exception... "'TypeError: callMethod: [object Object] has no method scroll' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001c (NS_ERROR_XPC_JS_THREW_JS_OBJECT)" location: "<unknown>" data: no]
getXY()()combo?2....on-min.js (line 9)
getXY()([ proto___=Object concat_grantCall___=true], "click", function())combo?2....on-min.js (line 8)
getXY()(undefined, undefined, undefined, undefined, undefined)combo?2....on-min.js (line 8)
art()()combo?/c...v6nPA-.js (line 2)
art()()combo?/c...v6nPA-.js (line 2)
getXY()()combo?2....on-min.js (line 8)
getXY()(DOMContentLoaded )combo?2....on-min.js (line 9)
[Break on this error] },getXY:function(K){return[this.getPageX...U=YAHOO.util.Event;EU.on=EU.addListen
er;

by
1 Reply
  • I ran the code you posted and it looks like caja is preventing scroll access to the sanitized window object. This doesn't appear to be in the caja limitation documentation so I'm not fully sure why they did that...it could be that the feature just wasn't allowed because there was no apparent reason to. In your application, when you call elements like document or window, you're actually accessing a sanitized version of the DOM for your application and not the actual DOM itself (this is how it makes the application secure). Of course, we sometimes run into issues like this. I can't find an OpenSocial gadgets.window method that will mimic this functionality but there might be an alternative. What are you planning on doing with the scroll features? There might be a way we can mimic the same behavior another way.

    Jonathan LeBlanc
    Senior Software Engineer
    Yahoo! Developer Network
    0
  • Hi Jon,

    Thanks for the reply, your posts are always very helpful and informative. I have a page with a form that is pretty long, and when the user selects an item I am using window.scroll() to bring the user to the top of the page and then show them a status message. My app is actually very simple, here's a realworld example for our opensocial app on myspace.

    1.) on the canvas page there is a gallery of pictures with a bunch of cute dogs or cats, each pic has a button under it.
    2.) a user selects one of the pictures to put on his/her profile by clicking the button.
    3.) once button is clicked the window scrolls to the top to tell user the picture has been set to his/her profile (aka. smallView) along with any other status messages.

    Thanks,
    Dolamite

    QUOTE (Jon @ Feb 11 2009, 03:57 PM) <{POST_SNAPBACK}>
    I ran the code you posted and it looks like caja is preventing scroll access to the sanitized window object. This doesn't appear to be in the caja limitation documentation so I'm not fully sure why they did that...it could be that the feature just wasn't allowed because there was no apparent reason to. In your application, when you call elements like document or window, you're actually accessing a sanitized version of the DOM for your application and not the actual DOM itself (this is how it makes the application secure). Of course, we sometimes run into issues like this. I can't find an OpenSocial gadgets.window method that will mimic this functionality but there might be an alternative. What are you planning on doing with the scroll features? There might be a way we can mimic the same behavior another way.

    Jonathan LeBlanc
    Senior Software Engineer
    Yahoo! Developer Network
    0
  • Glad to help Dolamite, and I just wanted to say that I really like your app idea. All of my pets have come from shelters so it's nice to see a support app like this.

    Now, about the issue at hand, I've run through several different methods to accomplish what you are trying to do and I unfortunately ran into the same roadblock that you are seeing. For some reason the implementation of Caja on YAP is preventing access to any scroll or focus type methods. The only thing that I could think of would be a straightforward <a> bookmark...but I don't think that will work in your case. The other option would be a refresh of the page, but that's a slightly poor user experience.

    I'm going to file a platform bug with regards to auto navigation within the app. If there is some security concern I'm not thinking of it might get killed off, but I'll try anyways.

    For now, you might want to try wrapping an image in a normal <a> tag to solve the issue...like so:
    <a href="#bookmarkToTop" onclick="pageScroll();"><img src="..." ... /></a>

    If the content is coming back from an ajax request you may need to apply the onclick event after it returns, like we talked about in a previous post.

    That should work, and if not we'll keep trying.
    - Jon

    QUOTE (DolamiteM @ Feb 12 2009, 11:47 AM) <{POST_SNAPBACK}>
    Hi Jon,

    Thanks for the reply, your posts are always very helpful and informative. I have a page with a form that is pretty long, and when the user selects an item I am using window.scroll() to bring the user to the top of the page and then show them a status message. My app is actually very simple, here's a realworld example for our opensocial app on myspace.

    1.) on the canvas page there is a gallery of pictures with a bunch of cute dogs or cats, each pic has a button under it.
    2.) a user selects one of the pictures to put on his/her profile by clicking the button.
    3.) once button is clicked the window scrolls to the top to tell user the picture has been set to his/her profile (aka. smallView) along with any other status messages.

    Thanks,
    Dolamite
    0

Recent Posts

in YAP