I'm new to javascript and trying to add this http://codepen.io/jklm313/pen/EarFd great map scrolling effect to my site. Css anf HTML read fine, but the js part doesn't want to work. Even if I put the js code in my html. This is the very typical beginning of my html:
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"/>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
I've searched for clues, but I can't seam to find the issue, is the code outdated or should I add something more? Thanks in advance
Test and make sure you are getting the js file loaded into the page. One method would be to place at the top of the script.js file :
alert('loaded');
If you get the alert box then you you have the correct path. If not then you know it is likely a path issue. You may need to make sure your file is in the same directory or else specify the directory in the src
I just glanced at the link and notice it is using the jquery library. Go to jquery.com to learn how to include that js file as well
Related
I have a blog type website I am currently making that will have different pages in different folders
like for example, the index.php file is:
C:\xampp\htdocs\dashboard\index.php and a section file could be
C:\xampp\htdocs\dashboard\section\section-title.php
C:\xampp\htdocs\dashboard\section\section-title\section-articles
The stylesheet path is: C:\xampp\htdocs\dashboard\stylesheets\index.css
I'm looking to get one stylesheet to communicate with both of the php files mentioned above with the one index.css file. What can be done to accomplish this? There will be more files like the examples above where php files are a layer or two below the index.php file.
I apologize if enough information was not given, I am a bit new to webcoding so if a clarification is needed, I can provide more information
I'm open to using whatever is needed to get this accomplished. The website I am creating is using HTML, CSS, Javascript, PHP and Bootstrap 5
I'll also add for reference that I happen to have two php documents that I use to link my head code and my navbar code into the other php documents such as index.php. I'll list out how this is done. If it's possible, I would like the index.css document to be able to be linked through the bolded code below in the main-head.php document.
Code to link into document:
<?=include
("C:xampp\htdocs\dashboard\head-code\main-head.php")
?>
main-head.php code:
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">`
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Title</title>
<link rel="stylesheet" href="stylesheets\index.css">
<base href="https://indianrivernews.us/" target="_blank">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="C:\xampp\htdocs\dashboard\randomimages.js"></script>
You should add the css file to your main php file like index.php with link tag and use the sections php files with include in your index.
I don't think your main-head.php is referring to the correct file path.
It's looking in the head-code directory for a "stylesheets/index.css"
Try "../stylesheets.index.css" instead.
I hope I understood your problem right and this works!
I have an issue with a website I built from angular. In index.html, there are references to javascript files, but my problem is this: in the HTML, the paths are relative to the file but the browser looks for the files in the root dir:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RasaBE</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-->
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>
This works fine when everything is in the root folder of my website, but I wanted to have everything in a subfolder /bo/. So index.html is in localhost/bo/index.html and so are all the scripts. Since it's a relative path in the code I'd expect my browser to look for localhost/bo/script.js, but instead it looks for localhost/script.js.
A screenshot to show what's wrong:
I tested this in Chrome and I have the same issue. It's a bit complicated to change the paths directly since it's compiled from angular, and I'd probably have to change it every time it compiles. Is this an issue with Firefox and the way it deals with relative paths?
I should also add that host/bo/inline.bundle.js exists and can be found by the browser but the it looks for it in the root folder instead of the same folder as index.html.
This "base" element sets the default location for the page.
Remove
<base href="/">
OR
<base href="/bo/">
If you want your Angular Webapp run from every subfolder without touching the code
Change
<base href="/">
To
<base href=".">
Removing the "base" element won't work since Angular throws then an error complaining about the missing element.
It turns out it was all because of the tag that is added by angular, editing it to <base href="/bo/"> makes it work. since it's just one line to change I consider it fixed.
I've been having issue linking in the JQuery api into my html page. I've spent a lot of time trying to figure it out myself, but haven't made any progress, and would really appreciate anyone's help! Like I mentioned in the title, it works fine when I link to a hosted version of JQuery, but when I try to use a local version, I have no success (I need to work locally for what I'm using it for). Side Note: I downloaded the files directly from JQuery's site, and put them in the root folder for simplicity.
Please see the code below...
This does not work properly:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="jquery-2.2.3.js"></script>
</head>
<body>
</body>
But this does work properly:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
</body>
Maybe it's the order the scripts are coming in - your working version has jQuery first, then mobile, while the non-working one has the opposite. If that doesn't fix it, double-check that your file paths are all correct - the way it's written, your html file must be in the same folder as the scripts. If it's not, try prepending a slash: <script src="/jquery-2.2.3.js"> to force it to look at the root folder.
One way to confirm whether that's the issue is to check your browser dev tools. If you're in chrome, right click -> inspect element, and find the Network tab. Reload your page while you've got that open and see if your page is successfully loading the scripts. If you see the names of those scripts in red, it means they weren't found or couldn't be loaded.
Last thought: if you're working on your local site via opening a file:// path, the JS you can use will be restricted; this is a security feature. To get around it, run your site on a local server. Mac OS X has a built-in one, or you can use PHP or python to get one up and running immediately from the command line, or install a library like pow or serve. Google around for 'local web server setup', there are tons of options.
I am new to HTML and programming and hope someone can help me with this.
I have written the code for the first pages of my website and am now about to upload these to the server for a test.
Therefore I would like to know if the basic structure of my documents is correct and would like to get some comments on the following:
Should I add or change anything regarding my document's head ?
Do I include the external style sheets the right way and at the
right position + is it correct to start the href with "/" here ?
(I read CSS should be included before JS for
better performance.)
Do I include the external JS and jQuery references the right way and
at the right position ?
(I read JS should be included at the end of the body for better performance.)
Notes:
All PHP / HTML pages of my website are saved as separate files in the same folder.
This folder also contains a sub folder "includes" where my stylesheet and functions file are saved.
My HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="John Doe" />
<meta name="description" content="Created: 2015-06" />
<base href="http://www.myURL.com/" target="_self" />
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="includes/styles.css" />
<!-- CSS - Font Awesome -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<title>My Page</title>
</head>
<body>
<!-- ... -->
<footer class="footer">
<!-- ... -->
</footer>
<!-- JavaScript -->
<script src="includes/functions.js" type="text/javascript"></script>
</body>
</html>
Many thanks in advance,
Mike
Looks good. Just a couple of minor things:
You should add <meta http-equiv="X-UA-Compatible" content="IE=edge"> to ensure you don't get any MSIE compatibility mode issues.
You may add favicon definitions in the head.
Yes, stylesheets belong in the head. The href depends on where you are storing the css files.
If you want to include a stylesheet in the same folder as your HTML file, use href="styles.css"
If you want to include a stylesheet in another folder, e.g. [css] folder, use href="css/styles.css"
If you have HTML files in various folders and you don't want to rewrite your hrefs all the time for each HTML file, you can start the href with a slash to indicate search should start from the "root" of the server, e.g. href="/css/styles.css"
Move ALL your JS (including jQuery) to the bottom of the page, just before the closing body tag. Unless there's a very strong reason why you need JS to run before the page starts displaying, you should not have JS in the head.
There are a lot of things to learn, but it can be very fun and rewarding. Hope you have an enjoyable programming experience ahead. :)
I had a great working PhoneGap mobile web-app project, then my laptop died. I had all the files saved to the cloud, so no trouble with code loss, but now I've been trying to rebuild the project and that's where the trouble is.
I've set the whole thing up again, and it's loading alright, all the html elements are there as coded, but the jQuery Mobile css doesn't seem to be including on any of my pages, given that all I see is a white page with normal underlined blue links. Very unattractive.
Here's the beginning of my code on each page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
Which should be alright, I would think...it worked before, anyway.
What's missing? I'm inclined to think it's somewhere in the configuration rather than the code, give the circumstances.
Should there be some sort of cordova.css file? Because there isn't one, and I thought there used to be. (About to Google that...)
Have you checked that code.jquery.com is in ExternalHosts in your phonegap.plist (or cordova.plist)?
Please try whit this,
https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.min.css
Hope this helps. :)