Menu icon Foundation

Designer | Repentigny, Qc

My Posts











My Comments

Eric Dumensil commented on Eric Dumensil's post over 3 years

Thanks Rafi,

I realized that it had a different fixed-top probably because I used a simulator, when viewing on an actual iPhone 4, everything was ok..

Thanks tho! :)

Eric Dumensil commented on Eric Dumensil's post over 3 years

Sure, here's how my html looks like :

<div id="tabs-container" data-magellan-expedition="fixed">
  <div class="row">
    <div class="small-12 small-centered text-center">
      <ul class="tabs" data-tab data-options="deep_linking:true;scroll_to_content: false">
        <li class="tab-title active" data-magellan-arrival="Panel1"><a href="#Panel1" >Tab1</a></li>
        <li class="tab-title" data-magellan-arrival="Panel2"><a href="Panel2">Tab2</a></li>
        <li class="tab-title last" data-magellan-arrival="Panel3"><a href="#Panel3">Tab3</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="tabs-content">
  <div class="active" id="Panel1" >
    <a name="Panel1"></a>
    <div class="row" data-magellan-destination="Panel1">
      <!-- CONTENT -->
    </div>
  </div>
  <div id="Panel2" >
    <a name="Panel2"></a>
    <div class="row" data-magellan-destination="Panel2">
      <!-- CONTENT -->
    </div>
  </div>
  <div id="Panel3" >
    <a name="Panel3"></a>
    <div class="row" data-magellan-destination="Panel3">
      <!-- CONTENT -->
    </div>
  </div>
</div>

and I overruled a foundation.css style with

[data-magellan-expedition]{
  min-width: 100% !important;
}

I don't remember changing something other than the settings (threshold, fixed_top, etc) at the top in the JS files of Magellan or Tabs.

FYI - I'm not a web developer, I only learned by myself. I'm not saying this is the right way to do it but this works for me.

Hope this helps !

Best,

Eric

Eric Dumensil commented on Eric Dumensil's post almost 4 years

Thanks but I have already found the answer myself. :)

What I wanted is having a tab-bar somewhere on the page that become fixed as you scroll down and when clicking another tab when at the bottom of the page, it scrolls all the way to the top of the tab-content.

Eric Dumensil commented on Eric Dumensil's post almost 4 years

I'm not sure to understand, having medium-3 isn't enough??

Eric Dumensil commented on Collier's post almost 4 years

Should the modal code supposed to be at the end of your html body before the scripts?

Eric Dumensil commented on GregR's post almost 4 years

Hi,

I'm new to foundation and I would like to know how to set up your Magellan + Side-nav in your HTML?

Thanks

Eric Dumensil commented on Eric Dumensil's post almost 4 years

So far, the only thing that gets rid of it is :

*:focus {
    outline: none;
}

It's kinda bad since I don't really know what I need to target and this line removes the focus on ALL the elements....

Eric Dumensil commented on Eric Dumensil's post almost 4 years

So,

I managed to do something to fix this :

@media only screen and (max-width:23.438em) and (orientation:portrait){
  .reveal-modal{
    min-height: initial !important;
    top: 150px !important;
  }
}

I know it's not ideal, but It would be great if Foundation would provide an easier and cleaner way to do so.

Another bug en encountered now is touching outside the modal on iPhone doesn't close it. It works on iPad and desktop, but not on iPhone.

Anyone got that problem too?

Eric Dumensil commented on Eric Dumensil's post almost 4 years

Thanks Rafi

I realized that, on iPhone at least, the videos play automatically in fullscreen.

Now what i'm struggling with is the height of the reveal-modal being set to what appears to be something like 100vh on mobile and it place itself at top:0.

I managed to style it right on desktop and tablets. I must be missing something somewhere but I can't find where.....

Help!

Eric Dumensil commented on Eric Dumensil's post almost 4 years

Find what wasn't working.....

In my viewport meta in the Head, there was height=device-height. Getting rid of that fixed everything!

Posts Followed







Following

    No Content

Followers

My Posts

My Comments

You commented on Eric Dumensil's post over 3 years

Thanks Rafi,

I realized that it had a different fixed-top probably because I used a simulator, when viewing on an actual iPhone 4, everything was ok..

Thanks tho! :)

You commented on Eric Dumensil's post over 3 years

Sure, here's how my html looks like :

<div id="tabs-container" data-magellan-expedition="fixed">
  <div class="row">
    <div class="small-12 small-centered text-center">
      <ul class="tabs" data-tab data-options="deep_linking:true;scroll_to_content: false">
        <li class="tab-title active" data-magellan-arrival="Panel1"><a href="#Panel1" >Tab1</a></li>
        <li class="tab-title" data-magellan-arrival="Panel2"><a href="Panel2">Tab2</a></li>
        <li class="tab-title last" data-magellan-arrival="Panel3"><a href="#Panel3">Tab3</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="tabs-content">
  <div class="active" id="Panel1" >
    <a name="Panel1"></a>
    <div class="row" data-magellan-destination="Panel1">
      <!-- CONTENT -->
    </div>
  </div>
  <div id="Panel2" >
    <a name="Panel2"></a>
    <div class="row" data-magellan-destination="Panel2">
      <!-- CONTENT -->
    </div>
  </div>
  <div id="Panel3" >
    <a name="Panel3"></a>
    <div class="row" data-magellan-destination="Panel3">
      <!-- CONTENT -->
    </div>
  </div>
</div>

and I overruled a foundation.css style with

[data-magellan-expedition]{
  min-width: 100% !important;
}

I don't remember changing something other than the settings (threshold, fixed_top, etc) at the top in the JS files of Magellan or Tabs.

FYI - I'm not a web developer, I only learned by myself. I'm not saying this is the right way to do it but this works for me.

Hope this helps !

Best,

Eric

You commented on Eric Dumensil's post almost 4 years

Thanks but I have already found the answer myself. :)

What I wanted is having a tab-bar somewhere on the page that become fixed as you scroll down and when clicking another tab when at the bottom of the page, it scrolls all the way to the top of the tab-content.

You commented on Eric Dumensil's post almost 4 years

I'm not sure to understand, having medium-3 isn't enough??

You commented on Collier's post almost 4 years

Should the modal code supposed to be at the end of your html body before the scripts?

You commented on GregR's post almost 4 years

Hi,

I'm new to foundation and I would like to know how to set up your Magellan + Side-nav in your HTML?

Thanks

You commented on Eric Dumensil's post almost 4 years

So far, the only thing that gets rid of it is :

*:focus {
    outline: none;
}

It's kinda bad since I don't really know what I need to target and this line removes the focus on ALL the elements....

You commented on Eric Dumensil's post almost 4 years

So,

I managed to do something to fix this :

@media only screen and (max-width:23.438em) and (orientation:portrait){
  .reveal-modal{
    min-height: initial !important;
    top: 150px !important;
  }
}

I know it's not ideal, but It would be great if Foundation would provide an easier and cleaner way to do so.

Another bug en encountered now is touching outside the modal on iPhone doesn't close it. It works on iPad and desktop, but not on iPhone.

Anyone got that problem too?

You commented on Eric Dumensil's post almost 4 years

Thanks Rafi

I realized that, on iPhone at least, the videos play automatically in fullscreen.

Now what i'm struggling with is the height of the reveal-modal being set to what appears to be something like 100vh on mobile and it place itself at top:0.

I managed to style it right on desktop and tablets. I must be missing something somewhere but I can't find where.....

Help!

You commented on Eric Dumensil's post almost 4 years

Find what wasn't working.....

In my viewport meta in the Head, there was height=device-height. Getting rid of that fixed everything!

Posts Followed

Following

  • No Content

Followers

  • No Content