Menu icon Foundation

Developer | Stockholm, Sweden

I enjoy spending hours and hours at the gy... Computer writing lines of Ruby endlessly into my IRB Console. I also love a good night out with all my f... Templates, Codesnippets, IDE's and Energy Drinks, we really get a long well. Especially Energy Drinks, they just love me, and I love them equally as much if not more so.

My Posts



My Comments

Fredric Tillberg commented on Alley Hector's post about 5 years

http://stackoverflow.com/questions/6994556/defining-variable-overides-in-sass-scss

Found this after 2 searches on google. It might be what you're looking for.

As they've stated on that page;
You cannot achieve the variable override the way that you've proposed, but there are alternatives that achieve the same effect.

However, I'll stick to what I said earlier; about making these things static.

You want one topbar with one colour, and another topbar with another colour, it's that simple.

If you wanted a whole lot more elements that used these variable sets, then this would definitely be a viable option.
But when you're only talking about 8 lines of code, then you're better off using different variables for the different topbars, instead of all those includes and the mixins.

Fredric Tillberg commented on Cezary Kluczyński's post about 5 years

Setting the body to a relative position basically means that you're telling the body to attach itself to 0, 0 (window origin), which is at the top left corner of the screen.

If you we're to have an off canvas on your page, and that off canvas wanted to push the entire body 400px to the right (left: 400px) while itself remains at the top left corner of the screen at 400px wide, then this is how you do it.
This allows for the entire page to be pushed off screen to make room for the off canvas, instead of squishing an otherwise fluid layout to compensate for the off canvas.

I never really thought about Why I added that position to the body element since it's bad practice to have the body anywhere else than at 0, 0 and a 100% width and height - but it does allow for the body to be manipulated like any other element.

When playing around with sidebars like the off canvas, I usually have it come in from the side and float above whatever content it might touch. But this is just a personal preference.

Fredric Tillberg commented on JapperCat's post about 5 years

The row itself will not center child elements within it, unless they themselves are set to 100% width.

If you really want to have your carousel at a fixed width, let's say; 301.1px, then I suggest wrapping the carousel with a div and giving that div the following css properties;

position: relative;
width: 301.1px;
margin: 0 auto;

This wrapper should now push an equal amount to the left as it does to the right, and with it's fixed width within a fluid parent, it will center itself.

If this does not work for you, I advice you to post a codepen or alike so that we can see what's we're dealing with, cause right now I'm going in blind.
Might turn out that you do not have a fixed with on the carousel, but I don't know that =)

Let me know how it turns out.

Fredric Tillberg commented on Alley Hector's post about 5 years

Just duplicate the variables with the new colours and use the new variables for the secondary menu.
I'm unaware of any method for changing the variable value based upon the class or id that is requesting it.

Besides, any such method would require far more lines of code that just adding an additional 4 variables with a unique set of colours.

$secondary-topbar-bg-color
$secondary-topbar-dropdown-bg
$secondary-topbar-dropdown-link-color
$secondary-topbar-dropdown-link-bg

Let's imagine you Could use call to a function and based on the param we'd be constantly rewriting the variables values;

if (CALLERCLASS == "");
PRIMARY VARIABLE SET
else (CALLERCLASS == "secondary");
SECONDARY VARIABLE SET

The above does not reflect the syntac used in SCSS, but you can imagine that it's a lot of trouble to go through just to change a few values. It's best to keep the values static and minimize dynamically generated values within an already dynamic environment.

SCSS will parse the given file into raw css everytime it is requested, if it at the same time had to dynamically generate each individual variable for each individual class or id, you'd only cause more trouble in the process of trying to make it easier for You.

If you can make it static; make it static.
It saves up a lot of memory on the machine and speeds up page loading.

Fredric Tillberg commented on Gregory Dickson's post over 5 years

Looks like you're looking for "onblur" not "onkeyup" or "onkeydown".

Go thru' your Javascript and change indications of "onkeyup" to "onblur".

Or a text field with:
pattern="\d{4}-\d{2}-\d{2}"
Good: 1990-01-01
Bad: 1990-12-1
Bad: I haz no idea what to write here.

4 digits followed by a dash followed by 2 digits -- another slash and lastly: 2 more digits.

Fredric Tillberg commented on Ronan's post over 5 years

In your CSS file:

.mobileModalContainer {
    display: block;
}
@media (min-width: 768px) {
    .mobileModalContainer {
        display: hidden;
    }
}

If the window's width is more than that of a standard Tablet, the mobile modal will be hidden. If the condition isn't met, i.e. if we're at 767px or below - then we'll show it.

Edit the classes, pixel range, etc - to match your particular needs.

Fredric Tillberg commented on Shmoo's post over 5 years

I don't know whether you've changed any of the original Javascript - however, looking at the code I suppose that:

 $(this.scope).off('.tab').on('click.fndtn.tab', '[data-tab] > dd > a', function (e) {

... could be changed to:

 $(this.scope).off('.tab').on('click.fndtn.tab', '[data-tab] > dd > a:not(.refreshbtn)', function (e) {

Then append the "refreshbtn" class to your refresh tab's anchor tag.

<li><a class="refreshbtn" href="http://example.com/page/" title="Refresh"><i class="fi fi-refresh"></i></a></li>

Fredric Tillberg commented on Luca Spanò's post over 5 years

A less reliable, but better option (imho) would be that you check the innerWidth of the window once the document has finished loading, and depending on the results you set your values accordingly...

 $(document).ready(function(){
    var wWidth = $(window).innerWidth();
});

...then using the same basic principle as before:

$(document).ready(function(){
    var wWidth = $(window).innerWidth();
    var orbitVisibility = "";

    if ( wWidth <= 768 ) {
        var orbitVisibility = false;
    }
    else {
        var orbitVisibility = true;
     }
});

Then you can simply use the variable orbitVisibility in your initialization;

if( orbitVisibility === true)
   $(document).foundation(
      orbit: {
         // Settings for non-mobile devices.
      }
   );
}
else {
   $(document).foundation(
      orbit: {
         // Settings for mobile devices.
      }
   );
}

Fredric Tillberg commented on Luca Spanò's post over 5 years

If you were to reconsider Karl Ward's suggestion, about hiding the ELEMENTS instead, then you can make 3 instances of the same carousel, and just name them differently.

That way, you won't have to go through the hassle of using this:
http://jsfiddle.net/P3bble/tLQXs/

The script will cause a lot of lag, even though the conditions say that we shouldn't change anything unless we've moved from small to medium, or medium to large -- because it will evaluate 3 if's and else if's for every pixel you resize.

There are a hundred better ways of achieving the same results than the Fiddle above - but to prove my point, go into the Fiddle and resize it a couple of times -- Then comment out all of the Javascript and run it again.

If, after all, you wish to use a solution similar to the Fiddle then change the code inside each "if" and "else if" statement to your liking.

Although, I am unsure whether...

$(document).foundation(
   orbit: {
      slide_number: true,
      if ( mobile ) {
          navigation_arrows: false,
          swipe: true
      }
   }
); 

... would work at all, but you can give it a shot.

Fredric Tillberg commented on Eduardo's post over 5 years

In your CSS file, specify a minimum height for the class "orbit-container".

.orbit-container {
    min-height: 375px;
}

Tweak to suit your needs, in regards to height of the element, default Background color (Should an image not load) or whatever you want really.

EDIT 1:
You can also wrap your <ul data-orbit> in a div tag and set your desired height there, the orbit slider should inherit it's height from there.

EDIT 2:

Rafi Benkual wrote:
@Fredric is right, the first css is the solution:
http://cdpn.io/mjfEn

Thanks for the Codepen, Rafi.

Posts Followed



Following

    No Content

Followers

My Posts

My Comments

You commented on Alley Hector's post about 5 years

http://stackoverflow.com/questions/6994556/defining-variable-overides-in-sass-scss

Found this after 2 searches on google. It might be what you're looking for.

As they've stated on that page;
You cannot achieve the variable override the way that you've proposed, but there are alternatives that achieve the same effect.

However, I'll stick to what I said earlier; about making these things static.

You want one topbar with one colour, and another topbar with another colour, it's that simple.

If you wanted a whole lot more elements that used these variable sets, then this would definitely be a viable option.
But when you're only talking about 8 lines of code, then you're better off using different variables for the different topbars, instead of all those includes and the mixins.

You commented on Cezary Kluczyński's post about 5 years

Setting the body to a relative position basically means that you're telling the body to attach itself to 0, 0 (window origin), which is at the top left corner of the screen.

If you we're to have an off canvas on your page, and that off canvas wanted to push the entire body 400px to the right (left: 400px) while itself remains at the top left corner of the screen at 400px wide, then this is how you do it.
This allows for the entire page to be pushed off screen to make room for the off canvas, instead of squishing an otherwise fluid layout to compensate for the off canvas.

I never really thought about Why I added that position to the body element since it's bad practice to have the body anywhere else than at 0, 0 and a 100% width and height - but it does allow for the body to be manipulated like any other element.

When playing around with sidebars like the off canvas, I usually have it come in from the side and float above whatever content it might touch. But this is just a personal preference.

You commented on JapperCat's post about 5 years

The row itself will not center child elements within it, unless they themselves are set to 100% width.

If you really want to have your carousel at a fixed width, let's say; 301.1px, then I suggest wrapping the carousel with a div and giving that div the following css properties;

position: relative;
width: 301.1px;
margin: 0 auto;

This wrapper should now push an equal amount to the left as it does to the right, and with it's fixed width within a fluid parent, it will center itself.

If this does not work for you, I advice you to post a codepen or alike so that we can see what's we're dealing with, cause right now I'm going in blind.
Might turn out that you do not have a fixed with on the carousel, but I don't know that =)

Let me know how it turns out.

You commented on Alley Hector's post about 5 years

Just duplicate the variables with the new colours and use the new variables for the secondary menu.
I'm unaware of any method for changing the variable value based upon the class or id that is requesting it.

Besides, any such method would require far more lines of code that just adding an additional 4 variables with a unique set of colours.

$secondary-topbar-bg-color
$secondary-topbar-dropdown-bg
$secondary-topbar-dropdown-link-color
$secondary-topbar-dropdown-link-bg

Let's imagine you Could use call to a function and based on the param we'd be constantly rewriting the variables values;

if (CALLERCLASS == "");
PRIMARY VARIABLE SET
else (CALLERCLASS == "secondary");
SECONDARY VARIABLE SET

The above does not reflect the syntac used in SCSS, but you can imagine that it's a lot of trouble to go through just to change a few values. It's best to keep the values static and minimize dynamically generated values within an already dynamic environment.

SCSS will parse the given file into raw css everytime it is requested, if it at the same time had to dynamically generate each individual variable for each individual class or id, you'd only cause more trouble in the process of trying to make it easier for You.

If you can make it static; make it static.
It saves up a lot of memory on the machine and speeds up page loading.

You commented on Gregory Dickson's post over 5 years

Looks like you're looking for "onblur" not "onkeyup" or "onkeydown".

Go thru' your Javascript and change indications of "onkeyup" to "onblur".

Or a text field with:
pattern="\d{4}-\d{2}-\d{2}"
Good: 1990-01-01
Bad: 1990-12-1
Bad: I haz no idea what to write here.

4 digits followed by a dash followed by 2 digits -- another slash and lastly: 2 more digits.

You commented on Ronan's post over 5 years

In your CSS file:

.mobileModalContainer {
    display: block;
}
@media (min-width: 768px) {
    .mobileModalContainer {
        display: hidden;
    }
}

If the window's width is more than that of a standard Tablet, the mobile modal will be hidden. If the condition isn't met, i.e. if we're at 767px or below - then we'll show it.

Edit the classes, pixel range, etc - to match your particular needs.

You commented on Shmoo's post over 5 years

I don't know whether you've changed any of the original Javascript - however, looking at the code I suppose that:

 $(this.scope).off('.tab').on('click.fndtn.tab', '[data-tab] > dd > a', function (e) {

... could be changed to:

 $(this.scope).off('.tab').on('click.fndtn.tab', '[data-tab] > dd > a:not(.refreshbtn)', function (e) {

Then append the "refreshbtn" class to your refresh tab's anchor tag.

<li><a class="refreshbtn" href="http://example.com/page/" title="Refresh"><i class="fi fi-refresh"></i></a></li>

You commented on Luca Spanò's post over 5 years

A less reliable, but better option (imho) would be that you check the innerWidth of the window once the document has finished loading, and depending on the results you set your values accordingly...

 $(document).ready(function(){
    var wWidth = $(window).innerWidth();
});

...then using the same basic principle as before:

$(document).ready(function(){
    var wWidth = $(window).innerWidth();
    var orbitVisibility = "";

    if ( wWidth <= 768 ) {
        var orbitVisibility = false;
    }
    else {
        var orbitVisibility = true;
     }
});

Then you can simply use the variable orbitVisibility in your initialization;

if( orbitVisibility === true)
   $(document).foundation(
      orbit: {
         // Settings for non-mobile devices.
      }
   );
}
else {
   $(document).foundation(
      orbit: {
         // Settings for mobile devices.
      }
   );
}

You commented on Luca Spanò's post over 5 years

If you were to reconsider Karl Ward's suggestion, about hiding the ELEMENTS instead, then you can make 3 instances of the same carousel, and just name them differently.

That way, you won't have to go through the hassle of using this:
http://jsfiddle.net/P3bble/tLQXs/

The script will cause a lot of lag, even though the conditions say that we shouldn't change anything unless we've moved from small to medium, or medium to large -- because it will evaluate 3 if's and else if's for every pixel you resize.

There are a hundred better ways of achieving the same results than the Fiddle above - but to prove my point, go into the Fiddle and resize it a couple of times -- Then comment out all of the Javascript and run it again.

If, after all, you wish to use a solution similar to the Fiddle then change the code inside each "if" and "else if" statement to your liking.

Although, I am unsure whether...

$(document).foundation(
   orbit: {
      slide_number: true,
      if ( mobile ) {
          navigation_arrows: false,
          swipe: true
      }
   }
); 

... would work at all, but you can give it a shot.

You commented on Eduardo's post over 5 years

In your CSS file, specify a minimum height for the class "orbit-container".

.orbit-container {
    min-height: 375px;
}

Tweak to suit your needs, in regards to height of the element, default Background color (Should an image not load) or whatever you want really.

EDIT 1:
You can also wrap your <ul data-orbit> in a div tag and set your desired height there, the orbit slider should inherit it's height from there.

EDIT 2:

Rafi Benkual wrote:
@Fredric is right, the first css is the solution:
http://cdpn.io/mjfEn

Thanks for the Codepen, Rafi.

Posts Followed

Following

  • No Content

Followers

  • No Content