[Resolvido] Internet Explore: DIV:hover

[Clébson Santiago Carvalho 0]

Pessoal,

 

Tenho uma duvida mas antes preciso mostrar no site como esta...

 

por favor, visitem o site: http://www.noconforto.com.br/~hotel/site/

 

Abram ele no FF, Chrome e depois abram com o IE

 

Vejam que tem um botão chamado Ligamos para voce apena no IE a pseudoclasse hover não funciona, gostaria de saber como posso fazer esta classe funcionar.

 

Codigo css:

 

/* Campo_1:O Alfa hotel liga para você */
	#topo #campo_1{
		width: 125px;
		height: 25px;
		margin: 55px 73px 0 0;
		float: right;
		background: url(../images/ligamos.png) no-repeat bottom center;
		position: relative;
	}
		/* Div para o formulário - Ligamos para você */
		#topo #campo_1 #campo_ligamos{
			width: 290px;
			height: 125px;
			font-size: 1.2em;
			border: 1px solid #a48646;
			background: url(../images/fundo_ligamos.png) repeat center;
			top: 24px;
			right: -20px;
			position: absolute;
			z-index: 99;
			display:none;
		}

		#topo div:hover#campo_1 #campo_ligamos{ display: block; }

 

estrutura html:

 

			<div id="campo_1">
				<div id="campo_ligamos">Nome</div>
			</div>

 

desde já agradeço....

[Diéssica 140]

O Internet Explorer é sempre muito chato em ler POSITION, Z-INDEX e principalmente DISPLAY.

 

É bom procurar hacks para IE e determinar no seu CSS. Eu vivo nessa função de hacks, inclusive já usei um que envolvia esses z-index, position e display. Provavelmente se você procurar no Google, pode achar.

 

Se não conseguir, desista do display:none e display:block, com essa versão do IE vai ser beeeeem chato. Recomendo que use outro evento, porém usando Javascript/JQuery.

 

Não sei se é o seu caso, mas eu uso muito esse:

http://www.indexi.com.br/2011/03/tiptip-jquery-efeito-tooltip/

 

Se não gostar, pode pesquisar outros.

Existem vários desse tipo.

 

Se você perceber, nem funções simples como essa o IE consegue ler:

<style>
#pai #sera-mostrada{display:none}
#pai:hover #sera-mostrada{display:block}
</style>

<div id='pai'>
<a href='#'>mostrar</a>

<div id="sera-mostrada">
<p>Mostra a div quando passar o mouse</p>
</div>
</div>

(Exemplo online: http://www.diessicagurskas.com/exemplo/mostrar.html)

Imagine envolvendo position e z-index hehe

[Clébson Santiago Carvalho 0]

Diéssica,

 

A ideia é aparecer uma caixa assim que a pessoa passe o mouse, e que ela possa digitar Nome, telefone e E-mail e um botão de enviar... Este que me mandou esta mais para um botão informativo não? estou engando?

 

 

 

----------Editado----------

 

 

Deem uma olhada novamente para entender melhor o que eu comentei acima melhor.

http://www.noconforto.com.br/~hotel/site/

 

Obrigado pessoal, boa madrugada.

[Diéssica 140]

Ah sim, entendi. Mas você pode procurar outros códigos que realizam a mesma função, porém com JQuery ou Javascript. Creio que fique mais fácil tecnicamente e compativelmente.

 

Existem vários na internet, e mais fácil ainda: se você entender de CSS, ache um código simples só com essa função JQuery, daí você só determina o termo position para a DIV aparecer em um local "dinâmico" no site.

 

Como este que fiz usando try{Typekit.load();}catch(e){}

  $(document).ready(function(){  $('#contato').hide();      $('a#abrir').click(function(){ $('#contato').show('slow');      });      $('a#fechar').click(function(){
   $('#contato').hide('slow');
     })
});

Se for usar, tem que linkar http://use.typekit.com/gzc3jvh.js, a função try{Typekit.load();}catch(e){} e claro, o JQuery.

Dai só edita os nomes das divs, aí está a div #contato pois usei para abrir um formulário.

E o link fica assim para abrir/fechar:

<a id="abrir" href="#">Abrir formulário de contato</a>
<a id="fechar" href="#">Fechar</a>

 

Exemplo online:

http://www.diessicagurskas.com/exemplo/mostrar_jquery.html

 

É mais ou menos o que você quer, não?

 

Editado: o que você colocou em seu site também é tipo um "botão informativo". Você passa o mouse (ou clica no mesmo) e ele abre uma informação. Ou seja, talvez o Tooltip seja útil, e ele é dinâmico.

 

[]s,

Diéssica Gurskas

[Clébson Santiago Carvalho 0]

Diéssica,

 

Da uma olhada....

 

http://www.noconforto.com.br/~hotel/site/

 

mantive praticamente o mesmo CSS, mas fiz uns testes e nada, fui verificar o arquivo JS que me passou mas ele não esta sendo encontrado. Esta faltando o arquivo será que eu errei em algo?

 

 

Boa madrugada

 

Desde já agradeço.

[Diéssica 140]

Clébson, peço que volte a revisar seu código CSS e também onde alterou os dados da função.

 

Segue os links para pôr antes da tag head:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="http://use.typekit.com/gzc3jvh.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

E a função que passei para você usando JQuery.

Se preferir, pode alterá-la para o box aparecer ao passar o mouse apenas editando o código Javascript com JQuery. Também é válido, apesar de eu achar mais útil usando o clique do mouse.

 

http://www.diessicagurskas.com/exemplo/mostrar_jquery.html

 

Obs: funcionou perfeitamente no Internet Explorer!

 

 

[]s,

Diéssica Gurskas

[Clébson Santiago Carvalho 0]

Diéssica,

 

Muito obrigado conseguir resolver parte deste probleminha :D

 

 

Agora como eu faço para que o campo não feche enquanto ele estiver enviando o formulário,

http://noconforto.com.br/~hotel/site/

 

pode enviar se quiser para teste, ele esta sendo enviado para meu email..

 

Desde já agradeço.

[Diéssica 140]

Diéssica,

 

Muito obrigado conseguir resolver parte deste probleminha :D

 

 

Agora como eu faço para que o campo não feche enquanto ele estiver enviando o formulário,

http://noconforto.com.br/~hotel/site/

 

pode enviar se quiser para teste, ele esta sendo enviado para meu email..

 

Desde já agradeço.

 

Você quer que apareça "Pedido enviado com sucesso" sem recarregar a página, certo? Ou que recarregue apenas o box sem atualizar a página inteira?

[Clébson Santiago Carvalho 0]

Que envie o formulário para e-mail, mas não recarregue toda a pagina. É possível?

[Diéssica 140]

Que envie o formulário para e-mail, mas não recarregue toda a pagina. É possível?

 

Sim, é possível utilizando Javascript.

 

Não sei como funciona seu formulário, se após clicar em "enviar" vai para uma nova página... enfim.

 

Abaixo segue uma função que pode ser útil para alterar o conteúdo de uma DIV:

   function mostraDiv( idName, value ){  
       objDiv = document.getElementById( idName );  
       if( value )  
           objDiv.style.display = "";  
       else  
           objDiv.style.display = "none";  
   }  

 

E no link que envia você coloca assim:

<a href="javascript:void(0)" onclick="javascript:mostraDiv( 'ID DA DIV AQUI', true );">Enviar</a>  

 

Não esqueça de colocar style="display: none" na DIV ou no CSS da DIV para ela só aparecer ao executar a função clicando em Enviar.

 

Pode alterar e fazer executar (se houver) a página enviado.php (geralmente tem algo parecido em formulários) ao clicar, como funciona o botão submit, porém, só aparece e executa na DIV.

 

Exemplo

http://www.diessicagurskas.com/exemplo/sem_recarregar.html

 

Editado: tenho outro meio e função de atualizar um conteúdo sem sair da DIV, é só alterar o código conforme sua necessidade. http://www.diessicagurskas.com/exemplo/alterar_texto_jquery.html

 

[]s,

Diéssica Gurskas

[Clébson Santiago Carvalho 0]

Diéssica,

 

Não entendi muito bem o que faz primeiro código, já o segundo imagino que seja para subistituir o botão input type="submit" correto?

 

eu uso um com html + o php para poder enviar o pedido....

 

vou postar aqui parte do html

 

<form id="form-ligamos" action="<?php $PHP_SELF ?>" method="POST">

 

 

php

if (isset($_POST['form-ligamos-enviar'])){

//REMETENTE --> ESTE EMAIL TEM QUE SER VALIDO DO DOMINIO
	//====================================================
$email_remetente = "ligueparamim@alfahotel.com.br"; // deve ser um email do dominio
//====================================================


//Configurações do email, ajustar conforme necessidade
//====================================================
$email_destinatario = "clebsonsantiago@gmail.com"; // qualquer email pode receber os dados
$email_reply = "$email";
$email_assunto = "Ligue para mim";
//====================================================


//Variaveis de POST, Alterar somente se necessário
//====================================================
$nome = $_POST['form-ligamos-nome'];
$email = $_POST['form-ligamos-mail'];
$telefone = $_POST['form-ligamos-telefone'];
$ddd = $_POST['form-ligamos-ddd'];
//====================================================

//Monta o Corpo da Mensagem
//====================================================
$email_conteudo = "<div style='width:750px; heigt:auto;'><b>Data</b> = " . utf8_encode(strftime('%A, %d de %B de %G - %H:%M:%S')) . "\n";
$email_conteudo .= "<b>Nome</b> = $nome \n"; 
$email_conteudo .= "<b>Telefone</b> = $ddd $telefone \n";
$email_conteudo .= "<b>Email</b> = $email";		

	//====================================================

//Seta os Headers (Alerar somente caso necessario)
//====================================================
$email_headers = implode ( "
",array ( "From: $email_remetente", "Reply-To: $email_reply", "Subject: $email_assunto","Return-Path:  $email_remetente","MIME-Version: 1.0","X-Priority: 3","Content-Type: text/html; charset=UTF-8" ) );
//====================================================


//Enviando o email
//====================================================
if (mail ($email_destinatario, $email_assunto, nl2br($email_conteudo), $email_headers)){
	echo "</b>   Pedido enviado com sucesso!</b>"; 
}
 	else{
	echo "</b>   Falha no envio do pedido!</b>";
}
//====================================================
}	
?>

PS-estou aprendendo tudo isso por agora, então não tenho tanto conhecimento assim.

[Diéssica 140]

Clébson,

o código e a explicação ficaram claros. Vou tentar te ajudar sendo o mais clara possível, já que citou que não é experiente em PHP e Javascript. Mas é bom te lembrar que sem experiência fica difícil editar e adaptar os códigos na tua página. De nada adianta eu te dar as funções e você não saber usá-las.

 

Vou te dar uma solução mais objetiva, também usando Javascript/Ajax.

 

Função 1:

function GetXMLHttp() {
   if(navigator.appName == "Microsoft Internet Explorer") {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   else {
       xmlHttp = new XMLHttpRequest();
   }
   return xmlHttp;
}

var xmlRequest = GetXMLHttp();

 

Função 2:

function alteraPag(valor){
   var url = valor;

   xmlRequest.open("GET",url,true);    
   xmlRequest.onreadystatechange = mudancaEstado;
   xmlRequest.send(null);

       if (xmlRequest.readyState == 1) {
           document.getElementById("conteudo").innerHTML = "<img src='http://diessicagurskas.com/oi/load.gif'>";
       }

   return url;
}

function mudancaEstado(){
   if (xmlRequest.readyState == 4){
       document.getElementById("conteudo").innerHTML = xmlRequest.responseText;
   }
}

 

Usando a função:

   <a href="#" onclick="alteraPag('LINK AQUI');">Botão enviar</a>

LINK AQUI = a página que envia o formulário.

 

A DIV que está o conteúdo deve ser assim:

   <div id="conteudo"></div>

(Todo o conteúdo dentro dela será alterado)

 

Não esqueça de alterar as linhas.

 

Se tiver dúvidas, pergunte.

 

[]s,

Diéssica Gurskas

[Clébson Santiago Carvalho 0]

Diéssica,

 

Aqui nesta parte do código pede para que eu coloquei o link da pagina...

    <a href="#" onclick="alteraPag('LINK AQUI');">Botão enviar</a>

 

é possível eu colocar desta forma, para que ele requisite o código php do mesmo arquivo que o formulário esta?

 

Atual:

<form id="form-ligamos" action="<?php $PHP_SELF ?>" method="POST">

 

Código de minha pergunta:

a href="#" onclick="alteraPag('<?php $PHP_SELF ?>');">Botão enviar</a>

 

 

Muito obrigado...

[Diéssica 140]

Não entendi muito o seu problema. Você deve alterar o botão submit, pois o redirecionamento acontece quando você envia o formulário. Já tentou colocar o onclick no submit?

 

Importante lembrar que o $PHP_SELF foi substituida por $_SERVER['PHP_SELF'] na versão atual do PHP e que esta não é um arquivo e sim uma variável que faz com que execute o script na sua página, ou seja: vai para a mesma página de seu formulário. Seu script já esteja nela (provavelmente).

[Clébson Santiago Carvalho 0]

Diéssica,

 

Dei uma pesquisada e até conseguir fazer funcionar parte do código, mas como estou usando o CMS joomla acabei esbarrando em alguns problemas que para esse projeto não tenho tempo de resolver.

 

Obrigado pela ajuda.

 

Se puder me ajudar com este tópico ficaria muito feliz....

 

http://forum.imasters.com.br/topic/449330-multiplas-font-face/

 

 

Obrigado.

[Diéssica 140]

De nada Clébson!

 

Vejo o tópico depois.

 

[]s,

Diéssica Gurskas