What does the red/orange dot mean -...

Jan 19th, 2024 at 05:26 PM
User 2699991 Photo

Its A Kind Of Bali Magic
Registered User
5,057 posts
Online Now

lwetzel wrote:
Inger,

I am using Frameworkless. Let me try to explain again with less details.

My Index.html page has two main areas. Small column on left and wider on the right. I left column is a menu with four subjects. Right column has intro information, below that are the areas for the four subjects and below that is an About Me.

I have it set so that when a subject is selected from menu the right hand column scrolls to that subject to fill the area. The other three subjects are below but not seen. Each Subject area will have links to other pages.

However what I want it to do is just show the subject selected in the right column but the others to be hidden if use scrolled.

Hope that helps.


set the container holding the sections that you dont want the user to scroll to to OVERFLOW = hidden
the menu items when are anchored to the different sections, such that when a user selects one the target scrolls into view.
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://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
Jan 19th, 2024 at 06:11 PM
User 122279 Photo

Inger
Senior Advisor
14,535 posts

This is something I had from before, although in Foundation. I wonder if you find it useful. If you do, it would not be difficult to recreate it in Frameworkless.
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Jan 19th, 2024 at 06:44 PM
User 556652 Photo

lwetzel
Registered User
152 posts

Inger,

This is what I had working now. If you scroll you can see the rest. I was hoping to just hide them. This works so I'm kind of resigned to just do that.

Wayan,

Didn't understand how you suggestion worked. I tinkered with it but couldn't get the gist.

Thanks
___________
Artist At Heart
Jan 19th, 2024 at 07:49 PM
User 2699991 Photo

Its A Kind Of Bali Magic
Registered User
5,057 posts
Online Now

I have a demo vid on the way to YouTube, made in frameworkless with sticky sidebar and elements that scroll into view

Will give the link when its on Youtube
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://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
Jan 19th, 2024 at 07:55 PM
User 2699991 Photo

Its A Kind Of Bali Magic
Registered User
5,057 posts
Online Now

here is the demo
https://youtu.be/Bj5_jFWoaWI
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://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
Jan 20th, 2024 at 02:29 AM
User 379556 Photo

Frank Cook
Registered User
1,558 posts

lwetzel wrote:
Inger,
This is what I had working now. If you scroll you can see the rest. I was hoping to just hide them. This works so I'm kind of resigned to just do that....

Inger's solution can be modified to cause only the wanted sections to show as attached.

Here's what I did.
1. I removed the header and the scroll attributes.
2. For the container-1 items
(a) I removed the minimum-height setting
(b) I set the display to 'None' in the Regular state;
(c) I set up the Pseudo Class 'Target', and in that state I set the display to 'Block'.
3. I assumed that 2(b) above shouldn't apply to Home, and in the Regular state for that container-1 in 'Apply Styles To this element id only' I set the display to 'Block'.

Frank
Attachments:
Jan 20th, 2024 at 09:53 AM
User 556652 Photo

lwetzel
Registered User
152 posts

Wayan,

The demo definitely cleared that up and it works as you said. If I use it that way I don't have to worry about an extra button as the left menu has a link to the top and that menu stays but because I don't have a footer as you do in you demo. Only the right side scrolls.

What a simple solution!

Thanks
___________
Artist At Heart
Jan 20th, 2024 at 10:05 AM
User 556652 Photo

lwetzel
Registered User
152 posts


Frank and Inger,

Thanks for you help also. All good solutions. It just so happened that my page and with Wayans solution fit. I will mod Inger's Sticky-vertical to fit what I ended with.

Great people helping others. Breath of fresh air!
___________
Artist At Heart
Jan 20th, 2024 at 10:44 AM
User 556652 Photo

lwetzel
Registered User
152 posts

Inger, Frank and Wayan,

I have attached the modification of sticky-vertical that is the basics of my page. I removed headers and footers and added the hint from Wayan to Body and it works.

Thanks again!
Attachments:
___________
Artist At Heart
Jan 20th, 2024 at 11:01 AM
User 122279 Photo

Inger
Senior Advisor
14,535 posts

Hi again, I'm glad you could use the old component I made back in 2018. As you see, I'm mentioning SD3!
The file I sent you has one oversight: I had it wide open when I added the min-height 100VH to the container-1, and I forgot to turn off the breakpoints. You may want to correct that, so that the height is the same all the way.
Ha en riktig god dag!
Inger, Norway

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

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.