Question In Regards to Idea

HTML & CSS
1

Hi there,
I have an idea for a current project of mine but am not sure of how to execute. Here is an image of what I want, in theory:

1920×378 117 KB

I want to basically have each of the boxes on the left clickable, or to be hovered, and upon hovering/clicking the content on the right to change, based on the selection.

I’m fairly new to javascript/jquery but assume that is what is needed.

Does anyone know of a similar code snippet I could learn from? I don’t want to be given the exact code, but a point in the right direction so I can learn would be great!

Thanks so much.

2

Here is a little idea. CSS only. Could probably modify this for click as well in CSS. Work on this and come back with your updated code.
Hover
http://www.pmob.co.uk/temp/gallery-rollover.htm
Click
http://www.pmob.co.uk/temp/hideandshow3-css.htm

I’d recommend starting with the hover and try and take bits from the click bit to see if you can get click working. If not, come back.

3

Thanks a lot. I think that will help me. I suppose I never though of this part… Any tips on how I would achieve the 3 levels of boxes?

My first thought is a bunch of divs, but the more I think about it, i don’t think that is the right approach?

4

What’s your thought process behind this?

5

I’m actually quite stumped now that I try to think about it, what is holding me back is the “unevenness” if that is even a word, of each layer of boxes. So for the first one, it’s obviously only one, the next two and third 3.

I think first off, I would hold it all in one container, and for each row of boxes, I would do just that, create a row, but each box would be it’s own div? Just sounds messy to me.

I keep thinking UL and LI but I am getting confused at the different layers.

I’m in over my head, but determined to figure this out, hehe.

6

It’s an awkward setup…perhaps using area/map might be suitable for you? It might eliminate some CSS potential though.

You also have to think about how you want to handle this in smaller screens. I understand how awkward it might be. I’d probably use Flexbox depending on your browser support requirements (e.g. look at flex-direction to start at the bottom)

You’d have 3 columns with that. Stacking images (or empty anchors to be the blue boxes)

7

Thanks, here is how I achieved the layers of blocks. Not sure if this is the right way.

8

Eh, maybe more like this. The blue boxes have a fixed width but this way is a little better. It allows the text area to expand/contract as needed.

I assume you don’t want flexbox? You didn’t mention anything about it.

9

Thanks for that. I used what you have an have attempted it with the following code:

You can see that I got it to work, but am not necessarily “replacing” the div, it is showing up to the right of the that is hidden, if you hover over the second row

  • So it is still a bit off.

    As far as flex box, I figured once I can get the functionality part down, I could rewrite this to work with flexbox?

    • 10

    Yes of course…but why not just do it now? Save yourself work.

    Why are you using JS for this? Have you had troubles getting pure CSS to work? You don’t need JS for this IMO.

    11

    This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.