Foros del Web » Programando para Internet » Jquery »

problema con importaciones de archivos js

Estas en el tema de problema con importaciones de archivos js en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/01/2016, 09:45
 
Fecha de Ingreso: enero-2016
Mensajes: 5
Antigüedad: 8 años, 10 meses
Puntos: 0
Mensaje problema con importaciones de archivos js

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 ...
  #2 (permalink)  
Antiguo 04/01/2016, 10:53
 
Fecha de Ingreso: diciembre-2015
Ubicación: Valencia
Mensajes: 61
Antigüedad: 8 años, 10 meses
Puntos: 10
Respuesta: problema con importaciones de archivos js

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.
  #3 (permalink)  
Antiguo 04/01/2016, 15:24
 
Fecha de Ingreso: enero-2016
Mensajes: 5
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: problema con importaciones de archivos js

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
  #4 (permalink)  
Antiguo 04/01/2016, 16:09
 
Fecha de Ingreso: diciembre-2015
Ubicación: Valencia
Mensajes: 61
Antigüedad: 8 años, 10 meses
Puntos: 10
Respuesta: problema con importaciones de archivos js

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.
  #5 (permalink)  
Antiguo 04/01/2016, 17:50
 
Fecha de Ingreso: enero-2016
Mensajes: 5
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: problema con importaciones de archivos js

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">

<!-- Scripts -->
<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">
<!-- Slider Container -->
<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>
<!-- Controles -->
<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
  #6 (permalink)  
Antiguo 05/01/2016, 05:54
 
Fecha de Ingreso: diciembre-2015
Ubicación: Valencia
Mensajes: 61
Antigüedad: 8 años, 10 meses
Puntos: 10
Respuesta: problema con importaciones de archivos js

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

Código Javascript:
Ver original
  1. $("#menu a").each(function(){
  2. var href = $(this).attr("href");
  3. $(this).attr({ href: "#"});
  4. $(this).click(function(){
  5.  
  6. $("#contenedor").load(href);
  7.  
  8. });
  9. });

¿Y no simplemente así?

Código Javascript:
Ver original
  1. $(document).on('click', '#menu a', function()
  2. {
  3.     var href = $(this).attr('href');
  4.     $("#contenedor").load(href);
  5. });

Lo que veo ahí, es que con esa función cambias a todos los enlaces el href por #. Quizás tengas el problema ahí.
  #7 (permalink)  
Antiguo 05/01/2016, 08:46
 
Fecha de Ingreso: enero-2016
Mensajes: 5
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: problema con importaciones de archivos js

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 .
  #8 (permalink)  
Antiguo 05/01/2016, 11:31
 
Fecha de Ingreso: diciembre-2015
Ubicación: Valencia
Mensajes: 61
Antigüedad: 8 años, 10 meses
Puntos: 10
Respuesta: problema con importaciones de archivos js

Cita:
Iniciado por JoseLuis_P_C Ver Mensaje
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
  1. $(document).on('click', '#menu a', function()
  2. {
  3.     var href = $(this).attr('href');
  4.     $("#contenedor").load(href);
  5.  
  6.     return false;
  7. });
  #9 (permalink)  
Antiguo 05/01/2016, 13:24
 
Fecha de Ingreso: enero-2016
Mensajes: 5
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: problema con importaciones de archivos js

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

Etiquetas: js
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:59.