|
Estys Thanks,
I think from other replies I am on the wrong track. 
|
|
|
|
|
You have not declared hoursOpen anywhere. And what about the previous statement, does that not set the value in the html? If so why are you trying to return a value?
|
|
|
|
|
Hi Richard, thanks.
I thought I had cobbled something together that would work from the lessons I saw and looking at other code. As I say there must be a lighbulb moment I am missing. 
|
|
|
|
|
|
NB: If your users are entering hours and minutes, your calculation is going to be wrong.
For example, 09:45 to 10:15 should be 0.5 hours, but "10.15" - "09.45" will return 0.7000000000000011.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hi Richard, thanks for replying.
I noticed that when I was searching for answers to my initial problem, nothing is ever easy it seems.
The function I was trying to create would be used elsewhere but as yet I still can't get it to return a value.
|
|
|
|
|
Try something like this:
$(function(){
var parseMinutes = function(value){
var parts = value.split(/[.:]/g);
switch (parts.length) {
case 1: {
return parseFloat(parts[0]) * 60;
}
case 2: {
var hours = parseFloat(parts[0]);
var minutes = parseFloat(parts[1]);
return (hours * 60) + minutes;
}
default: {
return 0;
}
}
};
var formatMinutes = function(minutes){
var hours = Math.floor(minutes / 60);
minutes %= 60;
return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0');
};
var updateHoursOpen = function(){
var openingTime = $("#opening-time").val();
var closingTime = $("#closing-time").val();
var openingMinutes = parseMinutes(openingTime);
var closingMinutes = parseMinutes(closingTime);
var minutesOpen = closingMinutes - openingMinutes;
if (minutesOpen < 0) {
minutesOpen += 1440;
}
var hoursOpen = formatMinutes(minutesOpen);
$("#hoursOpen").val(hoursOpen);
return hoursOpen;
};
$("#opening-time, #closing-time").keyup(updateHoursOpen);
});Demo[^]
NB: padStart doesn't work in Internet Explorer. But since even Microsoft agree that IE isn't a browser[^], it's usually safe to ignore it these days.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Richard, thankyou so much for that, weirdly I'm still not getting a value for hours open.
Sticking my head in the oven is starting to look appealing. 
|
|
|
|
|
Richard, my apologies. It has oft been said "there are none so blind as them that cannot see"
Your code does work, I just wasn't looking at it correctly. 
Is there a way I can make it work for each day from the same code or would it need that code for each day?
Thanks for your help so far.
|
|
|
|
|
I'm not sure what you mean by "each day"? Do you mean you have multiple sets of inputs for opening time, closing time, and hours?
You can't use the same ID for multiple elements in the same HTML document. You'll need to find a different way of identifying the elements, and linking the three <input> elements for a given day together. For example, you could use the class attribute:
<div class="opening-day">
<p>Monday</p>
<p>
<label>
Opening:
<input type='text' class='opening-time' value='00:00'>
</label>
</p>
<p>
<label>
Closing:
<input type='text' class='closing-time' value='00:00'>
</label>
</p>
<p>
Result:
<input type='text' class='hours-open' value='00:00' readonly>
</p>
</div>
var updateHoursOpen = function($div){
var openingTime = $div.find(".opening-time").val();
var closingTime = $div.find(".closing-time").val();
var openingMinutes = parseMinutes(openingTime);
var closingMinutes = parseMinutes(closingTime);
var minutesOpen = closingMinutes - openingMinutes;
if (minutesOpen < 0) {
minutesOpen += 1440;
}
var hoursOpen = formatMinutes(minutesOpen);
$div.find(".hours-open").val(hoursOpen);
return hoursOpen;
};
$(".opening-day").on("keyup", ".openingtime, .closing-time", function(){
var $div = $(this).closest(".opening-day");
updateHoursOpen($div);
}); Demo[^]
.find() | jQuery API Documentation[^]
.closest() | jQuery API Documentation[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hi Richard, thanks so much.
Yes basically the page has all 7 days, a check box if open that day and input boxes for opening and closing hours and the hours open.
I will use the code above. thankyou.
|
|
|
|
|
Saw this thread, and suddenly had awful deja vu back to 17th Feb 1999[^]
(This is one of my all-time favourite Dilberts, simply because I see it in real life so often!)
|
|
|
|
|
I know I'm late on this, but 0 - 0 is 0
opening time is 0 or 12 midnight
closing time is 0 or 12 midnight
so you get 0
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I was just glad the code worked.
|
|
|
|
|
I wrote a similar function for showing that my business is open, based on open and closed hours in TypeScript.
It drove me nuts, was always off by an hour, Daylight savings.
I'll get back to it soon, now that I have more experience in TypeScript.
setStoreHours(): void {
const date = new Date();
const newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
const offset = date.getTimezoneOffset() / 60;
this.hourOfDay = date.getHours();
this.dayOfWeek = date.getDay();
switch (this.dayOfWeek) {
case 0:
this.storeStatus = "Closed";
break;
case 1:
if (this.hourOfDay > 8 && this.hourOfDay < 17) {
this.storeStatus = "Open";
}
break;
case 2:
if (this.hourOfDay > 8 && this.hourOfDay < 17) {
this.storeStatus = "Open";
}
break;
case 3:
if (this.hourOfDay > 8 && this.hourOfDay < 17) {
this.storeStatus = "Open";
}
break;
case 4:
if (this.hourOfDay > 8 && this.hourOfDay < 17) {
this.storeStatus = "Open";
}
break;
case 5:
if (this.hourOfDay > 8 && this.hourOfDay < 15) {
this.storeStatus = "Open";
}
break;
case 6:
this.storeStatus = "Closed";
break;
default:
this.storeStatus = "Closed";
}
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Sorry, I think I deleted my reply just as you replied to it. 
|
|
|
|
|
That's JQuery like syntax.
IMO, Don't waste your time learning JQuery, I've been there and done that already.
JQuery is obsolete now, because modern browsers support modern JavaScript.
JQuery adds 3 Lbs to your first page download, and is very heavy in weight, in exchange to write shorthand JavaScript.
The reason your not absorbing or moving faster with knowledge is because your looking at shorthand JavaScript/JQuery examples, and trying to understand and copy them. These are very advanced writing skills. You should start with entry level skill writing, and when you get that down, move to shorthand.
I would of wrote it like this, for a beginner example.
ES6
Use HTML to bind the event to the button, and run calcTime().
Use camel case to label things eg. calcTime vs CalcTime vs calc-time
let has replaced var
use const instead of var or let to when something that is constant.
Try not to make a lot of const, see how I did it in one line
ES6 Example
<button type="button" onBlur="calcTime()">Calculate</button>
function calcTime() {
const time = document.getElementById("currentCharge"),
current = document.getElementById("timeAllowed"),
breakEven = document.getElementById("breakEven");
let t = parseFloat(time.value);
let c = parseFloat(current.value);
let bE = t * c;
breakEven.innerHTML = bE.toString();
}
JavaScript comes in many flavors now.
I think you want ECMAScript 6, ES6, ECMAScript 2015
From there, you can branch out to TypeScript, Node, etc.
I don't know of a good learning course, but you need to stick to one version in order to learn.
And when searching for help on the internet, find examples in ES6; learn to identity ES6 examples, and then code and test.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
That's JQuery like syntax.
IMO, Don't waste your time learning JQuery, I've been there and done that already.
JQuery is obsolete now, because modern browsers support modern JavaScript.
JQuery adds 3 Lbs to your first page download, and is very heavy in weight, in exchange to write shorthand JavaScript.
The reason your not absorbing or moving faster with knowledge is because your looking at shorthand JavaScript/JQuery examples, and trying to understand and copy them. These are very advanced writing skills. You should start with entry level skill writing, and when you get that down, move to shorthand.
I would of wrote it like this, for a beginner example.
ES6
Use HTML to bind the event to the button, and run calcTime().
Use camel case to label things eg. calcTime vs CalcTime vs calc-time
let has replaced var
use const instead of var or let to when something that is constant.
Try not to make a lot of const, see how I did it in one line
ES6 Example
<button type="button" onBlur="calcTime()">Calculate</button>
function calcTime() {
const time = document.getElementById("currentCharge"),
current = document.getElementById("timeAllowed"),
breakEven = document.getElementById("breakEven");
let t = parseFloat(time.value);
let c = parseFloat(current.value);
let bE = t * c;
breakEven.innerHTML = bE.toString();
}
JavaScript comes in many flavors now.
I think you want ECMAScript 6, ES6, ECMAScript 2015
From there, you can branch out to TypeScript, Node, etc.
I don't know of a good learning course, but you need to stick to one version in order to learn.
And when searching for help on the internet, find examples in ES6; learn to identity ES6 examples, and then code and test.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Have added some more elements (not in use at present) but still not getting the breakeven to calculate.
<div class='col-sm-2 mb-1'>
<input type='number' id='time' class='form-control' data-calc='time' placeholder='Minutes Allocated' tabindex='2'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='current' class='form-control form-output' data-calc='current' value='£0.00' tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='breakeven' class='form-control form-output' data-calc='breakeven' value='£0.00' readonly tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='tier1' class='form-control form-output' data-calc='tier1' value='£0.00' readonly tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='tier2' class='form-control form-output' data-calc='tier2' value='£0.00' readonly tabindex='-1'>
</div>
</div>
<script>
<button type="button" onBlur="calcTime()">Calculate</button>
function calcTime() {
const time = document.getElementById("timeAllowed"),
current = document.getElementById("currentCharge"),
breakEven = document.getElementById("breakEven"),
tier1 = document.getElementById ("tier1"),
tier2= document.getElementById ("tier2");
let t = parseFloat(time.value);
let c = parseFloat(current.value);
let bE = t * c;
breakEven.innerHTML = bE.toString();
}
modified 13-Jun-20 12:43pm.
|
|
|
|
|
Look at the id names you are using in the HTML against the ones you are using in the Javascript. You need to read through your code more closely.
|
|
|
|
|
Thanks Richard, you were right. In my haste I lost focus.
|
|
|
|
|
 
I can't test this at the moment, but it should work.
I hope it does.
<script>
function calcTime() {
const time = document.getElementById("time"),
current = document.getElementById("current"),<br />
tier1 = document.getElementById ("tier1"),
tier2= document.getElementById ("tier2"),
breakEven = document.getElementById("breakEven"),
results = document.getElementById("results");
let t = parseFloat(time.value);
let c = parseFloat(current.value);
let bE = t * c;
console.log("breakEven=", bE);
results.innerHTML = bE.toString();
}
</script>
<div class='col-sm-2 mb-1'>
<input type='number' id='time' class='form-control' data-calc='time' placeholder='Minutes Allocated' tabindex='2'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='current' class='form-control form-output' data-calc='current' value='£0.00' tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='breakEven' class='form-control form-output' data-calc='breakeven' value='£0.00' readonly tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='tier1' class='form-control form-output' data-calc='tier1' value='£0.00' readonly tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='tier2' class='form-control form-output' data-calc='tier2' value='£0.00' readonly tabindex='-1'>
</div>
<div class="row col-12">
<button type="button" onBlur="calcTime()">Calculate</button>
</div>
<div class="row col-12">
<span id="results">0</span>
</div>
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Jkirkerx, not sure why but your post vanished. I tried it but no luck. Going to change a few things so will keep you updated, thanks for your help thus far.
|
|
|
|
|
Hello,
I'm having an issue with my javascript slider inside removals page.
You can check it out on www.poznanprzeprowadzki.pl (not a commercial :P), section "Galeria".
On the first load, the slideshow works but, the 3/4 of one image and 1/4 of second image is inside the slideshow-container. It is possible to slide through the gallery, but one click on the button isn't moving the image enough. After the refresh, inside the slideshow-container there is only one image, and it works fine sliding through gallery.
I included the script after the footer section. Hope someone can help me...
<script>
const slideshowSlide = document.querySelector('.slideshow-slide');
const slideshowImages = document.querySelectorAll('.slideshow-slide img');
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');
let counter = 1;
const size = slideshowImages[0].clientWidth;
slideshowSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
nextBtn.addEventListener('click',function(){
if (counter >= slideshowImages.length-1) return;
slideshowSlide.style.transition = 'transform 0.4s ease-in-out';
counter++;
slideshowSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
prevBtn.addEventListener('click',function(){
if (counter <= 0) return;
slideshowSlide.style.transition = 'transform 0.4s ease-in-out';
counter--;
slideshowSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
slideshowSlide.addEventListener('transitionend', ()=>{
if (slideshowImages[counter].id === 'lastclone') {
slideshowSlide.style.transition = "none";
counter = slideshowImages.length - 2;
slideshowSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
}
if (slideshowImages[counter].id === 'firstclone') {
slideshowSlide.style.transition = "none";
counter = slideshowImages.length - counter;
slideshowSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
}
});
</script>
|
|
|
|
|
Unless the <img> element has an explicit width set, you'll need to wait for the images to finish loading before you can measure them. On the first page load, your script is probably running before the images have finished loading. On subsequent page loads, the images are probably being loaded from the cache, and finish loading before you script runs.
There's a handy plugin for detecting when all images in a container have finished loading:
GitHub - desandro/imagesloaded: JavaScript is all like "You images done yet or what?"[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
