gh-pages won't load CSS or JS - javascript

Alright, so I have Jekyll running my site locally and it runs perfectly fine. When I pushed everything to Github and made it a gh-page all styling and js functions disappeared. When I go onto the site I see that the css files that it is pointing to are empty, though they clearly have styling in github... So i've tried several of the solutions that I could see on here, but to no avail. This is the gh-page currently: https://jacobprice.github.io/Webpage/
The code is here: https://github.com/JacobPrice/Webpage
I've been changing stuff around based off solutions here, so hopefully I haven't broken something else... Any help is greatly appreciated.
Note** if the site is down it will show an old ruby on rails project with a countdown. That is not the gh-page site.

View page source your website.
I see your url failed
Edit Your Url load css and js file:
<link rel="stylesheet" href="/assets/css/main.css" />
<script src="/assets/js/jquery-2.1.1.min.js"></script>
<script src="/assets/js/functions.js" type="text/javascript"></script>
You should use relative path for url

Okay, so this is kind of a work around... Not sure why it wasn't directing to the proper folder, but the fix for me was to copy my main.css (the full css that sass compiles) and then create another main.css file where it kept pointing too. Kind of a hack and not proper, but it works...

In _config.yml, set baseurl: /Webpage and call your resources like this :
<script src="{{ site.baseurl }}/assets/js/jquery-2.1.1.min.js"></script>
It will now work both locally and on gh pages.

Related

How can I recreate a codepen locally on my computer?

So I found a nice website on CodePen and I want to copy/paste it local so I can play with it a bit. I have created all 3 files ( html, css, javascript ) in the same folder and I linked them in the html file.
In the local folder I have : index.html + stylesheet.css + Javass.js.
I have linked them in respectively like this:
<link rel="stylesheet" href="stylesheet.css">
<script src="Javass.js"></script>
I think the css file is showing but not the js one. Can you help me?
Edit: https://codepen.io/TurkAysenur/pen/gORaboY (this is the codepen)
It is hard to tell like this.
Though here are the common things:
Copy code pen's html into the body html element (don't replace the whole code)
Make sure JS runs after page loaded ( window.onload=()=>{...} ) or any other solution for that.
Edit: according to Yogi there is an export button. This could be the simplest solution for you

Javascript not included play framework

I'm working on a website with play framework and I have a little problem.
I am using a main.scala.html page which includes a <script src="#routes.Assets.versioned("javascripts/jquery.js")"></script>
Then to create a page I use #main("pagename") {body content here}
The problem is that when I start the webserver it doesn't include the javascript file. It does work for the CSS however: <link href="#routes.Assets.versioned("stylesheets/main.css")" rel="stylesheet">
This is showing in chrome developer tool:
The jquery.js is located in: /public/javascripts/jquery.js
Does somebody know how to fix this? Thanks
I have put the script tags inside the body now and it works. Don't know why it doesnt work when I put it in the main.

Google Analytics, jQuery Magnific Popups, .NET master page implementation

I will start with admitting that although I have been researching, reading, and trouble-shooting my issue I think I am missing something fundamental with my site. I apologize for my ignorance in advance but this is the only way to learn--by admitting you don't know what to do.
I'm running a VB.NET site which has a master page and content pages. I am still very much in development of the entire site trying to add features.
What I'd like to do:
I would like to add google analytics and jquery magnific popup. I've followed all the instructions from google and from magnific pop-up and I'm still having issues.
What I've done to try and make this work so far:
My head on masterpage:
<script src="Scripts/googleanalytics.js" type="text/javascript"></script>
<script src="Scripts/jquery-2.1.3.js" type="text/javascript"></script>
<script src="Scripts/jquery-magnific-popup.js" type="text/javascript"></script>
My footer on masterpage:
<script type="text/javascript">
$('.test-popup-link').magnificPopup({type: 'image'});
</script>
Added class to image:
<a class="test-popup-link" href="img/bigdog.jpg"><img class="centerimg" src="img/smalldog.jpg" /></a>
My issues:
Google script fails to find script. It's definitely there, it was
copy/pasted directly from google's site into a file I am calling.
jquery and magnific pop-up only load on my root pages.
"/products/product1.aspx" pages for example refuse to load scripts.
Although they load on root pages, the script does not appear to work
for the image pop up. I've followed magnific-popup's instructions word for word for "initializing in html"
Instructions for magnific-popup: http://dimsemenov.com/plugins/magnific-popup/documentation.html#mfp-build-tool
Lastly, before I tried adding the image pop-up google analytics appeared to be working as I was getting reporting on the web analytics page.
Any help would be appreciated.
Solution found via talking it out on IRC.
I restarted my local server and it worked on my root directory. Race conditions or caching causing the problem?
I needed to add "/" before "Scripts" in my head which fixed non-root script loading.
Thanks to robert on freenode for talking me through it. :D

js file path is correct but it cant be loaded

I'm using ASP.Net Dynamic Data. I have the following line in my site.master page.
<script src="../Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
The path is correct and file exists. But when I load the page I can see in the Net panel of firebug that it cant find the file. Error message is "404 Not Found"
Approach - 1
You should modify the code like as mentioned in below ways...
~/Scripts/jquery-ui-1.8.20.custom.min.js
"<%#ResolveUrl("~/Scripts/jquery-ui-1.8.20.custom.min.js")%>"
in the first case replace the .. with ~
Approach - 2
Alternatively, Right click the Page and select View Source. click the link of your Script file and check if it navigating to your actual Script file? Otherwise make the necessary changes as mentioned above.
I dont trust your url :)
use :
<script src='ResolveUrl("~/Scripts/jquery-ui-1.8.20.custom.min.js")' type="text/javascript"></script>
also , please verify - you load the jQuery.js BEFORE you load this line.
When you use ../ at the beginning of a url, it is the browser's current url that is taken as the base. So that url will only work when you are at exactly one directory level down from the site root, like this:
http://myserver:myport/myvirtualdir/somedir/somepage.aspx
Or this:
http://myserver:myport/myvirtualdir/somedir/ (using a default page or view)
Then, the browser will load the following script:
http://myserver:myport/myvirtualdir/Scripts/jquery-ui-1.8.20.custom.min.js
But if you are at any other directory depth, the browser will use the wrong url for the script. Like if you are at the root default page:
http://myserver:myport/myvirtualdir/Default.aspx
Then the browser will try to load the script from the wrong directory:
http://myserver:myport/Scripts/jquery-ui-1.8.20.custom.min.js
That is why you need to resolve the url on the serverside, like a couple of people have already said here. That will provide the browser with a working url for your script. There's a difference between file paths and urls.
The fact that you are getting a 404 means that the url that the browser is trying to reach is simply not correct, from the browser's point of view, which is in fact the only point of view that is valid, even if you, the developer, is convinced that you are doing it right...
<script src="<%#ResolveUrl("~/Scripts/jquery-ui-1.8.20.custom.min.js")%>"></script>
As Royi mentioned make sure you have the jquery.js before you have your jquery-ui.js
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
Here is a tip. open site.Master designer then drag and drop the .js file from the Solution Explorer into the designer. It would create the path for you.

Location of head.phtml in Magento

I am working with Magento and need to remove a Javascript that is being included in the <head> section by default.
I am using a modified theme called modern. I am looking for head.phtml in:
app/design/frontend/default/modern/template/page/html/head.phtml
It does not exist. I do have header.phtml and footer.phtml. The code from header.phtml starts well after the <body> of the document.
Where in the world would the head.phtml file be?
Thanks in advance.
Goto Core theme files in Magento :
app/design/frontend/base/default/template/page/html/head.phtml
copy this file from Base and Paste it to you theme, that is
app/design/frontend/default/modern/template/page/html/head.phtml
Now change here as per your requirement.
To Remove Javascripts goto its XML file i.e. page.xml.
Enjoy :)
I figured out what the problem was. I needed to look in the base directory under the default template:
app/design/frontend/base/default/template/page/html
I'm not exactly sure why though.
FWIW, JS should usually be removed by commenting/deleting relevant lines from the /layouts files in your theme, not the head template file itself. Unless someone added those script lines manually (naughty code monkey), of course.

Categories

Resources