Mudar lado da div usando css

Jessi_1412 · Janeiro 6, 2015

Bom dia,

Tenho o seguinte código.

<style>
 .formata { /* esta classe é somente 
               para formatar a fonte */
  /*font: 12px arial, verdana, helvetica, sans-serif; */
  }
  
a.dcontexto{
  position:relative; 
  font:12px arial, verdana, helvetica, sans-serif; 
  padding:0;
  color:#039;
  text-decoration:none;
  border-bottom:2px dotted #039;
   z-index:24;
  }
  a.dcontexto:hover{
   background:transparent;
  color:#f00;
  z-index:25; 
  }
  a.dcontexto span{display: none}
  a.dcontexto:hover span{ 
  display:block;
  position:absolute;
  width:630px; 
  top:3em;
  left-align:justify;
  left:0;
  font: 12px arial, verdana, helvetica, sans-serif; 
 padding:5px 10px;
  border:1px solid #999;
  background:#e0ffff; 
  color:#000;
  }
  
</style>

<body>
	<table style="width:100%" border="1">
	<tr>
		<td>id</td>
		<td>obs</td> 
		<td>Teste1</td>
		<td>Teste2</td>
		<td>Teste3</td>
		<td>Teste4</td>
		<td>Teste5</td>
    
     </tr>
	<tr>
		<td>
			<p class="formata">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat quam. Aenean suscipit lectus massa, sit
			<a href="#" class="dcontexto"> Leia 
			<span><strong>CSS</strong> Sigla para a palavra inglesa "Cascading Style Sheet" foi traduzido para <strong>Folhas de Estilo em 
Cascata </strong>.Uma técnica de projetar páginas Web, separando conteúdo da apresentação</span>
		    </a>
			</p>
		</td>
		<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat quam. 
			<a href="#" class="dcontexto"> Leia 
			<span><strong>CSS</strong> Sigla para a palavra inglesa "Cascading Style Sheet" foi traduzido para <strong>Folhas de Estilo em 
	Cascata </strong>.Uma técnica de projetar páginas Web, separando conteúdo da apresentação</span>
			</a>
		</td>
		<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat quam. 
			<a href="#" class="dcontexto"> Leia 
			<span><strong>CSS</strong> Sigla para a palavra inglesa "Cascading Style Sheet" foi traduzido para <strong>Folhas de Estilo em 
	Cascata </strong>.Uma técnica de projetar páginas Web, separando conteúdo da apresentação</span>
			</a>
		</td>
		<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat quam. 
			<a href="#" class="dcontexto"> Leia 
			<span><strong>CSS</strong> Sigla para a palavra inglesa "Cascading Style Sheet" foi traduzido para <strong>Folhas de Estilo em 
	Cascata </strong>.Uma técnica de projetar páginas Web, separando conteúdo da apresentação</span>
			</a>
		</td>
		
		</tr>


</table>
</body>
</html>

Preciso que a div que abre quando passo o mouse no leia espanda para esquerda.Notei na coluna teste 2 a div é cortada pela metade.

wilnet · Janeiro 6, 2015

Olá Jessi, blza!

você pode usar o Tooltip para fazer isso, e ficará bem elegante.

Veja alguns exemplos legais.

1) http://jqueryui.com/tooltip/

2) http://jsfiddle.net/shail/vSTLU/2/ ( você pode escolher como: Top - right - botton - left )

3) http://globocom.github.io/bootstrap/javascript.html#tooltips

4) http://www.tutorialspoint.com/bootstrap/bootstrap_tooltip_plugin.htm

Ou poderá pesquisar sobre Tooltip para outros exemplos,

Espero ter ajudado,

vlw

Jessi_1412 · Janeiro 6, 2015

Olá estou tentando usa-lo veja um teste.

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Documento sem título</title>
</head>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

	
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<script>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>

<body>
	<table style="width:100%" border="1">
	<tr>
		<td>id</td>
		<td>obs</td> 
		<td>Teste1</td>
		<td>Teste2</td>
		<td>Teste3</td>
		<td>Teste4</td>
		<td>Teste5</td>
    
     </tr>
	<tr>
		<td>
			<p class="formata">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat quam. Aenean suscipit lectus massa, sit
			<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom22">Tooltip on bottom11</button>
		</td>
		<td>
			<p class="formata">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat quam. Aenean suscipit lectus massa, sit
			<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
		</td>
		<td>
			<p class="formata">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat quam. Aenean suscipit lectus massa, sit
			<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
		</td>
		<td>
			<p class="formata">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat quam. Aenean suscipit lectus massa, sit
			<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
		</td>
		
		</tr>


</table>


</body>
</html>

O problema é que preciso que funcione no ie apartir do ie 7 para frente. Alguem pode me ajudar.

wilnet · Janeiro 6, 2015

Olá Jessi, blza!

Desculpe, mas IE7 ainda???

Acredito que o IE7 não tenha suporte para HTML 5 e CCS 3.

Veja alguns links para te orientar nessa questão.

http://www.uxdesign.blog.br/padroes-web/css3/html5-css3-suporte-dos-navegadores-e-tecnicas-de-compatibilidade/

No link acima tem um "IE7.js" que talvez possa contornar para sua necessidade.

IE7.js “Uma biblioteca JavaScript para fazer o Internet Explorer se comportar como um navegador compatível com os padrões”.

http://html5readiness.com/

Ou talvez, tente usar outro plugin que não use HTML 5 e CCS 3

Espero ter ajudado,

vlw

Jessi_1412 · Janeiro 8, 2015

Bom dia. Como não funcionou nenhuma das suas sugestões no Ie (que sou obrigada a usar aqui, é uma politica da empresa). Estou usando o seguinte codigo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Globo.com Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    

  </head>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>




<script>
		function abreConteudo(element) {
			alert($(element).attr('class'));
			alert($(element > "div.descricaoobs").text());
		}
		
		$(document).ready(function(){
			$("div.botao_melhor_leitura").click(function(e) {
				$(this).find(".descricaoobs").attr('style','display:block;');
				
				var mousex = 0;
				var estado= $(this).find(".descricaoobs").attr('class');
				/*var tipVisX = $(window).width();*/
				$(this).find(".descricaoobs").css({right: mousex});
			})
			
			.mouseout(function(e) {
				$(this).find(".descricaoobs").attr('style','display:none;');
			})
			
			
			$("td.customer").mouseover(function(e) {
				$(this).find(".descricaoobs").attr('style','display:block;');
			})
			
		})
		
	<!--fechar div descrição-->
	

	</script>

<style>


  
  .descricaoobs{
	overflow-y:hidden;
	border:  #999999 solid 1px;
	background-color:#F8F8FF;
	position:center;
	padding:1px 3px;
	position: absolute;
	display: none;	
	text-align: left;
	font-size:12px;
}
</style>

<body>
	<table style="width:100%" border="1">
	<tr>
		<td>id</td>
		<td>obs</td> 
		<td>Teste1</td>
		<td>Teste2</td>
		<td>Teste3</td>
		<td>Teste4</td>
		<td>Teste5</td>
    
     </tr>
	<tr>
		<td>Eve</td>
		<td>
		<div class='botao_melhor_leitura'><button type="button"> Clique aqui </button>
		<div class='descricaoobs' >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat qua</div>
	</td>
		
		<td>
	<div class='botao_melhor_leitura'><button type="button"> Clique aqui </button>
	<div class='descricaoobs' >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat qua</div>
	</td>
		
    <td>
	<div class='botao_melhor_leitura'><button type="button"> Clique aqui </button>
	<div class='descricaoobs' >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat qua</div>
	</td>
	
	
	<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat quam. Aenean suscipit lectus massa, sit</td>
	<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat quam. Aenean suscipit lectus massa, sit</td>
  
</tr>

</table>


</body>
</html>

Essa função abaixo faz com que quando eu tire o mouse da div o conteudo desapareçã.

Porem preciso que a div descicaoobs suma quando eu clicar fora da div ou quando clicar em um botão de sair.

.mouseout(function(e) {
				$(this).find(".descricaoobs").attr('style','display:none;');
			})

Alguém pode me ajudar, desde já grata.

wilnet · Janeiro 8, 2015

Olá Jessi,

Eu testei aqui nos navegadores e apresentou erro "mou---"

Deixei apenas "mou" para os dois usados e funcionou.

Quando clico no Botão "Clique aqui" aparece a DIV, ao tirar o mouse do botão a DIV some.

É isso?

Jessi_1412 · Janeiro 8, 2015

Olá #wilnet, desculpa não entendi o que vc fez.

Se não for pedir muito pode postar o código.

Grata.

wilnet · Janeiro 8, 2015

Isso deu erro:

var mou--- = 0;
 var estado= $(this).find(".descricaoobs").attr('class');
 /*var tipVisX = $(window).width();*/
 $(this).find(".descricaoobs").css({right: mou---});

Assim funcionou:

var mou = 0;
 var estado= $(this).find(".descricaoobs").attr('class');
 /*var tipVisX = $(window).width();*/
 $(this).find(".descricaoobs").css({right: mou});

mou--- por mou

Jessi_1412 · Janeiro 8, 2015

Olá, Desculpe acho que nao estou sabendo me expressar :(.

O que eu preciso é o seguinte, apos a abertura da div descricaoobs. Quero que eu clicar fora da div descricaoobs a mesma feche.

Seja o codigo que tenho

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Globo.com Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    

  </head>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>




<script>
		function abreConteudo(element) {
			alert($(element).attr('class'));
			alert($(element > "div.descricaoobs").text());
		}
		
		$(document).ready(function(){
			$("div.botao_melhor_leitura").click(function(e) {
				$(this).find(".descricaoobs").attr('style','display:block;');
				
				var mousex;
				var estado= $(this).find(".descricaoobs").attr('class');
				/*var tipVisX = $(window).width();*/
				$(this).find(".descricaoobs").css({right: mousex});
			})
			
				
		})
		
	<!--fechar div descrição-->
	

	</script>

<style>


  
  .descricaoobs{
	overflow-y:hidden;
	border:  #999999 solid 1px;
	background-color:#F8F8FF;
	position:center;
	padding:1px 3px;
	position: absolute;
	display: none;	
	text-align: left;
	font-size:12px;
}
</style>

<body>
	<table style="width:100%" border="1">
	<tr>
		<td>id</td>
		<td>obs</td> 
		<td>Teste1</td>
		<td>Teste2</td>
		<td>Teste3</td>
		<td>Teste4</td>
		<td>Teste5</td>
    
     </tr>
	<tr>
		<td>Eve</td>
		<td>
		<div class='botao_melhor_leitura'><button type="button"> Clique aqui </button>
		<div class='descricaoobs' >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat qua</div>
	</td>
		
		<td>
	<div class='botao_melhor_leitura'><button type="button"> Clique aqui </button>
	<div class='descricaoobs' >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat qua</div>
	</td>
		
    <td>
	<div class='botao_melhor_leitura'><button type="button"> Clique aqui </button>
	<div class='descricaoobs' >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat qua</div>
	</td>
	
	
	<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat quam. Aenean suscipit lectus massa, sit</td>
	<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis euismod dolor, eu consequat quam. Aenean suscipit lectus massa, sit</td>
  
</tr>

</table>


</body>
</html>

Pode me ajudar em uma função que consiga fechar essa div, o seu fechamento pode ser ao clicar fora dela ou em um link chamado fechar.

wilnet · Janeiro 8, 2015

Seu code está funcionando, veja no link abaixo:

http://jsfiddle.net/wilnet/zt90t63w/

Ao Clicar no Botão "Clique aqui", a DIV é aberta, ao tirar o mouse fora do Botão, a DIV é fechada.

Faça a mudança conforme o Post#8

Outro detalhe, não testei no IE7, precisa ver tb se nele realmente funciona.

Jessi_1412 · Janeiro 8, 2015

Olá, sim está o problema é que quero que a div feche quando eu clicar fora da mesma.

Tipo colocaria um link abaixo do texto clique aqui ai o usuario clica no link e ai sim fecha a pagina.

Jessi_1412 · Fevereiro 25, 2015

Bom dia,

Desculpem a demora, mas graças a ajuda de você consegui resolver o proble com esse trecho de codigo.

 $(document).mouseup(function(){
            $('.descricaoobs').hide();
        });

wilnet · Fevereiro 25, 2015

Que bom então rsrs.

Mas no link que havia postado, funcionava como queria.

http://jsfiddle.net/wilnet/zt90t63w/

:clap:

Arquivado

Mudar lado da div usando css

Recommended Posts

Jessi_1412 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jessi_1412 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jessi_1412 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jessi_1412 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jessi_1412 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jessi_1412 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jessi_1412 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fazer busca no Banco de dados usando vários critério

agregar dados em VBA excel

Sistema não funciona corretamente

Fóruns

Tempo Real

Informação importante