I am expecting that by pressing the square div/button (3rd element on the page) a random number will appear under the element and the color of the element will also change. Unfortunately it seems that I have to press the button on the top of the page in order for this to happen and I can't figure out why?
my index.html
<html>
<head>
<script type="text/javascript" src="shared/jquery.js"></script>
<script type="text/javascript" src="shared/shiny.js"></script>
</head>
<body>
<input id="button" type="submit" name="submit" value="Press me!" class="action-button">
<p><div id="text" class="shiny-text-output" style="width: 150px; height: 25px; border: 1px solid black;"></div>
<p><div id="mydiv" style="width: 50px; height: 50px;"></div>
<pre id="results" class="shiny-text-output"></pre>
</body>
<script type="text/javascript">
// send data to shiny server
document.getElementById ("mydiv").onclick = function() {
var number = Math.random();
Shiny.onInputChange ("mydata", number);
};
// handlers to receive data from server
Shiny.addCustomMessageHandler ("myColorHandler",
function (color) {
document.getElementById ("mydiv").style.backgroundColor = color;
}
);
</script>
</html>
my server.R
shinyServer (function (input, output, session)
{
observe ({
x = input$button;
output$text = renderText ({
if (! is.null (x))
{
if (x %% 2 == 0) { paste (x, ": you are even", sep=""); }
else { paste (x, ": you are odd", sep=""); }
}
})
});
output$results = renderPrint ({
input$mydata;
})
observe ({
input$mydata;
color = rgb (runif (1), runif (1), runif (1));
session$sendCustomMessage (type="myColorHandler", color);
});
})
Change type="submit" to type="button" on your button. Currently your button is acting as a submitButton rather then an actionButton
<html>
<head>
<script type="text/javascript" src="shared/jquery.js"></script>
<script type="text/javascript" src="shared/shiny.js"></script>
</head>
<body>
<input id="button" type="button" name="submit" value="Press me!" class="action-button">
<p><div id="text" class="shiny-text-output" style="width: 150px; height: 25px; border: 1px solid black;"></div>
<p><div id="mydiv" style="width: 50px; height: 50px;"></div>
<pre id="results" class="shiny-text-output"></pre>
</body>
<script type="text/javascript">
// send data to shiny server
document.getElementById ("mydiv").onclick = function() {
var number = Math.random();
Shiny.onInputChange ("mydata", number);
};
// handlers to receive data from server
Shiny.addCustomMessageHandler ("myColorHandler",
function (color) {
document.getElementById ("mydiv").style.backgroundColor = color;
}
);
</script>
</html>
Related
First project with Vue3, trying to determine if a named slot has content supplied on a given page.
In my template I have this:
<div
:class="{ 'py-20': hasTopContent }"
>
<slot name="top-content" />
</div>
In my code I have the following:
setup (_, { slots }) {
const hasTopContent = computed((slots) => {
console.log(slots.topContent);
return slots.topContent && slots.topContent().length;
});
return {
hasTopContent
}
}
The above console.log is returning TypeError: Cannot read properties of undefined (reading 'topContent'). What have I missed? Thanks!
Michal Levý is right
var Main = {
components: {
'my-component': MyComponent,
},
data() {
return {
}
},
methods: {
}
};
const app = Vue.createApp(Main);
app.mount("#app")
<html>
<head>
<style>
.my-component {
background-color: #fafafa;
padding: 5px 20px 20px 20px;
}
</style>
</head>
<body>
<div id="app">
<h3>With top slot</h3>
<my-component class='my-component'>
<template v-slot:top>
<h4>Top Slot</h4>
</template>
</my-component>
<h3>Without top slot</h3>
<my-component class='my-component'>
</my-component>
<hr style='padding: 20px 20px 20px 20px;' />
</div>
<script src="//unpkg.com/vue#next"></script>
<script type="text/x-template" id="my-component">
<div
:class="{ 'py-20': hasTopContent }">
<slot name="top" />
hasTopContent: {{hasTopContent}}
</div>
</script>
<script type="text/javascript">
var MyComponent = {
template: '#my-component',
setup(_, { slots }) {
const hasTopContent = Vue.computed(() => {
return slots.top && slots.top().length > 0;
});
return { hasTopContent }
}
}
</script>
</body>
</html>
I am trying to set non-clickable loading bar and everything looks good but I can still click on the button. You can see the same on plnkr.
https://plnkr.co/edit/4eh6ibG45JnLB6qYktxn?p=preview
I checked that both of the bellow div has attribute "pointer-events: none" but its not working.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css" rel="stylesheet" />
<style>
#loading-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
z-index: 11002;
}
#loading-bar-spinner {
display: block;
position: fixed;
z-index: 11002;
top: 50%;
left: 50%;
margin-left: -15px;
margin-right: -15px;
}
</style>
<div ng-app="LoadingBarExample" ng-controller="ExampleCtrl">
<button ng-click="startLoading()">startLoading</button>
<button ng-click="completeLoading()">completeLoading</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js"></script>
<script>
var LoadingBarExample = angular.module('LoadingBarExample', ['chieffancypants.loadingBar', 'ngAnimate'])
.config(function (cfpLoadingBarProvider) {
//cfpLoadingBarProvider.includeSpinner = false;
//cfpLoadingBarProvider.includeBar = false;
// //cfpLoadingBarProvider.spinnerTemplate = '<div><span class="fa fa-spinner">Loading...</div>';
// //cfpLoadingBarProvider.parentSelector = '#loading-bar-container';
// //cfpLoadingBarProvider.spinnerTemplate = '<div><span class="fa fa-spinner">Custom Loading Message...</div>';
});
LoadingBarExample.controller('ExampleCtrl', function ($scope, $http, $timeout, cfpLoadingBar) {
$scope.startLoading = function () {
cfpLoadingBar.start();
};
$scope.completeLoading = function () {
cfpLoadingBar.complete();
};
});
</script>
</body>
</html>
loading-bar
loading-bar-spinner
You can handle this with angularjs way, just add ng-disabled="loading" to make the button disabled and enabled based on the loading value
<button ng-disabled="loading" ng-click="startLoading()">startLoading</button>
<button ng-disabled="loading" ng-click="completeLoading()">completeLoading</button>
and controller as,
LoadingBarExample.controller('ExampleCtrl', function ($scope, $http, $timeout, cfpLoadingBar) {
$scope.loading = false;
$scope.startLoading = function () {
cfpLoadingBar.start();
$scope.loading =true;
};
$scope.completeLoading = function () {
cfpLoadingBar.complete();
$scope.loading =false;
};
});
DEMO
EDIT
If you want to disable the whole form with a single way, use fieldset instead of div and use ng-disabled
<fieldset ng-disabled="loading" ng-app="LoadingBarExample" ng-controller="ExampleCtrl">
<button ng-click="startLoading()">startLoading</button>
<button ng-click="completeLoading()">completeLoading</button>
</fieldset>
I'm implementing an input combo box of type="number".
I want to adjust the size of the up-arrow button and bottom-arrow button.
I think that these buttons are so small buttons that users may feel an inconvenient click motion.
I've been trying to fix this by Googling, investigating properties and selectors of this, but I couldn't get any methods, and I expect that this is because number box has been recently released tag of HTML5.
How Can I adjust this size? please give me any idea. please.
Regards,
<td>
<input type="number" name="qty" value="1" name="goodsnum" onChange = "qtyChanged();">
</td>
You can interact with arrows by css.
input[type=number] {
height: 30px;
}
input[type=number]:hover::-webkit-inner-spin-button {
width: 14px;
height: 30px;
}
<input type="number" value="0" >
Try this below.
I found it here: http://jqueryui.com/spinner/
From this related question: Increase the size of the down and up arrow on the number input, CSS, HTML
$( function() {
var spinner = $( "#spinner" ).spinner();
$( "#disable" ).on( "click", function() {
if ( spinner.spinner( "option", "disabled" ) ) {
spinner.spinner( "enable" );
} else {
spinner.spinner( "disable" );
}
});
$( "#destroy" ).on( "click", function() {
if ( spinner.spinner( "instance" ) ) {
spinner.spinner( "destroy" );
} else {
spinner.spinner();
}
});
$( "#getvalue" ).on( "click", function() {
alert( spinner.spinner( "value" ) );
});
$( "#setvalue" ).on( "click", function() {
spinner.spinner( "value", 5 );
});
$( "button" ).button();
} );
.ui-button.ui-widget.ui-spinner-button.ui-spinner-up {
width: 40px;
height: 30px;
border: 1px solid black;
}
.ui-button.ui-widget.ui-spinner-button.ui-spinner-down {
width: 40px;
height: 30px;
border: 1px solid black;
}
input {
height: 45px;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Spinner - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="/resources/demos/external/jquery-mousewheel/jquery.mousewheel.js"></script>
</head>
<p>
<label for="spinner">Select a value:</label>
<input id="spinner" name="value">
</p>
How do I reverse the order of records returned by <firebase-collection> as follows:
<firebase-collection id="foo" order-by-child="bar">
?
Can I do it declaratively? Or do I need to call an imperative method like maybe...
this.$.foo = this.$.foo.reverse();
https://elements.polymer-project.org/elements/firebase-element?active=firebase-collection
Note: I'm using <iron-list> and not <template is="dom-repeat">.
Simplest is just to use a <dom-repeat> with an inverse sort I believe.
sort. Specifies a comparison function following the standard Array sort API.
Per https://www.polymer-project.org/1.0/docs/devguide/templates.html#filtering-and-sorting-lists
The best solution is to use <iron-list> then sort that according to this answer.
http://jsbin.com/vizexodoyi/1/edit?html,output
<html>
<head>
<title>My Element</title>
<script data-require="polymer#*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<script data-require="polymer#*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html"></script>
<base href="http://element-party.xyz/" />
<link rel="import" href="all-elements.html" />
</head>
<body>
<dom-module id="my-element">
<template>
<style>
h3 {
margin-bottom: 0px;
}
iron-list {
padding-bottom: 16px;
height: 100%;
}
.item {
#apply(--layout-horizontal);
margin: 16px 16px 0 16px;
padding: 20px;
border-radius: 8px;
background-color: white;
border: 1px solid #ddd;
}
</style>
<firebase-collection location="https://dinosaur-facts.firebaseio.com/dinosaurs" data="{{items}}">
</firebase-collection>
<h3>Controls</h3>
<paper-dropdown-menu label="Sort by">
<paper-menu class="dropdown-content" selected="{{sortVal}}" attr-for-selected="data-sortby">
<paper-item data-sortby="order">Order</paper-item>
<paper-item data-sortby="height">Height</paper-item>
</paper-menu>
</paper-dropdown-menu>
<br>
<paper-toggle-button checked="{{reverse}}">Reverse</paper-toggle-button>
<br /><br />
<br><h3>Monitor Control Values</h3>
<div>Sort by: [[sortVal]]</div>
<div>Reverse: [[reverse]]</div>
<br><h3>Iron-List Output</h3>
<iron-list id="list" items="[[items]]" as="item">
<template>
<div class="item">
Name: [[item.__firebaseKey__]]<br />
Order: [[item.order]]<br />
Height: [[item.height]]
</div>
</template>
</iron-list>
</template>
<script>
(function() {
Polymer({
is: "my-element",
properties: {
items: {
type: Array,
},
sortVal: {
type: String,
value: 'order'
},
sortOrder: {
type: Number,
value: -1, // High to low
computed: '_computeSortOrder(reverse)'
}
},
observers: [
'sortChanged(sortVal, sortOrder)'
],
_computeSortOrder: function(bool) {
return bool ? 1 : -1;
},
sortChanged(val, ord) {
if (! this.items || this.items.length == 0) {
return;
}
var temp = Array.prototype.slice.call(this.items);
temp.sort(this._computeSort(val, ord));
this.items = temp;
//console.log('ord: ' + ord);
//console.log('val: ' + val);
//console.log('items: ' + this.items);
},
_computeSort: function(val, ord) {
return function(a, b) {
if (a[val] === b[val]) {
return 0;
}
return (ord * (a[val] > b[val] ? 1 : -1));
};
}
});
})();
</script>
</dom-module>
<my-element></my-element>
</body>
</html>
This code produces two elements where in slow motion I write the values of the variable of a for loop. The problem is that I thought the two writing operations would happen concurrently and not one after the other, as it currently happens. How can I get the two elements to update concurrently?
my index.html
<html>
<head>
<script type="text/javascript" src="shared/jquery.js"></script>
<script type="text/javascript" src="shared/shiny.js"></script>
<link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
<style>
.shiny-text-output { border: 1px solid green; }
</style>
</head>
<body>
<pre id="results2" class="shiny-text-output"></pre>
<pre id="results4" class="shiny-text-output"></pre>
</body>
<script type="text/javascript">
Shiny.addCustomMessageHandler ("myCallbackHandler",
function (value) {
document.getElementById ("results2").innerHTML = value;
}
);
Shiny.addCustomMessageHandler ("myOtherCallbackHandler",
function (value) {
document.getElementById ("results4").innerHTML = value;
}
);
</script>
</html>
my server.R
shinyServer (function (input, output, session)
{
observe ({
for (i in 1:3)
{
session$sendCustomMessage (type="myCallbackHandler", i);
Sys.sleep (2);
}
});
observe ({
for (i in 1:4)
{
session$sendCustomMessage (type="myOtherCallbackHandler", i);
Sys.sleep (1);
}
});
})