FreewayTalk

18 replies to this thread. Most Recent

gfel

12 May 2020, 8:47 pm

Centre of Page Graphics - responsive design

Hi,

I’m sure this is really easy but for some reason I can’t work it out.

I have ‘add to basket’ rollovers graphics which I need to make sure remain in a central position on each of my responsive pages. How can I make sure these will stay in the correct place on each responsive page please?

Many thanks

gfel

waltd

12 May 2020, 9:07 pm

Do you want these images to remain centered vertically and horizontally? What else is in the page? Do these buttons “float” over the top of the page content, or are they a part of the page content?

Walter

On May 12, 2020, at 4:47 PM, gfel <[email protected]> wrote:

Hi,

I’m sure this is really easy but for some reason I can’t work it out.

I have ‘add to basket’ rollovers graphics which I need to make sure remain in a central position on each of my responsive pages. How can I make sure these will stay in the correct place on each responsive page please?

Many thanks

Freeway user since 1997

http://www.walterdavisstudio.com

gfel

15 May 2020, 9:56 am

Hi Walter

Thank you for the reply. I would like these buttons to be horizontally centered. On my responsive pages I have a series of Pass through, high res graphics which I have set to be 100% width and then the add to basket button centrally underneath each separate image as they run all down the responsive pages. So 15 images each with the add to basket option centrally underneath please. I believe this makes them part of the page content?

Many thanks

gfel

waltd

15 May 2020, 1:01 pm

Great. This is pretty straightforward. And once you do it once, you can copy the outermost container and paste it inline each place you need it, and update the button target. To begin, ensure that you have two graphics, exactly the same size as one another, that represent the two states of your rollover button image.

Make a full-width HTML box below each image. Insert the button into it as an inline image (import the “normal” state of the graphic). With the button image still selected (handles showing), apply the link to it using the Hyperlink dialog or the main menu (Edit / Hyperlink). Double-click into the text flow within the HTML box that contains the button, and set the text alignment to center. That centers your graphic button. Now, to add the rollover effect to it, you need to use the original interface for rollovers, all the way back to Freeway 1.x.

Click once on the button graphic and apply the Rollover Action to it. In the Actions palette, click on the Parameters tab. Pull down the MouseOver picker to “Select…” and choose your over-state image in the resulting file dialog.

Now that you have assembled this layer-cake, you can select the outermost HTML box, copy it, then put your text cursor inline after the next responsive image, and paste. Update the link on the button, rinse and repeat.

Walter

On May 15, 2020, at 5:56 AM, gfel <[email protected]> wrote:

Hi Walter

Thank you for the reply. I would like these buttons to be horizontally centered. On my responsive pages I have a series of Pass through, high res graphics which I have set to be 100% width and then the add to basket button centrally underneath each separate image as they run all down the responsive pages. So 15 images each with the add to basket option centrally underneath please. I believe this makes them part of the page content?

Many thanks

Freeway user since 1997

http://www.walterdavisstudio.com

gfel

20 May 2020, 1:24 pm

Hi Walter, thank you so much for this help. I am getting stuck when it comes to adding the hyperlink and clicking within the box to set the alignment to central. I am using mal’s shop actions on the add to basket and also the field above the button which has the the Multiprice action on it, as each item comes in three sizes? Does this mean I’ve not got my shop setup correctly. Are you advising for hyperlinks to the basket rather than using the Ma’s action? Thanks

gfel

waltd

20 May 2020, 3:16 pm

I was referring to an inline graphic used as a link. I don’t think it matters if you apply another action or three to it, the link is what drives the rollover. If the Mal’s action is written to override an existing link, then this should still work. If the Mal’s Action creates a link, and exposes that to the other Actions applied to the item, then that should also work. But you may want to first try this composition without any other Actions than Rollover. See if you can get that to work, so that you have a link, and when you roll over it, it changes images. Once you have that, you can layer on the other Actions and see if you can extend it.

Walter

On May 20, 2020, at 9:23 AM, gfel <[email protected]> wrote:

Hi Walter, thank you so much for this help. I am getting stuck when it comes to adding the hyperlink and clicking within the box to set the alignment to central. I am using mal’s shop actions on the add to basket and also the field above the button which has the the Multiprice action on it, as each item comes in three sizes? Does this mean I’ve not got my shop setup correctly. Are you advising for hyperlinks to the basket rather than using the Ma’s action? Thanks

Freeway user since 1997

http://www.walterdavisstudio.com

gfel

20 May 2020, 4:18 pm

Hi Walter, Thank you I have this working on the add to basket no :). I also have the Mal’s Form and Mal’s Multiprice Select set up in the three different size option and these are in a table cell. Is there a way of centralising this horizontally above the add to basket on my responsive pages also please?

gfel

waltd

20 May 2020, 4:24 pm

Rather than putting those separate selects in a table cell, you could put them inline within the same block of text with the button, just one line above it. The idea is to have this construction:

    <div (with mals form applied to it)>
    <p style="text-align: center">[multiple select]</p>
    <p style="text-align: center">[add to cart]</p>
</div>

This should let the two controls center horizontally.

Walter

On May 20, 2020, at 12:18 PM, gfel <[email protected]> wrote:

Hi Walter, Thank you I have this working on the add to basket no :). I also have the Mal’s Form and Mal’s Multiprice Select set up in the three different size option and these are in a table cell. Is there a way of centralising this horizontally above the add to basket on my responsive pages also please?

Freeway user since 1997

http://www.walterdavisstudio.com

gfel

20 May 2020, 4:39 pm

Thank you that is really helpful and keeps things nicely together. How do I change the dimensions of the Mal’s Multiprice selection ‘menu List field’ as now I’ve ‘inserted’ the menu list field (inline) into the line above the add to cart I am unable to change the size in the inspector as it has red dots around it and I can’t change the dimensions?

gfel

waltd

20 May 2020, 4:59 pm

How does it appear in the browser? What you see in the design interface is not necessarily going to be the same thing.

Walter

On May 20, 2020, at 12:39 PM, gfel <[email protected]> wrote:

Thank you that is really helpful and keeps things nicely together. How do I change the dimensions of the Mal’s Multiprice selection ‘menu List field’ as now I’ve ‘inserted’ the menu list field (inline) into the line above the add to cart I am unable to change the size in the inspector as it has red dots around it and I can’t change the dimensions?

Freeway user since 1997

http://www.walterdavisstudio.com

gfel

20 May 2020, 5:35 pm

Thank you yes, I have just realised when I preview the box stretches to show the text :)). Could I possibly ask two more things? I posted another question on here about making a link to new window high res, as there doesn’t seem a way to do this?

Also, I’m currently running 10.10.5 Yosemite on my old iMac. If I upgrade how far could I go before FW 7.1.4 stops working please? Do you anticipate that websites designed in FW7 will be able and editable in Xway when it is finished?

Thank you so much for your help!!!! :))))))))))

gfel

waltd

20 May 2020, 6:16 pm

On May 20, 2020, at 1:35 PM, gfel <[email protected]> wrote:

Thank you yes, I have just realised when I preview the box stretches to show the text :)). Could I possibly ask two more things? I posted another question on here about making a link to new window high res, as there doesn’t seem a way to do this?

If you make the image that you select in the Action high res, Freeway doesn’t do any resampling of the target image, so you could get it has high res as you want.

Also, I’m currently running 10.10.5 Yosemite on my old iMac. If I upgrade how far could I go before FW 7.1.4 stops working please? Do you anticipate that websites designed in FW7 will be able and editable in Xway when it is finished?

I am using Mojave on my Mac, as that is the end of the road for 32-bit applications. Softpress have stated that their goal is to have Xway be able to open Freeway documents (and convert them). Once converted, they won’t be re-usable in Freeway, but they would be able to be further modified in Xway. This goal is dependent on Xway growing a few more limbs, first. And it’s further complicated by the default layout mode being entirely different (layered absolute DIVs in Freeway need to become inline, relative DIVs in Xway). That’s quite a leap, hard to imagine how they will pull that off. Perhaps you would be able to open it with all the layers preserved, and then convert to inline yourself once you have all the content visible and in place in the new app. Just guessing, though.

Walter

Thank you so much for your help!!!! :))))))))))

Freeway user since 1997

http://www.walterdavisstudio.com

gfel

16 Jun 2020, 4:04 pm

Hi Walter

I’ve come across another issue in creating my responsive pages and wonder if I would quickly ask what I am doing wrong, or not doing please.

I have six graphics, set as menu rollovers which I need to be responsive. The images are all high res and set as rollovers and work fine.

On the responsive pages I require these rollovers to sit neatly in two rows of three under top of page logo as menu options (About, Contact etc…). I thought I would put them in a table with two rows and three columns to keep them together.

I have them set in the table and have placed this inline in an html box which I have set to 100% width. The html box is responding with the breakpoints but the table, (containing my menu buttons is not). I thought I would be able to set the width of the table to 100% and this would fix it (from 450px) but whenever I try to do this I get a message saying Invalid Value and it reverts back to the 450px.

Is a table the correct setup? I would be very grateful if you could advise me what I’m not doing correctly.

Many thanks

gfel

waltd

16 Jun 2020, 4:41 pm

A table is old-school, but still usable here. The issue is that Freeway won’t take 100% as a width. But you can go equally medieval on that table, and declare it to have a width of 100% using the Item/Extended interface.

A better way to do this construction would be with a set of inline DIV elements, set to be a percentage width and float left. This will allow them to nest into your column shapes at a large page size, and at a smaller breakpoint, you can set them to 100% so they stack. Look at what happens on my home page when you resize it for an example. (That was not designed in Freeway, but rather used a CSS framework called Sscaffold [yes, with two esses]). https://walterdavisstudio.com It doesn’t break into one column at the smallest size you can scale desktop Safari to, but it does when you show it on a phone.

Walter

On Jun 16, 2020, at 12:04 PM, gfel <[email protected]> wrote:

Hi Walter

I’ve come across another issue in creating my responsive pages and wonder if I would quickly ask what I am doing wrong, or not doing please.

I have six graphics, set as menu rollovers which I need to be responsive. The images are all high res and set as rollovers and work fine.

On the responsive pages I require these rollovers to sit neatly in two rows of three under top of page logo as menu options (About, Contact etc…). I thought I would put them in a table with two rows and three columns to keep them together.

I have them set in the table and have placed this inline in an html box which I have set to 100% width. The html box is responding with the breakpoints but the table, (containing my menu buttons is not). I thought I would be able to set the width of the table to 100% and this would fix it (from 450px) but whenever I try to do this I get a message saying Invalid Value and it reverts back to the 450px.

Is a table the correct setup? I would be very grateful if you could advise me what I’m not doing correctly.

Many thanks

Freeway user since 1997

http://www.walterdavisstudio.com

gfel

16 Jun 2020, 5:09 pm

Thank you so much. On my main pages the menu buttons are in a vertical line so I decided to create a new second menu for the responsive pages…. not sure if this is right but it seems to work for now.

Are there any instructions for the inline DIV elements way as I may look at the later and redo it.

For now as I have it all ready I will try the medieval option :). What do I write in the item extended menu please? Presumably I select the table, then click Item>extended and then I see the extended attributes for table box? Not sure what to do after this?

Thanks again

gfel

waltd

16 Jun 2020, 6:11 pm

On Jun 16, 2020, at 1:09 PM, gfel <[email protected]> wrote:

Thank you so much. On my main pages the menu buttons are in a vertical line so I decided to create a new second menu for the responsive pages…. not sure if this is right but it seems to work for now.

Right. That’s the oldest trick, and it can cause you some harm because you have multiple links to the same resource — Google may mistake that for ballot-stuffing and discount your page rank accordingly.

Are there any instructions for the inline DIV elements way as I may look at the later and redo it.

Draw a box. Double-click inside it so you have a flashing text cursor. From the main menu, choose Insert / HTML Item. You’ll see an inline box, 100px square. Set it to float left, set its width to a likely percentage (to give you your columns). Set it to align Top. Click elsewhere, then back on that box so it shows it’s handles. Copy, then double-click into the parent, and paste. You should have two boxes side-by-side. Repeat as necessary.

For now as I have it all ready I will try the medieval option :). What do I write in the item extended menu please? Presumably I select the table, then click Item>extended and then I see the extended attributes for table box? Not sure what to do after this?

Click to add a new attribute. In the Name, enter width. In the value, enter 100% (no space between the number and the unit). If you’re reading this in mail, don’t enter the back-ticks — they are here to cause the Web display of this message to have syntax highlighting for those properties.

Walter

Thanks again

Freeway user since 1997

http://www.walterdavisstudio.com

gfel

16 Jun 2020, 7:33 pm

Thank you, I still can’t get the medieval way to work as the table doesn’t adjust even adding the width 100% attributes?

Thank you for the advice re google, I had not thought of that. I have just tried to setup the inline DIV option as you suggested and it works on the main pages and I have six menu buttons in a horizontal row. When I go to the responsive pages however the six buttons are all still in one a row and all bunched up rather than changing to two rows of three? How do I get them to change on the smaller breakpoint pages please? I have them at 100% already?

Many thanks

gfel

waltd

16 Jun 2020, 9:24 pm

Is your page set to Flexible width? Without that, 100% of a fixed number (whatever pixel width the page is set to) will always be the same value no matter what width the browser viewport is. I’m working on an example “divs as table” document in Freeway 7, I’ll post it if I get something working the way I would expect it to work.

Walter

On Jun 16, 2020, at 3:33 PM, gfel <[email protected]> wrote:

Thank you, I still can’t get the medieval way to work as the table doesn’t adjust even adding the width 100% attributes?

Thank you for the advice re google, I had not thought of that. I have just tried to setup the inline DIV option as you suggested and it works on the main pages and I have six menu buttons in a horizontal row. When I go to the responsive pages however the six buttons are all still in one a row and all bunched up rather than changing to two rows of three? How do I get them to change on the smaller breakpoint pages please? I have them at 100% already?

Many thanks

Freeway user since 1997

http://www.walterdavisstudio.com

Back to Top

gfel

17 Jun 2020, 1:36 pm

Thanks Walter, after changing the percentages of each DIV unit, I seem to have been able to get the menus to work as I would like both on my main pages and my responsive ones. Thank you so much for the guidance :).

gfel