Incompatibilidade - efeito carrossel -

kivervinicius · Julho 7, 2009

Boa tarde galera, estou precisando de uma ajuda de vcs, eu estou me matando nessa pagina e não consigo descobrir o motivo, eu estou desenvolvendo uma pagina, e nela vai ter os cursos passando por imagens, e estou utilizando um efeito carrossel, mas no exemplo, ele funciona no IE e no FF mas quando eu implementei na minha pagina, soh funciona no FF mas eu naum consigo entender o motivo...

<!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=utf-8">
<title>:: Aprendizado Digital ::</title>
<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #353744;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #000000;
}
#dvTopo {
	width:764px;
	height:180px;
	background-repeat: repeat-x;
	text-align: left;
}
#dvTudo {
	padding-top:20px;
	width: 764px;
	margin: 0 auto;
}
#dvBannerHor {
	padding-top:4px;
	color: #FFF;
}
#dvConteudo {
	width: 760px;
	margin: 0 auto;
}
#dvRodape {
	background:url(imagens/rodape.jpg) no-repeat;
	height:97px;
	padding-top:20px;
	max-height:97px;
	color: #999;
	font-family: Verdana, Geneva, sans-serif;
}
.roundedcornr_box_770291 {
	background: #f1f1f1 url(imagens/roundedcornr_770291_grad.gif) repeat-x top left;
}
.roundedcornr_top_770291 div {
	background: url(imagens/roundedcornr_770291_tl.gif) no-repeat top left;
}
.roundedcornr_top_770291 {
	background: transparent url(imagens/roundedcornr_770291_tr.gif) no-repeat top right;
}
.roundedcornr_bottom_770291 div {
	background: url(imagens/roundedcornr_770291_bl.gif) no-repeat bottom left;
}
.roundedcornr_bottom_770291 {
	background: transparent url(imagens/roundedcornr_770291_br.gif) no-repeat bottom right;
}
.roundedcornr_top_770291 div, .roundedcornr_top_770291, .roundedcornr_bottom_770291 div, .roundedcornr_bottom_770291 {
	width: 100%;
	height: 5px;
	font-size: 1px;
}
.roundedcornr_content_770291 {
	margin: 0 2px;
}
.style1 {
	color: #FFFFFF;
	font-size: 10pt;
	font-weight: bold;
}

.iptLogin {
	padding-left:20px;
	width:100px;
}
</style>
<script src="include/jquery-1.2.3.pack.js" type=text/javascript></SCRIPT>
<script src="include/jquery.jcarousel.pack.js" type=text/javascript></SCRIPT>
<LINK href="include/jquery.jcarousel.css" type=text/css rel=stylesheet>
<LINK href="include/skin.css" type=text/css rel=stylesheet>
<script type=text/javascript>

var mycarousel_itemList = [
	{url:'#1',img: 'imagens/exCursos.jpg', title: 'Curso'},
	{url:'#1',img: 'imagens/exCursos.jpg', title: 'Curso'},
	{url:'#1',img: 'imagens/exCursos.jpg', title: 'Curso'},
	{url:'#1',img: 'imagens/exCursos.jpg', title: 'Curso'},
	{url:'#1',img: 'imagens/exCursos.jpg', title: 'Curso'},
	{url:'#1',img: 'imagens/exCursos.jpg', title: 'Curso'},
	{url:'#1',img: 'imagens/exCursos.jpg', title: 'Curso'},
	{url:'#1',img: 'imagens/exCursos.jpg', title: 'Curso'},
	{url:'#1',img: 'imagens/exCursos.jpg', title: 'Curso'},
	{url:'#1',img: 'imagens/exCursos.jpg', title: 'Curso'}
];

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
{
	// The index() method calculates the index from a
	// given index who is out of the actual item range.
	var idx = carousel.index(i, mycarousel_itemList.length);
	carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{
	carousel.remove(i);
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item)
{
	return '<a href="' + item.url + '"><img src="' + item.img + '" width="150" height="150" border="0" alt="' + item.title + '" /></a>';
	
};

jQuery(document).ready(function() {
	jQuery('#mycarousel').jcarousel({
		wrap: 'circular',
		itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
		itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
	});
});

</SCRIPT>
<style type="text/css">
<!--
.style4 {
	color: #FFFFFF;
	font-size: 9pt;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style10 {font-family: Verdana, Arial, Helvetica, sans-serif; }
a:link {
	color: #FFFFFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
	color: #2E2C42;
}
a:active {
	text-decoration: none;
}

.form {
	font-family: Verdana;
	font-size: 8pt;
	background-image:url(imagens/fndLogin.jpg);
	background-position:center;
	border: 1px solid;
	border-color: #fff;

}
.form:hover {
	font-family: Verdana;
	font-size: 8pt;
	border: 1px solid;
	border-color: #CCCCCC;
	}
.form:active {
	font-family: Verdana;
	font-size: 8pt;
	border: 1px solid;
	border-color: #FF0000;
	}	
.style11 {font-size: 9%}
-->
</style>
</head>
<body>
<div id="dvTudo">
  <div id="dvTopo">
	<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
	  <tbody>
		<tr>
		  <td width="24" height="170"><img src="imagens/BordaTopoEsq.jpg" width="24" height="180"></td>
		  <td background="imagens/FunTopo.jpg" width="576"><div id="dvLogo"><img src="imagens/Logo.jpg" width="501" height="72"></div></td>
		  <td background="imagens/fundoLoginTopoDir.jpg" width="164">
		  <form id="form1" name="form1" method="post" action="">
		  <table width="90%" height="10" border="0" align="center" cellpadding="2" cellspacing="4">
			  <tbody>
				<tr>
				  <th width="100%" height="19" scope="col"></th>
				</tr>
				<tr>
				  <td>
					  <span class="style1"><img src="imagens/lblLogin.jpg" width="33" height="17" /><br />
					  </span><span class="style11">a</span><br /> 
					  <input name="textfield" type="text" class="form" size="15" />
					   
				  </td>
				</tr>
				<tr>
				  <td><img src="imagens/lblSenha.jpg" width="39" height="13" /><span class="style10"><br />
					<input name="textfield2" type="text" class="form" size="7" />
					<input type="image" name="imageField" src="imagens/acesso.jpg" />
				  </span></td>
				</tr>
				<tr>
				  <td class="style4"><a href="#"><br />
					»Inscreva-se</a></td>
				</tr>
			  </tbody>
			</table>
		</form>	</td>
		</tr>
	  </tbody>
	</table>
  </div>
  <div id="dvBannerHor"><img src="imagens/BannerExemp.jpg" name="banner" id="banner" align="bottom" width="764" height="171"> </div>
  <div id="dvConteudo">
	<div class="roundedcornr_box_770291">
	  <div class="roundedcornr_top_770291">
		<div></div>
	  </div>
	  <div class="roundedcornr_content_770291">
		<div id="dvCursos"></div>
		<div id="wrap">
		  <ul class="jcarousel-skin-ie7" id="mycarousel"></ul>
		</div>
		<div><iframe src="jCarousel Examples.htm" frameborder="0" width="100%" height="300px" scrolling="no" allowtransparency="yes"></iframe> </div>
		<p align="left"> </p>
	  </div>
	  <div class="roundedcornr_bottom_770291">
		<div></div>
	  </div>
	</div>
  </div>
  <div id="dvRodape">link | link | link | link | link | link | link | link | link | link | link | link <br>
	<br>
	www.aprendizadodigital.com.br <br>
  </div>
</div>
</body>
</html>

Muito Obrigado!

kivervinicius · Julho 7, 2009

http://www.aprendizadodigital.com.br/

ai vai o link da pagina funcionando, a parte de cima se você abrir com o firefox eh ele em jquery, e a de baixo eh um iframe, o problema imagino que não eh no codigo do jquery mas sim no html que deve ter alguma regra do ie que eu desconheça...

se abrir no ie ele aparece soh o com o iframe...

por favor galera ajudem

kivervinicius · Julho 24, 2009

Bom já que ninguem se fez necessário me ajudar..eu consegui resolver e apareci aki novamente para ajudar quem precisa..

O caso eh o seguinte, o problema estava acontecendo pq o css estava no mesmo arquivo que a pagina, ow seja você tem q criar um arquivo css externo, pq se não o jquery se confunde no ie6

Entrar

Arquivado

Incompatibilidade - efeito carrossel -

Recommended Posts

kivervinicius 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

kivervinicius 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

kivervinicius 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante