Ir para conteúdo
Fórum Script Brasil
  • 0

Criar frame


pmlv

Pergunta

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

Link para o comentário
Compartilhar em outros sites

7 respostass a esta questão

Posts Recomendados

  • 0

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

Link para o comentário
Compartilhar em outros sites

  • 0

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

Link para o comentário
Compartilhar em outros sites

  • 0
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

Link para o comentário
Compartilhar em outros sites

  • 0

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.

Link para o comentário
Compartilhar em outros sites

  • 0

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 por Anderson Ferreira
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...