• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

Goodfella

Fixar a página sem iframes

26 mensagens neste tópico

O que eu quero fazer é o seguinte:

Manter esta pagina "Código abaixo" sempre fixa e através dos links alterar só o texto, ou seja o conteúdo.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Teste</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>

<div id="wrapper">

<div id="header">
	<h1>
            Quinta de Santa Luzia</h1>
</div>

<div id="menu">
	<ul>
		<li><a href="#">Inicio</a></li>
		<li><a href="#">Fotos Exterior</a></li>
		<li><a href="#">Fotos Interior</a></li>
		<li><a href="#mapa.html">Mapa Cartográfico</a></li>
		<li><a href="#">Contactos</a></li>
	</ul>
</div>

<div id="sidebar">
	<div id="feed">
		<a class="feed-button" href="#"> </a>
	</div>
	<ul>
		<li><a href="#">Link One</a></li>
		<li><a href="#">Link Two</a></li>
		<li><a href="#">Link Three</a></li>
		<li><a href="mapa.html">Link Four</a></li>
		<li><a href="#">Link Five</a></li>
	</ul>
	<div id="sidebar-bottom">
		 
	</div>
</div>

<div id="content">
	<div class="entry">
		<div class="entry-title"><a href="#">Quinta de Santa Luzia para Venda</a> </div>
		<div class="date">
                 </div>
            Quinta de Santa Luzia situda em Arguedeira de Arouca, Portugal.<br />
            <br />
            Quinta com uma area de 6 Hectares </div>
</div>

<div id="footer">
	<div id="footer-valid">

	</div>
</div>

</div>

</body>

</html>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Por sempre fixa presumo que não a queiras recarregar cada vez que clicas num link

se for isso tens que usar ajax, se o conteudo for pouco podes em vez do ajax usar divs com o display a none, e ao clicares actualizas o innerHTML

algo como isto

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

<div id="novo_conteudo" style="display:none">novo conteudo</a>

<a onclick="troca()">trocar</a>

<script type="text/javascript">
function troca(){
document.getElementById('conteudo').innerHTML =  document.getElementById('novo_conteudo').innerHTML;
}
</Script>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

se quiseres fazer com que os links carreguem outras páginas, como quando se trabalha com frames, a solução que tenho é:

no head:

<script type="text/javascript">
function troca(url){
document.getElementById('nome-da-div-destino').innerHTML = '<object type="text/html" data="'+url+'" width="800" height="300"></object>';
}

o tamanho da div de destino tem de ser parametrizado aqui no width e no height... claro está que terão de ser alterados de acordo com o espaço que tens disponivel...

nos links:

<a href="javascript:troca('ficheiro-a-carregar.htm');">Ficheiro 1</a>

e basta teres uma div com o nome que colocaste no script... para o caso de o utilizador ter o javascript desactivado, podes colocar um texto dentro da div a avisar que o javascript está desactivado e que tem de estar activado (ou arranjas métodos alternativos) e no onload colocas o comando de javascript que está aqui no link com o nome do ficheiro que queres que seja carregado por defeito:

<body onload="javascript:troca('ficheiro-a-carregar.htm')"

acho que não me enganei em nada... os testes que fiz agora funcionaram bem tanto em firefox como ie...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

É um código bem interessante, e quanto a crossbrowser compatibility ?

sempre ouvi dizer que tag object tinha alguns problemas de compatibilidade

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Pois eu ca também não conhecia esse uso do <object>, se isso funcar bem "em todo o lado" sou capaz de comecar a usar algo do género... Hmm....

[Off-topic]

Sig engraçada, Sven..!

[/Off-topic]

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

[Off-topic]

Sig engraçada, Sven..!

[/Off-topic]

sem querer parecer que estou a dar graxa, mas gosto muito da tua sig, só não mudo a minha porque já a estas a usar  ;)

mas voltando ao tópico,

este codigo pode ser uma alternativa interessante ao ajax, sobretudo em browsers mais antigos que não suportam o  XMLHttpRequest

quanto á tag object se bomba bem no ie e no firefox não deve ter grandes problemas, mas tenho algumas reticencias com o opera, safari e konqueror

há por ai alguem com exepriencia prática com esta tecnica que possa confirmar a compatibilidade ?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

É um código bem interessante, e quanto a crossbrowser compatibility ?

sempre ouvi dizer que tag object tinha alguns problemas de compatibilidade

tanto no firefox, como no ie e no opera funciona... por acaso não tinha experimentado no opera mas experimentei agora e funciona bem...

o código com que testei é este:

<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
</HEAD>
<script type="text/javascript">
function troca(url){
document.getElementById('teste').innerHTML = '<object type="text/html" data="'+url+'" width="800" height="300"></object>';
}
</Script>
<BODY>
<a href="javascript:troca('teste.htm');">teste1</a>
<div id="teste">tem de habilitar o javascript!</div>
</BODY>
</HTML>

não liguem às maiusculas mas aproveitei um ficheiro antigo para fazer os testes e só vou trocando o código em si...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ok, parece que já está a mudar de aspecto pelo menos o conteúdo já é alterado.

Mais umas duvidas.

Eu usei o método do marinheiro pois o do sven estava a dar muitos erros e eu como tenho poucos conhecimentos deixei de parte.

Agora quando estou no IE a imagem aparece mas no FF não. Está ai o código.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Teste</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body style="background-image: none; background-color: transparent">

<div id="content" style="background-image: none; border-top-style: none; border-right-style: none; border-left-style: none; background-color: transparent; border-bottom-style: none" align="center"  >
	  <div class="entry-title" align="center"><a href="#">Mapa Cartografico da Quinta de Santa Luzia</a><br />
              <br />
              <br />
          </div>
                      Carregue na imagem para ampliar <br />
          <img src="G:\Projects\Quinta\dreamy\images\quinta.jpg" width="200" height="200" align="middle" id="IMG1" hspace="100" /></div>
</body>

</html>

Obrigado a todos pelas respostas.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

<img src="G:\Projects\Quinta\dreamy\images\quinta.jpg" width="200" height="200" align="middle" id="IMG1" hspace="100" />

não uses a path completa para as imagens, unsa uma path relativa algo como images\quinta.jpg caso contrario tens esses problemas no firefox, alem disso quando puseres o site online não vais ver imagens nenhumas

testei este metodo no konqueror e bombou!

boa dica

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

@Sven

Já resultou, obrigado.

Agora mais umas coisitas. No IE aparece-me uma scroolbar inactiva e uma border  e no FF já não aparece. Como posso fazer com que desapareça no IE??

Agora é sobre uma função.

Eu quero inserir uma imagem em pequeno e onmouseclick que ela apareça no seu tamanho original ou se não for muito complicado com o onmouseover que faça o magnify.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

para executar no onmouseover em vez de no onclick, poes a função que tens no onclick no onmouseover

onde te aparece a scroll, na pagina ?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

sobre a função, lê esta página e vê se dá para o que queres: www.maujor.com/tutorial/zoom_img.php

sobre o scroll e o border, no css do body do ficheiro htm que chamas, acrescenta border:0; overflow:visible;... assim o ie já não mostra nem o scrollbar nem o border...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

A border desapareceu, ficou à maneira. Obrigado

Isto parece uma guerra de browsers, parece que quando insiro overflow:visible; ele realmente desaparece a scroll no ie mas  também me remove o footer. mas no FF fica bom.

Vou tentar fazer esse tutorial, realmente era o que andava à procura.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

correcção:

se colocares o overflow:visible, ficas sem scrollbar, mesmo que o conteúdo seja maior que a altura da div... acho que tens mesmo de ficar com o scrollbar inactivo ou então colocas coisas pequenas...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

deves garantir que o conteudo que inseres na div não é maior que a height dela

caso contrario tens a scroll, como a div é mostrada como um bloco quando o conteudo é maior ela cresce, podendo ficar por cima do footer e por isso não o veres (depende de como controis o layout) mas por regra geral distorce-te o layout todo

podes usar o css para por a scroll da cor do fundo da pagina, assim parece que ela nao existe, mas não é boa solução!

o melhor mesmo é teres a div com o tamaho do conteudo, ou o conteudo com o tamanho da viv

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Tens uma altura fixa na div que tem o conteudo? Se não tiveres altura especificada (ou tiveres "height: auto;"), supostamente deverá esticar/encolher conforme o conteúdo. Se bem que com o <object> pelo meio, já não sei como é que isso se comporta... Podes tentar fazer o mesmo (altura "auto" ou não especificá-la) para o <object>, e ver se resolve... Ou então pode tentar por "clear: both;" no footer. Isto claro se não houver problema em ter a div a mudar de tamanho conforme o conteudo que é posto. Caso contrário scrollbars são obrigatórias (caso o conteúdo não caiba).

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

não dá para colocar auto... foi uma das coisas que experimentei e não funciona... se não colocar height no object, fica só com 150px de altura...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Vamos agora deixar a barra de lado!!

A tabela que eu criei não me aparece no IE só no FF.

<table cellpadding="10" style="width: 346px; height: 237px">
<tr>
<td align="left" valign="middle">
<div class="fill right" style="height:145px; width:100px;">
<div class="PZ PZ1 PZright">
  <p class="PZoom t100 w400 Brdr Cap noLink"> 
    <a href="http://yoursite.com/noJavaScript.html" onclick="return false" style="left: -487px; top: 2px"> <img src="images/1.jpg"  title="" />
    </a>
  </p>
  </div>
</div>
</td>  
  <td align="left" valign="middle">
<div class="fill right" style="height:145px; width:100px;">
<div class="PZ PZ1 PZright">
  <p class="PZoom t100 w400 Brdr Cap noLink"> 
    <a href="http://yoursite.com/noJavaScript.html" onclick="return false" style="left: -487px; top: 2px"> <img src="images/1.jpg"  title="" />
    </a>
  </p>
  </div>
</div>
  
  
</td>
</tr>
</table>

Está algo errado??

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Assim de repente... Tas a fechar as tags <a> duas vezes (uma delas inválida), tira a barra no fim: <a href="...." (...) />xpto</a>, mete assim: <a href="...." (...) >xpto</a>, poderá ser essa a causa, de resto pareceu-me tar tudo bem. Experimenta. Também poderá ser uma definição CSS mais exótica, mas não me parece...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ok, já resolvi. Obrigado.

Como faço para que quando eu faço onmouseover a imagem fique sempre à frente e não por trás??

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora