Menu icon Foundation

My Posts

No Content

My Comments

Pam Bifaro commented on Alec Stewart's post about 3 years

I am having this same problem with the menu showing sub menus briefly in Chrome. Non of the mentioned her has worked for me is there any solution for this yet?

Pam Bifaro commented on Alec Stewart's post about 3 years

I am having this same problem with the menu showing sub menus briefly in Chrome. Non of the mentioned her has worked for me is there any solution for this yet?

Pam Bifaro commented on pulla's post about 3 years

I am using Foundation 6 and the foundation.css file has this as the first line
@charset "UTF-8";
should I replace that with
//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700
 

Pam Bifaro commented on Digi Wolf's post about 3 years

I ended up adding media queries to my app.css to adjust for the break points. As far as the larger phones on landscape showing as a desktop site my company was okay with that as some phone are getting very large screens. It did take me several media queries to adjust the horizontal menu bar for the medium screen which was a lot of work and is still not as pretty as I would like it but they are happy with the results. So there it is.

Pam Bifaro commented on Stefan Koren's post over 3 years

I had a problem getting the data-options to work for me too. But then I moved the 
data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
to another div and that seems to work. Here is a sample of how I set my slider up with the data-options.
 
   <!--- ORBIT Slider --------> <div class="row wrap"><div class="large-12 medium-12 small-12 columns"><div class="orbit" role="region" aria-label="Specialties" data-orbit ></div><div id="myslider" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">    <ul class="orbit-container">        <li class="orbit-slide">            <span class="layer-centered">            </span>            <img width="2000" height="667" src="img/imageSlider1.jpg">        </li>        <li class="orbit-slide">            <span class="layer-centered">            </span>            <img width="2000" height="667" src="img/imageSlider2.jpg">        </li>        <li class="orbit-slide">            <span class="layer-centered">            </span>            <img width="2000" height="667" src="img/imageSlider3.jpg">        </li>        <li class="orbit-slide">            <span class="layer-centered">            </span>            <img width="2000" height="667" src="img/imageSlider4.jpg">        </li>    </ul></div></div></div></div><!--- ORBIT Slider -------->    

Pam Bifaro commented on Pam Bifaro's post over 3 years

I started moving stuff around and ended up fixing it.  I moved the data-options to my div id=myslider and it started working again. So instead of adding it to the outer container I moved it closer to the UL and it worked. I did try it on the UL but that did not work for me. So I guess if it doesn't work for you try moving it to inner or outer divs to see if that fixes it.
    <!--- ORBIT Slider --------> <div class="row wrap"><div class="large-12 medium-12 small-12 columns"><div class="orbit" role="region" aria-label="Specialties" data-orbit ></div><div id="myslider" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">    <ul class="orbit-container">        <li class="orbit-slide">            <span class="layer-centered">            </span>            <img width="2000" height="667" src="img/imageSlider1.jpg">        </li>        <li class="orbit-slide">            <span class="layer-centered">            </span>            <img width="2000" height="667" src="img/imageSlider2.jpg">        </li>        <li class="orbit-slide">            <span class="layer-centered">            </span>            <img width="2000" height="667" src="img/imageSlider3.jpg">        </li>        <li class="orbit-slide">            <span class="layer-centered">            </span>            <img width="2000" height="667" src="img/imageSlider4.jpg">        </li>    </ul></div></div></div></div><!--- ORBIT Slider --------> 
 

Pam Bifaro commented on Digi Wolf's post over 3 years

My site uses the medium query on landscape for the iPhone 6. If this is what you are seeing then I have the same problem. You need to alter the break points and to do that you need to be using SASS is what I'm reading. My IT department is dragging their feet on installing SASS for us to use so I'm wondering if I can add new queries to my css or will that cause a new group of problems??

Pam Bifaro commented on Stefan Koren's post over 3 years

I'm using something very similar to what you have and the fade animation was working and now it's not. It just slides.
 
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
</div>

Pam Bifaro commented on Stefan Koren's post over 3 years

I'm using something very similar to what you have and the fade animation was working and now it's not. It just slides.
 
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
</div>

Pam Bifaro commented on Stefan Koren's post over 3 years

I'm using something very similar to what you have and the fade animation was working and now it's not. It just slides.
 
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
</div>

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Alec Stewart's post about 3 years

I am having this same problem with the menu showing sub menus briefly in Chrome. Non of the mentioned her has worked for me is there any solution for this yet?

You commented on Alec Stewart's post about 3 years

I am having this same problem with the menu showing sub menus briefly in Chrome. Non of the mentioned her has worked for me is there any solution for this yet?

You commented on pulla's post about 3 years

I am using Foundation 6 and the foundation.css file has this as the first line
@charset "UTF-8";
should I replace that with
//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700
 

You commented on Digi Wolf's post about 3 years

I ended up adding media queries to my app.css to adjust for the break points. As far as the larger phones on landscape showing as a desktop site my company was okay with that as some phone are getting very large screens. It did take me several media queries to adjust the horizontal menu bar for the medium screen which was a lot of work and is still not as pretty as I would like it but they are happy with the results. So there it is.

You commented on Stefan Koren's post over 3 years

I had a problem getting the data-options to work for me too. But then I moved the 
data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
to another div and that seems to work. Here is a sample of how I set my slider up with the data-options.
 
   <!--- ORBIT Slider --------> <div class="row wrap"><div class="large-12 medium-12 small-12 columns"><div class="orbit" role="region" aria-label="Specialties" data-orbit ></div><div id="myslider" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">    <ul class="orbit-container">        <li class="orbit-slide">            <span class="layer-centered">            </span>            <img width="2000" height="667" src="img/imageSlider1.jpg">        </li>        <li class="orbit-slide">            <span class="layer-centered">            </span>            <img width="2000" height="667" src="img/imageSlider2.jpg">        </li>        <li class="orbit-slide">            <span class="layer-centered">            </span>            <img width="2000" height="667" src="img/imageSlider3.jpg">        </li>        <li class="orbit-slide">            <span class="layer-centered">            </span>            <img width="2000" height="667" src="img/imageSlider4.jpg">        </li>    </ul></div></div></div></div><!--- ORBIT Slider -------->    

You commented on Pam Bifaro's post over 3 years

I started moving stuff around and ended up fixing it.  I moved the data-options to my div id=myslider and it started working again. So instead of adding it to the outer container I moved it closer to the UL and it worked. I did try it on the UL but that did not work for me. So I guess if it doesn't work for you try moving it to inner or outer divs to see if that fixes it.
    <!--- ORBIT Slider --------> <div class="row wrap"><div class="large-12 medium-12 small-12 columns"><div class="orbit" role="region" aria-label="Specialties" data-orbit ></div><div id="myslider" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">    <ul class="orbit-container">        <li class="orbit-slide">            <span class="layer-centered">            </span>            <img width="2000" height="667" src="img/imageSlider1.jpg">        </li>        <li class="orbit-slide">            <span class="layer-centered">            </span>            <img width="2000" height="667" src="img/imageSlider2.jpg">        </li>        <li class="orbit-slide">            <span class="layer-centered">            </span>            <img width="2000" height="667" src="img/imageSlider3.jpg">        </li>        <li class="orbit-slide">            <span class="layer-centered">            </span>            <img width="2000" height="667" src="img/imageSlider4.jpg">        </li>    </ul></div></div></div></div><!--- ORBIT Slider --------> 
 

You commented on Digi Wolf's post over 3 years

My site uses the medium query on landscape for the iPhone 6. If this is what you are seeing then I have the same problem. You need to alter the break points and to do that you need to be using SASS is what I'm reading. My IT department is dragging their feet on installing SASS for us to use so I'm wondering if I can add new queries to my css or will that cause a new group of problems??

You commented on Stefan Koren's post over 3 years

I'm using something very similar to what you have and the fade animation was working and now it's not. It just slides.
 
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
</div>

You commented on Stefan Koren's post over 3 years

I'm using something very similar to what you have and the fade animation was working and now it's not. It just slides.
 
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
</div>

You commented on Stefan Koren's post over 3 years

I'm using something very similar to what you have and the fade animation was working and now it's not. It just slides.
 
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
</div>

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content