Page doesn't load css file after directory change - javascript

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.

Related

VS code Intellisense support in PHTML-files for inline css / inline javascript

I am using Visual Studio Code since a few days and I was wondering if it is possible to have support for Intellisense inside inlined css-blocks and/or inlined javascript in '.phtml'-files.
I could not find a solution online only a few people complaining about this not working from a few months back but I nothing that worked for me.
It would really help me a lot if someone has any idea how to solve this or at least a step in the right direction, or if I have to move the css and js into external files (of course thats better(!) but thats not the point here ;))
Thanks in advance.
This works for me after 2 changes in vscode.
User settings
I added below to the user settings
"files.associations": {
"*.phtml": "php"
},
Extension
Installing the intelliphense extension
And now both php as well as css intellisense works
Make sure you have no other conflicting extension enabled which may cause issue.
Also do have a look at the below open thread
https://github.com/Microsoft/vscode/issues/670

FontAwesome [Webpack] not loading

I'm currently developing my Cortana-App and have a big problem with FontAwesome :)
Since I recently switched to React + Redux and Webpack [Better Structure + Less Space] I had to everything new.
And now comes the problem, I can't use FontAwesome properly. It just displays a white square... I checked many topics on this [Directory Issues, not properly set up webpack-loader], but didn't found anything that fixed the problem. No errors in console of webpack, no errors in developer console.
Here's the link to my project:
https://github.com/khayalan-mathew/gymdonapp/tree/feature/react-redux
The ReactElement i use font-awesome in is:
https://github.com/khayalan-mathew/gymdonapp/blob/feature/react-redux/src/components/test.jsx
I hope somebody can help me :) If you have found the right solution please send a pullrequest or write it down below
-Mathew
There is a known issue from css-loader generating wrong file paths. This won't happen in production build, but still annoying when it render squares in development mode.
Until this issue is fixed, you can disable css-loader source map to see the font rendered correctly in development. Find somewhere in your webpack config that write css?sourceMap and change it to css.

Foundation 5 JS not working in Rails app

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.

Diagnosing Perplexing CSS errors

My website that has been up for a month now without any problems.
This morning everything was normal until I opened up the developer tools in chrome and when the cache refreshed the website was discombobulated!
Opening the website in Firefox I was able to get an idea of what is going on, but still have no clue how to resolve it.
Opened the page in Firefox before refreshing the cache
Notice in the css log how there are no errors.
Refreshed the cache
None of the css is applied and as you can see lots of css related errors.
I went through all my css/script files and none of them have been changed in the past 24 hours.. They all seem to be the same files that have been working perfectly for the past month.
Can anyone give me an idea of what might be going on here? Is it a server issue? Appreciate any ideas/answers to help me get to the bottom of this.
Click on the arrow next to the CSS button in FF's browser tools and deselect warnings.
What you're seeing are warnings related to things like vendor related prefixes.
In general, if warnings are serious enough that action is required, they would be errors. In my opinion you can safely ignore them.
See here: Should FF Error Console "Warnings" be taken seriously if page is not "broken"?
Looks like your site has lots the correct paths to the stylesheets. Have you changed your head or xml recently?
Solved
Another developer updated our bootstrap files from 2.3.2 to the latest version of bootstrap.. And for some reason the modified dates for the files did not change on the server.
Anyway because this issue is so isolated and the question probably won't be of any help to anyone in the future i'll remove it.. But leave this solution up for a few hours just as a FYI to those who have answered/commented on the question.

mouseover not working in ie7

Having problems in IE7.It does not show me the "mouse over- drop down".
This "mouse over" was working well till yesterday also works in FireFox.
There a table that displays all the current documents.When one does a mouse over on a given document,it displays a list of options in form of a dropdown.
Can it be corrected in IE settings etc?
I am not talking about the javascript here , only the user settings.I am strictly the end user in this case.Also i tried downloading IE8 and it stopped in between.Hence I checked the ActiveX settings in IE and it was enabled.
Kindly help.
Your question seems well-founded, but it's difficult to discern what the question is exactly. Could you please elaborate? Source code may also help.
If you'd like to go a more DIY route, try throwing your code at JSLint. It will magically surface errors you didn't see.
Sitecore generates a lot of temporary and debug code files. This could be the problem. I would try deleting all of the temp/debug files, and see if that helps. They are scattered throughout the site, so you have to hunt for the debug directories.
However, I do see a lot of WEIRD JavaScript things with SiteCore. Sometimes I will load the content editor, and it wont work because of JS errors. I clear my cache and refresh and it works fine. But nothing in the JavaScript should be changing, since it would be the scripts from the vendor. I don't go in and change JS. Maybe they are generating JS somewhere.

Categories