• Page 1 of 1
  • 1
Forum moderator: bigblog  
uCoz Community » For Webmasters » Design Customization » How to create link to the specific part of the site?
How to create link to the specific part of the site?
BrennusWhiskey
Posts: 26
Reputation: 0

Message # 1 | 12:56 PM
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

Thx in advance tongue tongue tongue
joexyz
JOE-vascript
Posts: 1710
Reputation: 75

Message # 2 | 9:27 PM
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, sorry for the late replies
icon by ch-chau

I'm still here for some godforsaken reason
BrennusWhiskey
Posts: 26
Reputation: 0

Message # 3 | 12:56 PM
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: 1710
Reputation: 75

Message # 4 | 3:27 PM
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, sorry for the late replies
icon by ch-chau

I'm still here for some godforsaken reason
BrennusWhiskey
Posts: 26
Reputation: 0

Message # 5 | 7:39 PM
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?

<!-- <block9278> -->
<div class="sidebox"><div class="sidetitle"><span><!-- <bt> -->TOP 5<!-- </bt> --></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: 1710
Reputation: 75

Message # 6 | 4:57 PM
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, sorry for the late replies
icon by ch-chau

I'm still here for some godforsaken reason
BrennusWhiskey
Posts: 26
Reputation: 0

Message # 7 | 6:31 PM
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: 1710
Reputation: 75

Message # 8 | 7:57 PM
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, sorry for the late replies
icon by ch-chau

I'm still here for some godforsaken reason
BrennusWhiskey
Posts: 26
Reputation: 0

Message # 9 | 8:38 PM
Almost perfect smile But only 1 nick appeared...
Attachments: 7462783.jpg(116.2 Kb)
joexyz
JOE-vascript
Posts: 1710
Reputation: 75

Message # 10 | 4:51 PM
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, sorry for the late replies
icon by ch-chau

I'm still here for some godforsaken reason
BrennusWhiskey
Posts: 26
Reputation: 0

Message # 11 | 5:38 PM
Big thanks. Perfect job! It looks awesome!
uCoz Community » For Webmasters » Design Customization » How to create link to the specific part of the site?
  • Page 1 of 1
  • 1
Search: