Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post

    Conflicting jQuery help

    Useful Links


    My Live Version: - https://tornhq.com/WorkingOn/Account.../TestPage.html
    Live Version on JSFiddle - http://jsfiddle.net/jhQjw/1/
    Note that the above links have different outcomes.
    malihu Custom Scrollbar plugin - http://manos.malihu.gr/tuts/jquery_c...scrollbar.html

    Everything on my live version works apart from the custom, multiple scroll bar, of which does work, however all my attempts have failed to implement it into an accordion.

    From line 38 to 59, you will see the filler information to make this container overly big for testing purposes;

    Code:
            <div class="content">
                <p>Lorem ipsum dolor sit amet. Aliquam erat volutpat.</p>
                <p>filler</p>
                <p>filler</p>
                <p>filler</p>
                <p>filler</p>
                <p>filler</p>
                <p>filler</p>
                <p>filler</p>
                <p>filler</p>
                <p>filler</p>
                <p>filler</p>
                <p>filler</p>
                <p>filler</p>
                <p>filler</p>
                <p>filler</p>
                <p>filler</p>
                <p>filler</p>
                <p>filler</p>
                <p>filler</p>
                <p>the end.</p>
            </div>
    However, if your on the JSFiddle version, and are on Google Chrome alike myself (I have yet to test other browsers, all these errors could be on them too), you will see a scroll bar, however on the browser version, you will see that the scroll bar is on the Menu 1 section and no scroll bar shoes for the Menu 2 section.

    I could really do with some help implementing the jQuery Custom Scroll Bar into my jQuery Accordion with tab switchers and thank you for your help and time spend.

    Best Regards, Tim
    Last edited by MrTIMarshall; 03-27-2013 at 04:36 PM.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    well you currently have :

    Code:
    		(function($){
    			$(window).load(function(){
    				$(".ScrollArea").mCustomScrollbar();
    			});
    		})(jQuery);
    int he bottom of the page, but ther is no element on the page with a class of ScrollArea

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Quote Originally Posted by DanInMa View Post
    well you currently have :

    Code:
    		(function($){
    			$(window).load(function(){
    				$(".ScrollArea").mCustomScrollbar();
    			});
    		})(jQuery);
    int he bottom of the page, but ther is no element on the page with a class of ScrollArea
    Sorry, I have made a new file, I kept changing things on that one to try and resolve the problem, of which is talking days to try and find a solution.

    Best Regards,
    Tim

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    load your page: https://tornhq.com/WorkingOn/Account.../TestPage.html

    expand your menu item #2

    now resize your browser. Scrollbar appears. That's neat. Why? not sure what the conflict is. Copied your code and ran it offline, same thing.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    you have a conflict, combine your accordian to the window load:

    Code:
    		(function($){
    			$(window).load(function(){
    				$(".content").mCustomScrollbar();
    				
    				$('#accordion .content').hide();
    				$('#accordion .Category:first').addClass('active').next().slideDown('slow');
    				$('#accordion .Category').click(function() {
    					if($(this).next().is(':hidden')) {
    						$('#accordion .Category').removeClass('active').next().slideUp('slow');
    						$(this).toggleClass('active').next().slideDown('slow');
    					}
    				});
    				$('#nav').find('a').click(function(e) {
    					e.preventDefault();
    					$(this.hash).show().siblings().hide();
    				}).filter(':first').click();
    			});
    		})(jQuery);
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #6
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Quote Originally Posted by harbingerOTV View Post
    you have a conflict, combine your accordian to the window load:

    Code:
    		(function($){
    			$(window).load(function(){
    				$(".content").mCustomScrollbar();
    				
    				$('#accordion .content').hide();
    				$('#accordion .Category:first').addClass('active').next().slideDown('slow');
    				$('#accordion .Category').click(function() {
    					if($(this).next().is(':hidden')) {
    						$('#accordion .Category').removeClass('active').next().slideUp('slow');
    						$(this).toggleClass('active').next().slideDown('slow');
    					}
    				});
    				$('#nav').find('a').click(function(e) {
    					e.preventDefault();
    					$(this.hash).show().siblings().hide();
    				}).filter(':first').click();
    			});
    		})(jQuery);
    This may be the case, however I have tried changing the scroll area to have a different class name and this did not work either so as well as this being a problem, I think there is one elsewhere too unless the on load caused problems to the scroll div inside?

    How can I resolve this please?

  • #7
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    since you are hiding the content of the accordion before the scroll bar is called, it has no idea what height it is.

    I couldn't get the 'update' to work so here's a different approach.

    When you click the toggler, it destroys all the scroll bars. When the accordion slides down, it creates them new again.

    Code:
    	<script>
    		(function($){
    			$(window).load(function(){
    				$('#accordion .content').hide();
    				$('#accordion .Category:first').addClass('active').next().slideDown('slow');
    				$('#accordion .Category').click(function() {
    					if($(this).next().is(':hidden')) {
    						$('.content').mCustomScrollbar("destroy");
    						$('#accordion .Category').removeClass('active').next().slideUp('slow');
    						$(this).toggleClass('active').next().slideDown('slow', function(){
    							$(".content").mCustomScrollbar();
    						});
    					}
    				});
    				$('#nav').find('a').click(function(e) {
    					e.preventDefault();
    					$(this.hash).show().siblings().hide();
    				}).filter(':first').click();
    			});
    		})(jQuery);
    	</script>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #8
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    The new jQuery code you have provided works brilliantly for the accordion, however I would like to use the jQuery custom scroll bar in other locations such as the tab contents and other places outside of this section. How can I implement this to work everywhere?
    Last edited by MrTIMarshall; 03-28-2013 at 09:36 PM.


  •  

    Posting Permissions

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