43
Não é possível selecionar uma div para impressão com JavaScript, até porque esta não é uma função dele. Existe uma solução que utiliza apenas CSS:
@media print {
body * {
visibility: hidden;
}
#printable, #printable * {
visibility: visible;
}
#printable {
position: fixed;
left: 0;
top: 0;
}
}
Desta forma, apenas o que ...
respondida 21/12/13 às 3:36
Caio Tarifa
2.22122 medalhas de ouro1616 medalhas de prata2222 medalhas de bronze
41
Existem várias maneiras. Estes métodos são dividos em "largura definida" e "largura variável" pois depende da sua necessidade de implementação.
Algumas são semanticamente mais recomendadas, porém ainda não funcionam em quase nenhum navegador, outras já existem há muito tempo e continuam sendo utilizadas pois apresentam compatibilidade superior.
Largura ...
respondida 21/12/13 às 15:27
Caio Tarifa
2.22122 medalhas de ouro1616 medalhas de prata2222 medalhas de bronze
36
As soluções abaixo darão um caminho de como implementar em diversas situações.
Javascript puro
function Mudarestado(el) {
var display = document.getElementById(el).style.display;
if(display == "none")
document.getElementById(el).style.display = 'block';
else
document.getElementById(el).style.display =...
12
Tem como usar o css para mostrar as barras de rolagem.
#divContent{
overflow:auto;
}
Com isso sua div deve ter scroll sempre que precisar.
Existem varias opções para diversos casos.
Veja a definição no site da W3C.
overflow: visible|hidden|scroll|auto|initial|inherit;
Para deixar isso apenas para dispositivos mobile, você pode usar MediaQuery, para ...
11
Isso deve resolver o seu problema:
div img {
display: block;
margin-left: auto;
margin-right: auto;
}
respondida 11/02/14 às 13:53
Felipe Avelar
9.24222 medalhas de ouro3030 medalhas de prata5555 medalhas de bronze
8
Método simplificado:
Uma forma de relizar a operação pretendida, com pouco código mas limitado a elementos que se encontram um ao lado do outro, é fazer uso do método de jQuery .before(), onde o que é feito é pegar no $ele2 e passar o mesmo para antes do $ele1:
function switchElements($ele1, $ele2) {
$ele1.before($ele2);
}
switchElements($('#div2'), $('#...
respondida 19/12/13 às 17:54
Zuul
34,8mil1818 medalhas de ouro8686 medalhas de prata180180 medalhas de bronze
8
A forma mais simples de se criar esse efeito é adicionando o estilo padding-bottom com o percentual equivalente da altura dividido pela largura pretendida.
div#slide {
padding-bottom: 75%; /* 540/720 */
}
Assim, mesmo após redimencionar a janela, o tamanho da div será sempre proporcional a 720:540.
Exemplo: JSFiddle.
respondida 31/01/14 às 16:29
Guilherme Bernal
19,8mil11 medalhas de ouro4949 medalhas de prata9090 medalhas de bronze
8
Embora faça algum tempo que foi feito essa pergunta; estarei mostrar uma forma fácil de centralizar imagens usando flex-box, para ajudar os que precisarem.
Insira uma classe na div e coloque a tag img dentro da div, como mostrado abaixo:
<div class="centralizarImagem">
<img src="algumaImagem.jpg" alt="Alguma Imagem" width="400" height="190" /&...
respondida 8/03/14 às 19:22
Thiago Jem
38911 medalhas de ouro33 medalhas de prata99 medalhas de bronze
8
Caso não seja necessário um suporte para o Internet Explorer 8 ou o projeto seja mais flexível também é possível utilizar o seguinte código:
.vertical-align {
position: relative;
top: 50%;
transform: translateY(-50%); /* Adicionar os prefixos dos navegadores */
}
Fonte - http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
...
8
Sua variável disp está apenas recebendo uma CÓPIA do valor atual do atributo "display". Alterar o valor da variável não mudará o valor deste atributo "display".
Portanto, sua função deveria ser assim:
function Mudarestado(divid)
{
document.getElementById(divid).style.display = "none"; // ou "block"
}
8
Ambas outras respostas usaram fixed e z-index negativo com valores exagerados, pode até funcionar, mas é bem provável que irá lhe causar uma série de dores de cabeça para aplicar em um layout pronto, o ideal é usar position: relative + position: absolute, pois assim o position: absolute irá se adaptar ao elemento "pai", ficaria algo como:
.wrap {
/*...
respondida 12/03/17 às 18:33
7
Faça assim:
.menu{ width: 250px; float: left; background-color: blue; }
.resto{ background-color: red; overflow: hidden;}
Para que fique assim:
Note que se o conteúdo tiver múltiplas linhas, ele não vai aparecer debaixo do menu. Isso é feito pelo uso do estilo overflow: hidden. Além disso, o conteúdo não precisa do estilo float que você usou.
Exemplo no ...
respondida 24/02/14 às 13:02
Miguel Angelo
28,3mil33 medalhas de ouro7373 medalhas de prata112112 medalhas de bronze
7
Se você quer uma função que mostre quando está escondido, e esconda quando está visível (ou seja, um toggle), faça assim:
function toggleEstado(divid) {
var div = document.getElementById(divid);
var disp = div.style.display;
div.style.display = disp == 'none' ? 'block' : 'none';
}
respondida 27/06/14 às 18:45
7
Depende do seu objetivo. Isso é utilizado para herdar as propriedades do elemento superior.
Usando <span> é como se você quisesse aplicar style="display: inline".
Usando <div> é como se você quisesse aplicar style="display: block".
Ou seja, o uso depende de como você deseja encaixar a imagem no seu layout.
7
Tente usar flex: https://getbootstrap.com/docs/4.0/utilities/flex/
Adicione as classes abaixo:
<div class="row d-flex justify-content-center">
Imagem da página na documentação do Bootstrap 4
6
Fiz com Jquery para você dar uma olhada de como pegar o texto da div
Jquery
$(function(){
var valorDaDiv = $(".produtosIntTitulo").text();
$("#orcamentoAssuntoForm").val(valorDaDiv);
});
Você pode acompanhar o resultado nesta DEMO
6
utilize setTimeout no seu código para que de tempo do mesmo renderizar e executar.
setTimeout(function() {
var alturaDivTxt2 = $('.slide-txt').height();
var autoH2 = $(".autoH-banner").height();
var alturaDoBanner2 = (autoH2 / 2) + 60;
var alturaTxtFinal2 = alturaDoBanner2 - alturaDivTxt2;
$(".slide-txt").css({ "margin-top": +...
6
Apesar de ambos poderem fazer praticamente as mesmas coisas há uma diferença semântica.
Como o nome indica <div> deve ser usado para determinar divisões, blocos de informações diversas, para formar uma parte do layout.
Já o <span> é usado para indicar um trecho de informação, muitas vezes um trecho de um texto, ou imagens e outros elementos ...
respondida 15/01/15 às 17:31
6
Podes fazer assim:
i$("#mapa path").click(function(){
alert('Voce clicou no estado do '+$(this).attr('data-name'));
i$('[data-name="' + this.id + '"]').show();
});
Dessa maneira ele vai udar o ID da path clicada (this.id) e usa isso num seletor onde procura elementos com data-name igual a essaa ID. Depois aplica o método .show() ...
respondida 27/03/15 às 17:55
6
Opção 1:
<div style="<?php echo get('data_do_descredenciamento') != '' ? 'show' : 'none'; ?>">
</div>
Opção 2:
<div style="<?php if (get('data_do_descredenciamento') == '') { echo 'display: none;' }">
</div>
Opção 3:
<?php if (get('data_do_descredenciamento') != '') { ?>
<div>
</div>
<?php } ?...
6
Tente isso
<div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12" align="center">
<button class="btn btn-primary" align="center">Lorem Ipsum</button>
</div>
6
Boa parte desse resposta é baseada em boas praticas, ux, acessibilidade e minha própria opinião.
O que é a <div>
The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.
Tradução: "O elemento div não tem ...
respondida 19/05/18 às 13:13
hugocsl
63,6mil1313 medalhas de ouro5252 medalhas de prata118118 medalhas de bronze
5
O que está faltando é o display:table; no container da div que está com display: table-cell; colocando isso vai funcionar perfeitamente.
veja o exemplo:
CSS:
#container {
width: 200px;
height: 150px;
border: 1px solid #c30;
background: #ffe;
position: relative;
display:table;
}
#container p {
*position: absolute;
top: 50%;
display: table-cell;...
respondida 11/02/14 às 13:58
Erlon Charles
5.23299 medalhas de ouro2525 medalhas de prata4545 medalhas de bronze
5
Resumindo:
<script>
function cont(){
var conteudo = document.getElementById('print').innerHTML;
tela_impressao = window.open('about:blank');
tela_impressao.document.write(conteudo);
tela_impressao.window.print();
tela_impressao.window.close();
}
</script>
<div id="print" class="conteudo">
// conteúdo a ser impresso pode ser ...
5
Vejo dois motivos para isso:
Você usa a classe seletor em mais de um tipo de elemento, e quer criar uma regra CSS apenas para DIVs.
Você precisa dar mais peso para essa regra na cascata do CSS. Por exemplo:
.seletor1 { color: red; }
.seletor2 { color: blue; }
Considere uma <div class="seletor1 seletor2>.... Ela ficará azul (ambas as regras têm o ...
respondida 25/06/14 às 12:14
5
Outra forma, além das já apresentadas e explicadas, também utilizando a propriedade skew mas aplicando a transformação somente em dois elementos (um antes e outro depois da imagem), ao invés de transformar toda a div, mantendo assim o aspecto da imagem:
No exemplo, dois elementos (antes e depois da imagem) com cores de background diferentes.
Código de ...
respondida 25/01/15 às 16:01
Renan Gomes
18,7mil88 medalhas de ouro4040 medalhas de prata9595 medalhas de bronze
5
Como o Sergio já mencionou em seu resposta você não pode ter ids repetidos, então você deve alterar uma das duas abordagem para class ou data- (data attributes).
Criei um solução empregando id no svg e data- na div.
Acompanhe esse exemplo de implementação. E veja se lhe ajuda
No svg mantenha apenas o id:
<path id="acre" class="estado" ... />
Na ...
respondida 27/03/15 às 18:48
Fernando Leal
9.67033 medalhas de ouro3636 medalhas de prata8383 medalhas de bronze
5
É só acrescentar ambos no <head> do seu HTML:
...
<head>
...
<link rel="stylesheet" href="/css/css1.css" type="text/css" media="screen">
<link rel="stylesheet" href="/css/css2.css" type="text/css" media="screen">
...
</head>
...
Se ambos os arquivos se aplicarem ao mesmo elemento, o segundo arquivo pode acabar ...
respondida 26/11/15 às 17:40
Apenas as respostas wiki não pertencentes à comunidade mais votadas e de um tamanho mínimo se qualificam
Tags relacionadas
div × 286html × 151
css × 120
javascript × 93
jquery × 39
html5 × 29
php × 28
css3 × 12
rolamento × 12
twitter-bootstrap × 11
ajax × 8
imagem × 8
posicionamento × 7
alinhamento × 7
input × 6
table × 6
script × 5
layout-responsivo × 5
responsivo × 5
formulário × 4
classes × 4
front-end × 4
bootstrap-4 × 4
json × 3
wordpress × 3