Fixed & Expanding Banner in XDP 10

[penmore]

Being that a number of members were enquiring about fixed and expanding banners I have created the attached file to show you all what is possible with the use of Placeholders. You can see the website version of it here .

I have attached the .xar file together with the banner .png so you can export it to your local machine. Please remember that the red_ban.png file need to be saved in the same folder where the index.htm is exported to.

Enjoy,
Pete

[gwpriester]

Pete - Thanks for this.

Just curious. How is this different from the !fixed layer solution and tweak that Covoxer and Steve Ledger came up with. http://www.talkgraphics.com/showthre...679#post470679

[penmore]

Pete - Thanks for this.

Just curious. How is this different from the !fixed layer solution and tweak that Covoxer and Steve Ledger came up with. http://www.talkgraphics.com/showthre...679#post470679

The one posted back in 2013 is for a fixed sized browser window. If you put a full width banner into it then when and view it in browser window of different sizes then the banner doesn't stretch or shrink to match the browser window (this is what one member was asking for). Also, I think my approach works better than stretchy option in XWD11.
Pete

[gwpriester]

Awesome. Thanks.

[Acorn]

Pete, this is my approach that avoids having to export the Header as a separate PNG; the file does it for you.
Provided you group all the elements together and give them a filename of "banner", the Header can be as simple or as complex as you choose.

Also I have removed the need for a !Fixed layer so the design of the Header is more intuitive and it can be anywhere on the Banner Layer.
The final Header size can be the width of the page but scaling up to a Placeholder width of 3,000 px width probably means it should be at least 1,500 px.
Note, for the Header to render across the page, the Website must not clip to the page edge.

I am sure there is a lot of scope for improving the CSS in the Placeholder but, for present, it works and can be experimented with.

Banner.web

Acorn

[gwpriester]

You guys amaze me!

[penmore]

Pete, this is my approach that avoids having to export the Header as a separate PNG; the file does it for you.
Provided you group all the elements together and give them a filename of "banner", the Header can be as simple or as complex as you choose.

Also I have removed the need for a !Fixed layer so the design of the Header is more intuitive and it can be anywhere on the Banner Layer.
The final Header size can be the width of the page but scaling up to a Placeholder width of 3,000 px width probably means it should be at least 1,500 px.
Note, for the Header to render across the page, the Website must not clip to the page edge.

I am sure there is a lot of scope for improving the CSS in the Placeholder but, for present, it works and can be experimented with.

Banner.web

Acorn

Acorn, when I load your file into XDP10 I get loads of errors saying it was created in a different version and when I preview it in Internet Explorer the banner doesn't stretch - this is maybe why I used the option of a seperate .png file for the banner, just can't remember

[Egg Bramhill]

Pete,

The error messages are usual. They are merely stating that the xar/web file was created in a later version of the website.

Which version of Xara & IE are you using, as Acorns file works perfectly for me.

[penmore]

I have both 10 and 11 but was using the version as stated in the thread title. The IE version is 8 which works perfectly well with the version of the website that I presented in this thread. I suspect the the version that Acorn posted was developed in 11, which begs the question why when 11 supports both of the options presented.

[Acorn]

I have both 10 and 11 but was using the version as stated in the thread title. The IE version is 8 which works perfectly well with the version of the website that I presented in this thread. I suspect the the version that Acorn posted was developed in 11, which begs the question why when 11 supports both of the options presented.

Pete, yes I did use XWD11P but nothing in the design should prevent it working in earlier and bigger Xara products. It is possible the approach fails in IE8 simply because it is IE. I checked in all my (modern) browsers and things were clean.CanIUse identifies an issue for IE8 and http://caniuse.com/#search=background-attachment, which affects 0.77% of all users.The approach to using a Name for the Header on a hidden Layer is robust and would work in your method.Acorn