Menu icon Foundation

My Posts



  • 6
    Replies
  • Slider and Decimals?

    By jinch

    Foundation 6 / Slider

    Is it possible to have decimal places in the slider component? i.e. 10.125 ~ etc. ? I need to build a slider for inches and fractions.In the doc's I noticed the "data-decimal" attribute but when I added this nothing changed and the input value still ... (continued)

    Last Reply by Jackson about 1 month ago








  • 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 over 1 year ago


My Comments

jinch commented on jinch's post 2 months

If anyone is interested and wants a solution (not spam), just need to adjust the steps to the number of decimals.
Like so...
<div class="slider" data-slider data-options="precision:3; decimal:3; start:10; end:40; initial:20; step:0.001;">
<input type="number" step="0.001" id="x1">
_________________
Not sure whats up with this forum - nothing but spam lately.

jinch commented on jinch's post 5 months

spam

jinch commented on jinch's post 7 months

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 9 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.

jinch commented on jinch's post 9 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 10 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 about 1 year

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

 
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

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 over 1 year

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

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 almost 2 years 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 over 2 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on jinch's post 2 months

If anyone is interested and wants a solution (not spam), just need to adjust the steps to the number of decimals.
Like so...
<div class="slider" data-slider data-options="precision:3; decimal:3; start:10; end:40; initial:20; step:0.001;">
<input type="number" step="0.001" id="x1">
_________________
Not sure whats up with this forum - nothing but spam lately.

You commented on jinch's post 5 months

spam

You commented on jinch's post 7 months

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 9 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 9 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 10 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 about 1 year

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

 
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

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 over 1 year

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

Posts Followed

Following

  • No Content

Followers

  • No Content