Menu icon Foundation

Developer | Liechtenstein / Switzerland

My Posts

No Content

My Comments

Dimitris Gerasopoulos commented on Tobias Malikowski's post 7 months

In my case that helped
$("[data-reveal]").each(function () {
if (!$(this).data('zfPlugin')) {
$(this).foundation();
}
});
 

Dimitris Gerasopoulos commented on Tobias Malikowski's post 7 months

In my case that helped
$("[data-reveal]").each(function () {
if (!$(this).data('zfPlugin')) {
$(this).foundation();
}
});

Dimitris Gerasopoulos commented on Luca Bianco's post almost 3 years

Hi Aaron.Sorry for the late response :).
So i think that you want to set a cookie in order to show this modal just once as lon as the user navigates to your site.In this case i would suggest the window.sessionStorage. ( https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage ). Then you could use something like this :
$(document).ready(function() {

var $modal = $('#exampleModal8');//define your variables
var delay = 2000;

//check if session variable exists.
//If NOT then call your function.
if (!sessionStorage.getItem("is_already_opened_once")) {
modalHandler($modal,delay);//call your function
}

function modalHandler($modal,delay){
$modal.foundation('open');
setTimeout(function(){
$modal.foundation('close');
//set the session_variable
sessionStorage.setItem('is_already_opened_once', true);
},delay);
}

});
 
I hope that helps.
 
P.S: You can check also window.localStorage (https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), in case you want another behavior.The code sample will be almost the same.
The sessionStorage property allows you to access a session Storage object for the current origin. sessionStorage is similar to Window.localStorage, the only difference is while data stored in localStorage has no expiration set, data stored in sessionStorage gets cleared when the page session ends. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work.

Dimitris Gerasopoulos commented on Carlos Giovano's post about 3 years

 Ok i see. The problem is that you use foundation 6 as you mentioned in your first comment, but you ve got the code from the wrong documentation. The link you sent me refers to version 5.
I suggest you to copy the exact code i sent you to my first comment.this will work like a charm.
 
Hope that helps :)
 

Dimitris Gerasopoulos commented on Carlos Giovano's post about 3 years

Maybe you could share your code in codepen.

Dimitris Gerasopoulos commented on jeremy summers's post about 3 years

Hi Jeremy,
You could use something like this :
 
$(document).foundation();

$('#toggleDiv').on('click', function(){
$('#myHiddenDiv').toggle();
Foundation.reInit('slider');
})
 
More about reInit you can find here: https://foundation.zurb.com/sites/docs/javascript.html#adding-content-to-plugins

Dimitris Gerasopoulos commented on steq's post about 3 years

Hi Steq,
 
I think you should disable equalizer plugin on small viewport by adding the attribute data-equalize-on="medium". You can simply change your code like this :
<div class="row info__row" data-equalizer="solution" data-equalize-on="medium" data-equalize-on-stack="false">

...

</div>
 
You can read more about the equalizer plugin options here : http://foundation.zurb.com/sites/docs/equalizer.html#js-options

Dimitris Gerasopoulos commented on Carlos Giovano's post about 3 years

Hi Carlos you could use something like that :
<button class="dropdown button" type="button" data-toggle="drop1">Dropdown Button</button>

<div class="dropdown-pane" id="drop1" data-dropdown data-auto-focus="true">
<ul>
<li><a href="#">This is a link </a></li>
<li><a href="#">This is another </a></li>
<li><a href="#">Yet another </a></li>
</ul>
</div>
In your example, i think you are missing the class "dropdown-pane" in your list element.
 
You can check the full documentation here : http://foundation.zurb.com/sites/docs/dropdown.html

Dimitris Gerasopoulos commented on Max Ma's post about 3 years

 Nice glad you found that helpful :)

Dimitris Gerasopoulos commented on Max Ma's post about 3 years

I think you should take a look here :
http://foundation.zurb.com/sites/docs/media-queries.html
 
In your case you need something like this:
/* Small only */
@media screen and (max-width: 39.9375em) {
.my_box{
position:static;
}
}

/* Medium and up */
@media screen and (min-width: 40em) {
.my_box{
position:fixed;
}
}
 
P.S: em values in this example are the default values, maybe you need to change these according to your grid.

Posts Followed


  • 7
    Replies
  • How to remove empty space?

    By steq

    empty spacesmall screenimage

    Foundation 6&nbsp;doing a lot of empty space around the image on the small screen. Why? Help me, anybody! &lt;div class="row info__row" data-equalizer="solution" data-equalize-on-stack="false"&gt; &lt;div data-equalizer-watch="solution" class="large-12... (continued)

    Last Reply by steq about 3 years ago



  • 4
    Replies
  • How to style the Grid-System?

    By Max Ma

    style gird

    I want to style&nbsp;a box that is position is fixed in medium-colmun and up, and want it back to position:static in the small-column. since the class names all are listed in a line &lt;div class='column small-12 medium-6 small-centered'&gt;. I have not i... (continued)

    Last Reply by Rafi Benkual about 3 years ago







Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Tobias Malikowski's post 7 months

In my case that helped
$("[data-reveal]").each(function () {
if (!$(this).data('zfPlugin')) {
$(this).foundation();
}
});
 

You commented on Tobias Malikowski's post 7 months

In my case that helped
$("[data-reveal]").each(function () {
if (!$(this).data('zfPlugin')) {
$(this).foundation();
}
});

You commented on Luca Bianco's post almost 3 years

Hi Aaron.Sorry for the late response :).
So i think that you want to set a cookie in order to show this modal just once as lon as the user navigates to your site.In this case i would suggest the window.sessionStorage. ( https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage ). Then you could use something like this :
$(document).ready(function() {

var $modal = $('#exampleModal8');//define your variables
var delay = 2000;

//check if session variable exists.
//If NOT then call your function.
if (!sessionStorage.getItem("is_already_opened_once")) {
modalHandler($modal,delay);//call your function
}

function modalHandler($modal,delay){
$modal.foundation('open');
setTimeout(function(){
$modal.foundation('close');
//set the session_variable
sessionStorage.setItem('is_already_opened_once', true);
},delay);
}

});
 
I hope that helps.
 
P.S: You can check also window.localStorage (https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), in case you want another behavior.The code sample will be almost the same.
The sessionStorage property allows you to access a session Storage object for the current origin. sessionStorage is similar to Window.localStorage, the only difference is while data stored in localStorage has no expiration set, data stored in sessionStorage gets cleared when the page session ends. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work.

You commented on Carlos Giovano's post about 3 years

 Ok i see. The problem is that you use foundation 6 as you mentioned in your first comment, but you ve got the code from the wrong documentation. The link you sent me refers to version 5.
I suggest you to copy the exact code i sent you to my first comment.this will work like a charm.
 
Hope that helps :)
 

You commented on Carlos Giovano's post about 3 years

Maybe you could share your code in codepen.

You commented on jeremy summers's post about 3 years

Hi Jeremy,
You could use something like this :
 
$(document).foundation();

$('#toggleDiv').on('click', function(){
$('#myHiddenDiv').toggle();
Foundation.reInit('slider');
})
 
More about reInit you can find here: https://foundation.zurb.com/sites/docs/javascript.html#adding-content-to-plugins

You commented on steq's post about 3 years

Hi Steq,
 
I think you should disable equalizer plugin on small viewport by adding the attribute data-equalize-on="medium". You can simply change your code like this :
<div class="row info__row" data-equalizer="solution" data-equalize-on="medium" data-equalize-on-stack="false">

...

</div>
 
You can read more about the equalizer plugin options here : http://foundation.zurb.com/sites/docs/equalizer.html#js-options

You commented on Carlos Giovano's post about 3 years

Hi Carlos you could use something like that :
<button class="dropdown button" type="button" data-toggle="drop1">Dropdown Button</button>

<div class="dropdown-pane" id="drop1" data-dropdown data-auto-focus="true">
<ul>
<li><a href="#">This is a link </a></li>
<li><a href="#">This is another </a></li>
<li><a href="#">Yet another </a></li>
</ul>
</div>
In your example, i think you are missing the class "dropdown-pane" in your list element.
 
You can check the full documentation here : http://foundation.zurb.com/sites/docs/dropdown.html

You commented on Max Ma's post about 3 years

 Nice glad you found that helpful :)

You commented on Max Ma's post about 3 years

I think you should take a look here :
http://foundation.zurb.com/sites/docs/media-queries.html
 
In your case you need something like this:
/* Small only */
@media screen and (max-width: 39.9375em) {
.my_box{
position:static;
}
}

/* Medium and up */
@media screen and (min-width: 40em) {
.my_box{
position:fixed;
}
}
 
P.S: em values in this example are the default values, maybe you need to change these according to your grid.

Posts Followed

Following

  • No Content

Followers

  • No Content