Not seeing the square links with javascript disabled

JavaScript
1

As I currently understand it, when the javascript is disabled, only the links should show.

Code 1

With This added:

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

This one doesn’t work
javascript disabled

This one doesn’t work
javascript enabled

When Removed:

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

The audio function works.
https://jsfiddle.net/ffvkbLjw/394/

How I would get the links to show with the javascript disabled, I have no idea.
https://jsfiddle.net/ffvkbLjw/414/

Code 2

This One Works
javascript disabled
https://jsfiddle.net/ffvkbLjw/508/

This One Works
javascript enabled
https://jsfiddle.net/ffvkbLjw/502/

Code 3

This One Works
disabled javascript
https://jsfiddle.net/vqtxmoqt/244/

This One Works
enabled javascript
https://jsfiddle.net/vqtxmoqt/267/

Code 4

This One Works
disabled javascript
https://jsfiddle.net/vqtxmoqt/213/

This One Works
enabled javascript
https://jsfiddle.net/vqtxmoqt/269/

2

You’re approaching this all backwards. You don’t start with the finished product and then try and make it work in different situations.

Instead, you create it with the HTML only first, making sure that the HTML all by itself works in different situations. Then when that HTML is working you add on the CSS to make it look better in a wide variety of situations.

Then, when all of that is working, that is when you start working on the JavaScript.

2 Likes
3

How would I get the links to show here:
with javascript disabled

Working Above Code:

Like this one here:
https://jsfiddle.net/ffvkbLjw/402/

Working Above Code:
https://jsfiddle.net/ffvkbLjw/406/

4

The usual process is to not use CSS to hide things by default, and to instead use JavaScript to hide things when the page loads. The usual best-practice technique is have the JavaScript add a classname to page elements.

So to get started, comment out all of the code that results in the links being hidden.

2 Likes
5

All of your links are hidden here…

.hidee,
.wrap a {
  display: none;
}

I assume js had set the display to block

1 Like
6

And then I add this:

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

And get this:

7

Then I do this:

.hidee,
.pausee {
  display: none;
}

And get this:

8

Your players are built with layers of positioned elements. Without the js setting the classes that control those layers you will get the stacked layers your seeing.

That’s why real web pages are not built with absolute positioning which is removed from the flow. They are built with blocks that stack in the normal flow of the document. That way everything works with js or css off.

3 Likes
9

Explain more please.

10

What’s next?

disabled javascript

Removed:

.hidee,
.wrap a {
  display: none;
}

Replaced With:

.hidee,
.pausee {
  display: none;
}

enabled javascript

I never removed

.hidee,
.wrap a {
  display: none;
}

In codes

2
https://jsfiddle.net/ffvkbLjw/402/

3
https://jsfiddle.net/vqtxmoqt/244/

4
https://jsfiddle.net/vqtxmoqt/213/

11

Well, many of us have already posted all of those links before in your other threads. We can’t force you to read them, though we have strongly urged you to many times.

Introduction to CSS layout
Normal layout flow

Normal flow is how the browser lays out HTML pages by default when you do nothing to control page layout. Let’s look at a quick HTML example:

Positioning

Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another,

1 Like
12

How is this not a normal layout flow?

13

Using the position declaration in your CSS code makes it not normal.

14

If I remove it, then it doesn’t look normal.

15

How would I remove the position declaration?

16

You would need to redesign it all from the very beginning.

1 Like
17

Can you show me a general example of what you mean?

18

To build your player where it worked with js or css off you would first make sure it is not confined to your fixed width and height. All components of the player would either stack or sit beside each other. They would not be layered.

Javascript could add a class (that is already in the css) that sets absolute positioning on the layered elements.

Without js they would be position static and stack

2 Likes
19

Just the idea of redesigning it all from the very beginning, results in a lot of pain, and that is why people leave bad and rotting code as it is, without improvement.

If you had listened to the experts here from the very start you would not be faced with this pain now. Much of the time there isn’t the time or the money to fix things and redo them the correct way. Instead, it becomes a hard lesson learned, that you apply the next time that do a similar project.

2 Likes
20

Back to this then:

#10