Vou fazer em duas partes:
Primeiro o iframe com link e página exposta com texto definido pela ancora
1º iframe carrega normalmente com uma página super leve, um dos motivos pelo qual irei usar nos exemplos e outro pela quantia de ancoras(links para a mesma página) e se adapta bem em iframe.
Além disso vou deixar um exemplo de link para mudar o texto do iframe.
http://foitestado.com/exemplo/texto-surge-passa-mouse-img/
Use esse link para mudar o conteúdo do Iframe acima: link para mudar trecho do texto da página do iframe, sem carregá-la novamente
O iframe com seu name='iframe01'
<iframe name='iframe01' src='http://foitestado.com/exemplo/texto-surge-passa-mouse-img/' width='390 px' scrolling='yes' height='90 px'></iframe>
O link com o endereço e a target='iframe01' que vai definir o iframe em que irá "puxar" o texto da ancora.
<a href='http://foitestado.com/exemplo/texto-surge-passa-mouse-img/#imagem-com-link-mouse' target='iframe01'>link para mudar trecho do texto da página do iframe, sem carregá-la novamente</a>
http://foitestado.com/exemplo/texto-surge-passa-mouse-img/#imagem-com-link-mouse
<iframe src="http://foitestado.com/exemplo/texto-surge-passa-mouse-img/#imagem-com-link-mouse" name="iframe02" width="390 px" scrolling="yes" height="90 px"></iframe>
http://foitestado.com/exemplo/texto-surge-passa-mouse-img/#imagem-sem-link-mouse
<iframe src="http://foitestado.com/exemplo/texto-surge-passa-mouse-img/#imagem-sem-link-mouse" name="iframe03" width="390 px" scrolling="yes" height="90 px"></iframe>
http://foitestado.com/exemplo/texto-surge-passa-mouse-img/#imagem-sem-link-mouse
Se essa coisa de ancora ficou complicada, ela serve para levar o usuário para um subtítulo a qual ele esteja possa querer ler e este está na mesma página, para que não fique tonto girando a bolinha do mouse, um exemplo nessa pagina é essa seta do lado direito que leva ao topo da página, é um link interno e se escreve assim <a href="#ancora ou outro nome">subtítulo com ancora nessa página</a> Exemplo subtítulo com ancora nessa página, além do link é necessário que seja criado o título ou texto ancora onde a página irá "parar" dessa forma <a name="ancora ou outro nome">Primeiro o iframe com link e página exposta com texto definido pela ancora</a> ou assim como fiz no Html desse post, <h4 id="ancora ou outro nome">Primeiro o iframe com link e página exposta com texto definido pela ancora</h4> dessa forma eu escrevi lá em cima sobre o subtítulo e ao clicar no link a página sobe até ele perceba que nome que está em name= é o mesmo de href= porém o link contém # antes. Já aproveitando; dizem que o google adora isso, desde que tenha algo a ver o texto ou titúlo com o link.
script que muda o tamanho do iframe, imagem, div...
O script permite ao usuário aumentar ou diminuir o tamanho do iframe
ou outro elemento com ID do elemento definida no link.
<script type="text/javascript">
function loopDelayed(id, ini, end, delay, func) {
_looping = (typeof(id) == 'object' ? id : document.getElementById(id)) || null;
var args = loopDelayed.arguments;
if(args.length < 5 || ini == end || !_looping) return;
var params = [];
if(args.length > 5)
for(var i = 5; i < args.length; i++)
if(/number|boolean|null|string/i.test(typeof(args[i])))
params.push(typeof(args[i]) == 'string' ? "'"+args[i]+"'" : args[i]);
params = params.length ? ', '+params.join(', ') : '';
var interval = 0;
if(ini < end) {
for(var i = ini; i <= end; i++) {
setTimeout(func+"(_looping , "+i+params+");", interval);
interval += delay;
}
} else {
for(var i = ini; i >= end; i--) {
setTimeout(func+"(_looping, "+i+params+");", interval);
interval += delay;
}
}
}
function size(id, size, type, msec) {
var orisize = getSize(id), diff = parseInt(size) - orisize[type],
fator = 4, delay = Math.round(msec / (diff < 0 ? diff * -1 : diff)) * fator;
loopDelayed(id, 0, diff/fator, delay, 'setSize', type, (diff < 0 ? fator * -1 : fator));
}
function setSize(obj, iterator, typ, val) {
var dims = getSize(obj);
obj.style[typ] = (dims[typ] + val)+'px';
}
function getSize(id) {
var el = typeof id == 'string' ? document.getElementById(id) : id;
var w = parseInt(el.style.width) || el.clientWidth;
var h = parseInt(el.style.height) || el.clientHeight;
return {'width': w, 'height': h};
}
</script>
Bom o script já foi, agora o link configurável.
<a href="javascript://" onclick="var asize = getSize('NOMEelemento');
if(asize['width'] > 300) {
size('NOMEelemento', 50, 'width', 90);
size('NOMEelemento', 50, 'height', 80);
} else {
size('NOMEelemento', 400, 'width', 370);
size('NOMEelemento', 400, 'height', 370);
}">Mudar o tamanho</a>
Esse link pode fazer toda a diferença, ele permite fazer as mudanças na forma como o elemento(iframe, imagem, div...) sem a necessidade de mexer no script, permitindo usar o script para vários elementos fazendo as modificações no link.
Se o iframe for de width 340 px a única coisa que irei mudar no link é essa parte em vermelho, no momento que eu definir um número maior que 340(largura do iframe) para esse valor(em vermelho) o iframe irá aumentar no primeiro clic se o número(em vermelho) for menor que 340(largura do iframe) o iframe irá diminuir no primeiro clique:
Parte do link onde defini a ação(+ ou -) do iframe if(asize['width'] > 300) no primeiro clique.
Mais dois exemplos escritos com trechos do link e do iframe:
Se iframe de width='340 px' e
if(asize['width'] > 300)
O iframe irá diminuir no primeiro clique.
Se iframe de width='340 px' e
if(asize['width'] > 400)
O iframe irá aumentar no primeiro clique.
Agora as partes do link onde irá definir os tamanhos do iframe ou outro elemento após o clique.
{
size('NOMEelemento', 50, 'width', 90);
size('NOMEelemento', 50, 'height', 80);
}
os números na cor laranja nessa parte do link vão definir o tamanho mínimo do iframe e o número azul irá definir a velocidade do efeito de diminuir ou aumentar, um número auto significa lentidão "para não assustar o usuário e ele não sair correndo sem saber o que aconteceu".
Nessa parte do link os números na cor laranja vão definir o tamanho MÁXIMO do iframe
else {
size('NOMEelemento', 400, 'width', 370);
size('NOMEelemento', 400, 'height', 370);
}
O iframe com, o width="340 px" e principalmente o ID="NOMEelemento"
<iframe src="" width="340 px" height="90 px" ID="NOMEelemento"></iframe>
ELE NÃO FUNCIONA NO meio do post do BLOGSPOT, por que o blogger infia quebra de linha no meio do código do link,
Ola muito bom esse script que muda o tamanho do iframe achei muito interessante.da pra aproveitar bem em um site que estou construindo.
ResponderExcluirta dando erro de sintaxe
ResponderExcluirdavimcarvalho
ResponderExcluirObrigado, eu não sei onde errei, tinha usado ele e funcionava, foi algo que quando postei devo ter alterado algum caracter, infelizmente só posso indicar um que faz efeito semelhante a esse e que pode ser até melhor, Veja aqui