I'm integrating summernote-bs5 in my software. I include it from cdn:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.css" integrity="sha512-ngQ4IGzHQ3s/Hh8kMyG4FC74wzitukRMIcTOoKT3EyzFZCILOPF0twiXOQn75eDINUfKBYmzYn2AA8DkAk8veQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.js" integrity="sha512-6F1RVfnxCprKJmfulcxxym1Dar5FsT/V2jiEUvABiaEiFWoQ8yHvqRM/Slf0qJKiwin6IDQucjXuolCfCKnaJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
I initialize summernote area using default. Html:
<div class="mt-2">
<label class="control-label" for="textarea">Descrizione breve:</label>
<textarea class="summernote" name="content_abstract"><?=$content->content_abstract?>.
</textarea>
</div>
js:
$('.summernote').summernote();
It doesn't work. I tried also with jsfiddle with bootstrap last version and it seems not work. jsfiddle
I just did this as a basic test and it worked for me. Are you adding everything in the correct order and are you waiting for the document to be loaded to initialise your summernote div?
$(document).ready(function() {
$('.summernote').summernote();
});
<!DOCTYPE html>
<html lang="en">
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
<div class="mt-2">
<label class="control-label" for="textarea">Descrizione breve:</label>
<textarea class="summernote" name="content_abstract"><?=$content->content_abstract?>.</textarea>
</div>
</html>
Related
the mdl class mdl-layout__content is blocking my tooltip from showing in my graph. I made a codepen that shows the problem. Are there style settings I can make to still use this class for my nav, but show my tooltip.
Link to CodePen that shows the issue
here's my HTML code
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>New UI 07052017</title>
<link href="css/layout.css" rel="stylesheet" type="text/css">
<!-- Material Design Lite
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css"> -->
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.orange-indigo.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> -->
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="css/angular-toggle-switch-bootstrap-3.css" type="text/css" media="screen">
<link href="css/bootstrap-material-design.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.resize.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> **** updated to 1.6.1 on 6/29/17-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<!-- <script src="https://www.gstatic.com/firebasejs/3.2.0/firebase.js"></script> -->
<script src="https://www.gstatic.com/firebasejs/3.6.6/firebase.js"></script>
<!-- <script src="https://cdn.firebase.com/libs/angularfire/2.0.1/angularfire.min.js"></script> -->
<script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>
<script src="js/angular-toggle-switch.min.js"></script>
<script src="js/angularScripts.js"></script>
<!-- JustGage tools for the dashboard -->
<script src="js/justgage.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="images/android-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Pellet Pirate">
<link rel="apple-touch-icon-precomposed" href="images/apple-icon-114x114.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/apple-icon-144x144.png">
<meta name="msapplication-TileColor" content="#3372DF">
<link rel="shortcut icon" href="images/pelletpirate-icon-32x32.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.cyan-light_blue.min.css">
<link rel="stylesheet" href="css/styles.css">
<!-- Import and configure the Firebase SDK -->
<!-- These scripts are made available when the app is served or deployed on Firebase Hosting -->
<!-- If you do not serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup -->
<script src="/__/firebase/4.0.0/firebase-app.js"></script>
<script src="/__/firebase/4.0.0/firebase-auth.js"></script>
<script src="/__/firebase/init.js"></script>
<style>
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
</style>
</head>
<body ng-app="PelletPirate">
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">smoker</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search">
<label class="mdl-textfield__label" for="search">Enter your query...</label>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
<i class="material-icons">more_vert</i>
</button>
</div>
</header>
<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
<header class="demo-drawer-header">
</header>
<nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">whatshot</i>Manage a Cook</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">inbox</i>Inbox</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">delete</i>Trash</a>
<div class="mdl-layout-spacer"></div>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">help_outline</i>
<span class="visuallyhidden">Help</span></a>
</nav>
</div>
<!-- *********************************************************************************************************************-->
<!-- need help here. I'm not sure what settings to make in CSS to enable the tooltip popup to show. If I comment out the -->
<!-- the mdl-layout__content class then the tooltips show but my graph now drifts left behind my left nav -->
<!-- *********************************************************************************************************************-->
<main class="mdl-layout__content mdl-color--grey-100">
<!-- <main class="mdl-color--grey-100"> -->
<div class="mdl-grid demo-content">
<div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col">
<div class="plot-container">
<div id="temp-placeholder" class="plot-placeholder"></div>
</div>
</div>
<div class="row" id="ControlsRow">
<div class="mdl-cell mdl-cell--12-col">
<div class="plot-container">
<div id="controls-placeholder" class="plot-placeholder"></div>
</div>
</div>
</div>
</div>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--middle-section">
<div class="mdl-logo">"It's a Pirate's life for me."</div>
<ul class="mdl-mini-footer--link-list">
<li>Help</li>
<li>Privacy & Terms</li>
</ul>
</div>
</footer>
</main>
</div>
</body>
<script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyD3_xJ0aYVK3VwjuuliOdb6t5wbbi87RB8",
authDomain: "pelletpirate.firebaseapp.com",
databaseURL: "https://pelletpirate.firebaseio.com",
projectId: "pelletpirate",
storageBucket: "pelletpirate.appspot.com",
messagingSenderId: "731610976061"
};
firebase.initializeApp(config);
var Ref = firebase.database().ref()
</script>
<script src="js/scripts.js"></script>
<script src="js/Cscripts.js"></script>
</html>
I figured it out: z-index to bring the tooltip to the forefront. In CSS:
#tooltip {
z-index: 1;
}
I have a strange problem with slider. It does not render correctly. See the picture:
as you can see, I don't have "slider" in my slider :). Just a up/down arrows.
This is my cod:
<head>
...
<!-- General Style -->
<link href='css/style.css' id='styles-css' media='all' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css">
<!-- Scripts -->
<script src='js/jquery-2.1.1.min.js'></script>
<script src='js/jquery-migrate-1.2.1.min.js'></script>
<script src='js/bootstrap.min.js' type='text/javascript'></script>
<script src='js/jquery.mobile-1.4.5.min.js'></script>
<script src="js/jquery-ui.min.js"></script>
...
</head>
and simple slider from jqm page
<label for="slider-1">Input slider:</label>
<input type="range" name="slider-1" id="slider-1" value="60" min="0" max="100">
What's wrong?
I am trying to share a ViewModel between pages.
Say I have pageA.html and pageB.html and a separate data.js file. pageA has fields bound (using Knockout) and after clicking a button it moves to pageB which also has some fields bound to the same ViewModel. I can't get this to work - what am I missing?
Of course I can keep all pages (data-role="page") inside a single .html file and it would work fine but is that the only way?
EDIT - pageB.html is a copy of pageA - I am trying to show the problem NOT having another login functionality in many pages!!!
This is the code:
pageA.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
<title>PageA</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="JS/data.js"></script>
</head>
<body>
<div data-role="page" id="login">
<div id="loginDetails">
<div data-role="fieldcontain">
<label for="username">
Username:</label>
<input type="text" name="name" id="username" data-bind="value: userid" />
</div>
<div data-role="fieldcontain">
<label for="pswd">
Password:</label>
<input type="text" name="name" id="pswd" data-bind="value: pswd" />
</div>
</div>
<a id="btnLogin" data-role="button" data-bind="click: login">Login</a>
</div>
<script type="text/javascript">
ko.applyBindings(S5.myViewModel);
</script>
</body>
</html>
pageB.html (largely the same as above but its javascript block doesn't seem to get called...)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
<title>pageB</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="JS/data.js"></script>
</head>
<body>
<div data-role="page" id="abcd">
<div id="loginDetails">
<input type="text" name="name" data-bind="value: userid" />
<input type="text" name="name" data-bind="value: pswd" />
</div>
</div>
<script type="text/javascript">
debugger; <-- THIS NEVER GETS CALLED!!
ko.applyBindings(S5.myViewModel);
</script>
</body>
</html>
data.js
var S5;
(function (S5) {
S5.myViewModel = {
userid: ko.observable('marcel'),
pswd: ko.observable('xxx'),
login: function () {
// ** DO LOGIN CHECK then move to pageB
$.mobile.changePage("pageB.html", { transition: "slideup" });
},
};
})(S5 || (S5 = {}));
jQuery Mobile uses Ajax Navigation to load and change views. When using multi-html page template, it loads first page (html file) entirely. However, for other views /pages fetched with Ajax, it loads contents inside <body> only, neglecting other tags i.e. <script>, <head> etc...
To solve your problem, move any extra JS libraries or code inside <div data-role="page">.
My goal is to include a FullCalendar into JQueryMobile.
I have followed this guide but when I run it with the Android Emulator, it loads the event dialog page with input text "title" and "color" like the image below.
click my image
How can I make it load a full calendar view first instead of an event dialog?
click my image
I have copied all js & css. Here is my index.html code
<html>
<head>
<link rel='stylesheet' type='text/css' href='resources/css/jquery-ui-1.8.13.custom.css'/>
<link rel='stylesheet' type='text/css' href='resources/css/fullcalendar.css'/>
<link rel='stylesheet' type='text/css' href='resources/css/application.css'/>
<script type='text/javascript' src='resources/js/jquery-1.5.1.min.js'></script>
<script type='text/javascript' src='resources/js/jquery-ui-1.8.13.custom.min.js'></script>
<script type='text/javascript' src='resources/js/fullcalendar.min.js'></script>
<script type='text/javascript' src='resources/js/underscore.js'></script>
<script type='text/javascript' src='resources/js/backbone.js'></script>
<script type='text/javascript' src='resources/js/application.js'></script>
</head>
<body>
<div id='calendar'></div>
<div id='eventDialog' class='dialog ui-helper-hidden'>
<form>
<div>
<label>Title:</label>
<input id='title' class="field" type="text"></input>
</div>
<div>
<label>Color:</label>
<input id='color' class="field" type="text"></input>
</div>
</form>
</div>
</body>
</html>
Please advise how to load full calendar view instead of the event dialog coming first.
http://arshaw.com/fullcalendar/docs/views/Available_Views/
http://arshaw.com/fullcalendar/docs/views/defaultView/
It's covered in the documentation. Is your defaultView set to 'month'?
I want only the landing page to be styled with Jquery. It´s a Login page, when the user logs in with his phone it should show the usual style
<%# page contentType="text/html;charset=UTF-8" %>
<html><!-- lol-->
<head>
<title>myApp/title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" cahrset="utf-8">
</script>
</head>
<body>
<div data-role="page" id="start" data-theme="d">
<div data-role="header">
Kontakt
</div>
<div class="ui-body ui-body-d">
<g:form controller="login" action="doLogin">
<div class="ui-grid-a">
<div class="ui-block-a"><input type="text" name="userNameField" id="username" value="Matrikelnummer" /></div>
<div class="ui-block-b"><input type="password" name="passWordField" id="password" value="Passwort" /></div>
</div>
<input type="submit" data-theme="d" name="loginButton" id="login" value="Login" />
</g:form>
</div>
</body>
</html>
As you can see in the form Im using grails for the backend. My problem is, all the other pages show jquery mobile style too when I login via this page. Why is it? Is ist because the import via "link" tag makes it global for the whole project?
thanks in advance Daniel
edit: the page where you land after login (supposed to have normal style:)
<%# page import="groovy.sql.ExpandedVariable; iwinews.User; iwinews.Category" %>
<html>
<head>
<meta name="layout" content="layout"/>
<script type="text/javascript">
var scroll_lock = false
var more_url = '${createLink(action:"singleNewspost")}';
var newsposts_by_category_url = '${createLink(action:"newspostsByCategory")}';
var all_newsposts_url = '${createLink(action:"allNewsposts")}';
var subscribed_newsposts_url = '${createLink(action:"subscribedNewsposts")}';
var filter_shown_categories_url = '${createLink(action:"filterShownCategories")}';
var search_url = '${createLink(action: "search")}';
var filterTypes = {
search : 0,
category : 1,
alle_kategorien : ${Category.ALLE_KATEGORIEN},
meine_kategorien : ${Category.MEINE_KATEGORIEN}
};
</script>
<script type="text/javascript">
</script>
</head>
<body>
<content tag="search">
<div id="_searchbox">
<input id="search"/></div>
</content>
<content tag="menu">
<h6>News-Kategorien:</h6>
<select id="kategorien_dropdown" class="grid_2">
<option id="${Category.ALLE_KATEGORIEN}" ${selectedCategory == Category.ALLE_KATEGORIEN ? "selected=\"selected\"" : ""}>alle Kategorien</option>
<option id="${Category.MEINE_KATEGORIEN}" ${selectedCategory == Category.MEINE_KATEGORIEN ? "selected=\"selected\"" : ""}>meine Kategorien</option>
</select>
<div id="filteredKategorien">
<g:render template="filteredKategorienTemplate" model="${categories}"/>
</div>
</content>
edit: This is the head of the layout/layout.gsp file
<%# page import="iwinews.REVISION; iwinews.CONSTANTS; iwinews.User; iwinews.Category" %>
<meta charset="utf-8"/>
<title><g:layoutTitle default="${CONSTANTS.PAGE_TITLE} /></title>
<style type="text/css">
</style>
<link rel="shortcut icon"
href="${resource(file: 'favicon.ico')}"/>
<link rel="stylesheet" href="${resource(dir: 'styles', file: 'reset.css')}"/>
<link rel="stylesheet" href="${resource(dir: 'styles', file: '960_12_col.css')}"/>
<link rel="stylesheet" href="${resource(dir: 'styles', file: 'default.css')}"/>
<g:javascript library="jquery"/>
<g:javascript library="jqModal"/>
<g:javascript library="jquery.cookie"/>
<g:javascript library="jquery.form"/>
<g:javascript library="application"/>
<g:layoutHead/>
As I understand, you've added jquery-mobile into main layout (layout/layout.gsp) And your login.gsp page extends it (it's <meta name="layout" content="layout"/>)
It's better to make two layouts:
/views/layout/mobile.gsp - for mobile pages
/views/layout/browser.gsp - for standard pages
and extend just that layout that you need for current page.
You can read more about Grails layouts at http://grails.org/doc/latest/guide/6.%20The%20Web%20Layer.html#6.2.4%20Layouts%20with%20Sitemesh
Concerning:
when I create a layout "mobile" and import it into the loginMobile page, and only there, the jquery Mobile style applies for the whole project again.
As far as I understand from the history of this question, might be due to the fact that ajax is enabled by default.
Have you tried to use the data-ajax="false" attribute, for instance on the submit link/button?