I have a collapsible that I mocked up on jsfiddle at https://jsfiddle.net/1gsqxo26/
It works fine there.
Same exact code on google apps script, nadda. What do I need to change to make this work properly there?
test4.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<base target="_top">
</head>
<body>
<div data-role="collapsible-set" id="set">
<div data-role="collapsible" data-collapsed="false" data-mini="true" class="stuff">
<h3>Stuff</h3>
<button type="button" id="submit" data-mini="true">Submit</button>
</div>
</div>
<?!= include('test4JS'); ?>
</body>
</html>
test4JS:
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
$('#submit').on('click', collapse);
function collapse(sender) {
$("#set").children(":first").collapsible( "collapse" );
//$(".stuff").collapsible("collapse");
//$("#set").children(":first").trigger( "collapse" );
//$(".stuff").trigger("collapse");
//none of these work
}
</script>
I'm trying to set up a simple index page with two tabs (to start), each with just a placeholder text input element, but while the toolbar displays properly the two tabs don't show at all (not just the content of the tabs, the tabs themselves don't display). I've used md-tabs before in other projects so I suspect I have something set up wrong but I'm not sure what. In developer mode, I can see the reference for the tabs, but when I select them they never get called out on the page. the around the does get called out, but none of the individual tabs do. The 'ng-init' call in the controller 'mainController' does get called, so the content of the tabs got processed, but the tabs never display. Any help would be appreciated, this is my first time trying to set this up on my own.
Here is the HTML for the index page:
<body style='padding-left: 0px' ng-app="tinkerApp">
<md-toolbar layout="row" style="background-color: rgb(255, 255, 222);">
<h1><b>ENGINE TEST</b></h1>
</md-toolbar>
<md-content>
<md-tabs md-dynamic-height md-border-bottom style='padding-left: 10px' md-stretch-tabs="always">
<md-tab label="HOME" id="home">
<md-content>
<div ng-controller="mainController" ng-init="initPage()">
<input type="text" class="form-control-sm" id="command"
name="command" ng-model="page.command"
style='width: 300px; height: 25px' />
</div>
</md-content>
</md-tab>
<md-tab label="ENGINE" id="engine">
<md-content>
<div ng-controller="mainController" ng-init="initPage()">
<input type="text" class="form-control-sm" id="command2"
name="command2" ng-model="page.command2"
style='width: 300px; height: 25px' />
</div>
</md-content>
</md-tab>
</md-tabs>
</md-content>
Here are the calls from inside mainApp.js:
(function(){
//agGrid.LicenseManager.setLicenseKey("your license key goes here");
// get ag-Grid to create an Angular module and register the ag-Grid directive
agGrid.initialiseAgGridWithAngular1(angular);
angular.module('tinkerApp', [ 'ngRoute','agGrid', 'ngAnimate',
'ngMessages', 'ngMaterial',
'material.svgAssetsCache','ngCookies',
'dropdown-
multiselect','ngSanitize','nvd3','hljs']);
})();
(function(){
angular.module('tinkerApp', [ 'ngRoute', 'agGrid', 'ngAnimate',
'ngMessages', 'ngMaterial',
'material.svgAssetsCache','ngCookies',
'dropdown-multiselect','ngSanitize','nvd3','hljs']);
"use strict";
var app = angular.module('tinkerApp');
app.config(function($routeProvider, $httpProvider) {
$routeProvider.when('/', {
templateUrl : 'index.html',
controller : 'mainController'
}).otherwise('/');
});
})();
And here are the css and script data I call inside index.html
<!--********* CSS *********-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/ng-modal.css" />
<link rel="stylesheet" type="text/css" href="css/tabs.css" />
<link rel="stylesheet" type="text/css" href="css/dialog.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<link rel="stylesheet" type="text/css" href="css/select.css">
<link rel="stylesheet" type="text/css"
href="node_modules/ag-grid/dist/styles/ag-grid.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/ag-grid/dist/styles/theme-fresh.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/ag-grid/dist/styles/theme-dark.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/ag-grid/dist/styles/theme-blue.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/ag-grid/dist/styles/theme-extreme.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/angular-material/angular-material.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/angular-nvd3/node_modules/nvd3/build/nv.d3.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/dt/se-1.2.2/datatables.min.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/select/1.2.2/css/select.bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css" />
<link rel="stylesheet" type="text/css"
href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" />
<link rel="icon" type="image/png" href="favicon.png" sizes="16x16">
<!--********* JAVASCRIPT *********-->
<script type="text/javascript" charset="utf8"
src="node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular/angular.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-sanitize/angular-sanitize.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-route/angular-route.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-material/angular-material.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-messages/angular-messages.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-aria/angular-aria.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/svg-assets-cache.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/ag-grid/dist/ag-grid.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/lodash/lodash.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-dropdown-multiselect/dist/angular-dropdownMultiselect.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-nvd3/node_modules/d3/d3.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-nvd3/node_modules/nvd3/build/nv.d3.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-nvd3/dist/angular-nvd3.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/jszip/dist/jszip.min.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/pdfmake/build/pdfmake.min.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/pdfmake/build/vfs_fonts.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.0/xlsx.core.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.0/xlsx.js"></script>
<script type="text/javascript" charset="utf8"
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/bootbox.min.js"></script>
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script type="text/javascript" charset="utf8"
src="js/directives/templates.js"></script>
Okay after more tinkering I discovered it was some basic thing I was missing. I'd defined 'ngMaterial' when I set up the app, but hadn't added $mdMedia as a dependency when I set up the controller. As soon as I did that, it worked. Thanks for the input everyone!
Your missing a function to trigger the change i.e
selectedTab
<md-tabs md-selected="selectedTab">
<md-tab label="One">
<p class="tab-content">Tab One content</p>
</md-tab>
<md-tab label="Two">
<p class="tab-content">Tab Two content</p>
</md-tab>
<md-tab label="Three">
<p class="tab-content">Tab Three content</p>
</md-tab>
</md-tabs>
Define the function in the controller
$scope.selectedTab = 0;
$scope.changeTab = function() {
if ($scope.selectedTab === 2) {
$scope.selectedTab = 0;
}
else {
$scope.selectedTab++;
}
}
Source from another question: See the answer
I have the following HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet" />
<link rel="stylesheet" href="style/MarkerCluster.css" />
<link rel="stylesheet" href="style/MarkerCluster.Default.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="script/leaflet.makimarkers.js"></script>
<script src="leaflet-providers/leaflet-providers.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jQuery/jquery-1.11.1-min.js"></script>
<script src="script/leaflet.markercluster-src.js"></script>
</head>
<body>
<div id="map" style="width: 1895px; height: 940px;"></div>
<script src="script.js"></script>
</body>
</html>
This HTML works fine, however when I change leaflet to a new version,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<!--<link href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet" />-->
<link rel="stylesheet" href="style/MarkerCluster.css" />
<link rel="stylesheet" href="style/MarkerCluster.Default.css" />
<script src='https://unpkg.com/leaflet#1.0.1/dist/leaflet.js'></script>
<link href='https://unpkg.com/leaflet#1.0.1/dist/leaflet.css' rel='stylesheet' />
<!-- <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> -->
<script src="script/leaflet.makimarkers.js"></script>
<script src="leaflet-providers/leaflet-providers.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jQuery/jquery-1.11.1-min.js"></script>
<script src="script/leaflet.markercluster-src.js"></script>
</head>
<body>
<div id="map" style="width: 1895px; height: 940px;"></div>
<script src="script.js"></script>
</body>
</html>
I got the error;
TypeError: t is undefined
Could any leafletjs expert help me to figure out what is going on, please?
I'm facing a weird problem in which I'm unable to close bootstrap tags.
Below is my html code,
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-tagsinput.min.js"></script>
</head>
<body>
<input type="text" id="searchTags" data-role="tagsinput"/>
</body>
</html>
I'm using Bootstrap V3.0.
Below is the screen shot of the tags,
As you can see from the image that 'x' used to close the tags is not displayed. Any idea why??
Thanks in advance.
You're probably missing this css file:
<link href="bootstrap-tagsinput.css" rel="stylesheet">
This is my Source and it works with the closing x:
<html>
<head>
<link href="bootstrap-tagsinput.css" rel="stylesheet">
<link href="bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tagsinput.js"></script>
</head>
<body>
<input type="text" id="searchTags" data-role="tagsinput"/>
</body>
</html>
(I didn't took care of nice use of js/css folders)
Let me know if this helps
I'm trying to use jFontSize in a local html page to be displayed in a WebView.
The script should allow the user to change the text size and it does. However this is no longer the case when I add to the text.
I tried using another script but the same problem persists.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir = "ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript" src="jquery-1.5.js"></script>
<script type="text/javascript" language="javascript" src="jquery.jfontsize-1.0.js"></script>
<script type="text/javascript" language="javascript" src="jquery.corner-2.09.js"></script>
<script type="text/javascript" language="javascript" src="shCore.js"></script>
<script type="text/javascript" language="javascript" src="shBrushJScript.js"></script>
<script type="text/javascript" language="javascript" src="shBrushXml.js"></script>
<script type="text/javascript" language="javascript" src="shBrushCss.js"></script>
<script type="text/javascript" language="javascript" src="funcoes.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
<link type="text/css" rel="stylesheet" href="jfontsize.css" />
<link type="text/css" rel="stylesheet" href="shCoreDefault.css" />
</head>
<body>
<a class="jfontsize-button" id="jfontsize-m2" href="#">A-</a>
<a class="jfontsize-button" id="jfontsize-d2" href="#">A</a>
<a class="jfontsize-button" id="jfontsize-p2" href="#">A+</a>
<p class="some-class-name2" dir="rtl" align = "right">Hello<br>world</p>
<script type="text/javascript" language="javascript">
$('.some-class-name2').jfontsize({
btnMinusClasseId: '#jfontsize-m2',
btnDefaultClasseId: '#jfontsize-d2',
btnPlusClasseId: '#jfontsize-p2',
btnMinusMaxHits: 1,
btnPlusMaxHits: 7,
sizeChange: 7
});
</script>
</body>
</html>
The page works fine on Firefox.
You need to add the initialize code in document load -
$(document).ready(function(){
//jfontsize increase
$('.some-class-name2').jfontsize({
btnMinusClasseId: '#jfontsize-m2',
btnDefaultClasseId: '#jfontsize-d2',
btnPlusClasseId: '#jfontsize-p2',
btnMinusMaxHits: 1,
btnPlusMaxHits: 7,
sizeChange: 7
});
});
It should work fine.