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 over 2 years 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 over 2 years 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)



  • 3
    Replies
  • Patch Update for Foundation 6.3?

    By jinch

    Foundation 6.3

    I'm curious if anyone has information on a patch release for foundation 6.3?I know off hand there are a few bugs related to off-canvas and sticky being worked on but curious where in the process that is or if temporary fixes are available. I'm hoping to f... (continued)

    Last Reply by jinch almost 3 years ago


  • NEW
  • Closing multiple Off-Canvas menus v6.3?

    By jinch

    Off-Canvas v6.3

    So if you have more than one off-canvas menu ~ i.e. one on the left as well as one or right... How would you go about toggling them open and closed (one at a time)? Meaning... (if) the left one is open // the right one should be closed ~ and visa versa. ... (continued)





My Comments

jinch commented on Alexander Graham's post over 2 years

@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 over 2 years

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.

jinch commented on jinch's post over 2 years

Ooooo... i found a gem :)All the way at the bottom of this post http://stackoverflow.com/questions/12181760/twitter-bootstrap-print-content-of-modal-window @Peter Kerr simply used CSS to target the body class that is amended when a modal is open / and just "displayed:none;" all elements you don't want printed.This by far is the most straight forward solution I found // no javascript required!For Foundation ~ this would look something along these lines:
@media print {
/* hide main content when dialog open */
body.is-reveal-open div.off-canvas-wrapper {
display: none;
}
}

jinch commented on jinch's post over 2 years

Hi Rafi,
Yes, ideally I would like the ability to print (command+P) just the model when open (not the rest of the page). I do have a print button on the AJAX loaded content as well that actually works as intended. I am running into some issues however in designating the difference between printing the modal and printing the page. I did find a workaround but it is very convoluted and not a complete solution. I'm hoping there may be a simpler way to go about this.
Currently, I adapted this to suit my needs - http://jsfiddle.net/95ezN/1227/ originally posted as one solution here:  http://stackoverflow.com/questions/12181760/twitter-bootstrap-print-content-of-modal-window
I then assigned another function to trigger the print function when Cmd+P is pushed so the print function can be triggered both from a button and keyboard.
/Reset Cmd+P (PRINT) to run function/
$(document).keydown(function (event) {
"use strict";
if ((event.ctrlKey || event.metaKey) && event.which === 80) {
event.preventDefault();
$('.printMe').printElem();
}
});
Then I need to assign the class 'printMe' to the modal and any other element I want printed // here is where the issue is created ~ all elements on the page + modal will print (if) the modal is opened first seeing they share the same class that triggers in function. I went as far as manipulating the print class and assigning one for the modal and one for the page but then my keyboard print function will only work on one or the other : /
Again.. as mentioned this seems way too convoluted and really just looking for the cleanest way to print modal content - one ideally where I can also use the default cmd+P print functionality of all browsers.

jinch commented on Alexander Graham's post over 2 years

@napishu ~ quick question...
The code works great and it works exactly how I was envisioning... however, I noticed a small bug: /
If you scroll off the menu and then move your mouse back quickly before it fully closes / the menu will start to flash open and closed repetitively. This mostly happens on longer menus // also noticed that it effects other menus on the page. Meaning if you don't allow it to completely finish animating close before you trigger again / you will get a flash of all menus opening simultaneously. I tried messing with the default hover and close time settings but it didn't seem to make a difference.
Is there a way to avoid this flashing content? Perhaps a reset or delay to prevent it from triggering before the menu is ready to animate again?

jinch commented on jinch's post over 2 years

If anyone else is in need of this, I got an answer on StackOverflow thanks to @tymothytym ~ http://stackoverflow.com/questions/42820109/opening-an-accordion-via-url-link-foundation-v6-3-1/42886726#42886726 

jinch commented on Alexander Graham's post over 2 years

@napishu ~ you saved the day!!!!!
THANK YOU!

jinch commented on Alexander Graham's post over 2 years

As mentioned above... this only works with only drop down / if you have multiple nested menu's - they all show.
How do you target just first nested menu / than the second only on hover?

jinch commented on Julie Lewis's post over 2 years

+1 ~ I'm in need as well / running the latest v6.3.1.

jinch commented on Mantis's post over 2 years

I noticed an issue using select2 as well with but, with Foundations sticky. If you make the window small than large again after initial load your sticky will no longer be stuck (on chrome). If you remove the select2.js than this is no longer an issue so there must be a conflict between the js plugins somewhere.

Posts Followed





  • 7
    Replies
  • Orientation block grid

    By Mikhail Zoupas

    grid orientation

    I am using Foundation for some time now and is really amazing. What I am missing and would like to see in the future (or even contribute if I can) is orientation grid. Like the code bellow.Work around is using visibility but this means you actually get du... (continued)

    Last Reply by jinch over 3 years ago




Following

    No Content

Followers

My Posts

My Comments

You commented on Alexander Graham's post over 2 years

@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 over 2 years

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.

You commented on jinch's post over 2 years

Ooooo... i found a gem :)All the way at the bottom of this post http://stackoverflow.com/questions/12181760/twitter-bootstrap-print-content-of-modal-window @Peter Kerr simply used CSS to target the body class that is amended when a modal is open / and just "displayed:none;" all elements you don't want printed.This by far is the most straight forward solution I found // no javascript required!For Foundation ~ this would look something along these lines:
@media print {
/* hide main content when dialog open */
body.is-reveal-open div.off-canvas-wrapper {
display: none;
}
}

You commented on jinch's post over 2 years

Hi Rafi,
Yes, ideally I would like the ability to print (command+P) just the model when open (not the rest of the page). I do have a print button on the AJAX loaded content as well that actually works as intended. I am running into some issues however in designating the difference between printing the modal and printing the page. I did find a workaround but it is very convoluted and not a complete solution. I'm hoping there may be a simpler way to go about this.
Currently, I adapted this to suit my needs - http://jsfiddle.net/95ezN/1227/ originally posted as one solution here:  http://stackoverflow.com/questions/12181760/twitter-bootstrap-print-content-of-modal-window
I then assigned another function to trigger the print function when Cmd+P is pushed so the print function can be triggered both from a button and keyboard.
/Reset Cmd+P (PRINT) to run function/
$(document).keydown(function (event) {
"use strict";
if ((event.ctrlKey || event.metaKey) && event.which === 80) {
event.preventDefault();
$('.printMe').printElem();
}
});
Then I need to assign the class 'printMe' to the modal and any other element I want printed // here is where the issue is created ~ all elements on the page + modal will print (if) the modal is opened first seeing they share the same class that triggers in function. I went as far as manipulating the print class and assigning one for the modal and one for the page but then my keyboard print function will only work on one or the other : /
Again.. as mentioned this seems way too convoluted and really just looking for the cleanest way to print modal content - one ideally where I can also use the default cmd+P print functionality of all browsers.

You commented on Alexander Graham's post over 2 years

@napishu ~ quick question...
The code works great and it works exactly how I was envisioning... however, I noticed a small bug: /
If you scroll off the menu and then move your mouse back quickly before it fully closes / the menu will start to flash open and closed repetitively. This mostly happens on longer menus // also noticed that it effects other menus on the page. Meaning if you don't allow it to completely finish animating close before you trigger again / you will get a flash of all menus opening simultaneously. I tried messing with the default hover and close time settings but it didn't seem to make a difference.
Is there a way to avoid this flashing content? Perhaps a reset or delay to prevent it from triggering before the menu is ready to animate again?

You commented on jinch's post over 2 years

If anyone else is in need of this, I got an answer on StackOverflow thanks to @tymothytym ~ http://stackoverflow.com/questions/42820109/opening-an-accordion-via-url-link-foundation-v6-3-1/42886726#42886726 

You commented on Alexander Graham's post over 2 years

@napishu ~ you saved the day!!!!!
THANK YOU!

You commented on Alexander Graham's post over 2 years

As mentioned above... this only works with only drop down / if you have multiple nested menu's - they all show.
How do you target just first nested menu / than the second only on hover?

You commented on Julie Lewis's post over 2 years

+1 ~ I'm in need as well / running the latest v6.3.1.

You commented on Mantis's post over 2 years

I noticed an issue using select2 as well with but, with Foundations sticky. If you make the window small than large again after initial load your sticky will no longer be stuck (on chrome). If you remove the select2.js than this is no longer an issue so there must be a conflict between the js plugins somewhere.

Posts Followed

Following

  • No Content

Followers

  • No Content