Postagens | Dicas blog, Imagem, Pc Windows

Link pra iframe com tamanho ajustável

Já fiz alguns testes de como carregar um iframe em uma página sem que apareça no iframe o topo da página e sim aquele trecho que for escolhido, esteja ele onde estiver, no início, meio ou fim da página e também um script capaz de disponibilizar ao usuário a opção de aumentar ou diminuir o iframe que poderia ser uma div ou talvez uma imagem ou outro elemento.
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, mas pode ser testado na parte superior direita desse blog onde tá escrito chat, só que eu configurei para aumentar antes então não adianta tentar fechar.

3 comentários:

  1. Ola muito bom esse script que muda o tamanho do iframe achei muito interessante.da pra aproveitar bem em um site que estou construindo.

    ResponderExcluir
  2. ta dando erro de sintaxe

    ResponderExcluir
  3. davimcarvalho

    Obrigado, 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

    ResponderExcluir

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!

Google

Postagens Populares