I was curious how I can add this type of textarea to my CSHTML page (MVC .NetCore)
You can use Summernote.
I am currently using one in my project
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.js"></script>
</head>
<body>
<textarea asp-for="Description" id="summernote"></textarea>
<script>
$('#summernote').summernote({
placeholder: 'Description goes here....',
height:'25vh',
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture']],
['view', ['fullscreen', 'codeview', 'help']]
]
});
</script>
</body>
</html>
Related
I'm trying to make an element draggable using JQuery
I tried this but it didn't work because the scripts are not working and it looks like there isn't a link. Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script>
$( function() {
$( "#drag" ).draggable();
});
</script>
<style>
#drag {
width: 100px;
height: 100px;
cursor: all-scroll;
background-color: aqua;
}
</style>
</head>
<body>
<div id="drag"></div>
</body>
</html>
it looks like you did not have the files js/jquery-1.3.2.min.js and js/jquery-ui-1.7.1.custom.min.js present in your file system. I have replaced the files with CDN.
Find CDN here:
https://cdnjs.com/libraries/jquery
https://cdnjs.com/libraries/jqueryui
It doesn't necessarily need to be written after page load. But it can increase initial load time in some cases!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script></script>
<script>
$( function() {
$( "#drag" ).draggable();
});
</script>
<style>
#drag {
width: 100px;
height: 100px;
cursor: all-scroll;
background-color: aqua;
}
</style>
</head>
<body>
<div id="drag"></div>
</body>
</html>
The order in your code plays an important role in things .. You need to load your scripts AFTER the DOM loads .. Also -- Religiously view your DevTools F12 -- The console gives vital information about DOM elements not being found, loaded etc etc ..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#drag {
width: 100px;
height: 100px;
cursor: all-scroll;
background-color: aqua;
}
</style>
</head>
<body>
<div id="drag"></div>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
crossorigin="anonymous"></script>
<script>
$( function() {
$( "#drag" ).draggable();
});
</script>
</body>
</html>
I can't seem to get syntax highlighting to work with highlight.js. Here's a test example:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<title>Test Highlight</title>
</head>
<body>
<pre>
<code class="language-python">
def f(x, y):
return x + y
</code>
</pre>
</body>
</html>
I included the CSS and JS CDNs and called hljs.initHighlightingOnLoad(), yet code still shows up entirely in black text:
What am I doing wrong?
you have a typo in your link and script tag URL.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<title>Test Highlight</title>
</head>
<body>
<pre>
<code class="language-python">
def f(x, y):
return x + y
</code>
</pre>
</body>
</html>
This code doesn't work when I pass ngRoute as a dependency. Can anyone tell me what the problem is?
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Angular Material style sheet -->
<link href="vendor/angular/angular-material.min.cs" rel="stylesheet" media="all">
<!-- Angular Material requires Angular.js Libraries -->
<script src='vendor/angular/angular.min.js'></script>
<script src='vendor/angular/angular-route.min.js'></script>
<script src='vendor/angular/angular-aria.min.js'></script>
<script src='vendor/angular/angular-messages.min.js'></script>
<script src='vendor/angular/angular-animate.min.js'></script>
<!-- Angular Material Library -->
<script src='vendor/angular/angular-material.min.js'></script>
</head>
<body>
<h3>HELLO!!! {{2+2}}</h3>
<data-ng-view></data-ng-view>
<script>
var app = angular.module('myApp', ['ngRoute']);
</script>
</body>
</html>
I've build an webcomponent with Polymer, and it works on all browsers except for IE11.
I've tried everything but can't figure out why it doesn't work.
Attached is the code, could you help me figure out why?
It remains at the loading.
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial scale=1, user-scalable=yes">
<title>wc test</title>
<link rel="manifest" href="/manifest.json">
<script src="/node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script>if(!window.customElements){document.write("<!--")}</script>
<script type="text/javascript" src="/node_modules/#webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<!-- do not remove -->
<script src="/node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="/src/klantenvertellen-app/klantenvertellen-app.js"></script>
</head>
<body>
<klantenvertellen-app>Loading...</klantenvertellen-app>
</body>
</html>
I'm working on a boilerplate with 3 fallbacks: jQuery, Bootstrap.js and Bootstrap.css. The first 2 are working fine, but I can't make the css fallback work properly (I'm using this reference: Should I use Bootstrap from CDN or make a copy on my server?)
Here's the markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<meta name="description" content="" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/{{BOOTSTRAP_VERSION}}/css/bootstrap.min.css" rel="stylesheet" integrity="{{BOOTSTRAP_SRI_HASH}}" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.min.css" />
</head>
<body>
<h1>Hello World!</h1>
</body>
<script src="https://code.jquery.com/jquery-{{JQUERY_VERSION}}.min.js" integrity="{{JQUERY_SRI_HASH}}" crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery/dist/jquery/jquery.min.js"><\/script>')
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/{{BOOTSTRAP_VERSION}}/js/bootstrap.min.js" integrity="{{BOOTSTRAP_SRI_HASH}}" crossorigin="anonymous"></script>
<div class="hidden" id="bootstrapCssTest"></div>
<script>
if (typeof($.fn.modal) === 'undefined') {
document.write('<script src="/js/vendor/bootstrap/dist/js/bootstrap.min.js"><\/script>');
}
</script>
<script>
$(function() {
if ($('#bootstrapCssTest').is('visible')) {
$('head').prepend('<link rel="stylesheet" href="/js/vendor/bootstrap/dist/css/bootstrap.min.css">');
}
});
</script>
<script src="js/bundle.min.js"></script>
</html>
You mistyped the selector. You need :visible, not visible
$(function() {
if ($('#bootstrapCssTest').is(':visible')) {
$('head').prepend('<link rel="stylesheet" href="/js/vendor/bootstrap/dist/css/bootstrap.min.css">');
}
})