One for Caleb or any of the bright sparks…
I’m using Caleb’s ‘fourWrapperAlt’ modules in a responsive layout. I want to make the 4 floating boxes that have the ‘Box Sizing’ action applied to them, ‘Rollover’ buttons. Can’t seem to do this unless I remove the ‘Box Sizing’ action.
Is there a workaround for this – or is it some serious coding?
Cheers.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Huh, I must admit that I’ve never tried using the Box Sizing action in combination with a rollover.
However, it should be very easy to manually do what the Box Sizing action does. Right-click on each of the columns, and go to “Extended”. In the <div style> tab, add these entries:
| Name | Value |
|---|---|
width |
23.75% |
-webkit-box-sizing |
border-box |
-moz-box-sizing |
border-box |
box-sizing |
border-box |
The width value assumes that you have not modified the widths of the columns in any way. If you have, you will need to crack open the filename_override.css file that the Box Sizing action builds and get the correct values from there.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Mmmm, that looks simple enough – even for me!
Thought it would be nice to have a RO panel rather than simply link the text it contains to other pages…
Thanks, Caleb
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
… the key is that a simple link can be turned into a “extremely cool looking button like” experience. This is called CSS3 and is brand new (nearby).
But honestly haven’t understood what you’re after (panel?)
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thomas,
‘Panel’ meaning box containing picture and text.
I would like to have a tint cover the whole box (and all it contains) when the mouse hovers over it. Clicking the mouse over it will then link thru to another page. So a ‘panel’ with all the attributes of a button!
I just don’t seem to content myself with the easy way…
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
You can wrap a link around an HTML box in HTML5, so just use the HTML 5 Block Link Action to add a link to your box containing both text and picture. You will need to do some hand-styling to get the text in the box to look right (it will inherit a generic link appearance from the page), and if you want the block to have a rollover effect, you’ll need to style that as well.
Walter
On May 19, 2014, at 6:05 PM, Nik Andrew wrote:
Thomas,
‘Panel’ meaning box containing picture and text.
I would like to have a tint cover the whole box (and all it contains) when the mouse hovers over it. Clicking the mouse over it will then link thru to another page. So a ‘panel’ with all the attributes of a button!
I just don’t seem to content myself with the easy way…
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
So a ‘panel’ with all the attributes of a button! I just don’t seem to content myself with the easy way…
Generally you cannot apply a link to an Html item like this - however there is an action HTML5 Block Link that might allow this.
As to the rollover if you can point us to an online example and outline what you want your rollover to do - we can probably help.
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Dave,
http://www.promains.com.au
see ‘Product Overview’ block under the Technical Documents heading (tho these link to a pdf).
I am trying to basically replicate this site in a responsive format.
One other strange thing:
I am unable to find the standard ‘Rollover’ action within Freeway 6. I have the CSS 3 Rollover action but not the original as supplied with 5.5.
Does it no longer exist or should I be reinstalling 6?
Cheers
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Ok, figured the missing action thing out – can only be applied to graphic items – doh!
It looks very much as tho I will have to make all these panels static rather than responsive – not as pretty but workable.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I will have to make all these panels static rather than responsive
Not so easy to change the PDF to DOWNLOAD but the bg colour/border change is straightforward enough.
But your example is not a FW created page?!
Can you post a link to your online workings so far and then we can provide specific code for the actual items/pages.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Quick example - http://www.deltadesign.co/FW6Test/div-hover.html
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Sorry Dave, can’t upload as the workings only exist on my computer at the moment.
I don’t require the pdf/download ro in any event, tho I would have to be able to link to another page.
I will probably have to settle for ro text instead – much, much simpler.
I do like your blue ro however, would certainly be the more striking option.
Thanks for all your help.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Similarly, I’m trying to create a stacked graphic with rollover so one image appears over the other during a mouse rollover.
Using Caleb’s responsive layouts, when I try to stack one graphic (using imported pass-thru images) over another to create a rollover, I am unable to do so … one graphic gets placed to the side of the other.
What would be the steps to be successful?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
What would be the steps to be successful?
There is more than one way to create a rollover - have a look at this method. http://www.deltadesign.co/fw_examples/fwactions/rollover.html
For a responsive image import your image into an html container and apply the Rollover action to that. Other settings remain the same.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
DeltaDave —
Fantastic, that worked perfectly. Thanks for your responsive and link…
John
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Delta Dave,
I’m trying something similar - a pass-through graphic with a graphic box (colored at 75%) opacity on top of it. I’d like the colored box to be visible on rollover. The images are stacked, but aren’t showing up in the Actions pallet when the rollover is applied to the top image.
Both images are in the HTML container.
Any help?
Thanks!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
I’m trying something similar
Have a look at http://actionsforge.com/actions/css3-rollover
or post a link to a live example you are working on so that we can see better exactly what you are trying to achieve,
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Hi Dave,
Thank you for that link. I had actually seen that, but I went with the overlay on hover that Tim showcases here:
https://freewaytalk.softpress.com/thread/view/152189
My images are not responsive - the only way I could figure out how to make the overlay stick with the parent image was to have them both fixed, but I think it looks good.
Best!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options