Hi All
I am trying to replicate a few elements of this WordPress website in SD using Foundation but have so far failed miserably:
https://www.beaverbrook.co.uk/
The first is the sticky header, not in itself a problem but what I am trying to get is the change of background/text colour as you scroll down.
Secondly when you launch the menu hovering over the different links changes the background image to the container. Is it possible to create a hover command for one element that effects another in this way?
And finally something I have been wrestling with for years using this software; as you scroll down the page the images and text slide in from the side as they come into view as you can with SD but the difference is that they then remain in place if you scroll past them. All I can get with SD is for them to revert back to their original position once they go Out of View again.
I have had a look through Ingers excellent sharing website but cannot find a solution. Apologies if any of these have already been covered on the forum but has anyone got any ideas please??
Many thanks
Jeremy
I am trying to replicate a few elements of this WordPress website in SD using Foundation but have so far failed miserably:
https://www.beaverbrook.co.uk/
The first is the sticky header, not in itself a problem but what I am trying to get is the change of background/text colour as you scroll down.
Secondly when you launch the menu hovering over the different links changes the background image to the container. Is it possible to create a hover command for one element that effects another in this way?
And finally something I have been wrestling with for years using this software; as you scroll down the page the images and text slide in from the side as they come into view as you can with SD but the difference is that they then remain in place if you scroll past them. All I can get with SD is for them to revert back to their original position once they go Out of View again.
I have had a look through Ingers excellent sharing website but cannot find a solution. Apologies if any of these have already been covered on the forum but has anyone got any ideas please??
Many thanks
Jeremy
The slide images transition on scroll is controllable with sone custom js and CSS, the other things are also doable with some outside help from js and CSS too what version of site designer are you on and which framework
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
A Nony Mouse wrote:
The slide images transition on scroll is controllable with sone custom js and CSS, the other things are also doable with some outside help from js and CSS too what version of site designer are you on and which framework
The slide images transition on scroll is controllable with sone custom js and CSS, the other things are also doable with some outside help from js and CSS too what version of site designer are you on and which framework
oops just seen it's foundation,, no problem then,, so which version of SD do you have?
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
Hi A Nony Mouse
Version 5 build 3499, the latest one.
Regards
Jeremy
Version 5 build 3499, the latest one.
Regards
Jeremy
Jeremy Woolger wrote:
Hi A Nony Mouse
Version 5 build 3499, the latest one.
Regards
Jeremy
Hi A Nony Mouse
Version 5 build 3499, the latest one.
Regards
Jeremy
I am just doing a demo for the first step (header change on scroll
Just so I can make it a bit more relevant are you planning to have the background for the hero section with multiple images that fade in & out (like the example thingy)or just a single image?
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
Wow, really appreciate that.
Yes I am, so the sticky header will be transparent initially with the image rotator behind then change to a solid background colour as you scroll down.
Many thanks
Jeremy
Yes I am, so the sticky header will be transparent initially with the image rotator behind then change to a solid background colour as you scroll down.
Many thanks
Jeremy
Jeremy Woolger wrote:
Wow, really appreciate that.
Yes I am, so the sticky header will be transparent initially with the image rotator behind then change to a solid background colour as you scroll down.
Many thanks
Jeremy
Wow, really appreciate that.
Yes I am, so the sticky header will be transparent initially with the image rotator behind then change to a solid background colour as you scroll down.
Many thanks
Jeremy
Hi Jeremy
Sorry For Delay In reply, it'sa been a really long and strange day here
anyway I have put up the first of a short demo video for changing the color of the nav thingy on scroll
https://rsdtutorials.mawarputih.asia/index.html
Now the site is still under development, and still very experimental, but it should be ok, the other thing is that the sound is a bit iffy I thinkj at least it is a bit off here but then that could be the ancient equipment I'm using at the moment, anyway it should be good enough just for the demo purposes,, there is a link yo a form requesting email details if you would like my email fill out the form and at least it will get tested
Should that be the sort of thing you are after (with a little bit of refining) then ley me know & will do a step by step for making it.
Take care over there stay safe & well
W
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
Hi W
Long time no speak, didn't recognise your new username. Thanks for the video, will take a look once I have cleared up the debris from storm Eunice just in time for storm Franklin to arrive later today. As you are well aware we are not geared up for storms of this strength in the UK so everything grinds to a halt! Rather pathetic really
Regards
Jeremy
Long time no speak, didn't recognise your new username. Thanks for the video, will take a look once I have cleared up the debris from storm Eunice just in time for storm Franklin to arrive later today. As you are well aware we are not geared up for storms of this strength in the UK so everything grinds to a halt! Rather pathetic really
Regards
Jeremy
Regarding the second request in the first post of this thread, perhaps the very simple method in the attached project file would be of use, i.e.
1. The menu is in a container with a background image.
2. The buttons, or whatever is used for the menu, have a custom attribute set in the Element panel as follows:
Name - data-event-onmouseover
Value - this.parentElement.style.backgroundImage = "url(----.jpg)"
3. Each button of course uses a different image for the ---.jpg part.
Frank
1. The menu is in a container with a background image.
2. The buttons, or whatever is used for the menu, have a custom attribute set in the Element panel as follows:
Name - data-event-onmouseover
Value - this.parentElement.style.backgroundImage = "url(----.jpg)"
3. Each button of course uses a different image for the ---.jpg part.
Frank
Thanks for testing, Inger.
Further to my previous post, to get back to the original background image after hovering, one adds a further attribute as follows to each button.
Name - data-event-onmouseout
Value - this.parentElement.style.backgroundImage = "url(----.jpg)"
Frank
Further to my previous post, to get back to the original background image after hovering, one adds a further attribute as follows to each button.
Name - data-event-onmouseout
Value - this.parentElement.style.backgroundImage = "url(----.jpg)"
Frank
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.