I just uploaded my website on a free host server but it doesn't work properly. I don't know why...
can you help me please ?
see the link :
https://electrophotonique.000webhostapp.com/
Your code is fine but you just need to put your scripts at the end of your code before the </body> tag Like this :
<html>
<head>
<link rel="stylesheet" href="CSS/style2.css">
<link rel="shortcut icon" href="IMAGES/PNG/favicon.png">
<meta charset="utf-8">
<title>Electrophotonique Ingenierie</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- YOUR CODE - START -->
.....
<!-- YOUR CODE - END -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="JS/sticky_navbar.js"></script>
<script src="js/button.js"></script>
<script src="js/index.js"></script>
</body>
</html>
Related
So I'm not sure if it's just because I'm a noob at this or what, but I can't get the bootstrap CDN to work. I copied the CDN from their website and pasted it into the code I was working on, and then a fresh page, as shown below and it's not applying on either. The weird thing is that the CDN from freecodecamp on their bootstrap portion works. What am I doing wrong?
Heres the code
<!doctype HTML>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar navbar-default">
</div>
</body>
</html>
You need to import jQuery as well (bootstrap uses it) and its best to load it just before your closing tag so that it doesn't block other loading and is then called with a $(document).ready() wrapper.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>
</html>
I'm using Mottie keyboard https://github.com/Mottie/Keyboard. All the JS and CSS from this plugin added in index.html. My partial file is home.html in this file only i have keyboard code, but that was not working.
If i'm adding those CSS and JS files it was working in homepage but all the js files were rendering console also in GET method...
Below are my code.
index.html
<html lang="en" ng-app="CSI">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>AXA</title>
<!-- Bootstrap -->
<link href="docs/css/jquery-ui.min.css" rel="stylesheet">
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="dist/css/video-css.css">
<link rel="stylesheet" href="dist/css/keyboard.css">
<link rel="stylesheet" href="docs/css/demo.css">
<link rel="stylesheet" href="docs/css/tipsy.css">
<link rel="stylesheet" href="docs/css/prettify.css">
<link rel="stylesheet" href="dist/css/custom.css">
<script type="text/javascript" src="docs/js/jquery.min.js"></script>
<script type="text/javascript" src="docs/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="docs/js/bootstrap.min.js"></script>
<script type="text/javascript" src="docs/js/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.2.28/angular-route.js"></script>
<!-- project scripts -->
<script type="text/javascript" src="public/app/app.js"></script>
<script type="text/javascript" src="dist/js/jquery.keyboard.js"></script>
<script type="text/javascript" src="dist/js/jquery.keyboard.extension-typing.js"></script>
<script type="text/javascript" src="dist/js/jquery.keyboard.extension-autocomplete.js"></script>
<script type="text/javascript" src="dist/js/jquery.keyboard.extension-caret.js"></script>
<script type="text/javascript" src="docs/js/demo.js"></script>
<script type="text/javascript" src="docs/js/jquery.tipsy.min.js"></script>
<script type="text/javascript" src="docs/js/prettify.js"></script>
<script src="dist/js/custom.js"></script>
<script type="text/javascript" src="dist/js/wow.js"></script>
<script src="dist/js/touchswipe.min.js"></script>
<script type="text/javascript" src="dist/js/jquery.mousewheel.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
home.html
<input class="text" type="text" placeholder="Name"><i class="fa fa-keyboard-o icon" aria-hidden="true"></i>
I dont know why my code is not working... the keyboard is coming... if i add all the keyboard related scripts in home.html keyboard was coming but in browser console all the scripts are changed into GET requests and loading always whenever the page get refreshed.
Browser console
Any suggestion Any help.
Thankq in advance.
Was just wondering if someone could be able to help me out. I've come across a strange issue that i've never encountered and I have no idea how to solve it :
<head>
<title>Welcome to Edge Hill Computing</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="index.css"/>
<script type="text/javascript" src="global.js"></script>
<script type = "text/javascript" src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
</head>
my javascript file and my jquery file is imported here. Which "should" to the external jquery file. But it doesn't, i have to run the code from there with script tags. Any possible solution?
If it helps the code in the Global.js is this :
$(document).ready(function(){
$("#txtbox").keyup(function(){
var name = $('#txtbox').val();
$('#display').html((name));
});
});
global.js should be loaded after jQuery
Add your script tag after the jquery script references.
<head>
<title>Welcome to Edge Hill Computing</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="index.css"/>
<script type = "text/javascript" src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="global.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
</head>
<head>
<title>Welcome to Edge Hill Computing</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="index.css"/>
<script type = "text/javascript" src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="global.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
</head>
You need to process your code after jquery has loaded. I imagine when you were inserting it directly in the page it was below where you loaded jquery in the head tag.
I'm trying to get a mobiscroll scroller in my web app. I tried following their most basic tutorial found here: http://docs.mobiscroll.com/25 and I don't get anything to show up. I'm a super huge noob when it comes to javascript and feel dumb that I can't get through a three line tutorial. Here is some code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<!-- Bootstrap -->
<link href="http://universitylunchbox.com/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://universitylunchbox.com/static/css/bootstrap-responsive.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://universitylunchbox.com/static/js/bootstrap.min.js"></script>
<style>
...
</style>
...
<input id="scroller" name="scroller" />
...
</body>
<script type="text/javascript">
...
//google analytics stuff
...
$(function(){
// create a datetimepicker with default settings
$("#scroller").mobiscroll().datetime(); // Shorthand for: $("#scroller").mobiscroll({ preset: 'datetime' });
});
</script>
</html>
You have to inlcude the downloaded mobiscroll js and css files in the head section (after jquery). Also, move your initialization code before the closing </body> tag
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<!-- Bootstrap -->
<link href="http://universitylunchbox.com/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://universitylunchbox.com/static/css/bootstrap-responsive.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://universitylunchbox.com/static/js/bootstrap.min.js"></script>
<!--Mobiscroll-->
<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
<script src="js/mobiscroll.custom-2.5.0.min.js" type="text/javascript"></script>
</head>
I have created a simple mobile web page, I don't no why but the button I have created doesn't stylized like in this link. Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content = "width=device-width , user-scalable=no">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link type="text/css" href="jquery.mobile/jquery.mobile-1.1.0.css"/>
<link type="text/css" href="themes/theme.min.css"/>
<link type="text/css" href="CSS/main.css"/>
<script type="text/javascript" src="cordova/cordova-2.2.0.js"></script>
<script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<title>page</title>
</head>
<body>
<div data-role="page">
<div data-role="content">
Delete
</div>
</div>
</body>
</html>
Where I am wrong?
Thanks in advance!
make sure, your local libraries are available and the paths are correct...
see working example with the newest libraries
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
Delete
</div>
</div>
</body>
</html>
I believe that the problem is with your stylesheet links. You need to include rel="stylesheet" instead of setting type.
E.g.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>