If the viewport_scroll_offsets are not 0 (the page is scrolled down/right), the container positions are not assigned correctly. This only happens with right clicks, left clicks work as expected. I have experienced this problem with Firefox 3 and Safari 4.
Event.pointerY does not return the expected result for a right clicks as described in the API (Prototype 1.6.0.3).

My quick workaround in contextmenu.js:

Object.extend(Control.ContextMenu,{
    <...>
    positionContainer: function(event){
        var dimensions = Control.ContextMenu.container.getDimensions();
        var top = Event.pointerY(event);
        var left = Event.pointerX(event);
        var bottom = dimensions.height + top;
        var right = dimensions.width + left;
        var viewport_dimensions = document.viewport.getDimensions();
        var viewport_scroll_offsets = document.viewport.getScrollOffsets();
        // add offset if there is a right click
        if(event.isRightClick()) {
        top += viewport_scroll_offsets.top;
        left += viewport_scroll_offsets.left;
    }
        if(bottom > viewport_dimensions.height + viewport_scroll_offsets.top) {
            top -= bottom - ((viewport_dimensions.height  + viewport_scroll_offsets.top) - Control.ContextMenu.offset); }
        if(right > viewport_dimensions.width + viewport_scroll_offsets.left) {
            left -= right - ((viewport_dimensions.width + viewport_scroll_offsets.left) - Control.ContextMenu.offset); }
            Control.ContextMenu.container.setStyle({
                top: top + 'px',
                left: left + 'px'
            });
        }
});

Window.js line 619

Was working on something where I needed to submit a form to the iframe in the window and had to add a 'name' attribute to the iframe.

Previous

iframeTemplate: new Template('<iframe src="#{href}" width="100%" height="100%" frameborder="0"></iframe>'),

New

iframeTemplate: new Template('<iframe src="#{href}" name="modal-window-iframe" width="100%" height="100%" frameborder="0"></iframe>'),

This a fix suggestion for window.js line 788 to 796.

It takes the Max height for either the document or browser window and sets that as the overlay height so it always covers all the content.

//IE only
positionOverlay: function(){
    var h = Math.max( document.documentElement.clientHeight, document.body.clientHeight ) + 'px';
    var w = Math.max( document.documentElement.clientWidth, document.body.clientWidth ) + 'px';

    Control.Overlay.container.setStyle({
        width: w,
        height: h
    });
}

Hi,

I am using your Control.Scrollbar in this page (still in development): http://www.latinoimmigrantstories.org/stories.php

IE 7 and 8 returns this error on page load:
Error: 'null' is null or not an object

and it referencing this:

$('scroll_down_50').observe('click',function(event){
    scrollbar.scrollBy(-50);
    event.stop();
});

Is there another step in my file that I'm missing?

Thank you for the wonderful scrollbar!

Lisa

Hello. I'm trying to move from the old Control.Model to the new Control.Window and i'm having troubles with simple windows that I want to open dinamically.

The following example only works when "fade: true" is on the options:

<a href="#" onClick="openMyWindow('http://www.google.com');">Click to
open Google in an Iframe</a>
<a href="#" id="dummyA" />
<script>
     function openMyWindow(url) {
   $('dummyA').href = url;
   var myWindow = new Control.Window($('dummyA'),{
       className: 'simple_window',
       closeOnClick: true,
       fade: true,  // ths is the line, but I don't want to fade!
       iframe: true
   });
   myWindow.open();
 }
</script>

Also, once opened with fade, it takes several clicks to close it. This did not happen before with Control.Modal.

How can I solve it? Thanks!

Jose.

Around line 291 of window.js there is this line in the open function:

if(this.href.match(/\.(jpe?g|gif|png|tiff?)$/i)){

The problem with this is if you have the href of the source container that has a query string. The query string should not count when determining if the link is to an image. This especially fails if the query string ends with .gif, .jpeg, or .tiff.

here is an example that fails:

href=/admin/products/tagcontent?url=images%2F30.gif

Control.Window thinks the above is a link to an image when it is actually a link to a dynamic script.

A simple fix is to change the above javascript code to:

var hrefCheck = this.href.replace(/\?(.)*$/,'');
if(hrefCheck.match(/\.(jpe?g|gif|png|tiff?)$/i)){

Is that well known problem the IE8 leads the bug missing show the close panel with respect to Control.Window's window_factory function used? That because I still could not close the "Draggable / Styled Window One" example on IE8 which is at Livepipe window control demo page.

Thank you.

When the afterChange handler submits a form via javascript, the following race-condition can occur:

1) A user clicks on one tab, the form is submitted.
2) The user clicks on another tab while the reload is in progress.

When clicking the second link, Firefox will notice, that the URL of the window has changed, but a link to local anchor is clicked. In order to follow the link to the local anchor, it performs a reload of the page before the form submit.
No form data is submitted in this case.

The fix is to remove the href from the tab-links after the control has been initialized.

Patch at http://gist.github.com/217037

Positioning of modal window works smoothly in Safari (window position is just fixed).
In Firefox modal window shakes if I use scrolling, which looks ugly.

When a browser scrollbar exists and a modal is popped-up, the background window can scroll and it moves the modal in a jerky fashion. I would prefer the modal to stay put where it was created as per the "Draggable / Styled Window One".

Also, if the browser scrollbar exists, and a modal is popped-up that also has a scrollbar, when the modal is scrolled to the bottom, the background window starts scrolling to the bottom as well.

There is a known bug with IE7 where absolute positioned elements that don't have a width specified can trigger it to display a horizontal scrollbar even though it is unnecessary.

The IFrame Shim that livepipe uses seems to trigger this bug mostly in cases where the shim is shown before it is given position. There were 2 places that were giving me problems with Control.Modal.

The first was with the overlay. The positionIFrameShim function of Control.Overlay looks like:

positionIFrameShim: function(){
if(Control.Overlay.container.visible())
    Control.Overlay.iFrameShim.positionUnder(Control.Overlay.container);
}

The problem is that on the first time the overlay is shown, this position function is called before the overlay is made visible and thus the positionUnder function of the IFrameShim class is not called. In IE7 this can trigger the scrollbar bug. I commented out the if statement but there is probably a more suitable solution.

The second place I encountered a problem was with the actual modal window itself. A scrollbar would appear momentarily and then go away. The updateIFrameShimZIndex function is being called twice when the window first opens and you are using the fade option.

The finishOpen function starts the fade effect which calls updateIFrameShimZIndex on completion. The finishOpen function calls the position function after it starts the effect however. It is unlikely but the effect could finish before position is called, thus triggering the scrollbar bug because the position of the iframe is set to the undefined position of the window. I thus moved the call to position up to the top of the finishOpen call so we know the window has been positioned before showing it.

The end of the position function also calls updateIFrameShimZIndex though. Strangely, when this is called and the window is not actually visible yet, the IE7 bug is triggered even though the element has in fact been positioned. I thus changed the end of the position function to read:

if(this.iFrameShim && this.isOpen)
this.updateIFrameShimZIndex();

This ensures the window is open before trying to position the shim.

I have a Control.Window exactly like the Centered Window / Content on Page example on livepipe.net. In IE6, the code fails to find the div with the content and so ends up creating a blank hidden window. The problem lies in this line of window.js:

var rel = this.href.match(/^#(.+)$/);

in Control.Window.initialize

In IE6, the line before it

this.href = this.container.readAttribute('href');

returns the full url of the associated A tag - not just the part in the href='#..' attribute.

So

this.href = <host url....>/<href part>

not

this.href = <href part>

and so the match fails

I changed the match line to

var rel = this.href.match(/^.*#(.+)$/);

and that should cover all the bases no matter what browser is in use

This code only function in Firefox. My
purpose is put modal in all "a":

$$('a').each(function(e){ 
     new Control.Modal(e.id,{  
        overlayOpacity: 0.75,  
        className: 'modal', 
        fade: true
    });     
});

This may be an edge case. It likely is, but I figured I'd bounce it off of you livepipe-ui devs to see if you've ever seen this.

I'm using Control.Slider to on a div whose contents are regularly replaced via Ajax responses. On the initial page load, this area is empty. The page initiates an Ajax request to render the contents of the page, then I'm calling recalculateLayout() on the Control.Slider. It seems that here:

http://github.com/syntacticx/livepipe-ui/blob/df8bca401514dd7ad8244988feaff5499bc2afe3/src/scrollbar.js#L77

in my case, the slider reports maximumOffset/minimumOffset of 0. Everything starts out fine:

http://www.capndiesel.com/c35e9c1290aa480879238df33a131daf.png

The resulting behavior is that, when scrolled down, the content moves as expected but the track looks like:

http://www.capndiesel.com/f9344fbb882a6e5d3a805c5a7f745d44.png

when it should really look like:

http://www.capndiesel.com/1129ece2fc3d13e4015de3bd76f99b3a.png

I apologize for the use of screenshots and words here. I'm not convinced that this isn't an edge case that I should be dealing with on my own, but here's my hack:

http://gist.github.com/167990

I'm open to fixing this in a way that's consistent with livepipe, I just haven't got the familiarity with the library :-D

Allow LivePipe UI to be installed via a rails plugin. Should also check assets already in javascripts folder so nothing is overwritten.

I noticed that when using Control.Tabs, when you go from one tab to another it doesn't change the anchor in the URL. This breaks the back/forward buttons and means that you don't store which tab you're at when you bookmark.

I wasn't sure if this was a deliberate design decision, but since I was making the change in my own copy anyway I figured it would be nice to contribute a patch.

(patch at http://gist.github.com/217032)

It shows as:

rightright:0

The code here is actually OK; it seems to be an issue with the syntax highlighting script.

Tonypm wrote on 11/2/09:

ps. the livepipe web site is great, it would benefit from a couple
of paragraphs detailing getting an example working from scratch.

If closing a Control.Modal triggers a resize event the IframeShim object of the contained Control.Overlay does not get properly hidden.

I believe this is the same bug mentioned here: http://groups.google.com/group/livepipe-ui-users/browse_thread/thread/4090201ac619518/5fb4bad4cec3a118?lnk=gst&q=ie8+shim#5fb4bad4cec3a118

The issue can be fixed by moving the call to Control.Overlay.iFrameShim.hide.

Patch:

--- C:/Documents and Settings/Peter Swan/My Documents/MBLM/livepipe/src/window.orig.js  Mon Nov 16 14:19:14 2009
+++ C:/Documents and Settings/Peter Swan/My Documents/MBLM/livepipe/src/window.git.js   Mon Nov 16 14:40:02 2009
@@ -761,7 +761,6 @@
             return false;
         if(Control.Overlay.effects.appear)
             Control.Overlay.effects.appear.cancel();
-        Control.Overlay.iFrameShim.hide();
         if(fade){
             Control.Overlay.effects.fade = new Effect.Fade(Control.Overlay.container,{
                 queue: {
@@ -769,6 +768,7 @@
                     scope: 'Control.Overlay'
                 },
                 afterFinish: function(){
+                    Control.Overlay.iFrameShim.hide();
                     Control.Overlay.notify('afterHide');
                 },
                 from: Control.Overlay.lastOpacity,
@@ -777,6 +777,7 @@
             });
         }else{
             Control.Overlay.container.hide();
+            Control.Overlay.iFrameShim.hide();
             Control.Overlay.notify('afterHide');
         }
         return true;

For my website I use the tag in the HTML. The Tabs does not function. That means the content of all tabs is presented on the page.
When I omit the base tag, the Tabs function well.
But I need the the base-tag.

Sorry to post this as an issue but this looks like the only section with activity.

Has anyone managed to modify the ScrollBar.js code to allow for horizontal & vertical scrolling?

A sensitivity option should be added to Control.ScrollBar.

I already updated my code to try this out, the default sensitivity option would be 0.8:

onMouseWheel: function(event){
  if(this.auto_sliding_executer)
      this.auto_sliding_executer.stop();
  this.slider.setValueBy(-(event.memo.delta / 20)); //put in math to account for the window height
  event.stop();
  return false;
},

Becomes:

onMouseWheel: function(event){
  if(this.auto_sliding_executer)
      this.auto_sliding_executer.stop();
  this.slider.setValueBy(-(event.memo.delta / (100 - (this.options.sensitivity * 100)))); //put in math to account for the window height
  event.stop();
  return false;
},

I updated my particular scroll area to have a sensitivity of 0.88.

The obvious issue with my above solution, is that the calculation in onMouseWheel is exponential but the sensitivity options I've added implies a linear scale (from 0.0 to 1).

Hi, I am trying to open a modal window with embedded tabs (using Control.Tabs) from more than one link on the page (each link opens the window then switches to the appropriate tab - in theory anyway). My problem is, I can not get Control.Modal to respond to more than one link on the page. I have tried ti usual Prototype methods (for example, triggers are a.link-cp in the document):
new Control.Modal($$('a.link-cp'),{options});
new Control.Modal($(document.body).select('a.link-cp'),{options});

I did manage to get Control.Modal($(document.body).down('[class~=link=cp]'),{options}); to work, but ONLY on the first link with the class of "link-cp".

Is this not something that is possible? Do I need to loop and set new instances for each link on the page?

Thank you,
Jamie Peloquin

Hi,
using the git version of today of the Rating script i've found that error.
In that way does not work

var rating_sys = new Control.Rating('voteSystem',{

input: "vote",
multiple: true,
value: 4

});

In that way works

var rating_sys = new Control.Rating('voteSystem',{

input: "vote",
multiple: true

}); rating_sys.setValue(4);

Now you can fix it :)
Great work,
thanks