Issue with Content Slider - javascript

I am new to html and css. I am trying to customize the slider as provided on this:
http://slidesjs.com/#overview
I am using the - Linking demo from the download.
The only thing I have done so far is add a folder under img, css and js called slider and have added the files under that folder.
So the only difference in the index.html is:
<link rel="stylesheet" href="css/slider/global.css">
which earlier was:
<link rel="stylesheet" href="css/global.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"/>
<script src="js/slides.min.jquery.js"/>
everything works fine except the pagination at the bottom of the image frame.
if I restore the path for css from "css/slider/global.css" to "css/global.css"
it works fine. I tried to locate the places where the *.css file is called but I ma not able to locate the issue.

Line 132 in the css file references a 'pagination' image path. If the location has changed then you'll need to update that css file.
Ex.
background-image:url(../img/pagination.png);
Based on what you said above, it should probably now read:
background-image:url(../../img/slider/pagination.png);

Related

Why I can not load CSS into my Github hosted site?

I am making a static site in Github, but when I try to load the site, the CSS page is not loading up. I looked up many solutions like these -
CSS not loading for GitHub pages
&
How to link my CSS to my HTML in a github hosted site
And found out that here CSS is not implicitly linked with HTML, rather CSS is stored in Github as HTML type copy, and to get CSS correct, we need to get CSS implemented correctly. That is why we can use {{site.github.url}}, or maybe give <link rel="stylesheet" href="https://iamdeb28.github.io/node_modules/todomvc-common/base.css">, things like that. But my question is how I can implement it and do my work done?
Here are my code and link to the Github site -
<head>
<meta charset="utf-8">
<title>To-do list app</title>
<link rel="stylesheet" href="https://iamdeb28.github.io/node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="https://iamdeb28.github.io/node_modules/todomvc-app-css/index.css">
</head>
link - https://github.com/iamdeb28/OpenClassRoom_Project_8
Github Static Site - https://iamdeb28.github.io/OpenClassRoom_Project_8/
Well, one thing that I want to mention is that when I loaded chrome dev tools and inspected the sources tab, I found index.css and base.css file totally empty, and when I inputted the code, it just works fine. But when I refresh, same thing happens. I am pretty new to JS and Git, if you can please help.
Can anyone please help???
Edit: Here is a screenshot that proves that internally, the CSS is empty and contains nothing.
As #Senatrius said, the main problem was the node_modules folder, and also the .gitignore file. Previously I was not looking at this .gitignore, but as name suggests, it is just ignoring the files, I want to show (it has the files names and paths with a '!' sign). Also, don't know why node_modules folder name is just not working out, so I copied my files to the root directory and everything seems okay. Thanks #Senatrius.
You have to link the stylesheets from the directory where your HTML file is. THis is your solution. Thanks.
<link rel="stylesheet" href="./node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="./node_modules/todomvc-app-css/index.css">

How do I link CSS and JS files to my HTML file for github pages?

I've just moved to github pages, and I have an index.html, an index.js and a style.css all in the same folder(master I believe). I've tried the following way to link the js and the css to the html:
<link rel="stylesheet" type="text/css" href="master/style.css">
<script src="master/index.js" type="text/javascript"></script>
However, it just doesn't seem to work. In the middle, the CSS seemed to link once, but then after that when I tried to link the JS too, the whole thing stopped working again. How do I fix this?
If all your files are in the same folder, I'm not sure you need to type folder's name. Try to remove "master/" in your two lines of code.
When you link stuff to your html file, the path is relative to that file.
So if style.css and index.js are in the same folder, you just link them by providing file names only.
If those file were in the folder above, you would link them by "../style.css" and "../index.js"
If those file were in the subfolder (in relation to index.html), you would link them by "subfolder/style.css" and "subfolder/index.js"

can't link to js and css in local directory [duplicate]

This question already has an answer here:
CSS link to file on harddrive?
(1 answer)
Closed 3 years ago.
I have a laptop that rarely has internet connection. But I need Bootstrap and jQuery, so I decided to create local jQuery file and download Bootstrap and link to them in html file. So I use <link rel="stylesheet" href="D:/Bootstrap-4.3.1/css/bootstrap.min.css"> but it doesn't work. Same with jQuery. So I guess I don't specify paths to the files correctly. Or where's my mistake?
P.S. Codecademy forum says I do everything correctly
windows:
href="C:\users\documents\username\web\stylesheet.css"
but it still doesn't work
Don't link to a full path, but to the path from your index.html
So, if you had your structure like this:
index.html
[css] - folder
[css]/bootstrap.min.css
[css]/someotherfile.js
In your index.html you should link as:
<link rel="stylesheet" type="text/css" href="css/botstrap.min.css">
Technically you can still link with fullpath, but it's unnecessary and often creates confusion / you miss a slash and whatnot.
This is Hard to say What mistake you are doing Mostly Chances are as follows:-
Using full path instead of a relative path
Using Improper filenames
Or you can check these using chrome network panel weather these files are actually loading or creating 404
OR
I founded a starter kit which contains HTML, CSS, javascript, bootstrap and jquery
download it from GitHub from Here
#j_noe . Then if that is the case, to link to your CSS file try this in your html file.
<link rel="stylesheet" href="/../../Bootstrap-4.3.1/css/bootstrap.min.css">
This is on assumption that :- your html is in D:/projects/project1/main.html and css in D:/Bootstrap-4.3.1/css/bootstrap.min.css

Node.js All CSS AND JS Links disappears at a certain route

Hey guys i have a really strange issue, and that is that when i go the route http://localhost:5000/posts/edit/<%=idofblog%> all the CSS styling and Js code is not loaded and i have a very ugly looking web page i have no idea what is going on, all the other routes are working just fine.
All the CSS and Js folders are inside the public folder
app.use(express.static(path.join(__dirname,'public')));
this is my entire file structure
enter image description here
Inside the _layout folder i have a header.ejs file which has all the links to css like this:- <link rel="stylesheet" type="text/css" href="../css/register.css">
every route is working perfectly but as soon as i go to this route http://localhost:5000/posts/edit/<%=idofblog%> every CSS and JS code is gone and the images as well.
Inside the posts.js route i have this
router.get('/edit/:id',(req,res)=>{
res.render('edit');
});
And the href link in the ejs file is this
Edit
The page is loaded and everything like the input fields, textarea are there but there is no styling, i don't know what im doing wrong.
I am not sure but what I see, your problem might be that you are using relative paths to load your styles and scripts. You should use absolute, so for example to load css you need to do it this way(make sure to use path according to your project structure):
<link rel="stylesheet" type="text/css" href="public/css/register.css">

Relative pathway works to display images in CSS file but not in Javascript file

Ok, going to rewrite this…
I have a project. It has 2 layers. Top layer is HTML5 animation (rollovers, slides etc). Bottom layer is kaleidoscope animation using images and CSS.
Bottom layer displays correctly. Top layer does not.
Client has requested that we use relative pathways.
Client has requested we use a strict directory structure of: Pages, Documents, PlusImages.
Pages= html/txt (where the css/javascript is attached in)
Documents= where the CSS and Javascript files are
PlusImages= where all the images are stored
Here's the issue: The images are NOT displaying for the top layer which is called by a javascript file. The program that generated this script is called Tumult Hype
How can I correct this? I thought about adding ../PlusImages/imagename.png to the agilent_hype_generated_script.js file.
Here is the pathway client wants to use:
http://www.XYZ.com/en-US/Products-Services/Services/
HTML File code connecting the CSS and JS files:
<link rel="stylesheet" href="/en-US/Products-Services/Services/Documents/main.css" type="text/css" media="all">
<script type="text/javascript" charset="utf-8" src="/en-US/Products-Services/Services/Documents/agilent_hype_generated_script.js?55531"></script>
main.css:
.kal_main{background-image:url(/en-US/Products-Services/Services/PlusImages/Animation-Background.png);overflow:hidden;width:920px;height:510px;margin:auto}
agilent_hype_generated_script.js:
(function(){(function k(){var h="Agilent.hyperesources",e="Agilent",d="agilent_hype_container"; if(false==!1)try{for(var f=document.getElementsByTagName("script"),b=0;b<f.length;b++){var a=f[b].src;if(null!=a&&-1!=a.indexOf("agilent_hype_generated_script.js")){h=a.substr(0,a.lastIndexOf("/"));break}}}catch(n){}if(false==!1&&null==window.HYPE_316)null==window.HYPE_dtl_316?(window.HYPE_dtl_316=[],window.HYPE_dtl_316.push(k),e=document.getElementsByTagName("head")[0],d=document.createElement("script"),
b=navigator.userAgent.match(/MSIE (\d+\.\d+)/),b=parseFloat(b&&b[1])||null,d.type="text/javascript",d.src=h+"/"+(null!=b&&10>b?"HYPE.ie.js":"HYPE.js")+"?hype_version=316",e.appendChild(d)):window.HYPE_dtl_316.push(k);else{f=window.HYPE.documents;if(null!=f[e]){a=1;b=e;do e=""+b+"-"+a++;while(null!=f[e]);for(var c=document.getElementsByTagName("div"),a=!1,b=0;b<c.length;b++)if(c[b].id==d&&null==c[b].getAttribute("HYP_dn")){var a=1,g=d;do d=""+g+"-"+a++;while(null!=document.getElementById(d));c[b].id=
d;a=!0;break}if(!1==a)return}for(var a=new HYPE_316,c=[],c=[],g={},l={},b=0;b<c.length;b++)try{l[c[b].identifier]=c[b].name,g[c[b].name]=eval("(function(){return "+c[b].source+"})();")}catch(m){a.log(m),g[c[b].name]=function(){}}a.z_a({R:5,S:0,aI:0,T:0,bG:3,aJ:0,bH:2,aK:0,X:0,bI:3,aL:0,Y:1,bJ:3,bK:3,bL:3,a:0,b:0,c:0,d:0,aS:0,e:3,bQ:0,aT:0,f:2,g:5,bR:2,aU:0,bS:"NumberValueTransformer",aV:0,aW:3,A:5,l:2,aX:0,B:5,m:5,C:5,aY:2,n:5,D:5,E:0,aZ:0,G:5,t:0,bA:5,RotationAngle:2,tX:4,bB:0,M:0,N:0,bC:0,tY:4,O:0,P:0,Q:0});a.z_b({"25":{p:1,n:"../PlusImages/Overlay-Type-4.png",g:"127",t:"#1x"},"18":{p:1,n:"../PlusImages/Overlay-Type-3.png",g:"86",t:"#1x"},"10":{p:1,n:"../PlusImages/03-over-1.png",g:"101",t:"#1x"},
(you can see how the images are referenced above) - ../PlusImages/imagename.png Will this work or am I missing something??
Alright your text is a bit confusing, but I will give this a shot.
It sounds like your javascript file is being linked into an HTML page? If this is the case, then the path from the javascript to the images should be the same as it is for your HTML since that's where it's being run from.

Categories