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>
Related
I need to add a specific help-text for each possible value in the choicefield. And I need to show it in a tooltip bubble.
How should I include the value specific help text in the model? and should I use CSS or Javasript tooltip.
I already included helptext in tooltips for other charfields using CSS :hover and adding it in an "extra-admin.css" and this works.
You can use bootstrap-tooltip like this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li>Top</li>
<li>Bottom</li>
<li>Left</li>
<li>Right</li>
</ul>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
you can directly insert this into your Django template for better understanding.
include these scripts
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
anchor with tooltip
Hover over me
javascript for tooltip
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
these examples are from W3Schools
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>
I'm not really sure why this is not working but I have an MVC View that I want to display the current date/time/seconds on the page. I've put the javascript in the "Scripts/script.js" file. I then added the following at the bottom of the MVC View.
#section scripts {
<script src="~/Scripts/script.js"></script>
<script type="text/javascript">
$(document).ready(function () {
setDateTimer();
});
</script>
}
Thing is when I run it something is causing an error. Unfortunately at the moment I can't see the actual error message because of the way they have the site configured any error just takes you to a generic error page. I do know it has something to do with the code above because removing it cause the page to work.
For testing purposes I even removed all but simple javascript code in the file but that still doesn't work. Right now this is all that is in my script.js file.
function setDateTimer() {
var today = new Date();
}
I know the name of the of the .js file in the code is correct because I just dragged and dropped it to the page from the solution explorer.
Here is most of my _Layout page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<div class="container body-content">
#RenderBody()
<footer></footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</body>
</html>
Layout page doesn't have a place to render the section you can change it like
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<div class="container body-content">
#RenderBody()
<footer></footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
#RenderSection("scripts",true)
</body>
</html>
Okay, this is going to sound very imbecilic. (which it probably is)
I'm a very novice programmer, so please bear with me.
I'm trying to link a simple jQuery file to my HTML file, but I can't seem to make it work. After looking through the previous answers to this trivial question, I realized that i was missing pivotal lines of code such as (and this is just an example)
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
Again, I know I must sound very stupid.
Here's what I have so far:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
</script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
</body>
My jQuery code is as follows:
$(document).ready(function() {
$('#green').fadeOut(1000);
});
Can someone please tell me how to link the jQuery file to the HTML file? I know this question has been asked 500 times, but for some reason I am unable to make this work. Thank you very much! Sorry for making you cringe with my ineptness.
First of all its is mandatory to include jQuery library.
There are few ways you can link your jQuery code in html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
<!-- Mandatory to include -->
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
This is how you can integrate your codes:
Method 1 (In Footer)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
<!-- Mandatory to include -->
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
<script>
$(document).ready(function() {
$('#green').fadeOut(1000);
});
</script>
</body>
</html>
Method 2 (In Header)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
<!-- Mandatory to include -->
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
$('#green').fadeOut(1000);
});
</script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
Method 3 (From External File) Lets say you have a file custom.js that has you codes :
$(document).ready(function() {
$('#green').fadeOut(1000);
});
This is how you can add external js file
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
<!-- Mandatory to include -->
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="PATH_OF_JS_FILE/custom.js"></script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
Update: Path Example
- Project Directory
--- CSS
--- CSS/style.css
--- JS
--- JS/custom.js
--- index.php | index.html
url: http://www.yourproject.com
js path: http://www.yourproject.com/JS/custom.js
Just add your initial jquery load to the header beneath the stylesheets. You want to load any css before you load your jquery scripts (in the future).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
#green {width: 150px; height: 150px; background: green; }
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
$('#green').fadeOut(1000);
});
});//]]>
</script>
</head>
<body>
<div id="green"></div>
</body>
Do note that you load jquery before you use any part of the script calls ($).
Hope that helps!
Here's your fiddle:
http://jsfiddle.net/2633c1em/
Put your script tag in header section like
<head>
<script type="text/javascript" src="your jquery file name "></script>
</head>
file name like load.js
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"/>