I am learning windows 8/HTML/JavaScript app creation.
I am trying to create a WinJS.UI.ListView object as described in the MSDN site.
Now I have three listview elements and I want them to be placed on a single row.
I tried used css float:left property to display them in one line.
But the problem is I cant get them in a single line.
This is my screenshot of the output
HTML:
<section aria-label="Main content" role="main">
<div id="iconTextApplicationsTemplate" data-win-control="WinJS.Binding.Template">
<div class="iconTextApplications" >
<img class="iconTextApplicationsImage" src="#" data-win-bind="alt: title; src: picture" />
<div class="iconTextApplicationsTitle" data-win-bind="innerText: title"></div>
</div>
</div>
<div id="iconTextApplications" class="win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource : Icons.itemList.dataSource,
itemTemplate: select('#iconTextApplicationsTemplate'),
layout: { type:WinJS.UI.CellSpanningLayout } }" >
CSS
.win-container{
margin:auto;
}
.win-surface {
width:100%;
margin: 0 auto;
}
.win-viewport {
width:100%;
margin: 0 auto;
background-color:rgb(94, 82, 68);
}
#iconTextApplicationsTemplate {
float:left;
width:100%;
height:100%;
}
JavaScript
var dataArray = [
{ title: "One", picture: "images/jokes.png" },
{title : "Two" , picture : "images/quotes.png" },
{ title: "Three", picture: "images/trivia.png" }
];
var dataList = new WinJS.Binding.List(dataArray);
var publicMembers = {
itemList: dataList
};
WinJS.Namespace.define("Icons",publicMembers);
Am I approaching it in the wrong way?
or Should I go for other techniques?
In WinJS you'll need to define the height as the ListView will automagically wrap if the height is either set to auto or 100%.
Related
I start to working with gridstack.js and i want to build layout dynamically from jquery.
But for this i want to provide some layout for boxes, like this:
So i do this, but problem is how i can build, this layout for boxes from script, because now i just add this to html.
var items = [
{ w: 3,content: 'my first widget' }, // will default to location (0,0) and 1x1
{ w: 3, content: 'another longer widget!' } // will be placed next at (1,0) and 2x1
];
var grid = GridStack.init();
grid.load(items);
.stantion-box {
display: flex;
}
.stantion-text {
justify-content: right;
}
.image-box {
width: 100%;
height: 100%;
}
.grid-stack {
background: lightgoldenrodyellow;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #18bc9c;
}
<link href="https://cdn.jsdelivr.net/npm/gridstack#4.3.1/dist/gridstack.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/gridstack#4.3.1/dist/gridstack-h5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><a class="btn btn-default" onClick="addNewWidget()" href="#">Add Widget</a></div>
<br />
<div class="container-fluid">
<div class="grid-stack">
<div class="text-center card text-white grid-stack-item newWidget ui-draggable" gs-x="0" gs-y="2" gs-w="3" gs-h="1">
<div class="card-body grid-stack-item-content ui-draggable-handle stantion-box">
<div class="stantion-icon">
<img src="https://www.ccifr.ru/wp-content/themes/ccifr/img/no-image.png" class="image-box"/>
</div>
<div class="stantion-text">
<div class="stantion-title">
<span>Drag me into the dashboard!</span>
</div>
<div class="stantion-descr">
<span>some descr</span>
</div>
</div>
</div>
</div>
</div>
</div>
So i want to build first box on the layout use js, to dynamically boxes build from here
var items = [
{ w: 3,content: 'my first widget' }, // will default to location (0,0) and 1x1
{ w: 3, content: 'another longer widget!' } // will be placed next at (1,0) and 2x1
];
How i can defind standart layout for boxes?
I am using the print js library to export tables in my application.
I need to put a header when exporting each page. Now when I use the json type as follows
let someJSONdata = [{
name: 'name',
email: "fda#daa.com",
phone: "46228156"
}];
let url = 'urlstring';
let rawHTML = `
<div id="header">
<img src="${url}" alt="">
<div class="parraf">
<h3 style="margin:0px"> title </h3>
<h5 style="margin:0px"> subtitle </h5>
<h6 style="margin:0px"> description </h6>
</div>
</div> <br>`;
printJS({
printable: someJSONdata,
type: 'json',
properties: ['name', 'email', 'phone'],
header: rawHTML,
style: '#header { display: flex; } #header img { max-width: 120px;} .parraf { width: 100%; padding: 0px; text-align: center; max-height: 80px }'
});
** This works well. The thing is that for my situation I am exporting directly to html so the code would look like this: **
let url = 'pathhere';
let rawHTML = `
<div id="div_toexport_from_html">
<img src="${url}" alt="">
<div class="textos">
<h3 style="margin:0px"> INSTITUTO TECNOLOGICO DE SONORA </h3>
<h5 style="margin:0px"> ADMINISTRACION DE PERSONAL </h5>
<h6 style="margin:0px"> Reporte de permisos </h6>
</div>
</div> <br>`;
printJS({
printable: 'div_toexport_from_html',
type: 'html',
header: rawHTML,
style: '#div_toexport_from_html { display: flex; } #div_toexport_from_html img { max-width: 120px;} .textos { width: 100%; padding: 0px; text-align: center; max-height: 80px; color: #0b6db5; } ',
targetStyles: ['*'],
maxWidth: setMaxWidth,
ignoreElements: viewtoIgnore
});
the bad thing is that it does not correctly rander the html but takes it as a normal text string.
Could it be possible or in what way can it be operated this way?
In summary
The route in this case I put it as a reference that the real url would be placed there. The issue is that I don't know if the printjs library in the options to export allows the following:
var printTypes = ['pdf', 'html', 'image', 'json', 'raw-html'];
When using the
type = 'json'
correctly rander the header that is passed through a raw-html string. However, when using the
type = 'html'
which is my case, it does not correctly rander the specified raw-html string since it takes it as if it were a normal text.
Maybe that way the library works. Who knows?
I am using bootstrap 4 and it is great but Is there any way I can add certain columns another class like resizable and maybe add min-width or max-width and they will be resizable within these limits. That would be so great.
I’m not referring to any existing library specifically. I am just looking for a solution to this problem.
An example code would be:
<div class="row">
<div class="col" resizable style="max-width:500px;"></div>
<div class="col" resizable></div>
<div class="col" style="min-width:100px;"></div>
<div class="col"></div>
</div>
Thank you very much
https://split.js.org/
You can use split js you'd give your elements an id and set default sizes, because you're using bootstrap you already have a dependency on Jquery so that shouldn't be an issue.
Github link is: https://github.com/nathancahill/split
const GUTTER_SIZE = 30;
const gutterStyle = dimension => ({
'flex-basis': `${GUTTER_SIZE}px`,
});
const elementStyle = (dimension, size) => ({
'flex-basis': `calc(${size}% - ${GUTTER_SIZE}px)`,
})
Split(['#one', '#two'], {
sizes: [500, 100],
minSize: 200,
elementStyle,
gutterStyle
});
div {
border: 2px solid black;
background: #ccc;
height: 170px;
}
.flex {
display: flex;
flex-direction: row;
}
<section class="flex">
<div id="one"></div>
<div id="two"></div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.3.5/split.min.js">
</script>
Split.js just worked perfect for me, If you are using flex (bootstrap 4) you also must add elementstyle and gutterstyle attributes.
This is how I did it
HTML:
<div class="row no-gutters" style="height:300px">
<div id="one" class="col">A</div>
<div id="two" class="col">B</div>
<div id="three" class="col">C</div>
</div>
CSS:
.split {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;overflow-y: auto;overflow-x: hidden;}
.gutter {background-color: transparent;background-repeat: no-repeat;background-position: 50%;}
.gutter.gutter-horizontal {cursor: col-resize;background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); }
.gutter.gutter-vertical {cursor: row-resize;background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII='); }
.split.split-horizontal, .gutter.gutter-horizontal { height: 100%;float: left;}
JS Library :
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.3.5/split.min.js"></script>
Code:
var splitobj = Split(["#one","#two","#three"], {
elementStyle: function (dimension, size, gutterSize) {
$(window).trigger('resize'); // Optional
return {'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'}
},
gutterStyle: function (dimension, gutterSize) { return {'flex-basis': gutterSize + 'px'} },
sizes: [20,60,20],
minSize: 150,
gutterSize: 6,
cursor: 'col-resize'
});
How to show small parts of previous and next image in slideshow in AngularJS? The parts of previous and next images should be displayed on desktop and tabet screens, but not on mobile
This is what I already have: http://codepen.io/juliezzz/pen/qZezzx
<div ng-app="app">
<div ng-controller="CarouselDemoCtrl" id="slides_control">
<div>
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}">
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</slide>
</carousel>
</div>
CSS:
#slides_control > div{
height: 200px;
}
img{
margin:auto;
width: 800px;
}
#slides_control {
width: 100%;
}
JavaScript
angular.module('app', ['ui.bootstrap']);
function CarouselDemoCtrl($scope){
$scope.myInterval = 3000;
$scope.slides = [
{
image: 'http://lorempixel.com/400/200/'
},
{
image: 'http://lorempixel.com/400/200/food'
},
{
image: 'http://lorempixel.com/400/200/sports'
},
{
image: 'http://lorempixel.com/400/200/people'
}
];
}
Take a look at https://github.com/angular-ui/bootstrap/blob/master/template/carousel/carousel.html
You can modify the template of a carousel by using the templateUrl directive.
<carousel interval="myInterval" template-url="path-to-url">
I am developping a metro style application for Windows 8 using HTML5/CSS/JS
I'm trying to display items with different size in a grouped List View. (like all metro style apps do...) I found on the internet that I need to put a GridLayout to my list View and implement the groupInfo. It succeeds in modifying the first item (the picture inside the first item is bigger than the other items), but then all the items have the size of the first item. I would like something like this instead :
Here is what I have done :
updateLayout: function (element, viewState, lastViewState) {
//I get my listView winControl defined in HTML
var listView = element.querySelector(".blocksList").winControl;
var globalList = new WinJS.Binding.List(globalArray);
var groupDataSource = globalList.createGrouped(this.groupKeySelector,
this.groupDataSelector, this.groupCompare);
// I set the options of my listView (the source for the items and the groups + the grid Layout )
ui.setOptions(listView, {
itemDataSource: groupDataSource.dataSource,
groupDataSource: groupDataSource.groups.dataSource,
layout: new ui.GridLayout({
groupHeaderPosition: "top",
groupInfo: function () {
return {
multiSize: true,
slotWidth: Math.round(480),
slotHeight: Math.round(680)
};
}
}),
itemTemplate: this.itemRenderer,
});
},
// je définis le template pour mes items
itemRenderer: function (itemPromise) {
return itemPromise.then(function (currentItem, recycled) {
var template = document.querySelector(".itemTemplate").winControl.renderItem(itemPromise, recycled);
template.renderComplete = template.renderComplete.then(function (elem) {
//if it is the first item I put it widder
if (currentItem.data.index == 0) {
// elem.querySelector(".item-container").style.width = (480) + "px";
elem.style.width = (2*480) + "px";
}
});
return template.element;
})
},
the html part is :
<section aria-label="Main content" role="main">
<div class="blocksList" aria-label="List of blocks" data-win-control="WinJS.UI.ListView"
data-win-options="{itemTemplate:select('.itemTemplate'), groupHeaderTemplate:select('.headerTemplate')
, selectionMode:'none', swipeBehavior:'none', tapBehavior:'invoke'}">
</div>
</section>
<!--Templates-->
<div class="headerTemplate" data-win-control="WinJS.Binding.Template">
<div class="header-title" data-win-bind="innerText: categorieName"/>
</div>
<div class="itemTemplate" data-win-control="WinJS.Binding.Template">
<div class="item-container" >
<div class="item-image-container">
<img class="item-image" data-win-bind="src: urlImage" src="#" />
</div>
<div class="item-overlay">
<h4 class="item-title" data-win-bind="textContent: title"></h4>
</div>
</div>
</div>
et le css
.newHomePage p {
margin-left: 120px;
}
.newHomePage .blocksList {
-ms-grid-row: 2;
}
.newHomePage .blocksList .win-horizontal.win-viewport .win-surface {
margin-left: 120px;
margin-bottom: 60px;
}
.newHomePage .blocksList .item-container {
height: 340px;
width: 240px;
color: white;
background-color: red;
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr;
display: -ms-grid;
}
.newHomePage .blocksList .win-item {
/*-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr 30px;
display: -ms-grid;*/
height: 130px;
width: 240px;
background: white;
outline: rgba(0, 0, 0, 0.8) solid 2px;
}
Thank you for your help.
In Release Preview (and also RTM), the property names in the groupInfo function changed:
multiSize -> enableCellSpanning
slotWidth -> cellWidth
slotHeight -> cellHeight
Try that and see if you get better results. If you don't announce cell spanning in this way, then the GridLayout takes the first item's size as that for all the items.
Chapter 5 of my ebook from Microsoft Press (RTM preview coming soon) will cover all the details of this.
.Kraig