grid with slider - Post ID 301263

User 2981014 Photo


Registered User
5 posts

Learning html/css/js, and can't find a component/element I need. Because I don't know what it's called, and my guesses lead nowhere. (In Delphi it would be a "string grid"). It's a "grid", or table, list, that would appear on the web page as a single column of data (loaded from a JS file}. Entries would be strings. Lots: 3000 or so. There must be an attached slider that allows user to scroll down through the entries, then select one by clicking on it. Also (not using slider) have a button user could click to randomly select an entry. That part (random selection) I think I can handle ok. What I can't find out is how to create the grid/slider.
Thanks,
Ben Crain
User 2699991 Photo


Registered User
5,081 posts
Online Now

Which application are you using?
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/
User 187934 Photo


Senior Advisor
20,241 posts
Online Now

Use a div with a class applied and use js to loop through your data to create the column dynamically.
Here's using an array of data that's on a separate data.js page.
https://ericrohloff.com/coffeecup/ccfor … -loop.html
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 2981014 Photo


Registered User
5 posts

(1) To Wayan Jaya: What do you mean by "application"? I'm just trying to build a web page, using standard HTML/CSS/JS.
(2) To Eric Rohloff: My problem is not simply displaying a few items on a web page. (Which, in your example, are not clickable/selectable.) I need a one-column grid/list/table containing thousands of items -- only the first few of which are displayed. So there must be a slider/scroll bar allowing the user to scroll down and find a particular one, then click to select it. Surely HTML/CSS/JS has some such component. I've seen it on web pages -- where, for instance, you need to select your "country of origin" from a long list, thru which you can scroll until finding the right one, then click on it.
User 122279 Photo


Senior Advisor
14,550 posts

By application is meant "Which Coffeecup software are you using?"

This forum has been made available by Coffeecup Software and is meant to be an aide for the users of their programs. If you are using some other program, you should mention it. It will not be certain that you get the help you need, then we don't cover everything out there, but well, you might get lucky...

Since you mention selectable items in a dropdown, it sounds like Coffeecup's Site designer can be of avail.
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 187934 Photo


Senior Advisor
20,241 posts
Online Now

Ben Crain wrote:

(2) To Eric Rohloff: My problem is not simply displaying a few items on a web page. (Which, in your example, are not clickable/selectable.)

I provided the example to populate a list from a js file. Making it clickable is easy. Now it's clickable.;)
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

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.