Pesquisar na Comunidade

Boa noite pessoal. Estou começando agora no HTML e CSS, estou com uma dificuldade de posicionar meus menus. tentei de varias formas mas ainda não consegui fazer do jeito certo. Creio ter feito varias gambiarras, para chegar nesse resultado. Mas o menu da direita não consigo de jeito nenhuma deixar alinhado com o da esquerda. Acredito que me falta um pouco de experiencia no posicionamento de componentes. Já estudei bastante, mas não encontrei saida. Pretendo fazer dois sidebar sendo acionados e retraidos pelos botoes de "3barras" de um lado e de outro. Segue a segunda foto como o objetivo em que gostaria de chegar. Segue tambem o código em meu github. https://github.com/DevJMoab/WebWorld Agradeceria muito pela ajuda.

Gostaria de saber como faço para inserir um sistema de nota parecido com essa "nota do crítico" que existe no final das críticas do omelete: https://www.omelete.com.br/netflix/criticas/o-heroi-critica, de modo que eu só marcasse no meu post a nota que quero dar. Esse exemplo é só uma referência, pode ser também um selo que eu só insira em determinadas postagens.

olá de Novo, Eu queria colocar me meu site, um carousel que mostre 4 imagens de inicio, e quando eu clicar pro lado, aparecer , mais 4. Lembrando que vai ficar no meio do site ! então tem que tomar essa propoção na imagem a baixo ! Meu site em HTML,CSS E JS. Quem puder me ajudar ! Grato !

Olá a todos ! Vocês poderiam me ajudar mais uma vez ? Eu estou com um Site que um amigo me enviou e tem já o PHP com parte de contato com: Nome Email Numero de telefone Já ta pronto, eu só vou editar o site. Queria saber se por esta pronto eu não vou precisar mexer em nada, ou só colocar na minha host e configurar lá ? Pode me ajudar ? Sou muito novo nisso e to querendo o máximo de informações possíveis ! Grato !

Olá, Tudo bem ? Estou com uma extrema dificuldade em fazer uma agenda para que o cliente faça login no site, entre e faça um agendamento ,com data,hora e o dia. E que eles sejam nulos para quando outro for fazer o cadastro. Quero que tenha um login de admin, para que o administrador entre e veja os horários marcados e com quem será. Fiz meu site com HTML e CSS. Alguém me ajuda a incluir esse formulário no meu site? Agradeço dês de já!

Fala galera, estou tentando o layout da imagem e estou com bastante dificuldades. Segue os códigos: HTML: <section id="about" class="about-area"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="text-container"> <h1>Lorem ipsum dolor </h1> </div> <!-- end of text-container --> </div> <!-- end of col --> </div> <!-- end of row --> <div class="row"> <div class="col-lg-12"> <!-- Team Member --> <div class="team-member"> <div class="image-wrapper"> <img class="img-fluid" src="assets/images/team-member-2.svg" alt="alternative"> </div> <!-- end of image-wrapper --> <p class="p-large"><strong>Lacy Whitelong</strong></p> <p class="job-title">Business Developer</p> <span class="social-icons"> <span class="fa-stack"> <a href="#your-link"> <i class="fas fa-circle fa-stack-2x facebook"></i> <i class="fab fa-facebook-f fa-stack-1x"></i> </a> </span> <span class="fa-stack"> <a href="#your-link"> <i class="fas fa-circle fa-stack-2x twitter"></i> <i class="fab fa-twitter fa-stack-1x"></i> </a> </span> </span> <!-- end of social-icons --> </div> <!-- end of team-member --> <!-- end of team member --> <!-- Team Member --> <div class="team-member"> <div class="image-wrapper"> <img class="img-fluid" src="assets/images/team-member-2.svg" alt="alternative"> </div> <!-- end of image wrapper --> <p class="p-large"><strong>Chris Brown</strong></p> <p class="job-title">Online Marketer</p> <span class="social-icons"> <span class="fa-stack"> <a href="#your-link"> <i class="fas fa-circle fa-stack-2x facebook"></i> <i class="fab fa-facebook-f fa-stack-1x"></i> </a> </span> <span class="fa-stack"> <a href="#your-link"> <i class="fas fa-circle fa-stack-2x twitter"></i> <i class="fab fa-twitter fa-stack-1x"></i> </a> </span> </span> <!-- end of social-icons --> </div> <!-- end of team-member --> <!-- end of team member --> </div> <!-- end of col --> </div> <!-- end of row --> </div> <!-- end of container --> </div> <!-- container --> </section> CSS: /*=========================== 4.ABOUT css ===========================*/ .about-area { position: relative; background-color: #17171B; padding-top: 100px; padding-bottom: 100px; } .about-area .section-title .title { font-size: 44px; font-weight: 600; line-height: 55px; color: #121212; } @media (max-width: 767px) { .about-area .section-title .title { font-size: 22px; line-height: 32px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-area .section-title .title { font-size: 28px; line-height: 38px; } } .about-area .section-title .text { font-size: 20px; line-height: 25px; color: #121212; margin-top: 8px; } @media (max-width: 767px) { .about-area .section-title .text { font-size: 16px; } } .single-about .about-icon img { width: 120px; } @media (max-width: 767px) { .single-about .about-icon img { width: 100px; } } .single-about .about-content { padding-left: 30px; } @media (max-width: 767px) { .single-about .about-content { padding-left: 0; padding-top: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-about .about-content { padding-left: 30px; padding-top: 0; } } .single-about .about-content .about-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #ffffff; } .single-about .about-content .text { font-size: 16px; color: #ffffff; margin-top: 16px; } /*===== ABOUT 2 =====*/ .about-area-2 { position: relative; padding-top: 120px; padding-bottom: 120px; } .about-area-2 .about-image { position: absolute; width: 40%; height: 100%; top: 0; right: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-area-2 .about-image { width: 34%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-area-2 .about-image { position: relative; width: 720px; margin: 0 auto; } } @media (max-width: 767px) { .about-area-2 .about-image { position: relative; width: 100%; padding-left: 15px; padding-right: 16px; margin: 0 auto; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-area-2 .about-image { position: relative; width: 540px; margin: 0 auto; } } .about-area-2 .about-image .image { max-width: 580px; width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-area-2 .about-image .image { margin: 0 auto; padding-top: 50px; } } @media (max-width: 767px) { .about-area-2 .about-image .image { margin: 0 auto; padding-top: 50px; } } .about-area-2 .about-image .image img { width: 100%; } .about-content-2 { position: relative; z-index: 9; } .about-content-2 .about-icon i { font-size: 64px; color: #ffffff; } .about-content-2 .about-content { padding-left: 15px; } @media (max-width: 767px) { .about-content-2 .about-content { padding-left: 0; padding-top: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-content-2 .about-content { padding-left: 15px; padding-top: 0; } } .about-content-2 .about-content .about-title { font-size: 24px; font-weight: 500; line-height: 30px; color: #ffffff; } .about-content-2 .about-content .text { font-size: 14px; line-height: 20px; color: #ffffff; margin-top: 8px; } /*===== ABOUT 3 =====*/ .about-area-3 { background-color: #17171B; padding-top: 50px; padding-bottom: 100px; } .about-area-3 .image { width: 100%; } .about-area-3 .about-content .sub-title { color: #ffffff; font-size: 24px; line-height: 30px; font-weight: 700; text-transform: uppercase; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-area-3 .about-content .sub-title { font-size: 20px; } } @media (max-width: 767px) { .about-area-3 .about-content .sub-title { font-size: 20px; } } .about-area-3 .about-content .about-title { font-size: 44px; font-weight: 500; line-height: 55px; color: #ffffff; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-area-3 .about-content .about-title { font-size: 38px; line-height: 45px; } } @media (max-width: 767px) { .about-area-3 .about-content .about-title { font-size: 32px; line-height: 35px; } } .about-area-3 .about-content .text { color: #ffffff; font-size: 20px; font-weight: 500; margin-top: 16px; line-height: 25px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-area-3 .about-content .text { font-size: 18px; } } @media (max-width: 767px) { .about-area-3 .about-content .text { font-size: 16px; line-height: 24px; } } .about-area-3.about-area-bg-3 { background-color: #fff; } /* About */ .team-member { display: inline-block; width: 12.5rem; margin-right: 2rem; margin-left: 2rem; vertical-align: top; } /* end of about */ /* About */ .team-member { margin-right: 2.25rem; margin-left: 2.25rem; } /* end of about */ /*********************/ /* 14. About */ /*********************/ .basic-4 { padding-top: 7rem; padding-bottom: 4rem; text-align: center; } .basic-4 h2 { margin-bottom: 1rem; text-align: center; } .team-member { max-width: 12.5rem; margin-right: auto; margin-bottom: 3.5rem; margin-left: auto; } /* Hover Animation */ .image-wrapper { overflow: hidden; margin-bottom: 1.5rem; border-radius: 50%; } .image-wrapper img { margin: 0; transition: all 0.3s; } .image-wrapper:hover img { -moz-transform: scale(1.15); -webkit-transform: scale(1.15); transform: scale(1.15); } /* end of hover animation */ .team-member .p-large { margin-bottom: 0.25rem; font-size: 1.125rem; } .team-member .job-title { margin-bottom: 0.375rem; } .fa-stack { color: #ffffff; margin-top: 0.375rem; margin-right: 0.125rem; margin-left: 0.125rem; font-size: 1.25rem; } .fa-stack-2x { color: #ffffff; transition: all 0.2s ease; } .fa-stack-1x { color: #fff; transition: all 0.2s ease; } .fa-stack:hover .fa-stack-2x { color: #ffffff; } .fa-stack:hover .fa-stack-1x { color: #fff; }

Bom dia !! No site do link a seguir, quando eu reduzo o tamanho do site em: @media screen and (max-width: 900px) Entre a "Imagem 1" e a "tabela de baixo" existe um espaço !! Não estou conseguindo retirar este espaço !! LINK Por favor me ajudem Obrigado

Boa noite.. Estou desenvolvendo um site de Reiki https://reikicuritiba.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile. O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus não acontece nada.. segue o trecho do codigo do menu.. <div class="collapse navbar-collapse" id="navbarsExample09"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li> <li class="nav-item active"><a class="nav-link" href="about-us.html">Quem Somos</a></li> <li class="nav-item dropdown1"> <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li> <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a> <ul class="dropdown-menu" aria-labelledby="dropdown01"> <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li> <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li> <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li> <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li> <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li> <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li> </ul> </li> <li class="nav-item active"><a class="nav-link" href="blog.html">Blog</a></li> <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li> </ul> </div> Massagem Tantrica Curitiba Massagem Tântrica Tantra Curitiba Tantra Obrigado Att Julio Cezar Maithuna Tantra - Massagem Tântrica Curitiba

Prazer! meu nome é frederico e tenho 18 anos, estou começando em JS e quero ler livros didáticos sobre. Quais são os livros mais recomendados para quem está começando na linguagem?

---

Olá, sou muito novo na programação e estou aprendendo do básico html pelo notepad++, mas não estou conseguindo visualizar meu projeto no navegador quando clico para visualizar aparece isso como na imagem abaixo, não sei o que eu faço alguém me ajuda por favor. já resolvi o problema

Esta é minha primeira pergunta aqui no fórum, estou tentando montar um site mas está acontecendo esse erro não sei porque quem puder ajudar ficaria muito agradecida segue o codigo: <!DOCTYPE html> <html lang="pt-br"> <head> <link rel="stylesheet" type="text/css" href="./css/main.css"> <meta charset="utf-8"/> <title>Primeiro projeto</title> </head> <body> <header class="menu principal"> <div class="header-1"> <div class="logo"> <img src="./img/logo loja certo.png"/> </div> <div class="redes sociais"> </div> </div> </header> </body> </html> css: .header-1{ background-color: #c77234; height: 60px; width: 100%; }

Olá, comecei meus estudos em HTML e CSS a pouco tempo, eu começar isso pra mais depois, e aqui estamos enfim...sou bem novato é HTML e CSS então pf paciência porque vão prescisar...vou pular tudo isso e chegar logo na questão, na maioria dos sites tem uma função que quando você coloca o mouse em cima aparece outras coisas, aqui por exemplo se você colocar o mouse em cima da "navegações" e depois por em cima das "atividades" vai aparecer outras informações, como q faço isso?

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@contato.com.br", // 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!

Tenho um trabalho para entregar amanhã (Curso - sou iniciante), porém estou com um problemas, porque a imagem que eu coloquei no Section está sobrepondo o meu Header quando eu rolo a página. Qual comando posso utilizar para deixar ela em "segundo plano"? A imagem era para estar abaixo da parte preta

Como colocaria a função para mostrar os usuarios indicados? usei o metodo 'Pluck' para chamar os usuarios da db mas ele mostra sinais do tipo '[" .,"] ficando entre os nomes e não to sabendo remover. Eu tentei usar o 'Value' e assim fica correto, porém só mostra apenas 'um' usuario. Como mostraria todos? esta é a imagem do tooltip com 'pluck' e com o 'value' mostra somente 'um' usuário meu php public function nnIndicados() { return User::where('pai_id', $this->id)->value('name'); } meu html <tbody> @inject('usuarios', 'App\User') @foreach($usuarios->getIndicados() as $user) <tr> <td><center><div class="font-size-sm text-muted">Resultado <span style="color:#00FF00"><strong>{{$user->totalIndicadosAtivos()}}</strong></span>/{{$user->nIndicados()}}</div> <img class="img-avatar img-avatar-thumb" src="/img/positivo.png" width="128" data-container="body" alt="User Avatar" title="{{$user->nnIndicados()}}"data-toggle="tooltip" style="cursor:pointer;"></td></center> <td><img class="img-avatar img-avatar-thumb" src="{{$user->photo}}"width="128" data-container="body" alt="User Avatar" data-html='true' title="{{$user->getshortname()}}" data-toggle="tooltip" style="cursor:pointer;"></td> <td><b>{{$user->name}}</b></td> <td>{{$user->email}}</td> <td>{{$user->telefone}}</td> <!-- <td>{{$user->getUserDirection()}}</td> --> <td>{{$user->getStatus()}}</td> <td>{{$user->getPacote()->nome}}</td> <td>{{$user->minhaGraduacao()}}</td> </tr> @endforeach

Boa tarde! Estou batendo a cabeça numa configuração simples, porém que foge do meu conhecimento, andei pesquisando na internet, mas não encontrei uma solução que funcionasse na minha pagina. Preciso apenas configurar o pattern do input para receber dados tanto de email, quanto de cpf para simplificar meu sistema, limitei meu usuario a cadastrar apenas os numeros do CPF, porem como meu sistema permite que o usuario se logue pelo email ou pelo cpf, não conseguigo configurar o pattern do login eu gostaria que meu pattern permitisse apenas letras e numeros e FACULTATIVO o "@" e "." mas ai eu so estou conseguindo fazer sem o "@" e "." ou com "@" e "." esse facultativo que não sei como colocar dentro do pattern. Existe essa possibilidade ou teria que ser por javascript mesmo? alguém me da uma luz!!!! o meu sonho seria um campo que conseguisse diferenciar se esta sendo preenchido como [caractere]@[caractere].[caractere] ou [3car].[3car].[3car]-[2ca], mas isso é muito dificil, estou errado? não tenho ideia se isso é possivel ou como poderia ser feito, esse foi o principal motivo de eu limitar o usuario a cadastrar somente numeros (sei que existe como fazer um "editar" na hora do POST, mas por enquanto meus estudos não chegaram ate ai) muito obrigado!!!

Antes de tudo venho humildemente agradecer qualquer ajuda que possam ter para tentar resolver esse meu problema. Bem gostaria de inserir uma função nesse script onde ele em determinado tempo iria verificar se o player parou de tocar (que seja a cada 3 segundos , exemplo) se parou ele dar play novamente, já estou a 3 dias tentando e sem sucesso. Não adianta dar refresh na pagina pois ai o player iria ficar "picotando" a cada segundo que houvesse o reload. Dentre mais segue abaixo o codigo que estou usando , lógico que omiti o link da stream substituindo por um exemplo qualquer. Mais uma vez meu muito obrigado e gratidão por disponibilizarem um pouco do seu tempo em tentar me ajudar <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'> <head> <title>awr player</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="jplayer-black-and-yellow.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.jplayer.min.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#jquery_jplayer_1").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { mp3:"http://servidor:porta/stream.mp3" }).jPlayer("play"); }, ended: function (event) { $("#jquery_jplayer_2").jPlayer("play", 0); }, swfPath: "js", supplied: "mp3 " }) .bind($.jPlayer.event.play, function() { // Using a jPlayer event to avoid both jPlayers playing together. $(this).jPlayer("pauseOthers"); }); }); //]]> </script> </head> <body> <div id="jquery_jplayer_1" class="jp-jplayer"></div> <div class="jp-audio-container"> <div class="jp-audio"> <div class="jp-type-single"> <div id="jp_interface_1" class="jp-interface"> <ul class="jp-controls"> <li><a href="#" class="jp-play" tabindex="1">play</a></li> <li><a href="#" class="jp-pause" tabindex="1">pause</a></li> <li><a href="#" class="jp-mute" tabindex="1">mute</a></li> <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li> </ul> <div class="jp-progress-container"> <div class="jp-progress"> <div class="jp-seek-bar"> <div class="jp-play-bar"></div> </div> </div> </div> <div class="jp-volume-bar-container"> <div class="jp-volume-bar"> <div class="jp-volume-bar-value"></div> </div> </div> </div> </div> </div> </ul> </div> </body> </html>

Boa tarde, tenho um desafio para cumprir e estou meio perdido, preciso criar uma vitrine semelhante a que está em anexo, porém não posso usar nenhum framework tem que ser tudo na unha, vi algumas coisas sobre carousel para fazer aquele tipo ali de aplicação, porem percebi que ali só conseguir botar imagens, e infelizmente não estou conseguindo fazer algo nem perto de semelhante a imagem anexada. Obs: o retrono do serviço ele é em JSON. Alguma dica de como iniciar essa vitrine? desde já agradeço a atenção de todos.

Boa noite galera! Estou com o seguinte problema, estou criando uma página em que essa página o usuário escolhe um arquivo do pc, que será o layout do seu crachá, o layout aparece na tela sem texto nenhum e o usuário pode colocar tags como: {{nome}} {{funcao}} e etc. Só que não tem idéia de como fazer pra "editar" esse arquivo pela página, ou seja colocar os dados que ele digitar no layout do crachá. Não sei se é possivel editar esse arquivo png(ou psd), já pesquisei muito a respeito e não achei uma solução parar gerar esses crachás. Não precisa me dar algum código pronto, quero pelo menos uma luz, uma ferramenta que seja possível fazer isso. Obrigado!

Boa tarde galera, sou meio novo aqui, mas o meu problema é o seguinte, estou carregando os dados de um log.txt utilizando AJAX, porem, gostaria de manipular estes dados para inserir em tabela, então gostaria de saber como posso passar os dados da variável AJAX para uma variável global JavaScript. segue o código. <html> <head> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> var data; var temp; temp = 100; var intervalo = window.setInterval(largura, temp); function largura() { var divh = document.getElementById("DataText").offsetHeight; window.scrollBy(0,divh) }; $(function() { setTime(); function setTime() { $("#DataText").load("registro0.txt"); setTimeout(setTime, temp); } }); </script> </head> <body> <table border="1"> <tr> <th>Cabeçalho</th> <th id="data">Outro Cabeçalho</th> <th >Outro Cabeçalho</th> <th>Outro Cabeçalho</th> <th>Outro Cabeçalho</th> </tr> <tr> <td>linha 1, célula 1</td> <td>linha 1, célula 2</td> <td>linha 1, célula 2</td> <td>linha 1, célula 2</td> <td>linha 1, célula 2</td> </tr> <tr> <td>linha 2, célula 1</td> <td>linha 2, célula 2</td> </tr> </table> <div style="width: 200px; font-size: 10px;"></div> </body> </html>

Pessoal, gostaria de criar um botão para exportar o conteúdo gerado por esse código em imagem (o conteúdo final não é uma imagem), tentei fazer com o canvas mas ele desconfigura tudo quando tem várias caixinhas 😕 <html><head> <script type="text/javascript" src="https://organograma-sas.000webhostapp.com/jquery.min.js"></script> <script type="text/javascript" src="https://organograma-sas.000webhostapp.com/jquery.orgchart.min.js"></script> <link rel="stylesheet" href="https://organograma-sas.000webhostapp.com/jquery.orgchart.min.css"> <script type="text/javascript"> 'use strict'; (function($) { $(function() { var datascource = {'name': 'Área1', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo1</Div>', 'className': 'DIR', 'children': [ {'name': 'Área2', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo2</Div>', 'className': 'GER'}, {'name': 'Área3', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo3</Div>', 'className': 'DEPTO', 'children': [ { 'name': 'Área4', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo4</Div>', 'className': 'GER' } ] }, {'name': 'Área5', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo5</Div>', 'className': 'DEPTO', 'children': [ {'name': 'Área6', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo6</Div>', 'className': 'GER' }, {'name': 'Área7', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo7</Div>', 'className': 'GER' }, {'name': 'Área8', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' }, {'name': 'Área12', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' }, {'name': 'Área13', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' }, {'name': 'Área14', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' }, {'name': 'Área15', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' }, {'name': 'Área16', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' }, {'name': 'Área17', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' }, {'name': 'Área18', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' }, {'name': 'Área19', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo9</Div>', 'className': 'GER', 'children': [ {'name': 'Área10', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo10</Div>', 'className': 'DEMAIS' } ] } ] }, {'name': 'Área11', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo11</Div>', 'className': 'DEPTO'} ] }; var oc = $('#chart-container').orgchart( { 'data' : datascource, 'nodeContent': 'title', verticalLevel: 4, visibleLevel: 300, 'initCompleted': function($chart) { $chart.find('.node:first').css('border-color', 'DIGITAR COR AQUI, POR EXEMPLO BLUE'); } }); $('#Zoom_out').on('click', function () { var $container = oc.$chartContainer; var $chart = oc.$chart; var scale = $container.width()/$chart.outerWidth(true); var x = ($container.width() - $chart.outerWidth(true))/2*(1/scale); var y = ($container.height() - $chart.outerHeight(true))/2*(1+scale); oc.setChartScale($chart, scale); var val = $chart.css('transform'); $chart.css('transform', val + ' translate(' + x + 'px,' + y + 'px)'); $("#Zoom_out").toggle(); $('#Zoom_in').show(); }); $('#Zoom_in').on('click', function () { oc.$chart.css('transform','none'); $("#Zoom_in").toggle(); $('#Zoom_out').show(); }); }); })(jQuery); </script> <style> #chart-container { font-family: Arial; border: 0px dashed #aaa; border-radius: 0px; overflow: auto; text-align: center; } .orgchart { background: #fff; } .orgchart td.left, .orgchart td.right, .orgchart td.top { border-color: #808080; } .orgchart td>.down { border-color: #808080; } .orgchart .VP .title { background-color: #00008B; } .orgchart .VP .content { border-color: #00008B; } .orgchart .DIR .title { background-color: #FF8C00; } .orgchart .DIR .content { border-color: #FF8C00; } .orgchart .DEPTO .title { background-color: #4682B4; } .orgchart .DEPTO .content { border-color: #4682B4; } .orgchart .GER .title { background-color: #A9A9A9; } .orgchart .GER .content { border-color: #A9A9A9; } .orgchart .DEMAIS .title { background-color: #DEB887; } .orgchart .DEMAIS .content { border-color: #DEB887; } .BotaoCinza { background-color: #A9A9A9; border: none; color: white; border-radius: 2px; padding: 2px 5px; text-align: center; text-decoration: none; display: inline-block; font-size: 12px; margin: 4px 2px; cursor: pointer; } .BotaoLaranja { background-color: #FF8C00; border: none; color: white; border-radius: 2px; padding: 2px 5px; text-align: center; text-decoration: none; display: inline-block; font-size: 12px; margin: 4px 2px; cursor: pointer; } #Zoom_in { display: none; } </style></head><body> <button class="BotaoCinza" id="Zoom_in">Zoom in</button> <button class="BotaoCinza" id="Zoom_out">Zoom out</button> <img src="" id="img1" border="0" /> <div id="chart-container"></div> </body></html> Grato pela ajuda!!!

Olá a todos do fórum e comunidade web, estou compartilhando aqui com vocês, um vídeo que acabei de produzir como editar arquivos, html, css e JavaScript diretamente do Google Chorme e ainda obter a visualização em tempo real. https://www.youtube.com/watch?v=RUREbXno7oM

Olá, estou criando um sistema escolar, minha dúvida no momento é sobre relatórios de frequência, preciso que quando o professor entre na página do relatório tenha uma tabela com os nomes e as presenças e faltas dos alunos, ex: NOME | 01/01/2018 | 02/01/2018 | 03/01/2018 Fulano | P | F | P Ciclano | F | P | F Deltrano | P | P | F Aonde P é Presente e F é falta. Tentei fazer o seguinte, criei uma tabela Alunos com as colunas ID, Nome. Criei outra tabela Presença com as colunas, Id_aluno, 01/01,2018, 02/01/2018, 03/01/2018, então relacionaria o id_aluno com o id e mostrava isso na página de frequência. Porém dessa forma além de ser trabalhoso ficaria ruim caso eu tivesse que colocar um mês inteiro de aulas ou até um período de aulas de 6 meses. Como não tenho muita experiência com php e mysql, não conheço muitos recursos que possam me ajudar nessa hora, e espero que vocês possam me ajudar, sei que esse sistema que pensei é muito amador mas não consigo pensar em nenhum outro.

Olá pessoal, gostaria que vocês me ajudassem me dando uma direção de como desenvolver um site com apenas 2 página principal ou no máximo 3, um site que os onde aparece informações que próprios usuários cadastrados (meus clientes) colocam estilo Olx ou esse próprio fórum, a página principal seria mais ou menos essa IMG, outra página seria para cadastro e colocar as informações que irá aparecer na página principal, cada usuário colocaria umas 5 informações que ficariam em 1 linha, e juntando tudo ficaria tipo uma tabela, tenho conhecimento de HTML e CSS, muito pouco de Java script e nada PHP, se alguém puder me dar uma direção agradeço,