Menu icon Foundation

My Posts





My Comments

Sam Stevens commented on Sam Stevens's post over 5 years

I'm not sure if this will work. With code straight out of the box, only a sliver of the Orbit sliders are visible. There seems to be a CSS conflict between Orbit and Tabs with regards to overflow/visibility. Maybe this is fixable with some CSS changes, but I haven't had luck so far.

        <dl class="tabs" data-tab>
          <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
          <dd><a href="#panel2-2">Tab 2</a></dd>
          <dd><a href="#panel2-3">Tab 3</a></dd>
          <dd><a href="#panel2-4">Tab 4</a></dd>
        </dl>
        <div class="tabs-content">
          <div class="content active" id="panel2-1">
            <ul class="orbit-content" data-orbit>
              <li data-orbit-slide="headline-1">
                <div>
                  <h2>Headline 1</h2>
                  <h3>Subheadline</h3>
                </div>
              </li>
              <li data-orbit-slide="headline-2">
                <div>
                  <h2>Headline 2</h2>
                  <h3>Subheadline</h3>
                </div>
              </li>
              <li data-orbit-slide="headline-3">
                <div>
                  <h2>Headline 3</h2>
                  <h3>Subheadline</h3>
                </div>
              </li>
            </ul>
          </div>
          <div class="content" id="panel2-2">
            <ul class="orbit-content" data-orbit>
              <li data-orbit-slide="headline-1">
                <div>
                  <h2>Headline 1</h2>
                  <h3>Subheadline</h3>
                </div>
              </li>
              <li data-orbit-slide="headline-2">
                <div>
                  <h2>Headline 2</h2>
                  <h3>Subheadline</h3>
                </div>
              </li>
              <li data-orbit-slide="headline-3">
                <div>
                  <h2>Headline 3</h2>
                  <h3>Subheadline</h3>
                </div>
              </li>
            </ul>
          </div>
          <div class="content" id="panel2-3">
            <p>Third panel content goes here...</p>
          </div>
          <div class="content" id="panel2-4">
            <p>Fourth panel content goes here...</p>
          </div>
        </div>

Sam Stevens commented on Sam Stevens's post over 5 years

Thank you! I agree, I think this has to do with how the JS works. I'm guessing it wasn't written with nested tabs in mind. I looked at the tabs.js file but writing a new function based on this is a bit outside my abilities, so for now I will try an Orbit slider inside Tabs. Thanks again!

Sam Stevens commented on Sam Stevens's post over 5 years

This is working for me:

 <script>
function PrintContent()
{
var DocumentContainer = document.getElementById('scorecard');
var WindowObject = window.open("", "PrintWindow",
"width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
WindowObject.document.writeln('<!DOCTYPE html>');
WindowObject.document.writeln('<html><head><title></title>');
var str = "<style type='text/css' media='all'>";
      str = str + "MyStyles { text-align: center; }";
            str = str + "</style>";
 WindowObject.document.writeln(str);
WindowObject.document.writeln('</head><body>');
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.writeln('</body></html>');
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}
</script>

Sam Stevens commented on Sam Stevens's post over 5 years

A solution I thought of was using an Orbit slider inside a div with horizontal tabs. But can I disable animation completely in an Orbit slider? Or, maybe just set timer_speed to something ridiculously long. It's not the cleanest solution but it would work. I'd prefer nested tabs though. Possible?

Sam Stevens commented on chegoon's post over 5 years

Just ran into this too. Two modals on a page, each using flex-video class, and both loading iFrames. I can make one work, but then the other shows up blank. Creating a new flex-video class as suggested. Thank you!

Sam Stevens commented on Sam Stevens's post over 5 years

Yup, I see that error in the console! Nice one, MIME type would not have occurred to me. I'll look into this fix. Thank you!

Sam Stevens commented on Sam Stevens's post over 5 years

Thank you for your reply, I just saw this!

Yes, I want the Next link to open panel2-3 (with text: "Tab 1, panel 2").

No problems with styling, just getting the nested nav working. Any tips greatly appreciated!

Sam Stevens commented on Sam Stevens's post over 5 years

Thank you very much for your response. I'm relieved: it's some kind of local issue on my system. CSS paths are fine, and CSS works locally for all the other browser I tested, but not in IE10. I have to view the page on the remote server for IE10 to load the CSS. Similarly, I only get the ActiveX error locally, not when viewing on the server. And this is happening for any HTML page I try to view locally with IE10, not just F5 pages, so it's some local setting causing this.

Thanks again!

Sam Stevens commented on Ben W's post over 5 years

The class is: .top-bar .toggle-topbar.menu-icon a span

Change the color of the shadow.

Posts Followed

No Content

Following

    No Content

Followers

My Posts




My Comments

You commented on Sam Stevens's post over 5 years

I'm not sure if this will work. With code straight out of the box, only a sliver of the Orbit sliders are visible. There seems to be a CSS conflict between Orbit and Tabs with regards to overflow/visibility. Maybe this is fixable with some CSS changes, but I haven't had luck so far.

        <dl class="tabs" data-tab>
          <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
          <dd><a href="#panel2-2">Tab 2</a></dd>
          <dd><a href="#panel2-3">Tab 3</a></dd>
          <dd><a href="#panel2-4">Tab 4</a></dd>
        </dl>
        <div class="tabs-content">
          <div class="content active" id="panel2-1">
            <ul class="orbit-content" data-orbit>
              <li data-orbit-slide="headline-1">
                <div>
                  <h2>Headline 1</h2>
                  <h3>Subheadline</h3>
                </div>
              </li>
              <li data-orbit-slide="headline-2">
                <div>
                  <h2>Headline 2</h2>
                  <h3>Subheadline</h3>
                </div>
              </li>
              <li data-orbit-slide="headline-3">
                <div>
                  <h2>Headline 3</h2>
                  <h3>Subheadline</h3>
                </div>
              </li>
            </ul>
          </div>
          <div class="content" id="panel2-2">
            <ul class="orbit-content" data-orbit>
              <li data-orbit-slide="headline-1">
                <div>
                  <h2>Headline 1</h2>
                  <h3>Subheadline</h3>
                </div>
              </li>
              <li data-orbit-slide="headline-2">
                <div>
                  <h2>Headline 2</h2>
                  <h3>Subheadline</h3>
                </div>
              </li>
              <li data-orbit-slide="headline-3">
                <div>
                  <h2>Headline 3</h2>
                  <h3>Subheadline</h3>
                </div>
              </li>
            </ul>
          </div>
          <div class="content" id="panel2-3">
            <p>Third panel content goes here...</p>
          </div>
          <div class="content" id="panel2-4">
            <p>Fourth panel content goes here...</p>
          </div>
        </div>

You commented on Sam Stevens's post over 5 years

Thank you! I agree, I think this has to do with how the JS works. I'm guessing it wasn't written with nested tabs in mind. I looked at the tabs.js file but writing a new function based on this is a bit outside my abilities, so for now I will try an Orbit slider inside Tabs. Thanks again!

You commented on Sam Stevens's post over 5 years

This is working for me:

 <script>
function PrintContent()
{
var DocumentContainer = document.getElementById('scorecard');
var WindowObject = window.open("", "PrintWindow",
"width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
WindowObject.document.writeln('<!DOCTYPE html>');
WindowObject.document.writeln('<html><head><title></title>');
var str = "<style type='text/css' media='all'>";
      str = str + "MyStyles { text-align: center; }";
            str = str + "</style>";
 WindowObject.document.writeln(str);
WindowObject.document.writeln('</head><body>');
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.writeln('</body></html>');
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}
</script>

You commented on Sam Stevens's post over 5 years

A solution I thought of was using an Orbit slider inside a div with horizontal tabs. But can I disable animation completely in an Orbit slider? Or, maybe just set timer_speed to something ridiculously long. It's not the cleanest solution but it would work. I'd prefer nested tabs though. Possible?

You commented on chegoon's post over 5 years

Just ran into this too. Two modals on a page, each using flex-video class, and both loading iFrames. I can make one work, but then the other shows up blank. Creating a new flex-video class as suggested. Thank you!

You commented on Sam Stevens's post over 5 years

Yup, I see that error in the console! Nice one, MIME type would not have occurred to me. I'll look into this fix. Thank you!

You commented on Sam Stevens's post over 5 years

Thank you for your reply, I just saw this!

Yes, I want the Next link to open panel2-3 (with text: "Tab 1, panel 2").

No problems with styling, just getting the nested nav working. Any tips greatly appreciated!

You commented on Sam Stevens's post over 5 years

Thank you very much for your response. I'm relieved: it's some kind of local issue on my system. CSS paths are fine, and CSS works locally for all the other browser I tested, but not in IE10. I have to view the page on the remote server for IE10 to load the CSS. Similarly, I only get the ActiveX error locally, not when viewing on the server. And this is happening for any HTML page I try to view locally with IE10, not just F5 pages, so it's some local setting causing this.

Thanks again!

You commented on Ben W's post over 5 years

The class is: .top-bar .toggle-topbar.menu-icon a span

Change the color of the shadow.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content