Overflow de DIV de página carregada com Ajax

TubaraoBR · Novembro 21, 2012

Tenho uma DIV 'content' com height = 300px.

Essa DIV 'content', executa os scripts do jscrollpane.

Se eu insiro conteúdo direto na div... tudo OK... funciona belezinha.

Coloquei uma DIV 'conteudo', dentro dessa DIV 'content', essa DIV 'conteudo'

abre páginas com AJAX.

O script também funciona certinho...

Porém, o conteúdo da página carregada pelo AJAX é grande, ele não mostra o scroll.

à não ser que eu determine no CSS a altura da DIV conteúdo, mas daí sempre é conteúdo diferente,

não tem como prever.

Se alguém já passou por isso e puder ajudar, agradeço muito.

Bru_ce · Novembro 21, 2012

Poste seu script !

TubaraoBR · Novembro 21, 2012

Poste seu script !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>..::SITE::..</title>
<script type="text/javascript" src="js/bibliotecaAjax.js"></script>
<script type="text/javascript" src="js/site.js"></script>

<link type="text/css" href="jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>



   <link type="text/css" href="menu/menu.css" rel="stylesheet" />
<!--    <script type="text/javascript" src="menu/jquery.js"></script>  -->
<!--Já foi feita a inclusão do jquery mais acima... por isso comenta essa parte para não conflitar. -->
<script type="text/javascript" src="menu/menu.js"></script>




<script>
$(document).ready(function() {
   $('.scroll-pane').jScrollPane({showArrows: true});
});
</script>
<link href="estilows.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="menu">
   <ul class="menu">

           <li style="background:#FFFFFF; padding-left:5px; width:160px; text-align:center;"><a href="#" class="parent" style="line-height:26px; height:26px;"><span style="margin:0 45px 0 50px; background:none;">.:: MENU ::.</span></a>
           <ul>
               <li><a href="javascript:Site('local','1');" style="text-indent: 15px;"><span>Quem Somos</span></a></li>
               <li><a href="#" style="text-indent: 15px;"><span>Depoimentos</span></a></li>
               <li><a href="#" style="text-indent: 15px;"><span>Notícias</span></a></li>
               <li><a href="#" class="parent" style="text-indent: 15px;"><span>A Corrida</span></a>
                   <ul>
                       <li><a href="#" style="text-indent: 15px;"><span>Info Geral</span></a></li>
                       <li><a href="#" style="text-indent: 15px;"><span>Percurso</span></a></li>
                       <li><a href="#" style="text-indent: 15px;"><span>Regulamento</span></a></li>
                       <li><a href="#" style="text-indent: 15px;"><span>Programação</span></a></li>
                       <li><a href="#" style="text-indent: 15px;"><span>Resultados</span></a></li>
                       <li><a href="#" style="text-indent: 15px;"><span>Como Chegar</span></a></li>
                       <li><a href="#" style="text-indent: 15px;"><span>FAQ</span></a></li>
                       <li><a href="#" style="text-indent: 15px;"><span>Hotel</span></a></li>

                   </ul>
               </li>
               <li><a href="#" class="parent" style="text-indent: 15px;"><span>Inscrições</span></a>
                   <ul>
                       <li><a href="#" style="text-indent: 15px;"><span>Efetuar Inscrição</span></a></li>
                       <li><a href="#" style="text-indent: 15px;"><span>Consultar Inscrição</span></a></li>
                   </ul>
               </li>
               <li><a href="#" class="parent" style="text-indent: 15px;"><span>Multimídia</span></a>
                   <ul>
                       <li><a href="#" style="text-indent: 15px;"><span>Fotos</span></a></li>
                       <li><a href="#" style="text-indent: 15px;"><span>Vídeos</span></a></li>
                   </ul>
               </li>
               <li><a href="#" style="text-indent: 15px;"><span>Contato</span></a></li>
<!--    <li><a href="#"><span style="margin:0; padding:0;"><img src="img_exp/menu_bt.png" alt="" border="0" /></span></a></li> -->

           </ul>

       </li>


   </ul>
</div>

<div id="copyright" style="display:none;">Copyright © 2012 <a href="http://apycom.com/">Apycom jQuery Menus</a></div>

<div id="bg"><img id="ImagemPrincipal" src="img_exp/bg1.jpg" width="100%" height="100%" alt=""></div>
<div class="bts_bg"><a href="javascript:TrocarImagem('img_exp/bg1.jpg');"><img src="img_exp/bt_bg1_1.jpg" border="0" alt="" id="link_bg" onMouseOver="this.src='img_exp/bt_bg1.jpg'"  
   onMouseOut="this.src='img_exp/bt_bg1_1.jpg'" style="margin-bottom:10px;" /></a><br />
<a href="javascript:TrocarImagem('img_exp/bg2.jpg');"><img src="img_exp/bt_bg2_1.jpg" border="0" alt="" id="link_bg" onMouseOver="this.src='img_exp/bt_bg2.jpg'"  
   onMouseOut="this.src='img_exp/bt_bg2_1.jpg'" /></a><br />
   <img src="img_exp/escolha_bg.png" border="0" alt="" style="margin-top:20px; margin-left:5px;" />
   </div><div class="logo_paralelo"><img src="img_exp/logo_paralelo.png" alt="" /></div>
<div id="content" class="scroll-pane">

<div id="conteudo">
<div id="avisos" style="float:left;"></div>
<div id="divajax"></div>
</div><!-- fim conteudo-->

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

</div><!-- fim div content -->

</body>
</html>

Bru_ce · Novembro 21, 2012

No seu CSS coloque conforme deseja +/- assim:

#conteudo {
min-height:300px;
}

Com isso a DIV conteúdo vai ter um height proporcional ao tamanho dos dados que serão inseridos, seu tamanho inicial é 300px, Boa Sorte ! :natalbiggrin:

TubaraoBR · Novembro 21, 2012

No seu CSS coloque conforme deseja +/- assim:
#conteudo {
min-height:300px;
}
Com isso a DIV conteúdo vai ter um height proporcional ao tamanho dos dados que serão inseridos, seu tamanho inicial é 300px, Boa Sorte ! :natalbiggrin:/>

Obrigado pela atenção ...

Já existe isso.

Só que o seguinte... ele cria somente scroll nos 300px... O restante do conteúdo não é exibido.

Já tentei colocar isso no 'content', em uma outra div dentro da página que é carregada... e nada...

Sempre só funciona colocando na div conteudo. Porém, como já disse, nem todas as páginas carregadas terão

mesmo conteudo/altura.

Se tiver outra solução agradeço mais ainda.

TubaraoBR · Novembro 21, 2012

No seu CSS coloque conforme deseja +/- assim:
#conteudo {
min-height:300px;
}
Com isso a DIV conteúdo vai ter um height proporcional ao tamanho dos dados que serão inseridos, seu tamanho inicial é 300px, Boa Sorte ! :natalbiggrin:/>/>

Deixa eu citar algo que esqueci... quem sabe alguém possa resolver o problema de outra Forma^^

A estrutura da página, esta feita para :

'content'

Exibir uma barra de rolagem personalizada com o jscrollpane.

Funciona certinho...

Se eu conseguisse fazer esse efeito, funcionar na página que for carregada pelo AJAX, já resolveria meu problema.

Por isso que uso a DIV 'conteudo' dentro da DIV 'content'.

Só consigo o efeito do jscrollpane diretamente na página, ao carregar com AJAX não consigo o mesmo efeito.

é essa a idéia... Abrir as páginas pelo AJAX e com o jscrollpane.

Bru_ce · Novembro 21, 2012

Faz assim, quando o AJAX carregar a página, logo você coloca sua DIV com min-height



$(function(){

$("#conteudo").css("min-height","500px;");

});

TubaraoBR · Novembro 21, 2012

Faz assim, quando o AJAX carregar a página, logo você coloca sua DIV com min-height
$(function(){

$("#conteudo").css("min-height","500px;");

});

Nada :(

ficou mesma coisa...

Achei um link... talves vai me ajudar...

http://www.kelvinluck.com/assets/jquery/jScrollPane/ajax_example.html

É exatamente aquilo que eu quero.

jcsrllpane + ajax

Henrique Barcelos · Novembro 22, 2012

Mostre o seu CSS

TubaraoBR · Novembro 23, 2012

Mostre o seu CSS

#content {
margin-top:250px;
width:950px;
position:absolute;
margin-left:-475px;
left:50%;
z-index:1;
height:300px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
overflow-y:auto;
}

#conteudo {
min-height:400px;
}

.jspContainer
{
overflow: hidden;
position: relative;
}

.jspPane
{
position: absolute;
}

.jspVerticalBar
{
position: absolute;
top: 0;
right: 0;
width: 8px;
height: 100%;
/*	background: red; */
}

.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
/*	background: red; */
}

.jspVerticalBar *,
.jspHorizontalBar *
{
margin: 0;
padding: 0;
}

.jspCap
{
display: none;
}

.jspHorizontalBar .jspCap
{
float: left;
}
/* fundo do scroll */
.jspTrack
{
background:url(img_exp/bg_scroll.png) repeat-y;
position: relative;
}
/* cor da barra q arrasta */
.jspDrag
{
background: #ffffff;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}
/* pontas do scroll */
.jspArrow
{
background:#ffffff;
text-indent: -20000px;
display: block;
cursor: pointer;
}
/* quando barra esta total em cima ou embaixo */
.jspArrow.jspDisabled
{
cursor: default;
/*	background: #80808d; */
}

.jspVerticalBar .jspArrow
{
height: 16px;
}

.jspHorizontalBar .jspArrow
{
width: 16px;
float: left;
height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
outline: none;
}

.jspCorner
{
background: #eeeef4;
float: left;
height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
margin: 0 -3px 0 0;
}

Com o conteúdo sendo preenchido por página carregada com ajax, com a valor de 400px no min-height... ele aparece a barra certinha do jscrollpane.. porem, só dá pra rolar os 400px.

E quando tem conteúdo menor que 400px, que não precisa do scroll.. o scroll também aparece.

Se eu não informo o min-height no 'conteudo', ele soh exibe os 300px de height do content. sem rolar sem nada, tá hidden.

Se eu coloco lá no 'jspContainer' um overflow-y auto, ele exibe o scroll padrão do navegador, ou seja, sem o plugin.

Essa técnica tá complicada.

Quem puder.. agradeço.

OBS: Eu não consegui fazer funcionar o tutorial do link acima, por não saber como chamar outras páginas.

Arquivado

Overflow de DIV de página carregada com Ajax

Recommended Posts

TubaraoBR 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bru_ce 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

TubaraoBR 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bru_ce 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

TubaraoBR 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

TubaraoBR 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bru_ce 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

TubaraoBR 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

TubaraoBR 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Girls From Your Town - Anonymous Casual Dating - No Selfie

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Fóruns

Tempo Real

Informação importante