Criar frame

pmlv · Dezembro 15, 2009

olá,

não sei se o que pretendo é criar uma frame, mas é o seguinte:

tenho um site qu vai conter por exemplo um código html, por exemplo um quadrado (1) e na mesma pagina tenho vários links (2) todos diferentes. O que pretendo é o seguinte, ao clicar num dakeles links (2) ele abre por exemplo um video do youtube dentro daquele quadrado (1), ou seja, sempre que clique num link abre um vídeo naquele quadrado.

alguém ajuda????

obg

Anderson Ferreira · Dezembro 16, 2009

Olá "pmlv",

Então ... Se você for utilizar somente HTML, irá precisar utilizar frames (lembrando q frame não é semanticamente correto, e já foi 'abandonado' pela W3C)

você poderia fazer isso sem utilizar nenhum frame, usando PHP, AJAX ou jQuery ...

Utilizando o PHP, teria q recarregar a página, cada vez q o visitante clicasse no link.

Mais com AJAX e jQuery, é possível fazer sem ser preciso recarregar a página (um efeito bem legal - recomendo utilizar ele)

Bom, ai vai por sua escolha ... É só escolher quais destas maneiras qr usar, q nós aq do fórum te ajudaremos :D

Abraços,

Anderson Ferreira

vini_loock · Dezembro 17, 2009

Eu tenho interesse em usar o jquery. já que você ofereceu ajuda...

Se alguém poder me ensinar muito grato.

Vlw

Editado Dezembro 17, 2009 por vini_loock

Anderson Ferreira · Dezembro 19, 2009

Olá Vini, desculpa a demora ... Tava viajando :S

Então, o efeito seria mais ou menos assim (com jQuery):

Seriam 2 DIVs: DIV_A e DIV_B

A DIV_A, seria a DIV superior, ou seja, ficaria na parte de cima.

A DIV_B, seria a DIV inferior, ou seja, ficaria na parte de baixo.

A DIV_B ficaria "oculta", e a DIV_A seria a unica exibida quando o site fosse carregado.

Então, dentro da DIV_A colocaríamos um link, e quando o visitante clicasse nesse link, a DIV_B seria exibida.

Esse é o efeito ... Caso esteja interessado, pode falar q posto um script de exemplo pra você :D

Abraços,

Anderson Ferreira

vini_loock · Dezembro 20, 2009

Hum eu já tinha feito uma vez um site assim.

No dreamweaver usando o dsign é bem facinho.

Mas acho que p melhor seria fazer com ajax fica meno código.

Vlw

Anderson Ferreira · Dezembro 20, 2009

Eu tenho interesse em usar o jquery. já que você ofereceu ajuda...
Se alguém poder me ensinar muito grato.
Vlw

Então, .. Com jQuery eu sei ..

Hum eu já tinha feito uma vez um site assim.
No dreamweaver usando o dsign é bem facinho.
Mas acho que p melhor seria fazer com ajax fica meno código.
Vlw

Mais com Ajax nãao :S

Se quiser, posso explicar com jQuery. É bem simples :D

vini_loock · Dezembro 20, 2009

E u acho o ajax mais simples, porque você não precisa colocar tudo no html, e eu preciso para fazer um portal então imageine o tamanho que ficaria o código, pelo meno pelo que eu acho é assim que funciona o jquery.

1- faz uma camada escondida

2-coloca um link com o evento onclick para mostra a camada.

É assim que funciona?

Se for dai fica complicado, porque imagine fazer um portal em uma página só?

cada página com +/- 2000px de height.

Agora vou explicar como que faz com ajax.

1-você cria uma página normal com topo, menu, etc.

2-dai onde você quer que abra as outras paginas do seu site você vai fazer tipo um frame, mas na verdade é uma div.

3-dai você coloca um link que vai abrir uma página dentro da div.

O código fica bem mais limpo.

Vo postar aqui pra você ver um exemplo.

página com os links e a div:

<html>
<head>
<title></title>
<style type="text/css">
#conteudo{
width: 300px;
height: 300px;
background-color: #00ccff;
}
</style>
<script language="javascript" src="ajax.js"></script>
<script language="javascript" src="instrucao.js"></script>
</head>
<body>

<a href="#"onclick="abrirPag('sua_pagina.html');>clique para abrir na div</a>

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

páina que vai abrir na div conteudo é uma página normal

<html>
<head>
</head>
<body>
...
conteudo
...
</body>
</html>

ajax.js

function GetXMLHttp() {

    if(navigator.appName == "Microsoft Internet Explorer") {

        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

    }

    else {

        xmlHttp = new XMLHttpRequest();

    }

    return xmlHttp;

}


var xmlRequest = GetXMLHttp();

instrucao.js

function abrirPag(valor){

var url = valor;


xmlRequest.onreadystatechange = mudancaEstado;

xmlRequest.open("GET",url,true);

xmlRequest.send(null);


if (xmlRequest.readyState == 1) {

document.getElementById("conteudo_mostrar").innerHTML = "<img src='loader.gif'>";

}


return url;

}


function mudancaEstado(){

if (xmlRequest.readyState == 4){

document.getElementById("conteudo").innerHTML = xmlRequest.responseText;

}

}

Bom é isso.

Pode parecer muito código, mas se for fazer um site muito grande que é o meu caso acho que compensa mais.

Mas explica ai como se faz com jquery.

Anderson Ferreira · Dezembro 25, 2009

Bom ... Esse esqma das abas do Ajax eu conheço :D , só não sabia como éra feito :(

Sim, sobre o jQuery ele é bem simples... Simples mesmo! Eu mesmo, não entendo nada de JS e sei o básico de jQuery :D

Com o jQuery, pode-se fazer, por exemplo, o efeito q postei ai em cima, de clicar em um link e a DIV oculta aparecer

Seria assim:

HTML - index.html

<html>

<head>

    <title>Testando o jQuery</title>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="comandos_jQuery.js"></script>

</head>


<body>


    <div class="div1">
        <h1>DIV1 - Clique aqui para exibir o texto</h1>
    </div>

    <div class="div2">
        <p>Texto (DIV2) - Texto (DIV2) - Texto (DIV2) - Texto (DIV2)</p>
        <p>Texto (DIV2) - Texto (DIV2) - Texto (DIV2) - Texto (DIV2)</p>
        <p>Texto (DIV2) - Texto (DIV2) - Texto (DIV2) - Texto (DIV2)</p>
    </div>

</body>

</html>

jQuey - comandos_jQuery.js

$(document).ready(function(){

    $(".div2").hide();        // Oculta a DIV2

    $(".div1 h1").click(function()        // Quando clicar na ".div1 h1", ele vai executar os comandos abaixo:
        {
        $(".div2:show").fadeOut("slow");        // Se a ".div2" já estiver sido exibida (show), esse comando deixará ela oculta
        $(".div2:hidden").fadeIn("slow");        // Se a ".div2" estiver oculta (hidden), esse comando exibirá ela
        });

});

Bom... É isso aí, :D

Bem simples!

Abraços,

Anderson Ferreira

Editado Dezembro 30, 2009 por Anderson Ferreira

Entrar

Criar frame

Pergunta

pmlv

Link para o comentário

Compartilhar em outros sites

7 respostass a esta questão

Posts Recomendados

Anderson Ferreira

Link para o comentário

Compartilhar em outros sites

vini_loock

Link para o comentário

Compartilhar em outros sites

Anderson Ferreira

Link para o comentário

Compartilhar em outros sites

vini_loock

Link para o comentário

Compartilhar em outros sites

Anderson Ferreira

Link para o comentário

Compartilhar em outros sites

vini_loock

Link para o comentário

Compartilhar em outros sites

Anderson Ferreira

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades