Menu icon Foundation

Developer | Oakley, CA

My Posts





My Comments

Tyler Pena commented on Tyler Pena's post about 3 years

Found my own solution.
// ***** MODALS ****** //
// Set Object of Projects to hold all modals and details
var projects = {
'modals': [{
'name': 'Modal_ThermoFusion',
'activate': '.Activate_Modal_ThermoFusion',
'html': 'thermofusion_modal.html'
}, {
'name': 'Modal_Arcade-Game',
'activate': '.Activate_Modal_Arcade-Game',
'html': 'arcade-game_modal.html'
}]
};

var $projects = $('#project-modal');
var $htmlArray = [];
var $activateArray = [];

for (var i = 0; i < projects['modals'].length; i++) {
/* Use $html variable to find all html object properties
* Log found results in new $htmlArray for access
* Use $activate to find all activation classes from object properties
* Log found results in new $activateArray for access
*/
var $html = projects.modals[i].html;
$htmlArray.push($html);
var $activate = projects.modals[i].activate;
$activateArray.push($activate);

/* Call click function when modal activation class is clicked
 * Log the current index of the clicked modal
 * Call Ajax to load selected modal template
 * Load into specified reveal modal
 * Note * one model is used to hold all projects
*/
$($activateArray[i]).on('click', function() {
  var $index = $($activate).index(this) + 1;
  $.ajax($htmlArray[$index]).
    done(function(content) {
      $projects.html(content).foundation('open');
    });
   //console.log($index);
});

};

Tyler Pena commented on Nathan Parikh's post over 3 years

You technically could make separate app.css files for each page and rename them for each page. You would have to import all the foundation components into each scss file for the appropriate page along with your page specific scss custom styles. 
I personally, import all page styles into app.css and include that universally on every page. I have a custom scss file for every page on the site and @import the files into app.scss. All is compiled into one big css file but it's a lot less work than what you are trying to accomplish. If you want to use your '_settings.scss' mixins, you should remove the @import '_settings' from your app.scss file then import _settings to every custom scss file you are creating. That way you can use your _settings shortcuts throughout every page.
If you choose to import the _setings into your custom scss files, don't put any custom styles into it or it will duplicate it for every page you've imported it to. If you want to add-on to _settings.scss with custom css styles, create a separate _settings-ext file or name it whatever you want and import it into the app.scss file only.

Tyler Pena commented on Tyler Pena's post over 3 years

Updating to version 6.2.1 solved the issue. Thank you.

Tyler Pena commented on Tyler Pena's post over 3 years

They both slide at the same time when triggering the event. The first slide animated at the normal transition rate, then the second slide has a small delay before sliding over at a faster transition rate. You can view the issue on iOS at http://test.dividdesigns.com. Also another page with an Orbit slider with the same results is at http://test.dividdesigns.com/news/general-news/thermofusion-updates-web-site.

Posts Followed

  • 8
    Replies
  • SCSS file for each Page

    By Nathan Parikh

    emailpagescssunique

    Hello! The structure for my Foundation for Emails 2 project follows the default setup. I have multiple .html&nbsp;files in the /pages folder, and my SCSS files in the /scss folder. Each page is going to have some unique styling, so I would like to creat... (continued)

    Last Reply by Ant James over 3 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Tyler Pena's post about 3 years

Found my own solution.
// ***** MODALS ****** //
// Set Object of Projects to hold all modals and details
var projects = {
'modals': [{
'name': 'Modal_ThermoFusion',
'activate': '.Activate_Modal_ThermoFusion',
'html': 'thermofusion_modal.html'
}, {
'name': 'Modal_Arcade-Game',
'activate': '.Activate_Modal_Arcade-Game',
'html': 'arcade-game_modal.html'
}]
};

var $projects = $('#project-modal');
var $htmlArray = [];
var $activateArray = [];

for (var i = 0; i < projects['modals'].length; i++) {
/* Use $html variable to find all html object properties
* Log found results in new $htmlArray for access
* Use $activate to find all activation classes from object properties
* Log found results in new $activateArray for access
*/
var $html = projects.modals[i].html;
$htmlArray.push($html);
var $activate = projects.modals[i].activate;
$activateArray.push($activate);

/* Call click function when modal activation class is clicked
 * Log the current index of the clicked modal
 * Call Ajax to load selected modal template
 * Load into specified reveal modal
 * Note * one model is used to hold all projects
*/
$($activateArray[i]).on('click', function() {
  var $index = $($activate).index(this) + 1;
  $.ajax($htmlArray[$index]).
    done(function(content) {
      $projects.html(content).foundation('open');
    });
   //console.log($index);
});

};

You commented on Nathan Parikh's post over 3 years

You technically could make separate app.css files for each page and rename them for each page. You would have to import all the foundation components into each scss file for the appropriate page along with your page specific scss custom styles. 
I personally, import all page styles into app.css and include that universally on every page. I have a custom scss file for every page on the site and @import the files into app.scss. All is compiled into one big css file but it's a lot less work than what you are trying to accomplish. If you want to use your '_settings.scss' mixins, you should remove the @import '_settings' from your app.scss file then import _settings to every custom scss file you are creating. That way you can use your _settings shortcuts throughout every page.
If you choose to import the _setings into your custom scss files, don't put any custom styles into it or it will duplicate it for every page you've imported it to. If you want to add-on to _settings.scss with custom css styles, create a separate _settings-ext file or name it whatever you want and import it into the app.scss file only.

You commented on Tyler Pena's post over 3 years

Updating to version 6.2.1 solved the issue. Thank you.

You commented on Tyler Pena's post over 3 years

They both slide at the same time when triggering the event. The first slide animated at the normal transition rate, then the second slide has a small delay before sliding over at a faster transition rate. You can view the issue on iOS at http://test.dividdesigns.com. Also another page with an Orbit slider with the same results is at http://test.dividdesigns.com/news/general-news/thermofusion-updates-web-site.

Posts Followed


Following

  • No Content

Followers