I am trying to implement fancy box functionality. I've created a plunker and it works on plunker
Plunker but in my host I got
Error: $.fancybox is not a function .link/<#file:///C:/Users/h166622/Desktop/Angular/js/core/directives.js:99:6
How it could be?
It seems you are linking your stylesheets and some javascript with only "//domain.com/xxxxx". Doing it this way is great for production sites, or even sites configured locally with the use of virtual hosts. If you were to copy/paste the code and just open the .html file in your browser, it loads that file locally, thus links that do not specify a header (i.e. http or https) will try to find those links locally as well.
http: //cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css
http: //cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.js
The use of // insted of http:// is what is known as protocol-relative URLs. This way, if a browser is viewing a page through an *HTTPS** protocol, the asset will also be loaded using an HTTPS protocol. Same applies to general HTTP protocols.
So unless you configure a virtual host to do local site development, I would change those links. Another thing to note, is that your application is linked to app.js linking to a local file when viewing a .html file is usually fine so long as both exist within the same directory. Otherwise, you'll need to include and edit your application javascript through the use of inline <script type="text/javascript"> ... </script> tag.
Related
Let's say I have a project named project. When I open the index.html using intellij built-in server it shows the url localhost:port/project/index.html
However, when I click on a element that has href="/" it shows the url localhost:port/index.html causing css not to be applied and other issues. It works fine if I use href="/project". What could I do?
This project is hosted by github pages and works fine with just "/". So far, to work locally, I made a js script that replace slashes with /project (I know, not elegant and efficient..)
The leading slashes in URL tell the browser to resolve URLs from the web server root. But the built-in web server serves files from http://localhost:63342/<project name>, so no resources can be loaded from http://localhost:63342 - thus the issue. There is unfortunately no way to set it up to use project root as server document root. I can only suggest using URLs relative to current .html file instead of URLs with leading slashes, or use a different web server to host your apps.
Note that we have added some fixes recently that make (most) of absolute paths work on the built-in web server, see https://youtrack.jetbrains.com/issue/WEB-11949/simplify-built-in-web-server-document-root-configuration#focus=Comments-27-5029164.0-0. But some problems still remain, see https://youtrack.jetbrains.com/issue/WEB-57280/Built-in-web-server-URL-links-in-CSS-dont-work-if-CSS-is-loaded-using-absolute-path-with-leading-slash, for example
I am working with a simple HTML test page. I am opening it with Chrome version 40.0.2214.115. In order to test the code, I am loading a js file from my workplace.
However, the file which I loaded tries to load other js files through script tags, but does not specify http:// . This causes an error in the console, as it defaults to the file:/// protocol and is unable to load file://the/restof/theurl.js
I downloaded the file locally, and loaded it from there, adding http:// to all url's, so it would ACTUALLY use the HTTP protocol.
This worked fine. However, those links load OTHER files that also do not specify http://
Is there any way I can have the browser imply http:// to unspecified script tags, and avoid downloading and editing EVERY file just to test a small HTML page?
I think the easiest way to prevent problems like this is to actually use a very small server (like something provided by node.js or the like or lighttpd).
Obviously your files are not supposed to be delivered via the plain file protocol, so you should just use a http server. That way you can be sure they work as intended and you don't have to fiddle around with your browser on a deeper level.
If you launch chrome with the below flags this should work. Obviously not possible for production environments, but for testing it should be okay.
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
Consider using a simple local file server. If you are unsure how to, since you are developing in JavaScript, you can easily create a simple file server using Node.js which written in JS using simple middleware like node-static.
I am running a tomcat server and my localhost base domain is :
C:/apache/webapps/ROOT/
My webpage is also present here.
However the javascripts are present in an external location.
D:/something/something
And i am importing them the following way
<script src="D:/something/something/js1.js"></script>
In IE the page loads fine and able to locate the scripts, however with chrome it fails.
On debugging I see that chrome tries to append the following:
http://localhost:8080/D:/something/something
How do i get it to work on chrome without copying the scripts to base location?
For doing anything useful from within the JS code, you'll most likely have to obey the same origin policy. This means you'll have to configure your Tomcat so that it serves the scripts, too.
If you really insist on reading the scripts from local files, that's what file:// URLs do.
You can't do this because you will search for D:/something/something/js1.js in the user/client computer.
You can do it calling (read and print) the file via PHP (D:/something/something/js1.js.php) or any other server side programming language or installing a webserver in your external location to call the file via URL like myCDN.mydomain.com.
EDIT: If you will only work in localhost, use #Pointy and #Konstantin K solutions :)
I'm using a js library inside a PhoneGap application for iPhone. I don't know what other external sites my js library contacts, so I need a way of whitelisting all connections, just for testing. How do I do that?
My app just silently fails, it doesn't continue from where the library is initiated.
(when I run the app in a browser it works perfectly)
Try setting the value of the ExternalHosts property in Phonegap.plist to *
i think you need to add the domain names to PhoneGap.plist file or Cordova.plist.
And your App is running fine in browser. So in Browser source-code you can check-out for the external links present in your code.
Which ever file you want to access/link through internet, that server domain you need to add in plist file. suppose i have added jquery like this
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
now i need to add code.jquery.com in PhoneGap.plist-> ExternalHosts array as string.
I am using flexible css box model in one of my web application. For cross browser compatibility in IE, I am using the flexie.js pollyfill. I have got it working perfectly fine on my local machine as well as on my production environment. However, the problem starts when i try to serve my static files( css, javascript and images) from a subdomain instead of the naked domain. The flexie.js file is loaded in ie, however it doesn't seem to do anything when i serve static content through sub-domain. As soon as i change my config to use naked domain for serving the page, flexie.js renders the page appropriately. I don't see any ajax in play here and all my other script files work perfectly fine when i use the subdomain. I don't think this makes any sense, and am sure there is some other reason for the same.
Seems like a limitation of flexie.js (which gets its CSS parsing from selectivizr) is that the static files and webpage must be on the exact same domain:
http://selectivizr.com/#things
(linked from https://github.com/doctyper/flexie)
Style sheets MUST be hosted on the same domain as the page due to browser security restrictions. Likewise, style sheets loaded using the file: protocol will not work.