SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with Javascript code

    Everything seems to be working properly but I cannot get the nested accordion to load collapsed instead of open. Please let me know what I'm missing and how to fix it. Thanks

    Code javascript:
    (function($) {
    //$.fn.orphans - [url]http://www.mail-archive.com/jquery-en@googlegroups.com/msg43851.html[/url]
    $.fn.orphans = function(){
    var txt = [];
    this.each(function(){$.each(this.childNodes, function() {
      if (this.nodeType == 3 && $.trim(this.nodeValue)) txt.push(this)})}); return $(txt);};
     
    $.fn.accordion = function(options) {
        var o = $.extend({}, $.fn.accordion.defaults, options);
     
        return this.each(function() {
          var containerID = o.container ? '#' + this.id : '', objID = o.objID ? o.objID : o.obj + o.objClass,
            Obj = o.container ? containerID + ' ' + objID : '#' + this.id,
            El = Obj + ' ' + o.el,
            hTimeout = null; 
     
          // build
          if (o.head) $(Obj).find(o.head).addClass('h');
          if (o.head) {
            if ($(El).next('div:not(.outer)').length) {$(El).next('div:not(.outer)').wrap('<div class="outer" />');} 
            $(Obj + ' .h').each(function(){
                var $this = $(this);
                if (o.wrapper == 'div' && !$this.parent('div.new').length) {$this.add( $this.next('div.outer') ).wrapAll('<div class="new"></div>');}
            }); 
          }
          $(El).each(function(){
              var $node = $(this);
              if ($node.find(o.next).length || $node.next(o.next).length) {
                if ($node.find('> a').length) {
                    $node.find('> a').addClass("trigger").css('display', "block");
                } else {
                    var anchor = '<a class="trigger" style="display:block" href="#" />'
                    if (o.elToWrap) {
                      var $t = $node.orphans(), $s = $node.find(o.elToWrap);
                      $t.add($s).wrapAll(anchor);
                    } else {
                      $node.orphans().wrap(anchor);
                    }
                }
              } else {
                $node.addClass('last-child');
                if (o.lastChild && $node.find('> a').length) {$node.find('> a').addClass("trigger").css('display', "block");}
              }
          });
          // init state
          $(El + ' a.trigger').closest(o.wrapper).find('> ' + o.next).not('.shown').hide().closest(o.wrapper).find('a.open').removeClass('open').data('state', 0);
          if (o.activeLink) {
              var loc,
                  fullURL = window.location.href,
                  path = window.location.pathname.split( '/' ),
                  page = path[path.length-1];
                  (o.uri == 'full') ? loc = fullURL : loc = page;
              $(Obj + ' a:not([href $= "#"])[href$="' + loc + '"]').addClass('active').parent().attr('id', 'current').closest(o.obj).addClass('current');
              if (o.shift && $(Obj + ' a.active').closest(o.wrapper).prev(o.wrapper).length) {
                var $currentWrap = $(Obj + ' a.active').closest(o.wrapper),
                    $curentStack = $currentWrap.nextAll().andSelf(),
                    $siblings = $currentWrap.siblings(o.wrapper),
                    $first = $siblings.filter(":first");
                if (o.shift == 'clicked' || (o.shift == 'all' && $siblings.length)) {
                    $currentWrap.insertBefore($first).addClass('shown').siblings(o.wrapper).removeClass('shown');
                }
                if (o.shift == 'all' && $siblings.length > 1) {$curentStack.insertBefore($first);}
              }
          }
          if (o.initShow) {
            $(Obj).find(o.initShow).show().addClass('shown')
              .parents(Obj + ' ' + o.next).show().addClass('shown').end() 
              .parents(o.wrapper).find('> a.trigger, > ' + o.el + ' a.trigger').addClass('open').data('state', 1); 
              if (o.expandSub) {$(Obj + ' ' + o.initShow).children(o.next).show().end().find('> a').addClass('open').data('state', 1 );} 
          }
     
     
          // event
          if (o.event == 'click') {
              var ev = 'click';
          } else  {
              if (o.focus) {var f = ' focus';} else {var f = '';}
              var ev = 'mouseenter' + f;
          }
          var scrollElem;
          (typeof scrollableElement == 'function') ? (scrollElem = scrollableElement('html', 'body')) : (scrollElem = 'html, body');
     
          // The event handler is bound to the "accordion" element
          // The event is filtered to only fire when an <a class="trigger"> was clicked on.
          $(Obj).delegate('a.trigger', ev, function(ev) {
              var $thislink = $(this),
                  $thisWrapper = $thislink.closest(o.wrapper),
                  $nextEl = $thisWrapper.find('> ' + o.next),
                  $siblings = $thisWrapper.siblings(o.wrapper),
                  $trigger = $(El + ' a.trigger'),
                  $shownEl = $thisWrapper.siblings(o.wrapper).find('>' + o.next + ':visible'),
                  shownElOffset;
                  $shownEl.length ? shownElOffset = $shownEl.offset().top : shownElOffset = false;
     
              function action(obj) {
                 if (($nextEl).length && $thislink.data('state') && (o.collapsible)) {
                      $thislink.removeClass('open');
                      $nextEl.filter(':visible')[o.hideMethod](o.hideSpeed, function() {$thislink.data('state', 0);});
                  }
                  if (($nextEl.length && !$thislink.data('state')) || (!($nextEl).length && $thislink.closest(o.wrapper).not('.shown'))) {
                      if (!o.standardExpansible) {
                        $siblings.find('> a.open, >'+ o.el + ' a.open').removeClass('open').data('state', 0).end()
                        .find('> ' + o.next + ':visible')[o.hideMethod](o.hideSpeed);
                        if (shownElOffset && shownElOffset < $(window).scrollTop()) {$(scrollElem).animate({scrollTop: shownElOffset}, o.scrollSpeed);}
                      }
                      $thislink.addClass('open');
                      $nextEl.filter(':hidden')[o.showMethod](o.showSpeed, function() {$thislink.data('state', 1);});
                  }
                  if (o.shift && $thisWrapper.prev(o.wrapper).length) {
                    var $thisStack = $thisWrapper.nextAll().andSelf(),
                        $first = $siblings.filter(":first");
                    if (o.shift == 'clicked' || (o.shift == 'all' && $siblings.length)) {
                      $thisWrapper.insertBefore($first).addClass('shown').siblings(o.wrapper).removeClass('shown');
                    }
                    if (o.shift == 'all' && $siblings.length > 1) {$thisStack.insertBefore($first);}
                  }
              }
              if (o.event == 'click') {
                  action($trigger); 
                  if ($thislink.is('[href $= "#"]')) {
                      return false;
                  } else {
                      if ($.isFunction(o.retFunc)) {
                        return o.retFunc($thislink) 
                      } else {
                        return true;
                      }
                  }
              }
              if (o.event != 'click') {
                  hTimeout = window.setTimeout(function() {
                      action($trigger);
                  }, o.interval);        
                  $thislink.click(function() {
                      $thislink.blur();
                      if ($thislink.attr('href')== '#') {
                          $thislink.blur();
                          return false;
                      }
                  });
              }
          });
          if (o.event != 'click') {$(Obj).delegate('a.trigger', 'mouseleave', function() {window.clearTimeout(hTimeout); });}
     
          /* -----------------------------------------------
          // [url]http://www.learningjquery.com/2007/10/improved-animated-scrolling-script-for-same-page-links:[/url]
          -------------------------------------------------- */
          function scrollableElement(els) {
            for (var i = 0, argLength = arguments.length; i < argLength; i++) {
              var el = arguments[i],
                  $scrollElement = $(el);
              if ($scrollElement.scrollTop() > 0) {
                return el;
              } else {
                $scrollElement.scrollTop(1);
                var isScrollable = $scrollElement.scrollTop() > 0;
                $scrollElement.scrollTop(0);
                if (isScrollable) {
                  return el;
                }
              }
            };
            return [];
          }; 
          /* ----------------------------------------------- */
    });};
    $.fn.accordion.defaults = {
      container : false, // {true} if the plugin is called on the closest named container, {false} if the pligin is called on the accordion element
      obj : 'ul', // the element which contains the accordion - 'ul', 'ol', 'div' 
      objClass : '.accordion', // the class name of the accordion - required if you call the accordion on the container
      objID : '', // the ID of the accordion (optional)
      wrapper :'li', // the common parent of 'a.trigger' and 'o.next' - 'li', 'div'
      el : 'li', // the parent of 'a.trigger' - 'li', '.h'
      head : '', // the headings that are parents of 'a.trigger' (if any)
      next : 'ul', // the collapsible element - 'ul', 'ol', 'div'
      initShow : '', // the initially expanded section (optional)
      expandSub : true, // {true} forces the sub-content under the 'current' item to be expanded on page load
      showMethod : 'slideDown', // 'slideDown', 'show', 'fadeIn', or custom
      hideMethod : 'slideUp', // 'slideUp', 'hide', 'fadeOut', or custom
      showSpeed : 400,
      hideSpeed : 800,
      scrollSpeed : 600, //speed of repositioning the newly opened section when it is pushed off screen.
      activeLink : true, //{true} if the accordion is used for site navigation
      event : 'click', //'click', 'hover'
      focus : true, // it is needed for  keyboard accessibility when we use {event:'hover'}
      interval : 400, // time-interval for delayed actions used to prevent the accidental activation of animations when we use {event:hover} (in milliseconds)
      collapsible : true, // {true} - makes the accordion fully collapsible, {false} - forces one section to be open at any time
     
      standardExpansible : false, //if {true}, the functonality will be standard Expand/Collapse without 'accordion' effect
      lastChild : true, //if {true}, the items without sub-elements will also trigger the 'accordion' animation
      shift: false, // false, 'clicked', 'all'. If 'clicked', the clicked item will be moved to the first position inside its level, 
                    // If 'all', the clicked item and all following siblings will be moved to the top
      elToWrap: null, // null, or the element, besides the text node, to be wrapped by the trigger, e.g. 'span:first'
      uri : 'full', // 
      retFunc: null //
    };
    /* ---------------------------------------------
    Feel free to remove the following code if you don't need these custom animations.
    ------------------------------------------------ */
    //credit: [url]http://jquery.malsup.com/fadetest.html[/url]
    $.fn.slideFadeDown = function(speed, callback) { 
      return this.animate({opacity: 'show', height: 'show'}, speed, function() { 
        if (jQuery.browser.msie) { this.style.removeAttribute('filter'); }
        if (jQuery.isFunction(callback)) { callback(); }
      }); 
    }; 
    $.fn.slideFadeUp = function(speed, callback) { 
      return this.animate({opacity: 'hide', height: 'hide'}, speed, function() { 
        if (jQuery.browser.msie) { this.style.removeAttribute('filter'); }
        if (jQuery.isFunction(callback)) { callback(); }
      }); 
    }; 
    /* --- end of the optional code --- */
    })(jQuery);
    ///////////////////////////
    // The plugin can be called on the ID of the accordion element or on the ID of its closest named container.
    // If the plugin is called on a named container, we can initialize all the accordions residing in a given section with just one call.
    // EXAMPLES:
    /* ---
    $(function() {
    // If the closest named container = #container1 or the accordion element is <ul id="subnavigation">:
    /// Standard nested lists:
      $('#container1').accordion(); // we are calling the plugin on the closest named container
      $('#subnavigation').accordion({container:false}); // we are calling the plugin on the accordion element
      // this will expand the sub-list with "id=current", when the accordion is initialized:
      $('#subnavigation').accordion({container:false, initShow : "#current"});
      // this will expand/collapse the sub-list when the mouse hovers over the trigger element:
      $('#container1').accordion({event : "hover", initShow : "#current"});
     
    // If the closest named container = #container2
    /// Nested Lists + Headings + DIVs:
      $('#container2').accordion({el: '.h', head: 'h4, h5', next: 'div'});
      $('#container2').accordion({el: '.h', head: 'h4, h5', next: 'div', initShow : 'div.outer:eq(0)'});
     
    /// Nested DIVs + Headings:
      $('#container2').accordion({obj: 'div', wrapper: 'div', el: '.h', head: 'h4, h5', next: 'div.outer'});
      $('#container2').accordion({objID: '#acc2', obj: 'div', wrapper: 'div', el: '.h', head: 'h4, h5', next: 'div.outer', initShow : '.shown', shift: 'all'});
    });
     
    /// We can globally replace the defaults, for example:
      $.fn.accordion.defaults.initShow = "#current";
    --- */
    /// Example options for Hover Accordion:
    /* ---
    $.fn.accordion.defaults.container=false;
    $.fn.accordion.defaults.event="hover";
    $.fn.accordion.defaults.focus=false; // Optional. If it is possible, use {focus: true}, since {focus: false} will break the keyboard accessibility
    $.fn.accordion.defaults.initShow="#current";
    $.fn.accordion.defaults.lastChild=false;
    --- */
    Last edited by paul_wilkins; Mar 6, 2013 at 18:54. Reason: Add javascript tags

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Can you please provide a test page the demonstrates the problem that you are having?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Can you please provide a test page the demonstrates the problem that you are having?
    yea, the page being built can be found here: http://www.clsimage.me/uniform.html

    When the page loads I need it to be collapsed...Thanks for the help in advance!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by besman View Post
    yea, the page being built can be found here: http://www.clsimage.me/uniform.html

    When the page loads I need it to be collapsed...Thanks for the help in advance!
    The page doesn't seem to be there anymore. Have you resolved the problem?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    The page doesn't seem to be there anymore. Have you resolved the problem?
    I have not figured it out yet. Sorry, we have been moving our host this week so it has been on and off. It should be back up and working now. Let me know if you get it figured out! Thanks again for checking!

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi there,

    In line 53 of your code, if you change this:

    Code JavaScript:
    $("#acc1").accordion({
      el: ".h", 
      head: "h4, h5", 
      next: "div", 
      initShow : "div.outer:eq(1)"
    });

    into this:

    Code JavaScript:
    $("#acc1").accordion({
      el: ".h", 
      head: "h4, h5", 
      next: "div"
    });

    everything will load collapsed.


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
  •