So this is the repository
https://github.com/fredericojesus/mygroceries-angular
and this is the link for github pages
http://fredericojesus.github.io/mygroceries-angular/
For some reason the browser is not getting the files (see console), but they exist so really dunno what's happening, I'm new to github pages, first time trying.
Can anyone help ?
Just remove the <base href="/"> in your index.html. Then add the folder name to the libraries path.
E.g.
<link rel="stylesheet" href="styles/lib-25ab91c4a2.css">
<link rel="stylesheet" href="styles/app-2b5253690c.css">
<script src="js/lib-05ac045750.js"></script>
<script src="js/app-d3af5f3ca4.js"></script>
Hope this helps.
I was facing same problem without the below answer helped me. Taking off this meta tag made the github page work.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
Related
I'm new to this site and I encountered a problem that I can't figure out. After I did part of my site I decided to upload the files to my phone and analyze what needs to be changed. The problem is that it doesn't want to to read the CSS file or the JS file including the images. I looked over the previous topics with a similar problem but it didn't work. I do not know what to do.Errors only appear on my phone.Help and Thanks!
<head>
<meta charset="UTF-8">
<title>Prajiturele</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<link rel="stylesheet" href="css/style.css">
</head>
https://imgur.com/a/qgwkiLO
if it does not read the CSS file you can use this:
For images, the <img src="(link of your image")>
Check the URL or the title of your CSS files. Do they exactly match? If so, it can be a result of typo errors.
Did you check the src of your JS script and CSS layout ?
There might be a problem in links you use
I downloaded an Html Reader and I see that it reads it very well. While in the browser in Firefox or chrome does not read
I am working to take an existing, medium-complex Angular app and use Ionic to make a mobile version. I am running into a series of issues that I think are related to ui-router, which the app uses. To be specific, in index.html (removed some stuff for clarity):
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="/img/icons/favicon.ico">
<title>My App</title>
<base href="/">
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
</head>
<body ng-app="myApp">
<div ui-view>
<script type="text/javascript" src="/js/app.js"></script>
</div>
</body>
</html>
Notice the
<base href="/">
and the use of absolute paths for the js and favicons (also using this for the css)
When I use Ionic serve, things are fine. However, if I try to run this on an actual device, Ionic can't find the js, css, or favicons. I can fix this by removing <base href="/">, changing the asset paths to be relative, and setting $locationProvider.html5Mode(false) in the js.
However, this totally breaks links all over the rest of app. I'm not sure why the app is set up this way and the we don't have the ability to fix the app to be more straightforward. I've spent a fair amount of time trying to figure out how to make Ionic work with this odd setup, but have failed. Any advice would be extremely helpful. Thanks in advance!
I have a lot of html pages that always start with the same section, for example in index.html I have
<head>
<title>Conference Room Booking App - Welcome</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/themes/1/conf-room1.min.css" rel="stylesheet" />
<link href="css/themes/1/jquery.mobile.icons.min.css" rel="stylesheet" />
<link href="../../lib/jqm/1.4.5/jquery.mobile.structure-1.4.5.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<script src="../../lib/jquery/2.1.3/jquery-2.1.3.min.js"></script>
<script src="../../lib/jqm/1.4.5/jquery.mobile-1.4.5.min.js"></script></head>
Other pages are linked from this page, for example
Sign Up
Currently I have the same header in each of the linked pages. As an experiment I removed the references to the css and js files from the head section of the linked page, leaving just the title, for example
<head>
<title>Conference Room Booking App - Sign In</title>
<meta name="viewport" content="width=device-width, initial-scale=1"></head>
And the page still worked, the formatting and scripts from the css and js files from the index page were used in the linked page.
Will this always work? Is this valid HTML5? I understand that if a browser references the linked page directly that would not work.
There is a simple way of know where the .js and the .css flies come from.
If the links page are inside a master page or other page, there should be your header links.
If the link page is placed isn't nested you can check the following steps to figure where links came from.
Open your site in IE10+
Press 12 to open the developers tools.
go to Network tab, press play button.
reload the page to watch all the request your browse make.
select the ones you want and go to Details view.
finally check in the Initiator link who fires the request.
You can alway try Ctrol + F5 to force the browser to delete cache and reload all the resources again (just in case).
If you load pages via AJAX it may work but if you load each page separately you need to include all css&javascript files page need.
Perhaps it is cached in browser (try reload with Ctrl+R or Ctrl+F5) so it loads css etc. from cache and that is why it looks like those files are not needed.
BTW consider merging css into one file so you can save loading time.
See https://developers.google.com/speed/pagespeed/ for instructions.
You can create a PHP file containing the contents you want to put in your <head>
For instance, you can create a file called header.php, and put all the code you want to use in other HTML files in it.
Then from your other HTML files, you can access it by simply including it:
<?php include '/yourfolder/header.php'; ?>
thanks for this website ;)
I am developing an iPhone app using phonegap and jquery mobile.
On my first page I make a redirection to the login.html page.
I only put this in my index_bis.js file : window.location.href ='login.html';
The redirection works, but there is no style on my page. The style works when I don't redirect! :(
An idea ? Thanks a lot!
This is part of my index.html :
<head>
<title>...</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="css/jquery.mobile-1.3.0.css" />
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.0.js"></script>
<script src="js/login.js"></script>
<script src="js/index_bis.js"></script>
</body>
When you do window.location, the current page is replaced with the called page and so all ur styles references are lost.
You should be looking at a single page application architecture using JQM. The first html page loads and all other pages are loaded asynchronously using ajax added to the DOM. Please carefully read this documentation and you will get an idea.
Multi-page link is how you need to link pages.
if you wanna navigate programmatically, you need to use the $.mobile.changePage() method
Maybe stupid question, but do you have in the login.html thae same style and libraries included?
And have they correct paths?
Just try to point to possible problems :)
Should be a really quick one for you pro's:
I'm learning to use JS, in particular a plugin called (embarassingly) 'Easy Image'.
http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
Here's my code:
http://jsfiddle.net/tomperkins/LnES6/
JS files are from here:
http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
And obviously jQuery (1.5)
I've stripped it down to the basics and can't figure out why it's not working.
Any tips are much appreciated!
Thanks in advance,
Tom
jquery.js and easySlider.js gets an Server error 500 when the browser tries to load them from
http://customstudiodevelopment.co.uk/jquery-test/
Verify that the files are there and that they can be loaded
http://customstudiodevelopment.co.uk/js/jquery.js
http://customstudiodevelopment.co.uk/js/easySlider.js
Unless both these urls load the right JS files your code will not work ...
As a general tip, get FireBug addon to firefox, with the Net panel I found this error in less than 30 seconds ;)
In menu on the left you have to set your framework to JQuery and in Add resources box add 'Easy Image' script. Then comment out first two <script> tags (you will need them on your site but not on jsFiddle). Also change src attributes in <img> tags to absolute path because there is no images folder nor any images on jsFiddle site.
Edit
This is what you get with <script> tags on your site:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
2<html><head>
3<title>500 Internal Server Error</title>
4</head><body>
5<h1>Internal Server Error</h1>
6<p>The server encountered an internal error
Script doesn't work because there are no scripts on your site (both links are dead).
This is working:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<base href="http://customstudiodevelopment.co.uk"/>
<script type="text/javascript" src="/jquery-test/js/jquery.js"></script>
<script type="text/javascript" src="/jquery-test/js/easySlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider();
});
</script>
<meta charset="utf-8">
<title>jQuery Gallery Test</title>
<link href="/jquery-test/css/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="slider">
<ul>
<li><img src="/jquery-test/images/Website-Strip_Future.png"></li>
<li><img src="/jquery-test/images/SR-Toomer_small.png"></li>
</ul>
</div>
<!-- /end #slider -->
</body>
</html>
Note, I put the base element in there to test on my desktop. It's not required for it to work on your server, but if it's on your desktop computer, it should work (so you can copy the html into a Notepad file and save with filetype .html and run it locally to test).
It appears as if your file includes (js/css/image) are not pointing to where you want them to be.
Use Firebug to test these types of things. When you open the console, you can inspect the scripts included, including open each included file. In this way, you can doublecheck to make sure the browser is able to get to your included files.
http://getfirebug.com/
http://getfirebug.com/wiki/index.php/Script_Panel
http://getfirebug.com/wiki/index.php/File:Script_Panel.png <<< see del-linkrolls.js close to top, right; that's where you select which file to inspect
When I loaded the page I got an ".ready() is not a function" which would mean you are not loading jQuery. Then again I've never fooled around with jsfiddle