Adding refresh button to URLWindow replied by biegun @ Wed, 11 Jun 2008 20:25:28 -0000

biegun — Wed, 11 Jun 2008 20:25:28 -0000

and what about refresh button to UI.Window which content is set by setAjaxContent?
i tried to add adress to refresh to in definition of button

    .addButton('refresh', refreshWindow(...))

but i receive error message:

this.setAjaxContent is not a function
refreshWindow()~sbak (line 219)
app_windows()~sbak (line 57)
wrapper(load )prototype.js (line 3877)
[Break on this error] this.setAjaxContent('sites/header.html');

is there sth like this.iframe.contentWindow.location.href stored for AjaxContent?

//i’ve done it in a little different way- when i load from database adress of website to use in setAjaxContent, i save it to the array and re-use in refreshWindow. – it’s rather ‘back’ then ‘refresh’ now.

Adding refresh button to URLWindow replied by nrasch @ Fri, 07 Dec 2007 03:00:07 -0000

nrasch — Fri, 07 Dec 2007 03:00:07 -0000

Refresh and Back Buttons using Prototype-UI URLWindow

Prototype-UI uses iframes for the URLWindow class. When making custom refresh or back buttons, it is important to remember that you are restricted to working with pages that come from within your local site. If you try to access the URL location of a iframe pointing to something outside your site, you get an access denied error in many cases. Most browsers impliment this on purpose to prevent cross site scripting attacks.

Below are the custom extensions to the URLWindow class I used to test with:


// Custom Extensions to Prototype-UI
UI.URLWindow.addMethods({
    refreshWindow: function() {
        this.setUrl(this.iframe.contentWindow.location.href);
    },

    goBack: function() {
        var frameName = this.element.id + "_frame";
        frames[frameName].history.back();
    }
});

I then tested this code against an iframe pointing to a url contained within my local site. The results of testing is as follows:

Safari: iframe back -> Broken
Firefox: iframe back -> Works
Opera: iframe back -> Works
IE7: iframe back -> Works

Safari: iframe refresh current url location -> Works
Firefox: iframe refresh current url location -> Works
Opera: iframe refresh current url location -> Works
IE7: iframe refresh current url location -> Works

Adding refresh button to URLWindow replied by nrasch @ Thu, 06 Dec 2007 06:46:57 -0000

nrasch — Thu, 06 Dec 2007 06:46:57 -0000

Overview

As part of my Prototype-UI testing I wanted to add a ‘refresh’ button to my URLWindows. This briefly explains how I went about it, and the results.

Assumptions

I’m using Rails on a Windows box for testing, and I’m using the ‘bluelighting’ window style.

Adding the button graphic

Open ‘buttons-blue.gif’
Add 40 px to the bottom of the image’s canvas
Copy the non hover and hover versions of your refresh icon into the bottom 40 px of space
Save your modified ‘buttons-blue.gif’ file

Modifying the css

Open ‘lighting.css’
Around line 114 (just below the minimize style) add the following:


/*CHANGE FOR REFRESH*/
.bluelighting .buttons a.refresh {
  float:left;
    background:transparent url(/themes/window/lighting/buttons-blue_rev1.gif) no-repeat 0 -120px;
    height:20px;
    width:21px;
}

.bluelighting .buttons a.refresh:hover {
    background:transparent url(/themes/window/lighting/buttons-blue_rev1.gif) no-repeat 0 -140px;
}  
/*END CHANGE FOR REFRESH*/

Note: Please note the -120px and -140px offset. This utilizes the 40 px of space you added to the ‘buttons-blue.gif’ above. Also note I renamed my gif to ‘buttons-blue_rev1.gif’.

Adding the button to the URLWindow

Create a window object
Include the method call ‘addButton(‘refresh’, ‘refreshWindow’)’ into the create window command chain

Example:


myWin = new UI.URLWindow( { id: 'myWin', url: 'http://www.google.com' } ).setHeader('myWin Example').addButton('refresh').show();

Extend the UI.URLWindow class to include the following method:


    refreshWindow: function() {
        this.setUrl(this.iframe.src);
    }

Save everything, load up a URLWindow, and hit your spiffy new refresh button. :)

Gotchas

From the class source code there does seem to be a way to order the buttons using the ‘padding-top’ value as the order index and calling the function ‘updateButtonsOrder’. However, at this time, I can’t seem to get it to work….
If you create a smaller window (:width => 200, :height => 200), set a long title, and add a custom button your title will ‘spill over’ into the first button’s space on the title bar….

Thanks!
Nathan

Recent Posts in 'Adding refresh button to URLWindow' | Prototype UI

Adding refresh button to URLWindow replied by biegun @ Wed, 11 Jun 2008 20:25:28 -0000

Adding refresh button to URLWindow replied by nrasch @ Fri, 07 Dec 2007 03:00:07 -0000

Adding refresh button to URLWindow replied by nrasch @ Thu, 06 Dec 2007 06:46:57 -0000