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
Related
I am currently learning to use thymeleaf and javascript. I want to create a header, and when click on the user's avatar a dropdown menu will show.
The problem I am countering is when I add <script> tag to my header fragment, when I click on the button, the console give me ReferenceError, function not found.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
<meta charset="UTF-8">
</head>
<body>
<header th:fragment="header" class="global-header">
<!-- Logged in show the user's avatar-->
<div class="profile bulge-icon" sec:authorize="isAuthenticated()">
<button class="profile-btn" id="profile-btn" th:onclick="dropdown()">
<img class="img" alt="user profile picture" th:src="#{images/profile-placeholder.png}"/>
</button>
<div id = "dropdown-menu">
<form th:action="#{/logout}" method="post">
<button type = "submit" class="sign out bulge-icon" aria-label="sign out">Sign Out</button>
</form>
</div>
</div>
</header>
<script type="text/javascript" th:src="#{/js/jquery/header.js}"></script>
</body>
</html>
To make this js work, I need to add .js file to my page that uses the header fragment. For example, my test.html.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-iKbFRxucmOHIcpWdX9NTZ5WETOPm0Goy0WmfyNcl52qSYtc2Buk0NCe6jU1sWWNB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/header.css}"/>
</head>
<body>
<header th:replace="global/header :: header"></header>
<script type="text/javascript" th:src="#{/js/jquery/header.js}"></script>
</body>
</html>
Is there a method to let .js works when <script> tag is put in my header.html. So in this way, I don't need to add header.js to every page that use the header fragment.
When you use th:replace, Thymeleaf will literally take the contents of that <header> element and place it in your main page. That JavaScript line in your header fragment will never be used.
The way I usually handle this is using Thymeleaf Layout Dialect so that all needed script tags are included on every page. See https://ultraq.github.io/thymeleaf-layout-dialect/ for info on how to use it.
For example, create a layout.html file like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-iKbFRxucmOHIcpWdX9NTZ5WETOPm0Goy0WmfyNcl52qSYtc2Buk0NCe6jU1sWWNB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/header.css}"/>
<div layout:fragment="page-content">
</div>
<script type="text/javascript" th:src="#{/js/jquery/header.js}"></script>
</head>
</html>
Now update test.html to use it:
<!DOCTYPE html>
<html
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout}">
<head>
<title>Test</title>
</head>
<body>
<div layout:fragment="page-content">
<header th:replace="global/header :: header"></header>
<!-- Add more content for the test page here -->
</div>
</body>
</html>
If the header should be on all pages, you can also move it into layout.html.
I am looking at working with Foundation controls in ASP.Net Core. The controls which use JavaScript don't work - they don't produce errors but they don't do things like move or drop down. The other controls work fine.
Here is the source of one of them. I have added all the JavaScript libraries though some may be referenced by others. The control is displayed but does not move.
I don't know what is missing unless the code needs to be wrapped in other tags.
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/Content/foundation.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
</head>
<body>
<div class="slider" data-slider data-initial-start="50" data-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
<input type="hidden">
</div>
<script src="/Scripts/jquery-3.4.1.js"></script>
<script src="/Scripts/foundation.js"></script>
<script src="/Scripts/plugins/foundation.core.js"></script>
<script src="/Scripts/plugins/foundation.slider.js"></script>
<script src="/Scripts/plugins/foundation.util.motion.js"></script>
<script src="/Scripts/plugins/foundation.util.triggers.js"></script>
<script src="/Scripts/plugins/foundation.util.keyboard.js"></script>
<script src="/Scripts/plugins/foundation.util.touch.js"></script>
<script src="/Scripts/plugins/foundation.accordionMenu.js"></script>
<script src="/Scripts/plugins/foundation.util.nest.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
fixed. The issue was that I should have just linked to foundation.js. However, the "no-js" is not needed but you have to add the "$(document).foundation();" into your source file just before the tag as I have above.
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 new to jquery, and I've had a lot of trouble getting a full screen slideshow to work. I've tried downloading jquery 1.11.1. I've linked to 1.8, 1.9, and 1.11.1. The first image shows up with the numbers "123" on it, but it's not dynamic. The other two images aren't showing up.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv = "Content-Type" content = "text/html; charset=iso-8859-1">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/superslides.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<style></style>
</head>
<body>
<div id="slides">//Slides container to control width
<div class="slides-container">//suggested form by superslides.com
<img src="images/dsc_0844-8x12.jpg" alt="">
<img src="images/dsc_0785-8x12.jpg" alt="">
<img src="images/dsc_0720-8x12.jpg" alt="">
</div>
</div>
<!-- include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
//Additional superslides plug-ins
<script src="scripts/jquery.easing.1.3.js"></script>
<script src="scripts/jquery.animate-enhanced.min.js"></script>
<script src="scripts/application.js"></script>
<script src="scripts/jquery.superslides.js" type="text/javascript" charset="utf-8"></script>
//Initialize slideshow
<script type="text/javascript">
$(function() {
$('#slides').superslides({
animation: 'fade'
});
});
</script>
</body>
</html>
Your use of non-HTML comments is probably not helping, since you're essentially polluting the DOM with text nodes, and the slideshow script may not be resilient to that.
Comments in HTML look like this:
<!-- Initialise slideshow -->
not this:
// This is a JavaScript comment
The Bootstrap datepicker from Eyecom doesn't seems to work. I'm following various questions from here, for example:
Bootstrap Datepicker seems to not work
How do I implement and use eyecon's bootstrap-datepicker?
But without avail. What am I doing wrong? I click the input box and it doesn't show me the datepicker.
Here's my code:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="../css/datepicker.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap-responsive.css">
</head>
<body>
<input type="text" id='datetimepicker1'>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datepicker();
});
</script>
</body>
</html>
It should work! Any help?
Please refer to http://jsbin.com/lerojivu/1/edit
The DIV includes INPUT and SAPN element is necesaary for datepicker to be initiated.