We Keep Coding

How to set the value of dimmer element Tizen Wearable Web

How to set the value of dimmer element properly?
I have these files. It's a basic structure from example.
index.html
<div class="ui-page" id="dimmer-page">
<div class="ui-content dimmer-content">
<div class="ui-dimmer" id="dimmer"></div>
<input id="slider" type="range" value="50" min="0" max="100">
</div>
<script src="js/dimmer.js"></script>
<script src="js/set_dimmer.js"></script>
</div>
dimmer.js
/* global tau */
(function () {
var page = document.getElementById("dimmer-page"),
elSlider = document.getElementById("slider"),
elDimmer = document.getElementById("dimmer"),
dimmer,
slider,
pageBeforeShowHandler,
pageHideHandler;
pageBeforeShowHandler = function () {
slider = tau.widget.Slider(elSlider);
dimmer = tau.widget.Dimmer(elDimmer);
elSlider.addEventListener("change", onInput, false);
};
function onInput(event) {
var newVal = parseInt(event.target.value),
convertedVal;
dimmer.value(newVal);
}
pageHideHandler = function () {
slider.destroy();
dimmer.destroy();
};
page.addEventListener("pagebeforeshow", pageBeforeShowHandler);
page.addEventListener("pagehide", pageHideHandler);
}());
I have mqtt broker that sends me value which I want to show in this dimmer.
I'v added this file.
set_dimmer.js
function setDimmerValue(value) {
var dimmerElement,
dimmer;
dimmerElement = document.getElementById("dimmer");
dimmer = tau.widget.Dimmer(dimmerElement);
dimmer.value(value);
}
And when I get another value from mqtt I call this function. It shows me the proper value in percents, the brightness of background is proper, but the slider shows its default value, so I want it to work correct. When I leave this page and come back again it shows me the default value, but I want to show the last value I`v set.

Above code presents connection of two widgets Slider + Dimmer.
Dimmer only show value as level of element brightness.
Slider has bound touch control. Method onInput changes dimmer value on the slider change.
So, if you want set value properly you should set Slider value.
function setValue(value) {
var sliderElement = document.getElementById("slider"),
slider;
slider = tau.widget.Slider(sliderElement); // or tau.engine.getBinding(sliderElement)
slider.value(value);
}

How to reset an elements class to it's initial value

How can I reset an elements 'class' attribute to it's initial value?
I am building a tooltip popup which starts with class="ttPopup". This is then set to the appropriate orientation by adding classes such as class="ttPopup top left".
Problem is when the Popup windows closes, how do I reset the class to it's original value ready for the next time?

There are several ways you could do it:
store in a custom attribute
store in a javascript array
store in localStorage
etc.

Not completely sure if I am correct to use a custom property on the element or not but here is the solution I have used at the moment:
eTooltip.addEventListener("mouseenter", function (oEvent) { ttOpen(oEvent); } );
eTooltip.addEventListener("mouseleave", function (oEvent) { ttClose(oEvent); } );
function ttOpen(oEvent) {
var thisPopup = oEvent.target.getElementsByClassName("ttPopup")[0];
thisPopup.origClassName = thisPopup.className;
}
function ttClose(oEvent) {
var thisPopup = oEvent.target.getElementsByClassName("ttPopup")[0];
if (thisPopup.origClassName) { thisPopup.className = thisPopup.origClassName; thisPopup.origClassName = null; }
console.log(thisPopup.className)
}
Thanks for your help.

Extend Select2 defaults

I create some default select2 behavior: each select is select2
$('select').not('.notSelect2').select2({
width: "150px",
allowClear: true,
placeholder: "EMPTY"
});
And now i want to change settings for some inputs:
function setSelect2Width(control, width) {
$.extend(true, control.select2.defaults, { width: width });
}
This code do nothing for select2. How to change default settings?
jsfiddle.net/JpvDt/389

The default values are exactly what the name suggests; values used when nothing else is specified. You are editing the default values after initializing, so the value will not be used for those selects (they will only be used for new selects without an width specified).
So instead do this:
function setSelect2Width(control, width) {
$(control).width(width).select2();
}

Add new Row in Kendo Grid with some default values

I want to add new Row in Kendo Grid which is having Default value in First Cell.
How can I set the Default Value in that added Row of Kendo Grid
I am adding New Row in Kendo Grid as::
$('#AddSingleSuppliment').click(function () {
grid.addRow();
});
But I want to Set the Value of First cell on the Basis of Value of Clicked DOM element, Like
$('#AddSingleSuppliment').click(function () {
var temVal=$(this).text();
grid.addRow(tempVal);
});
But we can't do it in that Manner.
So please help me on this, For adding New Row in Kendo Grid with one Cell having Value of Button clicked.
Now I am able to Add New Row in Kendo Grid as,
$("#AddSingleSupplement").click( function(){
var tempSupplement = $(this).val();
//alert(tempSupplement);
grid.addRow(tempSupplement);
grid.dataSource._data[0].Description = $(this).text().trim();
});
But the Value is not Directly Shown while adding new Row. It is Shown after we click on some other element.
Please Suggest me wether this one is the Correct way to do this or there is any other way than this.

For dynamic defaults you can wire up your logic on Edit event, something like:
<script>
$('#AddSingleSuppliment').click(function () {
grid.addRow();
});
function onEdit(e)
{
//Custom logic to default value
var name = $("#AddSingleSuppliment").text();
// If addition
if (e.model.isNew()) {
//set field
e.model.set("Name", name); // Name: grid field to set
}
}
</script>

As per Kendo team , Default value cannot be changed dynamically.
However, we can make use the Grid edit event to pre-populate the edit form:
edit: function(e) {
if (e.model.isNew() && !e.model.dirty) {
e.container
.find("input[name=ProductName]") // get the input element for the field
.val("MyCustomValue") // set the value
.change(); // trigger change in order to notify the model binding
}
}

jquery and multiple element hover check

I have 3 boxes and once user hovers any, if changes the content of the big main div from default to the related div via featVals hash table
At the if ($('#estate-feature, #carrier-feature, #cleaning-feature').is(':hover')) { part of my code, I want to check if any of these 3 div boxes are currently hovered, if not display the default content (defaultFeat variable).
However I am getting Uncaught Syntax error, unrecognized expression: hover error from Google Chrome Javascript Console.
How can I fix it ?
Regards
$('#estate-feature, #carrier-feature, #cleaning-feature').hover(function () {
var currentFeatCont = featVals[$(this).attr('id')];
headlineContent.html(currentFeatCont);
}, function () {
headlineContent.delay(600)
.queue(function (n) {
if ($('#estate-feature, #carrier-feature, #cleaning-feature').not(':hover')) {
$(this).html(defaultFeat);
}
n();
})
});

:hover isn't an attribute of the element. Also, you are binding to the hover out there so you know that you have left the hover and can restore the default content. If you want the hover-triggered content to remain for a period after the point has left the trigger element then you'll either need to assume that you aren't going to roll over another trigger or implement a shared flag variable that indicates if the default text restore should be halted. e.g.
var isHovered = false;
$('#estate-feature, #carrier-feature, #cleaning-feature').hover(
function() {
var currentFeatCont = featVals[$(this).attr('id')];
headlineContent.html(currentFeatCont);
isHovered = true;
},
function() {
isHovered = false;
headlineContent.delay(600)
.queue(function(n) {
if (!isHovered) {
$(this).html(defaultFeat);
}
n();
})
}
);