Not seeing the square links with javascript disabled

JavaScript
21

I have to depart soon so I won’t poke my nose in to the code as of yet. I’ll be back though in about 10 hours time.

Until then, I leave you in the very capable hands of the people here in the HTML+CSS forum.

1 Like
22

It’s not a complete loss of effort here.

Things could be put into 3 blocks that stacked.

Then js could add the position absolute class to layer them

23

My recommendation is that things that can only be used by JavaScript, be always hidden. It should be JavaScript’s job to unhide them when it’s ready to use them.

1 Like
24

This what I see with CSS off

206×557 8.64 KB

25

I’m referring to when javascript is off, not CSS.

#10

26

This is the HTML & CSS category so I thought you were not talking JavaScript here.

1 Like
27

It’s really a little bit of both.

28

Can you help me understand this?

.inactive .cover {
  display: block;
}

.fhgfjhfhgfhgd .cover {
  display: block;
}

.inactive

Has no meaning at all, it’s just a dead class name attached to .cover?

It seems like it has no meaning to it other than, being able to show the links when the javascript is removed.

29

Here is what I had in mind.

These blocks could all be the same width and height.
There position would be static, the default. Position coordinates could all be in place but would not really work until js activates the absolute position class.

Everything is tied to one wrap div right now. We would have three wrapping blocks with everything pre-aligned in each block. Then have the ap class attached to each block, js activates that class and css will stack them.

30

How does that compare with how I have it set up?

31

Everything is nested in one wrapping block .wrap

32

And that’s bad because?

33

Umm, because of what was said in post #8

1 Like
34

But this isn’t a web page, it’s only an html/javascript gadget audio player thingy.

35

Why are you concerned about what happens with js off then.
Isn’t that why you were posting links to broken players.

36

It goes all the way back to figuring out the the sole purpose of what these codes were meant to do.
#300

That’s what @PaulOB put in the code.
#182

I was figuring out what these were meant for:

.title{display:none;}
.inactive .title{display:block;}

.cover {
  display: none;
}
.inactive .cover {
  display: block;
}

It’s meant for when javascript is disabled.

I got it working on 3 out of the 4 codes.
Stuck only on implementing it on Code 1.

37

Would you be able to answer this.

#28

38

I have no doubt that you have stray code mixed in with your different players. The html is not the same on all of them. If you have been copying/pasting css from one player to another you would get stray code mingled in.

2 Likes
39

That’s not possible because both players operate different from each other.

And that wasn’t pertaining to my question though.

40

oh, wait a second.

This is @PaulOB’s code.

Code 4

When I remove .inactive

From here:

 .title {
  display: block;
}

The cover should be showing: