Share your websites made with Site...

User 122279 Photo


Senior Advisor
14,551 posts
Online Now

This bit of js seems to do the trick:
// Scroll smoothly between sections (use <del> tag in html to identify sections)
var delay = false;
$(document).on("mousewheel DOMMouseScroll", function(event) {
event.preventDefault();
if (delay) return;
delay = true;
setTimeout(function() {
delay = false;
}, 200);
var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;
var a = document.getElementsByTagName("del");
if (wd < 0) {
for (var i = 0; i < a.length; i++) {
var t = a[i].getClientRects()[0].top;
if (t >= 40) break;
}
} else {
for (var i = a.length - 1; i >= 0; i--) {
var t = a[i].getClientRects()[0].top;
if (t < -20) break;
}
}

if (i >= 0 && i < a.length) {
$("html,body").animate({
scrollTop: a[i].offsetTop
});
}
});

And then you need to use html elements to add the identifying tags:
<del></del>
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2839879 Photo


Registered User
99 posts

rvanheukelum wrote:
Bainn wrote:
Latest website completed with SD3. See: https://echamp.co.nz/

Wow, you did it again. Marvellous. Can you tell me/us how you did the scroll function to show the tiles one by one in stead of scrolling through down the page? I remember seeing this on the Apple website (MacPro page), but I'm curious how you did this with SD3.


Thank you very much for your kind words. It means a lot.

Inger has correctly answered your question.
CoffeeCup Websites:
City Church Christchurch: https://city.org.nz
Champion Freight: https://www.championfreight.co.nz/
eChamp: https://echamp.co.nz/
Champion Containers: http://championcontainersnz.com/
User 2088758 Photo


Senior Advisor
3,105 posts

Thought I would share another masterpiece created with SD3.

http://fullscreen.ca/

Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 1869666 Photo


Registered User
229 posts

WOW!! Very nice!
User 187934 Photo


Senior Advisor
20,242 posts

Looks good Steve,
Your social links at the top and bottom don't work.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2088758 Photo


Senior Advisor
3,105 posts

Eric Rohloff wrote:
Looks good Steve,
Your social links at the top and bottom don't work.


Yes thanks Eric,

My client still needs to set up his social media.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2844004 Photo


Registered User
225 posts

Inger wrote:
This bit of js seems to do the trick:
// Scroll smoothly between sections (use <del> tag in html to identify sections)
var delay = false;
$(document).on("mousewheel DOMMouseScroll", function(event) {
event.preventDefault();
if (delay) return;
delay = true;
setTimeout(function() {
delay = false;
}, 200);
var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;
var a = document.getElementsByTagName("del");
if (wd < 0) {
for (var i = 0; i < a.length; i++) {
var t = a[i].getClientRects()[0].top;
if (t >= 40) break;
}
} else {
for (var i = a.length - 1; i >= 0; i--) {
var t = a[i].getClientRects()[0].top;
if (t < -20) break;
}
}

if (i >= 0 && i < a.length) {
$("html,body").animate({
scrollTop: a[i].offsetTop
});
}
});

And then you need to use html elements to add the identifying tags:
<del></del>

Thanks for the tip ... it has been a while since my post, but I finally found the time to give you a proper 'thank you' ;)

– Richard
Living in Zevenbergen, the Netherlands
13" MacBook Air M1 + 2x LG 24" IPS QHD / 8GB RAM / 500GB SSD / macOS 14.3 Sonoma
User 2295089 Photo


Registered User
5 posts

Hi CoffeeCup! I've been working with SD for the past three weeks really trying to get my head wrapped around the css grid within foundations. It appears to be a solid layout tool. For the past 9 years, I've mainly worked within WordPress and Joomla! environments. However, I wanted to really improve my understanding of grid layout and wanted to migrate a old html site to a new html site. I had particular issues with an event table that appears on the homepage, which was a nightmare to work with in mobile environments. The new SD and foundations css grid has solved this issue 100%.

Much of my css tagging is likely wonky because of my learning curve, but the site is running really well and I've married it with another CC product, the WFB, which I have connected to a mysql dbase and paypal.

Here's the site: http://steeplehillfarm.com

I do have some questions, such as how to update items across all pages within the website. For example, If I make a change to the navigation menu, have that change update across all pages? If I update the menu item "Contact" to "Contact Us", I don't want to have to update the text manually on every single page.

Thanks!

Jason

User 187934 Photo


Senior Advisor
20,242 posts

Hi Jason,
You'll want to use the symbols feature of SD.
https://www.coffeecup.com/help/articles … h-symbols/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2907842 Photo


Registered User
45 posts


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.