Zurb Foundation responsive table does not work? - zurb-foundation

I am trying to build responsive table with foundation code. I downloaded Responsive table file from Foundation.
I used inline CSS and JS . But , the responsive table does not work . So my questions are :
1 ) Can I build responsive table with Foundation's CSS and JS file alone or should I download whole Foundation 6 ? Do I need whole Foundation 6 file to build responsive table ?
2) The downloaded JS folder contains 9 files . Should I upload each of them manually to my server ?
3 ) My website does not have JQUERY file. Should I upload jquery.min.js to my server ? Should I include this code
in my website ?
Can I build responsive table without jquery code ?

No, you do not need other files than the css and js.
Not sure what files you downloaded, you only need the one called “responsive-tables.js”.
To get Zurb responsive to work you need to use jQuery 2 (script is not compatible with the newest version - jQuery 3 ). You can include the file or link to a cdn file.

$(window).load(updateTables); replace $(window).on('load', updateTables);

Related

Detect navigator inside WebExtension's manifest.json

I am currently working on a WebExtension and I have a small problem. On my Firefox browser I'm able to import and run my work without any error/warning. However with Google Chrome I have a big warning about a feature not implemented (the browser_style property of manifest.json key options_ui).
I'd like to create something like an if statement based on the navigator name to not set this property on Chrome but keep it on Firefox.
Here is the part of my manifest.json:
"options_ui": {
"page": "contents/settings.html",
"browser_style": true
},
And here is what I'd like to have (not working):
"options_ui": {
"page": "contents/settings.html",
if (options_ui.browser_style) {
"browser_style": true
}
},
Any ideas on how to create a condition like this in a manifest.json file?
As Daniel Herr implied in a comment, the manifest.json file is straight JSON formatted data. JSON has no capability to run code. There is no possibility to dynamically define properties within your manifest.json file. You have 2 options:
Live with the warning(s).
Both Chrome and Firefox have valid properties defined for manifest.json files which the other does not support. Both show warnings when there are unsupported properties. These are only warnings and do not cause the browser to prevent the extension from running. Chrome prominently shows these in chrome://extensions/. Firefox shows them in the Browser Console (Ctrl-Shift-J, or Cmd-Shift-J on OSX).
Have a separate manifest.json file per browser.
This adds some complexity to your build/development process, but will allow you to eliminate these warnings in each browser.
Note: Even if you don't submit different manifest.json files to Google (Chrome Web Store - Extensions) and Mozilla (AMO), by the time the extension package is distributed to the user, the manifest.json files and other contents of the extension package will be different, as the process of going from submission to distribution results in that file being modified and/or additional files being added to the extension package.

Ember uglify breaks rainbow.js

I am trying to add rainbow code samples to my ember project. I installed rainbow through bower and it works locally. However when I build and deploy to staging I am getting JS console errors.
As far as I can tell this is the minified version of this. It appears to me that for some reason the Prism class is not being included when it is minified. I am importing
'rainbow/dist/rainbow.min.js',
'rainbow/src/language/generic.js',
'rainbow/src/language/r.js',
'rainbow/src/language/python.js',
'rainbow/src/language/json.js',
'rainbow/src/language/html.js'
in my ember-cli-build.js using
bowerDependencies.forEach(function(path) { app.import(app.bowerDirectory + '/' + path); });.
If I build with minify off it works wonderfully, but I would like to minify the JS. I am currently at a loss of why these files are not being included.
Use ./rainbow/dist/rainbow.min.js for al the file inclusion.
Refer :
https://github.com/ember-cli/ember-cli/issues/6829

Zurb foundation 6 , what-input.min.js file functionality

Id like to know the relevance of what-input.min.js include in Zurbs foundation-6 framework , in the js/vendor directory , this is because i keep getting an 404 not found error not loading while running the site , ... js/vendor/jquery.min.map file , is there any connection ?
You don't need the .map file which is used to map a minified file back to the original. It is available for download from jquery's site. Source maps are can be ignored in inspector settings which makes sense when you don't plan on debugging minified javascript files
It is unrelated to the source map file 404 but what-input.min.js is a JS library "to watch for mouse, keyboard and touch events"
They have a github page with more documentation: https://github.com/ten1seven/what-input
and a demo:
https://ten1seven.github.io/what-input/
"Tab, click or tap the links and form controls to see how What Input allows them to be styled differently"
I had this exact same problem on every site when using JointsWP with Foundation 6 framework. I finally just figured it out. I turned off css source mapping and still received the error. It turns out that it wasn't lying to me and the js file really does not exist where it is trying to load it from:
/vendor/what-input/what-input.min.js
But it is under the dist folder within that same directory. So if you find your enqueue-scripts.php file where the what-input.min.js is loaded, you can fix the directory path to:
/vendor/what-input/dist/what-input.min.js
And no more 404!

How to edit footer generated by spay fancy extension while installing spree 2.0.3

I installed spree 2.0.3 and then I installed spree_fancy extension....
I want to edit the footer which was generated by spree_fancy extension
Spree generated following folder:
spree_api spree_backend spree_cmd
spree_core spree_dash spree_frontend spree_sample
Can anyone know where the views are located which was generated by spree_fancy extension.
You can find the footer located here:
https://github.com/spree/spree_fancy/blob/1f12308a3562be2cde6c21467942ba07b7c3c536/app/views/spree/shared/_footer.html.erb
You can override the footer by placing a file in your application in the matching path:
app/views/spree/shared/_footer.html.erb
After creating that file and restarting your webserver, content will be read from that file instead of spree_fancy.
Another option is to use the Deface plugin:
https://github.com/spree/deface
You can use this to override portions of the content within the footer, and is more appropriate when making small changes.
You can learn more about both of these techniques by reading the spree customization guide:
http://guides.spreecommerce.com/developer/view.html

Open pdf,txt,doc,jpg etc files in a popup using jQuery and coldfusion

I am working on a small project and I have a file links to download from server. However, instead of downloading the file I want them open in fixed size pop up. I tried facebox but facebox(http://defunkt.io/facebox/) fail to display pdf files and other text files. any one have any idea what I suppose to do in order to accomplish this task.
Thanks you