Ir para conteúdo

Pesquisar na Comunidade

Mostrando resultados para as tags ''css''.

  • Pesquisar por Tags

    Digite tags separadas por vírgulas
  • Pesquisar por Autor

Tipo de Conteúdo


Todas as áreas do Fórum

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Encontrar resultados em...

Encontrar resultados que...


Data de Criação

  • Início

    FIM


Data de Atualização

  • Início

    FIM


Filtrar pelo número de...

Data de Registro

  • Início

    FIM


Grupo


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Encontrado 993 registros

  1. santans

    Gerador de paginas web

    Desejo saber como crio um gerador PHP de paginas html. Por exemplo quando alguém cria um perfil no meu site, o gerador criaria uma pagina no sistema a partir de uma pagina pre molde já feita. no caso seria para um e-comerce. Outro exemplo quando eu cadastro um produto e é gerada uma pagina para este tal produto. Se houver algum sistema mais simples para me indicarem fiquem a vontade. Nota: Não sou um programador experiente.
  2. Como insiro uma imagem como background para uma div especifica e só para ela. Sei como o código e escrito é funciona mas nesse código que escrevi não quer funcionar de maneira alguma. css: .container{ background-image: image("imagens/inicio.jpg"); } html: <div class="container"> </div> caminho para imagem: pasta: imagens/inicio.jpg O formato da imagem é jpg a resolução dela é 1920 x 1280.
  3. Como é feito um PWA, quais os recursos utilizados, oque preciso conhecer para desenvolver um?
  4. Olá pessoal. Eu estou a procura de alguma ferramenta que possibilite fazer teste sincronizados entre Desktop, Tablet e celular enquanto altero o código, seja html, css ou JS, para ver como esta o responsivo. Em meio as minhas pesquisas encontrei dois que diz ser muito usados, Ghostlab e Selenium, mas ambos estão com seus sites fora do ar, logo, não é possível baixa-los. Então é isso, se alguém conhecer algo assim e que for de preferência grátis :) ficarei agradecido.
  5. RodrigoRitta

    Como fazer o texto sair da vertical

    Olá pessoal, Passei praticamente o dia inteiro hoje tentando resolver um bug em um código e não consegui. Encontrei muita coisa na net e aqui no fórum também, mas nada me ajudou a solucionar. Eu quero colocar no meu blogspot um menu das redes sociais, só que ele é um código com animação, quando o mouse é colocado em cima do ícone da rede social expande um texto com o respectivo nome, e logo assim que o mouse sai de cima o texto some e fica apena o ícone da rede social. O código funciona perfeitamente no simulador de HTML, só que quando tento implementar no blog o texto que deveria aparecer na horizontal fica na vertical, e deslocado, e os ícones das redes sociais não são exibidos. Eu consegui separar a parte de css certinho da parte HTML e colocar cada uma em seus respectivo lugar (PELO MENOS ACREDITO NISSO), só o que tá pegando mesmo são esses detalhes, o resto tá tudo funcionando bem, e o mais estranho: isso só ocorre quando passa pro blog, no simulador tá perfeito. Estou anexando aqui uma imagem que mostra melhor o que falei. Se alguém puder ajudar serei extremamente grato. Se já tiver algo aqui no fórum a respeito peço desculpas, mas não encontrei, e peço que apontem aqui pra mim. Desde já agradeço muito.
  6. PedroNunes

    Animação de carregamento ao enviar formulário

    Coloquei o plugin [Pace Master](http://github.hubspot.com/pace/docs/welcome/) em minha página que faz uma barra carregar na parte superior enquanto a página esta carregando, como a do YouTube, entretanto, quero fazer com que essa mesma barra carregue ao enviar o formulário que contém na página, caso ele esteja devidamente preenchido. Ja vi isso em uma infinidade de sites, e parece ser bem simples mas não tenho muito conhecimento em JavaScript ainda, por isso das formas que tentei não funcionou. Tentei chamar a função do loading com onclick mas não funcionou, estava querendo que funcionasse no mínimo sem verificar se o form esta preenchido pois o principal seria que o usuário tivesse um feedback quando clicasse em enviar o form. -HTML COM PARTE DO FORM- <label for="questao5">5. Se possível, liste alguns sites que você gosta, incluindo as URLs.</label> <textarea name="questao5" id="questao5" required></textarea> <button class="btn" id="enviar" name="enviar" type="submit">Enviar</button> <label for="questao5">5. Se possível, liste alguns sites que você gosta, incluindo as URLs.</label> <textarea name="questao5" id="questao5" required></textarea> <button class="btn" id="enviar" name="enviar" type="submit">Enviar</button> -CSS DO PLUGIN- .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pace-inactive { display: none; } .pace .pace-progress { background: #8BB006; position: fixed; z-index: 2000; top: 0; right: 100%; width: 100%; height: 2px; } -JavaScript do plugin-Link GitHub -JavaScript do formulário- $('.formphp').on('submit', function() { var emailContato = "contato@tenshitech.com.br"; // Escreva aqui o seu e-mail var that = $(this), url = that.attr('action'), type = that.attr('method'), data = {}; that.find('[name]').each(function(index, value) { var that = $(this), name = that.attr('name'), value = that.val(); data[name] = value; }); $.ajax({ url: url, type: type, data: data, success: function(response) { if( $('[name="leaveblank"]').val().length != 0 ) { $('.formphp').html("<div id='form-erro'></div>"); $('#form-erro').html("<span>Falha no envio!</span><p>Você pode tentar novamente, ou enviar direto para o e-mail " + emailContato + " </p>") .hide() .fadeIn(1500, function() { $('#form-erro'); }); } else { $('.formphp').html("<div id='form-send'></div>"); $('#form-send').html("<span>Mensagem enviada!</span><p>Em breve eu entro em contato com você. Abraços.</p>") .hide() .fadeIn(1500, function() { $('#form-send'); }); }; }, error: function(response) { $('.formphp').html("<div id='form-erro'></div>"); $('#form-erro').html("<span>Falha no envio!</span><p>Você pode tentar novamente, ou enviar direto para o e-mail " + emailContato + " </p>") .hide() .fadeIn(1500, function() { $('#form-erro'); }); } }); return false; });
  7. danicarla

    CSS para select box no firefox e chrome

    Pessoal.. meu select fica com espaçamento diferente quando abri no chome e no Firefox... Será que tem alguma maneira de deixar eles com espaço iguais sem usar javascript? Reparem que no Chrome as opções do select ficam grudadas.. e no Firefox ele dá um pequeno espaçamento entre eles:
  8. Débora Izabel Duarte

    Problema com HTML, CSS e JAVA SCRIPT

    Boa Noite, preciso muito de ajuda estou fazendo este trabalho da faculdade: Questão 1: https://docs.google.com/document/d/1W6LO6F7uikLFV9t9BPt7uAOwvQ4uNJAwGBTlXMvw_Ds/edit Questão 2:https://docs.google.com/document/d/1axpdoimV8xGS2yihI7flz3Yqdh1la7sReDhbXPF9l8M/edit Até o momento consegui fazer o seguinte código: <!DOCTYPE html> <html lang="pt" dir="ltr"> <head> <meta charset="utf-8"> <title>Trabalho Laboratório Web 1</title> </head> <body> <h1>Trabalho Laboratório Web 1</h1> <form name="soma"> <div> <label for="n">Nome</label> <input type="text" name="n" id="n"/> <input type="submit" name="somar" value="Adicionar" /> </div> <br> <div> <label for="cfix" for="ccap">Produto</label> <input type="text" name="p"/> <input type="submit" name="prod" value="Adicionar" /> </div> <br> <div> <label for="cfix" for="ccap">Valor Unitário</label> <input type="number" name="valor"/> <input type="submit" name="cfix" value="Custo Fixo"/> <input type="submit" name="ccap" value="Custo Per capita"/> </div> </form> <p><h2>Nomes: <span>0</span></h2> <ul></ul> <p><h2>Produtos: <span> </span></h2> <table id="tf" border="1"> <tr> <td colspan="4"><center><b>Custo fixo</b></center></td> </tr> <tr> <td colspan="2">Produto</td> <td colspan="2">Valor</td> </tr> </table> <br> <table id="tp" border="1"> <tr> <td colspan="4"><b>Custo Per Capita</b></td> </tr> <tr> <td colspan="2">Produto</td> <td colspan="2">Valor</td> </tr> </table> <p><center><h2 style="color:red;">Valor para cada um : R$<span> </span></h2></center></p> <script> document.soma.addEventListener('submit', adicionar); var lista = document.querySelector('ul'); var qtd = document.querySelector('span'); var soma = 0; function adicionar(e) { e.preventDefault(); var novoLi = document.createElement('li'); novoLi.textContent = document.soma.n.value; lista.appendChild(novoLi); soma++; qtd.textContent = soma; document.soma.n.value = ""; } </body> </html>
  9. Sirlene Cristina

    Produtos em 2 colunas em CSS - Mobile

    Olá, Não sou programadora, mas estou fazendo alguns ajustes para lançar o nosso e-commerce. Executei muitas alterações com dicas da internet, inclusive 2 do @Maujor. Antes de abrir este tópico pesquisei muito, mas não consegui fazer a última alteração do nosso site. Na versão mobile gostaria que os produtos aparecem em 2 colunas, porém a versão original não permite. Consegui este código da nossa página na loja integrada. @media (max-width: 767px){#listagemProdutos > ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start}#listagemProdutos > ul li.listagem-linha ul{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center}#listagemProdutos > ul li.listagem-linha ul li{width:50%;margin:0 0 15px}.listagem.com-caixa .listagem-item{border:0;min-height:368px}.listagem.com-caixa .listagem-item .imagem-produto{border:0;padding:0}.listagem .listagem-item .info-produto{border:none!important;padding:5px 0}.listagem .listagem-item .info-produto a.nome-produto{min-height:110px;display:flex;align-items:center}.busca .botao-busca{padding:5px 14px!important}.listagem .listagem-item .acoes-produto-responsiva,#btn-top{display:none!important}.preco-produto s.preco-venda{display:block;font-size:14px}.preco-produto .desconto-a-vista, .preco-produto strong.titulo{font-size: 11px !important}.preco-venda {display:block;font-size:12px !important;}} Mas não consegui identificar todos os campos, conforme abaixo. @media (max-width: 767px){#listagemProdutos > ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start}#listagemProdutos > ul li.slick-slide ul{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center}#listagemProdutos > ul li.slick-slide ul li{width:50%;margin:0 0 15px}.slick-initialized .listagem-item{border:0;min-height:368px}.slick-initialized .listagem-item .imagem-produto{border:0;padding:0}.listagem .listagem-item .info-produto{border:none!important;padding:5px 0}.listagem .listagem-item .info-produto a.nome-produto{min-height:110px;display:flex;align-items:center}.busca .botao-busca{padding:5px 14px!important}.listagem .listagem-item .acoes-produto-responsiva,#btn-top{display:none!important}.preco-produto s.preco-venda{display:block;font-size:14px}.preco-produto .desconto-a-vista, .preco-produto strong.titulo{font-size: 11px !important}.preco-venda {display:block;font-size:12px !important;}} Alguma alma caridosa para me ajudar? https://drogariavivabem.commercesuite.com.br/ Segue abaixo como gostaria que ficasse. Desde já, obrigada. Sirlene
  10. MARI SANTOS

    Porque os grid items se expandem conforme conteúdo?

    Boa tarde, Eu criei um container como o grid, e adicionei os grids filhos, dentro desses grids filhos adicionei algumas divs, até ai tudo fica perfeito, porém quando vou adicionar algum elemento dentro dele, como foto ou texto, ele se expande. Esse comportamento é normal?
  11. gente como eu faço para criar dessa forma esse login do site https://www.americanas.com.br/ das lojas americanas me ajudem ???? me ajudemmmmmm por favor
  12. Sabrina Bruno

    Desenvolvimento Bootstrap

    Olá amigos do imasters, sou novo por aqui então se eu postei em uma área errada desculpem. Sou Front-end mas tem pouco tempo que comecei a mexer com Bootstrap, queria uma avaliação para ver o que vocês acham Link: http://brunohenrique.esy.es/movie/ esse é um dos meus primeiros projetos, criticas construtivas serão bem-vindas PS: não está 100% responsivo.
  13. lucas felipe timoteo

    Ordem de procedência dos comandos CSS

    estou com dificuldade em entender a lógica da ordenação semântica dos comandos, vou citar um exemplo que aconteceu comigo: nav#menu:hover li { background-color:#606060 } esse comando de cima fez com que todos os meus itens da lista ficassem escuros ao mesmo tempo quando eu passava o cursos por cima de qualquer item... Ja com esse próximo, escureceu apenas os itens na qual o cursor estava em cima: nav#menu li:hover { background-color:#606060 } eu não entendi qual a diferença semântica entre inverter a ordem das palavras, alguém ai poderia me ajudar?
  14. salgadinhoDoce

    Botões flutuando na página que servem como âncoras

    Estou colocando botões flutuantes no meu formulário para servirem como âncoras (a página é extensa), porém não manjo muito de javascript e só consigo colocar esses botões para irem para o topo. O objetivo era quando deslizar o scroll do mouse com Unidade 1, Unidade 2 e Unidade 3, respectivamente. E ao clicar neles, irem pras suas respectivas sessões. Vejam o JS: $(document).ready(function(){ window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) { document.getElementById("navegacao1").style.display = "block"; document.getElementById("navegacao2").style.display = "block"; document.getElementById("navegacao3").style.display = "block"; } else { document.getElementById("navegacao1").style.display = "none"; document.getElementById("navegacao2").style.display = "none"; document.getElementById("navegacao3").style.display = "none"; } } $(function(){ $("#navegacao1,#navegacao2,#navegacao3").click(function(){ document.body.scrollTop = 0; document.documentElement.scrollTop = 0; }); }); }); O id das tags no html para cada sessão que os botões devem redirecionar são: unidade1, unidade2 e unidade3. Link do github: https://goo.gl/hvkpZa
  15. Nicolas Sousa

    Configuração de estilo em tabela

    Boa tarde. Eu tenho vindo a encontrar uma dificuldade em colocar na tabela um fundo transparente mas que dê para ver o conteúdo da tabela ( as colunas e linhas) . Ou seja , assim que coloco o código na tabela ele define tudo como igual , já criei class , tentei colocar mas é como se não formatasse então integrei diretamente no html e o que acontece? A tabela desaparece.. Aqui está o código : o meu objetivo era só tirar o fundo
  16. LsMs

    De desktop para Mobile

    Boa noite, eu estou criando um site pessoal e na versão desktop está okay, mas quando passa pra mobile, ele desconfigura. Qual o modo de arrumar? Pelo que dei uma pesquisada, tem um modo mobile "simples", que apenas pega como é a desktop e faz para mobile. Sabem como posso fazer isso ou como inserir no CSS os códigos para arrumar no mobile? Desde já, obrigado!!
  17. Olá tudo bom? estou com um menu responsivo que abre da direita pra esquerda, porem quero que ele abra da esquerda pra direita vou soltar o codigo do menu. o menu esta do lado esquerdo, quero que ele abra do lado esquerdo pro direito, ou ate mesmo empurre a div do lado do lado esquerdo pro direito. no caso eu adaptei o menu para mobile. @media screen and (max-width: 767px) { header .control-nav { position:absolute; right:10px; top: 10px; margin-top: 20%; display:block; width: 20px; padding: 1px 0; border:groove #fff; border-width: 1px 0; z-index: 2; cursor: pointer; } header .control-nav:before { content: ""; display: block; left: auto; height: 3px; background: #fff; } header .control-nav-close { position: fixed; right: 0; top: 0; bottom: 0; left: 0; display: block; z-index: 1; background: rgba(0,0,0,0.4); -webkit-transition: all 1ms ease; transition: all 1ms ease; -webkit-transform: translate(100%, 0); -ms-transform: translate(100%, 0); transform: translate(100%, 0); } header nav { position:fixed; top: 0; right: 0; bottom: 0; width: 150px; border-left: 1px solid #ccc; background: #fff; overflow-x:auto; z-index: 2; -webkit-transition: all 500ms ; transition: all 500ms ; -webkit-transform: translate(100%, 0); -ms-transform: translate(100%, 0); transform: translate(100%, 0); } }#control-nav:checked ~ .control-nav-close { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } #control-nav:checked ~ nav { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }
  18. Preciso imprimir um relatórios de jogos, configurei para não aparecer os cabeçalhos na folha, e também o header e footer fixos, porém se a impressão usar mais de uma folha começo a ter problemas com as margens, segue o modelo: Reparem que no final da primeira folha o footer cobriu parte do conteúdo, e na segunda folha o conteúdo começa bem perto da margem, porém como configurei: @page{ size:auto; margin:0mm; } Para não aparecer os cabeçalhos na impressão não consigo fazer de outra forma para que o conteúdo vá para a segunda folha com uma margem legal... segue o meu código: @page{ size:auto; margin:0mm; } @media screen{ #header{ top:0; margin:12mm; } #page{ display:block; } #footer{ bottom:0; margin:6mm 12mm 10mm 3mm; } } @media print{ #header{ position:fixed; top:0; margin:12mm; } #page{ display:block; } #footer{ position:fixed; bottom:0; margin:6mm 12mm 10mm 3mm; } } <div id="header"> <img style="float:left; position:relative;" src="{{ asset('images/report_logo.png') }}" height="96px" border="0" title="" alt="" /> </div> <div id="page"> <table> Content </table> </div> <div id="footer"> <img src="{{ asset('images/report_footer.jpg') }}" width="720px" border="0" title="" alt="" /> </div>
  19. KaiqueLuanT

    Slieshow não acompanha o Menu responsivo

    Boa tarde a todos, peço ajuda em uma menu responsivo que fiz. Está 90% pronto, só falta o meu SlideShow acompanhar o Menu ao clicar sobre ele. O Menu desce, mais fica atras do slide show. Code Html <header> <nav> <ul> <li><a href="index">Home</a></li> <li><a href="sobre">Sobre</a></li> <li><a href="anuncio">Anuncio</a></li> <li><a href="contato">Contato</a></li> <li><a href="agende">Agende</a></li> </ul> </nav> <div class="slide"> <picture> <source media="(max-width: 480px)" srcset="../images/slide/mobile1.png"> <source media="(min-width: 480px) and (max-width: 768px)" srcset="../images/slide/tablet1.png"> <source media="(min-width: 769px)" srcset="../images/slide/desktop1.png"> <img src="../images/desktop1.png"> </picture> </div> </header> header{width:100%;float:left;} .logo{ position:absolute; width:65%; left:0; top:0; text-align:center; z-index:2; } .logo img{max-width:100%;} nav{ float:left; width:100%; background:#0e1216; font-weight:bold; font-family:verdana, sans-serif; color:#fff; } nav ul{ margin:0; padding:0; list-style: none; } nav li{ float:left; } nav li a{ text-decoration:none; color:#fff; margin-left:10px; } .slide{ float:left; width:100%; z-index: 1; } .slide img{ width:100%; } .slide picture{ width:100%; } @media only screen and (max-width: 480px){ nav{height:50px;} nav li{ background:#000; width:100%; display:none; position:relative; top:50px; height:30px; } nav li:hover{ background:#e5bb66; color:#000; } .btn-menu-mobile{ position:absolute; width:25%; right:0; top:3px; cursor:pointer; padding-right:10%; text-align:right; } .slide{ height:200px; } Agradeço a todos que tiraram um tempinho pra me ajudar e aos que nao conseguiram e aos que nao tiveram tempo
  20. implementar o layout proposto (layout/mockup.jpg), utilizando as imagens enviadas e seus conhecimentos em HTML, CSS e JavaScript/JQuery. Ao clicar em algum dos itens Saiba mais ou ACESSE deve ser exibida uma janela modal com um texto diferente para cada um dos itens. Segue exemplos na pasta layout. Pode ser utilizado textos genéricos para o desenvolvimento. Parte 2 Abrir o arquivo "tabela.html" e criar um script que mude a cor dos botões e traduza as palavras da tabela para suas correspondentes em português. Alterações necessárias deverão ser feitas via JavaScript ou jQuery. <!DOCTYPE html> <html> <head> <title>Teste Parte 2</title> <meta charset="utf-8"> </head> <body> <table border="1"> <tbody> <tr id="ideas-row"> <td align="right">1,000</td> <td align="left">Ideas</td> </tr> <tr id="comments-row"> <td align="right">1,348</td> <td align="left">Comments</td> </tr> <tr id="likes-row"> <td align="right">2,130</td> <td align="left">Likes</td> </tr> <tr id="members-row"> <td align="right">1,226</td> <td align="left">Members</td> </tr> </tbody> </table> <br> <button id="btn-One">Botão vermelho</button> <button id="btn-Two">Botão Azul</button> <script type="text/javascript"> // Desenvolva o seu Script aqui // Pode ser com JQuery ou JavaScript puro </script> </body> </html>
  21. JPRSoares

    Ajuda editar CSS em loja Shopify

    Olá a todos! Sou novo no forum e gostaria de obter ajuda num problema que estou tendo. Tenho uma loja na plataforma shopify e na qual uso o tema brooklyn. Na página das coleção eu tenho a tags habilitadas como podem ver no link https://hair-beauty-studio-shop-online.myshopify.com/collections/all O que eu gostaria era que esse "menu" fosse dropdown ou então de poder escolher quais as tags que aparecem. Alguém consegue ajudar por favor? Obrigado
  22. FernandoSousa

    Codigo para vizualização completa de post na home.

    Estou criando um blogger: https://lebiologistebr.blogspot.com/2018/06/a-difícil-sustentabilidade-politica.html para promover um trabalho acadêmico, mas estou com dificuldade para remodelar o estilo do POST (Paginal principal do Blog), gostaria que o mesmo fosse apresentado mostrando a imagens, videos e texto sem resumo, de forma simples. Se alguem poder ajudar com o codigo, fico muito grato.
  23. Yuri Cordeiro_113515

    CSS personalizado por tipo de links

    Amigos, Possuo um site em WordPress e tenho um template instalado que adquiri recentemente. Gostaria personalizar a forma como os links no corpo do texto aparece, de duas maneiras diferentes. Para os que apontam para dentro do meu site, sublinhado na cor X. Para os que apontam para fora do site, sublinhado na cor Y. É possível? Obrigado desde já.
  24. danipereira

    manipular cc e salvar

    Faço uma manipulação simples no css: *apenas um exemplo. $("p").css({"background-color": "#ff0000", "font-size": "30px"}); Mais quando atualizo a página não está alterado. Preciso manter a alteração. Como?
  25. evertongouveia

    Formulário de pesquisa em ajax

    Boa noite galera, estou tentando fazer com que uma página só mostre o resultado quando eu clicar em "Buscar" já tentei de várias formas e não consigo. Queria que mostrasse o resultado a partir do preenchimento do formulário. Segue abaixo o meu código: <!DOCTYPE html> <head> <title>Conveniados</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/colors/main.css" id="colors"> <script> $(document).ready(function(e) { $("form[ajax=true]").submit(function(e) { e.preventDefault(); var form_data = $(this).serialize(); var form_url = $(this).attr("action"); var form_method = $(this).attr("method").toUpperCase(); $("#loadingimg").show(); $.ajax({ url: form_url, type: form_method, data: form_data, cache: false, success: function(returnhtml){ $("#result").html(returnhtml); $("#loadingimg").hide(); } }); }); }); </script> </head> <body> <?php $conveniados = array(); $destaques = array(); $servicos = array(); $locais = array(); $especialidades = array(); $convs = json_decode(file_get_contents('http://url.com.br/Service/BackOffice.svc/retornaConveniado')); foreach($convs as $conv){ $info = array(); $info["nome"] = $conv->nmConveniado; $info["categoria"] = $conv->listaEspecialidade[0]->nmEspecialidade; $especialidades[] = $conv->listaEspecialidade[0]->nmEspecialidade; $info["endereco"] = $conv->listaEndereco[0]->nmLogradouro; $info["bairro"] = $conv->listaEndereco[0]->nmBairro; $info["cidade"] = $conv->listaEndereco[0]->nmCidade; $info["telefone"] = $conv->dsTelefone1; $locais[] = $conv->listaEndereco[0]->nmCidade; $info["estado"] = $conv->listaEndereco[0]->sgEstado; $servicos_str = ''; $k=0; foreach($conv->listaServico as $serv_str){ $k++; $servicos[] = $serv_str->nmServico; if($k==count($conv->listaServico)){ $servicos_str .= $serv_str->nmServico; } else { $servicos_str .= $serv_str->nmServico.', '; } } $info["servicos"] = $servicos_str; $info["imagem"] = $conv->listaImagem[0]->nmArquivo; $conveniados[] = $info; if($conv->flDestaqueSite){ $destaques[] = $info; } } $_especialidades = array_unique($especialidades); $_servicos = array_unique($servicos); $_locais = array_unique($locais); asort($_especialidades); asort($_servicos); asort($_locais); ?> <!-- Wrapper --> <div id="wrapper"> <!-- Header Container ================================================== --> <header id="header-container"> <!-- Header --> <div id="header"> <div class="container"> <!-- Left Side Content --> <div class="left-side"> <!-- Logo --> <div id="logo"> <a href="index.html"><script type="text/javascript"> //<![CDATA[ window.__mirage2 = {petok:"c15ffef9e9bc60c90529128598972fc85e861c0e-1529018942-86400"}; //]]> </script> <script type="text/javascript" src="https://ajax.cloudflare.com/cdn-cgi/scripts/04b3eb47/cloudflare-static/mirage2.min.js"></script> <img data-cfsrc="images/logo.png" alt="" style="display:none;visibility:hidden;"><noscript><img src="images/logo.png" alt=""></noscript></a> </div> <!-- Mobile Navigation --> <div class="mmenu-trigger"> <button class="hamburger hamburger--collapse" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> </div> </div> <div class="right-side"> <div class="header-widget"> <a href="#" class="button border with-icon">Seja um conveniado <i class="sl sl-icon-plus"></i></a> </div> </div> </div> </div> </header> <div class="clearfix"></div> <div class="main-search-container" data-background-image="images/main-search-background-01.jpg" style="background-image: url("images/main-search-background-01.jpg");"> <div class="main-search-inner"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2 class="text-center">Conveniados Anjo da Guarda</h2> <h4 class="text-center">Localize o conveniado desejado</h4> <form method="post" ajax="true" action=""> <div class="main-search-input"> <div class="main-search-input-item"> <input type="text" placeholder="Nome do conveniado" id="searchQuery" value=""> </div> <div class="main-search-input-item"> <select data-placeholder="Cidade" class="chosen-select" style="display: none;"> <?php foreach($_locais as $local){ ?> <?php if(trim($local)!=''){ ?> <option value="<?php echo $local; ?>"><?php echo $local; ?></option> <?php } ?> <?php } ?> </select> </div> <div class="main-search-input-item"> <select data-placeholder="Categoria" class="chosen-select" style="display: none;"> <option>Categoria</option> </select> </div> <div class="main-search-input-item"> <select data-placeholder="Especialidade" class="chosen-select" style="display: none;"> <?php foreach($_especialidades as $especialidade){ ?> <?php if(trim($especialidade)!=''){ ?> <option value="<?php echo $especialidade; ?>"><?php echo $especialidade; ?></option> <?php } ?> <?php } ?> </select> </div> <div class="main-search-input-item"> <select data-placeholder="Serviço" class="chosen-select" style="display: none;"> <option value>Serviços</option> <?php foreach($_servicos as $servico){ ?> <?php if(trim(servico)!=''){ ?> <option value="<?php echo $servico; ?>"><?php echo $servico; ?></option> <?php } ?> <?php } ?> </select> </div> <input type="submit" class="button" value="Buscar" /> </div> </form> </div> </div> </div> </div> </div> <div class="container "> <div class="row"> <div class="col-md-12 margin-top-40"> <div class="row"> <!-- Lista --> <?php $d=0; ?> <?php shuffle($destaques); ?> <?php foreach($destaques as $destaque){ ?> <?php $d++; if($d<=2){ ?> <div class="col-lg-12 col-md-12"> <div class="listing-item-container list-layout"> <a href="#" class="listing-item"> <!-- Imagem --> <div class="listing-item-image"> <img data-cfsrc="<?php echo $destaque["imagem"]; ?>" alt="" style="display:none;visibility:hidden;"><noscript><img src="<?php echo $destaque["imagem"]; ?>" alt=""></noscript> <span class="tag"><?php echo $destaque["categoria"]; ?></span> </div> <!-- Conteúdo --> <div class="listing-item-content"> <div class="listing-badge anunciante">Anunciante</div> <div class="listing-item-inner"> <h3><?php echo $destaque["nome"]; ?> <i class="verified-icon"></i></h3> <span><?php echo $destaque["telefone"]; ?></span></br> <span><?php echo $destaque["endereco"]; ?>, <?php echo $destaque["bairro"]; ?>, <?php echo $destaque["cidade"]; ?> - <?php echo $destaque["estado"]; ?></span> </div> </div> </a> </div> </div> <?php } ?> <?php } ?> <!-- Lista / Fim --> <center><a href="#" class="button border with-icon margin-bottom-20">Ver mais</a></center> <!-- Lista --> <?php $d=0; ?> <?php foreach($conveniados as $conveniado){ ?> <?php $d++; if($d<=5){ ?> <div class="col-lg-12 col-md-12" especialidade="<?php echo $conveniado["categoria"]; ?>" local="<?php echo $conveniado["cidade"]; ?>" nome="<?php echo $conveniado["nome"]; ?>" servicos="<?php echo $conveniado["servicos"]; ?>"> <div class="listing-item-container list-layout"> <a href="#" class="listing-item"> <!-- Imagem --> <div class="listing-item-image"> <?php if($conveniado["imagem"] != ''){ ?> <img data-cfsrc="<?php echo $conveniado["imagem"]; ?>" alt="" style="display:none;visibility:hidden;"><noscript><img src="<?php echo $conveniado["imagem"]; ?>" alt=""></noscript> <?php } else { ?> <img data-cfsrc="images/sem-imagem.jpg" alt="" style="display:none;visibility:hidden;"><noscript><img src="images/sem-imagem.jpg" alt=""></noscript> <?php } ?> <span class="tag"><?php echo $conveniado["categoria"]; ?></span> </div> <!-- Conteúdo --> <div class="listing-item-content"> <div class="listing-item-inner"> <h3><?php echo $conveniado["nome"]; ?></h3> <span><?php echo $conveniado["telefone"]; ?></span></br> <span><?php echo $conveniado["endereco"]; ?>, <?php echo $conveniado["bairro"]; ?>, <?php echo $conveniado["cidade"]; ?> - <?php echo $conveniado["estado"]; ?></span> </div> </div> </a> </div> </div> <?php } ?> <?php } ?> </div> <!-- Paginação --> <div class="clearfix"></div> <span id="result"><a href="http://wp.me/p2O9K2-b">jQuery + AJAX form submit script.</a></span> <div class="row"> <div class="col-md-12"> <!-- Paginação --> <div class="pagination-container margin-top-20 margin-bottom-40"> <nav class="pagination"> <ul> <li><a href="#" class="current-page">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#"><i class="sl sl-icon-arrow-right"></i></a></li> </ul> </nav> </div> </div> </div> <!-- Paginação / Fim --> </div> </div> </div> <!-- Footer ================================================== --> <div id="footer" class="margin-top-15"> <!-- Main --> <div class="container"> <!-- Copyright --> <div class="row"> <div class="col-md-12"> <div class="copyrights">© 2017 Afagu. Todos os direitos reservados.</div> </div> </div> </div> </div> <!-- Footer / End --> <!-- Back To Top Button --> <div id="backtotop"><a href="#"></a></div> </div> <!-- Wrapper / End --> <!-- Scripts ================================================== --> <script data-cfasync="false" src="../../cdn-cgi/scripts/f2bf09f8/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="scripts/jquery-2.2.0.min.js"></script> <script type="text/javascript" src="scripts/mmenu.min.js"></script> <script type="text/javascript" src="scripts/chosen.min.js"></script> <script type="text/javascript" src="scripts/slick.min.js"></script> <script type="text/javascript" src="scripts/rangeslider.min.js"></script> <script type="text/javascript" src="scripts/magnific-popup.min.js"></script> <script type="text/javascript" src="scripts/waypoints.min.js"></script> <script type="text/javascript" src="scripts/counterup.min.js"></script> <script type="text/javascript" src="scripts/jquery-ui.min.js"></script> <script type="text/javascript" src="scripts/tooltips.min.js"></script> <script type="text/javascript" src="scripts/custom.js"></script> <!-- Google Autocomplete --> <script> function initAutocomplete() { var input = document.getElementById('autocomplete-input'); var autocomplete = new google.maps.places.Autocomplete(input); autocomplete.addListener('place_changed', function() { var place = autocomplete.getPlace(); if (!place.geometry) { window.alert("No details available for input: '" + place.name + "'"); return; } }); if ($('.main-search-input-item')[0]) { setTimeout(function(){ $(".pac-container").prependTo("#autocomplete-container"); }, 300); } } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAgeuuDfRlweIs7D6uo4wdIHVvJ0LonQ6g&amp;libraries=places&amp;callback=initAutocomplete"></script> </body> </html>
×

Informação importante

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