Menu icon Foundation

Developer | Bangkok

Making things look nice since 2004.

My Posts

No Content

My Comments

Karl Ward commented on Clark Tomlinson's post about 5 years

Thats because the entire function you have there is set to execute at maximum every 30 seconds ... if you are using this for a contact form and want to add some UI logic status msg, you would need to re-think your implementation. You could for example add a helper function startTimer() within the above function, but to be honest it would probably be better to re-think your logic else it would just become a can of worms ... I did write some code below however, but its an basically a hack:

 var waiting;
function startTimer() {
  if (timer) clearTimeout(timer);
  waiting = true;
  var timer = setTimeout(function(){
    waiting = false;
  }, 30000);
}

$body.on('keypress', '.commentForm textarea', Foundation.utils.debounce(function (event) {
  startTimer();
  //... rest of code here ...
}, 30000, true));

// now you could add your own click event function without debounce, for example
$body.on('keypress', '.commentForm textarea', function(){
  if(waiting) {
    // your notice logic here
  }
});

Karl Ward commented on Daniel Lovas's post about 5 years

contain-to-grid should only affect large screens so to limit the element within the grid max-width. It should not affect elements on smaller screens where the element would go below the row max-width anyway. Sounds like you perhaps wish to remove row padding/margin instead on smaller screens?

Karl Ward commented on Erik Krause's post about 5 years

I moved modernizr to the bottom of body after reading Paul Irish' post about this recommendation. Unless you have some specific reason to keep it in head, then you should move it to end of body also in Foundation pages. It is incredibly unlikely your page will be affected by FOUC unless you are using poor implementation techniques ...

As long as you include it before you run $(document).foundation() ...

Karl Ward commented on Pedr's post about 5 years

I don't see any reason why there would be a problem using a separate grid system. You would just need to use the 3rd party grid for all the grid/responsive/layout logic. I have not done it before, but essentially you just need to add the sass/css for your grid system, and use its classes in your code, instead of Foundation grid classes.

Personally I would question why you are choosing another grid, or if you really need to use foundation at all if you are using another grid ...

Karl Ward commented on JapperCat's post about 5 years

The "pretty grid" is the Foundation block-grid in action ... and I wanted to emphasize the point that it also has captions below the images. My point was in fact that you should use the block-grid, because it will automatically solve your problem with overflowing captions ...

Just add your thumbnails inside blocks in the block grid, and you are almost there ...

Karl Ward commented on JapperCat's post about 5 years

By default, the "th" class does not limit the width in any way, and that is why the text is not wrapping onto new lines. Do you know what image sizes you will be using? or are you adding some kinda responsive size images? For grid layout of thumbnails, especially for responsive and/or retina size images, I would consider using the Foundation block grid: http://foundation.zurb.com/docs/components/block_grid.html

Not only will this help you create a responsive grid for the thumbnails, but it will enable you to wrap captions into multiple lines without affecting the layout grid in a negative fashion. I am using the block-grid here with different captions lengths http://mjau-mjau.com/concepts/albums/pretty-grid/.

Karl Ward commented on Lyn's post about 5 years

Nice work @Lyn ... I couldn't immediately figure out how to put it to good use, but well crafted regardless. They could perhaps be integrated in an anti-spam scheme for form submits also ...

Karl Ward commented on David's post about 5 years

The "th" thumbnails class does not resize images or create thumbnails for you. It is merely a class for adding a basic style to thumbnails, that can be extended through settings.scss. In your case, you are loading an 800x1200 size image, and it is not the job of the "th" class to resize the image or decide what image you want your thumbnails displayed at.

Sizing images needs to be your own logic, either how large images are loaded, or additional CSS to size the element ...

Karl Ward commented on Mihai Stroe's post about 5 years

why do you need both a 12-column-grid and a 10-column grid for the same website? That adds unnecessary size to the CSS files, and is unproductive. The whole point of a "12 column grid", is that it averagely allows you to split pages into any amount of fractional columns, either it be 10/12, 6/12, 1/12 or full 12/12. Adding another 10-column grid may offer a tiny difference in column fractions, but what is the point? For many reasons, you need to decide on a single grid and build your design upon it ...

Karl Ward commented on santosh's post about 5 years

right ...

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Clark Tomlinson's post about 5 years

Thats because the entire function you have there is set to execute at maximum every 30 seconds ... if you are using this for a contact form and want to add some UI logic status msg, you would need to re-think your implementation. You could for example add a helper function startTimer() within the above function, but to be honest it would probably be better to re-think your logic else it would just become a can of worms ... I did write some code below however, but its an basically a hack:

 var waiting;
function startTimer() {
  if (timer) clearTimeout(timer);
  waiting = true;
  var timer = setTimeout(function(){
    waiting = false;
  }, 30000);
}

$body.on('keypress', '.commentForm textarea', Foundation.utils.debounce(function (event) {
  startTimer();
  //... rest of code here ...
}, 30000, true));

// now you could add your own click event function without debounce, for example
$body.on('keypress', '.commentForm textarea', function(){
  if(waiting) {
    // your notice logic here
  }
});

You commented on Daniel Lovas's post about 5 years

contain-to-grid should only affect large screens so to limit the element within the grid max-width. It should not affect elements on smaller screens where the element would go below the row max-width anyway. Sounds like you perhaps wish to remove row padding/margin instead on smaller screens?

You commented on Erik Krause's post about 5 years

I moved modernizr to the bottom of body after reading Paul Irish' post about this recommendation. Unless you have some specific reason to keep it in head, then you should move it to end of body also in Foundation pages. It is incredibly unlikely your page will be affected by FOUC unless you are using poor implementation techniques ...

As long as you include it before you run $(document).foundation() ...

You commented on Pedr's post about 5 years

I don't see any reason why there would be a problem using a separate grid system. You would just need to use the 3rd party grid for all the grid/responsive/layout logic. I have not done it before, but essentially you just need to add the sass/css for your grid system, and use its classes in your code, instead of Foundation grid classes.

Personally I would question why you are choosing another grid, or if you really need to use foundation at all if you are using another grid ...

You commented on JapperCat's post about 5 years

The "pretty grid" is the Foundation block-grid in action ... and I wanted to emphasize the point that it also has captions below the images. My point was in fact that you should use the block-grid, because it will automatically solve your problem with overflowing captions ...

Just add your thumbnails inside blocks in the block grid, and you are almost there ...

You commented on JapperCat's post about 5 years

By default, the "th" class does not limit the width in any way, and that is why the text is not wrapping onto new lines. Do you know what image sizes you will be using? or are you adding some kinda responsive size images? For grid layout of thumbnails, especially for responsive and/or retina size images, I would consider using the Foundation block grid: http://foundation.zurb.com/docs/components/block_grid.html

Not only will this help you create a responsive grid for the thumbnails, but it will enable you to wrap captions into multiple lines without affecting the layout grid in a negative fashion. I am using the block-grid here with different captions lengths http://mjau-mjau.com/concepts/albums/pretty-grid/.

You commented on Lyn's post about 5 years

Nice work @Lyn ... I couldn't immediately figure out how to put it to good use, but well crafted regardless. They could perhaps be integrated in an anti-spam scheme for form submits also ...

You commented on David's post about 5 years

The "th" thumbnails class does not resize images or create thumbnails for you. It is merely a class for adding a basic style to thumbnails, that can be extended through settings.scss. In your case, you are loading an 800x1200 size image, and it is not the job of the "th" class to resize the image or decide what image you want your thumbnails displayed at.

Sizing images needs to be your own logic, either how large images are loaded, or additional CSS to size the element ...

You commented on Mihai Stroe's post about 5 years

why do you need both a 12-column-grid and a 10-column grid for the same website? That adds unnecessary size to the CSS files, and is unproductive. The whole point of a "12 column grid", is that it averagely allows you to split pages into any amount of fractional columns, either it be 10/12, 6/12, 1/12 or full 12/12. Adding another 10-column grid may offer a tiny difference in column fractions, but what is the point? For many reasons, you need to decide on a single grid and build your design upon it ...

You commented on santosh's post about 5 years

right ...

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content