Bug in vertical align action

Peter_Gutbrod · September 9, 2008, 11:08am

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

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Joe2 · September 9, 2008, 11:37am

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

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Peter_Gutbrod · September 9, 2008, 12:25pm

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

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Joe2 · September 9, 2008, 12:58pm

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

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Peter_Gutbrod · September 11, 2008, 7:03am

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

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Joe2 · September 11, 2008, 8:27am

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

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Peter_Gutbrod · September 11, 2008, 12:29pm

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>

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Peter_Gutbrod · September 11, 2008, 12:30pm

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

Peter

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · September 11, 2008, 12:51pm

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

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David_McCallum · March 11, 2009, 12:08am

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

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Mark_Muller · March 11, 2009, 8:41pm

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

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Mark_Muller · March 11, 2009, 8:43pm

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

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Peter_Gutbrod · March 13, 2009, 10:39am

@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

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Mark_Muller · March 17, 2009, 10:44pm

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

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Mark_Muller · April 9, 2009, 11:53pm

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

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

pems · October 24, 2010, 8:20pm

Hi everyone
me again and as usual I know my question will sound a bit dim but here goes anyway. If I just want to add an extra style attribute to the page div is there a simple way to do it.
I understand (and have successfully with a lot of help) added things using my actions within the HTML tags but I have never tackled adding extra style attributes. I have looked at the

        function GetCSSAttribute(tag, fieldName, attributeName)

within the manual and “my goodness” this looks like an enormous amount of code just to add 1 attribute, is this the only way?
If someone could point out, what I need to use so I can add some extra style attributes or if there was a simple alternative then that would very handy

Pems

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · October 24, 2010, 11:16pm

Yes. THe issue is that internally, Freeway stores the styles applied
to an element as a single string, rather than an object or some other
key:value data structure. I have rewritten the get and set CSS
functions slightly, my versions follow in a Gist.

gist.github.com

https://gist.github.com/walterdavis/644134

gistfile1.js

	function SetCSSAttribute(tag, attributeName, attributeValue) { 
		// Sets a "CSS" attribute such as "position:absolute" in a tag value 
		// Passing an attribute value of null removes that attribute entirely
		if (tag==null) return; 
		var tagField = tag['style']; 
		if (tagField == null){
			tag['style'] = '"'+attributeName+':'+attributeValue+'"'; 
		}else{
			var tagField = tagField.toString();
			var pairs = tagField.slice(1,-1).split(';');

This file has been truncated. show original

Walter

On Oct 24, 2010, at 4:20 PM, pems wrote:

Hi everyone
me again and as usual I know my question will sound a bit dim but
here goes anyway. If I just want to add an extra style attribute to
the page div is there a simple way to do it.
I understand (and have successfully with a lot of help) added things
using my actions within the HTML tags but I have never tackled
adding extra style attributes. I have looked at the
       function GetCSSAttribute(tag, fieldName, attributeName)
within the manual and “my goodness” this looks like an enormous
amount of code just to add 1 attribute, is this the only way?
If someone could point out, what I need to use so I can add some
extra style attributes or if there was a simple alternative then
that would very handy

Pems

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options