Blog: R6D52: #100DaysOfCode (More Posts)
I’ve finally reached the point where I am setting up a new installation where I’m putting my static designs into a WordPress theme which I can work on building out next week I’m satisfied with the clickable images I’ve built up, where the information appears on mouse hover and works adequately on all screen sizes. That took a lot of trial and error but I got there. As for getting the data dynamically, this will be achieved through the use of Custom Post Types where each post will have its own images and fillable form data.
I was also able to do this because I finished some DOM Scripting in order to filter the appearances of 3 groups of project images, where a ticked checkbox renders the projects visible, and unchecking the box removes them from view. It took a bit of experimentation to get it done, as I found one method required 2 clicks to start the process going, which meant the toggling was out of sync. i.e. a checkbox input box removed items from display not the other way round.
Here’s the code that thankfully made it work.
//Toggle Display Property
/* const display = get_project_one.style.display;
//const display = client_chkbox.style.display;
get_project_one.style.display = display === 'block' ? 'none' : 'block'; */
//toggle display property by click of a checkbox
if ( client_chkbox.checked === true) {
get_project_one.style.display = "block";
} else {
client_chkbox.checked = false;
get_project_one.style.display = "none";
}
So I used DOM selection methods to select the data via the DOM and use those selections to manipulate the visibility of those elements to the browser. So they’re still part of the document, just not visible and taking up space in the browser. I then call the function by passing it to the onclick() attribute of the relevant checkbox element.
And knowing that I can link the label tag to the checkbox elements, it makes it easier to be selected on all screens.
With that, I created a new WordPress installation on localhost where the backend development can begin.