Menu icon Foundation

My Posts






  • 2
    Replies
  • Foundation 6.3 Width?

    By jinch

    Foundationwidth

    Curious as to what the modern standard is for screen width is these days? Seems like every year desktops res is only growing in size.Looks like foundation is still using ~1200px row width as it's base but I am seeing more and more sites beyond 1400px wide... (continued)

    Last Reply by jinch about 1 year ago


  • 4
    Replies
  • Printing a Reveal Modal - F6.3?

    By jinch

    Foundation 6.3revealAJAX

    So I had some luck printing a reveal modal thanks to this post on stackoverflow - (http://stackoverflow.com/questions/12181760/twitter-bootstrap-print-content-of-modal-window) However, the code used has the problem of not letting me print any other&... (continued)

    Last Reply by jinch about 1 year ago



  • NEW
  • Off-Canvas v6.3 - One at a time?

    By jinch

    Foundation 6.3off-canvas

    I have a left and a right off-canvas menu that is triggered from a fixed nav bar. Everything works great, however, both menus can be opened simultaneously and on mobile these off-canvas menus can overlap each other. Is there a built in function to preven... (continued)



My Comments

jinch commented on jinch's post 28 days

Thanks Chirag but not sure this will work for all modals. I'm looking for a more universal way to prevent this background click triggering the close of the modal on all of them - not just the ones with that data-option.

jinch commented on jinch's post 3 months

 Ok - i think i figured it out by amending the query string with the video ID:
https://codepen.io/jinch/full/eMJRrY?play=vid002&showModal=yes
 
Now just need to figure out how to make it autoplay.

jinch commented on jinch's post 3 months

I know this is an older post now but wondering if this can be amended to work with multiple models? 
I'm tasked with creating a video library ~ and each video will need to have there own model with a unique ID. Is it possible to have the query string include a unique ID that can be called on in a URL?
Here is a codePen to demo what I currently have setup (https://codepen.io/jinch/full/eMJRrY?showModal=yes). This works but unfortunately is not specific to call the individual model and instead opens both of them. Also, I would like to get this to autoplay once opened but the code I have commented out calls both to play at the same time.
Any thoughts or suggestions to get this to work?
HTML:
<div class="row small-up-2 medium-up-3 large-up-4">
<div class="column column-block">
<a href="#" class="vidLink" data-open="vid-001">
<img src="../images/Binder-and-Slip-Case-Sets-Archival-Methods-18-feature.jpg" class="thumbnail" alt="">
<h6>Albums and Pages</h6>
</a>
<!--Start Modal Reveal-->
<div class="small reveal openVideo" id="vid-001" data-reveal data-reset-on-close="true">
<h5>Albums and Pages</h5>
<div class="responsive-embed widescreen">
<iframe src="https://www.youtube.com/embed/XQWAeNbXZtI?enablejsapi=1&amp;amp;version=3&amp;amp;playerapi&amp;amp;rel=0&amp;amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">&times;</span>
</button>
</div>
<!--End Modal Reveal-->
</div>

              &lt;div class="column column-block"&gt;
              &lt;a href="#" class="vidLink" data-open="vid-002"&gt;
                &lt;img src="https://placehold.it/330x248" class="thumbnail" alt=""&gt;
                &lt;h6&gt;35mm Slide Storage&lt;/h6&gt;
              &lt;/a&gt;
              &lt;!--Start Modal Reveal--&gt;
              &lt;div class="small reveal openVideo" id="vid-002" data-reveal data-reset-on-close="true"&gt;
                &lt;h5&gt;35mm Slide Storage&lt;/h5&gt;
                &lt;div class="responsive-embed widescreen"&gt;
                  &lt;iframe src="https://www.youtube.com/embed/c361iSyVIeU?enablejsapi=1&amp;amp;version=3&amp;amp;playerapi&amp;amp;rel=0&amp;amp;showinfo=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
                &lt;/div&gt;          
                &lt;button class="close-button" data-close aria-label="Close reveal" type="button"&gt;
                  &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
              &lt;!--End Modal Reveal--&gt;
              &lt;/div&gt;</code></pre>

 
JAVASCRIPT
/*START - OPEN VIDEO MODAL FROM EXTERNAL LINK + AUTOPLAY */

/Opening modal from external link reference (http://foundation.zurb.com/forum/posts/35072-how-to-launch-reveal-modal-from-external-link)/
function getQueryVariable(variable) {
//var videoID =
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}

if (window.location.search) {
var showModal = getQueryVariable('showModal');
if (showModal == 'yes') {
$('.openVideo').foundation('open');
/$('.openVideo iframe')[0].src += "&autoplay=1";/
/$('.openVideo iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '');*/
}
}

/Detect when modal is open and auto play youTube Video */
/
$(document).ready(function() {
$('.openVideo').on('open.zf.reveal', function() {
$('.openVideo iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '');
});
});
/
/*END - OPEN VIDEO MODAL FROM EXTERNAL LINK + AUTOPLAY */

jinch commented on jinch's post 5 months

Ok - so if anyone else is looking for a solution for this ~ you can do it with javascript like so:
 <a id="deepLink1">DEEP LINK 1</a>
<script>
function open_tab(tab_id,panel) {
$("#"+tab_id).foundation("selectTab",$("#"+panel));
}
$("#deepLink1").on('click',function() {
$("#example-tabs").foundation("selectTab",$("#panel1")),
$("#example-tabs-vert").foundation("selectTab",$("#panel3v"))
});
</script>
 
And the Tabs:
<div class="row">
<div class="medium-12 columns">
<ul class="tabs" data-tabs id="example-tabs" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true">
<li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
<li class="tabs-title"><a data-tabs-target="panel2" href="#panel2">Tab 2</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1">
<div class="row collapse">
<div class="medium-3 columns">
<ul class="vertical tabs" data-tabs id="example-tabs-vert" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true">
<li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li>
<li class="tabs-title"><a href="#panel2v">Tab 2</a></li>
<li class="tabs-title"><a href="#panel3v">Tab 3</a></li>
</ul>
</div>
<div class="medium-9 columns">
<div class="tabs-content" data-tabs-content="example-tabs-vert">
<div class="tabs-panel is-active" id="panel1v">
<p>One</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel2v">
<p>Two</p>
<img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
</div>
<div class="tabs-panel" id="panel3v">
<p>Three</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
</div>
</div>
</div>
</div>
<div class="tabs-panel" id="panel2">
<p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
</div>
</div>
</div>
</div>
 

jinch commented on jinch's post 9 months

Does anyone have a possible solution? Seams like Im not the only one in need to closing the accordion aspect to these "Responsive Accordion Tabs". Basically trying to find away to close all accordions on mobile and force open the initial tab on destop.
I have tried a few variations of Javascript to do this but nothing seams to work?
$(window).on("load resize",function(){
"use strict";
if (Foundation.MediaQuery.current == ('small')) {
$('ul.accordion li.accordion-item').toggleClass('is-active');
/$("li.accordion-item").foundation('toggle',$(".is-active"));/
}
});
Is there any work around to this?
Thanks
> j

jinch commented on jinch's post 9 months

 
Does anyone have a possible solution? Seams like Im not the only one in need to closing the accordion aspect to these "Responsive Accordion Tabs". Basically trying to find away to close all accordions on mobile and force open the initial tab on destop.
I have tried a few variations of Javascript to do this but nothing seams to work?
$(window).on("load resize",function(){
"use strict";
if (Foundation.MediaQuery.current == ('small')) {
$('ul.accordion li.accordion-item').toggleClass('is-active');
/$("li.accordion-item").foundation('toggle',$(".is-active"));/
}
});
 Is there any work around to this?
Thanks
> j

jinch commented on jinch's post 9 months

Does anyone have a possible solution? Seams like Im not the only one in need to closing the accordion aspect to these "Responsive Accordion Tabs". Basically trying to find away to close all accordions on mobile and force open the initial tab on destop.
I have tried a few variations of Javascript to do this but nothing seams to work?
$(window).on("load resize",function(){
"use strict";
if (Foundation.MediaQuery.current == ('small')) {
$('ul.accordion li.accordion-item').toggleClass('is-active');
/$("li.accordion-item").foundation('toggle',$(".is-active"));/
}
});
 Is there any work around to this?
Thanks
> j

jinch commented on jinch's post about 1 year

Awesome tip Igor!Thank you for sharing.Much appreciated.

jinch commented on Alexander Graham's post about 1 year

@Leif
Thanks for sharing your resolution :). I ended up avoiding the animation on my end for the sake of progress but with this I may give it another go.
~  appreciated

jinch commented on jinch's post about 1 year

Hi Rafi,Sorry for the slow reply. Here are a few examples I pulled that includes some heavy hitters.Amazon (maxed to 1500 wide);Hulu (rocking 1600 wide);Netflix (Doesn't appear to have any max-width - 100%);The trend just seams to be getting larger with higher res monitors become more common place. The latest data from StatCounter (http://gs.statcounter.com/screen-resolution-stats/desktop/worldwide), 1366×768 screens just surpassed 1024×768 as the most popular screen resolution and even that I think may be on the small side. From a designer/developer perspective, we are usually working on more top end equipment so hard for us to gage the standard as we are mostly at the top of that bell curve.

Posts Followed




  • 1
    Reply
  • Conflict Select 2 With Reveal

    By Mantis

    select2

    Hi,i have a problem with select2 and the plugin Jquery Reveal.When i remove an item from select2 with property : multiple, the reveal modal closes. Last method of select2 called before close the reveal modal.Line 3074 of https://cdnjs.cloudflare.com/ajax... (continued)

    Last Reply by jinch over 1 year ago







  • 1
    Reply
  • Advice for table-responsive js

    By Luca Spanò

    tables

    Hi guys, what do you think about to add a simple and fast js with functionalities like "stacktable" in Foundation library? The "stack" mode is very usefull for small device! http://johnpolacek.github.io/stacktable.js/ The current js "table-respo... (continued)

    Last Reply by jinch almost 2 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on jinch's post 28 days

Thanks Chirag but not sure this will work for all modals. I'm looking for a more universal way to prevent this background click triggering the close of the modal on all of them - not just the ones with that data-option.

You commented on jinch's post 3 months

 Ok - i think i figured it out by amending the query string with the video ID:
https://codepen.io/jinch/full/eMJRrY?play=vid002&amp;showModal=yes
 
Now just need to figure out how to make it autoplay.

You commented on jinch's post 3 months

I know this is an older post now but wondering if this can be amended to work with multiple models? 
I'm tasked with creating a video library ~ and each video will need to have there own model with a unique ID. Is it possible to have the query string include a unique ID that can be called on in a URL?
Here is a codePen to demo what I currently have setup (https://codepen.io/jinch/full/eMJRrY?showModal=yes). This works but unfortunately is not specific to call the individual model and instead opens both of them. Also, I would like to get this to autoplay once opened but the code I have commented out calls both to play at the same time.
Any thoughts or suggestions to get this to work?
HTML:
<div class="row small-up-2 medium-up-3 large-up-4">
<div class="column column-block">
<a href="#" class="vidLink" data-open="vid-001">
<img src="../images/Binder-and-Slip-Case-Sets-Archival-Methods-18-feature.jpg" class="thumbnail" alt="">
<h6>Albums and Pages</h6>
</a>
<!--Start Modal Reveal-->
<div class="small reveal openVideo" id="vid-001" data-reveal data-reset-on-close="true">
<h5>Albums and Pages</h5>
<div class="responsive-embed widescreen">
<iframe src="https://www.youtube.com/embed/XQWAeNbXZtI?enablejsapi=1&amp;amp;version=3&amp;amp;playerapi&amp;amp;rel=0&amp;amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">&times;</span>
</button>
</div>
<!--End Modal Reveal-->
</div>

              &lt;div class="column column-block"&gt;
              &lt;a href="#" class="vidLink" data-open="vid-002"&gt;
                &lt;img src="https://placehold.it/330x248" class="thumbnail" alt=""&gt;
                &lt;h6&gt;35mm Slide Storage&lt;/h6&gt;
              &lt;/a&gt;
              &lt;!--Start Modal Reveal--&gt;
              &lt;div class="small reveal openVideo" id="vid-002" data-reveal data-reset-on-close="true"&gt;
                &lt;h5&gt;35mm Slide Storage&lt;/h5&gt;
                &lt;div class="responsive-embed widescreen"&gt;
                  &lt;iframe src="https://www.youtube.com/embed/c361iSyVIeU?enablejsapi=1&amp;amp;version=3&amp;amp;playerapi&amp;amp;rel=0&amp;amp;showinfo=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
                &lt;/div&gt;          
                &lt;button class="close-button" data-close aria-label="Close reveal" type="button"&gt;
                  &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
              &lt;!--End Modal Reveal--&gt;
              &lt;/div&gt;</code></pre>

 
JAVASCRIPT
/*START - OPEN VIDEO MODAL FROM EXTERNAL LINK + AUTOPLAY */

/Opening modal from external link reference (http://foundation.zurb.com/forum/posts/35072-how-to-launch-reveal-modal-from-external-link)/
function getQueryVariable(variable) {
//var videoID =
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}

if (window.location.search) {
var showModal = getQueryVariable('showModal');
if (showModal == 'yes') {
$('.openVideo').foundation('open');
/$('.openVideo iframe')[0].src += "&autoplay=1";/
/$('.openVideo iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '');*/
}
}

/Detect when modal is open and auto play youTube Video */
/
$(document).ready(function() {
$('.openVideo').on('open.zf.reveal', function() {
$('.openVideo iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '');
});
});
/
/*END - OPEN VIDEO MODAL FROM EXTERNAL LINK + AUTOPLAY */

You commented on jinch's post 5 months

Ok - so if anyone else is looking for a solution for this ~ you can do it with javascript like so:
 <a id="deepLink1">DEEP LINK 1</a>
<script>
function open_tab(tab_id,panel) {
$("#"+tab_id).foundation("selectTab",$("#"+panel));
}
$("#deepLink1").on('click',function() {
$("#example-tabs").foundation("selectTab",$("#panel1")),
$("#example-tabs-vert").foundation("selectTab",$("#panel3v"))
});
</script>
 
And the Tabs:
<div class="row">
<div class="medium-12 columns">
<ul class="tabs" data-tabs id="example-tabs" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true">
<li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
<li class="tabs-title"><a data-tabs-target="panel2" href="#panel2">Tab 2</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1">
<div class="row collapse">
<div class="medium-3 columns">
<ul class="vertical tabs" data-tabs id="example-tabs-vert" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true">
<li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li>
<li class="tabs-title"><a href="#panel2v">Tab 2</a></li>
<li class="tabs-title"><a href="#panel3v">Tab 3</a></li>
</ul>
</div>
<div class="medium-9 columns">
<div class="tabs-content" data-tabs-content="example-tabs-vert">
<div class="tabs-panel is-active" id="panel1v">
<p>One</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel2v">
<p>Two</p>
<img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
</div>
<div class="tabs-panel" id="panel3v">
<p>Three</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
</div>
</div>
</div>
</div>
<div class="tabs-panel" id="panel2">
<p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
</div>
</div>
</div>
</div>
 

You commented on jinch's post 9 months

Does anyone have a possible solution? Seams like Im not the only one in need to closing the accordion aspect to these "Responsive Accordion Tabs". Basically trying to find away to close all accordions on mobile and force open the initial tab on destop.
I have tried a few variations of Javascript to do this but nothing seams to work?
$(window).on("load resize",function(){
"use strict";
if (Foundation.MediaQuery.current == ('small')) {
$('ul.accordion li.accordion-item').toggleClass('is-active');
/$("li.accordion-item").foundation('toggle',$(".is-active"));/
}
});
Is there any work around to this?
Thanks
> j

You commented on jinch's post 9 months

 
Does anyone have a possible solution? Seams like Im not the only one in need to closing the accordion aspect to these "Responsive Accordion Tabs". Basically trying to find away to close all accordions on mobile and force open the initial tab on destop.
I have tried a few variations of Javascript to do this but nothing seams to work?
$(window).on("load resize",function(){
"use strict";
if (Foundation.MediaQuery.current == ('small')) {
$('ul.accordion li.accordion-item').toggleClass('is-active');
/$("li.accordion-item").foundation('toggle',$(".is-active"));/
}
});
 Is there any work around to this?
Thanks
> j

You commented on jinch's post 9 months

Does anyone have a possible solution? Seams like Im not the only one in need to closing the accordion aspect to these "Responsive Accordion Tabs". Basically trying to find away to close all accordions on mobile and force open the initial tab on destop.
I have tried a few variations of Javascript to do this but nothing seams to work?
$(window).on("load resize",function(){
"use strict";
if (Foundation.MediaQuery.current == ('small')) {
$('ul.accordion li.accordion-item').toggleClass('is-active');
/$("li.accordion-item").foundation('toggle',$(".is-active"));/
}
});
 Is there any work around to this?
Thanks
> j

You commented on jinch's post about 1 year

Awesome tip Igor!Thank you for sharing.Much appreciated.

You commented on Alexander Graham's post about 1 year

@Leif
Thanks for sharing your resolution :). I ended up avoiding the animation on my end for the sake of progress but with this I may give it another go.
~  appreciated

You commented on jinch's post about 1 year

Hi Rafi,Sorry for the slow reply. Here are a few examples I pulled that includes some heavy hitters.Amazon (maxed to 1500 wide);Hulu (rocking 1600 wide);Netflix (Doesn't appear to have any max-width - 100%);The trend just seams to be getting larger with higher res monitors become more common place. The latest data from StatCounter (http://gs.statcounter.com/screen-resolution-stats/desktop/worldwide), 1366×768 screens just surpassed 1024×768 as the most popular screen resolution and even that I think may be on the small side. From a designer/developer perspective, we are usually working on more top end equipment so hard for us to gage the standard as we are mostly at the top of that bell curve.

Posts Followed

Following

  • No Content

Followers

  • No Content