I am trying to scale a <div> with child elements by binding to a slider value using Knockout. Everything works except the actual transform:
<div id="scaleTest" data-bind="style:{msTransform: 'scale(' + scaleValue + ')'}">
<div data-bind="text: scaleValue">
</div>
The text inside the <div> changes as the ko.observable scaleValue tracks the slider value, but the transform does not scale the <div>.
Just using:
data-bind="style:{msTransform: 'scale(' + 2 + ')'}"
works fine.
Any ideas?
Try to add brackets to scaleValue:
<div id="scaleTest" data-bind="style:{msTransform: 'scale(' + scaleValue() + ')'}">
Related
Given conditionally rendered div with drop-down menu. In order to calculate its position (to open it to up or down) I need to get its height and width.
Of course element doesn't get correct dimensions before the transition is done.
So question is - how do I turn off transition programmatically? Or how do I get future position of element without showing it?
{#if isOpened}
<div
bind:this={thisMenu}
use:clickOutside
on:click_outside={closeHandler}
class="dropdown absolute left-100p text-gray-600 z-10 w-full animated
rounded-lg"
style={finalStyle}
{isInit ? null : transition:slide }>
<slot name="list" />
</div>
{/if}
slide-transition uses getComputedStyle, so maybe that’s what you need. The following is copied from slide function in svelte’s repository (src/runtime/transition/index.ts). Slide-function sets those values from zero to initial value and back.
const style = getComputedStyle(node);
const opacity = +style.opacity;
const height = parseFloat(style.height);
const padding_top = parseFloat(style.paddingTop);
const padding_bottom = parseFloat(style.paddingBottom);
const margin_top = parseFloat(style.marginTop);
const margin_bottom = parseFloat(style.marginBottom);
const border_top_width = parseFloat(style.borderTopWidth);
const border_bottom_width = parseFloat(style.borderBottomWidth);
EDIT:
#bobfanger explained in comments how to make a custom mySlide-function and within that function there are those initial size values available. Here is a working example:
<script>
import {slide} from "svelte/transition"
let show=false
let d
function mySlide(el) {
let s=window.getComputedStyle(d)
console.log("mySlide",s.height)
return slide(el, {duration:2000})
}
</script>
<h1 on:click={()=>show=show?false:true}>Click me</h1>
{#if show}
<div bind:this={d} transition:mySlide
style="background-color:yellow;padding:10px;border:10px solid;">
<p>test</p>
</div>
{/if}
This is much simpler than to use onMount and visibility hacks.
I have a button in my Rails application. When it is clicked, around 5 stored procedures run (sequentially) in the background. It takes around 60 seconds for all of them to complete.
Until then, I would like to display some kind of a progress bar (or a spinner that shows percentage of progress) in the UI so that the user does not get a feeling that the application just hangs.
So, if 1 out of 5 stored procedures are complete, then we could should show the progress as 20%; if 2 stored procedures are complete, then show the progress as 40% and so on.
What is the best way to do this?
(Ajax spinners don't seem to have a provision to display % progress)
you can use bootstrap progress bar and update the values from js or jquery. Here are the examples.
Js :
HTML :
var i = 0;
fill_bar();
function fill_bar(){
setInterval(function() {
var art = i;
doSomethingWith(art)
if(i >= 5) {return false;}
}, 5000);
}
valuer = 0;
function doSomethingWith(art){
valuer = valuer + 20;
$('.progress-bar').css('width', valuer+'%').attr('aria-valuenow', valuer);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
You can call the method
fill_bar()
from controller or after clicking the button.
My control group (jquery mobile 1.4) renders perfectly when dynamically creating the radio group initially, but when I add another radio to it, the buttons are styled, but separated. When I reload the app, they are together again.
function showPlaces() {
$('#radio-group').empty();
for(var i = 0; i < connections.length; i++) {
$('#radio-group').append('<label><input type="radio" name="places" id="' + i + '" />' + place + '</label>');
}
$('input[type=radio]').checkboxradio().trigger('create');
$('#radio-group').controlgroup().trigger('create');
}
// The function is called when app starts, and again after I add another place
Some other things I've tried:
$("#radio-group").controlgroup("refresh");
$('#radio-group').controlgroup('refresh');
$("[data-role=controlgroup]").controlgroup("refresh");
$('input[type=radio]').checkboxradio('refresh');
Also tried .controlgroup('container'), before the .append, but get "cannot call methods on controlgroup prior to initialization".
Here's the html:
<form>
<fieldset data-role="controlgroup" id="radio-group">
<!-- Dynamically injected radio buttons go here -->
</fieldset>
</form>
You should .append() items into .controlgroup("container") inside for loop, and then enhance radio buttons .checkboxradio().
for(var i = 0; i < connections.length; i++) {
$('#radio-group')
.controlgroup("container")
.append('<label><input type="radio" name="places" id="+i+" />Place</label>');
}
$("#radio-group")
.enhanceWithin()
.controlgroup("refresh");
You dont even need to use .checkboxradio(), instead use .enhanceWithin() on parent container.
Demo
I am using Script.aculo.us Slider.js to display dual sliders. It working perfectly.
what I want to do is to change the color to track only in between these two slider.
For example if 1st Slider is on value 5 and 2nd is on value 8. I want that the track fron 5-8 is green and the rest is gray. to simulate king of selected range.
Is it possible?
I have figured it out, it is possible by using 2 options properties
startSpan and endSpan.
Maybe it is useful for someone else I am pasting here sample HTML snippt and javascript
<div id="slider-week-track">
<div id="span1" style="float:left;background-color: #B7C0CD; height: 11px;"></div>
<div class="slider-week slider-min" id="slider-week-min-handle"></div>
<div class="slider-week slider-max" id="slider-week-max-handle"></div>
<div id="span2" style="float:right;background-color: #B7C0CD; height: 11px;"></div>
</div>
and javascript
new Control.Slider(this.options.handles, 'slider-week-track', {
range:$R(0,10, false),
sliderValue: [1,5],
values: [0,1,2,3,4,5,6,7,8,9,10],
restricted: true,
startSpan: 'span1',
endSpan: 'span2',
onChange: function(val) {
//your code here
}
});
I have implemented a WebApp using SplitView - http://asyraf9.github.com/jquery-mobile/ - (and that seems to use the ScrollView component) together with jQuery Mobile. Everything works fine ...
Within the panel I have got a list of elements that should dynamically add elements when scrolling reaches the end of the list. On the iPhone I do not use SplitView but iScroll - http://cubiq.org/iscroll - and the following code to achieve this (and it is working).
HTML:
<div data-role="panel" data-id="menu" data-hash="crumbs" style="z-index: 10000;" id="Panel">
<div data-role="page" id="Root" class="Login" onscroll="console.log('onscroll');">
<div data-role="content" data-theme="d" onscroll="console.log('onscroll');">
<div class="sub">
<ul data-role="listview" data-theme="d" data-dividertheme="a" class="picListview" id="PortfolioList">
<!-- Content added dynamically -->
</ul>
</div>
</div>
</div>
</div>
Javascript:
var defaultIScrollOptions = {
useTransition: true,
onScrollStart: function() {
this.refresh();
},
onScrollEnd: function() {
if (this.elem && this.id) {
possiblyDisplayNextDocuments(this.y, this.elem, this.id);
}
}
};
iScrolls.push(new iScroll(document.getElementById("searchResults").parentNode, defaultIScrollOptions));
But when using SplitView I do not really know which event and which element to bind the listener on or how to get the scroll position. I already tried several combinations, but did not achieve good results. The best one was the following:
$("#PortfolioList").scrollstop(function(event) {
console.log("scrollstop: "+$("#PortfolioList").scrollTop());
});
My question is: Am I using the right event listener (since it already fires althgough the scrolling animation is still in use) and how do I get the scroll position?
dont use the scrollview plugin. its buggy. Use iscroll for both iOS phonegap apps as well as android. It works fine on both.
For detecting the scroll and loading new elements into the list, listen to the the 'onScrollMove' event of iscroll.
In the iscroll-wrapper.js add this-
options.onScrollMove = function(){
that.triggerHandler('onScrollMove', [this]);
};
then in your code attach a event handler to the onScrollMove event and handle adding new rows in that. onScrollMove will fire whenever you scroll.
In the handler you can find how many rows are there in your list and that which row is on the top of your view port using something like
iscrollScrollEventHandler:function(event){
var contentDiv= $('div:jqmData(id="main") .ui-page-active div[data-role*="content"] ul li' );
var totalItemsonList = contentDiv.length;
var cont =$('div:jqmData(id="main") .ui-page-active div:jqmData(role="content")');
var itemToScrollOn = totalItemsonList - x; // x is the item no. from the top u want to scroll on. u need to keep updating i guess
var docViewBottom = $(cont).scrollTop() + $(cont).height();
var itemOffset = $(contentDiv[itemToScrollOn]).offset();
if(itemOffset){
var elemTop = itemOffset.top;
if (elemTop <= docViewBottom){
event.data.callback();
}
}
}
and in the callback add the code to add new rows. hope that helps.