I am working on Ionic Material and I want 2 images in a row like Ionic material Demo app.It is showing only 1 now in a row. I created a https://codepen.io/anujsphinx/pen/jVqvaV
From It,So Need Help to fix this issue.
Now That issue has fixed and image is showing but main issue is tomaintain size,check updated pen on same url.
Look at this solution:
/*global angular*/
angular.module('ionicApp', ['ionic', 'ionic-material', 'ionMdInput'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('eventmenu', {
url: '/event',
abstract: true,
templateUrl: 'templates/event-menu.html'
})
.state('eventmenu.login', {
url: '/login',
views: {
'menuContent' :{
templateUrl: 'templates/login.html',
controller: 'GalleryCtrl'
}
}
});
$urlRouterProvider.otherwise('/event/login');
})
.directive('ngLastRepeat', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngLastRepeat'+ (attr.ngLastRepeat ? '.'+attr.ngLastRepeat : ''));
});
}
}
}
})
.controller('MainCtrl', function($scope, ionicMaterialInk, ionicMaterialMotion, $ionicSideMenuDelegate, $timeout) {
$timeout(function(){
ionicMaterialInk.displayEffect();
ionicMaterialMotion.ripple();
},0);
})
.controller('GalleryCtrl', function($scope, $stateParams, $timeout, ionicMaterialInk, ionicMaterialMotion) {
console.log("in GalleryCtrl");
// Activate ink for controller
//ionicMaterialInk.displayEffect();
$scope.myPics= [{
"Title": "My Childhood",
"Like": "21",
"Comment" : "5",
"Image" : "http://www.magic4walls.com/wp-content/uploads/2013/12/lovely-child-blue-eyes-photo-wallpaper-2560x1600-1-694x417.jpg"
},{
"Title": "Funny me",
"Like": "21",
"Comment" : "5",
"Image" : "http://media.salemwebnetwork.com/cms/CW/family/2218-ChildLookUp.220w.tn.jpg"
},{
"Title": "Me",
"Like": "21",
"Comment" : "5",
"Image" : "http://1.bp.blogspot.com/-QDe-qthaKz0/UAWZ6aakdoI/AAAAAAAAFK4/2zlaIu1r20Q/s1600/baby.jpg"
},{
"Title": "Guitar",
"Like": "21",
"Comment" : "5",
"Image" : "http://imshopping.rediff.com/imgshop/800-1280/shopping/pixs/17369/c/caihd224_1._craft-art-india-handmade-dummy-miniature-of-guitar-gitar-code-cai-hd-0224-.jpg"
}];
$scope.$on('ngLastRepeat.mylist',function(e) {
console.log("in Last ");
ionicMaterialInk.displayEffect();
});
});
/*endglobal angular*/
/* General
==================================*/
h1 {
color: #fff;
text-shadow: 0 1px 0px #000;
font-size: 42px;
}
/* Utilities
==================================*/
.title-bordered {
border-top: solid 2px #bbb;
padding-top: 30px;
}
p {
color: #555;
margin: 0 0 25px;
}
.scroll {
height: 100%;
}
/* Menu
==================================*/
.menu .bar.bar-header.expanded {
transition: all .5s ease-in-out;
}
.menu-open .bar.bar-header.expanded {
background-color: #222;
}
.menu h2 {
bottom: 0;
font-size: 18px;
left: 16px;
position: absolute;
}
.menu .avatar {
height: 88px;
width: 88px;
}
.menu.menu-left * {
font-weight: bold;
}
.menu-open .ion-navicon {
transform: rotate(-360deg);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.menu-open .ion-navicon:before {
content: "\f2ca";
}
/* Login
==================================*/
.app-icon {
background-color: #fff;
background: url('../img/login.PNG') center;
background-size: cover;
border-radius: 50%;
height: 125px;
margin: 0 auto;
width: 125px;
}
.social-login {
position: fixed;
bottom: 0;
}
.error{
padding: 4px 1px;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 12px;
text-transform: uppercase;
color: #000000;
vertical-align: middle;
}
.red_bg{
color:red;
}
.yellow_bg{
background-color: #eae07f!important;
}
.gallery-box .card.card-gallery img {
border: none;
box-shadow: none;
display: block;
max-width: 220px;
max-height: 132px;
width: 100%;
height: 100%;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Material </title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<link href='https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic' rel='stylesheet' type='text/css'>
<link href="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/demo/www/lib/ion-md-input/css/ion-md-input.min.css" rel="stylesheet">
<link href="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/dist/ionic.material.min.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/dist/ionic.material.min.js"></script>
<script src="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/demo/www/lib/ion-md-input/js/ion-md-input.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-nav-view>
</ion-nav-view>
<script id="templates/event-menu.html" type="text/ng-template">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-balanced">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
<ion-content>
<ul class="list animate-rip">
<!-- Note each link has the 'menu-close' attribute so the menu auto closes when clicking on one of these links -->
<a href="#/event/login" class="item" menu-close>Gallery</a>
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="templates/login.html" type="text/ng-template">
<ion-view view-title="Gallery" class="gallery-box">
<ion-content ng-class="{expanded:isExpanded}" class="animate-fade-slide-in">
<div class="list col" >
<div class="item card card-gallery item-text-wrap in demo" ng-repeat="picsItem in myPics" >
<div class="ink dark-bg">
<h2>{{picsItem.Title}}</h2>
<img ng-src="{{picsItem.Image}}" class="full-image" ng-last-repeat="mylist">
</div>
<div class="item tabs tabs-secondary tabs-icon-left in demo">
<a class="tab-item stable-bg assertive">
<i class="icon ion-heart"></i>
{{picsItem.Like}}
</a>
<a class="tab-item stable-bg positive-900">
<i class="icon ion-chatbubbles"></i>
{{picsItem.Comment}}
</a>
</div>
</div>
</div>
</ion-content>
</ion-view>
</script>
</body>
</html>
I have updated my code pen codepen.io/anujsphinx/pen/jVqvaV
I used col50 and some css then i fixed it .
Related
Hello I am new to ionic and trying to achieve a custom tab bar as follows
Expected Output
Current Output
Bellow is my code so far
home.scss
ion-tabs {
ion-tab-bar {
bottom: 0px;
width: 100%;
position: absolute;
backdrop-filter: blur(12px);
--color: var(--ion-color-white);
--background: rgba(255, 255, 255, 0.04);
}
ion-tab-button {
ion-label {
font-weight: 500;
font-size: 14px;
line-height: 10px;
}
opacity: 0.75;
ion-icon {
font-size: 24px;
}
ion-icon[ng-reflect-name='add-circle-outline'] {
font-size: 40px;
}
}
ion-tab-button.tab-selected {
opacity: 1;
ion-label {
font-weight: 600;
}
}
}
home.html
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button
*ngFor="let item of navigationItems; index as i"
[tab]="item?.route"
(click)="item?.click ? item?.click() : null"
id="tabButton-{{ i }}"
>
<ion-icon [name]="item?.icon"></ion-icon>
<ion-label>{{item?.name}}</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
home.ts
navigationItems = [
{ name: 'Home', route: 'dashboard', icon: 'home' },
{ name: 'Calendar', route: 'calendar', icon: 'calendar' },
{ icon: 'add-circle-outline', click: () => this.openBottomSheet() },
{ name: 'Reports', route: 'reports', icon: 'stats-chart-outline' },
{ name: 'Settings', route: 'settings', icon: 'settings' },
];
Can someone please help me achieve as shown in the screenshot
use ion-fab-button to show big button in center.
For Example:
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="newspaper"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="construct"></ion-icon>
</ion-tab-button>
<ion-tab-button>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="notifications"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab4">
<ion-icon name="settings"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button routerDirection="root" color="warning" >
<ion-icon name="add-circle"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-tabs>
Check This Stackblitz for more info:
Stackblitz
Your button position is 2 so we will insert a custom class inside It programmatically.
home.html (changed code):
<ion-tab-button
*ngFor="let item of navigationItems; index as i"
[tab]="item?.route"
(click)="item?.click ? item?.click() : null"
id="tabButton-{{ i }}"
[ngClass]="{'add-btn':i===2 ? true : false}"
>
<ion-icon [name]="item?.icon"></ion-icon>
<ion-label>{{item?.name}}</ion-label>
</ion-tab-button>
Then add Its style to scss file :
.add-btn {
ion-icon {
color: #fcad07;
padding: 0px;
margin: 0px;
font-size: 55px !important;
position: absolute;
margin: auto;
}
}
I updated my code as follows and it worked for me
home.html
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button
*ngFor="let item of navigationItems; index as i"
[tab]="item?.route"
(click)="item?.click ? item?.click() : null"
id="tabButton-{{ i }}"
>
<ion-icon [src]="item?.src" [name]="item?.icon"></ion-icon>
<ion-label *ngIf="item.src == null">{{item?.name}}</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
home.ts
navigationItems = [
{ name: 'Home', route: 'dashboard', icon: 'home' },
{ name: 'Calendar', route: 'calendar', icon: 'calendar' },
{ src: 'assets/images/tab-bar-add.svg', click: () => this.openBottomSheet() },
{ name: 'Reports', route: 'reports', icon: 'stats-chart-outline' },
{ name: 'Settings', route: 'settings', icon: 'settings' },
];
home.scss
ion-tabs {
ion-tab-bar {
bottom: 0px;
width: 100%;
position: absolute;
backdrop-filter: blur(12px);
--color: var(--ion-color-white);
--background: var(--ion-tab-bar-background);
}
ion-tab-button {
ion-label {
padding-bottom: 5px;
font-weight: 500;
font-size: 14px;
line-height: 10px;
color: var(--ion-color-white-light);
}
ion-icon {
font-size: 24px;
color: var(--ion-color-white-light);
}
ion-icon[ng-reflect-src='assets/images/tab-bar-add.svg'] {
width: 80%;
height: 80%;
}
}
ion-tab-button.tab-selected {
ion-label {
font-weight: 600;
color: var(--ion-color-tab-selected);
}
ion-icon {
color: var(--ion-color-tab-selected);
}
}
}
I have started playing around with Mapbox, and things are working as I would like, except that I have not been able to figure out how to disable clustering. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add custom icons with Markers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.marker {
/*display: block;*/
border: none;
/*border-radius: 50%;*/
cursor: pointer;
padding: 0;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Map_pin_icon.svg/176px-Map_pin_icon.svg.png');
background-size: cover;
width: 20px;
height: 27px;
/*border-radius: 50%;*/
/*cursor: pointer;*/
}
</style>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibmFiZWxla3QiLCJhIjoiY2p4ZXVubnQwMGVmcTN6cGU0c3JpZmM2diJ9.peecDCcSljWhChxCknv7AQ';
var coordinates = [
[6.73579, 78.72300],
[2.70886, 11.51694],
[34.05482, -57.09742],
[-39.05019, 89.79126],
[17.44893, 35.57014],
[23.60105, 168.12674],
[-4.87631, 72.99334],
[39.7392, -104.9903],
[39.79905,-105.78118],
[39.80266,-105.78692],
[39.79758,-105.78061],
[39.80314,-105.78978],
[39.80313,-105.78999],
[39.80103,-105.78272],
[39.80096,-105.78259],
[39.80187,-105.78407],
[39.80283,-105.78593],
[39.79937,-105.78134],
[39.80023,-105.78164],
[39.80272,-105.78765],
[39.80263,-105.78673],
[39.80264,-105.78676],
[39.80125,-105.78326],
[39.7976,-105.78028],
[39.80316,-105.7905],
]
var num_coordinates = Object.keys(coordinates).length
var geojson = {
"type": "FeatureCollection",
"features": []
}
for (var coord_ind = 0; coord_ind < num_coordinates; coord_ind++) {
geojson.features.push({
"type": "Feature",
"properties": {
"message": "Bar",
"iconSize": [300, 300]
},
"geometry": {
"type": "Point",
"coordinates": [coordinates[coord_ind][1], coordinates[coord_ind][0]] // Longitude then Latitude
}
})
}
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
// style: 'mapbox://styles/mapbox/satellite-v9', // stylesheet location
center: [-99.66, 38.46], // starting position [lng, lat]
zoom: 5.5 // starting zoom
});
map.on('load', function() {
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Map_pin_icon.svg/176px-Map_pin_icon.svg.png', function(error, image) {
if (error) throw error;
map.addImage('pin', image);
map.addSource("photo_locations", {
type: "geojson",
data: geojson,
cluster: false,
clusterMaxZoom: 1, // Max zoom to cluster points on
clusterRadius: 1 // Radius of each cluster when clustering points (defaults to 50)
});
map.addLayer({
"id": "points",
"type": "symbol",
"source": "photo_locations",
"layout": {
"icon-image": "pin",
"icon-size": 0.12
}
});
});
});
</script>
</body>
</html>
You can see that I have cluster: false set for my source. However, if you display this in your browser, the pins are still clustered together. If you zoom in on the pin to the west of Denver, you will see it separate into multiple pins.
How can I get clustering to disable entirely so that each individual pin can be seen at any zoom level? Any thoughts are appreciated. Thanks!
As geografa suggested, adding "icon-allow-overlap": true does the trick. This needs to be added to the layout section of the layer. So I now have:
...
"layout": {
"icon-image": "pin",
"icon-size": 0.08,
"icon-allow-overlap": true
}
...
I now understand how image overlays work (I am a newbie) and have no issue inserting them into a map now, however I have 4 maps on one page (image attached of how it looks) and I am wanting to overlay an image on one of them (top left). Below is my code that works - and below that code that doesn't work. Where do I need to insert the addsource() and addlayer() for this to work? Working code would be very helpful as I cannot seem to find this out myself. I spent the last 2 hours trying to figure this out.
Code that works : (nothing is added below map named "topleftmapbox" so the code works)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Quad Pane Display</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:100%; bottom:100%; left:100%,right:100%, width:100%; padding:0;}
</style>
</head>
<body background="bg.jpg">
<style>
html, body, #page, #map {
height:100%;
width:100%;
margin:0;
padding:0;
cursor: url(cursor.gif), pointer;
overflow: hidden;
}
body * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.topleftmapclass {height : 50%; width : 50%; bottom: 50%; right : 50%; position : absolute; z-index : 200;}
.toprightmapclass { height : 50%; width : 50%; nottom: 50%; left : 50%; position : absolute; z-index : 200;}
.bottomleftmapclass {height : 50%; width : 50%; top : 50%; right : 50%; position : absolute; z-index : 200;}
.bottomrightmapclass { height : 50%; width : 50%; top : 50%; left : 50%; position : absolute; z-index : 200;}
</style>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css' type='text/css' />
<div id='topleftmap' class='topleftmapclass'></div>
<div id='toprightmap' class='toprightmapclass'></div>
<div id='bottomleftmap' class='bottomleftmapclass'></div>
<div id='bottomrightmap' class='bottomrightmapclass'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2ppanVpMTIwMDF3NDNrcjA5eHlpMjlsOSJ9._4sT3921GYQlIlsZ31EyQA';
var topleftmapbox = new mapboxgl.Map({
container: 'topleftmap',
zoom: 14,
pitch: 53,
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
center: [-98.028491, 29.703963]
});
var toprightmapbox = new mapboxgl.Map({
container: 'toprightmap',
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});
var bottomleftmapbox = new mapboxgl.Map({
container: 'bottomleftmap',
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});
var bottomrightmapbox = new mapboxgl.Map({
container: 'bottomrightmap',
style: 'mapbox://styles/formula4/cjifh68hb0lus2st8q6rz4v49',
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});
</script>
</body>
</html>
And this code (with code added below "topleftmapbox" does NOT work) :
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Quad Pane Display</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:100%; bottom:100%; left:100%,right:100%, width:100%; padding:0;}
</style>
</head>
<body background="bg.jpg">
<style>
html, body, #page, #map {
height:100%;
width:100%;
margin:0;
padding:0;
cursor: url(cursor.gif), pointer;
overflow: hidden;
}
body * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.topleftmapclass {height : 50%; width : 50%; bottom: 50%; right : 50%; position : absolute; z-index : 200;}
.toprightmapclass { height : 50%; width : 50%; nottom: 50%; left : 50%; position : absolute; z-index : 200;}
.bottomleftmapclass {height : 50%; width : 50%; top : 50%; right : 50%; position : absolute; z-index : 200;}
.bottomrightmapclass { height : 50%; width : 50%; top : 50%; left : 50%; position : absolute; z-index : 200;}
</style>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css' type='text/css' />
<div id='topleftmap' class='topleftmapclass'></div>
<div id='toprightmap' class='toprightmapclass'></div>
<div id='bottomleftmap' class='bottomleftmapclass'></div>
<div id='bottomrightmap' class='bottomrightmapclass'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2ppanVpMTIwMDF3NDNrcjA5eHlpMjlsOSJ9._4sT3921GYQlIlsZ31EyQA';
var topleftmapbox = new mapboxgl.Map({
container: 'topleftmap',
zoom: 14,
pitch: 53,
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
center: [-98.028491, 29.703963]
});
topleftmapbox.addSource("dopplerimage", {"type": "image",
"url": "KEWX_L2_Z.gif",
"coordinates": [
[-98.0387, 29.7125],
[-98.0182, 29.7125],
[-98.0387, 29.6927],
[-98.0387, 29.6920]
]})
topleftmapbox.addLayer({
"id": "overlay",
"source": "dopplerimage",
"type": "raster",
"paint": {"raster-opacity": 0.85}
})
var toprightmapbox = new mapboxgl.Map({
container: 'toprightmap',
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});
var bottomleftmapbox = new mapboxgl.Map({
container: 'bottomleftmap',
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});
var bottomrightmapbox = new mapboxgl.Map({
container: 'bottomrightmap',
style: 'mapbox://styles/formula4/cjifh68hb0lus2st8q6rz4v49',
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});
</script>
</body>
</html>
You need to wait until the style for topleftmapbox is loaded before adding the source and layer.
topleftmapbox.on('load', function() {
...
});
Full code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Quad Pane Display</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 100%;
bottom: 100%;
left: 100%, right:100%, width:100%;
padding: 0;
}
</style>
</head>
<body background="bg.jpg">
<style>
html,
body,
#page,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
cursor: url(cursor.gif), pointer;
overflow: hidden;
}
body * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.topleftmapclass {
height: 50%;
width: 50%;
bottom: 50%;
right: 50%;
position: absolute;
z-index: 200;
}
.toprightmapclass {
height: 50%;
width: 50%;
nottom: 50%;
left: 50%;
position: absolute;
z-index: 200;
}
.bottomleftmapclass {
height: 50%;
width: 50%;
top: 50%;
right: 50%;
position: absolute;
z-index: 200;
}
.bottomrightmapclass {
height: 50%;
width: 50%;
top: 50%;
left: 50%;
position: absolute;
z-index: 200;
}
</style>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css' type='text/css' />
<div id='topleftmap' class='topleftmapclass'></div>
<div id='toprightmap' class='toprightmapclass'></div>
<div id='bottomleftmap' class='bottomleftmapclass'></div>
<div id='bottomrightmap' class='bottomrightmapclass'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2ppanVpMTIwMDF3NDNrcjA5eHlpMjlsOSJ9._4sT3921GYQlIlsZ31EyQA';
var topleftmapbox = new mapboxgl.Map({
container: 'topleftmap',
zoom: 14,
pitch: 53,
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
center: [-98.028491, 29.703963]
});
topleftmapbox.on('load', function() {
topleftmapbox.addSource("dopplerimage", {
"type": "image",
"url": "KEWX_L2_Z.gif",
"coordinates": [
[-98.0387, 29.7125],
[-98.0182, 29.7125],
[-98.0387, 29.6927],
[-98.0387, 29.6920]
]
})
topleftmapbox.addLayer({
"id": "overlay",
"source": "dopplerimage",
"type": "raster",
"paint": {
"raster-opacity": 0.85
}
})
});
var toprightmapbox = new mapboxgl.Map({
container: 'toprightmap',
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});
var bottomleftmapbox = new mapboxgl.Map({
container: 'bottomleftmap',
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});
var bottomrightmapbox = new mapboxgl.Map({
container: 'bottomrightmap',
style: 'mapbox://styles/formula4/cjifh68hb0lus2st8q6rz4v49',
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});
</script>
</body>
</html>
I want to perform dynamic binded actions on click of buttons and checkbox ticks all together to be reflected in a statement of the class results (name results, box-container)
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://enyojs.com/enyo-2.0b/enyo.js"></script>
<script src="enyo-master/enyo.js"></script>
<link rel=stylesheet href="http://enyojs.com/enyo-2.0b/enyo.css>
<link rel="stylesheet" href="button_enyo.css">
<link rel="stylesheet" href="checkbox-sample.css">
<link rel="stylesheet" href="connect .css">
/*connect.css*/
.connect .heading1{
padding-left: 450px;
color: #3BAAFF;
text-transform: uppercase;
font-weight: bolder;
margin-bottom: 31px;
font-size: 31px;
}
.connect .heading2{
padding-left : 512px;
color: #5ED4FF;
text-transform: uppercase;
font-weight: bold;
position: absolute;
}
.connect .results {
padding: 20px;
min-height: 24px;
border-radius: 10px;
color: #FFF;
background-color: #555;
display : inline-block;
width: 786px;
position : relative;
left: 134px;
}
/*button_enyo.css*/
.button-sample {
padding: 0 20px;
font-family: Segoe UI, Prelude Medium, Helvetica, Verdana, sans-serif;
font-size: 16px;
margin-top: 85px;
margin-left: 105px;
}
.button-sample .section {
padding-top: 20px;
color: #F49200;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 8px;
}
.button-sample button {
margin: 10px;
}
.button-sample .results {
margin: 20px 0;
padding: 20px;
min-height: 24px;
border-radius: 10px;
color: #FFF;
background-color: #555;
}
.button-sample .image-button {
width: 200px;
height: 100px;
}
/*checkbox-sample.css*/
.checkbox-sample {
padding: 0 20px;
font-family: Segoe UI, Prelude Medium, Helvetica, Verdana, sans-serif;
font-size: 16px;
margin-top: 85px;
margin-left: 105px;
}
.checkbox-sample .section {
padding-top: 20px;
color: #F49200;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 8px;
/*position : absolute;*/
}
.checkbox-sample .enyo-checkbox {
margin: 10px;
}
.checkbox-sample .results {
margin: 20px 0;
padding: 20px;
min-height: 24px;
border-radius: 10px;
color: #FFF;
background-color: #555;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Connect 2015</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel=stylesheet href="http://enyojs.com/enyo-2.0b/enyo.css">
<link rel="stylesheet" href="button_enyo.css">
<link rel="stylesheet" href="checkbox-sample.css">
<link rel="stylesheet" href="connect .css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script src="http://enyojs.com/enyo-2.0b/enyo.js"></script>
<script src="enyo-master/enyo.js"></script>
<script>
enyo.kind({
name: "enyo.sample.ButtonSample",
classes: "button-sample",
components: [
{content: "Buttons", classes: "section"},
{kind: "enyo.Button", content: "Action Button", ontap: "buttonToggleTapped"},
{kind: "enyo.Button", name: "toggleButton", disabled: true, content: "Disabled Button", ontap: "buttonTapped"},
{content: "Grouped Buttons", classes: "section"},
{kind: "enyo.Group", onActivate: "groupButtonsActivated", components: [
{kind: "enyo.Button", content: "Grouped Button 1"},
{kind: "enyo.Button", content: "Grouped Button 2"},
{kind: "enyo.Button", content: "Grouped Button 3"}
]},
{content: "Image Button", classes: "section"},
{kind: "enyo.Button", content: "Image Button", classes: "image-button", ontap: "buttonTapped", components: [
{kind: "enyo.Image", src: "http://enyojs.com/img/enyo-logo.png", alt: "Enyo Logo"}
//]},
]}
//{name: "results", classes: "results"}
],
buttonTapped: function(inSender, inEvent) {
//this.updateResult({content: "The \"" + inSender.getContent() + "\" button is tapped."});
this.on("updateResult", {content: "The \"" + inSender.getContent() + "\" button is tapped."});
},
buttonToggleTapped: function(inSender, inEvent) {
this.buttonTapped(inSender, inEvent);
this.$.toggleButton.setDisabled(!this.$.toggleButton.getDisabled()).setContent(this.$.toggleButton.getDisabled() ? "Disabled Button" : "Enabled Button");
},
groupButtonsActivated: function(inSender, inEvent) {
if (inEvent.originator.getParent().getActive()) {
this.updateResult({content: "The \"" + inEvent.originator.getParent().getActive().getContent() + "\" button is selected."});
}
//},
},
updateResult: function(inComponent) {
this.$.results.destroyClientControls();
this.$.results.createComponent(inComponent);
this.$.results.render();
}
});
enyo.kind({
name: "enyo.sample.CheckboxSample",
classes: "checkbox-sample",
components: [
{content: "Checkboxes", classes: "section"},
{kind: "enyo.Checkbox", content: "Checkbox 1", onchange: "checkboxChanged"},
{kind: "enyo.Checkbox", content: "Checkbox 2", onchange: "checkboxChanged"},
{kind: "enyo.Checkbox", content: "Checkbox 3", onchange: "checkboxChanged"},
{content: "Grouped Checkboxes", classes: "section"},
{kind: "enyo.Group", onActivate: "groupActivated", components: [
{kind: "enyo.Checkbox", content: "Grouped Checkbox 1"},
{kind: "enyo.Checkbox", content: "Grouped Checkbox 2"},
{kind: "enyo.Checkbox", content: "Grouped Checkbox 3"}
//]},
]}
//{name: "results", classes: "results"}
//],
],
checkboxChanged: function(inSender, inEvent) {
this.updateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is " + (inSender.getChecked() ? "checked": "unchecked") + "."});
},
groupActivated: function(inSender, inEvent) {
if (inEvent.originator.getActive()) {
this.updateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is selected."});
}
//},
}
});
//new enyo.sample.ButtonSample().renderInto(document.body);
enyo.kind({
name: "connect",
classes: "connect ",
components: [
{ content : "CONNECT Signup 2015", classes : "heading1"},
//{ content : "Please signup for Connect", classes : "heading2"},
{name: "results", classes: "results"},
{ kind: "enyo.sample.ButtonSample" },
{ kind: "enyo.sample.CheckboxSample" },
// ]
],
});
new connect().renderInto(document.body);
</script>
</body>
</html>
I want to perform dynamic binded actions on click of buttons and checkbox ticks all together to be reflected in a statement of the class results (name results, box-container)
On the click of button1, display should be button1 is clicked,
on click of other buttons, display should be they are clicked;
For checkbox also i have to combined the actions display triggered to that staement-result box only. on click check of checkbox, checkbox one is clicked i.e. it should be displayed after removal of button action.
one action display on the results at a time for combination of both kinds button and checkbox.
You can achieve the expected behavior using below code, where to pass data between siblings using common parent, event propagation and handling are used.
FIDDLE LINK
enyo.kind({
name: "enyo.sample.ButtonSample",
classes: "button-sample",
components: [
{content: "Buttons", classes: "section"},
{kind: "enyo.Button", content: "Action Button", ontap: "buttonToggleTapped"},
{kind: "enyo.Button", name: "toggleButton", disabled: true, content: "Disabled Button", ontap: "buttonTapped"},
{content: "Grouped Buttons", classes: "section"},
{kind: "enyo.Group", onActivate: "groupButtonsActivated", components: [
{kind: "enyo.Button", content: "Grouped Button 1"},
{kind: "enyo.Button", content: "Grouped Button 2"},
{kind: "enyo.Button", content: "Grouped Button 3"}
]},
{content: "Image Button", classes: "section"},
{kind: "enyo.Button", content: "Image Button", classes: "image-button", ontap: "buttonTapped", components: [
{kind: "enyo.Image", src: "http://enyojs.com/img/enyo-logo.png", alt: "Enyo Logo"}
]}
],
//Custom event
events: {
onUpdateResult: "",
},
buttonTapped: function(inSender, inEvent) {
//Once button tapped, propagate/bubble the event with required data
this.doUpdateResult({content: "The \"" + inSender.getContent() + "\" button is tapped."});
},
buttonToggleTapped: function(inSender, inEvent) {
//button tapped
this.buttonTapped(inSender, inEvent);
this.$.toggleButton.setDisabled(!this.$.toggleButton.getDisabled()).setContent(this.$.toggleButton.getDisabled() ? "Disabled Button" : "Enabled Button");
},
groupButtonsActivated: function(inSender, inEvent) {
if (inEvent.originator.getParent().getActive()) {
this.doUpdateResult({content: "The \"" + inEvent.originator.getParent().getActive().getContent() + "\" button is selected."});
}
}
});
enyo.kind({
name: "enyo.sample.CheckboxSample",
classes: "checkbox-sample",
components: [
{content: "Checkboxes", classes: "section"},
{kind: "enyo.Checkbox", content: "Checkbox 1", onchange: "checkboxChanged"},
{kind: "enyo.Checkbox", content: "Checkbox 2", onchange: "checkboxChanged"},
{kind: "enyo.Checkbox", content: "Checkbox 3", onchange: "checkboxChanged"},
{content: "Grouped Checkboxes", classes: "section"},
{kind: "enyo.Group", onActivate: "groupActivated", components: [
{kind: "enyo.Checkbox", content: "Grouped Checkbox 1"},
{kind: "enyo.Checkbox", content: "Grouped Checkbox 2"},
{kind: "enyo.Checkbox", content: "Grouped Checkbox 3"}
]}
],
//Custom event
events: {
onUpdateResult: "",
},
checkboxChanged: function(inSender, inEvent) {
//Propagate the event with required data
this.doUpdateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is " + (inSender.getChecked() ? "checked": "unchecked") + "."});
},
groupActivated: function(inSender, inEvent) {
if (inEvent.originator.getActive()) {
this.doUpdateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is selected."});
}
}
});
enyo.kind({
name: "connect",
classes: "connect ",
components: [
{ content : "CONNECT Signup 2015", classes : "heading1"},
{name: "results", classes: "results"},
{ kind: "enyo.sample.ButtonSample" },
{ kind: "enyo.sample.CheckboxSample" },
],
//Event handled by common parent, callback executed
handlers: {
onUpdateResult: "updateResult"
},
//This callback will update the results
updateResult: function(inSender,inEvent) {
this.$.results.setContent(inEvent.content);
}
});
new connect().renderInto(document.body);
Hope that helps!
My question refers specifically to http://api.jquery.com/event.target/#example-1
If you use a span in the <li> or other tag to change the style such as <b> as I have done here, that part of the element won't trigger the JQuery function to toggle it's children. How might one go about making this work?
HTML:
<ul>
<li><b>This doesn't work,</b> this does
<ul>
<li>sub item 1-a</li>
<li>sub item 1-b</li>
</ul>
</li>
<li>item 2
<ul>
<li>sub item 2-a</li>
<li>sub item 2-b</li>
</ul>
</li>
</ul>
JavaScript:
function handler(event) {
var $target = $(event.target);
if( $target.is("li") ) {
$target.children("ul").toggle();
}
}
$("ul").click(handler).find("ul").hide();
To keep using your current form, I'd suggest using closest():
function handler(event) {
$(event.target).closest('li').children("ul").toggle();
}
$("ul").click(handler).find("ul").hide();
JS Fiddle demo.
Though for my own use I'd prefer:
$('li').on('click', function(e){
e.stopPropagation();
$(this).find('ul').toggle();
});
JS Fiddle demo.
References:
closest().
on().
A complete example of e.target children and closest with datatable and external data.
HtML
<!DOCTYPE html>
<html lang="en">
<head>
<title>example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8" src="js/jquery.dataTables.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="col-md-12 sectionone">
<div id="coxtable">
<div class="col-md-3 outerblock" id="section1"><div class="blocks section1"><h6 class="span1">Section1</h6><span class="span1a">Section1a</span></div></div>
<div class="col-md-3 outerblock" id="section2"><div class="blocks section2"><h6 class="span1">Section2</h6><span class="span1a">Section2a</span></div></div>
<div class="col-md-3 outerblock" id="section3"><div class="blocks section3"><h6 class="span1">Section3</h6><span class="span1a">Section3a</span></div></div>
<div class="col-md-3 outerblock" id="section4"><div class="blocks section4"><h6 class="span1">Section4</h6><span class="span1a">Section4a</span></div></div>
</div>
</div>
<div class="sectiontwo col-md-12">
<table id="example">
<thead>
<tr>
<th>name</th>
<th>stargazerscount</th>
<th>forkscount</th>
<th>description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="testmodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="modalbtn btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Javascript
$(document).ready( function () {
var tables=$('#example').DataTable( {
"ajax": {
"type" : "POST",
"url": "http://localhost/example/json/members.json",
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : json[i].stargazerscount,
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
$('.overlay').hide();
$(".loader").hide();
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
/*onclick filter*/
$(".outerblock").click(function(e){
$("#testmodal").modal('show');
var item=$(e.target).closest('span').text();
$( ".modalbtn" ).one( "click", function(event) {
$(this).off(event);
alert(item)
var tables=$('#example').DataTable( {
"destroy":true,
"ajax": {
"type" : "POST",
"url": "http://localhost/example/json/members.json?id="+item,
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : json[i].stargazerscount,
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
$('.overlay').hide();
$(".loader").hide();
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
});
});
$("#example").delegate("tbody tr td:first-child", "click", function(e){
var item=$(e.target).text();
//alert(item);
$("#testmodal").modal('show');
$( ".modalbtn" ).one( "click", function(event) {
$(this).off(event);
alert(item);
var tables=$('#example').DataTable( {
"destroy":true,
"ajax": {
"type" : "POST",
"url": "http://localhost/example/json/members.json?id="+item,
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : json[i].stargazerscount,
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
$('.overlay').hide();
$(".loader").hide();
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
});
});
});
json
[{
"name": "mango",
"stargazerscount": 526,
"forkscount": "critical",
"description": "fruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
}
]