SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Returning method ?

    Hello folks,

    I'm trying to return a value into minSlide: key inside bxSlider() method.
    Code:
    	<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.
    I Love coding...
    Don't click this link.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

    Code JavaScript:
    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()
            });
        });
    });
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Ah yeah, I didn't notice this:

    Code:
    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. #5
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @chris.upjohn ;
    Hope you will help me fix this dude.
    It's good but not working.

    Thanks in advance.

    @Pullo ;

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

    It should remove slide or image one by one when the browser is minimize, according to if and else condition.
    I Love coding...
    Don't click this link.

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    If we look at the console we see:

    Code:
    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:

    HTML Code:
    <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>
    Code JavaScript:
    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. #8
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @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.
    I Love coding...
    Don't click this link.

  9. #9
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @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
    I Love coding...
    Don't click this link.

  10. #10
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    If you need something dynamic Pullo's approach can be converted to something like the following.

    Code JavaScript:
    $(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.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  11. #11
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @chris.upjohn ;

    http://myonlinesmallgroup.com/warren...der/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.
    I Love coding...
    Don't click this link.

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    You're missing a comma on line 85:

    slideWidth : 250

    should be:

    slideWidth : 250,

  13. #13
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I Love coding...
    Don't click this link.

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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. #15
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @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.
    I Love coding...
    Don't click this link.

  16. #16
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, I'll use index4.htm
    I Love coding...
    Don't click this link.

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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. #18
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @Pullo

    Thanks, It's very helpful.
    No index4.htm is temporary.
    I really needed it to make it work without pressing the f5.
    I Love coding...
    Don't click this link.

  19. #19
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @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.
    I Love coding...
    Don't click this link.

  20. #20
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Tried on double sliders,

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

    But I will try to figure it out.
    I Love coding...
    Don't click this link.

  21. #21
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @Pullo ;
    @ralph.m ;
    @ronpat ;
    @chris.upjohn ;

    The not so DRY method works, I don't care if it's wet.
    http://myonlinesmallgroup.com/warren...der/index7.htm

    Thank you, ralph.m (The original adviser of bxSlider)
    Thank you, ronpat (The very good hint, without his hint I might not proceed tweaking bxSlider)
    Thank you, chris.upjohn (Thanks dude)
    Thank you, pullo (The Angel)

    Without you this will take me 1 month to tweak it alone.

    Thanks guys!!!
    I Love coding...
    Don't click this link.

  22. #22
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hey man,

    Thanks for the thanks

    I had a look at the code from your final version and felt compelled to rewrite it somewhat to reflect a couple of best practices.

    Here's what I came up with:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
      <base href="http://myonlinesmallgroup.com/warren/bxslider/">
        <meta charset="utf-8">
        <title>Testing bxSlider</title>
        <link href="jquery.bxslider.css" rel="stylesheet" />
        <link href="css/cw.css" rel="stylesheet" />
        <style>
          h2{ text-align: center }
          .cw-wrapper{ padding-top: 60px; }
        </style>
      </head>
    
      <body>
        <h2>Tweaking bxSlider...</h2>
    
        <div class="cw-wrapper">
          <ul class="bxslider1">
            <li><img src="images/chocolate.jpg" /></li>
            <li><img src="images/cotton.jpg" /></li>
            <li><img src="images/marble.jpg" /></li>
            <li><img src="images/icecream.jpg" /></li>
            <li><img src="images/chocolate.jpg" /></li>
            <li><img src="images/cotton.jpg" /></li>
            <li><img src="images/marble.jpg" /></li>
            <li><img src="images/icecream.jpg" /></li>
            <li><img src="images/chocolate.jpg" /></li>
            <li><img src="images/cotton.jpg" /></li>
            <li><img src="images/marble.jpg" /></li>
            <li><img src="images/icecream.jpg" /></li>
          </ul>    
        </div>
    
        <div class="cw-wrapper">
          <ul class="bxslider2">
            <li><img src="images/chocolate.jpg" /></li>
            <li><img src="images/cotton.jpg" /></li>
            <li><img src="images/marble.jpg" /></li>
            <li><img src="images/icecream.jpg" /></li>
            <li><img src="images/chocolate.jpg" /></li>
            <li><img src="images/cotton.jpg" /></li>
            <li><img src="images/marble.jpg" /></li>
            <li><img src="images/icecream.jpg" /></li>
            <li><img src="images/chocolate.jpg" /></li>
            <li><img src="images/cotton.jpg" /></li>
            <li><img src="images/marble.jpg" /></li>
            <li><img src="images/icecream.jpg" /></li>
          </ul>    
        </div>
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="jquery.bxslider.js"></script>
        <script>
          (function(){
            function getSliderOpts(){
              return {
                minSlides   : getMinSlides(),
                maxSlides   : 4,
                slideMargin : 4,
                slideWidth  : 250
              }
            } 
      
            function getMinSlides() {
                var width = $(window).width(),
                    noSlides = 3;
             
                if (width < 583) {
                  noSlides = 2;
                } else if (width > 942) {
                  noSlides = 4;
                } 
                
                return noSlides;
            }
            
            function reloadSliders(){
              slider1.reloadSlider(getSliderOpts());
              slider2.reloadSlider(getSliderOpts());
            }
         
            var slider1 = $('.bxslider1').bxSlider(getSliderOpts()),
                slider2 = $('.bxslider2').bxSlider(getSliderOpts()),
                doit;
            
            $(window).resize(function() {
              clearTimeout(doit);
              doit = setTimeout(reloadSliders, 200);            
            });
          })();
        </script>
      </body>
    </html>
    If you have any questions, just let me know.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •