Se supone que el asunto es muy sencillito pero me estoy rompiendo la cabeza y esto no sale:
Estoy trabajando con Ajax. Tengo la pagina dividida en varios divs. Lo que quiero es que tras hacer click en un link, se muestre una pagina (slide.php) en un determinado div de la pagina original. La pagina que quiero mostrar contiene un efecto jquery de slide.
Si abro la pagina slide.php tal cual no hay ningun problema, todo funciona perfecto, pero si trato de abrirla de la manera en que quieo (dentro del div), no me funciona.
No se exactamente que le pasa, el css, el selector del jquery, los archivos referenciados,...pa mi todo esta bien pero no va....
Los codigos son estos:
el html:
Código HTML:
<html>
<head>
<link rel="stylesheet" href="br.css" type="text/css">
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="br.js" type="text/javascript"></script>
<script src="slide/jquery-easing.1.2.pack.js" type="text/javascript"></script>
<script src="slide/jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script>
<script src="slide/coda-slider.1.1.1.pack.js" type="text/javascript"></script>
</head>
<body>
<div id="pagina">
<div id="sup-izda"></div>
<div id="sup-centro"></div>
<div id="sup-dcha"></div>
<div id="lateral">
<li><a href="javascript:link('slide/slide.php', 'central')">slide</a></li>
<div id="inf-izda"></div></div>
<div id="central"> </div>
</div>
</body>
</html> la pagina que quiero mostrar:
Código HTML:
<script type="text/javascript">
jQuery(window).bind("load", function() {
jQuery("div#slider1").codaSlider()
});
</script>
<div class="slider-wrap">
<div id="slider1" class="csw">
<div class="panelContainer">
<div class="panel" title="Panel 1">
<div class="wrapper">
<h3>Panel 1</h3>
<p>Coda-Slider v1.1 by Niall Doherty.</p>
</div>
</div>
<div class="panel" title="Panel 2">
<div class="wrapper">
<h3>Panel 2</h3>
<p>Lorem ipsum</p>
</div>
</div>
</div><!-- .panelContainer -->
</div><!-- #slider1 -->
</div><!-- .slider-wrap -->
<p id="cross-links">
Same-page cross-link controls:<br />
<a href="#1" class="cross-link">Panel 1</a> | <a href="#2" class="cross-link">Panel 2</a>
</p> El css:
Código:
#pagina {
background:orange; width:100%; height:100%;
top:0px; left:0px;
margin-left:0px;
position:absolute;
}
#sup-izda {width:15%; height:20%; clear: left; float: left;
color: #FFF;
text-align:center;
background:black;
}
#sup-izda p { color: #FFF; margin: 10px;}
#sup-izda input {color:darkred; background:black; border:0px; text-align:center; font-size:18pt; position:relative; left:auto; top:auto;}
#sup-centro {
color: #FFF;
background: #000;
width:60%;
height:20%;
float: left;
}
#sup-dcha {
color: #FFF;
background:black;
width:25%;
height:20%;
float: left;
}
#lateral { background:black; clear: left; float:left; width:15%; height:50%;}
#inf-izda { background:#211; width:15%; height:30%; position: absolute; bottom: 0px;}
#central {
color: #FFF;
background: #666;
font-family: Verdana, Arial;
float:left;
width:85%;
height:80%;
overflow: scroll;
}
#central .mensaje {
color: #FFF;
margin-left:40px;
width:45%;
height:40%;
border-width:1px;
border-color:blue;
/* para IE */filter:alpha(opacity=90); /* CSS3 standard */opacity:0.90;
-moz-border-radius:8px;}
#central .mensaje div {margin:5px; text-align:center;}
#central .mensaje #titulo {margin:10px;}
#central .mensaje #texto {margin:20px;}
#central .mensaje #crear {margin:10px; float: right;}
#central .tabla {
margin-top: 20px;
margin-left:80px;
color: #FFF;
/* para IE */filter:alpha(opacity=90); /* CSS3 standard */opacity:0.90;
-moz-border-radius:8px;
width:45%;
height:auto;
}
#central .mostrar {color: #555;}
/* css del coda slider */
p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100% }
p#cross-links { text-align: center }
p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px }
a:focus { outline:none }
img { border: 0 }
.stripViewer .panelContainer .panel ul {
text-align: left;
margin: 0 15px 0 30px;
}
.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
margin: 20px 0;
position: relative;
width: 100%;
}
/* These 2 lines specify style applied while slider is loading */
.csw {width: 100%; height: 460px; background: #fff; overflow: scroll}
.csw .loading {margin: 200px 0 300px 0; text-align: center}
.stripViewer { /* This is the viewing window */
position: relative;
overflow: hidden;
border: 5px solid #000; /* this is the border. should have the same value for the links */
margin: auto;
width: 400px; /* Also specified in .stripViewer .panelContainer .panel below */
height: 260px;
clear: both;
background: red;
}
.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS */
position: relative;
left: 0; top: 0;
width: 100%;
list-style-type: none;
/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}
.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
float:left;
width: 400px; /* Also specified in .stripViewer above */
}
.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
padding: 10px;
}
.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
margin: auto;
}
.stripNav ul { /* The auto-generated set of links */
list-style: none;
}
.stripNav ul li {
float: left;
margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
}
.stripNav a { /* The nav links */
font-size: 10px;
font-weight: bold;
text-align: center;
line-height: 32px;
background: #c6e3ff;
color: #fff;
text-decoration: none;
display: block;
padding: 0 15px;
}
.stripNav li.tab1 a { background: #60f }
.stripNav li.tab2 a { background: #60c }
.stripNav li.tab3 a { background: #63f }
.stripNav li.tab4 a { background: #63c }
.stripNav li.tab5 a { background: #00e }
.stripNav li a:hover {
background: #333;
}
.stripNav li a.current {
background: #000;
color: #fff;
}
.stripNavL, .stripNavR { /* The left and right arrows */
position: absolute;
top: 230px;
text-indent: -9000em;
}
.stripNavL a, .stripNavR a {
display: block;
height: 40px;
width: 40px;
}
.stripNavL {
left: 370;
background: url("slide/images/arrow-left.gif") no-repeat center;
}
.stripNavR {
right: 370;
background: url("slide/images/arrow-right.gif") no-repeat center;
}
y el archivo ajax que carga en el div adecuado:
Código:
function objetoAjax()
{
var xmlhttp=false;
try
{xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}
catch (e)
{
try
{xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
catch (E)
{xmlhttp = false;}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined')
{xmlhttp = new XMLHttpRequest();}
return xmlhttp;
}
function link (pagina,capa) {
var ajax;
ajax = objetoAjax();
ajax.open("POST", pagina, true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.onreadystatechange = function()
{
if (ajax.readyState == 4)
{
document.getElementById(capa).innerHTML = ajax.responseText;
}
}
ajax.send(null);
}
Los archivos .js del slide estan en:
[URL="http://www.ndoherty.biz/demos/coda-slider/1.1.1/"]http://www.ndoherty.biz/demos/coda-slider/1.1.1/[/URL]
Por favor, si me podeis echar un cable y decidme al menos por donde van los tiros...
1 saludo y muchas gracias!