Menu icon Foundation

My Posts



My Comments

Doug Macklin commented on Doug Macklin's post almost 4 years

Hi Last Templar,
This tutorial is a little out of date as you no longer need to use browserify-shim to get everything working. Try out the updated generator, which will allow you to generate either a Foundation 5 or Foundation 6 project: https://github.com/dougmacklin/generator-foundation-browserify
After you generate a project, run the following command to install jQuery UI: 
npm install jquery-ui --save
 Then in src/main.js, import it after the jQuery import line:
var jQueryUI = require('jquery-ui');
 From there you should be all set to use jQueryUI as you see fit, ex:
$("#someElement").draggable();
 You could also import only the plugins you need like so:
var jQueryUIDraggable = require('jquery-ui/draggable');
var jQueryUIDroppable = require('jquery-ui/droppable');
etc...
Let me know if you're still having trouble! Thanks.

Doug Macklin commented on Doug Macklin's post almost 6 years

Figured out a solution, not sure why I didn't think of it earlier. I just put all of the content in the modal into another div with the following style:

.reveal-modal-inner {
    margin: 0 auto;
    position: relative;
    max-width: 950px;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

Works perfectly, here is the updated fiddle: http://jsfiddle.net/23SgB/2/

Doug Macklin commented on Doug Macklin's post almost 6 years

I would use clearing if it were only images, but I'm going to embed a video and put some buttons below the image. The image kind of acts as a title for the modal.

If I add the "small" class, then the image modal shrinks to take up only 40% of the viewport. I want it to take up around 80 or 90% of the viewport UNLESS the screen is wider than the image width of 950px, at which point I want it to stay 950px wide and in the center.

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Doug Macklin's post almost 4 years

Hi Last Templar,
This tutorial is a little out of date as you no longer need to use browserify-shim to get everything working. Try out the updated generator, which will allow you to generate either a Foundation 5 or Foundation 6 project: https://github.com/dougmacklin/generator-foundation-browserify
After you generate a project, run the following command to install jQuery UI: 
npm install jquery-ui --save
 Then in src/main.js, import it after the jQuery import line:
var jQueryUI = require('jquery-ui');
 From there you should be all set to use jQueryUI as you see fit, ex:
$("#someElement").draggable();
 You could also import only the plugins you need like so:
var jQueryUIDraggable = require('jquery-ui/draggable');
var jQueryUIDroppable = require('jquery-ui/droppable');
etc...
Let me know if you're still having trouble! Thanks.

You commented on Doug Macklin's post almost 6 years

Figured out a solution, not sure why I didn't think of it earlier. I just put all of the content in the modal into another div with the following style:

.reveal-modal-inner {
    margin: 0 auto;
    position: relative;
    max-width: 950px;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

Works perfectly, here is the updated fiddle: http://jsfiddle.net/23SgB/2/

You commented on Doug Macklin's post almost 6 years

I would use clearing if it were only images, but I'm going to embed a video and put some buttons below the image. The image kind of acts as a title for the modal.

If I add the "small" class, then the image modal shrinks to take up only 40% of the viewport. I want it to take up around 80 or 90% of the viewport UNLESS the screen is wider than the image width of 950px, at which point I want it to stay 950px wide and in the center.

Posts Followed

Following

  • No Content

Followers

  • No Content