Bug in vertical align action

I found a bug in the vertical align action, when used together with horizontal page centering:

It tries to remove the “height” parameter from the pageDiv tag to work with Safari. But the pageDiv tag in my FW 5 output has only a “min-height” parameter. That leaves to an invalid “min-” parameter.

I simply commented out the following line in the action:

// pageDiv.style = RemoveStyleParameter(pageDiv.style,”height”); // Height stuffs up Safari (applied if page horizontally aligned as well)…

Now it works together with center page aligning. The min-height parameter doesn’t seem to stuff up Safari.

There is still an issue with layered item. To do proper vertical aligning it needs at least one non layered item at the bottom of the layout. What it does is to place a table within the PageDiv tag thus preventing the height of the PageDiv to collapse.

To work on layered items without the help of this non-layered item, the min-height parameter of the PageDiv tag has to be replaced with the height parameter set to the absolute height of the PageDiv.

To calculate the height of the PageDiv currently I only can iterate through all div tags enclosed by the PageDiv to look for the top and height parameters. If anyone knows an easier way to calculate the height, please drop a line.

Peter

quote

Thanks Peter, I’ll get that logged.

Joe

On 9 Sep 2008, at 12:08, Peter Gutbrod wrote:

I found a bug in the vertical align action, when used together with horizontal page centering:

It tries to remove the “height” parameter from the pageDiv tag to work with Safari. But the pageDiv tag in my FW 5 output has only a “min-height” parameter. That leaves to an invalid “min-” parameter.

I simply commented out the following line in the action:

// pageDiv.style = RemoveStyleParameter(pageDiv.style,”height”); // Height stuffs up Safari (applied if page horizontally aligned as well)…

Now it works together with center page aligning. The min-height parameter doesn’t seem to stuff up Safari.

There is still an issue with layered item. To do proper vertical aligning it needs at least one non layered item at the bottom of the layout. What it does is to place a table within the PageDiv tag thus preventing the height of the PageDiv to collapse.

To work on layered items without the help of this non-layered item, the min-height parameter of the PageDiv tag has to be replaced with the height parameter set to the absolute height of the PageDiv.

To calculate the height of the PageDiv currently I only can iterate through all div tags enclosed by the PageDiv to look for the top and height parameters. If anyone knows an easier way to calculate the height, please drop a line.

Peter

quote

Hi Joe,

I fixed the issue with the layered items as well.

Shall I post the source-code, so others can give it try?

Peter

quote

Sure, thanks.

Joe

On 9 Sep 2008, at 13:25, Peter Gutbrod wrote:

Hi Joe,

I fixed the issue with the layered items as well.

Shall I post the source-code, so others can give it try?

Peter

quote

Joe,

what is the tag to mark code when posting to this board?

Or probably more convenient for other’s to try: Is there a repository to upload the patched action and just post a link?

Peter

quote

You need to use 4 spaces before each line.

Joe

On 11 Sep 2008, at 08:03, Peter Gutbrod wrote:

Joe,

what is the tag to mark code when posting to this board?

Or probably more convenient for other’s to try: Is there a repository to upload the patched action and just post a link?

Peter

quote

On 11 Sep 2008, 8:27 am, Joe Billings wrote:

You need to use 4 spaces before each line.

Joe

OK so here comes the source:

 <page-action name="Vertical Alignment" title="Vertical Alignment">
<action-version version="2.2 beta">
'Vertical Align' Action
Softpress Systems Limited 1999-2006
Patched by Peter Gutbrod 09.09.08
</action-version>
<action-popup name="Vertical Align">
<value name="Top" value="top" default/>
<value name="Centre" value="center"/>
<value name="Bottom" value="bottom"/>
</action-popup>
<action-javascript>

var gPageHasLayers = pageHasLayers();


// Gets a "CSS" attribute such as "position:absolute" from a tag value
// returns NULL if the attribute can not be found
function GetCSSAttribute(tag, fieldName, attributeName)
{
    if (tag==null)
        return null;
    var tagField = tag[fieldName];
    if (tagField == null)
        return null;
    else
    {
        var tagField = tagField.toString();
        var leftPos = tagField.indexOf(attributeName+":");
        if (leftPos > 1)
            leftPos = tagField.indexOf(" "+attributeName+":") + 1;
        if (leftPos > 0)
        {
            leftPos += attributeName.length+1;
            var rightPos = tagField.indexOf(";", leftPos);
            if (rightPos == -1)
                rightPos = tagField.length-1;
            return tagField.slice(leftPos, rightPos);
        }
        return null;
    }
}


function pageHasLayers()
{
    var bLayers = false;
    var item;
    for(var i in fwPage.fwItems){
        item = fwPage.fwItems[i];
        if(item.fwIsPublished && item.fwIsLayer && item.fwTitle != "PageDiv"){
            bLayers = true;
            break;
        }
    }

    return bLayers;
}

function getActualPageHeight()
{
    var height=0;
    if(fwPage.fwItems.fwLength > 0){
        var bottom = fwPage.fwItems[0].fwBottom;

        var item;
        for(var i in fwPage.fwItems){
            item = fwPage.fwItems[i];
            if(item.fwIsPublished)
                bottom = item.fwBottom > bottom ? item.fwBottom : bottom;
        }

        height = bottom;
    }

    return height;
}

function findPageDiv()
{
    var divTags = fwDocument.fwTags.fwFindAll("div");
    var divId;
    for(var i in divTags){
        if(divTags[i].id == '"PageDiv"')
            return divTags[i];
    }

    return null;
}

function SetStyleParameter(style, para, value)
{
    var styleStr = style ? style.toString() : "";
    styleStr = styleStr ? styleStr.substring(styleStr.indexOf('"') + 1, styleStr.lastIndexOf('"')) : "";

    var startIndex = styleStr.indexOf(para);

    if (startIndex == -1)
    {
        var index = styleStr.lastIndexOf(";");

        if (index == -1)
            return '"' + para + ":" + value + ";" + styleStr + '"';

        var newStyle = styleStr.substring(0, index + 1);
        newStyle += para + ":" + value + ";";
        newStyle += styleStr.substring(index + 1, styleStr.length);

        return '"' + newStyle + '"';
    }

    startIndex += para.length;

    var newStyle = styleStr.substring(0, startIndex);
    newStyle += ":" + value + ";";

    var endIndex = styleStr.indexOf(";", startIndex);

    if (endIndex != -1)
        newStyle += styleStr.substring(endIndex + 1, styleStr.length);

    return '"' + newStyle + '"';
}

function RemoveStyleParameter(style, para)
{
    var styleStr = style ? style.toString() : "";
    styleStr = styleStr ? styleStr.substring(styleStr.indexOf('"') + 1, styleStr.lastIndexOf('"')) : "";

    var startIndex = styleStr.indexOf(para);

    if (startIndex == -1)
        return style;

    var newStyle = styleStr.substring(0, startIndex);
    var endIndex = styleStr.indexOf(";", startIndex);

    if (endIndex != -1)
        newStyle += styleStr.substring(endIndex + 1, styleStr.length);

    return '"' + newStyle + '"';
}

function fwAfterStartBody()
{
    if(!gPageHasLayers){
        var bodyTag = fwDocument.fwTags.fwFind("body");
        if(bodyTag){
            var align = fwParameters["Vertical Align"];
            if(fwPage.fwHTMLLevel > 1){
                if(align == "center")
                    align = "middle";

                // Need to make the body 100% height for IE's benefit...
                bodyTag.style = SetStyleParameter(bodyTag.style,"height","100%");
                bodyTag.style = SetStyleParameter(bodyTag.style,"margin","0px");

                bodyTag.fwAddRawOpt('<div style="position:absolute;height:100%;width:100%;"><table style="position:absolute;height:100%;width:100%;border:0px;"><tr><td valign="' + align + '">');
            }
            else{
                bodyTag.fwAddRawOpt('<table width="99%" height="100%"><tr><td valign=' + align + '>');
            }
        }
    }
}

function fwBeforeEndBody()
{
    if(!gPageHasLayers){
        var bodyTag = fwDocument.fwTags.fwFind("body");
        if(bodyTag){
            bodyTag.fwAddRawOpt('</td></tr></table>');
            if(fwPage.fwHTMLLevel > 1){
                bodyTag.fwAddRawOpt('<div>');

                 var pageDiv = findPageDiv();
                 if(pageDiv){
                    var divTags = pageDiv.fwFindAll("div");

                    var pageTop = 100000;
                    var pageBottom = 0;
                    for(var i in divTags){
                        var divTop = parseInt (GetCSSAttribute(divTags[i], "style" , "top"));
                        var divHeight = parseInt (GetCSSAttribute(divTags[i], "style" , "height"));

                        pageTop = divTop < pageTop ? divTop : pageTop;
                        pageBottom = (divTop + divHeight) > pageBottom ? (divTop + divHeight) : pageBottom;

                    }
                    var pageHeight = (pageBottom - pageTop)+'px';

                    pageDiv.style = RemoveStyleParameter(pageDiv.style,"min-height");
                    pageDiv.style = SetStyleParameter(pageDiv.style,"height",pageHeight);
                }
            }
        }
    }
}

function fwBeforeEndHTML()
{
    if(gPageHasLayers)
    {
        var align = fwParameters["Vertical Align"];

        if(fwPage.fwHTMLLevel > 1){ // 4.01 and XHTML
            if(align == "center" || align == "bottom"){
                var body = fwDocument.fwTags.fwFind("body");
                if(body){
                    var pageDiv = fwDocument.fwTags.fwFind("div");

                    if(pageDiv){
                        var divContent = pageDiv.fwAddEnclosing("div",true);
                        var divOuter = divContent.fwAddEnclosing("div",true);

                        var height = getActualPageHeight() + 1;

                        if(align == "center"){
                            divOuter.style = '"background-color:transparent;position:absolute;top:50%;left:0px;width:100%;height:1px;display:block;"';
                            divContent.style = '"position:absolute;visibility:visible;height:' + height + 'px;top:' + (-height/2) + 'px;width:100%;"';
                        }
                        else{   // bottom
                            divOuter.style = '"background-color:transparent;position:absolute;bottom:0px;left:0px;width:100%;height:1px;display:block;"';
                            divContent.style = '"position:absolute;visibility:visible;height:' + height + 'px;top:' + (-height) + 'px;width:100%;"';
                            divContent.style = '"position:absolute;visibility:visible;height:' + height + 'px;bottom:0px;width:100%;"';
                        }
                    }
                }
            }
        }
    }
}
</action-javascript>
<page-action>

quote

Hmm, the parser seems to have its problems, even with the 4 spaces thing.

Peter

quote

The formatter does its best, but for something this long and involved, you might want to use Pastie: http://pastie.org

Walter

On Sep 11, 2008, at 8:30 AM, Peter Gutbrod wrote:

Hmm, the parser seems to have its problems, even with the 4 spaces thing.

Peter

quote

I have just done a small update to a site last fiddled with in FW4 and couldn’t understand why some of my Vertically Aligned pages were giving me grief. Until I found this thread of course and Peter’s version has done the trick for me.

But be careful as the last line

<page-action>

should read

</ page-action>

But with no space between the ‘/’ and ‘page-action’

The Web forum does muck with this.

Maybe this could be added to Actions Forge Peter.

David

quote

One small caveat to using this is it breaks the page body tags and therefore if you try to use ‘css menus’ on a vertically centred page the app errors with the following message:

“bodyTag has no properties”

and highlights this line:

fwParameters.bodyTag.fwValue = bodyTag[0];

any help would be greatly appreciated

mm

quote

Edit to the above…

the error and code appear in the css menus action that ships with Freeway, is there a way to get around this do you think ?

mm

quote

@DeltaDave:

Nice to here someone is actually using my patch.

Thanks for pointing out the missing slash. The formatter had eaten it up unfortunately. ;-)

@mmull:

I’d bet, the error appears also in the original vertical-align action. Right?

You can send me a to a single page stripped down Freeway document, where the error occurs, and I can have a look, when I have time. But no promise that I can fix it.

Peter

quote

Peter,

Grab this file and see what happens:

http://mmuller.vndv.com/css-va.zip

If you remove the css menus action it centres vertically.

If you remove the vertical align action the menu works.

The error is from the css menus action, so not sure if there is anything you can do to fix this unfortunately…

Best Regards,

mmull

quote

Peter,

I have altered the css navigation action to be found here:

http://www.freewaytalk.net/thread/view/50746

All I did was comment the offending line and everything works now, must try and find out what the previous code did to the body tag to screw everything up though.

regards,

mmull

quote