There may be a better forum for this, but here's my problem:
I'm using several different CDN sites for CSS, jQuery, jQuery Mobile, jQuery.validate, etc. Sometime in the very recent past (last few days) the CSS that jQuery validate uses stopped highlighting the affected text boxes in red, and changing the messages to a red font.
I initially thought it was the addition of blockUI.js & css, but then I noticed that all of my fiddles I created to make the bits & pieces of this project had been affected as well, and none of them had ever had blockUI added to them, so that wasn't it.
Then I thought maybe something had changed in Chrome, so I tried in Firefox, same thing. I have a remote server where I upload test code, and it was still working normally, until I reloaded the page, then the same thing. That tells me that the change occurred in one of the CDN based files.
My question is, since I don't have downloaded versions of each of the .js & .css files, how can I determine what the change was? Is it possible to download the previous version (the version numbers in my references hasn't changed, so there's no way to tell from them.
I know I can simply go create my own .css for the highlighting & font issues, but it seems like whoever hosts these various CDN's shouldn't change them underneath you? FWIW, my primary suspect is: http://jquery.bassistance.de/validate/demo/css/screen.css, especially since it hasn't been versioned. I haven't had a chance to try to verify this yet.
For reference I'm using this array of CDN locations for my current project:
<link href="http://malsup.com/jquery/block/block.css?v3" rel="stylesheet">
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet">
<link href="http://jquery.bassistance.de/validate/demo/css/screen.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/additional-methods.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.blockUI.js"></script>
<script type="text/javascript" src="pcbclient.js"></script>
There is no CSS file as part of jQuery Validate. This plugin simply toggles two class names and those have always been .valid and .error.
The root of your problem is right here...
<link href="http://jquery.bassistance.de/validate/demo/css/screen.css" rel="stylesheet">
That's not a CDN link, nor is that CSS file part of the plugin. It's the CSS file used solely for the online demo page.
Everything broke for you because that URL no longer points to a CSS file. However, you should not have been hot-linking to another website's CSS file in the first place. (If it's not a URL from a CDN, it could be considered as stealing the other website's bandwidth.)
If you liked how that online demo page looked, you could have easily examined and copied its CSS properties into your own CSS file, provided that the copyright license allows it.
You might want to carefully review the rest of your file includes' URL's to make sure those are all part of an official CDN and not just hosted on these developers' websites.
It appears I was correct in surmising that the problem laid with the CSS at: http://jquery.bassistance.de/validate/demo/css/screen.css.
I still don't know what changed, but I downloaded the source from: http://jqueryvalidation.org/ (as I should have after deciding to use it), added it to my ASP.NET project and the problem has been resolved.
Related
I'm using Bootstrap to develop a website and recently I asked here a question because some custom simple lines in CSS weren't working. I discovered that using development sites such as jsfiddle or codepen, the code works but I can't still get it working in my computer.
Do I need to install do something or install something? I thought it could be an issue of not using a web server, but I've just installed XAMPP and nothing...
In the end, I'm using XAMPP, with proper path xampp_path/etsit/index.html --> localhost/etsit/index.html. This doesn't work, there's no error in the cosole. When I just click in index.html to open it with the browser, it doesn't work either.
For bootstrap, I just add these links to the body (JUST FOR YOU TO KNOW I HAVEN'T DOWNLOADED BOOTSTRAP BUT I'M USING CDN):
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
UPDATE
Sample in codepen and jsfiddle that work.
The original (it's the same code) you can find it in these other post I made.
UPDATE 2
Please, read the post entirely before editing my question and marking it as duplicate, not noticing that same question is mine and has been referenced twice in the post....
Based on your answers in the comments section, it seems as though you are not loading your CSS file. You've stated that you do indeed have a link to it in your in your code. So either a) that link is now gone (in which case you would not see it at all in your dev tools' network tab); or b) the link is incorrect (in which case you would be getting something like a 404 error in your network tab). Make sure the path to your CSS file is indeed correct and that it exists at the location that you are defining.
I have been working on performance lately, and recently ran a YSlow test on my company's asp.net website. I have already set up an IIS7 rule to set expiration dates to 30 days. After researching, I think Yahoo suggests you add tags like this to your head section:
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo/yahoo-min.js" ></script>
<script src="http://yui.yahooapis.com/2.9.0/build/get/get-min.js" ></script>
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js">
</script>
<script src="http://yui.yahooapis.com/2.9.0/build/imageloader/imageloader-min.js">
</script>
<script src="http://yui.yahooapis.com/2.9.0/build/cookie/cookie-min.js"></script>
If you see this link, Yahoo's recommendations on how to improve SEO, it seems as if yahoo suggests putting these .js files in your header.
Are these javascript files from yahoo something you should include in your head section? Or are they just unnecessary external .js files that will slow your site down? I just don't understand yahoo's logic behind this. Any guidance to clear this up would be greatly appreciated!
Those files are YUI version 2 (deprecated) YUI3 is the latest, if your website is not using any of these components then you're ok to remove them from HEAD section. If your website is indeed using those YUI2 files then you can get the combined version of all the links above in order to have only 1 script tag and move it to the bottom of your page next to .
https://friends-with-you.myshopify.com/
I'm trying to develop my first shopify theme. I'm trying to load a stylesheet which is hosted on another server, but the CSS is not loading. If I copy and paste that CSS directly into a file in the shopify theme, it works.
<link type="text/css" rel="stylesheet" href="http://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
What am I doing wrong at the above URL, and why isn't the css loading?
thanks!
Can you load your CSS file over both http and https? If so, change your tag to look like this:
<link type="text/css" rel="stylesheet" href="//fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
That way whether a user visits using http://yourstore.com or https://yourstore.com, they'll get the stylesheet served using the protocol they're on (and you won't get any mixed content warnings).
A little more background: http://paulirish.com/2010/the-protocol-relative-url/
Under IE7 and IE8, using this in a <link> tag will result in your content being fetched twice.
Change your link tag to use a secure URL:
<link type="text/css" rel="stylesheet" href="https://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
^
The URL you're using now works fine on its own, but since you're browsing to the Shopify store over SSL, many web browsers are going to be hesitant to load the CSS over an unsecured connection.
I just checked and pagodabox serves the CSS file just fine over SSL.
In normal HTML documents one can load stylesheets from anywhere, as long as they exist and you're able to load them by typing the URL in (which I can).
I see the page as two navigation bars with a logo on the left hand side. There are hover states with transitions to a colour background on each item. Although, when I loaded the page, Chrome warned me not to load supposedly insecure content. Before this is loaded I just see text in Times New Roman. I think this is you problem.
I use themes with WordPress and style-sheets come with them (mostly). I don't see why you couldn't just put the style-sheet in with the rest of the theme.
Overall, the answer is yes (normally) but in this case browsers may regard it as un-safe and therefore not load it.
Yes you can! But it is faster to host the stylesheet on your server/where the other files reside. If you plan to include a stylesheet from elsewhere, you could run into problems of that server being down/busy and hence your theme will not display as required. As #Blieque mentioned, some browsers may question external content causing unnecessary warning popups to a user/user-agent.
the font of the content of my facebook app keeps getting italicized even when i've removed the italics from the css file. if i make minor changes in the css file and upload it to the server, the firebug shows the unedited previous css file and hence, the app keeps showing unformatted content. what exactly is going wrong here?
i made a new css file and copied the contents of the previous css exactly as it was, and i linked it in all the files which require css. but when i upload these files to the server, facebook canvas doesn't show any css at all. i replaced the css filename with the previous one, and it works. why is this?
Actually it looks like facebook is currently experiencing some weird problems with styling. It doesn't cache any new styles, only displays what was previously cached (from yesterday). If you provide a new stylesheet url it will not be able to pull it up (like that url doesn't exist).
During normal conditions what others already suggested should work.
Facebook does like to cache things. Persistently. I don't know why the new file wouldn't have worked, by I can recommend 'spoofing' your css filename with a spurious querystring variable, and incrementing it each time you make an update.
eg
href="my_css_file.css?x=1"
Sounds like the browser is caching your CSS file, which is why even Firebug sees the older version.
There are numerous ways you can prevent the browser from caching your CSS file during development (once in production mode, you probably want it to remain in the cache). The most common technique used by web frameworks like Ruby on Rails is to append a random query string to the URL, like so:
<link rel="stylesheet" type="text/css" href="style.css?96234987" />
...but the trick is that it should be different every time, so the browser thinks it's a different file.
Here are links to a simple trick for PHP, a JSP example, and other possible methods.
According to Include files on facebook developer wiki:
Stylesheet includes are cached automatically by Facebook. Just include a tag like:
<link rel="stylesheet" type="text/css" media="screen"
href="http://yourapp.com/stylesheets/style.css?v=1.0" />
Increment the version number upon each change to your style sheet, as specified above.
I'm trying to implement a TinyMCE plugin with ExtJs, with a demo as example, found here: link.
This fails because I receive an "Ext is not defined" error in Firebug. I basically copied the example, I only used a newer version of Ext. First of all the css and scripts are included:
<link href="scripts/extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="scripts/extjs/ext-all.js" type="text/javascript"></script>
<script src="scripts/miframe/miframe-min.js" type="text/javascript"></script>
<script src="scripts/tinymce/jscripts/tiny_mce/tiny_mce_src.js" type="text/javascript"></script>
<script src="scripts/ux/Ext.ux.TinyMCE.js" type="text/javascript"></script>
Firebug does not complain, all the scripts are found on the specified paths and are included.
Next I call the Ext function in the head of my aspx document,
<script type="text/javascript">
console.log("Ready...");
Ext.onReady(function() {
console.log("set...");
Ext.get("cmdOpen").on("click", function() {
console.log("GO");
var dlg = new Ext.Window({
//etc
</script>
The console.log("Ready...") shows up in the console, then the code breaks. There are four references to "Ext is not defined", in ext-all.js(), miframe-min.js(), Ext.ux.TinyMCE.js() and in the code in the .aspx file. (Default.aspx)
I did not alter any aspect of the included files, they are official releases.
Am I perhaps missing a statement somewhere? Or do I have to include other things still? I have honestly no clue.
Even when including ext-all(-debug).js, you still need to include the ext-base.js file before that, otherwise you will get the "Ext is not defined error". Not sure by your last comment if you are already past this or not, but I thought I would point it out. Please see this page for complete details on how your includes should be set up:
http://www.extjs.com/learn/Tutorial:HTML_Page_Setup
there is a firefox extension called "jsview", it allows you to see what scripts and css files are included on a page.
When navigating to the link you include at the top of your post and opening the ExtJs file, you'll notice that the example provided is using version 2.1 of the code.
The Ext.ux.TinyMCE v0.6 has a corresponding blog post here. You will notice that it specifically requires:
Firefox 2+, Opera 9+, MSIE 7
ExtJS 2.1
TinyMCE 3.1.0.1
Ext.ux.ManagedIframePanel
Be aware that when plugging in a newer versions of the TinyMCE or ExtJs libraries, there might (read will) be breaking changes that you will then have to resolve. You could try scrape the files directly from the example to ensure you have a working version.
If you choose to use ExtJs v3+, get the latest components:
1) ux.ManagedIframe has been maintained more recently and even upgraded for ExtJS 3.x here
2) Read through the ux.TinyMce thread and download the latest version. I think it's 0.7b. If you're still having problems, that's probably the best place to find answers.
copy the lib folder in your eclipse workspace`s exjts project folder and just give the relative paths, is should than work
Go to ExtJs website and make sure you download and included all the necessary files and IN ORDER,also using a newer version might break the code.
try it with simpler examples and only reference the ext stuff and see if it loads