Iframe responsivo

KELLIMA · Abril 30, 2014

Olá pessoal!

Preciso da ajuda de vocês. É o seguinte: Tenho um Script com uma tabela para exibição em sequencia aleatória de imagens. Vou usá-la no seguinte site: http://ilhasexy.sitepx.com/acompanhantes-em-sao-luis-maranhao.html Porém, essa tabela (script) está hospedada no seguinte endereço: http://guiavirtualdocohatrac.com.br/. Para colocá-la no site no qual pretendo exibi-la, utilizei o seguinte iframe:

<iframe width='658px' height='1200px' frameborder='0' src='http://guiavirtualdocohatrac.com.br'></iframe>

Até aí tudo bem. O problema é que o site é responsivo (podem acessá-lo em dispositivos móveis para conferir), mas, nem o script, nem o iframe são responsivos. É ai que reside o problema, preciso que a tabela se comporte de modo responsivo no site. Assim, preciso que me ajudem a fazer com que esse iframe seja responsivo, ou o script seja responsivo.

Espero que eu tenha sido claro!

Aguardo o socorro de vocês!

Anderson Danilo · Maio 1, 2014

Acredito que você possa informar a largura do iframe em porcentagem, referente ao script você teria de ter acesso a ele para modificar ele também para usar largura em porcentagem;

KELLIMA · Maio 1, 2014

eu tenho acesso ao Script andersondanilo. Preciso de um código que resolva isso... Pode me ajudar?

Anderson Danilo · Maio 1, 2014

no iframe você pode alterar o width, exemplo:

<iframe width='100%' height='1200px' frameborder='0' src='http://guiavirtualdocohatrac.com.br'></iframe>

No http://guiavirtualdocohatrac.com.br/ você pode alterar a tabela para usar porcentagem, do mesmo jeito.

<table width="100%">

e nas td também, exemplo:

<td width="30%">

Sempre que você puder evitar tabelas para dados não tabulares, evite, pois isso é péssimo, inclusive para o mobile, no seu caso você poderia ter colocado as caixas coloridas com uma div e usar float left.

Recomendo que você leia sobre media queries:

http://blog.caelum.com.br/flexibilidade-em-paginas-para-dispositivos-moveis-com-media-queries/

KELLIMA · Maio 1, 2014

Andersondanilo, estamos no caminho. O iframe ja se comporta bem melhor (responsivamente falando), quando exibido em dispositivos móveis. No entanto, essa questão da tabela realmente dificulta um pouco a adequação das imagens aos dispositivos móveis.

Essa sua sugestão de remover tabelas me interessou muito, todavia, não sei como fazer. O que sei é que preciso que as imagens fiquem organizadas como se estivessem em uma tabela de três colunas e de linhas indefinidas quando a exibição acontecer na tela do notebook ou do pc. Mas, quando a exibição acontecer em dispositivos moveis, preciso que as imagens se ajustem ao tamanho da tela, podendo ficarem duas colunhas de imagens ou mesmo uma única, dependendo do tamanho da tela.

Se puder me ajudar quando a isso...

Há, as imagens precisam continuar mudando de lugar umas com as outras, aleatoriamente, cada vez que a página for atualizada... isso é fundamental.

Abaixo, o script que uso atualmente.

<script type="text/javascript">
function aleatorio(inferior,superior){
    var numPossibilidades = superior - inferior;
    aleat = Math.random() * numPossibilidades 
    aleat = Math.floor(aleat);
    return parseInt(inferior) + aleat 
} 

window.onload = function() {
    var imagens=[
	'<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/1.png" border="0"/a>',
	'<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/2.png" border="0"/a>',
	'<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/3.png" border="0"/a>',
	'<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/4.png" border="0"/a>',
	'<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/5.png" border="0"/a>',
	'<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/6.png" border="0"/a>',
	'<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/7.png" border="0"/a>',
	'<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/8.png" border="0"/a>',
	'<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/9.png" border="0"/a>',
	];
    var tabela = document.getElementById("tabela");
    for(r=0; r<tabela.rows.length; r++) {
        for(c=0; c<tabela.rows[r].cells.length; c++) {
            if(imagens.length == 0) {
                r = tabela.rows.length;
                break;
            }
var imgRandom       = aleatorio(0, imagens.length-0);
var tabelaRows      = tabela.rows[r];
var tabelaRowsCells = tabelaRows.cells[c];
                        
tabelaRowsCells.innerHTML = ''+ imagens[imgRandom] +'';
            imagens.splice(imgRandom, 1);
        } 
    }
}
</script>
<div align="center">
  <table width="100%" align="center" cellspacing="14" id="tabela">
    <tr>
      <th width="30%" height="30%" scope="col"> </th>
      <th width="30%" height="30%" scope="col"> </th>
      <th width="30%" height="30%" scope="col"> </th>
    </tr>
    <tr>
      <th width="30%" height="30%" scope="col"> </th>
      <th width="30%" height="30%" scope="col"> </th>
      <th width="30%" height="30%" scope="col"> </th>
    </tr>
    <tr>
      <th width="30%" height="30%" scope="col"> </th>
      <th width="30%" height="30%" scope="col"> </th>
      <th width="30%" height="30%" scope="col"> </th>
    </tr>
  </table>
</div>

Anderson Danilo · Maio 1, 2014

Primeiro, recomendo que você use outra função para misturar o array:

http://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array-in-javascript

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/array/shuffle [v1.0]
function shuffle(o){ //v1.0
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};

logo após você declara o seu array e o mistura:

var imagens=[
    '<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/1.png" border="0"/a>',
    '<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/2.png" border="0"/a>',
    '<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/3.png" border="0"/a>',
    '<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/4.png" border="0"/a>',
    '<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/5.png" border="0"/a>',
    '<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/6.png" border="0"/a>',
    '<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/7.png" border="0"/a>',
    '<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/8.png" border="0"/a>',
    '<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/9.png" border="0"/a>',
    ];
 
imagens = shuffle(imagens);

Depois você cria uma div para servir de container:

<div id="container"></div><div style="clear:both;"></div>

Depois você faz um loop para colocar as imagens:

var elContainer = document.getElementById('container');
for(var i in imagens) {
    var imagem = imagens[i];
    var elContainer.innerHTML += '<div class="imagem_item">' + imagem + '</div>';
}

Depois você cria um css responsivo com media querie

.imagem_item {
    float: left;
    width:33.3%; /* 3 colunas */
}
 
.imagem_item img {
    width: 100%;
}
 
@media screen and (max-width: 800px) {
    .imagem_item {
        width:50%; /* 2 colunas */
    }
}
 
@media screen and (max-width: 480px) {
    .imagem_item {
        width:100; /* 1 coluna */
    }
}

KELLIMA · Maio 1, 2014

Andersondanilo, Obrigado pela atenção ao meu problema,

Diga-me: por acaso, depois de pronto, ficaria assim:

<html>
<head>
  <style type="text/css">    
.imagem_item {
    float: left;
    width:33.3%; /* 3 colunas */
}
 
.imagem_item img {
    width: 100%;
}
 
@media screen and (max-width: 800px) {
.imagem_item {
        width:50%; /* 2 colunas */
    }
}
 
@media screen and (max-width: 480px) {
.imagem_item {
        width:100; /* 1 coluna */
    }
}
  </style>
</head>

<body>
<script type="text/javascript">
//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/array/shuffle [v1.0]
function shuffle(o){ //v1.0
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};

var imagens=[
    '<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/1.png" border="0"/a>',
    '<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/2.png" border="0"/a>',
    '<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/3.png" border="0"/a>',
    '<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/4.png" border="0"/a>',
    '<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/5.png" border="0"/a>',
    '<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/6.png" border="0"/a>',
    '<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/7.png" border="0"/a>',
    '<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/8.png" border="0"/a>',
    '<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/9.png" border="0"/a>',
    ];
 
imagens = shuffle(imagens);

<div id="container"></div><div style="clear:both;"></div>

var elContainer = document.getElementById('container');
for(var i in imagens) {
    var imagem = imagens[i];
    var elContainer.innerHTML += '<div class="imagem_item">' + imagem + '</div>';
}

</script>
</body>
</html>

Se fiz certo, saiba que não funciona, as imagens não aparecem.

Se fiz errado, por favor, corrija pra mim.

Grato!

Anderson Danilo · Maio 2, 2014

Ficaria assim:

<html>
<head>
<style type="text/css"> 
.imagem_item {
float: left;
width:33.3%; /* 3 colunas */
}

.imagem_item img {
width: 100%;
}

@media screen and (max-width: 800px) {
.imagem_item {
width:50%; /* 2 colunas */
}
}

@media screen and (max-width: 480px) {
.imagem_item {
width:100; /* 1 coluna */
}
}
</style>
</head>

<body>
<script type="text/javascript">
//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/array/shuffle [v1.0]
function shuffle(o){ //v1.0
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};

var imagens=[
'<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/1.png" border="0"/a>',
'<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/2.png" border="0"/a>',
'<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/3.png" border="0"/a>',
'<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/4.png" border="0"/a>',
'<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/5.png" border="0"/a>',
'<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/6.png" border="0"/a>',
'<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/7.png" border="0"/a>',
'<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/8.png" border="0"/a>',
'<a href="http://www.google.com.br" target="_parent"><img src="http://guiavirtualdocohatrac.com.br/9.png" border="0"/a>',
];

imagens = shuffle(imagens);
</script>

<div id="container"></div><div style="clear:both;"></div>
 
<script type="text/javascript">
    var elContainer = document.getElementById('container');
    for(var i in imagens) {
        var imagem = imagens[i];
        elContainer.innerHTML += '<div class="imagem_item">' + imagem + '</div>';
    }
</script>

</body>
</html>

KELLIMA · Maio 2, 2014

Nossa Andersondanilo,

Kra, ficou quase perfeito, tá muito bom...

Por gentileza, só faltou uma pequena coisa: preciso que as imagens fiquem um pouco separadas umas das outras. Preciso que elas nao fiquem grudadas como estão. Deve haver um espaço de 10 ou 14px em média entre elas. Mas, esse espaço pode ser responsivo também, só preciso que tenha um espaço que separe um quadrinho do outro.

Se puder ver isso, o script ficará perfeito e eu encerrarei a questão dando ela por resolvida.

Grato!

Muito Grato kra!

Anderson Danilo · Maio 2, 2014

Você poderia colocar uma margem em porcentagem, alterando o trecho a seguir do código:

<style type="text/css"> 
.imagem_item {
float: left;
width:32.3%; /* 3 colunas */
margin: 0.5%;
}
 
.imagem_item img {
width: 100%;
}
 
@media screen and (max-width: 800px) {
.imagem_item {
width:49%; /* 2 colunas */
margin: 0.5%;
}
}
 
@media screen and (max-width: 480px) {
.imagem_item {
width:99%; /* 1 coluna */
margin:0.5%;
}
}
</style>

KELLIMA · Maio 2, 2014

Andersondanilo, você é demais kra! Ficou perfeito.

Aproveitando a tua gentileza, poderia dá uma olhada pra mim no tópico: http://forum.imasters.com.br/topic/520499-linkar-imagens-em-slide-show/.

Abração, e obrigado kra!

Arquivado

Iframe responsivo

Recommended Posts

KELLIMA 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Anderson Danilo 43

Compartilhar este post

Link para o post

Compartilhar em outros sites

KELLIMA 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Anderson Danilo 43

Compartilhar este post

Link para o post

Compartilhar em outros sites

KELLIMA 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Anderson Danilo 43

Compartilhar este post

Link para o post

Compartilhar em outros sites

KELLIMA 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Anderson Danilo 43

Compartilhar este post

Link para o post

Compartilhar em outros sites

KELLIMA 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Anderson Danilo 43

Compartilhar este post

Link para o post

Compartilhar em outros sites

KELLIMA 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante