I am trying to get Foundation 5 javascript components (any of them) to work in a Rails 4.2.0 app, but nothing I have tried seems to work. I am using the foundation-rails gem, and have followed the documented steps to install it.
To test that Foundation JS works, I've inserted the basic HTML for a tooltip, explained here, to show a tooltip link:
<span data-tooltip aria-haspopup="true" class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>
On the page, the tooltip link is styled correctly, however, the tooltip function itself does not work and falls back to the system alt text, as shown below:
My first guess was that there is something wrong with the way I included the Foundation JS files, However, I have double-checked the source for pages in my app, and they all seem to be there:
I have also verified that $(document).foundation() is being included in the Rails app's application.js:
The JS components of Foundation still don't function, even if I place $(function(){ $(document).foundation(); }); in a script tag right before the element that it affects.
How can I debug this? Is there something I can run in the JS console to figure out what is going on?
It turns out I was able to fix this right after I applied the bounty! It seems the issue was somehow related to how Rails caches assets in development environments (this article says a little bit about it).
Basically, I had recently upgraded Foundation 4 to Foundation 5, and I didn't realize it but the SCSS assets being served were still Foundation 4's assets, not those of Foundation 5. I accidentally figured this out when I restarted my computer and all of a sudden tooltips worked.
If anyone else has this issue, I would try wiping rails cache by running the command rake tmp:clear and seeing if that fixes it.
Yeah, you can add
config.serve_static_files = true
in your development.rb config file and make sure you don't precompile, this makes rails load the assets from the original location every time, which reflects changes that are made instantly.
Related
I tried to implement zoom.js used to zoom images like in medium site.
I linked both the css and js file, it works. But whenever I zoom out the transition doesn't work. I suspected the bootstrap's bundlejs file. I downgraded from 5.2.2 to 3.0.0 and it worked fine. I exactly don't know what's happening, please help me with that.
Thanks in advance!
I didn't knew what you have written in your code as you haven't attached it but I think what you have done is that you used code from the old bootstrap (3.0.0) and that code is changed for bootstrap 5.2.2. Bootstrap changes it's code a little bit in some versions and make documentation of it very clearly. You should go to it's documentation page for more assistance and you can also post your code here if you are unsure what is changed in bootstrap 5.
I have been troubled with this problem for DAYS, and this is a last resort.
I am following along with a course, and in it the instructor has us use DataTables to pull a list of users from a database. The plugin is pulling data from my db correctly, and the functionality of the table seems to be working. The problem is that the table is hideous, and virtually unusable.
I'm at a loss, as I have made sure my code mimics everything from the video lesson. I've even analysed my code next to his in GitHub.
I've even made sure to use his version numbers for plugins, as the course was recorded in 2016-2017 I believe. I have considered the fact that I'm using Visual Stdio 2019, and he is not. Also, I remember there being a large bootstrap update as recently as a couple years ago. (DataTables uses bootstrap)
I'll show some code below, but here are both repos for this project(Vidly):
My Repo |
Instructor's Repo
Since this is apparently a CSS problem, I looked to how I was importing my css files. I am using a bundle inside of the BundleConfig file in the App_start folder:
But it's exactly the same as the instructor wrote it, identical.
Lastly, here's the code in relation to the first image, the page with the table in question:
I am lost.
EDIT:
Last night I was messing with my included files in the BundleConfig file and switched the dataTables to bootstrap 4 and got a more desirable result:
As you can see, this is definitely laid out better, and has the desired dimensions, but the colors of the hovered rows and certain text is still off and unappealing.
If your Bootstrap version is 4, then you need to load in the *.bootstrap4.css / *.bootstrap4.js files for DataTables (rather than *.bootstrap.* which is for Bootstrap 3).
Update for the edit
Looks like you might also be loading the jquery.dataTables.css file (the tell is the gaps in the pagination)? You can remove that. Only one of the style files should be loaded.
What is the tutorial that you were following btw?
I have just started a new site created with meteor and using foundation for sites and sass.
I want to create a dropdown menu, but I can't make it work.
I followed this link
dropdown menu and copied html, but it's not been showed as a dropdown menu.
I think my problem is because maybe I haven't initializated the javascript of the dopdown menu.
Can someone show me how to do it. In Zurbs site there are several examples, but loading the script in the head. But I want to know how to do it with meteor.
I might be completelly lost, so any help is really welcome.
This are the packages I have added to my meteor
zurb:foundation-sites
seba:minifiers-autoprefixer
fourseven:scss
To initialize the Foundation plugins you have to run the init code $(document).foundation();, make sure it is added after the foundation js file are included.
Also make sure that $(document).foundation(); is added after DOM has been rendered (at the bottom of html) or in window.onload event.
Took some hours once to find this out :P
I'm currently updating the website http://www.dev.optiekvandevecht.nl/, I updated it from Joomla 3.3.6 to Joomla 3.4.1. Before updating to 3.4.1, a few lightbox thigns wouldn't work. Right now, I've updated Joomla, and the lightboxes work fine, however, now the nivoSlider seems to be broken (and I suppose it's got to do with jQuery errors, .nivoSlider is not a function.
I honestly don't see what is wrong, it's a Joomla module called ARI Image Slider, but I can't find anything related to the issues I run into.
I deleted an (apparently) unused extension and the problem was solved
It seems like the jquery is already included in any of the extension. Try disabling jquery in any one extension then check it. I hope it would work.
Since last 3 hours i am trying to sort out this problem but couldn't, i tried using solutions posted on other such stackoverflow questions, but didn't work.
So here's what my problem is:
I have a website which has two phases, one is for visitors other is for admins. Now earlier i had both admin and non-admin php files within root directory and js and css files in their respective folders namely "css" and "js" within root directory of website.
But to make everything sorted, i pulled all the admin panel related php files to a folder named "adpanel" within root directory and their css and js stored in their respective folders inside folder "adpanel".
And from here onwards the chaos began, the css failed to show up, even in firebug it showed nothing under it's css tab, it was empty. I thought the problem might have been because of the way i entered the path in href, but even after trying other ways, it failed to load.
But everything works perfect in chrome. I tried to clear whole data of firefox, but that didn't help either.
Please help me out!!
I think the problem is browser related, as explained earlier css loads perfectly in other browser. And now i tried calling the css file from older css folder(the one inside root directory) and it worked. But i've cleared up whole firefox, should i try re-installing firefox?
Update: Have tried reinstalling firefox too. Nothing changes.
Final Update: Guys it was the firefox causing problem. As i said earlier i uninstalled firefox(but not completely) and then again i installed but the problem remained, then after searching a while i first uninstalled firefox then went into APPDATA folder and deleted Mozilla Firefox folder.
Then i reinstalled firefox and alas it started working as expected and css began to show it's effect on pages.
Now, Thank You each and everyone(ofcourse including stackoverflow) who took their precious time for sorting out my problem. And my apologies if anyhow i fell short in providing proper information. I'll improve myself in better explaining my queries. Thank You once again. Good Day :)
If your css is in root folder, I think you should just add / in the beginning of your CSS links:
<link rel="stylesheet" href="/css/masters.css" />
(sorry if I misunderstood your question)
You have missed the text/css in your links, what you need is:
<link rel="stylesheet" href="css/masters.css" type="text/css" />
And this SHOULD work.
Note
Please make sure that you are declaring these in the header and that there are no other style sheets after as they will be overwritten by them or classes/ids overwritten at least
It is the firefox causing problem. I first uninstalled firefox then went into APPDATA folder and deleted Mozilla Firefox folder. Then i reinstalled firefox and it started working as expected and css began to show it's effect on pages.