problema con importaciones de archivos js

JoseLuis_P_C · #1 (**permalink**) 04/01/2016, 09:45

tengo una pagina web con un menu que llama a otras la pagina web que tiene el menu es un contenedor de otras paginas web y otra pagina x que contiene un slider y tiene sus archivos de diseño css y js del slider el slider tiene sus controles <ul><li>...</li></ul> que cuando una imagen se muestra se focaliza determinado item del control el problema sucede que cuando llamo varias veces a la pagina x se focalizan todos item del control . lo unico que se lo que puede estar pasando es que cuando llamo la pagina x se importan a la pagina de menu los archivos js y css de la pagina x y cuando los vuelvo a llamar se vuelven a importar los archivos js y css al final es como si tuviera varios archivos js en la pagina del menu ejecutando el slider o como si estuviera en memoria de la pagina y es por eso que focaliza todos los controles del slider ... quiero saber si ese es realmente el problema y como puedo solucionarlo gracias ...

Zenok · #2 (**permalink**) 04/01/2016, 10:53

No he entendido demasiado la verdad (Y eso que me lo he leído varias veces), y que no hayan comas no ayuda. Si te explicas un poco mejor quizás pueda ayudarte.

Un saludo.

JoseLuis_P_C · #3 (**permalink**) 04/01/2016, 15:24

gracias por echarme ese error no me habia dado cuenta :) lo que pasa es... tengo una pagina "a" (que es la principal) con un menu que llama a otras paginas , y tengo otra pagina "b" con un slider que los efectos de diseño y animacion estan en los archivos js y css que importo en la pagina "b", el problema sucede cuando llamo a la pagina "b" desde la pagina principal mas de una ves ; los indices del control del slider cambian su ubicacion y no quedan bien indexadas ,es como si los archivos js y css se importaran y se guardaran en memoria de la pagina web principal tantas veces como llamo a la pagina "b" ....no se si me e explicado bien o hace falta algo mas gracias por ayudarme

Zenok · #4 (**permalink**) 04/01/2016, 16:09

No creo que tenga nada que ver con el css/js. ¿Puedes mostrar el código de como cargas cada página, y sobre que elemento HTML se carga el nuevo contenido?

Si dices que cada vez que cada vez que cargas la página más de una vez se descoloca, quizás es que cargas en ese fichero algo de más. Quizás alguna captura no vendría mal.

Un saludo.

JoseLuis_P_C · #5 (**permalink**) 04/01/2016, 17:50

esta es la pagina principal index.html llamo con load de jquery----
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Menu</title>

<link rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#contenedor").load("inicio.html");
$("#menu a").each(function(){
var href = $(this).attr("href");
$(this).attr({ href: "#"});
$(this).click(function(){

$("#contenedor").load(href);

});
});
});
</script>
</head>
<body>
<header id="main-header" style="z-index:9">
<div id="header-menu">
<img id="logo" src="img/logo.jpg">
<ul id="menu" class="nav">
<li><a rel="stylesheet" href="inicio.html">Inicio</a></li>
<li><a href="b.html">Nosotros</a>
</li>
<li><a href="c.html">Productos</a>
</li>
<li><a href="b.html">Contactenos</a></li>
</ul>

</div>
</header>
<div id="contenedor">
</div>
<footer id="main-footer">
<div id="footer-menu">
<img id="logo" src="img/logo1.jpg">
<div id="footer-tit">
<p id="footer-t1">

</p>
<p id="footer-t2">

</p>
</div>
<div id="footer-dir">
<p id="footer-d1">

</p>
<p id="footer-d2">

</p>
</div>
</div>
</footer>
</body>
</html>
--------------
esta es la pagina de inicio.html que contiene el slider------
<!DOCTYPE html>
<html>
<head>
<title>Inicio</title>

<link rel="stylesheet" href="css/inicio.css">
<link rel="stylesheet" href="css/slider.css">


<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/slider.js"></script>

<script type="text/javascript">
$( document ).ready(function() {

});
</script>

</head>
<body id="pag-inicio" >
<div id="con-pag-inicio">

<div id="banner1">

<section class="slider-container">
<ul id="slider" class="slider-wrapper">
<li class="slide-current">
<img src="img/slider/img1.jpg" alt="Slider Imagen 1">
</li>

<li>
<img src="img/slider/img2.jpg" alt="Slider Imagen 1">
</li>

<li>
<img src="img/slider/img3.jpg" alt="Slider Imagen 1">
</li>

</ul>

<ul id="slider-controls" class="slider-controls"></ul>

</section>
</div>

<div id="ayuda-inicio">

<div id="banner2">
<div id="welcome">
<div id="tit-welcome">

</div>
<div id="img-welcome">
<img src="img/welcome/welcome2.jpg">
</div>
<div id="des-welcome">
<a href="#">.</a>
</div>
</div>
<div id="publication">
<div id="tit-publication">
Publicaciones
</div>
<div id="img-publication">
<img src="img/publication/publication1.jpg" >
</div>
<div id="des-publication">
<a href="#"></a>
</div>
</div>
</div>

<div id="banner3">
<div id="question">
<div id="tit-question">

</div>
<div id="img-question">
<img src="img/question/question1.jpg">
</div>
<div id="des-question">
<a href="#"></a>
</div>
</div>
<div id="tips">
<div id="tit-tips">

</div>
<div id="img-tips">
<img src="img/tips/tips1.jpg" >
</div>
<div id="des-tips">
<a href="#"></a>
</div>
</div>
</div>

</div>

</div>
</body>
</html>
-------------------------
slider.js ----------------------
$(function () {
var SliderModule = (function() {

var pb = {};
pb.el = $('#slider');
pb.items = {
panel: pb.el.find('li')
}

// Variables Necesarias
var SliderInterval,
currentSlider = 0,
nextSlider = 1,
lengthSlider = pb.items.panel.length;

// Initialize
pb.init = function(settings) {

this.settings = settings || {duration: 8000}
var output = '';

// Activamos nuestro slider
SliderInit();

for(var i = 0; i < lengthSlider; i++) {
if (i == 0) {
output += '<li class="active"></li>';
} else {
output += '<li></li>';
}
}

// Controles del Slider
$('#slider-controls').html(output).on('click', 'li', function (e){
var $this = $(this);
if (currentSlider !== $this.index()) {
changePanel($this.index());
};
});

}

var SliderInit = function() {

SliderInterval = setInterval(pb.startSlider, pb.settings.duration);
}

pb.startSlider = function() {

var panels = pb.items.panel,
controls = $('#slider-controls li');

if (nextSlider >= lengthSlider) {
nextSlider = 0;
currentSlider = lengthSlider-1;
}

// Efectos
controls.removeClass('active').eq(nextSlider).addC lass('active');
panels.eq(currentSlider).fadeOut('slow');
panels.eq(nextSlider).fadeIn('slow');

// Actualizamos nuestros datos
currentSlider = nextSlider;
nextSlider += 1;
}

// Funcion para controles del slider
var changePanel = function(id) {
clearInterval(SliderInterval);
var panels = pb.items.panel,
controls = $('#slider-controls li');

// Comprobamos el ID
if (id >= lengthSlider) {
id = 0;
} else if (id < 0) {
id = lengthSlider-1;
}

// Efectos
controls.removeClass('active').eq(id).addClass('ac tive');
panels.eq(currentSlider).fadeOut('slow');
panels.eq(id).fadeIn('slow');

// Actualizamos nuestros datos
currentSlider = id;
nextSlider = id+1;

// Reactivamos el slider
SliderInit();
}

return pb;
}());

SliderModule.init({duration: 2000});
});
--------------
disculpa la demora

Zenok · #6 (**permalink**) 05/01/2016, 05:54

¿Por qué haces la carga de la página así?

Código Javascript:

Ver original$("#menu a").each(function(){
var href = $(this).attr("href");
$(this).attr({ href: "#"});
$(this).click(function(){
 
$("#contenedor").load(href);
 
});
});

¿Y no simplemente así?

Código Javascript:

Ver original$(document).on('click', '#menu a', function()
{
    var href = $(this).attr('href');
    $("#contenedor").load(href);
});

Lo que veo ahí, es que con esa función cambias a todos los enlaces el href por #. Quizás tengas el problema ahí.

JoseLuis_P_C · #7 (**permalink**) 05/01/2016, 08:46

si que quito esa funcion me redirecciona a la pagina b.html o inicio.hml que hace referencia ,y quiero que la pagina principal siga siendo index.html , pues el menu inicio tiene propiedad es href y al hacerle click me lleva a la pagina que hace referencia y no quiero eso, quiero que la pagina index siga siendo la principal; la contenedora de todas las paginas .

Zenok · #8 (**permalink**) 05/01/2016, 11:31

Cita:

Iniciado por JoseLuis_P_C

si que quito esa funcion me redirecciona a la pagina b.html o inicio.hml que hace referencia ,y quiero que la pagina principal siga siendo index.html , pues el menu inicio tiene propiedad es href y al hacerle click me lleva a la pagina que hace referencia y no quiero eso, quiero que la pagina index siga siendo la principal; la contenedora de todas las paginas .

Claro, perdona, se me olvidó cancelar el evento.

Código Javascript:

Ver original$(document).on('click', '#menu a', function()
{
    var href = $(this).attr('href');
    $("#contenedor").load(href);
 
    return false;
});

JoseLuis_P_C · #9 (**permalink**) 05/01/2016, 13:24

si con eso no me redirecciona, pero sigo teniendo el problema con el control del slider, que me focaliza el item incorrecto, la cual me deberia focalizar solo un item en el orden correcto de acuerdo a la imagen mostrada