How to replace a string depending on page resolution

Asked

Viewed 108 times

0

I’m new to programming, so I don’t know how to use a lot of technical terms. I have an html pagination file. When I arrive on Mobile, the words "Previous" and "next" break line and stay below each other. I would like to abbreviate them only to "Ant." and "Prod.", but only when reaching resolution with a width of 370px.

I don’t know how to handle this code that is in html (It was already ready), so I thought I would use Javascript to replace the String when it reaches this width.

HTML code:

<div class="paginate-links">
{% if paginate.params.pageCount > 1 %}

    {% if paginate.hasPrev %}
        {{ paginate.prev('< Anterior', {'class': 'page-prev page-link'}) }}
    {% endif %}

    {{ paginate.numbers({
        'modulus': 4,
        'separator': '',
        'class': 'page-link',
        'currentClass': 'page-current'
    }) }}

    {% if paginate.hasNext %}
        {{ paginate.next('Próxima >', {'class': 'page-next page-link'}) }}
    {% endif %}

{% endif %}
</div>

<script type="text/javascript" src="js/main.js"></script>

I tried to program something in Javascript, but I’m not getting:

resolutionMobile = function () {
    var resolutionWidth = window.innerWidth;
    var buttonPrev = document.getElementsByClassName('page-prev');

    if (resolutionWidth <= 370) {
        buttonPrev.replace ("< Anterior", "< Ant.");
    }
};

Thanks for all your help.

javascript html string
  • 2

    Hello Thiago. Here we prefer questions also that can help other developers who are having problems similar to yours. Try to edit your question to make it more generic. Ex: how to replace the text of a link, depending on the resolution of the page.

3 answers

9

A little bit of CSS solves:

Ant<span class="wideonly">erior</span>

and then hide with an @media:

@media only screen and (max-width: 800px) {
  .wideonly {display:none}
}

This @media will be worth up to 800px width (from viewport, either page or iframe - it’s not the width of the element, it’s the whole viewport). I used this value to do the following demo, just adjust to the desired width for your project.

Most likely in your CSS you will already have some @media taking care of other aspects for mobile, which you can use to insert the .wideonly.

Still, if you prefer, you can reverse the logic by making the default span hidden, and showing with @media ... min-width, if your design is mobile-first.

If you want the dot at abbreviation time, just use the same logic, but put a ::after {content:"."} in the element where the abbreviated word is.

I just don’t recommend using the content to change the whole word so as not to disturb the semantics of the page.


Demonstrating

Use the "whole page"/"close" link to toggle the two views. I structured in a slightly different way from the beginning of the question to show a variation of the technique.

@media screen and (max-width: 800px) {
  .abrev span {display:none}    /*esconde um pedaço*/
  .abrev::after {content:"."}   /*acrescenta o ponto*/
}
<span class="abrev">Ant<span>erior</span></span> |
<span class="abrev">Próx<span>imo</span></span>

  • 1

    Wow! Really, a little bit of CSS solves... Great idea. + 1 :)

4

You must create a Istener resize to "know" whenever the window has its size changed. Something like this:

function setText() {
  const element = document.querySelector('#el');

  // Você pode usar media queries usando `window.matchMedia`:
  if (window.matchMedia("(max-width: 600px)").matches) {
    element.textContent = 'Menor ou igual que 600px';
  } else {
    element.textContent = 'Maior que 600px';
  }
}

// Quando a página carregar, também queremos definir
// o texto corretamente, assim como sempre que a
// janela for modificada.
window.addEventListener('load', setText);
window.addEventListener('resize', setText);
<div id="el"></div>

In the snippet above, click "Expand Code Snippet" and go by changing the size of your window to test. :)

Reference:

  • 2

    Why the negative?

  • 2

    I was curious too. However my +1 is given, much more sensible than using jQuery for this, as has been suggested

3


Just listen to the screen size, when it reaches 370px wide you change the desired text.

Apply this logic below

<!-- @cleefsouza -->
<!DOCTYPE html>
<html>
<head>
    <title>JS</title>
    <meta charset="utf-8">
</head>
<body>
    <!-- labels -->    
    <label id="anterior">Anterior</label>
    <label id="proxima">Próxima</label>

    <!-- jquery cdn -->
    <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous">
    </script>

    <script type="text/javascript">
        function tamanhoTela(){
            var windowWidth = window.innerWidth; // Largura
            var windowHeight = window.innerHeight; // Altura

            if (parseInt(windowWidth) <= 370) {
                $('#anterior').text('Ant.');
                $('#proxima').text('Próx.');
            } else {
                $('#anterior').text('Anterior');
                $('#proxima').text('Próxima');
            }
        };

        tamanhoTela();

        window.addEventListener('resize', function(){
            tamanhoTela();  
        });
    </script>
</body>
</html>
  • 1

    I was able to do it using this method. But all the answers opened my mind to other works that I was also doing gambiarra style. I thank you all for your help.

Browser other questions tagged javascript html string

You are not signed in. Login or sign up in order to post.