I have defined a list and template as below. I am defining list item data source from html. Is there any way to bind the item data source dynamically i.e.from javscript. Its an angular-winjs application.
<win-list-view selection-mode="'none'"
id="liqAssetListFlyout"
class="verticalList win-selectionstylefilled win-listview"
style="height: auto;"
item-data-source="LiqFlyout"
itemtemplate="select('.liqListTemplate')">
<win-item-template>
<div class="liqListTemplate" data-win-control="WinJS.Binding.Template">
<div style="float: left; width: 36%; margin-top: 1.5%;">
<label id={{item.data.index}} class="T20" style="float: left;">{{item.data.assetName}}</label>
</div>
<div style="float: left; width: 33%; margin-top: 1.5%;">
<label class="T20 " style="float: left; ">{{item.data.Internal}}</label>
</div>
<div style="float: left;margin-top: 1.5%;">
<label class="T20 " style="float: left; ">{{item.data.External}}</label>
</div>
</div>
<hr ng-if="showHideLine(item.data.assetName)" style="float:left; width:100%;margin-top:2%" />
</win-item-template>
<win-list-layout></win-list-layout>
</win-list-view>
var items[..data..];
var bindList = new WinJS.Binding.List(items);
var listView = document.getElementById("liqAssetListFlyout").winControl;
listView.itemDataSource = bindList.dataSource;
that would be the way from javascript
Related
do you know how to keep selected a div in a different column, right every time I click on a div it remove the previous selected. I would like to keep the user choice selected on each different column : [https://codepen.io/dodgpine/pen/bGaqWVG][1]
const subTitleBuild = document.querySelectorAll(".sub-title-build");
const subTitleOs = document.querySelectorAll(".sub-title-os");
const subTitlePackage = document.querySelectorAll(".sub-title-package");
const subTitleLanguage = document.querySelectorAll(".sub-title-language");
const subTitleCuda = document.querySelectorAll(".sub-title-cuda");
const selections = [
subTitleBuild,
subTitleOs,
subTitlePackage,
subTitleLanguage,
subTitleCuda,
];
selections.forEach((selection) => {
selection.forEach((title) => {
title.addEventListener("click", () => {
removeSelectedClasses();
title.classList.add("selected");
});
});
});
function removeSelectedClasses() {
selections.forEach((selection) => {
selection.forEach((title) => {
console.log(title);
title.classList.remove("selected");
});
});
}
I've made two changes to your javascript, which I think achieve what you want (if I have understood correctly, you want a click to apply the class selected without affecting previously selected options, and, presumably, be able to remove earlier selections with another click on them).
Firstly, I commented out (removed) title.classList.remove("selected"); from your removeSelectedClasses() function, as this is what was clearing earlier selections.
Secondly, I modified, title.classList.add("selected"); in your event listeners to instead toggle the selected class on and off using: title.classList.toggle("selected");. This enables a single click to apply the selected class, while a second click on the same box removes it.
The snippet below works to show the effect.
I note you probably need column selections to be limited to a single choice, so you will have to fiddle with how the changes I suggested are applied. But the principle should help you do that.
const subTitleBuild = document.querySelectorAll(".sub-title-build");
const subTitleOs = document.querySelectorAll(".sub-title-os");
const subTitlePackage = document.querySelectorAll(".sub-title-package");
const subTitleLanguage = document.querySelectorAll(".sub-title-language");
const subTitleCuda = document.querySelectorAll(".sub-title-cuda");
const selections = [
subTitleBuild,
subTitleOs,
subTitlePackage,
subTitleLanguage,
subTitleCuda,
];
selections.forEach((selection) => {
selection.forEach((title) => {
title.addEventListener("click", () => {
removeSelectedClasses();
title.classList.toggle("selected");
});
});
});
function removeSelectedClasses() {
selections.forEach((selection) => {
selection.forEach((title) => {
console.log(title);
//title.classList.remove("selected");
});
});
}
.container-master {
width: 1200px;
margin: auto;
}
.container {
display: flex;
justify-content: space-between;
}
.column {
width: 170px;
}
.container-btn {
padding: 20px;
border: 2px solid black;
text-align: center;
margin-top: 10px;
}
.title {
margin-bottom: 30px;
background-color: #3e4652;
color: #ffffff;
}
.sub-title,
.sub-title-build {
cursor: pointer;
}
.row-cmd {
width: 1200px;
margin: 50px auto;
}
.container-btn-cmd {
padding: 20px;
border: 2px solid black;
text-align: center;
margin-top: 10px;
}
.command-container {
padding: 20px;
border: 2px solid black;
text-align: center;
margin-top: 10px;
}
.selected {
background-color: orangered;
color: #ffffff;
}
<div class="container-master">
<div class="container">
<div class="column ptbuild">
<div class="container-btn title">
<div class="btn">PyTorch Build</div>
</div>
<div class="container-btn sub-title-build" id="stable">
<div class="btn">Stable (1.11.0)</div>
</div>
<div class="container-btn sub-title-build" id="preview">
<div class="btn">Preview (Nightly)</div>
</div>
<div class="container-btn sub-title-build" id="lts">
<div class="btn">LTS (1.8.2)</div>
</div>
</div>
<div class="column os">
<div class="container-btn title">
<div class="btn">Your OS</div>
</div>
<div class="container-btn sub-title-os" id="linux">
<div class="btn">Linux</div>
</div>
<div class="container-btn sub-title-os" id="macos">
<div class="btn">Mac</div>
</div>
<div class="container-btn sub-title-os" id="windows">
<div class="btn">Windows</div>
</div>
</div>
<div class="column package">
<div class="container-btn title">
<div class="btn">Package</div>
</div>
<div class="container-btn sub-title-package" id="conda">
<div class="btn">Conda</div>
</div>
<div class="container-btn sub-title-package" id="pip">
<div class="btn">Pip</div>
</div>
<div class="container-btn sub-title-package" id="libtorch">
<div class="btn">LibTorch</div>
</div>
<div class="container-btn sub-title-package" id="source">
<div class="btn">Source</div>
</div>
</div>
<div class="column language">
<div class="container-btn title">
<div class="btn">Language</div>
</div>
<div class="container-btn sub-title-language" id="python">
<div class="btn">Python</div>
</div>
<div class="container-btn sub-title-language" id="cplusplus">
<div class="btn">C++ / Java</div>
</div>
</div>
<div class="column cuda">
<div class="container-btn title">
<div class="btn">Compute Platform</div>
</div>
<div
class="container-btn sub-title-cuda"
id="cuda10.2"
style="text-decoration: line-through"
>
<div class="btn">CUDA 10.2</div>
</div>
<div
class="container-btn sub-title-cuda"
id="cuda11.x"
style="text-decoration: line-through"
>
<div class="btn">CUDA 11.3</div>
</div>
<div
class="container-btn sub-title-cuda"
id="rocm4.x"
style="text-decoration: line-through"
>
<div class="btn">ROCM 4.2 (beta)</div>
</div>
<div class="container-btn sub-title-cuda" id="accnone">
<div class="btn">CPU</div>
</div>
</div>
</div>
<div class="row-cmd">
<div class="container-btn-cmd title">
<div class="option-text">Run this Command:</div>
</div>
<div class="command-container">
<div class="cmd-text" id="command">
<pre># MacOS Binaries dont support CUDA, install from source if CUDA is needed<br>conda install pytorch torchvision torchaudio -c pytorch</pre>
</div>
</div>
</div>
</div>
I'm trying to display random number in a specific div or grid do i need to store number first i would like some advice on how i can achieve this. for example if random number is 4 i would like that value in div 4, then if my next random number is 10 place it in div 10
browser example
function lottoNumbers() {
var lottoNums = [];
for (var i = 0; i < 1; i++) {
var temp = Math.floor(Math.random() * 12);
if (lottoNums.indexOf(temp) == -1) {
`enter code here`
lottoNums.push(temp);
document.getElementById('square' + i).innerHTML = lottoNums[i];
} else {
i--;
}
}
}
<body bgcolor="lightblue">
<h1>
<center>GENERATE LOTTO NUMBERS</center>
</h1>
<div class="divContainer">
<div id=square0 class=num></div>
</div>
</br>
<div class="hej">
<div id=square1 class=nums></div>
<div id=square2 class=nums></div>
<div id=square3 class=nums></div>
<div id=square4 class=nums></div>
</div>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<div class=hei>
<div id=square5 class=nums></div>
<div id=square6 class=nums></div>
<div id=square7 class=nums></div>
<div id=square8 class=nums></div>
</div>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<div class="hek">
<div id=square9 class=nums></div>
<div id=square10 class=nums></div>
<div id=square11 class=nums></div>
<div id=square12 class=nums></div>
</div>
<center>
<input id="btn" class="knapp" type="button" value="lotto" onClick="lottoNumbers();">
</cennter>
</body>
</html>
Your number wasn't being placed on the right spot as You generated the temp variable which is the random number, but have addressed it to variable i which is the iterator of the for loop. This way, if You would generate 3 random numbers, they would be placed in the divs square0, square1, square2 when they actually should be placed in the divs 'square'+temp that correspond to the actual generated number. Please see my example:
document.getElementById ("btn").addEventListener ("click", lottoNumbers, false);
function lottoNumbers() {
var lottoNums = [];
for (var i = 0; i < 1; i++) {
var temp = Math.floor(Math.random() * 12) + 1;
lottoNums.push(temp);
document.getElementById('square' + temp).innerHTML = lottoNums[i];
document.getElementById('square0').innerHTML = lottoNums[i];
}
}
.num {
border: 1px solid;
width: 20px;
height: 20px;
margin: 2px;
}
.nums {
border: 1px solid;
width: 20px;
height: 20px;
margin: 2px;
float: left;
}
body {
background-color: lightblue;
}
.hej{
float: left;
width: 120px;
height: 30px;
clear: both;
}
.hei{
float: left;
width: 120px;
height: 30px;
clear: both;
}
.hek{
float: left;
width: 120px;
height: 30px;
clear: both;
}
.divContainer{
float: right;
width: 20px;
height: 20px;
font-size: 15px;
}
<h1>
<center>GENERATE LOTTO NUMBERS</center>
</h1>
<div class="divContainer">
<div id="square0" class="num"></div>
</div>
<div class="hej">
<div id="square1" class="nums"></div>
<div id="square2" class="nums"></div>
<div id="square3" class="nums"></div>
<div id="square4" class="nums"></div>
</div>
<div class="hei">
<div id="square5" class="nums"></div>
<div id="square6" class="nums"></div>
<div id="square7" class="nums"></div>
<div id="square8" class="nums"></div>
</div>
<div class="hek">
<div id="square9" class="nums"></div>
<div id="square10" class="nums"></div>
<div id="square11" class="nums"></div>
<div id="square12" class="nums"></div>
</div>
<input id="btn" class="knapp" type="button" value="lotto"">
You can just change
document.getElementById('square' + i).innerHTML = lottoNums[i];
to
document.getElementById('square' + lottoNums[i]).innerHTML = lottoNums[i];
to put each random number in the div matching that number.
I am trying to use the following function to change whether a div is shown or not, by clicking an image.
function showTxt(elementClass, nr) {
"use strict";
if (document.getElementByClassName(elementClass)[nr].style.display === "none") {
document.getElementByClassName(elementClass)[nr].style.display = "block";
} else {
document.getElementByClassName(elementClass)[nr].style.display = "none";
}
}
.employees{
width: 80%;
margin-left: 10%;
}
.employee{
width: 20%;
display: inline-block;
margin-left: 5%;
vertical-align: top;
margin-right: 5%;
}
.employee_img img{
width: 100%;
}
.employee_txt{
display: none;
}
<div class="employees">
<div class="employee">
<div class="employee_img">
<img src="resources/katerina.jpg" alt="katerina">
</div>
<div class="employee_txt" id="katerina"></div>
</div>
<div class="employee">
<div class="employee_img">
<img src="resources/sindre.jpg" alt="sindre">
</div>
<div class="employee_txt" id="sindre"></div>
</div>
<div class="employee">
<div class="employee_img" onclick="showTxt(employee_txt, 2)">
<img src="resources/daniel.jpg" alt="daniel">
</div>
<div class="employee_txt" id="daniel">
<p>this is me</p>
</div>
</div>
</div>
Stack's snippet tool shows the message: "Uncaught ReferenceError: employee_txt is not defined". And I have noe idea why.
Any help is appreciated.
A couple of things are wrong, it's getElementsByClassName, Elements being plural, and you need quotes around the string you're passing in your function call.
function showTxt(elementClass, nr) {
"use strict";
if (document.getElementsByClassName(elementClass)[nr].style.display === "none") {
document.getElementsByClassName(elementClass)[nr].style.display = "block";
} else {
document.getElementsByClassName(elementClass)[nr].style.display = "none";
}
}
.employees{
width: 80%;
margin-left: 10%;
}
.employee{
width: 20%;
display: inline-block;
margin-left: 5%;
vertical-align: top;
margin-right: 5%;
}
.employee_img img{
width: 100%;
}
.employee_txt{
display: none;
}
<div class="employees">
<div class="employee">
<div class="employee_img">
<img src="resources/katerina.jpg" alt="katerina">
</div>
<div class="employee_txt" id="katerina"></div>
</div>
<div class="employee">
<div class="employee_img">
<img src="resources/sindre.jpg" alt="sindre">
</div>
<div class="employee_txt" id="sindre"></div>
</div>
<div class="employee">
<div class="employee_img" onclick="showTxt('employee_txt', 2)">
<img src="resources/daniel.jpg" alt="daniel">
</div>
<div class="employee_txt" id="daniel" style="display:none;">
<p>this is me</p>
</div>
</div>
</div>
Your code
onclick="showTxt(employee_txt, 2)"
It is looking for the variable employee_txt not a string.
onclick="showTxt('employee_txt', 2)"
You have to call it
<div class="employee_img" onclick="showTxt('employee_tx', 2)">
<img src="resources/daniel.jpg" alt="daniel">
</div>
You need to use the function reference of showTxt instead of calling the function and assigning its result to the onClick handler.
To do so, use this:
onClick="showTxt.bind(showTxt, 'employee_txt', 2)"
This will return a new function that already has the 2 parameters bound to it so it can just be called as func().
I would also suggest you to use a variable inside of your showTxt function to store the result of the getElementsByClassName(classname)[index] call.
I have a view like this:
<div ng-show="">
<div style='background-color: #13a4d6; border-color: #0F82A8'>
{{headerdescription}}
<div style='float: right'>{{price}} $</div>
</div>
<div style=' width: 60%; float: left;'>
<div style='padding: 10px;margin-top: 10px;'>{{description}}</div>
<div style='padding: 10px;margin-top: 10px;'>{{softvalues}}</div>
</div>
<div style='float: right; margin-top: 10px;'>
<img src='data:image/png;base64,{{image}}'>
</div>
And i want i my angular code to get this view with the scope values set.
I tried this:
$scope.headerdescription = "YEEES";
$http.get('App_JsQuote/directives/door.html').success(function (html) {
console.log(html);
});
but the problem is that the scope-values are not set and therefor the view becomes as before. How can i set the scope-values and then get the view with all the data that should be there?
I'm not sure but can you try with something like this ?
$scope.headerdescription = "YEEES";
$scope.apply(function() {
$http.get('App_JsQuote/directives/door.html').success(function (html) {
console.log(html);
});
});
You can need to use the ngCloak directive globally in the controller or use the ngBind directive in the element. In the case you need to create media or link uri you need to use the $sce service.
Example:
<div ng-show="">
<div style='background-color: #13a4d6; border-color: #0F82A8'>
<span ng-bind="headerdescription"></span>
<div style='float: right' ng-bind="price + '$'"></div>
</div>
<div style=' width: 60%; float: left;'>
<div style='padding: 10px;margin-top: 10px;' ng-bind="description"></div>
<div style='padding: 10px;margin-top: 10px;' ng-bind="softvalues"></div>
</div>
<div style='float: right; margin-top: 10px;'>
<img ng-src='url'>
</div>
In your JS file you need to use $sce to filter and generate the url var.
Example:
$scope.url = $sce.trustAsResourceUrl('data:image/png;base64,' + $scope.image);
I want to know the Client div position
var p = $('div#Client');
var position = p.position();
$('div#Client').fadeTo('slow',.6);
$('div#Client').append('<div style="position: absolute;top:' + position.top + ';
left:' + position.left + ';width: 100%;height:100%;z-index:2;opacity:0.4;
filter: alpha(opacity = 50)"></div>');
The result is:
Position.left = 0 and Top = 0
so the new Div in the Jquery code is on all the page
what I need is to put the new div on top of the div#Client
HTML code:
<div style="margin-left: 10px; margin-bottom: 10px; padding-bottom: 15px">
<div class="Title">Sales</div>
<div id="Sales" class="Content">
Some infos for Sales person here
</div>
</div>
</div>
<div style="margin-left: 10px; margin-bottom: 10px; padding-bottom: 15px">
<div class="Title">Client</div>
<div id="Client" class="Content">
Some infos for the client here
</div>
</div>
</div>
this is : http://jsfiddle.net/aaNUa/14/
Actually what's I'm trying to do is to block the Div Client but keep the Div Sales activated for editing. with this code all the page is blocked.
Use before() method in Jquery :
$(document).ready(function(){
$("div#Client").before('<div class="Title">Client</div>');
});
fiddle : http://jsfiddle.net/aaNUa/
HTML Code :
<div style="margin-left: 10px; margin-bottom: 10px; padding-bottom: 15px">
<div class="Title">Sales</div>
<div id="Sales" class="Content">
Some infos for Sales person here
</div>
</div>
</div>
<div style="margin-left: 10px; margin-bottom: 10px; padding-bottom: 15px">
<div id="Client" class="Content">
Some infos for the client here
</div>
</div>
</div>
add this to your CSS:
div#client{
position:relative;
}
so that the inner DIV which is absolutely positioned will properly align with the parent div.
Make the content of function append() in one line.