Problems with two sliders

egoicantero · December 13, 2016, 10:46pm

Hi everyone,

I have two sliders in the same page. They were working well but now that I was going to modify the code I have realized that they are not working good, I don´t know if it could have been when adding the second slider.

The problems happens with the length it has to translate when hitting the next or previous button. The code I have HTML:

FIRST SLIDER:

<div class="relacionados">

                            <div class="relacionados_overflow">

                                <div class="slider">

                                    <?php foreach ($juegos_totales as $post): ?>

                                        <div class="juegos_relacionados" onclick="location.href = 'single.php?ID=<?php echo $post['ID'] ?>'">
                                            <img src="caratulas/<?php echo $post['thumb'] ?>">
                                            <p><?php echo $post['titulo'] ?></p>
                                        </div>

                                    <?php endforeach; ?>



                                </div>

                            </div>

                            <span id="prev" class="prev"><</span>
                            <span id="next" class="next">></span>

                        </div>

SECOND SLIDER:

<div class="contenedor_juegos_sugeridos">

                    <div class="contenedor_juegos_sug_overflow">

                        <div class="sugeridos_slider">

                            <?php
                            if (count($juegos_sugeridos) >= 20) {
                                for ($i=0; $i < 20; $i++) {
                            ?>
                                        <div class='caja_juegos_sugeridos' onclick="location.href = 'single.php?ID=<?php echo $juegos_sugeridos[$i]['ID'] ?>'">
                                        <img class='caratula_sugeridos' src="caratulas/<?php echo $juegos_sugeridos[$i]['thumb'] ?>">
                            <?php
                                        echo "<p>" . $juegos_sugeridos[$i]['titulo'] . "</p>";
                                    echo "</div>";
                                }
                            } else {
                                for ($i=0; $i < count($juegos_sugeridos); $i++) {
                                    ?>
                                                <div class='caja_juegos_sugeridos'  onclick="location.href = 'single.php?ID=<?php echo $juegos_sugeridos[$i]['ID'] ?>'">
                                                <img class='caratula_sugeridos' src="caratulas/<?php echo $juegos_sugeridos[$i]['thumb'] ?>">
                                    <?php
                                        echo "<p>" . $juegos_sugeridos[$i]['titulo'] . "</p>";
                                    echo "</div>";
                                }
                            }


                            ?>

                        </div>

                    </div>

                    <span id="prev_sugeridos" class="prev_sugeridos"><</span>
                    <span id="next_sugeridos" class="next_sugeridos">></span>

                </div>

The javascript code it´s in the same field:

	var gallery_width = $('.juegos_relacionados').width()+6; // 6 is the total margin 
	var numero_complementos = $('.juegos_relacionados img').length;

	$('.slider').width(gallery_width*numero_complementos); 

	document.getElementById('prev').style.display = 'none';

	if (numero_complementos <= 6) {
		document.getElementById('next').style.display = 'none';
		document.getElementById('prev').style.display = 'none';
	}

	var c = $('.relacionados_overflow').width(); //este es el width establecido para el cajetin donde se muestran los videojuegos. // C value is the width of the overflown wrapper

	$('.next').click(function(){
		document.getElementById('prev').style.display = 'block';
		var d = gallery_width*numero_complementos - c; // esto sirve para determinar cuanto tienes que desplazarte
		if (d >= 648) {
			$('.slider').animate({left: -c}, 2000);
			alert(c); // When C should be 648, it gives me 1080, I don´t understand why, it´s nonsense. I haven´t been changed since I start the "c" variable.
			c = c +648 ;
			document.getElementById('next').style.display = 'block';
		} else {
			c = c - (648 - d);
			$('.slider').animate({left: -c}, 2000);
			document.getElementById('next').style.display = 'none';
		}
	})



	$('.prev').click(function(){
		c = c - 648;
		document.getElementById('next').style.display = 'block';
		if (c > 0) {
			$('.slider').animate({left: -c}, 2000);
			document.getElementById('prev').style.display = 'block';
		} else {
			$('.slider').animate({left: 0}, 2000);
			c = 648;
			document.getElementById('prev').style.display = 'none';
		}

	})


	// CODE FOR THE SECOND SLIDER

	var gallery_width = $('.caja_juegos_sugeridos').width()+10; // 10 es el margin total que tiene.
	var numero_complementos = $('.caja_juegos_sugeridos img').length;

	$('.sugeridos_slider').width(gallery_width*numero_complementos); //sumamos 4 para que el último elemento no se situe en la fila de abajo.

	document.getElementById('prev_sugeridos').style.display = 'none';

	if (numero_complementos <= 6) {
		document.getElementById('next_sugeridos').style.display = 'none';
		document.getElementById('prev_sugeridos').style.display = 'none';
	}

	var c = 1080; //este es el width establecido para el cajetin donde se muestran los videojuegos.

	$('.next_sugeridos').click(function(){
		document.getElementById('prev_sugeridos').style.display = 'block';
		var d = gallery_width*numero_complementos - c; // esto sirve para determinar cuanto tienes que desplazarte
		if (d >= 1080) {
			$('.sugeridos_slider').animate({left: -c}, 2000);
			c = c +1080 ;
			document.getElementById('next_sugeridos').style.display = 'block';
		} else {
			c = c - (1080 - d);
			$('.sugeridos_slider').animate({left: -c}, 2000);
			document.getElementById('next_sugeridos').style.display = 'none';
		}
	})



	$('.prev_sugeridos').click(function(){
		c = c - 1080;
		document.getElementById('next_sugeridos').style.display = 'block';
		if (c > 0) {
			$('.sugeridos_slider').animate({left: -c}, 2000);
			document.getElementById('prev_sugeridos').style.display = 'block';
		} else {
			$('.sugeridos_slider').animate({left: 0}, 2000);
			c = 1080;
			document.getElementById('prev_sugeridos').style.display = 'none';
		}

	})

To make the design responsive I suppose I have to work with “c” variable.

I´m desperate with this problem, javascript is a language I don´t really control.

Thanks in advice!

PaulOB · December 14, 2016, 3:19pm

Until one of the JS experts answers the question properly I can see a problem with your global variables. You have duplicated the variables so the second one overwrites the first and is used in both.

If we put them next to each other you can see the problem.

var gallery_width = $('.juegos_relacionados').width() + 6; // 6 is the total margin 
var gallery_width = $('.caja_juegos_sugeridos').width() + 10; // 10 es el margin total que tiene.
var numero_complementos = $('.juegos_relacionados img').length;
var numero_complementos = $('.caja_juegos_sugeridos img').length;
var c = $('.relacionados_overflow').width(); //este es el width establecido para el cajetin donde se muestran los videojuegos. // C value is the width of the overflown wrapper
var c = 1080; //este es el width establecido para el cajetin donde se muestran los videojuegos.

You would need to rename the second variable differently and then change the JS references to match the new variable name.

However the proper answer is most likely to make the same routine work on multiple sliders rather than having 2 slider routines but that is above my skillset and hopefully one of the JS experts will answer.

Also it would be useful if you linked to a demo of the problem (live link, codepen or a fiddle) so that people can work on it easily and see what needs to be done. Raw php is not much use unless this was a php question. We need a live link or at the least full CSS, rendered html (not php) and JS.

egoicantero · December 15, 2016, 1:50pm

Thanks for your response,

I finally solve the problem as you mentioned, changing in this case the firs variable to another one. Now is working in destkop design and it´s also responsive.

Thanks for your help!

egoicantero · December 21, 2016, 11:50am

Hi again,

I thought it was solved, and it is partially. The problem is that when I have two sliders both work well, but when I have only one because the game hasn’t got any complements, the slider doesn´t work.

I share with you two links so that you can see what I am talking about:

1. Two sliders working well:

http://laxtore.com/single.php?ID=129

2. One slider not working:

http://laxtore.com/single.php?ID=1691

I can´t understand where can I have the error. I was looking through the code if I had the second javascript code inside the first one, so in that case when I only have one slider the the only one that should work, doesn´t.

The code in javascript:

var gallery_width = $('.juegos_relacionados').width()+6; 
	var numero_complementos = $('.juegos_relacionados img').length;

	$('.slider').width(gallery_width*numero_complementos); 


	document.getElementById('prev').style.display = 'none';

	if (numero_complementos <= 6) {
		document.getElementById('next').style.display = 'none';
		document.getElementById('prev').style.display = 'none';
	}

	var move = $('.relacionados_overflow').width(); //este es el width establecido para el cajetin donde se muestran los videojuegos.


	$('.next').click(function(){
		document.getElementById('prev').style.display = 'block';
		var d = $('.slider').width() - move; // esto sirve para determinar cuanto tienes que desplazarte
		if (d >= $('.relacionados_overflow').width()) {
			$('.slider').animate({left: -move}, 2000);
			move = move + $('.relacionados_overflow').width() ;
			document.getElementById('next').style.display = 'block';
		} else {
			move = move - ($('.relacionados_overflow').width() - d);
			$('.slider').animate({left: -move}, 2000);
			document.getElementById('next').style.display = 'none';
		}
	})



	$('.prev').click(function(){
		move = move - $('.relacionados_overflow').width();
		document.getElementById('next').style.display = 'block';
		if (move > 0) {
			$('.slider').animate({left: -move}, 2000);
			document.getElementById('prev').style.display = 'block';
		} else {
			$('.slider').animate({left: 0}, 2000);
			move = $('.relacionados_overflow').width();
			document.getElementById('prev').style.display = 'none';
		}

	})


	// CODE FOR THE SECOND SLIDER

	var gallery_width = $('.caja_juegos_sugeridos').width()+10; // 10 es el margin total que tiene.
	var numero_complementos = $('.caja_juegos_sugeridos img').length;

	alert(numero_complementos)

	$('.sugeridos_slider').width(gallery_width*numero_complementos); 

	document.getElementById('prev_sugeridos').style.display = 'none';

	if (numero_complementos <= 6) {
		document.getElementById('next_sugeridos').style.display = 'none';
		document.getElementById('prev_sugeridos').style.display = 'none';
	}

	var c = $('.contenedor_juegos_sug_overflow').width(); 

	$('.next_sugeridos').click(function(){
		document.getElementById('prev_sugeridos').style.display = 'block';
		var d = gallery_width*numero_complementos - c; 
		if (d >= $('.contenedor_juegos_sug_overflow').width()) {
			$('.sugeridos_slider').animate({left: -c}, 2000);
			c = c +$('.contenedor_juegos_sug_overflow').width() ;
			document.getElementById('next_sugeridos').style.display = 'block';
		} else {
			c = c - ($('.contenedor_juegos_sug_overflow').width() - d);
			$('.sugeridos_slider').animate({left: -c}, 2000);
			document.getElementById('next_sugeridos').style.display = 'none';
		}
	})



	$('.prev_sugeridos').click(function(){
		c = c - $('.contenedor_juegos_sug_overflow').width();
		document.getElementById('next_sugeridos').style.display = 'block';
		if (c > 0) {
			$('.sugeridos_slider').animate({left: -c}, 2000);
			document.getElementById('prev_sugeridos').style.display = 'block';
		} else {
			$('.sugeridos_slider').animate({left: 0}, 2000);
			c = $('.contenedor_juegos_sug_overflow').width();
			document.getElementById('prev_sugeridos').style.display = 'none';
		}

	})

Thanks in advice!

PaulOB · December 21, 2016, 11:31pm

I think you would need to remove the js for the first slider also otherwise it will throw an error if the elements don’t exist.

main.js:35 Uncaught TypeError: Cannot read property ‘style’ of null

Alternatively write your code so that it first check if the element exists before it tries to access its properties.

Something like:

if ($('#prev').length) {
	document.getElementById('prev').style.display = 'none';	 
}

I also note that you still seem to have some duplicate variable names in place.

I think we need one of the js experts (@James_Hibbard or others) to tidy this all up

James_Hibbard · December 22, 2016, 9:44am

If you look in the browser’s console (usually F12 > Console), you see the following message:

main.js:35 Uncaught TypeError: Cannot read property 'style' of null

That refers to this line:

document.getElementById('prev').style.display = 'none';

What it’s telling you is that there isn’t an element with an id of prev on the page. A look at the source code will confirm this.

As Paul says, you could check for the presence of that element before trying to access its properties.

Alternatively, you could invest a little time in cleaning up the code. For example you have a right jumble of jQuery and plain JS. If you’re going to include jquery, you might as well use it.

E.g.

document.getElementById('prev').style.display = 'none';

could be:

$('#prev').hide();

If you’re interested in cleaning this up, we can probably help, but please post a minimum runnable example for us to have a look at.

davidstephande · December 22, 2016, 10:57am

Thanks PaulOB for solve egoicantero’s problem. Today i was also facing same problem but when i searched on google. I found this forum and solve my all queries from your great help or advice.
Thanks a lot!!!

egoicantero · December 22, 2016, 2:19pm

Thanks for all your help, now I understand why is having problems, although I haven´t solved the problem yet.

I have used two methods, one using @PaulOB’s method and another one:

	if (numero_complementos != 0) {
		document.getElementById('prev').style.display = 'none';
	}

Now I have another error, this time in the line 40, which is the following:

	if (numero_complementos <= 6) {
		document.getElementById('next').style.display = 'none'; //line 40
		document.getElementById('prev').style.display = 'none';
	}

with the error:

Uncaught TypeError: Cannot read property ‘style’ of null
at HTMLDocument.main (main.js:40)
at fire (jquery-latest.js:3119)
at Object.fireWith [as resolveWith] (jquery-latest.js:3231)
at Function.ready (jquery-latest.js:3443)
at HTMLDocument.completed (jquery-latest.js:3474)

@James_Hibbard

Thanks a lot for your help, I would like to improve the code, but I want also to understand what I am doing and it makes me hard to understand javascript as I have no experience in this language yet.

It would be nice if you could give me some tips.

Thanks again in advice!

James_Hibbard · December 22, 2016, 2:45pm

Sure Please post a minimum runnable example for us to have a look at.

system · March 23, 2017, 9:45pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.