I'm unable to load different content for different screen sizes with JS

#1

First of all I’m so happy I found this forum, after CSSTricks forum was closed I didn’t know where to ask… til now that I found this one :slight_smile:
To be completely honest I had already posted in stackoverflow but couldn’t solve it neverthless, so I’m reposting here:
I’m trying to achive this: screen sizes greater then 600px to display a slider and for less than 600px to display the same content without the slider. I’m using Bootstrap 4 and Wordpress. For some reason my code isn’t returning anything at all. Here is the code of the wordpress template:

<div class="container-fluid custom-bg-color" id="seccion-portafolio">
<div class="row">
    <div class="col">
      <div id="portafolio-variable-content">
      </div>
    </div>
  </div> 
</div>
<script>

(function () {

var viewportWidth = $(window).width();
if (viewportWidth > 600) {    
$('#portafolio-variable-content').load('slider.php');
$('#portafolio-variable-content').html("<p>Another test</p>")

} else {    
$('#portafolio-variable-content').load('no-slider-content.php');
}    
}());
</script>
#2

Try running console.log() in the JS as that might really help you find out the culprit. And also, you can do all that stuff via css.

I personally would use css and css-animations

#3

Thanks!! Well the reason I’m not doing it with css is that I dont want to just hide it but actually dont load the other content.

Try running console.log()
on it :slight_smile:

Ok I’m getting the following error 231313_21062020

#4

If I move the script tag that cointns the JS code below <?php get_footer(); ?>"
I get a slightly different error:
TypeError: $(...).load is not a function

#5

You’re assuming that the view port width is going to stay the same for the user the entire time they are looking at your page. I’m not sure this is a safe assumption.

#6

Good point, for example if they rotate the mobile screen… Googled and maybe using something like:

$(window).resize(function () {
    var width = $(window).width();
    if (width < 768) {
        $("#the_dropdown").html("<p>Less than 768</p>");
    } else {
        $("#the_dropdown").html("<p> More than 768</p>");
    }
});
$(window).trigger('resize');

Edit: Updated my code to:

<script>

$(window).resize(function () {
    var width = $(window).width();
    if (width < 600) {
        $("#portafolio-variable-content").load("slider.php");
        console.log()
    } else {
      console.log()
        $("#portafolio-variable-content").load("slider.php");
    }
});
$(window).trigger('resize');
</script>

I’m getting the same earlier error though, I’m using the same slider.php only to see if it works

#7

This solved the error:
https://code.jquery.com/jquery-3.2.1.slim.min.js is the slim edition of jquery, which does not include ajax. slim is the default version included in an Express server. Use the full version of jquery at https://code.jquery.com/jquery-3.2.1.min.js
Now I have another… let me see if I figure it out!!

#8

Ok Solved that 404 error but now I’m getting a 500 code error
Request URL:http://localhost/tomastestart/wp-content/themes/tomastestart/slider.php
Request Method:GET
Remote Address:[::1]:80
Status Code:
500

Maybe is because I’m trying to load a section and not the whole page… if yes what should be the correct way to do so?