CODEWITHSUNDEEP
javascripthtmlcss
AlexG
AlexG

Reputation: 193

Jumping down anchors (in a table)

Seems to works sometimes, and other times it doesn't. It's incredibly rough and horrible to use.

simplified layout:

var index = 1
function next() {
  if (index <= 4){
    window.location.replace('#r' + index.toString());
    index++;
  }
}
function previous() {
  if (index > 1){
    index--;
    window.location.replace('#r' + index.toString());
  }
}
.what {
  height: 500px;
}
<a href="#" onclick='next()' id="nxt">Next</a>
<a href="#" onclick='previous()' id="prev">Previous</a>

<body>
<table>
  <tr class="what">
    <td id="r1">r</td>
    <td>o</td>
    <td>w</td>
    <td>1</td>
  </tr>
  <tr class="what">
    <td id="r2">r</td>
    <td>o</td>
    <td>w</td>
    <td>2</td>
  </tr>
  <tr class="what">
    <td id="r3">r</td>
    <td>o</td>
    <td>w</td>
    <td>3</td>
  </tr>
  <tr class="what">
    <td id="r4">r</td>
    <td>o</td>
    <td>w</td>
    <td>4</td>
  </tr>
</table>
</body>

For some reason, it seems to only work for id#r1 and id#r4. Is there a better, smoother way of doing this?

Upvotes: 3

Views: 61

Answers (2)

repzero
repzero

Reputation: 8402

var index = 1
function next() {
  if (index < 4){
  index++;
    window.location.hash=('#r' + index.toString());
    console.log('next',window.location.hash)
  }
}
function previous() {
  if (index > 1){
    index--;
    window.location.hash=('#r' + index.toString());
    console.log('prev',window.location.hash)
  }
}
.what {
  height: 500px;
}
<a href="javascript:void(0)" onclick='next()' id="nxt">Next</a>
<a href="javascript:void(0)"onclick='previous()' id="prev">Previous</a>

<body>
<table>
  <tr class="what">
    <td id="r1">r</td>
    <td>o</td>
    <td>w</td>
    <td>1</td>
  </tr>
  <tr class="what">
    <td id="r2">r</td>
    <td>o</td>
    <td>w</td>
    <td>2</td>
  </tr>
  <tr class="what">
    <td id="r3">r</td>
    <td>o</td>
    <td>w</td>
    <td>3</td>
  </tr>
  <tr class="what">
    <td id="r4">r</td>
    <td>o</td>
    <td>w</td>
    <td>4</td>
  </tr>
</table>
</body>

Upvotes: 1

Ouroborus
Ouroborus

Reputation: 16896

The links are still doing what they normally do. This means there will be interference between trying to set location to #r1 and the link trying to set location to #.

Instead, setup the event handlers through javascript and use preventDefault() to stop the links from doing their default action.

I took the liberty of correct some other, minor bugs as well.

var index = 0
function next(event) {
  if (index < 4){
    index++;
    window.location.replace('#r' + index.toString());
  }
  event.preventDefault();
}
function previous(event) {
  if (index > 1){
    index--;
    window.location.replace('#r' + index.toString());
  }
  event.preventDefault();
}
document
  .getElementById('nxt')
  .addEventListener( 'click', next );
document
  .getElementById('prev')
  .addEventListener( 'click', previous );
table {
  width:100%;
}
.what {
  height: 100px;
  margin: 10px;
  background-color: pink;
}
<a href="#" id="nxt">Next</a>
<a href="#" id="prev">Previous</a>

<body>
<table>
  <tr class="what">
    <td id="r1">r</td>
    <td>o</td>
    <td>w</td>
    <td>1</td>
  </tr>
  <tr class="what">
    <td id="r2">r</td>
    <td>o</td>
    <td>w</td>
    <td>2</td>
  </tr>
  <tr class="what">
    <td id="r3">r</td>
    <td>o</td>
    <td>w</td>
    <td>3</td>
  </tr>
  <tr class="what">
    <td id="r4">r</td>
    <td>o</td>
    <td>w</td>
    <td>4</td>
  </tr>
</table>
</body>

Upvotes: 1

Related Questions