Rolagem vertical

[n00b do DW 0]

Eu vi nas colunas de dreamweaver como fazer uma rolagem horizontal.....mas como posso adapta-la para rolagem vertical???AJUDEM!!!!!!!

[babu 0]

Salve. Faz do mesmo jeito só muda o código.Manda o codigo que você tem para eu dar uma olhadinha.

[n00b do DW 0]

Rolagem Horizontal

Número da coluna: 10

Data: 12/05/2002

 

 

 

Olá Pessoal!!!

 

Veremos hoje um assunto que foi muito pedido por email. A rolagem horizontal, muito usada na apresentação de portfólios On-line.

 

Veja Aqui o exemplo usado nesta coluna.

Baixe Aqui o exemplo.

 

Para fazer esta rolagem, usaremos um Script e duas camadas (uma para a máscara e outra para o conteúdo).

 

1º Passo

 

Abra um novo documento... vá ao código fonte e adicione este script, abaixo da Tag </HEAD>.

 

 

<script language="JavaScript">

var velo_scroll = 20; // velocidade da rolagem

var pixel_scroll = 10; // quantidade de saltos entre os pixels

var window_width = 400;

var isNav;

var isIE;

var coll = "";

var styleObj = "";

if (parseInt(navigator.appVersion) >= 4) {

if (navigator.appName == "Netscape") {

isNav = true;

} else {

isIE = true;

coll = "all.";

styleObj = ".style";

}

}

 

function getObjWidth(obj) {

var theObj = eval("document." + coll + obj);

if (isNav) {

return theObj.clip.width;

} else {

return theObj.clientWidth;

}

}

 

function getObject(obj) {

if (typeof obj == "string") {

theObj = eval("document." + coll + obj + styleObj);

} else {

theObj = obj;

}

return theObj;

}

 

function getInsideWindowWidth() {

if (isNav) {

return window.innerWidth;

} else {

return document.body.clientWidth;

}

}

 

function getObjectLeft(obj) {

var theObj = getObject(obj);

if (isNav) {

return theObj.left;

} else {

return theObj.pixelLeft;

}

}

 

function shiftBy(obj, x, y) {

var theObj = getObject(obj);

if (isNav) {

theObj.left = theObj.left + x;

theObj.top = theObj.top + y;

} else {

theObj.pixelLeft = theObj.pixelLeft + x;

theObj.pixelTop = theObj.pixelTop + y;

}

}

 

var tim = 0;

var noScroll = true;

 

function mLeft(obj) {

obj = "menu"

if(!noScroll && getObjectLeft(obj) < window_width) {

shiftBy(obj, pixel_scroll, 0);

tim = setTimeout("mLeft()", velo_scroll);

}

}

 

function mRight(obj) {

obj = "menu"

if(!noScroll && getObjectLeft(obj) > -(getObjWidth(obj) - (getInsideWindowWidth())) - window_width) {

shiftBy(obj, -pixel_scroll, 0);

tim = setTimeout("mRight()", velo_scroll);

}

}

 

function noMove() {

clearTimeout(tim);

noScroll = true;

}

</script>

 

2º Passo

 

Crie uma camada chamada "mask" e outra chamada "menu". Agora, coloque a camada "menu" dentro da camada "mask", como na figura abaixo.

 

 

 

Observação: Para colocar a camada "menu" dentro da camada "mask", selecione a "menu" pelo ícone "c" e arraste para dentro da "mask".

 

3º Passo

 

Na caixa de propriedades, atribua ao ítem Overflow o valor "Hidden" nas duas camadas.... a partir de agora, a camada "mask" define o que será visto da camada "menu". Note na figura abaixo, na cor verde, a camada "mask" define a visão.

 

 

 

4º Passo

 

Monte o lay-out dentro da camada menu..... no nosso exemplo, o lay-out é a figura do carro e na camada mask, jogamos um fundo quadriculado.

 

5º Passo

 

Monte as figuras que servirão de rolagem, uma para a direita, e outra para a esquerda.

 

6º Passo

 

Pelo código fonte, adicione ao botão da esquerda esta linha de comando:

 

<a href="#" onmouseover="noScroll=false; mLeft('menu')" onmouseout="noMove()">FIGURA/TEXTO DA AÇÃO</a>

 

Pelo código fonte, adicione ao botão da direita esta linha de comando:

 

<a href="#" onMouseOver="noScroll=false; mRight('menu')" onMouseOut="noMove()">FIGURA/TEXTO DA AÇÃO</a>

 

Confira o resultado no nosso exemplo.

 

Observação: note que na caixa de comportamentos (behaviors) existem, agora, novas ações, intepretadas como Custom Script.

 

Com esses 6 passos, você já tem uma rolagem horizontal! Agora, é só criar seu próprio lay-out...

 

 

____________________________________________________

 

É isso ae galera... Obrigado pelos emails que estão mandando e pela visitação na coluna..... voltem sempre.... mandem pedidos, sugestões ou dúvidas pelo email ou pelo fórum...... É pra vocês que escrevemos estas colunas........

 

Um grande abraço à todos!

 

 

-----------------------------------------------------------------------------

Texto retirado de: Coluna De Dreamweaver Site Imasters

Ir para coluna

[babu 0]

Salve.

Acho que isso vai resolver o seu problema.

Da uma olhadinha neste link:

 

http://galeon.hispavista.com/webjordis/jav...p/missllarg.htm

[babu 0]

mas as extensões do dreamweaver fazem isso, de uma olhada nesse site:www.projectseven.comcomdireito a extensoes, tutoriais e tudo mais....

Salve.Rapa tinha esquecido deste site, valeu richie.Na verdade tinha perdido a URL.