Ir para conteúdo

Omar~

Members
 Perfil  Explorar Conteúdo

  • Total de itens

    1325

  • Registro em

  • Última visita

  • Dias vencidos

    15

Posts postados por Omar~

  1. Postado

    Para fazer isso você vai ter que redefinir todos os arquivos que estejam no input.

    O segredo é obter o nome ou qualquer informação da imagem que possa ser comparado com o objeto FileList do input.files.

    Então você compara se essa informação não condiz com as demais, adicionando o atual aquivo "que não seja o que vai ser removido" e o adiciona a um objeto que seja capaz de interpretara-lo.

    Para esse afim você pode está usando a API nativa DataTransfer.

    Por fim você redefine o [input].files com todos arquivos.

    Exemplo: 

    <input type="file" multiple="" />

<button onclick="exemplo()">Remover</button>
<button onclick="ver()">Ver Arquivos</button>

<script>
    var input = document.querySelector('input');

    function exemplo() {
        var dataT = new DataTransfer();

        for (var i = 0; i < input.files.length; i++) {
            // No caso se o nome do arquivo que está não input for imagem.jpg
            if (input.files[i].name !== 'imagem.jpg') {
                dataT.items.add(input.files[i]);
            }
        }
        input.files = dataT.files;
    }

    function ver() {
        console.log(input.files);
    }
</script>

     

  2. Postado

    https://www.php.net/manual/en/function.htmlentities.php

    Caracteres como < se tornam &lt; substituindo todo exceto 1 caractere especial por entidades.

    Até existe a função para voltar ao estado original, mas não necessário porque se é &lt; o html mostra < e por aí vai

    Por exemplo para melhorar o htmlentities 

    function salvar($str) {
    $escapa = (string) preg_replace('/`/', '&acute;', $str);
    return (mb_convert_encoding(htmlentities($escapa), 'UTF-8', 'ASCII'));
}

     

  3. Postado

    Apesar de ser um recurso utilizar múltiplos em uma tag <select> não é recomendado porque ela pode causar confusão para um usuário saber interagir corretamente, para fins de múltipla seleção prefira usar tags <input type="checkbox" /> .

     

    E para solucionar se um valor pode ser um número ou não nem precisa usar expressões regulares basta apenas usar essa função:

    https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/isNaN

  4. Postado

    Me parece que a API DataTransfer não servirá para essa finalidade.

    Acredito que croppedCanvas.toDataURL() seja um base64 da imagem cortada.

    Verifique no console do navegador usando: 

    console.log( croppedCanvas.toDataURL() );

    Se for então adicione esse código ao valor de um textarea, esse textarea você o mantém escondido no form, então no back-end você usa a informação do textarea para criar uma imagem.

    É esse método que uso para salvar imagens usando meu script para corte de imagens: https://github.com/Spell-Master/sm-web/tree/master/javascript/ImageCut

  6. Postado

    É possível sim, porém desencorajo a você optar por isso.

    Além de consumir dados móveis do usuário (SEM AUTORIZAÇÃO) terá algo que não irá funcionar de imediato, uma vez que o conteúdo deve ser baixado (mesmo sendo um vídeo do youtube)/ processado só então a coisa começaria a funcionar.

    Atrasando assim o carregamento do website violando as boas práticas de acessibilidade.

  7. Postado

    Fica difícil ajudar só com a explicação sem ver o que está acontecendo.

    Mas se fosse comigo partiria do princípio que algo não carregou ou carregou de forma errônea.

    Pois já me esbarrei algumas vezes em algo similar e forma que usei para encontrar a raiz do problema foi usar o inspetor do navegador e analisar coisa a coisa.

    Digo a você que abra o inspetor e vá logo na aba console e tente sanar eventuais erros e alertas ali apresentado.

    Veja também através do inspetor os arquivos fonte, se os css e os javascripts estão todos alí com seu código original, veja se a estrutura html está correta e por aí vai....

     

  8. Postado

    Como assim?!

    O que tem haver $credito com o resultado a obter?

    Como é o array $shows?

    De onde vem isso?

    9 horas atrás, k9studio disse:

    fatura 1 Valor 20,00

    De onde vem isso?

    9 horas atrás, k9studio disse:

    -100 marca como pago

     

     

    Especulando seria usar condicionais dentro do laço de repetição, mas como não dar para saber corretamente a dúvida a resposta não seria coesa.

  9. Postado

    Não é o queryselector que está executando um loop porque essa função nativa não se reexecuta nem devolve múltiplos dados apenas o primeiro elemento encontrado.

    É a própria biblioteca jQuey que está fazendo esses loops.

    É esse trecho mesmo identifiquei um loop sendo gerado, que vai executar 2 ou mais voltas: 

    $('.editor_' + class_limpa + '').focus(function (e) {
    $(this).on("keyup", function () {
        $('#' + class_limpa + '').html($(this).html());
        $('.status_' + class_limpa + ' span').show().html("Digitando...");
    });
});

    2 voltas é certo pois .editor_ ..... possui 2 no seu exemplo

    São dois elementos, mas daí para cada tecla pressionada/segurada aumenta em 2 voltas o loop.

     

    Deixo um a dica para você:

    Ao invés de ficar usando alert( .... )

    Use console.log( o que você que ver )

    Abra o inspetor do navegador e vá na aba console, com o uso do console mesmo, poderá ver onde seu código está sendo executado novamente.

  10. Postado

    Uma alternativa é ao invés de redirecionar a url, carregar os conteúdos por AJAX.

     

    Outra forma que pode ser usado é criar uma espécie de site-map, onde um arquivo contém um array, nesse contém uma lista dos arquivos a serem carregados de acordo com cada url fake.

    Uma vez acessado alguma url através desse arquivo carregar/inserir/trocar no escopo do documento index.

    É como se fosse uma url assim:  dominio/ola_mundo

    E o que seria carregado é por exemplo: hello_world.php

  11. Postado

    12 horas atrás, Jazara disse:

    O que devo estudar para conseguir este resultad

    Prototypes

    Além do mais deixar o jquery de lado até conseguir ter um mínimo de habilidade para manipular o javascript (jQuery não é javascript)

    Depois você poderá usa-lo tranquilamente de forma efetiva pois já vai ter noção mais ampla do javascript.

     

    Exemplo:

    $ seria uma função que recebe de parâmetro uma string essa função irá buscar o elemento no documento seu retorno, seria usando o objeto da instância desse elemento.

    Porém a função $ seria um prototype de outra função que regularia o que deve ser feito a cada etapa.

    Então anima_galeria também seria um prototype da função mãe, que por sua vez pega o retorno de $ e o retorno de anima_galeria e executa o que tem de fazer.

    Ou seja $ e anima_galeria  nada mais que são prototypes de outra função

     

    Veja que criei exatamente um script que faz isso:

    Função mãe reguladora (uma class): https://github.com/Spell-Master/sm-web/blob/master/javascript/jsd/js-default.js#L29

    Função responsável por obter o objeto de trabalho: https://github.com/Spell-Master/sm-web/blob/master/javascript/jsd/js-default.js#L49

    Linha a qual pega todas funções que estão em objetos de diz que o prototype da função mãe serão todas as demais funções:

    https://github.com/Spell-Master/sm-web/blob/master/javascript/jsd/js-default.js#L1571

    Um exemplo: 

    <div id="pai">
  <div class="filho"></div>
</div>
<script>
  jsd('#pai').find('.filho').index(0).html('<div style="color:red">Olá mundo</div>');
  // ou
  //jsd('#pai').find('.filho').html('<div style="color:red">Olá mundo</div>');
</script>

     

    12 horas atrás, Jazara disse:

    $("#destaques").anima_galeria(function(){ var exibir_seta = 1; });

    Isso são callbacks, anima_galeria é uma função que executa outra função anônima.

     

    12 horas atrás, Jazara disse:

    $("#mais_vendidos").anima_galeria( var exibir_seta = 0; );

    Isso não é possível uma vez que var é uma global ela não pode ser definida dentro de um parâmetro.

     

    Porém o próprio jQuery possui uma função que pode estender funções personalizadas a ele.

    A função não sei exatamente como a usa porque não mexo com jquery:

    jQuery.extend( /* .... */);

     

    Bom, foi mais ou menos isso que entendi sobre sua dúvida.

     

  13. Postado

    Olhando um cenário onde você tem lá uma lista de pessoas ou mesmo uma página de perfil de uma pessoa.

    Logo então você tem o formulário de envio para essa pessoa certo?

    Nesse cenário você já fez a leitura do banco de dados então pode preencher o valor de

    um input com o e-mail daquela pessoa ao qual vai enviar.

     

    Olhando outro cenário onde uma página contém o formulário, mas não há designação para quem deve ser enviado.

    Nesse caso algumas alternativas podem se tomadas como por exemplo:

    • Criar um botão que executará um uma busca pelos e-mails disponíveis para envio no banco de dados, e através de script preencher um valor de input com o e-mail designado.
    • Criar uma tag <select> no formulário que conterá todos  e-mails disponíveis para envio no banco de dados.

    Em ambas alternativas é mais ágil e eficaz pré carregar todos os dados dos e-mails no carregamento da página.

     

     

    De qualquer forma para definir um valor a $emailDestino você deve repassar pelo formulário algum dado que possa ser usado para buscar determinado registro no banco de dados.

  14. Postado

    Há diversas formas de como proceder, mas cada uma depende do contexto final.

    O jeito mais simples e robusto pode se feito similar a isso: 

    <select name="" id="select1">
    <option value=""></option>
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
</select>

<div id="id1" class="id1"> 1</div>
<div id="id2" class="id2"> 2</div>

<script>
    var select1 = document.getElementById('select1'),
        id1 = document.getElementById('id1'),
        id2 = document.getElementById('id2'),
        valorSelecionado = select1.value;

    mostraHTML();

    select1.addEventListener('change', trocar, false);

    function trocar(evento) {
        valorSelecionado = evento.target.value;
        mostraHTML();
    }

    function mostraHTML() {
        switch (valorSelecionado) {
            case 'item1':
                id1.innerHTML = 'APRENDIZ';
                id2.innerHTML = 'APRENDIZ';
                break;
            case 'item2':
                id1.innerHTML = 'ALUNO';
                id2.innerHTML = 'ALUNO';
                break;
            default:
                id1.innerHTML = 'TETE';
                id2.innerHTML = 'TETE';
                break;
        }
    }
</script>

     

  16. Postado

    Primeiro nesse caso não se usará a tag <table> e sim um conjunto de tags <div>.

    Só que tem uma questão:

    Como a estrutura deve ficar quando não houver mais espaço na horizontal para exibir dessa forma?

    Ou simplesmente contrair tudo e permanecer como está?

    Exemplo:

    A imagem que colocou aí em uma tela digamos de um pc desktop.

    E como ficaria na tela de um smartphone

     

  18. Postado

    A solução apresentada pelo @Motta é interessante no contexto geral.

     

    Mas como é PHP sugiro uma query usando ORDER BY pelo valor, assim você armazena o resultado da query em um array e apenas ignora o(s) índice(s) finais do array no back-end.

    Dessa forma não seria necessário duas investidas na mesma tabela (dois select na mesma tabela).

    Em termos de performasse da na mesma coisa.

  19. Postado

    Só complemetenado o que o @washalbano disse...

    É uma tenária que resume de uma forma mais prática e simples algo sem sentido de uso: 

    if (JSON.parse(localStorage.getItem("CART"))) {
  let cart = JSON.parse(localStorage.getItem("CART"));
} else {
  let cart = [];
}

// >> ou em resumo

var condicao = JSON.parse(localStorage.getItem("CART"));
if (condicao) {
  let cart = condicao;
} else {
  let cart = [];
}

     

  20. Postado

    Estou mechendo com uma função aqui e não estou conseguindo elaborar um calculo para filtrar quais elementos serão os alvos.

    Basicamente serão listas, ao licar em um item de uma lista todas as demais listas mostram o mesmo resultado.

    Tudo bem até então... O problema está em:

    Ao clicar no segundo item da lista os dois próximos itens são exibidos, ao clicar por exempo no item 3 o item 2 e 4 também são exibidos e ao clicar no penúltimo item os dois itens anteriores devem ser exibidos. 

    Sempre assim 3 itens serão exibidos ao mesmo tempo em cada lista, e sempre ignorando o primeiro e o último item de cada lista e dando destaque ao item clicado.

     

    Como o primeiro e o ultimo não vão ser ocultados digamos que o segundo é o primeiro e penúltimo é o ultimo, pois eles serão usados para navegar ao primeiro e o último.

    Quem quiser dar um força aqui agradeço porque não estou vendo um solução para o caso, pode ser até algo bobo que não está me vindo a cabeça.

    Segue o código:

    Spoiler 
    
<style>
    ul {list-style: none}
    li {
        display: inline-block;
        padding: 10px;
        background: darkgray;
        border: 1px solid black
    }
    li.destacar {background:blue}
    li.esconder {display:none}
</style>

<ul>
    <li data-clique="0">A - Não alterar</li>
    <li data-clique="0">A - 0</li>
    <li data-clique="1">A - 1</li>
    <li data-clique="2">A - 2</li>
    <li data-clique="3">A - 3</li>
    <li data-clique="4">A - 4</li>
    <li data-clique="5">A - 5</li>
    <li data-clique="5">A - Não alterar</li>
    <li>Extra não alterar</li>
</ul>

<ul>
    <li data-clique="0">B - Não alterar</li>
    <li data-clique="0">B - 0</li>
    <li data-clique="1">B - 1</li>
    <li data-clique="2">B - 2</li>
    <li data-clique="3">B - 3</li>
    <li data-clique="4">B - 4</li>
    <li data-clique="5">B - 5</li>
    <li data-clique="5">B - Não alterar</li>
    <li>Extra não alterar</li>
</ul>

<script>
    var ul = document.querySelectorAll('ul');
    var clique = document.querySelectorAll('[data-clique]');
    clique.forEach(function (e) {
        e.addEventListener('click', trocar, false);
    });

    function trocar(alvo) {
        var cliqueAtual = parseInt(alvo.target.dataset.clique);
        var int;
        var ultimo = 0;

        for (var i = 0; i < ul.length; i++) {
            clique = ul[i].querySelectorAll('[data-clique]');

            ultimo = (clique.length - 1);

            for (var j = 0; j < clique.length; j++) {
                int = parseInt(clique[j].dataset.clique);
                
                clique[j].classList.remove('destacar');
                clique[j].classList.remove('esconder');

                if (int === cliqueAtual) { // detaca o que foi clicado
                    clique[j].classList.add('destacar');
                }
                if (j !== 0 && clique[j] !== clique[ultimo]) { // ignora o primeiro e o último
                    if (int > (cliqueAtual + 1)) {
                        clique[j].classList.add('esconder');
                    }
                    if (int < (cliqueAtual - 1)) {
                        clique[j].classList.add('esconder');
                    }
                }

            }
        }
    }
</script>

     

     

    Na verdade a coisa é bem mais complexa que isso, mas resolvendo esse exemplo posso chegar a solução da função real, isso apresentado aqui só foi para simplificar para o fórum.

  21. Postado

    Assim como o colega sitou; você nunca deve possuir mais de um elemento com o mesmo id=""

    E isso já vi que lhe foi dito várias/milhares vezes, então porque continua comentendo o mesmo erro?

     

    Bem, mesmo que não deveria fazer isso vou lhe dar o que está tentando fazer já mastigado e engolido.

    É algo completamente abstraído ou seja não há muito o que se preocupar com todo o contexto pois o único que vai saber quais elementos devem ser manipulados é o javascript.

    Então só informar uma tag <div> com um id (QUE NUNCA DEVE SE REPETIR) para a função e ela faz o resto

    Dentro dessa tag <div> você coloca os elementos <a> de dentro desses a img

      

    <style>
    #box1 {
        max-width: 190px;
        height: 60px;
        position: relative;
        overflow: hidden
    }
    #box1 > a {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity .8s linear
    }
    #box1 > a.selected {
        opacity: 1
    }
    #box1 > a > img {
        width: 100%;
        height: inherit
    }
</style>

<div id="box1">
    <a href="link1"> <img src="slide1.png" alt="" /> </a>
    <a href="link2"> <img src="slide2.png" alt="" /> </a>
    <a href="link3"> <img src="slide3.png" alt="" /> </a>
    <a href="link4"> <img src="slide4.png" alt="" /> </a>
</div>

<script>
    function slide(ID_UNICO) {
        var caixa = document.getElementById(ID_UNICO),
            limite = (caixa.childElementCount - 1),
            contador = 0,
            intervalo = undefined;

        caixa.children[0].classList.add('selected');

        intervalo = setInterval(exemplo, 1000);

        function exemplo() {
            caixa.children[contador].classList.remove('selected');

            (contador === limite ? contador = 0 : contador++);

            caixa.children[contador].classList.add('selected');
        }

        caixa.addEventListener('mouseenter', function () {
            clearInterval(intervalo);
        }, false);

        caixa.addEventListener('mouseleave', function () {
            intervalo = setInterval(exemplo, 1000);
        }, false);
    }

    slide('box1'); // Informe o id="" do local onde contém os elementos
</script>

     

  22. Postado

    Bom, eu não uso o PHPStorn uso o ApacheNetBeans e isso no netbeans quer dizer que a erros de código no(s) arquivo(s)

    Na maioria das vezes erros bobos de escrita é um simbolo aqui ou ali que não deveria ter a falta de algum contexo etc...

    Se for isso mesmo acredito que ele te informa "em vermelho" o arquivo, abrindo-o ele te informa a linha do erro, geralmente marcada em vermelho também.

     

  23. Postado

    Renderizar que dizer que os conteúdos já vão está no documento, não sendo necessário carregar novamente ou ficar carregando repetitivamente a mesma coisa.

    No entando dependendo do contexto pode ser necessário que o conteúdo seja atualizado e isso pode ser feito somente quando for necessário.

    A ferramenta para isso eu sugiro: https://socket.io/

     

    No seu caso a função load do jQuery irá executar um ajax toda vez que o elemento é clicado, ou seja o conteúdo a ser exibido tem que ser recarregado tanto para seu usuário quanto para seu servidor. Que tem de analizar a requisição > processar-la > obter o retorno > definir o html e entregar pera o usuário, daí o hadware do usuário recebe os dados > analiza > compila > depois re-escreve o html.

    Ou seja almenta o custo de processamento para ambos.

     

    Sobre o expandir ou recolher o(s) elemento(s)

    A coisa é simples:

    Ter um elemento no caso um <button> que se refere a outro elemento, quando esse buttom é clicado seu elemento de referência é expandido e os demais elementos iguais são retraídos.

    Bastando apenas utilizar do CSS onde um classificador diz que o elemento tem altura 0 "zero", ao clicar o obtão que o ferere, um função checa todos semelhantes aqueles que não é o alvo o classificador que diz que o elemento deve ter zero de altura é adicionado. E no alvo esse classificador é removido.

    Veja um exemplo bem básico:

    Spoiler 
    
<style>
    div[data-toggle] {
        overflow: hidden;
        /* Exemplo aplicando o feito de expansão */
        height: 200px;
        transition: height .5s linear;
    }
    div[data-toggle].retraido {
        height: 0
    }

    /* Apenas para mostrar uma cor de fundo */
    div[data-toggle]:nth-child(1) {
        background: red
    }
    div[data-toggle]:nth-child(2) {
        background: blue
    }

</style>

<button data-toggle="1">Alvo 1</button>
<button data-toggle="2">Alvo 2</button>


<div class="retraido" data-toggle="1">
    <p>Lorem ipsum dolor sit amet</p>
    <p>Este conteúdo já está renderizado, não será recarregado</p>
</div>
<div class="retraido" data-toggle="2">
    <p>Curabitur pretium tincidunt lacus</p>
    <p>Este conteúdo já está renderizado, não será recarregado</p>
</div>


<script>
    var div = document.querySelectorAll('div[data-toggle]');

    document.querySelectorAll('button[data-toggle]')
    .forEach(function (e) {
        e.addEventListener('click', exemplo, false);
    });

    function exemplo(e) {
        for (var i = 0; i < div.length; i++) {
            if (div[i].dataset.toggle === e.target.dataset.toggle) {
                div[i].classList.toggle('retraido');
            } else {
                div[i].classList.add('retraido');
            }
        }
    }
</script>

     

    Lógico que para um efeito mais preciso principalmente para ter a correta altura dos elementos é necessário maior intenvensão do script, mas com o básico já se dar para ter a ideia como a coisa tem de ser...

    Retraia tudo, quando for o alvo expanda se ele ainda não foi expandido, do contrário se ele já está expandido retraia ele.

  24. Postado

    Não vou reinventar a roda aqui porque já criei um script para tal....

    https://github.com/Spell-Master/sm-web/tree/master/javascript/Accordion

     

    Uma ponderação....

    Quer dizer que toda vez que uma pessoa clicar um conteúdo será recaregado mesmo sem precisar recarregar?

    Tire essa coisa de .load do jquery, pré renderize tudo você pouca internert dos seus usuários e agiliza em muito "MAS MUITO MESMO" no desempenho.

    Caso seja necessário uma suposta atualização coisa que não acredito que seja, use o socket para ver se algo foi modificado e então re-defina o html e nada de usar essa coisa de load do jquery

  25. Postado

    11 horas atrás, Felipe Guedes Coutinho disse:

    Sabe me dizer o que estou fanzendo de errado?

    Não está fazendo nada de errado.

    O problema que para XMLHttpRequest ser aceito pelo navegador é necessário um protocolo http.

    Francamente nunca usei o javascript sem um protocolo http, acredito eu que nem seja a linguagem mais adequada para esse fim, preferiria usar C++.

     

    11 horas atrás, Felipe Guedes Coutinho disse:

    como eles não sabem construir comandos SQL eu vou deixar disponível dentro de cada arquivo.

    Talvez uma solução seria você criar um array ou um objeto com as instruções SQL e apenas acessar cada índice para obter a instrução.

     

    Por fim como dito sou leigo enquanto a usar o javascript para essa situação portanto não poderei ajudar mais do que isso.

    E a propósito.... Ao invés de zipar e enviar além de ter o trabalho que está tendo já ouviu falar no https://github.com

    Assim você e seus amigos poderiam trabalhar ao mesmo tempo no mesmo projeto cada um fazendo o que tem de fazer sem interferir no que o outro faz. Assim sendo você poderia cuidar da parte das instruções SQL e os outros nos demais afins.

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito