How to create link to the specific part of the site? - uCoz Community

Page 1 of 1 1
Forum moderator: bigblog

How to create link to the specific part of the site?

How to create link to the specific part of the site?

Posts: 30

Reputation: 0

Message # 1 | 12:56 PM 2020-02-09

Hi,
I would like to create a global block which would display a part of the table located on the other sub-page. Something like "TOP 5 PLAYERS", and show inside top 5 places from the table (just the nicknames, or nicknames with points). In the way that changing the table would also change the content of the block. Is this possible? I tried some tricks with anchors but my html is not enough. Any ideas? biggrin

biggrin

biggrin

biggrin

Thx in advance tongue

tongue

tongue

tongue

joexyz

JOE-vascript

Posts: 1770

Reputation: 78

Message # 2 | 9:27 PM 2020-02-10

BrennusWhiskey, I assume what you want can be done with informers but I'm not sure I fully understand what you mean? Can you show me a more thorough example? Or perhaps you could use JavaScript to take the required details from the table, if anything.

hey i'm joe and i do not work for the company anymore, please contact other staff or tech support
icon by ch-chau

sometimes i lurk here

Posts: 30

Reputation: 0

Message # 3 | 12:56 PM 2020-02-11

Thx for the answer. Well in general I would like to get a top part of this table http://h4kings.ucoz.pl/news/league/1-0-6 to be shown in global block on the left. (Create such block) But assuming that I use visual editor and my html is too bad it might be to time-costly process for me. As I understand everytime I copy past a table from excel I would need to add some formula in html...

joexyz

JOE-vascript

Posts: 1770

Reputation: 78

Message # 4 | 3:27 PM 2020-02-11

Quote BrennusWhiskey (

)

I would like to get a top part of this table https://u.to/ZjNzFw to be shown in global block on the left

With pure HTML? It's not possible. It is, however, possible using JavaScript. Use the following code as the block's HTML code:

Code

<table width="100%" border="1" cellspacing="0">
  <tbody>
    <script>
      fetch('/news/league/1-0-6')
        .then(res => res.text())
        .then(html => {
           const parser = new DOMParser();
           const result = parser.parseFromString(html, 'text/html');

           const table = result.querySelector('.eMessage table');
           const rows = table.querySelectorAll('tr');

           Array.from(rows).slice(0, 6).forEach(row => {
            const nick = row.querySelector('td:nth-child(2)'); // provided that the second column is the nickname
            const ranking = row.querySelector('td:last-child'); // the last column is the ranking

            document.write(`<tr><td>${nick.innerHTML}</td><td>${ranking.innerHTML}</td></tr>`);
          });
        })
        .catch(console.error);
    </script>
  </tbody>
</table>

Quote BrennusWhiskey (

)

I use visual editor and my html is too bad

I would greatly recommend learning HTML instead of relying solely on the visual editor as the output it produces is often broken and you'll make great use of knowing HTML anyway.

hey i'm joe and i do not work for the company anymore, please contact other staff or tech support
icon by ch-chau

sometimes i lurk here

Posts: 30

Reputation: 0

Message # 5 | 7:39 PM 2020-02-12

Thank you for the code. It doesn't work unfortunately. The result is blank page with extracted text from table. Maybe the blocks in this template do not support Java? The block should be like that?


<div class="sidebox"><div class="sidetitle"><span>TOP 5</span></div>
<div class="inner">
<table width="100%" border="1" cellspacing="0">
<tbody>
<script>
fetch('/news/league/1-0-6')
.then(res => res.text())
.then(html => {
const parser = new DOMParser();
const result = parser.parseFromString(html, 'text/html');

const table = result.querySelector('.eMessage table');
const rows = table.querySelectorAll('tr');

Array.from(rows).slice(0, 6).forEach(row => {
const nick = row.querySelector('td:nth-child(2)'); // provided that the second column is the nickname
const ranking = row.querySelector('td:last-child'); // the last column is the ranking

document.write(`<tr><td>${nick.innerHTML}</td><td>${ranking.innerHTML}</td></tr>`);
});
})
.catch(console.error);
</script>
</tbody>
</table>
</div>
<div class="clr"></div>
</div>

joexyz

JOE-vascript

Posts: 1770

Reputation: 78

Message # 6 | 4:57 PM 2020-02-13

BrennusWhiskey, please don't delete the block! I can't check what's wrong if the block isn't there.

Please use the CODE tags when posting code on the forums next time.

Quote BrennusWhiskey (

)

Maybe the blocks in this template do not support Java?

JavaScript is to Java as "hamster" is to "ham". And every template is just a HTML, which means JavaScript works in every template.

hey i'm joe and i do not work for the company anymore, please contact other staff or tech support
icon by ch-chau

sometimes i lurk here

Posts: 30

Reputation: 0

Message # 7 | 6:31 PM 2020-02-13

I am sorry for deleting the block but it just broke the page.

This is the result with such a block inside:

Attachments: 8874268.png (65.2 Kb)

joexyz

JOE-vascript

Posts: 1770

Reputation: 78

Message # 8 | 7:57 PM 2020-02-14

BrennusWhiskey, alright, try this:

Code

<table width="100%" border="1" cellspacing="0">
  <tbody id="top5">
    <script>
      const tbody = document.getElementById('top5');

      fetch('/news/league/1-0-6')
        .then(res => res.text())
        .then(html => {
           const parser = new DOMParser();
           const result = parser.parseFromString(html, 'text/html');

           const table = result.querySelector('.eMessage table');
           const rows = table.querySelectorAll('tr');

           Array.from(rows).slice(0, 6).forEach(row => {
            const nick = row.querySelector('td:nth-child(2)'); // provided that the second column is the nickname
            const ranking = row.querySelector('td:last-child'); // the last column is the ranking

            tbody.innerHTML = `<tr><td>${nick.innerHTML}</td><td>${ranking.innerHTML}</td></tr>`;
          });
        })
        .catch(console.error);
    </script>
  </tbody>
</table>

hey i'm joe and i do not work for the company anymore, please contact other staff or tech support
icon by ch-chau

sometimes i lurk here

Posts: 30

Reputation: 0

Message # 9 | 8:38 PM 2020-02-14

Almost perfect smile

smile

But only 1 nick appeared...

Attachments: 7462783.jpg (116.2 Kb)

joexyz

JOE-vascript

Posts: 1770

Reputation: 78

Message # 10 | 4:51 PM 2020-02-15

BrennusWhiskey, whoops, I made a typo.

Code

<table width="100%" border="1" cellspacing="0">
  <tbody id="top5">
    <script>
      const tbody = document.getElementById('top5');

      fetch('/news/league/1-0-6')
        .then(res => res.text())
        .then(html => {
           const parser = new DOMParser();
           const result = parser.parseFromString(html, 'text/html');

           const table = result.querySelector('.eMessage table');
           const rows = table.querySelectorAll('tr');

           Array.from(rows).slice(0, 6).forEach(row => {
            const nick = row.querySelector('td:nth-child(2)'); // provided that the second column is the nickname
            const ranking = row.querySelector('td:last-child'); // the last column is the ranking

            tbody.innerHTML += `<tr><td>${nick.innerHTML}</td><td>${ranking.innerHTML}</td></tr>`;
          });
        })
        .catch(console.error);
    </script>
  </tbody>
</table>

hey i'm joe and i do not work for the company anymore, please contact other staff or tech support
icon by ch-chau

sometimes i lurk here

Posts: 30

Reputation: 0

Message # 11 | 5:38 PM 2020-02-15

Big thanks. Perfect job! It looks awesome!

How to create link to the specific part of the site?

Page 1 of 1
1