We Keep Coding

Progress bar value not bound to data-bind value attribute using Knockout.js

I have a progress bar, and I added a condition that, if the value is below 100, the color should be red; and if it is 100, the color should change to green. But when I debug the code I see the progress value return 0 even if some value is assigned to value attribute.
Below is the progress bar code, and I am assigning value 100 within the data-bind attribute.
<div class="card-header float-right" style="width:50%; padding-left:100px;">
<progress id="myProgress" data-bind="attr: { value: 100, }" min="0" max="100"></progress>
</div>
Below is the javascript code; when I debug and check progress value, it displays 0.
$(document).ready(function () {
var progressvalue = $("#myProgress").val();
var progressText = $("#myProgress").text();
if (progressvalue == 100) {
$('#myProgress').addClass("progress-100");
$('#myProgress').removeClass("progress-below");
}
else {
$('#myProgress').addClass("progress-below");
$('#myProgress').removeClass("progress-100");
}
});

You do not need the data-bind attribute from what I can see in your current code (though you may have a reason outside of what you've shown). Edit: For Knockout.js, you will of course need the data-bind attribute.
All you need to do is set a value for your <progress> element, and then make sure you're updating it as whatever process it represents is progressing.
<progress id="myProgress" value="10" max="100"></progress>
Edit:
For Knockout.js, you need to tie your data-bind attributes to a ViewModel field, and that ViewModel field would need to be associated with an Observable.
You could do something like this (a toy example that just increments the progress value by 10 each second, but shows how you could update your ViewModel, as well as trigger a class change after reaching a threshold value):
<div class="card-header float-right" style="width:50% ; padding-left:100px">
<progress
id="myProgress"
data-bind="value: progressValue, class: progressClass"
max="100"
></progress>
</div>
<script>
const INITIAL_PROGRESS = 1;
const PROGRESS_THRESHOLD = 90;
const BELOW_THRESHOLD_CLASS = "progress-below";
const ABOVE_THRESHOLD_CLASS = "progress-100";
let progressViewModel = {
progressValue: ko.observable(INITIAL_PROGRESS),
progressClass: ko.observable(BELOW_THRESHOLD_CLASS)
};
ko.applyBindings(
progressViewModel,
document.getElementById("myProgress")
);
ko.when(
function() {
return progressViewModel.progressValue() > PROGRESS_THRESHOLD;
},
function(result) {
progressViewModel.progressClass(ABOVE_THRESHOLD_CLASS);
}
);
for (let i = 1; i < 11; i++) {
window.setTimeout(function() {
progressViewModel.progressValue(i * 10);
}, i * 1000);
}
</script>
Then you have to figure out how you want your Observable value(s) updated.

If you're using KnockoutJS, the actual progress is probably an observable property on your viewmodel. Let's say it is actually called progress, then you would bind to it like this:
<div class="card-header float-right" style="width:50% ; padding-left:100px">
<progress id="myProgress" data-bind="attr: { value: progress }" min="0" max="100"></progress>
</div>
For styling, you should use the css or class bindings to assign a class to the progress bar, based on the progress. Here's a Fiddle with a little example, although I've used the Bootstrap progress element and not the actual native progress element since it's a nightmare to style: https://jsfiddle.net/thebluenile/20zsqn5w/

Scroll event not working in framework7 - Vue

Am currently using framework7 and I have this problem wherein I need to get a button floating once the user pass scrolling a specific element.
But for some reason am not able to make the scroll event work. Even used a native event listener but still no luck.
Here is my code. In my component:
export default {
methods: {
handleScroll(event) {
alert('should work')
}
},
created() {
window.addEventListener('scroll', this.handleScroll);
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll);
},
mounted() {
window.addEventListener('scroll', this.handleScroll)
this.handleScroll;
var element = document.querySelector(".similar-adventures");
var top = element.offsetTop;
window.scrollTo(0, top);
}
}
And here is my native event listener code:
window.addEventListener(‘scroll’, function(e){
// Get the new Value
newValue = window.pageYOffset;
//Subtract the two and conclude
if(oldValue - newValue < 0){
console.log(“Up”);
} else if(oldValue - newValue > 0){
console.log(“Down”);
}
// Update the old value
oldValue = newValue;
});

I know this is old now but i will answer for future reference, so i think the problem here is that the window is not actually scrolling as framework7 uses pages/views.
In vue the renders to 2 divs like so..
<f7-page>
<div slot="fixed">Fixed element</div>
<p>Page content goes here</p>
</f7-page>
<!-- Renders to: -->
<div class="page">
<div>Fixed element</div>
<div class="page-content">
<p>Page content goes here</p>
</div>
</div>
i found that its the page-content class that you want to put the eventListenter on best way to do this is Dom7 like so...
let page = $$('.page-content')
page.on('scroll', () => {
console.log(page.scrollTop()) // will show page top position
page.scrollTop(0) // will scroll to top
})
//if you have multiple pages
let page = $$('.page-content')
let home = $$(page[0])
let about = $$(page[1])
page.on('scroll', () => {
console.log(home.scrollTop()) //home page top position
console.log(about.scrollTop()) //about page top position
})
//more options
page.scrollTop(position, duration, callback)
page.scrollTo(left, top, duration, callback)
just remember to import $$ from 'Dom7'

This code retrieves all the pages from the f7 component in an array
let pages = document.querySelectorAll('.page-content');
Then to make a page scrollable, select the respective index and do:
pages[0].addEventListener('scroll', function () { console.log('is scrolling...') } );
For the same code but in a more beautiful way as we don't want to specify the page by index:
add an id to your f7-page tag
<f7-page name="whatever" id='myPage'>
then do this code for example in mounted:
let f7page = document.getElementById('myPage');
let scrollableDiv = f7page.querySelector('.page-content');
scrollableDiv.addEventListener('scroll', function () { console.log('is scrolling...') } );
special thanks to BiscuitmanZ's comment for finding the underlying issue

Bootstrap Slider - Update value on slide OR click

I am using a bootstrap slider on my site using HTML and JavaScript (no Jquery). It is set up pretty much as I want it, with permanent tooltips and values etc.
However, I want to store the value that the user finishes on. I have this working to some extent, IF the user slides the slider. If the user CLICKS on the slider then it doesn't update the value.
Any advice on tracking any kind of interaction?
HTML:
<input id="sliderman1" type="text" data-slider-min="0" data-slider-max="4" data-slider-step="1" data-slider-value="2" data-slider-ticks="[0, 4]"/>
<span id="sliderman1Value">3</span></span>
JS:
var values = ['None', 'Read', 'Speak', 'Test', 'Last'];
var formatter = (index) => values[index];
var slider = new Slider("#sliderman1", {formatter} );
slider.on("slide", function(sliderValue) {
document.getElementById("sliderman1Value").textContent = sliderValue;
});

How about adding an onTouchEnd event listener?
JS
slider.on("onTouchEnd", function(sliderValue) {
document.getElementById("sliderman1Value").textContent = sliderValue;
}
or add it directly to your slider:
HTML
<input ontouchend="myFunction(event)" ... />

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.

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();
})
}
);