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

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>

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

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

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

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.

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

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

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?