I recently bought the $99 MDB package that includes the premium multiselect menu but after installing the files I still get the default. This is what it looks like when I run my code, but it should look like this https://mdbootstrap.com/docs/jquery/forms/multiselect/#basic-example. Does anyone know how to fix this from happening.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="css/mdb.min.css">
<!-- Your custom styles (optional) -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<select class="mdb-select md-form" multiple>
<option value="" disabled selected>Choose your country</option>
<option value="1">USA</option>
<option value="2">Germany</option>
<option value="3">France</option>
<option value="3">Poland</option>
<option value="3">Japan</option>
</select>
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Your custom scripts (optional) -->
<script type="text/javascript">
$(document).ready(function() {
$('.mdb-select').materialSelect();
});
</script>
</body>
</html>
In your script tag add following:
$(document).ready(function() {
$('.mdb-select').materialSelect();
});
This component needs initialization via javascript.
Cheers
Related
I'm Vuejs beginners. How can I have multiple template in one application?
Example, for SignIn page, i would like to use Flatkit template, and for Admin dashboard, i would like to use other template (Dashboard). How do i combine those template in one app? In my index.html file, I already insert element for Flatkit, but when I insert Dashboard element, the CSS not working. What is the way to combine those link and script element
Here the project flow
index.html
<!DOCTYPE html>
<html lang="">
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<!-- LOGIN TEMPLATE -->
<!-- for ios 7 style, multi-resolution icon of 152x152 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-barstyle" content="black-translucent">
<link rel="apple-touch-icon" href="./Flatkit/assets/images/logo.png">
<meta name="apple-mobile-web-app-title" content="Flatkit">
<!-- for Chrome on Android, multi-resolution icon of 196x196 -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" sizes="196x196" href="./Flatkit/assets/images/logo.png">
<!-- style -->
<link rel="stylesheet" href="./Flatkit/assets/animate.css/animate.min.css" type="text/css" />
<link rel="stylesheet" href="./Flatkit/assets/glyphicons/glyphicons.css" type="text/css" />
<link rel="stylesheet" href="./Flatkit/assets/font-awesome/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="./Flatkit/assets/material-design-icons/material-design-icons.css" type="text/css" />
<link rel="stylesheet" href="./Flatkit/assets/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
<!-- build:css ../assets/styles/app.min.css -->
<link rel="stylesheet" href="./Flatkit/assets/styles/app.css" type="text/css" />
<!-- endbuild -->
<link rel="stylesheet" href="./Flatkit/assets/styles/font.css" type="text/css" />
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- build:js scripts/app.html.js -->
<!-- jQuery -->
<script src="./Flatkit/libs/jquery/jquery/dist/jquery.js"></script>
<!-- Bootstrap -->
<script src="./Flatkit/libs/jquery/tether/dist/js/tether.min.js"></script>
<script src="./Flatkit/libs/jquery/bootstrap/dist/js/bootstrap.js"></script>
<!-- core -->
<script src="./Flatkit/libs/jquery/underscore/underscore-min.js"></script>
<script src="./Flatkit/libs/jquery/jQuery-Storage-API/jquery.storageapi.min.js"></script>
<script src="./Flatkit/libs/jquery/PACE/pace.min.js"></script>
<script src="./Flatkit/scripts/config.lazyload.js"></script>
<script src="./Flatkit/scripts/palette.js"></script>
<script src="./Flatkit/scripts/ui-load.js"></script>
<script src="./Flatkits/cripts/ui-jp.js"></script>
<script src="./Flatkit/scripts/ui-include.js"></script>
<script src="./Flatkit/scripts/ui-device.js"></script>
<script src="./Flatkit/scripts/ui-form.js"></script>
<script src="./Flatkit/scripts/ui-nav.js"></script>
<script src="./Flatkit/scripts/ui-screenfull.js"></script>
<script src="./Flatkit/scripts/ui-scroll-to.js"></script>
<script src="./Flatkit/scripts/ui-toggle-class.js"></script>
<script src="./Flatkitscripts/app.js"></script>
<!-- ajax -->
<script src="./Flatkit/libs/jquery/jquery-pjax/jquery.pjax.js"></script>
<script src="./Flatkit/scripts/ajax.js"></script>
<!-- endbuild -->
</body>
</html>
you can use 2 different main html page if your main scripts are entirely different. You can configure it in backend.
Another idea is adding only common scripts and styles in html file. And use your scoped styles in components. Add style of each component in "style" tag below "script" tag. make the style scoped using :
VUE COMPONENT:
<template>
</template>
<script>
<script>
<style scoped>
/* your style */
</style>
Scope of this style would only be applicable to current component.
The script consists of 3 "blocks" as I call it. Block 1 is the Menu part. Block 2, the slider and Block 3 the photos. I have tried to put these blocks in a different sequence. In all cases, the Menu block works ok.
If I put the slider block above the photos, the slider is not working anymore. If I put the photos above the slider, then the photos are not working anymore.
Here is the script I have. It is generated by 3 software programs generating the menu, slider, and photo blocks and I have put this in the head section of the webpage. How can I solve this?
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css;">
<!-----menu block---->
<!-- Start css3menu.com HEAD section -->
<link rel="stylesheet" href="CSS3 Menu.css3prj_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
<!-- End css3menu.com HEAD section -->
<!-----slider block---->
<!-- Insert to your webpage before the </head> -->
<script src="sliderengine/jquery.js"></script>
<script src="sliderengine/amazingslider.js"></script>
<link rel="stylesheet" type="text/css" href="sliderengine/amazingslider-1.css">
<script src="sliderengine/initslider-1.js"></script>
<!-- End of head section HTML codes -->
<!-- Insert to your webpage before the </head> -->
<link rel="stylesheet" type="text/css" href="sliderengine/amazingslider-2.css">
<script src="sliderengine/initslider-2.js"></script>
<!-- End of head section HTML codes -->
<!-- Insert to your webpage before the </head> -->
<link rel="stylesheet" type="text/css" href="sliderengine/amazingslider-3.css">
<script src="sliderengine/initslider-3.js"></script>
<!-- End of head section HTML codes -->
<!-- Insert to your webpage before the </head> -->
<script src="sliderengine2/jquery.js"></script>
<script src="sliderengine2/amazingslider.js"></script>
<link rel="stylesheet" type="text/css" href="sliderengine2/amazingslider-1.css">
<script src="sliderengine2/initslider-1.js"></script>
<!-- End of head section HTML codes -->
<!-----pphoto block---->
<!-- algemeen-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="algemeen01, VisualLightBox, LightBox, Photo Gallery, jQuery Lightbox, Javascript Gallery" />
<meta name="description" content="algemeen01 created with VisualLightBox, a free wizard program that helps you easily generate beautiful Lightbox-style web photo galleries" />
<link rel="shortcut icon" href="favicon.ico" />
<!-- Start VisualLightBox.com HEAD section -->
<link rel="stylesheet" href="index_algemeen_files/vlb_files3/vlightbox3.css" type="text/css" />
<link rel="stylesheet" href="index_algemeen_files/vlb_files3/visuallightbox.css" type="text/css" media="screen" />
<script src="index_algemeen_files/vlb_engine/jquery.min.js" type="text/javascript"></script>
<script src="index_algemeen_files/vlb_engine/visuallightbox.js" type="text/javascript"></script>
<!-- End VisualLightBox.com HEAD section -->
<!-- kerst03-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="kerst03, VisualLightBox, LightBox, Photo Gallery, lightbox flash gallery, lightbox js web gallery generator" />
<meta name="description" content="kerst03 created with VisualLightBox, a free wizard program that helps you easily generate beautiful Lightbox-style web photo galleries" />
<!-- Start VisualLightBox.com HEAD section -->
<link rel="stylesheet" href="index_kerst_files/vlb_files1/vlightbox1.css" type="text/css" />
<link rel="stylesheet" href="index_kerst_files/vlb_files1/visuallightbox.css" type="text/css" media="screen" />
<script src="index_kerst_files/vlb_engine/jquery.min.js" type="text/javascript"></script>
<script src="index_kerst_files/vlb_engine/visuallightbox.js" type="text/javascript"></script>
<!-- End VisualLightBox.com HEAD section -->
<!-- Start VisualLightBox.com HEAD section -->
<link rel="stylesheet" href="index_herfst_files/vlb_files2/vlightbox2.css" type="text/css" />
<link rel="stylesheet" href="index_herfst_files/vlb_files2/visuallightbox.css" type="text/css" media="screen" />
<script src="index_herfst_files/vlb_engine/jquery.min.js" type="text/javascript"></script>
<script src="index_herfst_files/vlb_engine/visuallightbox.js" type="text/javascript"></script>
<!-- End VisualLightBox.com HEAD section -->
<!-- Start VisualLightBox.com HEAD section -->
<link rel="stylesheet" href="index_VP2017_files/vlb_files4/vlightbox4.css" type="text/css" />
<link rel="stylesheet" href="index_VP2017_files/vlb_files4/visuallightbox.css" type="text/css" media="screen" />
<script src="index_VP2017_files/vlb_engine/jquery.min.js" type="text/javascript"></script>
<script src="index_VP2017_files/vlb_engine/visuallightbox.js" type="text/javascript"></script>
<!-- End VisualLightBox.com HEAD section -->
<meta http-equiv="Page-Enter" content="RevealTrans( Duration=4,Transition=12 )">
<link rel="stylesheet" href="index3000_g.css" type="text/css" media="screen,projection,print"> <!--// Document Style //-->
<link rel="stylesheet" href="index_p.css" type="text/css" media="screen,projection,print"> <!--// Page Style //-->
<script src="index3000_g.js" type="text/javascript"></script> <!--// Document Script //-->
</head>
I am trying to understand how to include multiple css, javascript and CDN in my wordpress plugin to create a dashboard.
I have a file called index.html that creates the dashboard of my plugin. If I run the file in the browser all the css, CDN and javascript are loaded.
Now I would like to use this index.html as the UI for a plugin in wordpress.
I have managed to include the html file in the main PHP file of my plugin(myplugin.php).
Now I would like to load all the css, CDN and javascript that would normally be located in the <head> of my index.html as in the following example. How can I do it?
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="../assets/img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> Dashboard</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
<!-- CSS Files -->
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="../assets/css/light-bootstrap-dashboard.css?v=2.0.1" rel="stylesheet" />
<!-- Chart.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<!-- Core JS Files -->
<script src="../assets/js/core/jquery.3.2.1.min.js" type="text/javascript"></script>
<script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<!-- Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="../assets/js/plugins/bootstrap-switch.js"></script>
<!-- Google Maps Plugin -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Chartist Plugin -->
<script src="../assets/js/plugins/chartist.min.js"></script>
<!-- Notifications Plugin -->
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Light Bootstrap Dashboard: scripts for the example pages etc -->
<script src="../assets/js/light-bootstrap-dashboard.js?v=2.0.1" type="text/javascript"></script>
<script src="../assets/js/demo.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Javascript method's body can be found in assets/js/demos.js
demo.initDashboardPageCharts();
demo.showNotification();
});
</script>
</head>
Add this to your main plugin file:
function add_my_plugin_script() {
$plugin_url = plugin_dir_url( __FILE__ );
// css
wp_enqueue_style( 'plugin-style-1', $plugin_url. '/css/plugin-style-1.css' );
// js
wp_enqueue_script( 'plugin-script-1', $plugin_url. '/js/plugin-style-1.js' );
}
add_action('admin_enqueue_scripts', 'add_my_plugin_script');
I am trying to use js in angular 4 and I copy/past all the required js files in assets folder but min.js files goes under js files, I don't know why? so my scripts failed to load and progress bar not working, there is no error on browser console, can anyone tell what to do?
Here is index.html code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RevDashboard</title>
<base href="/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Reviews AI! | </title>
<!-- Bootstrap -->
<link href="assets/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="assets/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="assets/vendors/nprogress/nprogress.css" rel="stylesheet">
<!-- iCheck -->
<link href="assets/vendors/iCheck/skins/flat/green.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="assets/build/css/custom.min.css" rel="stylesheet">
</head>
<body class="nav-md">
<app-root></app-root>
<!-- jQuery -->
<script src="assets/vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="assets/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="assets/vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="assets/vendors/nprogress/nprogress.js"></script>
<!-- bootstrap-progressbar -->
<script src="assets/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<!-- Custom Theme Scripts -->
<script src="assets/build/js/custom.min.js"></script>
</body>
</html>
Here is the code where I use progress bar
<td class="project_progress">
<div class="progress progress_sm">
<div class="progress-bar bg-green" role="progressbar" data-transitiongoal="57"></div>
</div>
<small>57% Complete</small>
There is the images of file:
Here is the page Image
Because Vaadin provides Custom Layouts I thought about using a Bootstrap Theme like Unify for layouting and styling the application with HTML + CSS. The CustomLayout should "connect" my HTML templates with Vaadin.
I have a working HTML template (with JS & CSS file includes) that just work local in the browser. Is it possible to use Vaadin this way?
My CustomLayout would look like this:
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Web Fonts -->
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin'>
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- CSS Header and Footer -->
<link rel="stylesheet" href="assets/css/headers/header-default.css">
<link rel="stylesheet" href="assets/css/footers/footer-v1.css">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<!-- CSS Theme -->
<link rel="stylesheet" href="assets/css/theme-colors/default.css" id="style_color">
<link rel="stylesheet" href="assets/css/theme-skins/dark.css">
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
</head>
<body>
...
<!-- JS Global Compulsory -->
<script type="text/javascript" src="assets/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- JS Implementing Plugins -->
<script type="text/javascript" src="assets/plugins/back-to-top.js"></script>
<script type="text/javascript" src="assets/plugins/smoothScroll.js"></script>
<!-- JS Customization -->
<script type="text/javascript" src="assets/js/custom.js"></script>
<!-- JS Page Level -->
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
App.init();
});
</script>
</body>