Search the Community

Showing results for tags 'div'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Programação & Desenvolvimento
    • ASP
    • PHP
    • .NET
    • Java
    • C, C++
    • Delphi, Kylix
    • Lógica de Programação
    • Mobile
    • Visual Basic
    • Outras Linguagens de Programação
  • WEB
    • HTML, XHTML, CSS
    • Ajax, JavaScript, XML, DOM
    • Editores
  • Arte & Design
    • Corel Draw
    • Fireworks
    • Flash & ActionScript
    • Photoshop
    • Outros Programas de Arte e Design
  • Sistemas Operacionais
    • Microsoft Windows
    • GNU/Linux
    • Outros Sistemas Operacionais
  • Softwares, Hardwares e Redes
    • Microsoft Office
    • Softwares Livres
    • Outros Softwares
    • Hardware
    • Redes
  • Banco de Dados
    • Access
    • MySQL
    • PostgreSQL
    • SQL Server
    • Demais Bancos
  • Segurança e Malwares
    • Segurança
    • Remoção De Malwares
  • Empregos
    • Vagas Efetivas
    • Vagas para Estágios
    • Oportunidades para Freelances
  • Negócios & Oportunidades
    • Classificados & Serviços
    • Eventos
  • Geral
    • Avaliações de Trabalhos
    • Links
    • Outros Assuntos
    • Entretenimento
  • Script Brasil
    • Novidades e Anúncios Script Brasil
    • Mercado Livre / Mercado Sócios
    • Sugestões e Críticas
    • Apresentações

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 40 results

  1. Ola, gostaria de ajuda com este script.Não tenho muito conhecimento em programação porem tentei algumas coisas sem sucesso:- Por entre <div> e manipular por css- Tentei por dentro do script usando position- Deixando o div class fora e tentando chamar dentro do scriptO que preciso seria posicionar o icone do lado direto, um pouco acima do rodapé pois em certo momento uma barra sobe e o icone fica por cima.Uma coisa mais arrojada seria o icone subir junto com a barra porem acabei desconsiderando por acreditar ser mais dificil, sendo assim o primeiro modo já fica bom. <!-- WhatsHelp.io widget --> <script type="text/javascript"> (function () { var options = { facebook: "facebookid", // Facebook page ID whatsapp: "+55XXXXXXXXXXX", // WhatsApp number email: "[email protected]", // Email sms: "XXXXXXXXXXX", // Sms phone number - Somente Mobile // line: "Whatshelp", // Line QR code URL // call: "XX-XXXXXXXXX", // Call phone number // viber: "Whatshelp", // Call viber - Somente Mobile // snapchat: "Whatshelp", // Snapchat // telegram: "Whatshelp", // Telegram // vkontakte: "Whatshelp", // Vkontakte company_logo_url: "https://www.site.com.br/logo.png", // URL of company logo (png, jpg, gif) greeting_message: "Bem vindo ...", // Text of greeting message call_to_action: "Entre em contato", // Call to action // button_color: "#000000", // Preto button_color: "#129BF4", // Azul position: "right", // Position may be 'right' or 'left' order: "facebook,whatsapp,email" // Order of buttons }; var proto = document.location.protocol, host = "whatshelp.io", url = proto + "//static." + host; var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js'; s.onload = function () { WhWidgetSendButton.init(host, proto, options); }; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); })(); </script> <!-- /WhatsHelp.io widget --> Quem puder me ajudar agradeço!
  2. Olá, pessoal, boa tarde !! Estudei toda uma apostila sobre CSS, porém não estou conseguindo realizar uma simples tarefa !! Ao passar o mouse no 'button.botao', ativar o movimento do 'div.traco' ! Eis abaixo o 'Código Fonte' que estou tentando: <!DOCTYPE html> <html> <head> <style> button.botao { width: 150px; height: 50px; border: none; background-color: black; color: red; font-size: 23px; } div.traco { width: 20px; height: 10px; background: red; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; } button.botao:hover div.traco { width: 150px; } </style> </head> <body> <button class="botao">Botao</button> <div class="traco"></div> </body> </html> Me ajudem por favor ! Obrigado !!
  3. Olá pessoal !! Eu preciso de alguma ajuda para resolver algumas dúvidas !! Se puder me ajudar eu agradeço !! Primeiro visite o link: http://terezanininha.com.br/CSS/Animations/Pagina_1_TryIt_3.html Veja o 'Código Fonte' pelo navegador !! O que estou tentando fazer ?? Eu quero que o elemento div, faça movimento de animation, vindo from {top:200px} to {top:0px} e paralisar no topo !! Neste exemplo, eu encontrei dois erros: - Primeiro Erro: Quando o div automaticamente começa a se movimentar, seu eu colocar o mouse sobre ele, antes de terminar o movimento, o div dá uma pulada direto para o topo !! "Eu não quero isso" !! Eu quero que se eu colocar o ponteiro do mouse sobre o div, que ele não dê esta subida repentina para o topo !! Que faça o movimento para o topo sem interrupção, mesmo se antes eu puser o ponteiro do mouse !! - Segundo Erro: Depois que o div cheguar ao topo, Se eu colocar o mouse nele, o fundo muda de cor, por animation ! Mas após isso, quando eu retiro o ponteiro do mouse, o div novamente cai para top:200px e começa o movimento para top:0px novamente ! O que eu quero é: que o div mova somente "uma vez" and "pare" em top:0px !! Depois de parar em top:0px, que fique intacto pra sempre e apenas faça o movimento de mudar a cor do fundo com o passar do mouse !! I tentei procurar na internet mas não achei algo que resolvesse esses dois problemas descritos acima ! Se possível, alguém poderia me dar uma ajuda testada que realmente funcione ?? Agradecido Carlos
  4. boa tarde, gostaria de saber como ativo um campo, clicando ou passando o mouse em cima de outro. <div class="col-xs-12 col-md-3"> <div class="card border-0 sombra-h" id="mydiv"> <img class="card-img-top img-fluid" src="img/cidade4.jpg" alt="Card image cap"> <div class="card-body"> <h5 class="card-title"><strong>Los Angeles</strong></h5> <p class="card-text">sexta-feira 30 junho, 2018</p> <button class="btn btn-primary" id="vibrar"><i class="fas fa-shopping-cart"></i> comprar</button> </div> </div> </div> gostaria que quando entrasse nessa minha div (id="mydiv") o botão iria fazer uma animação. minha classe css (estilo.css) .hvr-grow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active { -webkit-transform: scale(1.3); transform: scale(1.3); }
  5. Aqui uma screenshot detalhada do erro: http://prntscr.com/j5firk Observe que quanto maior for o conteudo da div ao lado, a outra div desce em questão da posição. O que eu queria é que ela ficasse fixa ali. -- Já tentei usar Position: fixed; mas não funciona a div fica com um tamanho desproporcional e sai do tamanho que eu defini. Codigo: <div style="max-width: 100%;"> <div class="card-panel purplemx" style="width:49%; box-shadow: 1px 1px 12px 1px rgba(61,55,128,1); border-radius:3px; display:inline-block;"> <div class="card-content"> <h5 class="card-title white-text"><i class="fas fa-star" style="color:yellow"></i> USUARIO DESTAQUE<hr></hr></h5> <p class="white-text"> <div class="destaque white-text"> conteudo teste <br> conteudo teste <br>conteudo teste <br>conteudo teste <br>conteudo teste <br>conteudo teste <br>conteudo teste <br>conteudo teste <br>conteudo teste <br> </div> </p> </div> </div> <span style="padding-left:1%"></span> <div class="card-panel purplemx" style="width:49%; box-shadow: 1px 1px 12px 1px rgba(61,55,128,1); border-radius:3px; display:inline-block;"> <div class="card-content"> <h5 class="card-title white-text"><i class="pink-text fas fa-gift"></i> PRESENTES<hr></hr></h5> <center> <p class="white-text"> <i class="fas fa-unknown fa-2x"></i> </p> </center> </div> </div> </div>
  6. Fala pessoal to travado aqui com isso, carrego o conteudo de uma pagina com varios painéis através desse js, e cada painel tem seu botão de refresh para recarregar o conteudo desses painéis que são gráficos. Em um primeiro momento alguns deles vão ter um refresh automático, porém preciso dar o também através desse botão, enfim, to conseguindo isso em partes, mas ainda não cheguei no resultado que quero. Agora quando clico no botão pra atualizar ele recarrega a pagina toda dentro da div certa, mas preciso que só a div recarregue novamente. $(document).ready(function () { //================================================== MONTAGEM DA ESTRUTURA HTML function Lin(conteudo) { return "<div class='row scRow'>" + conteudo + "</div>"; } function Col(colunas, conteudo) { return "<div class='col-md-" + colunas + " scCol'>" + conteudo + "</div>"; } function GetHtmlBox(codigo, titulo, chave, tipo) { var htmlbox = "<div class='panel panel-default' id='" + chave + "' codigo=" + codigo + ">" + " <div class='panel-heading'>" + " <div class='panel-title-box'>" + " <h3>" + titulo + "</h3>" + " </div>" + " <ul class='panel-controls'>" + " <li><a href='#' class='panel-fullscreen'><span class='fa fa-expand'></span></a></li>" + " <li><a href='#' class='recarrega'><span class='fa fa-refresh'></span></a></li>" + //" <li class='dropdown'>" + //" <a href='#' class='dropdown-toggle' data-toggle='dropdown'><span class='fa fa-cog'></span></a>" + //" <ul class='dropdown-menu'>" + //" <li><a href='#' class='panel-refresh'><span class='fa fa-refresh'></span> Refresh</a></li>" + //" </ul>" + //" </li>" + //" <li><a href='#' class='panel-remove'><span class='fa fa-times'></span></a></li>" + " </ul>" + " </div>" + " <div class='panel-body panel-body-table " + chave + "' id='body_" + codigo + "'>"; htmlbox = htmlbox + " </div>" + " </div> "; return htmlbox; } //================================================== ESTRUTURA DOS gráficos COM TABELA function ObterTabelaHtml(array, linhas) { var contLinha = 0; var contColuna = 0; var html = ""; //linhas $.each(array, function (linha, registro) { contLinha++; if (contLinha == 1) { html = html + "<div class='table-responsive'><table class='table table-bordered table-striped listaTop'><tbody>"; } html = html + "<tr>"; html = html + "<td><span class='celula' style='background-color: #" + registro[2] + "; color: #" + registro[3] + "'>" + registro[0] + "</span></td>"; html = html + "<td><span class='celula' style='background-color: #" + registro[2] + "; color: #" + registro[3] + "'>" + registro[1] + "</span></td>"; html = html + "</tr>"; if (contLinha == linhas || contLinha == array.length) { html = html + "</tbody></table></div>"; contLinha = 0; } }); return html; } //** //================================================== ESTRUTURA E TIPOS DE gráficos function ObterConteudo(painel, conteudo) { var id = ""; var html = ""; var codigo = painel["codigo"]; var tipo = painel["tipo"]; id = "#divPainel div[codigo=" + painel["codigo"] + "] .panel-body"; $(id).empty(); panel_refresh($(id)); $(id).attr("style", "height: 200px;"); switch (tipo) { //================================================== TABELA FIXA case 1: var idDiv = "divTableCodigo_" + codigo; html = ObterTabelaHtml(conteudo, 5); html = "<div id='" + idDiv + "'>" + html + "</div>"; $(id).append(html); if (codigo == 4) { $("#" + idDiv).owlCarousel({ items: 3, mouseDrag: true, touchDrag: true, slideSpeed: 300, paginationSpeed: 400, singleItem: false, navigation: false, autoPlay: true }); } if (codigo == 3) { $("#" + idDiv).owlCarousel({ items: 1, mouseDrag: false, touchDrag: false, slideSpeed: 300, paginationSpeed: 400, singleItem: true, navigation: false, autoPlay: false }); } if (codigo == 8) { $("#" + idDiv).owlCarousel({ items: 1, mouseDrag: true, touchDrag: true, slideSpeed: 300, paginationSpeed: 400, singleItem: false, navigation: false, autoPlay: true }); } break; //================================================== GRAFICO ROSCA case 2: Morris.Donut({ element: $(id), data: conteudo, colors: ['#A6D969', '#542688', '#A12235', '#EDD3F2', '#33414E', '#DA3610', '#33414E', '#8DCA35', '#00BFDD', '#FF702A', '#DA3610', '#80CDC2', '#A6D969', '#D9EF8B', '#FFFF99', '#F7EC37', '#F46D43', '#E08215', '#D73026', '#A12235', '#8C510A', '#14514B', '#4D9220', '#542688', '#4575B4', '#74ACD1', '#B8E1DE', '#FEE0B6', '#FDB863', '#C51B7D', '#DE77AE', '#EDD3F2'], resize: true }); break; //================================================== GRAFICO BARRAS DUPLAS case 3: Morris.Bar({ element: $(id), data: conteudo, xkey: 'y', ykeys: ['a', 'b'], labels: ['Venda', 'Custo'], barColors: ['#33414E', '#1caf9a'], gridTextSize: '10px', hideHover: true, resize: true, gridLineColor: '#E5E5E5' }); break; //================================================== GRAFICO LINHA case 4: Morris.Line({ element: $(id), data: conteudo, xkey: 'y', ykeys: 'a', labels: ['Vendas'], resize: true, hideHover: true, xLabels: 'day', gridTextSize: '10px', lineColors: ['#33414E'], gridLineColor: '#E5E5E5' }); break; //================================================== GRAFICO BARRAS VAZADAS case 5: var idSvg = "svgCodigo_" + codigo; $(id).append("<svg id='" + idSvg + "'></svg>") var nvd3Charts = function () { var myColors = ["#33414E", "#8DCA35", "#00BFDD", "#FF702A", "#DA3610", "#80CDC2", "#A6D969", "#D9EF8B", "#FFFF99", "#F7EC37", "#F46D43", "#E08215", "#D73026", "#A12235", "#8C510A", "#14514B", "#4D9220", "#542688", "#4575B4", "#74ACD1", "#B8E1DE", "#FEE0B6", "#FDB863", "#C51B7D", "#DE77AE", "#EDD3F2"]; d3.scale.myColors = function () { return d3.scale.ordinal().range(myColors); }; var startChart4 = function () { nv.addGraph(function () { var chart = nv.models.discreteBarChart().x(function (d) { return d.label; })//Specify the data accessors. .y(function (d) { return d.value; }).staggerLabels(true)//Too many bars and not enough room? Try staggering labels. .tooltips(false)//Don't show tooltips .showValues(true)//...instead, show the bar value right on top of each bar. .transitionDuration(350) .color(d3.scale.myColors().range());; d3.select("#" + idSvg).datum(exampleData()).call(chart); nv.utils.windowResize(chart.update); return chart; }); //Each bar represents a single discrete quantity. function exampleData() { return [{ key: "Cumulative Return", values: conteudo }]; } }; return { init: function () { startChart4(); } }; }(); nvd3Charts.init(); break; //*** } panel_refresh($(id)); } //**** //================================================== DEFINE A ESTRUTURA DE MONTAGEM DOS PAINEIS var painel; function CarregarPaineis() { painel = [ [ { codigo: 1, tit: "Faturamento Dia", col: 12, tempo: 0, tipo: 4 } ], [ { codigo: 2, tit: "Conversão", col: 2, tempo: 0, tipo: 2 }, { codigo: 6, tit: "Meta", col: 3, tempo: 0, tipo: 5 }, { codigo: 4, tit: "Vendas por loja", col: 7, tempo: 0, tipo: 1 } ], [ { codigo: 3, tit: "Indicadores", col: 3, tempo: 0, tipo: 1 }, { codigo: 7, tit: "Crescimento", col: 5, tempo: 0, tipo: 3 }, { codigo: 8, tit: "Top Vendedores", col: 2, tempo: 0, tipo: 1 }, { codigo: 9, tit: "Vendas por Linha", col: 2, tempo: 0, tipo: 2 } ] ]; //Linhas $.each(painel, function (linha, colunas) { var htmlCols = ""; //Colunas $.each(colunas, function (coluna, painel) { htmlCols = htmlCols + Col(painel["col"], GetHtmlBox( painel["codigo"], painel["tit"], "divPainel_" + (linha + 1) + "_" + (coluna + 1), painel["tipo"] )); }); //Carrega estrutura box $("#divPainel").append(Lin(htmlCols)); //Carrega conteudo $.each(colunas, function (coluna, painel) { var tipo = painel["tipo"]; var dados = BaixarDados(painel); ObterConteudo(painel, dados); //Carrega agendamento if (painel["tempo"] > 0) { var timPainel = setInterval(function () { var dados = BaixarDados(painel); ObterConteudo(painel, dados); }, painel["tempo"] * 1000); } }); }); } //================================================== CONTEUDO CONSUMIDO NOS gráficos DE ACORDO COM O TIPO function BaixarDados(painel) { var codigo = painel["codigo"]; var conteudo; switch (codigo) { case 1: conteudo = [ { y: '2016-02-01', a: 2000 }, { y: '2016-02-02', a: 1700 }, { y: '2016-02-03', a: 2500 }, { y: '2016-02-04', a: 4500 }, { y: '2016-02-05', a: 2500 }, { y: '2016-02-06', a: 3500 }, { y: '2016-02-07', a: 4500 }, { y: '2016-02-08', a: 1500 }, { y: '2016-02-09', a: 2500 }, { y: '2016-02-10', a: 3500 }, { y: '2016-02-11', a: 2500 }, { y: '2016-02-12', a: 3200 }, { y: '2016-02-13', a: 1800 }, { y: '2016-02-14', a: 4000 }, { y: '2016-02-15', a: 3500 }, { y: '2016-02-16', a: 2000 }, { y: '2016-02-17', a: 5000 } ]; break; case 2: conteudo = [ { label: "Compraram", value: 150 }, { label: "Visitaram", value: 80 } ]; break; case 3: conteudo = [ ["Valor total Venda", "15.100,00", "FFFFFF", "000000"], ["Markup", "2.5", "FFFFFF", "000000"], ["Ticket Médio", "R$ 350,00", "FFFFFF", "000000"], ["Peças Atendimento", "4", "FFFFFF", "000000"], ["Quantidade Vendida", "2.500", "FFFFFF", "000000"] ]; break; case 4: conteudo = [ ["W015 - LOJA 015", "54.100,00", "00CC00", "FFFFFF"], ["W020 - LOJA 020", "44.054,70", "00CC00", "FFFFFF"], ["W050 - LOJA 050", "23.830,00", "FFFFFF", "000000"], ["W100 - LOJA 100", "63.500,00", "00CC00", "FFFFFF"], ["W230 - LOJA 230", "93.450,00", "FF0000", "FFFFFF"], ["W011 - LOJA 011", "54.100,00", "FFFF00", "000000"], ["W002 - LOJA 002", "34.054,70", "FFFFFF", "000000"], ["W250 - LOJA 250", "23.830,00", "FFFF00", "000000"], ["W112 - LOJA 112", "13.500,00", "FFFF00", "000000"], ["W030 - LOJA 030", "53.450,00", "FFFF00", "000000"], ["W045 - LOJA 045", "34.100,00", "FFFFFF", "000000"], ["W050 - LOJA 050", "64.054,70", "FF0000", "FFFFFF"], ["W065 - LOJA 065", "33.830,00", "00CC00", "FFFFFF"], ["W042 - LOJA 042", "13.500,00", "00CC00", "FFFFFF"], ["W081 - LOJA 081", "43.450,00", "00CC00", "FFFFFF"], ["W093 - LOJA 093", "84.100,00", "00CC00", "FFFFFF"], ["W023 - LOJA 023", "74.054,70", "FFFFFF", "000000"], ["W077 - LOJA 077", "63.830,00", "00CC00", "FFFFFF"], ["W154 - LOJA 154", "53.500,00", "00CC00", "FFFFFF"], ["W221 - LOJA 221", "83.450,00", "FF0000", "FFFFFF"], ["W016 - LOJA 016", "54.100,00", "00CC00", "FFFFFF"], ["W023 - LOJA 023", "44.054,70", "FFFFFF", "000000"], ["W012 - LOJA 012", "33.830,00", "00CC00", "FFFFFF"], ["W005 - LOJA 005", "23.500,00", "00CC00", "FFFFFF"], ["W111 - LOJA 111", "53.450,00", "00CC00", "FFFFFF"] ]; break; case 5: conteudo = [ { y: 'Out 10', a: Math.random(), b: Math.random() }, { y: 'Oct 11', a: Math.random(), b: Math.random() }, { y: 'Oct 12', a: Math.random(), b: Math.random() }, { y: 'xxx 13', a: Math.random(), b: Math.random() }, { y: 'Oct 14', a: Math.random(), b: Math.random() }, { y: 'Oct 15', a: Math.random(), b: Math.random() }, { y: 'Set 16', a: Math.random(), b: Math.random() } ]; break; case 6: conteudo = [{ "label": "Norte", "value": -29.76 }, { "label": "Sul", "value": 50 }, { "label": "Centro-Oeste", "value": -10 }, { "label": "Nordeste", "value": 30 }, { "label": "Sudeste", "value": 80 } ]; break; case 7: conteudo = [ { y: 'Ago/15', a: 80, b: 70 }, { y: 'Set/15', a: 55, b: 60 }, { y: 'Out/15', a: 65, b: 40 }, { y: 'Nov/15', a: 82, b: 80 }, { y: 'Dez/15', a: 95, b: 80 }, { y: 'Jan/16', a: 40, b: 35 } ]; break; case 8: conteudo = [ ["Jonas Alencar Silva", "4.100,00", "00CC00", "FFFFFF"], ["Patricia Marcela Carvalho", "4.054,70", "00CC00", "FFFFFF"], ["Priscila Rodrigues Santos", "3.830,00", "00CC00", "FFFFFF"], ["Bruan Denise Nunes", "3.500,00", "00CC00", "FFFFFF"], ["Martilene de Oliveira", "3.450,00", "FFFF00", "000000"], ["Fernanda Souza", "2.500,00", "FFFF00", "000000"], ["Luciana Marques Brito", "2.005,60", "FFFF00", "000000"], ["Fabiana Carolina Machado", "1.891,00", "FFFF00", "000000"], ["Andressa Graça Silva", "1.750,00", "FFFF00", "000000"], ["Eliane Gleice Dantas", "1.500,00", "FFFFFF", "000000"], ["Ednea Monteiro Matos", "1.321,00", "FFFFFF", "000000"], ["Lidiane Lopes Prado", "900,00", "FFFFFF", "000000"] ]; break; case 9: conteudo = [ { label: "Calçado", value: 1200 }, { label: "Casual", value: 4000 }, { label: "Cosmético", value: 500 }, { label: "Acessórios", value: 2400 }, { label: "Outros", value: 900 } ]; break; } return conteudo; } //* CarregarPaineis(); $(".recarrega").on("click", function () { let id = ($(this).parents('.panel-default').attr('id')); let cod = ($(this).parents('.panel-default').attr('codigo')); Log(id); Log(cod); $('#' + id).load('Home'); }); });
  7. É o seguinte, com o código abaixo só consigo escolher uma das divs, eu quero clicar no botão de copiar e copiar as duas divs, com um clique só... <div id="markup"> Text that can be copied or selected with cross browser support. </div> <br><br> não copiar esse texto <br><br> <div id="markup2"> Copiar o texto 2 </div> <br><br> <button id="botaodecopiar1">copiar!</button> E o javascript <script type="text/javascript"> function selectElementContents(el) { // Copy textarea, pre, div, etc. if (document.body.createTextRange) { // IE var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.select(); textRange.execCommand("Copy"); } else if (window.getSelection && document.createRange) { // non-IE var range = document.createRange(); range.selectNodeContents(el); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copy command was ' + msg); } catch(err) { console.log('Oops, unable to copy'); } } } // end function selectElementContents(el) function make_copy_button(el) { var botaodecopiar = document.getElementById('botaodecopiar1'); botaodecopiar.onclick = function() { selectElementContents(el); }; if (document.queryCommandSupported("copy") || parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42) { // Copy works with IE 4+, Chrome 42+, Firefox 41+, Opera 29+ botaodecopiar.value = "Copy to Clipboard"; } else { // Select only for Safari and older Chrome, Firefox and Opera botaodecopiar.value = "Select All (then press CTRL+C to Copy)"; } } var elem = document.getElementById("markup"); var elem2 = document.getElementById("markup2"); make_copy_button(elem2); </script>
  8. Olá. Estou aprendendo a usar o bootstrap. Em meus estudos me surgiu uma duvida. Se há como centralizar todo conteudo de uma div. Tenho códigos de exemplo... <!DOCTYPE html> <html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <div class="container"> <h1>Bootstrap <small>Meu primeiro site</small></h1> <p>Usando o bootstrap</p> </div> <div class="container" id="homer"> <div class="container col-xs-12 col-sm-6 col-md-6 col-lg-3"> <img src="1.png" class="img-responsive"> </div> <div class="container col-xs-12 col-sm-6 col-md-6 col-lg-3"> <img src="1.png" class="img-responsive"> </div> <div class="container col-xs-12 col-sm-6 col-md-6 col-lg-3"> <img src="1.png" class="img-responsive"> </div> <div class="container col-xs-12 col-sm-6 col-md-6 col-lg-3"> <img src="1.png" class="img-responsive"> </div> </div> <div class="container" id="planos"> <div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6" style="background-color: black"> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> </div> <div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6" style="background-color: black"> <h3>Nossos Planos</h3> <div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12"> <button class="btn btn-primary">Lorem Ipsum</button> </div> <div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12"> <button class="btn btn-primary">Lorem Ipsum</button> </div> <div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12"> <button class="btn btn-primary">Lorem Ipsum</button> </div> </div> </div> </div> </body> </html> No id="planos" tenho tres botões, quero eles um abaixo do outro, dentro da mesma row, até ai beleza. Mas queria centralizar na div esses botoes... O texto "Nossos Planos" eu consigo centralizar com "text-align", mas teria uma forma de eu centralizar os botões ou qualquer outro conteudo de uma div? desde já grato!
  9. Galera, estou apanhando um pouco para Javascript rs, preciso fazer uma função para que quando eu clique numa imagem ela meio que desapareça, mas nao estou conseguindo, segue abaixo o meu trecho de código <html> <head> <script type="text/javascript"> var x, y; var ctx; var m=[]; var v=[] var i, j; var apagar1 = document.getElementById("i1"); function inicio() { var c=document.getElementById("cnv") ctx=c.getContext("2d"); fundo(); for(i=0;i<20;i++) { m[i]=[]; v[i]=[]; } for(i=0;i<20;i++){ for(j=0;j<20;j++){ m[0][0]=document.getElementById("i1"); m[0][1]=document.getElementById("i2"); m[0][2]=document.getElementById("i3"); }} num1(); } function fundo() { ctx.fillStyle="#000000"; ctx.fillRect(0,0,1300,600); } function num1(){ ctx.drawImage(m[0][0],100,100); ctx.drawImage(m[0][1],200,200); ctx.drawImage(m[0][2],600,525);} </script> </head> <body onload="inicio()"> <canvas id="cnv" width="1300" height="600" style="border: solid 1px black; margin: 0px auto; display: block;"> Navegador sem suporte <img src="link da img 1" id="i1"> <img src="link da img 2" id="i2"> <img src="link da img 3" id="i3"> </canvas> </body> </html> Posso utilizar somente Javascript, se puderem me ajudar eu ficaria muito agradecido, estou meio que desesperado kkkk
  10. Galera, estou apanhando um pouco para Javascript rs, preciso fazer uma função para que quando eu clique numa imagem ela meio que desapareça, mas nao estou conseguindo, segue abaixo o meu trecho de código <html> <head> <script type="text/javascript"> var x, y; var ctx; var m=[]; var v=[] var i, j; var apagar1 = document.getElementById("i1"); function inicio() { var c=document.getElementById("cnv") ctx=c.getContext("2d"); fundo(); for(i=0;i<20;i++) { m[i]=[]; v[i]=[]; } for(i=0;i<20;i++){ for(j=0;j<20;j++){ m[0][0]=document.getElementById("i1"); m[0][1]=document.getElementById("i2"); m[0][2]=document.getElementById("i3"); }} num1(); } function fundo() { ctx.fillStyle="#000000"; ctx.fillRect(0,0,1300,600); } function num1(){ ctx.drawImage(m[0][0],100,100); ctx.drawImage(m[0][1],200,200); ctx.drawImage(m[0][2],600,525);} </script> </head> <body onload="inicio()"> <canvas id="cnv" width="1300" height="600" style="border: solid 1px black; margin: 0px auto; display: block;"> Navegador sem suporte <img src="link da img 1" id="i1"> <img src="link da img 2" id="i2"> <img src="link da img 3" id="i3"> </canvas> </body> </html> Posso utilizar somente Javascript, se puderem me ajudar eu ficaria muito agradecido, estou meio que desesperado kkkk
  11. Prezados Bom dia, fiz o download do meu site no wordpress através do plugin Duplicator, e estou fazendo as alterações localmente para depois duplicar de novo para web. Na página inicial contem 4 posts mais recentes em destaque, porém não consigo dividi-los em 2 colunas uma vez que seu conteudo é por meio de uma função que já vem pronta, ou do tema ou da empresa que montou o site, eu não entendi muito bem. CSS da div: .conteudo-home{ margin-top:30px;} .noticias{ width:440px; height:400px; position:relative; float: left;} .news{ width:440px; height:135px; margin-bottom:13px;} .news-img{ position:relative; float:left; width:240px; height:137px;} .news-txt{ width:305px; height:135px; position:relative; float:left;} .news-txt h2, .news-txt h2 a{ text-decoration:none; color:#000; font-size:16px; font-weight:bold; text-align:center; padding-top:px; font-family: 'Arial'; line-height: 1.5;} .news-txt p{ font-size:12px; line-height: 1.5; margin:11px 20px 10px 20px;} Código da pagina: <?php $recent = new WP_Query("showposts=4"); if ($recent->have_posts()) : $class = 0; //Variável para testar a contagem while ($recent->have_posts()) : $recent->the_post(); $class++; //Inclementa a variável $tipo = ($class > 1) ? "ultimos-posts" : "news-post1"; ?> <div class="news"> <div class="news-img"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></div> <div class="news-txt <?php echo $tipo; ?>"><h2><a href="<?php the_permalink(); ?>"><?php title_limite(25); ?></a></h2> <p><?php the_excerpt(); ?></p></div></div> <?php endwhile; else: ?> <?php endif; ?>
  12. Boa tarde, Estou com um código de abrir abrir e esconder divs, sendo que quando uma abre a outra fecha. O problema é que ele começa fechado e eu queria q ele começasse aberto. Segue o <script type="text/javascript"> function ExpandeDiv(id_cadastro) { var qtd_div = document.getElementsByTagName('div').length; var div_sel = document.getElementById(id_cadastro); var todas_divs; for (var i = 1; i <= qtd_div; i++) { todas_divs = document.getElementById("div"+i); if (todas_divs.id != id_cadastro) todas_divs.style.display = 'none'; else div_sel.style.display = 'block'; } } </script> <a href="#" onclick="ExpandeDiv('div1')">Humor</a> <a href="#" onclick="ExpandeDiv('div2')">Músicas</a> <a href="#" onclick="ExpandeDiv('div3')">Negocios</a> <br><br> <div id="div1" style="display:none";><b>Div 1 </div> <div id="div2" style="display:none";><b>Div 2 </div> <div id="div3" style="display:none";><b>Div 3 </div>
  13. Galera Boa Tarde, estou com uma dificuldade em fazer um texto dentro de uma div ficar na parte debaixo dele .. No caso só quero que o Campo de Pesquise fique embaixo ... Estou desenvolvendo o Sistema usando BootStrap.. <div class="col-md-6'" align="center" > <br/> <a href="">Entrar</a> <a href="">Cadastrar</a> Pesquisar: <input type="search" placeholder="Buscar Produto" name="pesquisarproduto" size="40"> <button type="button" class="btn btn-primary"> <span class="glyphicon glyphicon-search"></span> Pesquisar</button> </div> Obrigado
  14. Eu quero simular um texto dentro da div, esse é trabalho de um site e não consigo finalizar. Por favor me ajude. Exemplo: <div class="comment-simplebox-text" role="textbox" aria-multiline="true" contenteditable="plaintext-only"></div> Tem que ficar assim: <div class="comment-simplebox-text" role="textbox" aria-multiline="true" contenteditable="plaintext-only">Ola</div> Quem dar a resposta correta deixa o e-mail, depois vou entrar em contato com pessoa para agradecimento...
  15. Preciso inserir uma div circular que abriga uma imagem dentro de uma div(head) retangular, UTILIZANDO CSS. Tentei de 1001 maneiras, mas não consegui
  16. Gostaria de saber como contruir "galeria de imagens" responsivas onde elas se ajustariam para caber na tela sem estragar a imagem como uma tabela, eu achei um exemplo de exatamente como descrevo https://popcorntime-online.io/ se ajusta a cada tela com um numero x de divs. Como faria isso com css e html ?
  17. Olá, estou tentando colocar duas divs dentro de uma outra div mas não está rolando, porque parece q as duas cancelam a primeira. Por exemplo a cor de fundo, que está definido na primeira, não aparece mais. Inclusive sua altura.. é como se não existisse.. como se não tivesse nada dentro. Como faço para isso não acontecer? Segue o código CSS e html: /*CSS*/ .fundolugares { color: #000; font-size: 18px; background:#CCC; border:#000; border-style:dashed; width: auto; height:auto; /* cima direita baixo esquerda */ border-radius:5px; box-shadow: 4px 4px 4px #FFF; } .falandosobreolugar { width: 800px; background:#CCC; border:none; height:auto; /* cima direita baixo esquerda */ padding: 1% 2% 2% 2%; margin:1% 5% 2% 2%; float: right; clear:none; border-style:none; border-radius:none; } .oqueolugaroferece { width: 200px; background:#CCC; border:#000; height:auto; /* cima direita baixo esquerda */ padding: 1% 2% 2% 2%; margin:1% % 2% 3%; float: left; clear:none; border-style:dashed; border-radius:5px;} <!--html--> <div class="fundolugares"> <div align="left" class="oqueolugaroferece"> O que o lugar oferece: Estacionamento Play </div> <div align="justify" class="falandosobreolugar"> <p> kkssjjw kjksdjjka dhjashd s jhd ahsjdh dashd jshd akj hdjhas djahs djkshd jakhs djashd jhasd jhas dajshd jashd jsah kkssjjw kjksdjjka dhjashd s jhd ahsjdh dashd jshd akj hdjhas djahs djkshd jakhs djashd jhasd jhas dajshd jashd jsah kkssjjw kjksdjjka dhjashd s jhd ahsjdh dashd jshd akj hdjhas djahs djkshd jakhs djashd jhasd jhas dajshd jashd jsah kkssjjw kjksdjjka dhjashd s jhd ahsjdh dashd jshd akj hdjhas djahs djkshd jakhs djashd jhasd jhas dajshd jashd jsah </p> <p align="right">23/04/2016 </p> </div> </div>
  18. Olá! Tenho uma dúvida sobre as possibilidades do CSS. É possível ajustar a largura de uma <div> a um texto e ao mesmo tempo centralizá-la na página apenas com CSS? A propriedade "display: inline-block;" ajusta a div ao texto, porém anula o valor "0 auto" da propriedade "margin", que serve para centralizar o elemento na página. Poderia centralizar a div com margin-left e margin-top, porém precisaria saber o valor exato da largura do texto em pixels, o que me levou a curiosidade de saber se existe essa possibilidade em Javascript. De qualquer forma esta segunda opção seria contraproducente. Esta dúvida surgiu diante da necessidade de centralizar um título na página antecedida por un antetítulo de tamanho menor, porém alinhado à esquerda do título principal, como na imagem em anexo. Tudo isto é possível fazer com ajustes no margin, porém minha dúvida é se existe alguma possibilidade de fazer isto de forma prática, sobretudo devido à diversidade de telas e browsers que modificam o posicionamento dos elementos. É isto! Abraço!
  19. Ed3002

    Echo

    Oi pessoal, um favor, estou iniciando em PHP, queria consultar-lhes sobre o seguinte (com certeza será simples para vocês): tenho desenhado minha pagina usando 5 "div", e desejo escolher uma "div " qualquer para mostrar uma imagem, isto seria feito dentro do código PHP, é possível?, como que faço para indicar ao comando "echo" a div para mostrar a imagem?. Agradeço desde já pela ajuda.
  20. Boa tarde, estou querendo criar um slide na página home do meu site, mas não consigo fazer com que a imagem se ajuste conforme a tela igual por exemplo o site da Xbox faz, quero que uma imagem complete 100% width e 400px height ou que conforme o valor de width ele calculasse um valor para height que não ficasse muito grande mas ficasse ajustado na página, seria possível? Basicamente eu queria criar o mesmo esquema de ajuste de imagem do site http://www.xbox.com/pt-BR/ Agradeço se puderem me ajudar.
  21. Olá pessoal, estou tentando fazer com que o link de um botão seja alterado de acordo com o que está sendo mostrado no titulo da página, então fiz uma expressão regular que testa o link e tals e dependendo do resultado muda o link. O problema é que não estou conseguindo dar o setAttribute na tag 'a' - do link: try{ var title = parent.document.title; var prodName = /Cutter/ig.exec(title); if(prodName == 'Cutter') { $('#botao a').attr('href', 'orcamentos-cutter?tmpl=component'); } else { $('#botao a').attr('href', 'orcamentos?tmpl=component'); } }catch(e){ alert(e.name + "-" + e.message); } <div id="botao"> <a class="comprar modal" rel="{handler: 'iframe', size: {x: 500, y: 450}}">Clicar aqui</a> </div>
  22. Bom dia galera! Estou com um dúvida. Preciso fazer o carregamento dinâmico de dados vindo do DB. Eu consigo fazer com o campo select. Por exemplo, quando seleciono o primeiro select, abaixo ele lista o outro campo select, e assim sucessivamente, no total são 3 campos. Grupos, Clientes e Instalações. Mas eu não quero que abre com um campo select, eu quero que clique no grupo e apareça em baixo o cliente, e quando clicar em cliente aparecer instalações, com seus respectivos ID. Desde já agradeço aí quem puder ajudar. Meu código em ajax: <script> $(document).ready(function(){ // Evento change no campo tipo $("select[name=nome_grupo]").change(function(){ // Exibimos no campo marca antes de concluirmos $("select[id=clientes]").html('<option value="">Carregando...</option>'); // Exibimos no campo marca antes de selecionamos a marca, serve também em caso // do usuario já ter selecionado o tipo e resolveu trocar, com isso limpamos a // seleção antiga caso tenha feito. $("select[id=instalacao]").html('<option value="">Escolha uma instalação...</option>'); // Passando tipo por parametro para a pagina ajax-marca.php $.post("http://localhost/wordpress/wp-content/themes/onetone/accordion/dados.php", {id:$(this).val()}, // Carregamos o resultado acima para o campo marca function(valor){ $("select[id=clientes]").html(valor); } ) }) // Evento change no campo marca $("select[id=clientes]").change(function(){ // Exibimos no campo modelo antes de concluirmos $("select[id=instalacao]").html('<option value="">Carregando...</option>'); // Passanddo marca por parametro para a pagina ajax-modelo.php $.post("http://localhost/wordpress/wp-content/themes/onetone/accordion/dados1.php", {id:$(this).val()}, // Carregamos o resultado acima para o campo modelo function(valor){ $("select[id=instalacao]").html(valor); } ) }) }) </script> Código em PHP: <?php include("conexao.php"); try { $id_dados = strip_tags(trim($_POST['id'])); $resu = $pdo->query("SELECT * FROM cad_clientes WHERE id_grupo = $id_dados "); $resu->bindValue(1, $id_dados); $resu->execute(); } catch(Exception $e) { print "ERRO!:". $e->getMessage() . "<br>"; die(); } while($lista = $resu->fetch(PDO::FETCH_ASSOC)) { echo '<option value="'.$lista['id_cliente'].'">'.$lista['nome_cliente'].'</option>'; } ?> Index: <div class="alinhar"> <form name="listadados" id="listadados" action=""> Grupo: <select name="nome_grupo" id="grupo"> <option value="">Escolha o grupo</option> <?php while($resut = $resu->fetch(PDO::FETCH_ASSOC)) { ?> <option value="<?php echo $resut['id_grupo']; ?>"><?php echo $resut['nome_grupo']; ?></option> <?php } ?> </select> <br><br> Clientes: <select name="nome_cliente" id="clientes"></select> <br><br> Instalações: <select name="nome_instalacao" id="instalacao"></select> </form> </div>
  23. Pessoal, Antigamente eu dividia as minhas páginas, com <table>, lendo tutoriais, assistindo video aulas, fui vendo que isto não é a melhor forma de trabalhar, então me atualizei, e estou trabalhando com <div> e outras tag's para organizar meus projetos. O problema que estou encontrando, é que coloquei um formulário com vários <input>, para o preenchimento de dados, organizado dentro de um <fieldset>, fazendo a estilização da página por CSS. Bom nada fora do que deveria ser. Porem o cadastro é grande, e tem elementos que estão abaixo do limite da tela, e não exibe uma barra de rolagem. Revisei todo o meu CSS, não tenho nada com "overflow: hidden;" Na CSS, adicionei uma tentativa de solução, que não houve resultado. div { overflow: visible; }Alguém pode me dar uma ajuda??? Não deve ser nada complicado, mas não encontrei solução ainda.
  24. Olá boa TARDE. eu Uso a interface BLOGGER para gerenciar um dos meus sites. Eu gostaria de fazer um box FLUTUANTE que apareça 1 vez por dia por IP QUE POSSUA UM 'X' PARA FECHAR e que a imagem suma assim que a pessoa passe o mouse em cima desse 'X' se possível sumir assim que passe o mouse no 'x' agradeceria se alguém pudesse me ajudar
  25. Bom Dia Pessoal, estou com um problema estou tentando ligar uma DIV a outra DIV por uma linha, mas não estou conseguinto fazer isso, essa linha pode ser outra div, e as div ligadas são drag, alguém pode me ajudar? é algo tipo o da imagem tenho um botão para ligar as div :) Vlw