Click here to Skip to main content
15,881,027 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am building a grid of link cards corresponding to services, I want the content from this grid to shift aside when each card is clicked to get the description of each service. Therefore I am building a matrix of object containing the content of all cards and I would like to know how to handle the html body. Instead of having a long string added directly to the object, I am thinking about adding a method that could pull the data from a separate html file through the DOM as shown below. But maybe there is even a better way of doing this, Here is what I built so far:


The article describing each service contains a title, some paragraphs, some images and bullet-point lists which need to be targeted for styling. This is why I am thinking it should be better to pull the data from a separate html file. Is this the most efficient way to do this ?

What I have tried:

JavaScript
const serviceContent = [
  {
    id: 1,
    title: "Physiotherapy",
    image: URL('../../assets/images/servicesimg/physiotherapy.jpg'),
    serviceText() {
      return document.getElementById("physiotherapy")
    }
  },
  {
    id: 2,
    title: "Needling / Instramuscular Stimulation (IMS)",
    image: URL('../../assets/images/servicesimg/ims1.jpg'),
    serviceText() {
      return document.getElementById("ims")
    }
  },
  {
    id: 3,
    title: "Acupuncture",
    image: URL('../../assets/images/servicesimg/acupuncture.jpg'),
    serviceText() {
      return document.getElementById("acupuncture")
    }
  },
  {
    id: 4,
    title: "Graston Technique",
    image: URL('../../assets/images/servicesimg/Graston.jpg'),
    serviceText() {
      return document.getElementById("graston")
    }
  },
  {
    id: 5,
    title: "Spinal Decompression Work",
    image: URL('../../assets/images/servicesimg/'),
    serviceText() {
      return document.getElementById("spinal-decompression")
    }
  }
]
Posted
Updated 13-May-22 23:13pm
v2

1 solution

Hello Damianroiz !

as far as I understand your request : you want a "notification feature" , am I right ?
when users click on one only grid box, a notification will appears. isn't it ?


to achieve this feature :
- define your container with html tag
HTML
"<div id="myNotification"> purposes will be injected here </div>"

- use css to hide it. "display:hidden;" will suits.

to push it on foreground, you have the z-index parameter : 0 is ground , 1 is above , 500 is above again and so and so , it's layer for your html page. [ 0, 1, 500 level ]

then use animate with css to act on the 'div' to reveal it, to make it move, then to hide it.
a timer can help you to proceed ( animate have time settings through the animation too )

About your code :

you have build a constant Array , which type is "mixed array" in JS ( several contents and type of data in the array ).
API like JQuery are mixed array too, there are functions, datas , few types , media contents in.
Js handles that perfectly , it's "low Type" gain.

note that you redefine "serviceText()" every slot in your array.
using one input parameter your can have it written just one time.


It's close to JSON resource operating.

your array, as database, can exist without the function in.

and a for (loop) will fetch the array and pick all datas .

elements missing :
the base of your grid :
for every box : onclick('PULL_NOTIFICATION(theRowId)');

on a click :
prepare the "div"
populate with 'contents' from the array
launch the notification animate.
empty the "div" for a clean memory management and to avoid merging of our datas in the "div".
 
Share this answer
 
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900