Menu icon Foundation

My Posts

  • NEW
  • Accordion Tabs

    By Pam Bifaro

    <div><ul><li>

    I'm using the Accordion tabs content in my site. The tab part works fine but when it converts to the accordion on small screen, all the panels open under the accordion links and not in between like an accordion should. I am trying to rebuild the home pag... (continued)


  • 2
    Replies
  • Orbit Slider

    By Pam Bifaro

    <div>

    By default the slider goers from right to left. I am trying to get the slide to go from left to right. Here is what I have in the page: &lt;!----------Orbit slider----------------------&gt; &nbsp; &lt;div class="grid-x fullWidth"&gt; &lt;div class="la... (continued)

    Last Reply by Pam Bifaro 5 months ago


  • 6
    Replies
  • Hide for medium down

    By Pam Bifaro

    <div>

    Is there a way to hide for medium down? I am trying to hide text and a button on orbit slides when the screen gets smaller then a tablet. On the small screens I only want to show the logo on the background slide. Or is there another way to make this trans... (continued)

    Last Reply by Pam Bifaro about 1 year ago




  • 1
    Reply
  • Linking WordPress blog to html blogroll

    By Pam Bifaro

    <script>

    I am building an html site using Foundation and I have an image slider that I need to populate with the most recent posts on our WordPress blog site. We were able to do this before see link here; http://www.thekimfoundation.org/ but to get this to work t... (continued)

    Last Reply by Pam Bifaro over 1 year ago



  • 3
    Replies
  • On hover effect

    By Pam Bifaro

    <li>

    I am converting a website to the Foundation platform and all is going great except that I am looking for a script for an on hover effect that I was able to use with bootstrap in the existing site here https://www.celebritystaff.com &nbsp;on the large butt... (continued)

    Last Reply by Pam Bifaro over 1 year ago




My Comments

Pam Bifaro commented on Sensaetions's post 3 months

I am looking for this same answer I have a question posted with code but no reply.
 
 
 <!-----------------------------TABACCORDION------------------------------>
 
<div class="tabs" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
 
  <div class="tabs-panel is-active" id="panel1">
    <div class="medium-2 columns">
   
    <ul class="tabs vertical" id="example-vert-tabs" data-tabs>
     
      <li class="tabs-title is-active tabOnebkgd btn1" style="text-align:left"><a href="#panel1v" aria-selected="true" class="TabText">FIND A JOB</a></li>
     
      <li class="tabs-title tabTwoBkgd btn2"><a href="#panel2v" class="TabText" style="text-align:left">FIND TALENT</a></li>
     
      <li class="tabs-title tabThreeBkgd btn3"><a href="#panel3v" class="TabText" style="text-align:left">FOR EMPLOYEES</a></li>
   
    </ul>
  
  </div>
 
 
 
<div class="medium-10 columns"> 
    
    
<div class="tabs-content vertical" data-tabs-content="example-vert-tabs">
     
<div class="tabs-panel is-active" id="panel1v">
 
 <div class="hide-for-small medium-5 large-5 columns">     
      <ul class="vertical dropdown menu kickOutMenu hide-for-small-only" data-dropdown-menu style="max-width:220px !important; text-align:left;">
  <li><a href="../why-work-with-celebrity.aspx" class="kickOutLinks">WHY WORK WITH CELEBRITY</a></li>
  <li><a href="../areas-of-specialization-employee.aspx" class="kickOutLinks">AREAS OF SPECIALIZATION</a></li>
                    <li><a href="../career-options.aspx" class="kickOutLinks">CAREEER OPTIONS</a></li>
                    <li><a href="../our-process-employee.aspx" class="kickOutLinks">OUR PROCESS</a></li>
                    <li><a href="../benefits.aspx" class="kickOutLinks">BENEFITS</a></li>
                    <li><a href="../candidate-newsletter.aspx" class="kickOutLinks">OUTSTANDING OPPORTUNITIES NEWSLETTER</a></li>
</ul>                     
 </div> 
 
             <!-- Find A Job Form -->
<div class="row">
<div class="small-12 medium-5 large-5 columns">
<div class="Form1">
<p class="RedHeader" align="center">Find Jobs</p>
      <div id="Formcontent_main" class="BodyCopy" >
                <!-- start job search -->
<div id="jobsearchdiv" style="display: none;">
    <input type="text" id="txtQuery" placeholder="Job Title or Keyword" />
    <input type="text" id="txtLocation" placeholder="City, State or Zipcode" />
    <button type="button" class="button" onclick="jobSearch()">SEARCH</button>
    <label id="errorControl" name="errorControl"></label>
</div>
<div id="jobsearchnotfound" style="display: none; color: inherit; text-align: center;">
    Oops! Something went wrong.
    <br />
    Job Search is currently unavailable.<br /><br />
</div>
<!-- end job search -->
                  </div>
                  </div>
        </div>
</div>
<!-- end of Find A Job form -->
 
 
<!---------------------RED Icons---------------------------->                    
<div class="row">
<div class="hide-for-small-only medium-12 large-12 columns" style="margin-top:120px;">
  <div class="hide-for-small medium-2 large-2 columns float-right"><a href="/Apply-Online.aspx" target="_blank"><img src="../img/design/images/aol-red.png" alt="Apply Online" class="show-for-large-up"></a>
  </div>
  <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../Videos/Videos.aspx"><img src="../img/button-icons-hp.png" alt="Videos" class="show-for-large-up"></a>
 </div> 
 <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../job-search-tips.aspx"><img src="../img/design/images/jst-red.png" alt="Job Search Tips" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../interview-tips.aspx"><img src="../img/design/images/interview-red.png" alt="Interview Tips" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../resume-recommendations.aspx"><img src="../img/design/images/resume-red.png" alt="Resume Recommendations" class="show-for-large-up"></a>
 </div>
</div> 
</div>                     
 <!---------------------RED Icons---------------------------->
</div>
  
  
  
  
 
  <div class="tabs-panel" id="panel2v">
     <div class="hide-for-small medium-5 large-5 columns">  
       <ul class="vertical dropdown menu kickOutMenu2 hide-for-small-only" data-dropdown-menu style="max-width: 350px; text-align:left;">
  <li><a href="../why-partner-with-celebrity.aspx" class="kickOutLinks">WHY PARTNER WITH CELEBRITY</a></li>
  <li><a href="../areas-of-specialization-client.aspx" class="kickOutLinks">AREAS OF SPECIALIZATION</a></li>
                    <li><a href="../staffing-solutions.aspx" class="kickOutLinks">STAFFING SOLUTIONS</a></li>
                    <li><a href="../our-process-client.aspx" class="kickOutLinks">OUR PROCESS</a></li>
                    <li><a href="../request-talent.aspx" class="kickOutLinks">REQUEST TALENT</a></li>
                    <li><a href="../online-timecard-approval.aspx" class="kickOutLinks">ONLINE TIMECARD APPROVAL</a></li>
                    <li><a href="../client-newsletter.aspx" class="kickOutLinks">TOP TALENT NEWSLETTER</a></li>
</ul>  
                    
  </div>
  
  
   <!-- Find Talent Form --> 
<div class="row">
<div class="small-12 medium-5 large-5 columns">                 
      <div class="Form1">
      <div class="OrangeHeader" id="FindTalent" style="padding-bottom:5px;">Find Talent</div>
     <p class="FormText"><strong>Have a need for an employee?</strong> Search our network of exceptional candidates or contact us to learn about additional candidates not featured online.</p>
   <div id="staffSearch">
 
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server"/>
<p>
<Aureus:CandidateSearchBox runat="server" ID="candidateSearchBox1" ButtonText="BEGIN STAFF SEARCH" CssClass="Search ButtonOrange" RedirectUrl="~/Employers/Results.aspx?wb={0}&pos={1}" IsInitializeWithDivision="true" />
</p>
<p class="FormText">Or, <a href="/request-talent.aspx" class="redBodyLink">submit your staffing request online</a> and one of our professionals will start working on your search right away.</p>
 
</div>
</div>
</div>
</div>
        
        <!-- end of Find Talent Form -->
                      
                    
<!---------------------Orange Icons---------------------------->                    
<div class="row">
<div class="hide-for-small-only medium-12 large-12 columns float-right" style="margin-top:-35px;">
   <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../Videos/Videos.aspx"><img src="../img/button-icons-hp.png" alt="Videos" class="show-for-large-up"></a>
 </div> 
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../employment-trends.aspx"><img src="../img/design/images/et-orange.png" alt="Employment Trends" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../interview-tips-client.aspx"><img src="../img/design/images/it-orange.png" alt="Interview Tips" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../professional-affiliations.aspx"><img src="../img/design/images/pa-orange.png" alt="Professional Affiliations" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../our-clients-say-it-best.aspx"><img src="../img/design/images/ocsib-orange.png" alt="Our Clients Say It Best" class="show-for-large-up"></a>
 </div>
 
 
          </div>
                    </div>   
                    
 <!---------------------orange Icons---------------------------->              
  </div>
 
 
 
 
 
 
  <div class="tabs-panel" id="panel3v">
    <div class="hide-for-small medium-5 large-5 columns">  
        <ul class="vertical dropdown menu kickOutMenu3 hide-for-small-only" data-dropdown-menu style="max-width: 450px; text-align:left">
  <li><a href="../starting-your-assignment.aspx" class="kickOutLinks">STARTING YOUR ASSIGNMENT</a></li>
  <li><a href="../pay-benefits.aspx" class="kickOutLinks">PAY & BENEFITS</a></li>
                    <li><a href="../online-timecard-submittal.aspx" class="kickOutLinks">ONLINE TIMECARD SUBMITTAL</a></li>
                    <li><a href="../employee-handbook.aspx" class="kickOutLinks">EMPLOYEE HANDBOOK</a></li>
                     <li><a href="../I-9.aspx" class="kickOutLinks">COMPLETING YOUR I-9</a></li>
</ul>  
      </div>              
<!-- Login form -->
<div class="row">
<div class="small-12 medium-5 large-5 columns">
<div class="Form1">
<div class="PurpleHeader" style="padding-bottom:5px;">Employee Login</div>
<p class="FormText"><strong>Current employee?</strong> Log in to access the employee portal to access pay &amp; benefits information or view the employee handbook.</p>
<p>
<button onclick="window.open('/Login.aspx');" class="ButtonPurple tiny" >LOGIN</button>
</p>
<p class="FormText">Forgot your User ID and/or Password? <a href="/Login.aspx" target="_blank" class="redBodyLink">Click here</a></p>
<hr />
<p class="FormText">Not an employee? Register today and one of our professionals will contact you regarding career opportunities.</p>
<p>
<button onclick="window.open('/Login.aspx');" class="ButtonPurple tiny">NEW USER REGISTRATION</button>
</p>
</div>
</div>
<!-- end of Login form -->
                      
                    
<!---------------------Purple Icons---------------------------->                    
<div class="row">
<div class="hide-for-small-only medium-12 large-12 columns float-right" style="margin-top:-115px; z-index:1000;">
 
   <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../Videos/Videos.aspx"><img src="../img/button-icons-hp.png" alt="Videos" class="show-for-large-up"></a>
 </div> 
 
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../in-the-community.aspx"><img src="../img/design/images/itc-purple.png" alt="In The Community" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../safety-tip.aspx"><img src="../img/design/images/st-purple.png" alt="Safety Tips" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../employee-of-the-quarter.aspx"><img src="../img/design/images/eoq-purple.png" alt="Employee Of The Quarter" class="show-for-large-up"></a>
 </div>
 
</div>
</div>   
                    
 <!---------------------Purple Icons---------------------------->                     
</div>  
</div>
 
 
</div><!----------Tabs-content verticle----------------->
</div><!--------medium-10 columns---------------------->
</div><!---------Tabs-content---------------------------->
</div>
<!--------------------------TABACCORDION------------------------------------->
 
 

Pam Bifaro commented on Pam Bifaro's post 5 months

Still looking for help with the Orbit slider reverse the slide.

Pam Bifaro commented on YH's post 6 months

I need to change the Orbit slider to slide left to right. I am NOT using SASS. Is there a way to reverse the slide NOT using SASS?
 
Here is my code
 
 
<!----------Orbit slider----------------------><div class="grid-x fullWidth"><div class="large-12 medium-12 small-12 cell" style="background-color:#C3EB4C;"><div class="orbit" role="region" aria-label="Specialties" data-orbit></div><div data-orbit data-options="data-anim-in-from-left; data-anim-out-to-right">    <ul class="orbit-container">            <li class="orbit-slide">            <img src="img/1.jpg" class="imgFullwidth">        </li>                        <li class="orbit-slide">            <img src="img/2.jpg" class="imgFullwidth">        </li>                        <li class="orbit-slide">            <img src="img/4.jpg" class="imgFullwidth">        </li>                                  </ul>     <nav class="orbit-bullets hide-for-small-only" style="float:right; padding-right:15px; font-size:12px !important;">  <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>  <button data-slide="1"><span class="show-for-sr"></span></button>  <button data-slide="2"><span class="show-for-sr"></span></button> </nav><img src="img/BannerArrow2.png" alt="We Know People"></div></div></div></div> </div><!----------End of Orbit slider---------------------->

Pam Bifaro commented on Pam Bifaro's post 6 months

Can I get help please???

Pam Bifaro commented on Jonathan Kelly's post 6 months

What version of Foundation/Orbit are you using? I am using the foundation.orbit.js to run my file. Where do I edit this file to reverse the slide?
 
 
/
* Orbit module.
* @module foundation.orbit
* @requires foundation.util.keyboard
* @requires foundation.util.motion
* @requires foundation.util.timerAndImageLoader
* @requires foundation.util.touch
*/
!function($, Foundation){
  'use strict';
  /

  * Creates a new instance of an orbit carousel.
  * @class
  * @param {jQuery} element - jQuery object to make into an Orbit Carousel.
  * @param {Object} options - Overrides to the default plugin settings.
  /
  function Orbit(element, options){
    this.$element = element;
    this.options = $.extend({}, Orbit.defaults, this.$element.data(), options);
 
    this._init();
 
    Foundation.registerPlugin(this, 'Orbit');
    Foundation.Keyboard.register('Orbit', {
      'ltr': {
        'ARROW_RIGHT': 'next',
        'ARROW_LEFT': 'previous'
      },
      'rtl': {
        'ARROW_LEFT': 'next',
        'ARROW_RIGHT': 'previous'
      }
    });
  }
  Orbit.defaults = {
    /

    * Tells the JS to loadBullets.
    * @option
    * @example true
    */
    bullets: true,
    /

    * Tells the JS to apply event listeners to nav buttons
    * @option
    * @example true
    */
    navButtons: true,
    /

    * motion-ui animation class to apply
    * @option
    * @example 'slide-in-right'
    */
    animInFromRight: 'slide-in-right',
    /

    * motion-ui animation class to apply
    * @option
    * @example 'slide-out-right'
    */
    animOutToRight: 'slide-out-right',
    /

    * motion-ui animation class to apply
    * @option
    * @example 'slide-in-left'
    *
    */
    animInFromLeft: 'slide-in-left',
    /

    * motion-ui animation class to apply
    * @option
    * @example 'slide-out-left'
    */
    animOutToLeft: 'slide-out-left',
    /

    * Allows Orbit to automatically animate on page load.
    * @option
    * @example true
    */
    autoPlay: true,
    /

    * Amount of time, in ms, between slide transitions
    * @option
    * @example 5000
    */
    timerDelay: 3000,
    /

    * Allows Orbit to infinitely loop through the slides
    * @option
    * @example true
    */
    infiniteWrap: true,
    /

    * Allows the Orbit slides to bind to swipe events for mobile, requires an additional util library
    * @option
    * @example true
    */
    swipe: true,
    /

    * Allows the timing function to pause animation on hover.
    * @option
    * @example true
    */
    pauseOnHover: true,
    /

    * Allows Orbit to bind keyboard events to the slider, to animate frames with arrow keys
    * @option
    * @example true
    */
    accessible: true,
    /

    * Class applied to the container of Orbit
    * @option
    * @example 'orbit-container'
    */
    containerClass: 'orbit-container',
    /

    * Class applied to individual slides.
    * @option
    * @example 'orbit-slide'
    */
    slideClass: 'orbit-slide',
    /

    * Class applied to the bullet container. You're welcome.
    * @option
    * @example 'orbit-bullets'
    */
    boxOfBullets: 'orbit-bullets',
    /

    * Class applied to the next navigation button.
    * @option
    * @example 'orbit-next'
    */
    nextClass: 'orbit-next',
    /

    * Class applied to the previous navigation button.
    * @option
    * @example 'orbit-previous'
    */
    prevClass: 'orbit-previous',
    /

    * Boolean to flag the js to use motion ui classes or not. Default to true for backwards compatability.
    * @option
    * @example true
    */
    useMUI: true
  };
  /

  * Initializes the plugin by creating jQuery collections, setting attributes, and starting the animation.
  * @function
  * @private
  */
  Orbit.prototype._init = function(){
    this.$wrapper = this.$element.find('.' + this.options.containerClass);
    this.$slides = this.$element.find('.' + this.options.slideClass);
    var $images = this.$element.find('img'),
    initActive = this.$slides.filter('.is-active');
 
    if(!initActive.length){
      this.$slides.eq(0).addClass('is-active');
    }
    if(!this.options.useMUI){
      this.$slides.addClass('no-motionui');
    }
    if($images.length){
      Foundation.onImagesLoaded($images, this._prepareForOrbit.bind(this));
    }else{
      this._prepareForOrbit();//hehe
    }
 
    if(this.options.bullets){
      this._loadBullets();
    }
 
    this._events();
 
    if(this.options.autoPlay && this.$slides.length > 1){
      this.geoSync();
    }
    if(this.options.accessible){ // allow wrapper to be focusable to enable arrow navigation
      this.$wrapper.attr('tabindex', 0);
    }
  };
  /

  * Creates a jQuery collection of bullets, if they are being used.
  * @function
  * @private
  */
  Orbit.prototype._loadBullets = function(){
    this.$bullets = this.$element.find('.' + this.options.boxOfBullets).find('button');
  };
  /

  * Sets a timer object on the orbit, and starts the counter for the next slide.
  * @function
  */
  Orbit.prototype.geoSync = function(){
    var _this = this;
    this.timer = new Foundation.Timer(
      this.$element,
      {duration: this.options.timerDelay,
        infinite: false},
        function(){
          _this.changeSlide(true);
        });
        this.timer.start();
      };
      /

      * Sets wrapper and slide heights for the orbit.
      * @function
      * @private
      */
      Orbit.prototype._prepareForOrbit = function(){
        var _this = this;
        this._setWrapperHeight(function(max){
          _this._setSlideHeight(max);
        });
      };
      /

      * Calulates the height of each slide in the collection, and uses the tallest one for the wrapper height.
      * @function
      * @private
      * @param {Function} cb - a callback function to fire when complete.
      */
      Orbit.prototype._setWrapperHeight = function(cb){//rewrite this to for loop
        var max = 0, temp, counter = 0;
 
        this.$slides.each(function(){
          temp = this.getBoundingClientRect().height;
          $(this).attr('data-slide', counter);
 
          if(counter){//if not the first slide, set css position and display property
            $(this).css({'position': 'relative', 'display': 'none'});
          }
          max = temp > max ? temp : max;
          counter++;
        });
 
        /*if(counter === this.$slides.length){
          this.$wrapper.css({'height': 'auto'});//only change the wrapper height property once.
          cb(max);//fire callback with max height dimension.
        } */
      };
      /

      * Sets the max-height of each slide.
      * @function
      * @private
      */
      /*Orbit.prototype._setSlideHeight = function(height){
        this.$slides.each(function(){
          $(this).css('max-height', height);
        });
      };
/
      /
      * Adds event listeners to basically everything within the element.
      * @function
      * @private
      */
      Orbit.prototype._events = function(){
        var _this = this;
 
        //
************************************
        //
Now using custom event - thanks to:
        //
      Yohai Ararat of Toronto      *
        //************************************
        if(this.$slides.length > 1){
 
          if(this.options.swipe){
            this.$slides.off('swipeleft.zf.orbit swiperight.zf.orbit')
            .on('swipeleft.zf.orbit', function(e){
              e.preventDefault();
              _this.changeSlide(true);
            }).on('swiperight.zf.orbit', function(e){
              e.preventDefault();
              _this.changeSlide(false);
            });
          }
          //
***********************************
 
          if(this.options.autoPlay){
            this.$slides.on('click.zf.orbit', function(){
              _this.$element.data('clickedOn', _this.$element.data('clickedOn') ? false : true);
              _this.timer_this.$element.data('clickedOn') ? 'pause' : 'start';
            });
            if(this.options.pauseOnHover){
              this.$element.on('mouseenter.zf.orbit', function(){
                _this.timer.pause();
              }).on('mouseleave.zf.orbit', function(){
                if(!_this.$element.data('clickedOn')){
                  _this.timer.start();
                }
              });
            }
          }
 
          if(this.options.navButtons){
            var $controls = this.$element.find('.' + this.options.nextClass + ', .' + this.options.prevClass);
            $controls.attr('tabindex', 0)
            //also need to handle enter/return and spacebar key presses
            .on('click.zf.orbit touchend.zf.orbit', function(){
              _this.changeSlide($(this).hasClass(_this.options.nextClass));
            });
          }
 
          if(this.options.bullets){
            this.$bullets.on('click.zf.orbit touchend.zf.orbit', function(){
              if(/is-active/g.test(this.className)){ return false; }//if this is active, kick out of function.
              var idx = $(this).data('slide'),
              ltr = idx > _this.$slides.filter('.is-active').data('slide'),
              $slide = _this.$slides.eq(idx);
 
              _this.changeSlide(ltr, $slide, idx);
            });
          }
 
          this.$wrapper.add(this.$bullets).on('keydown.zf.orbit', function(e){
            // handle keyboard event with keyboard util
            Foundation.Keyboard.handleKey(e, 'Orbit', {
              next: function() {
                _this.changeSlide(true);
              },
              previous: function() {
                _this.changeSlide(false);
              },
              handled: function() { // if bullet is focused, make sure focus moves
                if ($(e.target).is(_this.$bullets)) {
                  _this.$bullets.filter('.is-active').focus();
                }
              }
            });
          });
        }
      };
      /

      * Changes the current slide to a new one.
      * @function
      * @param {Boolean} isLTR - flag if the slide should move left to right.
      * @param {jQuery} chosenSlide - the jQuery element of the slide to show next, if one is selected.
      * @param {Number} idx - the index of the new slide in its collection, if one chosen.
      * @fires Orbit#slidechange
      */
      Orbit.prototype.changeSlide = function(isLTR, chosenSlide, idx){
        var $curSlide = this.$slides.filter('.is-active').eq(0);
 
        if(/mui/g.test($curSlide[0].className)){ return false; }//if the slide is currently animating, kick out of the function
 
        var $firstSlide = this.$slides.first(),
        $lastSlide = this.$slides.last(),
        dirIn = isLTR ? 'Right' : 'Left',
        dirOut = isLTR ? 'Left' : 'Right',
        _this = this,
        $newSlide;
 
        if(!chosenSlide){//most of the time, this will be auto played or clicked from the navButtons.
          $newSlide = isLTR ? //if wrapping enabled, check to see if there is a next or prev sibling, if not, select the first or last slide to fill in. if wrapping not enabled, attempt to select next or prev, if there's nothing there, the function will kick out on next step. CRAZY NESTED TERNARIES!!!!!
          (this.options.infiniteWrap ? $curSlide.next('.' + this.options.slideClass).length ? $curSlide.next('.' + this.options.slideClass) : $firstSlide : $curSlide.next('.' + this.options.slideClass))//pick next slide if moving left to right
          :
          (this.options.infiniteWrap ? $curSlide.prev('.' + this.options.slideClass).length ? $curSlide.prev('.' + this.options.slideClass) : $lastSlide : $curSlide.prev('.' + this.options.slideClass));//pick prev slide if moving right to left
        }else{
          $newSlide = chosenSlide;
        }
        if($newSlide.length){
          if(this.options.bullets){
            idx = idx || this.$slides.index($newSlide);//grab index to update bullets
            this._updateBullets(idx);
          }
          if(this.options.useMUI){
 
            Foundation.Motion.animateIn(
              $newSlide.addClass('is-active').css({'position': 'absolute', 'top': 0}),
              this.options['animInFrom' + dirIn],
              function(){
                $newSlide.css({'position': 'relative', 'display': 'block'})
                .attr('aria-live', 'polite');
              });
 
              Foundation.Motion.animateOut(
                $curSlide.removeClass('is-active'),
                this.options['animOutTo' + dirOut],
                function(){
                  $curSlide.removeAttr('aria-live');
                  if(_this.options.autoPlay && !_this.timer.isPaused){
                    _this.timer.restart();
                  }
                  //do stuff?
                });
              }else{
                $curSlide.removeClass('is-active is-in').removeAttr('aria-live').hide();
                $newSlide.addClass('is-active is-in').attr('aria-live', 'polite').show();
                if(this.options.autoPlay && !this.timer.isPaused){
                  this.timer.restart();
                }
              }
              /

              * Triggers when the slide has finished animating in.
              * @event Orbit#slidechange
              */
              this.$element.trigger('slidechange.zf.orbit', [$newSlide]);
            }
          };
          /

          * Updates the active state of the bullets, if displayed.
          * @function
          * @private
          * @param {Number} idx - the index of the current slide.
          */
          Orbit.prototype._updateBullets = function(idx){
            var $oldBullet = this.$element.find('.' + this.options.boxOfBullets)
            .find('.is-active').removeClass('is-active').blur(),
            span = $oldBullet.find('span:last').detach(),
            $newBullet = this.$bullets.eq(idx).addClass('is-active').append(span);
          };
          /

          * Destroys the carousel and hides the element.
          * @function
          */
          Orbit.prototype.destroy = function(){
            this.$element.off('.zf.orbit').find('
').off('.zf.orbit').end().hide();
            Foundation.unregisterPlugin(this);
          };
 
          Foundation.plugin(Orbit, 'Orbit');
 
        }(jQuery, window.Foundation);
 

Pam Bifaro commented on Scott Koons's post 9 months
Pam Bifaro commented on Pam Bifaro's post about 1 year

I ended up creating a style to have the section fade to zero opacity and that seems to work good.
  .TransFade {    opacity: 0;
 
Website
http://www.thekimfoundation.org/
 

Pam Bifaro commented on Pam Bifaro's post about 1 year

I need it to show on medium and large and up as they sometimes look at this site on a plasma screen I tried show for medium up, show for large up and a combination of these and nothing works. I wonder if I create a media query for the break point that I want it to hide then a class in that break point to hide/show for those elements if that would work.
I might create a break point at around 950
Any thoughts???

Pam Bifaro commented on Pam Bifaro's post about 1 year

I'm trying to hide the text and button on each slide for small screens not show them for small. Currently I am using hide-for-small-only but the text and button need to hide before they start moving under the purple banner and start looking like they are getting cut off. Here is my website.
http://www.thekimfoundation.org/

Pam Bifaro commented on Pam Bifaro's post over 1 year

Any ideas??????

Posts Followed


  • 7
    Replies
  • Change Orbit slider transition

    By YH

    Orbitslider

      Hello, I cant find where the sass transition for the slider is given, either in the standard foundation css or the MUI sass settings. It removes the class with the transition which makes it hard to see the exact css etc.  Thanks!

    Last Reply by Pam Bifaro 6 months ago










Following

    No Content

Followers

  • Anna Everson has no published posts

My Posts










My Comments

You commented on Sensaetions's post 3 months

I am looking for this same answer I have a question posted with code but no reply.
 
 
 <!-----------------------------TABACCORDION------------------------------>
 
<div class="tabs" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
 
  <div class="tabs-panel is-active" id="panel1">
    <div class="medium-2 columns">
   
    <ul class="tabs vertical" id="example-vert-tabs" data-tabs>
     
      <li class="tabs-title is-active tabOnebkgd btn1" style="text-align:left"><a href="#panel1v" aria-selected="true" class="TabText">FIND A JOB</a></li>
     
      <li class="tabs-title tabTwoBkgd btn2"><a href="#panel2v" class="TabText" style="text-align:left">FIND TALENT</a></li>
     
      <li class="tabs-title tabThreeBkgd btn3"><a href="#panel3v" class="TabText" style="text-align:left">FOR EMPLOYEES</a></li>
   
    </ul>
  
  </div>
 
 
 
<div class="medium-10 columns"> 
    
    
<div class="tabs-content vertical" data-tabs-content="example-vert-tabs">
     
<div class="tabs-panel is-active" id="panel1v">
 
 <div class="hide-for-small medium-5 large-5 columns">     
      <ul class="vertical dropdown menu kickOutMenu hide-for-small-only" data-dropdown-menu style="max-width:220px !important; text-align:left;">
  <li><a href="../why-work-with-celebrity.aspx" class="kickOutLinks">WHY WORK WITH CELEBRITY</a></li>
  <li><a href="../areas-of-specialization-employee.aspx" class="kickOutLinks">AREAS OF SPECIALIZATION</a></li>
                    <li><a href="../career-options.aspx" class="kickOutLinks">CAREEER OPTIONS</a></li>
                    <li><a href="../our-process-employee.aspx" class="kickOutLinks">OUR PROCESS</a></li>
                    <li><a href="../benefits.aspx" class="kickOutLinks">BENEFITS</a></li>
                    <li><a href="../candidate-newsletter.aspx" class="kickOutLinks">OUTSTANDING OPPORTUNITIES NEWSLETTER</a></li>
</ul>                     
 </div> 
 
             <!-- Find A Job Form -->
<div class="row">
<div class="small-12 medium-5 large-5 columns">
<div class="Form1">
<p class="RedHeader" align="center">Find Jobs</p>
      <div id="Formcontent_main" class="BodyCopy" >
                <!-- start job search -->
<div id="jobsearchdiv" style="display: none;">
    <input type="text" id="txtQuery" placeholder="Job Title or Keyword" />
    <input type="text" id="txtLocation" placeholder="City, State or Zipcode" />
    <button type="button" class="button" onclick="jobSearch()">SEARCH</button>
    <label id="errorControl" name="errorControl"></label>
</div>
<div id="jobsearchnotfound" style="display: none; color: inherit; text-align: center;">
    Oops! Something went wrong.
    <br />
    Job Search is currently unavailable.<br /><br />
</div>
<!-- end job search -->
                  </div>
                  </div>
        </div>
</div>
<!-- end of Find A Job form -->
 
 
<!---------------------RED Icons---------------------------->                    
<div class="row">
<div class="hide-for-small-only medium-12 large-12 columns" style="margin-top:120px;">
  <div class="hide-for-small medium-2 large-2 columns float-right"><a href="/Apply-Online.aspx" target="_blank"><img src="../img/design/images/aol-red.png" alt="Apply Online" class="show-for-large-up"></a>
  </div>
  <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../Videos/Videos.aspx"><img src="../img/button-icons-hp.png" alt="Videos" class="show-for-large-up"></a>
 </div> 
 <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../job-search-tips.aspx"><img src="../img/design/images/jst-red.png" alt="Job Search Tips" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../interview-tips.aspx"><img src="../img/design/images/interview-red.png" alt="Interview Tips" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../resume-recommendations.aspx"><img src="../img/design/images/resume-red.png" alt="Resume Recommendations" class="show-for-large-up"></a>
 </div>
</div> 
</div>                     
 <!---------------------RED Icons---------------------------->
</div>
  
  
  
  
 
  <div class="tabs-panel" id="panel2v">
     <div class="hide-for-small medium-5 large-5 columns">  
       <ul class="vertical dropdown menu kickOutMenu2 hide-for-small-only" data-dropdown-menu style="max-width: 350px; text-align:left;">
  <li><a href="../why-partner-with-celebrity.aspx" class="kickOutLinks">WHY PARTNER WITH CELEBRITY</a></li>
  <li><a href="../areas-of-specialization-client.aspx" class="kickOutLinks">AREAS OF SPECIALIZATION</a></li>
                    <li><a href="../staffing-solutions.aspx" class="kickOutLinks">STAFFING SOLUTIONS</a></li>
                    <li><a href="../our-process-client.aspx" class="kickOutLinks">OUR PROCESS</a></li>
                    <li><a href="../request-talent.aspx" class="kickOutLinks">REQUEST TALENT</a></li>
                    <li><a href="../online-timecard-approval.aspx" class="kickOutLinks">ONLINE TIMECARD APPROVAL</a></li>
                    <li><a href="../client-newsletter.aspx" class="kickOutLinks">TOP TALENT NEWSLETTER</a></li>
</ul>  
                    
  </div>
  
  
   <!-- Find Talent Form --> 
<div class="row">
<div class="small-12 medium-5 large-5 columns">                 
      <div class="Form1">
      <div class="OrangeHeader" id="FindTalent" style="padding-bottom:5px;">Find Talent</div>
     <p class="FormText"><strong>Have a need for an employee?</strong> Search our network of exceptional candidates or contact us to learn about additional candidates not featured online.</p>
   <div id="staffSearch">
 
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server"/>
<p>
<Aureus:CandidateSearchBox runat="server" ID="candidateSearchBox1" ButtonText="BEGIN STAFF SEARCH" CssClass="Search ButtonOrange" RedirectUrl="~/Employers/Results.aspx?wb={0}&pos={1}" IsInitializeWithDivision="true" />
</p>
<p class="FormText">Or, <a href="/request-talent.aspx" class="redBodyLink">submit your staffing request online</a> and one of our professionals will start working on your search right away.</p>
 
</div>
</div>
</div>
</div>
        
        <!-- end of Find Talent Form -->
                      
                    
<!---------------------Orange Icons---------------------------->                    
<div class="row">
<div class="hide-for-small-only medium-12 large-12 columns float-right" style="margin-top:-35px;">
   <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../Videos/Videos.aspx"><img src="../img/button-icons-hp.png" alt="Videos" class="show-for-large-up"></a>
 </div> 
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../employment-trends.aspx"><img src="../img/design/images/et-orange.png" alt="Employment Trends" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../interview-tips-client.aspx"><img src="../img/design/images/it-orange.png" alt="Interview Tips" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../professional-affiliations.aspx"><img src="../img/design/images/pa-orange.png" alt="Professional Affiliations" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../our-clients-say-it-best.aspx"><img src="../img/design/images/ocsib-orange.png" alt="Our Clients Say It Best" class="show-for-large-up"></a>
 </div>
 
 
          </div>
                    </div>   
                    
 <!---------------------orange Icons---------------------------->              
  </div>
 
 
 
 
 
 
  <div class="tabs-panel" id="panel3v">
    <div class="hide-for-small medium-5 large-5 columns">  
        <ul class="vertical dropdown menu kickOutMenu3 hide-for-small-only" data-dropdown-menu style="max-width: 450px; text-align:left">
  <li><a href="../starting-your-assignment.aspx" class="kickOutLinks">STARTING YOUR ASSIGNMENT</a></li>
  <li><a href="../pay-benefits.aspx" class="kickOutLinks">PAY & BENEFITS</a></li>
                    <li><a href="../online-timecard-submittal.aspx" class="kickOutLinks">ONLINE TIMECARD SUBMITTAL</a></li>
                    <li><a href="../employee-handbook.aspx" class="kickOutLinks">EMPLOYEE HANDBOOK</a></li>
                     <li><a href="../I-9.aspx" class="kickOutLinks">COMPLETING YOUR I-9</a></li>
</ul>  
      </div>              
<!-- Login form -->
<div class="row">
<div class="small-12 medium-5 large-5 columns">
<div class="Form1">
<div class="PurpleHeader" style="padding-bottom:5px;">Employee Login</div>
<p class="FormText"><strong>Current employee?</strong> Log in to access the employee portal to access pay &amp; benefits information or view the employee handbook.</p>
<p>
<button onclick="window.open('/Login.aspx');" class="ButtonPurple tiny" >LOGIN</button>
</p>
<p class="FormText">Forgot your User ID and/or Password? <a href="/Login.aspx" target="_blank" class="redBodyLink">Click here</a></p>
<hr />
<p class="FormText">Not an employee? Register today and one of our professionals will contact you regarding career opportunities.</p>
<p>
<button onclick="window.open('/Login.aspx');" class="ButtonPurple tiny">NEW USER REGISTRATION</button>
</p>
</div>
</div>
<!-- end of Login form -->
                      
                    
<!---------------------Purple Icons---------------------------->                    
<div class="row">
<div class="hide-for-small-only medium-12 large-12 columns float-right" style="margin-top:-115px; z-index:1000;">
 
   <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../Videos/Videos.aspx"><img src="../img/button-icons-hp.png" alt="Videos" class="show-for-large-up"></a>
 </div> 
 
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../in-the-community.aspx"><img src="../img/design/images/itc-purple.png" alt="In The Community" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../safety-tip.aspx"><img src="../img/design/images/st-purple.png" alt="Safety Tips" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../employee-of-the-quarter.aspx"><img src="../img/design/images/eoq-purple.png" alt="Employee Of The Quarter" class="show-for-large-up"></a>
 </div>
 
</div>
</div>   
                    
 <!---------------------Purple Icons---------------------------->                     
</div>  
</div>
 
 
</div><!----------Tabs-content verticle----------------->
</div><!--------medium-10 columns---------------------->
</div><!---------Tabs-content---------------------------->
</div>
<!--------------------------TABACCORDION------------------------------------->
 
 

You commented on Pam Bifaro's post 5 months

Still looking for help with the Orbit slider reverse the slide.

You commented on YH's post 6 months

I need to change the Orbit slider to slide left to right. I am NOT using SASS. Is there a way to reverse the slide NOT using SASS?
 
Here is my code
 
 
<!----------Orbit slider----------------------><div class="grid-x fullWidth"><div class="large-12 medium-12 small-12 cell" style="background-color:#C3EB4C;"><div class="orbit" role="region" aria-label="Specialties" data-orbit></div><div data-orbit data-options="data-anim-in-from-left; data-anim-out-to-right">    <ul class="orbit-container">            <li class="orbit-slide">            <img src="img/1.jpg" class="imgFullwidth">        </li>                        <li class="orbit-slide">            <img src="img/2.jpg" class="imgFullwidth">        </li>                        <li class="orbit-slide">            <img src="img/4.jpg" class="imgFullwidth">        </li>                                  </ul>     <nav class="orbit-bullets hide-for-small-only" style="float:right; padding-right:15px; font-size:12px !important;">  <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>  <button data-slide="1"><span class="show-for-sr"></span></button>  <button data-slide="2"><span class="show-for-sr"></span></button> </nav><img src="img/BannerArrow2.png" alt="We Know People"></div></div></div></div> </div><!----------End of Orbit slider---------------------->

You commented on Pam Bifaro's post 6 months

Can I get help please???

You commented on Jonathan Kelly's post 6 months

What version of Foundation/Orbit are you using? I am using the foundation.orbit.js to run my file. Where do I edit this file to reverse the slide?
 
 
/
* Orbit module.
* @module foundation.orbit
* @requires foundation.util.keyboard
* @requires foundation.util.motion
* @requires foundation.util.timerAndImageLoader
* @requires foundation.util.touch
*/
!function($, Foundation){
  'use strict';
  /

  * Creates a new instance of an orbit carousel.
  * @class
  * @param {jQuery} element - jQuery object to make into an Orbit Carousel.
  * @param {Object} options - Overrides to the default plugin settings.
  /
  function Orbit(element, options){
    this.$element = element;
    this.options = $.extend({}, Orbit.defaults, this.$element.data(), options);
 
    this._init();
 
    Foundation.registerPlugin(this, 'Orbit');
    Foundation.Keyboard.register('Orbit', {
      'ltr': {
        'ARROW_RIGHT': 'next',
        'ARROW_LEFT': 'previous'
      },
      'rtl': {
        'ARROW_LEFT': 'next',
        'ARROW_RIGHT': 'previous'
      }
    });
  }
  Orbit.defaults = {
    /

    * Tells the JS to loadBullets.
    * @option
    * @example true
    */
    bullets: true,
    /

    * Tells the JS to apply event listeners to nav buttons
    * @option
    * @example true
    */
    navButtons: true,
    /

    * motion-ui animation class to apply
    * @option
    * @example 'slide-in-right'
    */
    animInFromRight: 'slide-in-right',
    /

    * motion-ui animation class to apply
    * @option
    * @example 'slide-out-right'
    */
    animOutToRight: 'slide-out-right',
    /

    * motion-ui animation class to apply
    * @option
    * @example 'slide-in-left'
    *
    */
    animInFromLeft: 'slide-in-left',
    /

    * motion-ui animation class to apply
    * @option
    * @example 'slide-out-left'
    */
    animOutToLeft: 'slide-out-left',
    /

    * Allows Orbit to automatically animate on page load.
    * @option
    * @example true
    */
    autoPlay: true,
    /

    * Amount of time, in ms, between slide transitions
    * @option
    * @example 5000
    */
    timerDelay: 3000,
    /

    * Allows Orbit to infinitely loop through the slides
    * @option
    * @example true
    */
    infiniteWrap: true,
    /

    * Allows the Orbit slides to bind to swipe events for mobile, requires an additional util library
    * @option
    * @example true
    */
    swipe: true,
    /

    * Allows the timing function to pause animation on hover.
    * @option
    * @example true
    */
    pauseOnHover: true,
    /

    * Allows Orbit to bind keyboard events to the slider, to animate frames with arrow keys
    * @option
    * @example true
    */
    accessible: true,
    /

    * Class applied to the container of Orbit
    * @option
    * @example 'orbit-container'
    */
    containerClass: 'orbit-container',
    /

    * Class applied to individual slides.
    * @option
    * @example 'orbit-slide'
    */
    slideClass: 'orbit-slide',
    /

    * Class applied to the bullet container. You're welcome.
    * @option
    * @example 'orbit-bullets'
    */
    boxOfBullets: 'orbit-bullets',
    /

    * Class applied to the next navigation button.
    * @option
    * @example 'orbit-next'
    */
    nextClass: 'orbit-next',
    /

    * Class applied to the previous navigation button.
    * @option
    * @example 'orbit-previous'
    */
    prevClass: 'orbit-previous',
    /

    * Boolean to flag the js to use motion ui classes or not. Default to true for backwards compatability.
    * @option
    * @example true
    */
    useMUI: true
  };
  /

  * Initializes the plugin by creating jQuery collections, setting attributes, and starting the animation.
  * @function
  * @private
  */
  Orbit.prototype._init = function(){
    this.$wrapper = this.$element.find('.' + this.options.containerClass);
    this.$slides = this.$element.find('.' + this.options.slideClass);
    var $images = this.$element.find('img'),
    initActive = this.$slides.filter('.is-active');
 
    if(!initActive.length){
      this.$slides.eq(0).addClass('is-active');
    }
    if(!this.options.useMUI){
      this.$slides.addClass('no-motionui');
    }
    if($images.length){
      Foundation.onImagesLoaded($images, this._prepareForOrbit.bind(this));
    }else{
      this._prepareForOrbit();//hehe
    }
 
    if(this.options.bullets){
      this._loadBullets();
    }
 
    this._events();
 
    if(this.options.autoPlay && this.$slides.length > 1){
      this.geoSync();
    }
    if(this.options.accessible){ // allow wrapper to be focusable to enable arrow navigation
      this.$wrapper.attr('tabindex', 0);
    }
  };
  /

  * Creates a jQuery collection of bullets, if they are being used.
  * @function
  * @private
  */
  Orbit.prototype._loadBullets = function(){
    this.$bullets = this.$element.find('.' + this.options.boxOfBullets).find('button');
  };
  /

  * Sets a timer object on the orbit, and starts the counter for the next slide.
  * @function
  */
  Orbit.prototype.geoSync = function(){
    var _this = this;
    this.timer = new Foundation.Timer(
      this.$element,
      {duration: this.options.timerDelay,
        infinite: false},
        function(){
          _this.changeSlide(true);
        });
        this.timer.start();
      };
      /

      * Sets wrapper and slide heights for the orbit.
      * @function
      * @private
      */
      Orbit.prototype._prepareForOrbit = function(){
        var _this = this;
        this._setWrapperHeight(function(max){
          _this._setSlideHeight(max);
        });
      };
      /

      * Calulates the height of each slide in the collection, and uses the tallest one for the wrapper height.
      * @function
      * @private
      * @param {Function} cb - a callback function to fire when complete.
      */
      Orbit.prototype._setWrapperHeight = function(cb){//rewrite this to for loop
        var max = 0, temp, counter = 0;
 
        this.$slides.each(function(){
          temp = this.getBoundingClientRect().height;
          $(this).attr('data-slide', counter);
 
          if(counter){//if not the first slide, set css position and display property
            $(this).css({'position': 'relative', 'display': 'none'});
          }
          max = temp > max ? temp : max;
          counter++;
        });
 
        /*if(counter === this.$slides.length){
          this.$wrapper.css({'height': 'auto'});//only change the wrapper height property once.
          cb(max);//fire callback with max height dimension.
        } */
      };
      /

      * Sets the max-height of each slide.
      * @function
      * @private
      */
      /*Orbit.prototype._setSlideHeight = function(height){
        this.$slides.each(function(){
          $(this).css('max-height', height);
        });
      };
/
      /
      * Adds event listeners to basically everything within the element.
      * @function
      * @private
      */
      Orbit.prototype._events = function(){
        var _this = this;
 
        //
************************************
        //
Now using custom event - thanks to:
        //
      Yohai Ararat of Toronto      *
        //************************************
        if(this.$slides.length > 1){
 
          if(this.options.swipe){
            this.$slides.off('swipeleft.zf.orbit swiperight.zf.orbit')
            .on('swipeleft.zf.orbit', function(e){
              e.preventDefault();
              _this.changeSlide(true);
            }).on('swiperight.zf.orbit', function(e){
              e.preventDefault();
              _this.changeSlide(false);
            });
          }
          //
***********************************
 
          if(this.options.autoPlay){
            this.$slides.on('click.zf.orbit', function(){
              _this.$element.data('clickedOn', _this.$element.data('clickedOn') ? false : true);
              _this.timer_this.$element.data('clickedOn') ? 'pause' : 'start';
            });
            if(this.options.pauseOnHover){
              this.$element.on('mouseenter.zf.orbit', function(){
                _this.timer.pause();
              }).on('mouseleave.zf.orbit', function(){
                if(!_this.$element.data('clickedOn')){
                  _this.timer.start();
                }
              });
            }
          }
 
          if(this.options.navButtons){
            var $controls = this.$element.find('.' + this.options.nextClass + ', .' + this.options.prevClass);
            $controls.attr('tabindex', 0)
            //also need to handle enter/return and spacebar key presses
            .on('click.zf.orbit touchend.zf.orbit', function(){
              _this.changeSlide($(this).hasClass(_this.options.nextClass));
            });
          }
 
          if(this.options.bullets){
            this.$bullets.on('click.zf.orbit touchend.zf.orbit', function(){
              if(/is-active/g.test(this.className)){ return false; }//if this is active, kick out of function.
              var idx = $(this).data('slide'),
              ltr = idx > _this.$slides.filter('.is-active').data('slide'),
              $slide = _this.$slides.eq(idx);
 
              _this.changeSlide(ltr, $slide, idx);
            });
          }
 
          this.$wrapper.add(this.$bullets).on('keydown.zf.orbit', function(e){
            // handle keyboard event with keyboard util
            Foundation.Keyboard.handleKey(e, 'Orbit', {
              next: function() {
                _this.changeSlide(true);
              },
              previous: function() {
                _this.changeSlide(false);
              },
              handled: function() { // if bullet is focused, make sure focus moves
                if ($(e.target).is(_this.$bullets)) {
                  _this.$bullets.filter('.is-active').focus();
                }
              }
            });
          });
        }
      };
      /

      * Changes the current slide to a new one.
      * @function
      * @param {Boolean} isLTR - flag if the slide should move left to right.
      * @param {jQuery} chosenSlide - the jQuery element of the slide to show next, if one is selected.
      * @param {Number} idx - the index of the new slide in its collection, if one chosen.
      * @fires Orbit#slidechange
      */
      Orbit.prototype.changeSlide = function(isLTR, chosenSlide, idx){
        var $curSlide = this.$slides.filter('.is-active').eq(0);
 
        if(/mui/g.test($curSlide[0].className)){ return false; }//if the slide is currently animating, kick out of the function
 
        var $firstSlide = this.$slides.first(),
        $lastSlide = this.$slides.last(),
        dirIn = isLTR ? 'Right' : 'Left',
        dirOut = isLTR ? 'Left' : 'Right',
        _this = this,
        $newSlide;
 
        if(!chosenSlide){//most of the time, this will be auto played or clicked from the navButtons.
          $newSlide = isLTR ? //if wrapping enabled, check to see if there is a next or prev sibling, if not, select the first or last slide to fill in. if wrapping not enabled, attempt to select next or prev, if there's nothing there, the function will kick out on next step. CRAZY NESTED TERNARIES!!!!!
          (this.options.infiniteWrap ? $curSlide.next('.' + this.options.slideClass).length ? $curSlide.next('.' + this.options.slideClass) : $firstSlide : $curSlide.next('.' + this.options.slideClass))//pick next slide if moving left to right
          :
          (this.options.infiniteWrap ? $curSlide.prev('.' + this.options.slideClass).length ? $curSlide.prev('.' + this.options.slideClass) : $lastSlide : $curSlide.prev('.' + this.options.slideClass));//pick prev slide if moving right to left
        }else{
          $newSlide = chosenSlide;
        }
        if($newSlide.length){
          if(this.options.bullets){
            idx = idx || this.$slides.index($newSlide);//grab index to update bullets
            this._updateBullets(idx);
          }
          if(this.options.useMUI){
 
            Foundation.Motion.animateIn(
              $newSlide.addClass('is-active').css({'position': 'absolute', 'top': 0}),
              this.options['animInFrom' + dirIn],
              function(){
                $newSlide.css({'position': 'relative', 'display': 'block'})
                .attr('aria-live', 'polite');
              });
 
              Foundation.Motion.animateOut(
                $curSlide.removeClass('is-active'),
                this.options['animOutTo' + dirOut],
                function(){
                  $curSlide.removeAttr('aria-live');
                  if(_this.options.autoPlay && !_this.timer.isPaused){
                    _this.timer.restart();
                  }
                  //do stuff?
                });
              }else{
                $curSlide.removeClass('is-active is-in').removeAttr('aria-live').hide();
                $newSlide.addClass('is-active is-in').attr('aria-live', 'polite').show();
                if(this.options.autoPlay && !this.timer.isPaused){
                  this.timer.restart();
                }
              }
              /

              * Triggers when the slide has finished animating in.
              * @event Orbit#slidechange
              */
              this.$element.trigger('slidechange.zf.orbit', [$newSlide]);
            }
          };
          /

          * Updates the active state of the bullets, if displayed.
          * @function
          * @private
          * @param {Number} idx - the index of the current slide.
          */
          Orbit.prototype._updateBullets = function(idx){
            var $oldBullet = this.$element.find('.' + this.options.boxOfBullets)
            .find('.is-active').removeClass('is-active').blur(),
            span = $oldBullet.find('span:last').detach(),
            $newBullet = this.$bullets.eq(idx).addClass('is-active').append(span);
          };
          /

          * Destroys the carousel and hides the element.
          * @function
          */
          Orbit.prototype.destroy = function(){
            this.$element.off('.zf.orbit').find('
').off('.zf.orbit').end().hide();
            Foundation.unregisterPlugin(this);
          };
 
          Foundation.plugin(Orbit, 'Orbit');
 
        }(jQuery, window.Foundation);
 

You commented on Scott Koons's post 9 months
You commented on Pam Bifaro's post about 1 year

I ended up creating a style to have the section fade to zero opacity and that seems to work good.
  .TransFade {    opacity: 0;
 
Website
http://www.thekimfoundation.org/
 

You commented on Pam Bifaro's post about 1 year

I need it to show on medium and large and up as they sometimes look at this site on a plasma screen I tried show for medium up, show for large up and a combination of these and nothing works. I wonder if I create a media query for the break point that I want it to hide then a class in that break point to hide/show for those elements if that would work.
I might create a break point at around 950
Any thoughts???

You commented on Pam Bifaro's post about 1 year

I'm trying to hide the text and button on each slide for small screens not show them for small. Currently I am using hide-for-small-only but the text and button need to hide before they start moving under the purple banner and start looking like they are getting cut off. Here is my website.
http://www.thekimfoundation.org/

You commented on Pam Bifaro's post over 1 year

Any ideas??????

Posts Followed

Following

  • No Content

Followers

  • Anna Everson has no published posts