I would like to add this material to my project in Springboot +thymeleaf
https://getmdl.io
I've been copied material.min.css to resources/static/css and material.min.js to /resources/static scripts.
In administration.html a added :
<link rel="stylesheet" th:href="#{css/material.min.css}"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" />
<script src="scripts/material.min.js" th:src="#{scripts/material.min.js}" type="text/javascript"/>
But when I use input type par example, the UI is not animated. How can I do it works. Or there is anoter good materials to used with thymeleaf ?
I am also facing same issue after add WebJar version of material design lite Maven
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>material-design-lite</artifactId>
<version>1.3.0</version>
</dependency>
(at the time 1.3.0 is latest version)
<script src="webjars/material-design-lite/1.3.0/material.min.js"></script>
instead of
<script src="scripts/material.min.js" th:src="#{scripts/material.min.js}" type="text/javascript"/>
Note:
In <body> tag all page contents(Cards,Labels,Navigation Bar) with in container <div> tag
<div class="container">
//All page contents kept here
</div>
Related
I watched the video tutorial Laravel 9 and Vue 3 SPA online store 11. Transferring the html store template to App vue. In it, the server part is made on Laravel, and the client part on Vue.
I downloaded the layout of the client part of the online store - HTML template of the client part of the online store from Course Laravel 9 and Vue 3 SPA online store 0. Overview of the html store template and task priorities in the description under the video.
Copied the contents of the file C:\OpenServer\domains\karteecommerce\karte-fashion-multipurpose-ecommerce-html-template\index. html to the C:\Openserver\domains\clientpart\public\index.html file of the vue clientpart project (as in the video). Copied the folder (with styles, fonts and pictures) C:\OpenServer\domains\karteecommerce\karte-fashion-multipurpose-ecommerce-html-template\assets instead of C:\Openserver\domains\clientpart\src\assets.
The assets folder in the karte-fashion-multipurpose-ecommerce-html-template directory has the following location relative to the karte-fashion-multipurpose-ecommerce-html-template\index.html file
The structure of the project, as can be seen from the screenshot below, is as follows
Changed all paths starting with assets to ../src/assets (in C:\Openserver\domains\clientpart\public\index.html) and got the following file
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required Meta -->
<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 For This Document -->
<title> Karte - Multipurpose E-Commerce Html Template</title>
<!-- Favicon For This Document -->
<link rel="shortcut icon" href="../src/assets/images/logo/favicon-32x32.png" type="image/x-icon">
<!-- Bootstrap 5 Css -->
<link rel="stylesheet" href="../src/assets/css/bootstrap.5.1.1.min.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#300;400;500;600;700&family=Roboto:wght#300;400;500;700&display=swap" rel="stylesheet">
<!-- FlatIcon Css -->
<link rel="stylesheet" href="../src/assets/fonts/flaticon.css">
<!-- Slick Slider Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/slick.css">
<!-- Ui Tabs Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/jquery-ui.min.css">
<!-- Magnific-popup Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/magnific-popup.css">
<!-- Nice Select Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/nice-select.v1.0.css">
<!-- Animate Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/animate.css">
<!-- Style Css -->
<link rel="stylesheet" href="../src/assets/css/style.css">
</head>
<body class="shoe">
<!-- ==========Preloader========== -->
<div class="loader"><span>Karte...</span></div>
<!-- ==========Preloader========== -->
<!--===scroll bottom to top===-->
<i class="flaticon-up-arrow"></i>
<!--===scroll bottom to top===-->
<div id="app"></div>
<!--==== Js Scripts Start ====-->
<!-- Jquery v3.6.0 Js -->
<script src="../src/assets/js/jquery.v3.6.0.min.js"></script>
<!-- Popper v2.9.3 Js -->
<script src="../src/assets/js/popper.v2.9.3.min.js"></script>
<!-- Bootstrap v5.1.1 js -->
<script src="../src/assets/js/bootstrap.v5.1.1.min.js"></script>
<!-- jquery ui js -->
<script src="../src/assets/js/plugin/jquery-ui.min.js"></script>
<!-- Parallax js -->
<script src="../src/assets/js/plugin/jarallax.min.js"></script>
<!-- Isotope js -->
<script src="../src/assets/js/plugin/isotope.js"></script>
<!-- Slick Slider Js -->
<script src="../src/assets/js/plugin/slick.min.js"></script>
<!-- magnific-popup v2.3.4 Js -->
<script src="../src/assets/js/plugin/jquery.magnific-popup.min.js"></script>
<!-- Tweenmax v2.3.4 Js -->
<script src="../src/assets/js/plugin/tweenMax.min.js"></script>
<!-- Nice Select Js -->
<script src="../src/assets/js/plugin/nice-select.v1.0.min.js"></script>
<!-- Wow js -->
<script src="../src/assets/js/plugin/wow.v1.3.0.min.js"></script>
<!-- Wow js -->
<script src="../src/assets/js/plugin/jquery.countdown.min.js"></script>
<!-- Main js -->
<script src="../src/assets/js/main.js"></script>
<!--==== Js Scripts End ====-->
<script type="module" src="../src/main.js"></script>
</body>
</html>
The page looks like this
And it should look like
The App.vue file contains the content and all images starting with ../src/assets/images are rendered normally, and the styles included in public/index.html with `../src/assets/ css' didn't work.
Tell me how to achieve the inclusion of css files and thus the correct display of the page.
P.S. In the video tutorial, the index.html file is located at C:\Openserver\domains\clientpart\index.html instead of C:\Openserver\domains\clientpart\public\index.html. I'm not sure if it affected, but I wrote it just in case.
P.S. Here are screenshots of the developer tools (in which you can see the connection of css files in the lower right corner) - as it should be and as it is
P. S. Add errors
Suggest solution for Vue, on Stackoverflow link given solution for Node.js.
I am trying to componentize some of my html pages to make them ractive components and load them using ractive-load. I don't use any build system or "tools" (i.e. grunt, browserify, require, etc)
I am getting the error:
You can only have one <script> tag per component file
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Title</title>
<!-- Javascript -->
<script src="static/jquery-2.1.4/jquery-2.1.4.min.js"></script>
<script src='static/ractive-0.7.3/ractive.js'></script>
<script src='static/ractiveload/ractive-load.js' ></script> -->
<script src='static/app.js' ></script>
</head>
<body>
<header>
<a href='/'>My Title</a>
</header>
<!-- This is a dynamic div that is loaded on-demand by ractive. -->
<div class='wrapper' id='mainPanel'>
</div>
</body>
</html>
app.js:
$(document).ready(function(){
Ractive.load('views/control.html').then( function(Control){
var ractive = new Control({
el: "#mainPanel",
});
}).
views/control.html:
<script type='text/javascript' src="static/some/lib.js"></script>
<script type='text/javascript' src="static/some/otherlib.js"></script>
<div>This is a test</div>
How do I load additional JavaScript libraries into a Ractive component?
When using single-file components, you use the special require function. Note that this function is not, in any way, tied to any tool's implementation. It may, however, be an abstraction of the underlying tool's implementation.
But the component spec mentions that require's behavior is dependent on the loader being used. In the case of ractive-load, its dependency management is not very sophisticated. Its behavior is to find the dependency in Ractive.load.modules or the global window if it's not found in the previous. This can only mean that your dependencies must exist in either of the two places before your app loads. In the case of loading from window, adding your dependency as a regular <script> tag should work.
If you're looking for a more advanced form of dependency management for component files without the need for cli tooling, you can take a look at rvc which runs on top of RequireJS.
I have a little problem with Angular2 and a CSS-Stylesheet.
I included boostrap in the index.html file of the Angular2-App.
It is no problem in the whole application...
Then I included another library (Bootstrap-switch) in the same way:
<!-- Load external Libraries / Modules -->
<!-- Bootstrap & JQuery -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Bootstrap Toggle Switch -->
<link rel="stylesheet" href="css/bootstrap-toggle.min.css">
<script src="js/bootstrap-toggle.min.js"></script>
<!-- eigener Stylesheet -->
<link rel="stylesheet" href="css/custom.css">
But now I have a little problem:
While the "normal" Bootstrap is functional over the entire application, the Bootstrap Toggle I can only use at the index.html.
If I use it there, no problem, but if I use it at any other page, the styles won´t apply...
Here is how I use the toggle-switch:
<div class="checkbox">
<label><input type="checkbox" data-toggle="toggle" value="">Passwort
speichern (Auto-Login)</label>
</div>
Can someone can help me? Thanks!
<h1 class="h1name" style="" ><bold><%= #user %></bold><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></h1>
I don't know why I'm getting a fat glyphicon-pencil instead of the correct one as seen in the Bootstrap Components website. http://getbootstrap.com/components/#glyphicons-how-to-use
gem 'twitter-bootstrap-rails'
Is the bootstrap version I'm using on my ruby on rails project
I am using roboto for fonts
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
Another Sample with the envelope glyphicon
without the roboto font it looks like this (still very different from the desired one)
I faced the same problem, I tried by replacing the local file with cdn path. And it works.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional: Include the jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
I'm a newbie when it comes to using Bootstrap plugins (just learned about it via codecademy)... I really would like to use this awesome bootstrap markdown plugin but fail to properly install it so I can call the getContent and parseContent from the textarea.
If you could help me I would really appreciate it it - a lot!
I have done this so far (mocking up the example from codecademy)
What I want:
What I did so far
Downloaded the following libs (jquery, bootstrap, bootstrap-markdown, to-bootstrap, markdown) via bower and copied the these files into the js/vendor folder
jquery.js (v2.1.1)
bootstrap.js (v3.1.1)
bootstrap-markdown.js (v2.5.0)
he.js (v0.4.1)
to-markdown.js (no version number)
markdown.js (no version number)
index.html
<!doctype html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-markdown.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet">
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/bootstrap-markdown.js"></script>
<script src="js/vendor/he.js"></script>
<script src="js/vendor/to-markdown.js"></script>
</head>
<body>
<div class="container">
<form>
<textarea name="content" data-provide="markdown-editable" rows="2" class="status-box md-input"_>### Hello World
*This* **is** the ***ultimate test***.
</textarea>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class='rows'>
<ul class="posts list-inline">
</ul>
</ul>
</div>
<script src="js/vendor/showdown.js"></script>
<script type='text/javascript' src="js/app.js"></script>
</body>
</html>
I actually think that this install the plugin correctly (my initial thought was that I didn't install the plugin correct which was why I couldn't make it work).
But how do I get the content from the textarea via the bootstrap-markdown API's .getContent() and .parseContent() instead of having to use the .getVal() and convert the string to html via showdown?
So far I can get it this way
app.js
$(".status-box").markdown({
savable:true,
onSave: function(e) {
$('<li class="col-xs-6 pull-left raw-markdown">').append( e.getContent() ).prependTo('.posts');
$('<li class="col-xs-6 pull-right end-markdown">').append( e.parseContent() ).prependTo('.posts');
}
});
Which is good. But I want to be able to access via the Post button instead.
I tried without luck:
var post;
$(".status-box").markdown( post = e.getContent() );
e represent the markdown edit only inside the onSave function.
So you have to get the markdown instance, I checked the plugin and it's possible (hacky but possible :-)
If you want to access it inside your post click function you have to access it in this way:
get the markdown element
get the markdown instance via data('markdown')
use the parseContent function
Code:
$(".btn-post").click(function (e) {
post = $('.status-box').data('markdown').parseContent();
console.log(post)
});
Demo: http://jsfiddle.net/IrvinDominin/fdpM4/
Have you download bootstrap - markdown.js file into your work environment. Check The link of bootstrap - markdown.js file. The lib of markdown.js may be missing in your code.
UPDATE
HI #Norfeldt,
For This you have to follow Below Instructions.
1. Check Compatibility versions between bootstrap.min.css and bootstrap.min.js.(i.e you must maintain same versions for both the things.) Because http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css Link contains Bootstrap version 3.0 css and http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js Link contains Bootstrap 2.3.2 version JS.
2.Maintain Correct root Directory path.
<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>
<script src="js/bootstrap-markdown.js"></script>
must be
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/to-markdown.js"></script>
<script src="js/vendor/bootstrap-markdown.js"></script>
3. Which version of bootstrap-markdown.js lib you are using.
Check this one
Version Compatibility with Bootstrap
Bootstrap Markdown v2.x only compatible with Bootstrap 3.x
Bootstrap Markdown v1.x only compatible with Bootstrap 2.x
Note: Download bootstrap files from Here add add to your html file.
Change path of these js file
<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>
To
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/to-markdown.js"></script>
Hope this will help you...