Returning method?

JavaScript
1

Hello folks,

I’m trying to return a value into minSlide: key inside bxSlider() method.


	<script>
		<!-- Detect Viewport -->
		//Greater than 934 4 boxes
		//Less 934 3 boxes
		//Less than 583 2 boxes
			
		function adjustStyle(width) {
		    var width = parseInt(width);
			//document.getElementById("vwsize").innerHTML = width;
			if ((width > 583) AND (width < 943)) {
				return 3;
			} else if (width < 583) {
				return 2;
			} else if (width > 942) {
				return 4;
			}
		}
	
		$(document).ready(function(){
		    adjustStyle($(this).width());
			var minImages = $(window).resize(function() {
		    					adjustStyle($(this).width());
							})
			
			$('.bxslider').bxSlider({
				slideWidth: 500,
				minSlides: minImages,
				maxSlides: 20,
				slideMargin: 20,
			});
		});
	</script>

Unfortunately it’s not working.
So what I had done wrong?

Thanks in advance.

2

Hi Warren,

Try moving the function declaration to the $(document).ready() callback.
If that doesn’t work, can you post a link to a page where I can see this in action?

3

What you’re trying to accomplish isn’t possible with the above as events can’t return values to a variable directly, instead what you should be doing is using the reloadSlider method that bxSlider has built into it that allows for real time updates. See the following for an example.

function adjustStyle() {
    var width = $(window).width();
    
    if (width > 583 && width < 943) {
        return 3;
    } else if (width < 583) {
        return 2;
    } else if (width > 942) {
        return 4;
    }
}

$(function() {
    var slider = $('.bxslider').bxSlider({
        minSlides   : adjustStyle(),
        maxSlides   : 20,
        slideMargin : 20,
        slideWidth  : 500
    });
    
    $(window).on('resize', function() {
        slider.reloadSlider({
            minSlides: adjustStyle()
        });
    });
});
4

Ah yeah, I didn’t notice this:

var minImages = $(window).resize(function() {
  adjustStyle($(this).width());
})

I just thought he was trying to return a value from the function to the slider initialization.
That’ll teach me to pay better attention.
Nice one!

5

@chris_upjohn ;
Hope you will help me fix this dude.
It’s good but not working.

Thanks in advance.

@Pullo ;

http://myonlinesmallgroup.com/warren/bxslider/index4.htm

It should remove slide or image one by one when the browser is minimize, according to if and else condition.

6

The reason it’s not working is because you have two sliders on your page, the example code only supports one. If you disable one for now it should start working.

7

If we look at the console we see:

Uncaught TypeError: Object [object Object] has no method 'reloadSlider'

I googled that error message and found this: https://github.com/wandoledzep/bxslider-4/issues/95

So, it appears we have to use separate variables for each instance of the slider.

So that you get the idea, a not very DRY version would look like this:

<div class="cw-wrapper">
  <ul class="bxslider1">
    <li><img src="images/chocolate.jpg" /></li>
    ...
    <li><img src="images/icecream.jpg" /></li>
  </ul>		
</div>
<br>
<div class="cw-wrapper">
  <ul class="bxslider2">
    <li><img src="images/chocolate.jpg" /></li>
    ...
    <li><img src="images/icecream.jpg" /></li>
  </ul>
</div>

var slider1 = $('.bxslider1').bxSlider({
  minSlides   : adjustStyle(),
  maxSlides   : 4,
  slideMargin : 20,
  slideWidth  : 250
});

var slider2 = $('.bxslider2').bxSlider({
  minSlides   : adjustStyle(),
  maxSlides   : 4,
  slideMargin : 20,
  slideWidth  : 250
});

$(window).on('resize', function() {
  slider1.reloadSlider({
    minSlides: adjustStyle()
  });
  slider2.reloadSlider({
    minSlides: adjustStyle()
  });
});

See if you can get that to work, if so, I’m sure we can clean it up a little.

@Chris - any thoughts?

Edit:

Oops, beaten to it

8

@chris_upjohn ;
Ooops sorry, I tried yours again and refresh the page on various browser sizes and it works!!!

@Pullo ;
Thanks for your effort dude, I really appreciate it.

9

@Pullo ;
@chris_upjohn ;

Is there any way without refreshing the page?
It should automatically remove those slide one by one when I gradually minimize the browser?
It’s currently doing is, it gradually decrease the size of the image not remove them one by one according to if and else condition.

Thanks in advance for the input

10

If you need something dynamic Pullo’s approach can be converted to something like the following.

$(function() {
    var sliders = [];

    // Iterate through each slider on the page and store it in the sliders array
    $('.bxslider').each(function() {
        sliders.push($(this).bxSlider({
            minSlides   : adjustStyle(),
            maxSlides   : 20,
            slideMargin : 20,
            slideWidth  : 500
        }));
    });

    // Bind an event that listens for when the browser window is resized
    $(window).on('resize', function() {
        for (var i in sliders) {
            if (sliders.hasOwnProperty(i)) {
                sliders[i].reloadSlider({
                    minSlides: adjustStyle()
                });
            }
        }
    });
});

As for the issue at hand could you please update your page source so we can see what is happening.

11

@chris_upjohn ;

http://myonlinesmallgroup.com/warren/bxslider/index5.htm

It has bug I will try to figure out.

@Pullo ;
hellp me, lol

If this is CodeIgniter, I can figure this out easily but its JS lol.
I consider myself a junior to JS.

12

You’re missing a comma on line 85:

slideWidth : 250

should be:

slideWidth : 250,

13

@Pullo ;
http://myonlinesmallgroup.com/warren/bxslider/index5.htm

Added the comma.

14

Seems to work. Well done!

Edit:

Just reading back through the thread - is there anything else you need a hand with, or are we good?

15

@Pullo ;
Okay I’ll change my comments above.
It should auto refresh the page when if and else condition is meet,
and when a user gradually minimize the page.
So the user don’t need to press ‘f5’ on his keyboard.

Thanks in advance.

16

Thanks guys, I’ll use index4.htm

17

Hi Warren,

I was working on this when I saw you had replied that you will use a different version of your code.

So far I have managed to make a demo which works as you want with one slider.
It seems that adding a throttle to the resize event helped.

I don’t know how difficult this would be to apply to multiple sliders.

18

@Pullo

Thanks, It’s very helpful.
No index4.htm is temporary.
I really needed it to make it work without pressing the f5.

19

@Pullo

I check your demo. WOW!!!
Are you an angel?

Thanks dude, you really helped me, I wish I can help you too someday.

I will test on double sliders.

20

Tried on double sliders,

http://myonlinesmallgroup.com/warren/bxslider/index6.htm

But I will try to figure it out.