Getting initial to work at the top of the code?

javascript

#22

Because play and pause are both used by javascript, I've seen techniques where you make specific javascript classes, such as:

<svg class="js-play">...</svg>
<svg class="js-pause">...</svg>

which makes it crystal clear that those are not for styling, and lets you use better techniques to style the play and pause buttons all in one go with tag selectors.


#23

Yes, now that querySelector has good support I see little need to use getElementById and litter my HTML with ids.

And there is no reason to not have more than one class value when it would be useful. eg

<svg class="js-play button play-button-img" ...

#24

https://jsfiddle.net/20998tdo/106/

What would I need to change in the code to be able to use initial at the top, as opposed to in the middle of the html?

  function hideInitialOverlay(button) {
    var link = upTo(button, ".linkse");

Shouldn't that be,

upTo .initiale?


#25

Linkse is playButton5

Instead of 5 I used the letter e.


#26

You're editing previous posts again, making it impossible for people already replying to them to provide any form of sensible response when compared with your edited version.


#27

  function hideInitialOverlay(button) {
    var link = upTo(button, ".linkse");

Shouldn't that be,

upTo .initiale?

Instead?

Should I make that change?


#28

With your putting initiale at the top, it encloses all of the play button, which means that the change you want to make will hide all of the play button.


#29

Isn't there stuff that needs to be changed in the javascript in order for it to work?


#30

Get the HTML structure correct first, then do the CSS, and then finally use JavaScript for the behaviour.
That is the order that you must do your work. It has always been that way, and must always remain that way.


#31

How would I know when the CSS structure is correct?

There's no web console for html that will tell me if something is wrong.

Right now when I look at the html/CSS everything is correct.


#32

At the risk of having this post removed, I have to ask;
in which of these three disciplines has our dear friend
actually been able to attain the required proficiency? :rolleyes:

coothead


#33

Right in what way? Correct structure for its intended purpose? Semantically correct for meaning? HTML that passes a validator check?


#34

The html works hand in glove with the CSS.


#35

I think that one way for things to go better, is to explain the problems that come from his current coding style, and techniques that help to fix some of those problems.

I haven't been observing much of the HTML&CSS threads, so if that's already been done then it doesn't seem to have had much impact.

Is there a way to convey the information, that will have an impact that will help to make easier for him?


#36

I didn't specifically mean somename-someletter or somenname-somenumber. (I've done both in the past).

I was trying to explain that having "sequentially incrementing" names can lead to problems and suggests that what they are working with could benefit by being improved.

It isn't always easy to tell ahead of time where something is heading towards. And by the time it starts to have problems quite often a fair amount of work has already been done. This presents two choices, go back and correct the root cause, or keep going and deal with the problem. The trick is to catch yourself as soon as possible before you get too far down the wrong path.

Using your code so far as an example, you might be willing to edit files every time you want to change one or a few of several links. But what happens if you want to have hundreds of links.

You are free to feel the pain for yourself if you want to experience it. And you are under no obligation to listen to anyone else. Many of us here have felt the pain and have learned the hard way. We offer advice so that others can avoid the pain we have experienced.

IMHO, the place to start is by getting the HTML to where there is no need for having needless redundancy.


#37

This is the html, what's wrong with it?

<div class="initiale">
 <p>Links</p>

  <div class="linkse">
    <a href="" target="_blank"></a>
    <a href="" target="_blank"></a>
    <a href="" target="_blank"></a>
    <a href="" target="_blank"></a>
    <a href="" target="_blank"></a>
    <a href="" target="_blank"></a>
    <a href="" target="_blank"></a>
    <a href="" target="_blank"></a>
    <a href="" target="_blank"></a>
    <a href="" target="_blank"></a>
    <a href="" target="_blank"></a>
    <a href="" target="_blank"></a>
    <a href="" target="_blank"></a>
    <a href="" target="_blank"></a>
    <a href="" target="_blank"></a>

    <div class="playButtone" data-audio="http://hi5.1980s.fm/;">




      <svg class="playe" focusable="false" width="38" height="40" viewbox="0 0 85 100">
        <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
          <title>PLAY</title>
        </path>
      </svg>

      <svg class="pausee hidee" focusable="false" width="36" height="40" viewbox="0 0 60 100">
        <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
          <title>PAUSE</title>
        </path>
      </svg>

    </div>
  </div>

#38

It seems to me I have the html set up correctly.

Initiale is at the top:
text
linkse
playbutton


#39

The initial class wraps the whole button. You cannot hide that initial element without hiding everything else inside of it too.


#40

What are you saying here?


#41

Not that I am aware of. :unhappy:

"You can lead a horse to water......"

coothead