I have a bxSlider. I want that on reaching the last slide the next control should hide. I am using infiniteLoop to stop from looping back to the first slide. Using 'hideControlOnEnd' hides the previous control as well but I'd like to keep that. How to achieve this functionality? Is there any direct way to achieve this instead of writing long lines of code?
slider configuration -
$slider = $('.slider').bxSlider({
pager: false,
auto: true,
moveSlides: 4,
minSlides: 4,
maxSlides: 4,
auto:false,
infiniteLoop:false
})
I am trying something like -
function onSliderLoad (){
$(document).on('click','.bx-next', function() {
var current_slide = $slider.getCurrentSlide();
//console.log(current_slide);
var slide_count = $slider.getSlideCount();
//console.log(slide_count);
if (current_slide == slide_count){
$('.bx-next').addClass('disabled');
}
});
}
I am calling this function on click of next-button. I have total of 6 slides. current_slide is returning me 1. The logic is not fitting correctly. Can anyone please suggest any solution?
Thanks in advance !
EDIT : Found a better solution at -https://stackoverflow.com/questions/14122047/bxslider-get-first-and-last-slide
This helped me achieve the desired result.
Try something like this...
onSliderLoad: function (){
slider = $('.slider').bxSlider();
var slide_count = slider.getSlideCount();
var slide_curr = slider.getCurrentSlide();
}
if (slide_curr == slide_count-1){
$('.bx-prev').addClass('disable');
}
Related
Is there any dirty flag in the Kendo-Grid? In the old JQuery version there was one, but in the Angular version I don't see anything like that: https://www.telerik.com/kendo-angular-ui/components/grid/
And if no, how can I get to know about changes?
As far as I know, trackBy is something you could use in that case.
I guess you could find the following link helpful
https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-trackby
Please make a demo if you like to see if it works for you and check more things.
The data items has a dirty field.
var grid = $("#grid").data("kendoGrid");
var data = grid._data;
$.each(data, function (index, item) {
if(item.dirty)
{
// do something
var foo = "kung";
}
});
I try out to create a Data visualization with Chart.js.
My question is quite simple...
I have multi with different id.
Checking an input "from" to an input "to"
you will able to get data in your chart,
If you check A to B you get some Data, if you check A to C some others... etc...
so I use multi condition to define the data must be shown in my Chart.
here my code,
<input id="DFN001" type="checkbox" name="DFN001" onclick="check()" value="from" >From DFN001</li>
and my JavaScript
<script>
var ctx1 = document.getElementById("chart_1").getContext("2d");
var data = datas1 ;
function validate(){
var DFN001 = document.getElementById('DFN001');
if (DFN001.checked){
datas1 = [10,15,20,85,30,35,40];
}else{
alert("You didn't check it! Let me check it for you.")
}
}
var lineChartData1 = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : data
}
]
}
document.getElementById('generate_1').onclick = function()
{
window.myPie = new Chart(ctx1).Line(lineChartData1,{
responsive: true
});
};
</script>
but when I try it, I get this error... "Uncaught ReferenceError: datas1 is not defined" ...
Can Someone Help me ? or there is and other way do make it ?
thanks a LOT !
Best Regards, and Nice Day,
Mirko
You have a couple of program flow related stuff you have to take care of.
datas1 needs to be initialized before you attempt to set data using it. So you need to call validate(), not just declare it. In validate(), datas1 will be set only if the checkbox is checked. For now, let's simply check it using HTML (when you add the rest of your code, just remember not to attempt setting data unless datas1 is set i.e. the corresponding checkbox is checked)
<input id="DFN001" type="checkbox" name="DFN001" onclick="check()" value="from" checked>From DFN001
Calling validate is pretty simple
...
validate();
var ctx1 = document.getElementById...
You need to call new Chart to actually render the chart. Something like
new Chart(ctx1).Line(lineChartData1);
Finally you need to have the canvas element in your HTML (I assume you already have this - just included for completeness)
<canvas id="chart_1"></canvas>
In short, you'll need to call the Chart initialization, data initialization, etc. (on your checkbox clicks) keeping the above in mind.
Here's a fiddle with all the above changes - http://jsfiddle.net/cy2spqrg/
Hi I am just beginning with angular and I am struggling to find the answer to what I'm sure is quite a simple thing to do.
I am currently getting the values of some input boxes and pushing them into my scope. This is creating one long 'array' eg:
['data-1','data-2','data-3']
I would like to format my data in the following way instead
$scope.data = [
{
'header1': 'data1-1',
'header1': 'data1-2',
'header1': 'data1-3'
},
{
'header1': 'data2-1',
'header1': 'data2-2',
'header1': 'data2-3'
}
]
This is my function as it currently is.
$scope.createRow = function(){
angular.forEach(angular.element("input"), function(value, key){
$scope.td.push($(value).val());
});
}
Any help or pointers would be greatly appreciated as I am just getting my head round the angular way
Doing this isn't hard... but before I give you a gun to shoot yourself in the foot, just to say that I think it would be beneficial to explain WHY you want structure in that other format you are mentioning. You seem to have lots of data repetition and that's always a red flag.
Now for the code, you just need to create object before pushing it to the array like:
$scope.createRow = function(){
angular.forEach(angular.element("input"), function(value, key){
var obj = {
"header1": val + "-1",
"header2": val + "-2"
};
$scope.td.push(obj);
});
}
EDIT:
OK, so you are trying to add new row to the table. First of all, you shouldn't be doing angular.forEach, but rather those input elements in HTML should bind to existing scope object, like:
// obviously use better names than Input1Value
// I am here just giving you example
$scope.bindData = {
Input1Value: null,
Input2Value: null
};
// in HTML you will do
// <input ng-model="bindData.Input1Value" />
// <input ng-model="bindData.Input2Value" />
Now that you've eliminated that nasty angular.forEach you need to have some kind of event handler, for example when user clicks the button you want to add this object to the array to which table is data bound. Just be sure to clone the $scope.bindData object when you add it to array.
$scope.createRow = function(){
var newRowData = $scope.cloneObject($scope.bindData);
$scope.td.push(newRowData);
}
// http://heyjavascript.com/4-creative-ways-to-clone-objects/
// https://stackoverflow.com/questions/728360/most-elegant-way-to-clone-a-javascript-object
$scope.cloneObject = function(objToClone) {
var newObj = (JSON.parse(JSON.stringify(objToClone)));
}
To close this answer off - keep in mind, if you ever find yourself directly referencing HTML DOM elements in Javascript with AngularJS - you are doing something wrong. It's a nasty habit to eliminate, especially if you are coming from jQuery background (and how doesn't?), where everything is $("#OhHiThere_ElementWithThisId).
Obviously the main thread on this topic on StackOverflow is this one:
“Thinking in AngularJS” if I have a jQuery background?
However I find that it's too theoretical, so Google around and you may find better overviews like:
jQuery vs. AngularJS: A Comparison and Migration Walkthrough
I'm using Mootools (don't think it is related to the problem) to drag and drop and element.
var draggable = new Drag(timeHandle, {
onDrag: function () {
var calculatedTime = calcTime();
$('timeLabel').innerHTML = calculatedTime;
},
});
Basically, I can drag my 'timeHandle' and the 'timeLabel' is getting updated properly.
The problem is that sometimes, after moving the handle a little bit, suddently, the UI is not getting updated. The 'timeHandle' is not moving and the 'timeLabel' is not getting updted.
The problem is not with the drag event, I can see it keeps on getting called.
When I move
$('timeLabel').innerHTML = calculatedTime;
everything works fine.
So, the problem is not with the 'Drag' object since the event is kept on calling.
Looks like some UI performance issue.
Thanks
To simplify your code, you can use Element.set('text', 'my text here');
var element = $('timeLabel');
var draggable = new Drag(timeHandle, {
onDrag: function () {
element.set('text', calcTime());
}
});
Also, remember to remove that last comma or it will throw errors in Internet Explorer.
OK, found a to make it work.
I still not sure what caused the problem but it looks like the 'innerHTML' command has either really poor performance which causes problems in the GUI updates or maybe some kind of internal mechanism (IE only? which is supposed to prevent the UI from updates overflow.
Anyway, instead of using the innerHTML, I'm doing the following:
var draggable = new Drag(timeHandle, {
onDrag: function () {
var calculatedTime = calcTime();
var element = $('timeLabel');
element.removeChild(element.firstChild);l
element.appendChild(element.ownerDocument.createTextNode(calculatedTime));
},
});
Works like a charm
I'm going nuts here but the each function is just not working for me.
I have about 20 elements with a class name of "lookup" (text boxes) and this function successfully turns all elements red:
document.addEvent('domready', function()
{
var tb = $$('.lookup');
tb.setStyle("color", "red");
});
However, in the following code, I would expect to get some alert for each element but the alert don't hit at all, and no exception is raised either. It is like the each is iterating through 0 items....
document.addEvent('domready', function()
{
var tb = $$('.lookup');
tb.each(function(el)
{
alert("hi");
});
});
Any idea what I might be doing wrong?
In both examples above, I used $$('.lookup').each and $$('.lookup').setStyle() with the same outcome (example 1 works; example 2 doesn't).
Thanks in advance.
Which browsers have problems? Try use 'window' instead 'document'
window.addEvent('domready', function(){
var tb = $$('.lookup');
tb.each(function(el){
el.setStyle("color", "red");
alert("hi");
});
});
In mootools better always use 'each' for working with array of elements.
I've discovered that reordering the mootools include script so that it is referenced after the Microsoft WebResource.axd?d= include script resolves the problem. Mootools appears to handle the conflict, whereas Microsoft ASP.NET can't.