[Resolvido] CSS Overflow

[annodam 0]

Boa tarde pessoal!

 

Tenho uma DIV que recebe o conteúdo carregado por ajax e esta usando a classe Flexcroll para estilizar as barras de rolagem. O problema é que quando carrego a página ela exibe normalmente o conteúdo com barras se necessário, porém quando clico em qualquer outro link ela carrega o conteúdo e esconde as barras.

 

Testei sem a classe Flexcroll e funciona normal, o problema então esta no Flexcroll. Alguém sabe alguma solução?

 

 

Vlw!!

[Mateus Avila Isidoro 8]

posta o código ai, por favor. Mas esse Flexcroll for um plugin, acho que pode ser problema de attach event.

[Guilherme Oderdenge 42]

É porque o Flexcroll não está carregando nestas outras páginas.

 

Tentei indicar à qualquer outra página o endereço do Flexcroll. Se funcionar, eis o problema.

 

Abraços! :thumbsup:

[annodam 0]

Boa tarde pessoal!

 

Guilherme tentei fazer o que você disse de chamar a Flexcroll dentro da página externa e mesmo assim não funcionou... então tentei mudar o negócio. Antes tinha uma DIV na home que tinha como classe a Flexcroll, onde seria carregado o conteúdo que deveria mudar o tamanho da barra de rolagem sem sumir a flex.

 

Agora tirei a Classe da DIV na home e coloquei a DIV com a Flexcroll dentro da página externa. O resultado foi que agora aparece a barra de rolagem, porém sem a Flexcroll.

 

Veja aqui o site - clicando no link Sobre abre a página com a barra comum.

 

Veja aqui a página externa, que abrindo separadamente do site mostra a Flexcroll (barra vermelha).

 

 

Não queria usar iFrame... mais parece que carregar as páginas por Ajax esta tirando o que eu preciso...

[William Bruno 1501]

o seu problema, é oq eu explico aqui:

http://wbruno.com.br/blog/2011/08/22/usando-lightbox-em-pagina-carregada-ajax/

[annodam 0]

William pelo que entendi então no final do carregamento da página eu teria que trocar a classe da div para "flexcroll" novamente é isso?

 

Veja o código que carrega como está:

 

 

function abrirPag(valor){ 
       var url = valor; 
       xmlRequest.open("GET", url, true); 
       xmlRequest.onreadystatechange = mudancaEstado; 
       xmlRequest.send(null); 
       if (xmlRequest.readyState == 1) { 
               document.getElementById("pag").innerHTML = "Carregando..."; 
       } 
       return url; 
} 

function mudancaEstado(){ 
       if (xmlRequest.readyState == 4){ 
               document.getElementById("pag").innerHTML = xmlRequest.responseText; 
       } 
} 

 

[William Bruno 1501]

olha:

        if (xmlRequest.readyState == 4){ 
               document.getElementById("pag").innerHTML = xmlRequest.responseText; \
               //aqui você deve chamar o plugin
       } 

 

entendeu agora ?

[annodam 0]

Entendi... tentei chamar ele mais não ta rolando... olha o código do Flexcrol, acho que não estou sabendo chamar ele...

[William Bruno 1501]

independente do core do plugin, tem algum instanciamento ?

onde você diz q tais objetos devem receber ele ?

 

@edit, veja:

http://www.hesido.com/flexcroll/flexcroll-guide.htm

Manual starting

[annodam 0]

Num tem instanciamento... apenas chamando o java e css dele... tentei todos os 3 modos (fleXenv.fleXcrollMain("your-div-id") de chamar ele que tem na página que você me mandou e mesmo assim não funciona...

 

Na home do site eu chamo ele:

 

<link href="css/flexcrol.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="js/flexcrol.js"></script>

 

Na DIV que vai abrir o conteúdo a classe:

 

<div id="pag" class="flexcrol"></div>

 

No js com as funções coloquei a linha acima chamando novamente:

 

function abrirPag(valor){ 
       var url = valor; 
       xmlRequest.open("GET", url, true); 
       xmlRequest.onreadystatechange = mudancaEstado; 
       xmlRequest.send(null); 
       if (xmlRequest.readyState == 1) { 
               document.getElementById("pag").innerHTML = "Carregando..."; 
       } 
       return url; 
} 

function mudancaEstado(){ 
       if (xmlRequest.readyState == 4){ 
               document.getElementById("pag").innerHTML = xmlRequest.responseText;
			fleXenv.initByClass("flexcrol");
       } 
} 

 

Na página externa chamei novamente pra ver se resolvia:

 

<link href="css/flexcrol.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="js/flexcrol.js"></script>

 

CONSEGUI!!!

 

Mto obrigado a todos que me ajudaram!!!

 

A solução foi tirar a aspas e colocar o ID da DIV, vejam:

 

fleXenv.fleXcrollMain(pag);

[annodam 0]

Boa tarde gente... de volta aqui...

 

surgiu um problema muito pior que o da barra não aparecer! Tenho um formulário de cadastro que tinha máscaras para determinados campos além da validação dos mesmos... não funciona mais! Nenhum deles...

 

Alguém sabe alguma solução?

 

Agradeço imensamente!

 

Eu criei um arquivo JS com todas as funções de validação e máscaras dentro dele... tem alguma forma de no final do carregamento da página ele recarregar esse arquivo?

[William Bruno 1501]

o problema não é o arquivo.

 

mas sim o attach dos eventos.

você deve fazer da mesma forma q fez com o scroll.

[annodam 0]

Boa noite William,

 

carreguei a página usando o método load do JQuery:

 

$("#pag").load("pagina.php");  

Dessa forma não tive problema com o attach dos eventos... Você poderia me ajudar a adaptar o código abaixo pra usar este acima? Não estou conseguindo... e queria que continuasse mostrando o "Carregando..." antes de mostrar a página e que tbm ele continuasse pegando a URL da página pelo GET, pois dessa forma posso usar Flash tbm...

 

function abrirPag(valor){ 
       var url = valor; 
       xmlRequest.open("GET", url, true); 
       xmlRequest.onreadystatechange = mudancaEstado; 
       xmlRequest.send(null); 
       if (xmlRequest.readyState == 1) { 
               document.getElementById("pag").innerHTML = "Carregando..."; 
       } 
       return url; 
} 

function mudancaEstado(){ 
       if (xmlRequest.readyState == 4){ 
               document.getElementById("pag").innerHTML = xmlRequest.responseText;
			fleXenv.fleXcrollMain("palco");
       } 
} 

[William Bruno 1501]

exemplo:

http://wbruno.com.br/blog/2011/05/27/navegacao-sem-refresh-%E2%80%93-carregando-conteudo-ajax-em-div-2/

 

como a sua dúvida começa a mudar de rumo, é melhor que você abra um novo topico.

[annodam 0]

Usei seu exemplo... ele não ta atualizando o tamanho da DIV...

 

Mais uma vez o problema é o inicial... a Flexcroll... vou buscar outra solução para barras de rolagem personalizadas... esse aí não quer funcionar de jeito nenhum, e quando funciona da impressão que a DIV não atualiza de tamanho, o que não é verdade, pois sem ele na DIV funciona tudo normal...

[annodam 0]

Galera problema resolvido!

 

Pra quem quiser usei o modelo desse site que tem muitas outras coisas bacanas tbm >> http://manos.malihu.gr/jquery-custom-content-scroller

 

 

William valew pela ajuda! Adorei seu blog, vou seguir!