hello someone can help me with this ?
I what to change my process indicator from SAPUI5 to make something like this
enter image description here
the idea is show how much percent are favor about something and how much percent is against
thanks
you can create a custom control like this or added some code to the onAfterRendering event.
ProgressIndicator.extend("ProgressIndicatorEx", {
renderer: {},
onAfterRendering: function() {
if (ProgressIndicator.prototype.onAfterRendering) {
ProgressIndicator.prototype.onAfterRendering.apply(this, arguments);
}
var percentValue = this.getPercentValue();
this.$().find("#" + this.getId() + "-bar").html('<span id="' + this.getId() + '-textLeft" class="sapMPIText sapMPITextRight" style="color: #FFF; margin-right:8px">' + percentValue + '%</span>');
var rightBar = this.$().find("#" + this.getId() + "-remainingBar");
rightBar.html('<span id="' + this.getId() + '-textRight" class="sapMPIText sapMPITextRight" style="color: #FFF">' + (100 - percentValue) + '%</span>');
rightBar.css("background-color", "#c00")
rightBar.css("border-color", "#c00")
}
demo: https://jsbin.com/yawiqam/edit?js,output
Related
I'm trying to modify the tree control example so that it nests ul's inside an li, this is my template:
template:
'<li>' +
'{{if folders && folders.length}}' +
'<span class="toggle">{^{:expanded ? "-" : "+"}}</span>' +
'{{else}}' +
'<span class="spacer">•</span>' +
'{{/if}}' +
'{{>name}}' +
'{^{if expanded}}' +
'<ul>' +
'{{for folders}}' +
'{^{tree/}}' +
'{{/for}}' +
'</ul>' +
'{{/if}}' +
'</li>',
And my tag is:
{^{tree _data/}}
This produces the desired html - but also raises a second click event which subsequently collapses the just expanded list items?
Any help appreciated, thanks.
This is because you have combined two <li>s into one, and the event bubbling of the click event is now triggering other toggle events on tree nodes higher up. (Before, the self.contents("li").first() selector was ensuring that a bubble click event from deeper down was not captured. But now deeper nodes are under the same li as the parent nodes.)
So one fix is to prevent bubbling. Return false from the handler (or call event.stopPropagation()).
self.contents("li")
.on("click", ".toggle", function() {
self.toggle();
return false;
});
Another is to associate the click event with the span, not the li, so it doesn't find multiple .toggle targets:
var self = this;
self.contents("li").find(".toggle")
.on("click", function() {
self.toggle();
});
Another alternative is to use the {{on}} tag binding for the click handler. In fact the whole implementation is then simpler:
$.views.tags({
tree: {
template: '<li>' +
'{{if folders && folders.length}}' +
'<span data-link="{on ~tag.toggle} {:expanded ? \'-\' : \'+\'}" class="toggle"></span>' +
'{{else}}' +
'<span class="spacer">•</span>' +
'{{/if}}' +
'{{>name}}' +
'{^{if expanded}}' +
'<ul>' +
'{{for folders}}' +
'{{tree/}}' +
'{{/for}}' +
'</ul>' +
'{{/if}}' +
'</li>',
//METHODS
toggle: function() {
var data = this.tagCtx.view.data;
$.observable(data).setProperty("expanded", !data.expanded);
}
}
});
I will probably switch the sample to take this approach...
I'm working on a small app where the user move the background with his mouse or his finger on the screen.
You can find a demo here: http://kaleidoscope-experiment.herokuapp.com/
The background-position is defined by the position of the cursor/finger using this kind of code:
// mobile
position = e.touches[0].pageX + 'px ' + e.touches[0].pageY + 'px';
// desktop
position = e.pageX + 'px ' + e.pageY + 'px';
However, I have significant lags on mobile and tablet and the background is "clipping".
Do you know if there is any alternative to background-position (transform?), to move the background based on the cursor/mouse position?
If you want to roll your own just use a combination of the jQuery mousemove function in combination with CSS3 transforms. Something along the lines of this:
$( "#target" ).mousemove(function( event ) {
var msg = "Handler for .mousemove() called at ";
msg += event.pageX + ", " + event.pageY;
console.log( "<div>" + msg + "</div>" );
$("#movingobject").css('transform', 'translate(' + event.pageY /4 + 'px,' + -event.pageX /4+ 'px)');
});
Here is the reference fiddle that i got from stackoverflow
http://jsfiddle.net/ZmZhw/
There are number of js plugin that are available which will give u some smooth transition and performance also.
I am parsing data from a JSON, where one of the fields on the table is an image.
Although, I want that image to fit a specific size.
I have already made so many changes, that I got lost why it doesn't work.
JSON
var products=[];
$.getJSON('products.json',function(data){
$.each(data.products, function(i, f){
var tblRow = "<tr><td class='prod_img'><img src=" + f.image_url + "></td></tr>" + "<tr><td class='title'>" + f.title + "</td></tr>" + "<tr><td class='price'>" + f.price + "</td>" + "<td class='price_org'>" + f.old_price + "</td>" + "<td class='add_cart'><img src='img/buynow-green-5.png'>" + "</td></tr>"
$(tblRow).appendTo("#list_products tbody");
});
});
CSS
#list_products{
position:absolute;
width:100%;
border: 5px solid #B9FFFF;
margin-top:80px;}
.prod_img{
height:200px;
width:300px;}
So, after sleeping some hours, I finally realized what was missing.
I had a tag for the image container, but no for the image.
Sometimes, the answer is simple. You just need to go away for a moment.
The Setup: On the same page (inside the same map canvas), I have 2 info windows. The CSS for both of them is the same. The content is very similar. Initially, the Street View pano loads with an info window open. A button inside the info window is used to toggle between the regular map and Street View. The map has a second info window displayed with a button to go back to Street View.
The Problem: One info window is resizing to fit the content and the other one is not, so it's displaying scroll bars. The only difference I can see is that one is on a regular old road map and the other is on a Street View panorama.
What I've Tried: I have maxWidth for both info windows set to 500 (ridiculously wide) and a set width and height for the inner div of the info window in CSS.
The Code:
Here's the CSS:
#map-canvas{
height: 600px;
width: 1000px;
}
#map-canvas .info-window {
width: 250px;
height: 230px;
}
The full JS is long and on jsfiddle.
The Demo: http://jsfiddle.net/rkXuk/1/
full screen demo
A Call for Help: What is going on here? Why are they rendering differently and how can I fix this?
Use inline css.
Instead of
.info-window {
width: 250px;
height: 230px;
}
Use:
// map info window
var contentString = '<div style="width:250px; height:230px;" class="info-window">' +
'<h3>Hi, we\'re Cuberis</h3>' +
'<table border="0" cellpadding="0" cellspacing="0" class="contact">' +
'<tr>' +
'<th scope="row">Email:</th>' +
'<td>info#cuberis.com</td>' +
'</tr>' +
'<tr>' +
'<th scope="row">Phone:</th>' +
'<td>919.443.2254</td>' +
'</tr>' +
'<tr>' +
'<th scope="row">Office:</th>' +
'<td>Golden Belt - Building 2<br />' +
'807 E. Main Street<br />' +
'Suite 2-210<br />' +
'Durham, NC 27701</td>' +
'</tr>' +
'</table>' +
'<div class="contact">' +
'<input type="button" class="button" value="See inside our office" onclick="toggleStreetView();"></input>' +
'</div>';
And:
// street view info window
var contentString2 = '<div style="width:250px; height:230px;" class="info-window">' +
'<h3>Hi, we\'re Cuberis</h3>' +
'<table border="0" cellpadding="0" cellspacing="0" class="contact">' +
'<tr>' +
'<th scope="row">Email:</th>' +
'<td>info#cuberis.com</td>' +
'</tr>' +
'<tr>' +
'<th scope="row">Phone:</th>' +
'<td>919.443.2254</td>' +
'</tr>' +
'<tr>' +
'<th scope="row">Office:</th>' +
'<td>Golden Belt - Building 2<br />' +
'807 E. Main Street<br />' +
'Suite 2-210<br />' +
'Durham, NC 27701</td>' +
'</tr>' +
'</table>' +
'<div class="contact">' +
'<input type="button" class="button" value="Check us out on the map" onclick="toggleStreetView();"></input>' +
'</div>';
How to find the width of the icon which is embedded in a button?
Try this:
var icon:DisplayObject = button.getChildByName("upIcon");
trace("icon (width: " + icon.width + ", height: " + icon.height + ")");