Adicionar um parágrafo dentro de um código javascript

[Daniel Z]

Detalhes da questão

Endereço do fórum: http://rpg-players.forumbrasil.net/
Versão do fórum: PunBB

Descrição

Boa note, senhores.

Tenho um java bem simples que exibe esse resultado:



O que eu gostaria, é entre o "Autor" e o "Ordenar por", houvesse um espaço, como dois "<br>" se fosse HTML:

Código:

presets = {
    'Filtrar Por' : {
      'Tempo de Postagem' : href.replace(/sort_by=\d+/, '') + '&sort_by=0',
      'Título do Tópico' : href.replace(/sort_by=\d+/, '') + '&sort_by=1',
      'Autor' : href.replace(/sort_by=\d+/, '') + '&sort_by=2'
     },

    'Ordenar Por' : {
      'Ascendente' : href.replace(/&sort_dir=(?:ASC|DESC)/, '') + '&sort_dir=ASC',
      'Descendente' : href.replace(/&sort_dir=(?:ASC|DESC)/, '') + '&sort_dir=DESC'
      }

Ex:



Poderiam me ajudar?

[Fraise]

Olá!

Creio que seja algo assim:

Código:

Paragrafo1\nParagrafo2\nParagrafo3

Ou seja basta utilizar \n para fazer uma quebra de linha.

Até mais.
Fraise

[Daniel Z]

Olá!

Creio que seja algo assim:

Código:

Paragrafo1\nParagrafo2\nParagrafo3

Ou seja basta utilizar \n para fazer uma quebra de linha.

Até mais.
Fraise

Pior que o código fica inutilizado ao adicionar sua sugestão.

[Fraise]

Poderia então me fornecer o código JS completo para que eu possa efetuar as alterações que o senhor deseja?

Até mais.
Fraise

[Daniel Z]

Poderia então me fornecer o código JS completo para que eu possa efetuar as alterações que o senhor deseja?

Até mais.
Fraise

Claro. Aqui está:

Código:

<script type="text/javascript">
(function() {
  var href = window.location.href,

  presets = {
    'Filtrar Por' : {
      'Tempo de Postagem' : href.replace(/sort_by=\d+/, '') + '&sort_by=0',
      'Título do Tópico' : href.replace(/sort_by=\d+/, '') + '&sort_by=1',
      'Autor' : href.replace(/sort_by=\d+/, '') + '&sort_by=2'
    },
   
    'Ordenar Por' : {
      'Ascendente' : href.replace(/&sort_dir=(?:ASC|DESC)/, '') + '&sort_dir=ASC',
      'Descendente' : href.replace(/&sort_dir=(?:ASC|DESC)/, '') + '&sort_dir=DESC'
      }
  },

  title = $('.page-title')[0],
  container = document.createElement('DIV'), i, j, str = '';
  container.id = 'search_presets';

  if (title) {
    for (i in presets) {
      str += '<span class="preset_label">' + i + ' : </span>';
      for (j in presets[i]) {
        str += '<a class="preset_option ' + ( new RegExp(presets[i][j].replace(/.*?(sort_by=\d+|sort_dir=(?:ASC|DESC))$/, '$1')).test(href) ? 'preset_actif' : '' ) + '" href="' + presets[i][j] + '">' + j + '</a>';
      }
    }
    container.innerHTML = str;
    title.innerHTML = '';
    title.appendChild(container);
  }
})();
</script>

[Fraise]

Veja se está ao seu agrado:

Código:

<script type="text/javascript">
    (function() {
        var href = window.location.href,

            presets = {
                'Filtrar Por\n': {
                    'Tempo de Postagem\n': href.replace(/sort_by=\d+/, '') + '&sort_by=0',
                    'Título do Tópico\n': href.replace(/sort_by=\d+/, '') + '&sort_by=1',
                    'Autor\n': href.replace(/sort_by=\d+/, '') + '&sort_by=2'
                },

                'Ordenar Por\n': {
                    'Ascendente\n': href.replace(/&sort_dir=(?:ASC|DESC)/, '') + '&sort_dir=ASC',
                    'Descendente\n': href.replace(/&sort_dir=(?:ASC|DESC)/, '') + '&sort_dir=DESC'
                }
            },

            title = $('.page-title')[0],
            container = document.createElement('DIV'),
            i, j, str = '';
        container.id = 'search_presets';

        if (title) {
            for (i in presets) {
                str += '<span class="preset_label">' + i + ' : </span>';
                for (j in presets[i]) {
                    str += '<a class="preset_option ' + (new RegExp(presets[i][j].replace(/.*?(sort_by=\d+|sort_dir=(?:ASC|DESC))$/, '$1')).test(href) ? 'preset_actif' : '') + '" href="' + presets[i][j] + '">' + j + '</a>';
                }
            }
            container.innerHTML = str;
            title.innerHTML = '';
            title.appendChild(container);
        }
    })();
</script>

Até mais.
Fraise

[Daniel Z]

Veja se está ao seu agrado:

Código:

<script type="text/javascript">
    (function() {
        var href = window.location.href,

            presets = {
                'Filtrar Por\n': {
                    'Tempo de Postagem\n': href.replace(/sort_by=\d+/, '') + '&sort_by=0',
                    'Título do Tópico\n': href.replace(/sort_by=\d+/, '') + '&sort_by=1',
                    'Autor\n': href.replace(/sort_by=\d+/, '') + '&sort_by=2'
                },

                'Ordenar Por\n': {
                    'Ascendente\n': href.replace(/&sort_dir=(?:ASC|DESC)/, '') + '&sort_dir=ASC',
                    'Descendente\n': href.replace(/&sort_dir=(?:ASC|DESC)/, '') + '&sort_dir=DESC'
                }
            },

            title = $('.page-title')[0],
            container = document.createElement('DIV'),
            i, j, str = '';
        container.id = 'search_presets';

        if (title) {
            for (i in presets) {
                str += '<span class="preset_label">' + i + ' : </span>';
                for (j in presets[i]) {
                    str += '<a class="preset_option ' + (new RegExp(presets[i][j].replace(/.*?(sort_by=\d+|sort_dir=(?:ASC|DESC))$/, '$1')).test(href) ? 'preset_actif' : '') + '" href="' + presets[i][j] + '">' + j + '</a>';
                }
            }
            container.innerHTML = str;
            title.innerHTML = '';
            title.appendChild(container);
        }
    })();
</script>

Até mais.
Fraise

O resultado é visível, mas continua com a mesma aparência inicial:

[MateusAnjosV]

Boa noite @Daniel Z

Preciso que me diga, exatamente, onde utiliza esse código, preciso vê-lo para diagnosticar o problema e sanar a sua dúvida.

[Daniel Z]

Aqui está: http://rpg-players.forumbrasil.net/search?search_keywords=NOVO+T%C3%93PICO

É uma função de busca avançada.

[Fraise]

Certo. Troque por este:

Código:

<script type="text/javascript">
    (function() {
        var href = window.location.href,

            presets = {
                '\nFiltrar Por\n': {
                    '\nTempo de Postagem\n': href.replace(/sort_by=\d+/, '') + '&sort_by=0',
                    '\nTítulo do Tópico\n': href.replace(/sort_by=\d+/, '') + '&sort_by=1',
                    '\nAutor\n': href.replace(/sort_by=\d+/, '') + '&sort_by=2'
                },

                '\nOrdenar Por\n': {
                    '\nAscendente\n': href.replace(/&sort_dir=(?:ASC|DESC)/, '') + '&sort_dir=ASC',
                    '\nDescendente\n': href.replace(/&sort_dir=(?:ASC|DESC)/, '') + '&sort_dir=DESC'
                }
            },

            title = $('.page-title')[0],
            container = document.createElement('DIV'),
            i, j, str = '';
        container.id = 'search_presets';

        if (title) {
            for (i in presets) {
                str += '<span class="preset_label">' + i + ' : </span>';
                for (j in presets[i]) {
                    str += '<a class="preset_option ' + (new RegExp(presets[i][j].replace(/.*?(sort_by=\d+|sort_dir=(?:ASC|DESC))$/, '$1')).test(href) ? 'preset_actif' : '') + '" href="' + presets[i][j] + '">' + j + '</a>';
                }
            }
            container.innerHTML = str;
            title.innerHTML = '';
            title.appendChild(container);
        }
    })();
</script>

Até mais.
Fraise

[Daniel Z]

Desculpe, Fraise, mas não resultou o novo código

[MateusAnjosV]

Hei amigo!

Experimente esse CSS:

Código:

.preset_label:last-of-type {display: block;}

Ou o analise, tenho certeza de que vai conseguir deduzir o que quero dizer.

---

A proposito, excelente código! Podemos transformar esse CSS em javascript, se quiser, ou aplica-lo de mil formas diferentes... Mas eu acho desnecessário.

[Daniel Z]

Realmente, o block/flex/list-item, surtem efeito:





Será que tem como quebrarmos antes do "Ordenar por" para mais um paragrafo?

[MateusAnjosV]

É claro, diga onde, exatamente, ok?
Porque, se remover o :last-of-type, ele vai quebrar outro parágrafo. Teste:

Código:

.preset_label {display: block;}

[Daniel Z]

Testei, Mateus.
Só preciso afastar um pouco mais, um paragrafo, o Ordenar:

[MateusAnjosV]

Entendo.. substitua por esse:

Código:

.preset_label {display: block;padding-top: 10px}

Até.

[Daniel Z]

Rapaz, deu certo mesmo.
Valeu mesmo, @MateusAnjosV.

search_results_posts:

search_results_topics:

Podem fechar

[Fraise]

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".