Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Deniw

Scroll Jquery e CSS

Por , em Javascript

Recommended Posts

Deniw    0

Deniw
Postado

Já tentei de tudo (que estava ao meu alcance)... não sei se é no CSS, no Jquery

 

O problema é que a parte de baixo do scroll "não fica escondida" no IE7, mostrando os três anúncios!

 

Nos outros browsers funcionou beleza! (olhem o link, que da pra entender melhor

 

Vejam o Link: www.livrariacrista.net

 

Os códigos:

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

CSS

@charset "utf-8";
/* CSS Document */

body {
	margin-top: 0px;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	overflow: hidden;
}
#top {
	margin-bottom: 20px;
}
#conteiner {
	width: 500px;
	margin: 0 auto;
	height: 530px;
}
#texto {
	text-align: center;
	color: #999999;
	padding: 20px;
	clear: both;
	background-color: #FFFFFF;
	width: 500px;
	margin: 0 auto;
	border-top: 1px solid;
	border-top-style: dashed;
	border-color: #F08827;
        }
#wrapper {
	width:500px;
	height:300px;
	top:200px;
	overflow:hidden;
	margin: 0 auto;
	position: absolute;
        }
.item1 {
	background-image: url(Images/Anuncios_tmp_pg1.jpg);
	background-repeat: no-repeat;
	}
.item2 {
	background-image: url(Images/Anuncios_tmp_pg2.jpg);
	background-repeat: no-repeat;
	}
.item3 {
	background-repeat: no-repeat;
	background-image: url(Images/Anuncios_tmp_pg3.jpg);
	}
	.content {
	width:500px;
	height:300px;
	top:0px;
	float: none;
	position: relative;
	margin-bottom: 10px;
	overflow: hidden;
	}
	.selected {
	background:#fff;
	font-weight:700;
	}
#nav {
	width: 435px;
	padding: 8px 0px 0px 0px;
	background-color: #FFFFFF;
	margin: 0 auto;
	height: auto;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
---------------------------------

HTML:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd"><html lang="en">


<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Scroll Horizontally</title>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script>
$(document).ready(function() {
	$('a.panel').click(function () {
		$('a.panel').removeClass('selected');
		$(this).addClass('selected');
		current = $(this);
		$('#wrapper').scrollTo($(this).attr('href'), 450);		
		return false;
	});
	$(window).resize(function () {
		resizePanel();
	});
	});

function resizePanel() {
	width = $(window).width();
	height = $(window).height();
	mask_height = height * $('.item').length;
	$('#debug').html(width  + ' ' + height + ' ' + mask_height);
	$('#wrapper, .item').css({width: width, height: height});
	$('#mask').css({width: width, height: mask_height});
	$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}
</script>
<script language="JavaScript" src="http://www.malsup.com/jquery/corner/jquery.corner.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
$(function() {
$('.content').corner("rounded 7px");
});

</script>
<link href="Cópia de style_scroll.css" rel="stylesheet" type="text/css">
</head>



<body>

<div id="conteiner">
 <div id="top">
 <div align="center"><img src="images/logo.png" width="253" height="143" /></div>

 </div><div id="nav">
   <div align="center"><a href="#item1" class="panel"><img src="Images/pg_1.png" alt="Início" width="117" height="27" border="0"></a>
     <a href="#item2" class="panel"><img src="Images/pg_2.png" alt="Início" width="192" height="27" border="0"></a>
    <a href="#item3" class="panel"><img src="Images/pg_3.png" alt="Início" width="117" height="27" border="0"></a></div>
 </div>

<div class="selected" id="wrapper">

<div id="item1" class="item1">
<div class="content"><a name="item1"></a></div>
</div>

    <div id="item2" class="item2">
      <div class="content"><a name="item2"></a></p></div>
   </div>
  <div id="item3" class="item3"><div class="content"><a name="item3"></a></div>
</div>
</div>
</div>

<div id="texto">
    Site em Desenvolvimento<br>
    <br><strong>Contato:</strong>  livrariacrista@internext.com.br<br>
   <br><span class="style3">Tel: 92.3232-4571 | 9984-4964</span></div>
</body>
</html>
___________________________________

 

Aguardo e agradeço desde já!!

 

 

 

 

Esté tópico foi editado por: LunG_ShiH.

Motivo: Edição de CAIXA ALTA do título e remoção das palavras PROBLEMA/Ajuda/Urgente de acordo com a regra nº 09 dof fórum iMasters.

Compartilhar este post

Link para o post
Compartilhar em outros sites

srnetcave    1

srnetcave
Postado

pergunta...se você não quer que os 3 anúncios aparecam...porq apenas não tira eles? ou coloca numa <div> hidden e mostra mostra a <div> quando você quiser atraves de js?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Deniw    0

Deniw
Postado

Não quero que apareça os dois anúncios de baixo, o primeiro já aparece quando a página carrega, os dois últimos "rolam" chamados pelos menus acima. Cada um se "enquadra" somente quando é chamado. O plugin é o jquery Scroll.

 

Se você ver em outro navegador (Firefox, Chrome, Opera) verá que estão funcionando como deveriam, só no IE, que a bronca aparece.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito