I have the code below in which I've added 1 alert at the start and one at the end.
I get the first alert but the last alert never pops up.
Can anyone see why ?
Here is the code:
<script language="javascript">
$(document).ready(function() {
alert('start');
var month = getURLParameter('month') - 1; //-1 cause javascript months start in 0
var currentYear = getURLParameter('year');
var defaultDate = new Date(currentYear, month, 1); //Set to first day of the month
$("#date").datepicker({ defaultDate: defaultDate });
alert('end');
});
</script>
Thanks
It's most likely that getURLParameter is not defined or there is an error with it.
It could be that datepicker() is not available either.
This works in the jsfiddle demo with a placeholder function for getURLParameter and jquery UI loaded:
http://jsfiddle.net/wesley_murch/bwJGS/
Related
The following script open correctly a link with a formatted date when i click the button on my html page.
$(document).ready(function() {
$('#button').click(function(e) {
var date = /*my script that collects a specific date*/ ;
var [yyyy, mm, dd] = date.toISOString().split('T')[0].split('-');
document.getElementById("cid").innerHTML = dd;
document.getElementById("cim").innerHTML = mm;
window.open( "https://www.mywebsite.com/" +yyyy );
});
the problem : I can't display into the html page the data from the variables.
I'm using this code :
Date values : <span id="cid"></span> / <span id="cim"></span>
Is it Maybe because the script is triggered only when i click the #button ? In any case I would like to display the values on the page before the button is clicked.
How can i do this ? thanks
Maybe I dont understand what ypou want to achieve but for me everything works good when you move your logic outside click function.
function updateDate(){
console.log('Updated!')
const date = new Date();
const [yyyy, mm, dd] = date.toISOString().split('T')[0].split('-');
document.getElementById("cid").innerHTML = dd;
document.getElementById("cim").innerHTML = mm;
}
$(document).ready(function() {
updateDate();
$('#button').click(function(e) {
updateDate();
});
})
Look on fiddle: https://jsfiddle.net/aofd5vne/1/
I'm trying to write a script that will allow me to redirect to a web page every Friday at a specific time.
Was hoping to have the script redirect to an Iframe for a live video feed, and after an hour, have the script also redirect to a html file that will be stored on the pc running a splash page till the next feed the following week, which will start the script again based on day and time.
Been trying for the past 3 hours to salvage something from scripts I've found on stack overflow with no success. Would GREATLY appreciate some help on this!
I Hope this will works for You.
function myFunction() {
var d = new Date();
var n = d.getDay()
var time=.getHours()
if(n==5)
{
//based on time
if(time==14)
{
window.location.href="www.YourRedirectpage.com";
}
}
This should work (ES5 syntax):
Date.prototype.hour = function () {return (this.getHours())}
Date.prototype.day = function () {return (this.getDay())}
var today = new Date()
if (today.hour() == "10" && today.day() == "6") {
// change you url here, such as; location.href ="friday url";
}
else {
// keep (or re-attribute) your base url, such as; location.href ="base url";
}
I guess you want some kind of simplified job in UI which will keep watching and do redirect for you and you don't need to manually intervene much. You should use a setTimeout from Javascript to achieve this.
What this solution does that it calculates the millisecond difference between coming Friday with specific time till current date time and starts a timeout event.
Hope this is easy to understands and helps you.
GIT Repo: https://github.com/helloritesh000/how-to-redirect-browser-at-specific-date-and-time
<!DOCTYPE html>
<html>
<body onload="RedirectTo(5, 15, 49, 30);"> <!-- RedirectTo(day(1-7(Monday)-(Sunday)),1-24 hour,1-60 min,1-60 sec) -->
<h1>This will reload redirect page</h1>
# - <p id="demo"></p>
<script>
function getNextDayOfWeek(date, dayOfWeek) {
// Code to check that date and dayOfWeek are valid left as an exercise ;)
var resultDate = new Date(date.getTime());
resultDate.setDate(date.getDate() + (7 + dayOfWeek - date.getDay()) % 7);
return resultDate;
}
function RedirectTo(day, hour, min, sec) {
var d = new Date(getNextDayOfWeek(new Date(), day));
d.setHours(hour);
d.setMinutes(min);
d.setSeconds(sec);
document.getElementById("demo").innerHTML = d;
var totalMilliSecDiff = d-new Date();
if(totalMilliSecDiff > 0)
{
setTimeout(function(){ window.location.href = "http://www.google.com"; }, totalMilliSecDiff);
}
}
</script>
</body>
</html>
I am very new to HTML, CSS and JavaScript. I am trying to use jQuery to make a button active or inactive depending on the time of day. I have managed to get the image to change correctly after defining the time now (d), an open time and a close time. However I am having problems assigning a link to the buttons depending on the time of day.
This code correctly applies a class if the time is between open and close. It also correctly applies the link to the ButtonOne div, only when the ManagersChatButtonActive class is applied, in a JSFiddle. However in SharePoint, were this will be, the link is also applied even when the time condition is not met.
How can I get the link to only be applied when the 'if' condition is met?
(This is my first time on Stack Overflow, so apologies if this is not very well laid out or explained).
$(document).ready(function() {
var d = new Date();
var open = new Date();
open.setHours(9);
open.setMinutes(0);
open.setSeconds(0);
var close = new Date();
close.setHours(18);
close.setMinutes(0);
close.setSeconds(0);
if (d >= open && d < close) {
$(".ButtonOne").addClass("ManagersChatButtonActive");
$(".ButtonOne").wrap('<a href="http://www.google.com"/>');
} else {
$(".ButtonOne").addClass("ManagersChatButtonInactive");
}
});
Make sure you wrap your method in the JQuery syntax for document on ready or on load as follows:
$(function(){
var d = new Date()
var open = new Date();
open.setHours(9);
open.setMinutes(0);
open.setSeconds(0);
var close = new Date();
close.setHours(18);
close.setMinutes(0);
close.setSeconds(0);
if (d >= open && d < close) {
$(".ButtonOne").addClass("ManagersChatButtonActive");
$(".ButtonOne").wrap('<a href="http://www.google.com"/>');
} else {
$(".ButtonOne").addClass("ManagersChatButtonInactive");
}
})
https://jsfiddle.net/aaronfranco/3xwhoh10/1/
It might also make more sense to use getTime() to use a UNIX timestamp, which is a number, instead of a date string.
$(function(){
var d = new Date().getTime();
var open = new Date();
open.setHours(9);
open.setMinutes(0);
open.setSeconds(0);
open = open.getTime()
var close = new Date();
close.setHours(18);
close.setMinutes(0);
close.setSeconds(0);
close = close.getTime()
if (d >= open && d < close) {
$(".ButtonOne").addClass("ManagersChatButtonActive");
$(".ButtonOne").wrap('<a href="http://www.google.com"/>');
} else {
$(".ButtonOne").addClass("ManagersChatButtonInactive");
}
})
Don't forget to get the current time with the getHours or getTime method. You want this to compare to your condition. These values do not have to be in a time-format, it also possible to just use some static numbers.
You can just do something like this:
var time = new Date(),
hours = time.getHours();
if (hours >= 9 && hours < 18) {
$(".ButtonOne").addClass("ManagersChatButtonActive");
$(".ButtonOne").wrap('<a href="http://www.google.com"/>');
} else {
$(".ButtonOne").addClass("ManagersChatButtonInactive");
}
Working example: https://jsfiddle.net/crix/7o4uhLxe/
Hope this helps!
I checked your code in browser with jQuery, but I don't know about SharePoint, so I guess if you just enclose your code which works fine with jQuery, in .ready() so that when document is ready only then your code is run and when the ".ButtonOne" element is initialized in dom:
$(document).ready(function(){
var d = new Date();
var open = new Date();
open.setHours(9);
open.setMinutes(0);
open.setSeconds(0);
console.info(d);
console.log(open);
var close = new Date();
close.setHours(18);
close.setMinutes(0);
close.setSeconds(0);
console.log(close);
if (d >= open && d < close) {
console.info("INSIDE");
$(".ButtonOne").addClass("ManagersChatButtonActive");
$(".ButtonOne").wrap('<a href="http://www.google.com"/>');
} else {
console.info("INSIDE ELSE");
$(".ButtonOne").addClass("ManagersChatButtonInactive");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ButtonOne" >
This is the desired ButtonOne Div
</div>
I have a form with 2 fields: date field #datefromtoday and number of days #daysfromtoday. I use a javascript function to:
1) Automatically listen to the datefromtoday and (if there is a date) display the number of days from today when the page is loaded
2) adjust the date from today when entering/modify the number of days.
Here is the code:
$(document).ready(function (){
function modifyDays(){ //definy function to modify days
var endDateToDays = $( "#datefromtoday" ).val();
var endDateToDays_obj = new Date(endDateToDays); // convert in object
var endDateToDays_ms = endDateToDays_obj.getTime(); // convert in ms
var todayDate = new Date(); //
var todayDate_ms = todayDate.getTime(); //
var daysFromToday = parseInt(Math.ceil( (endDateToDays_ms - todayDate_ms) / 1000 / 60 / 60 / 24 ) ) || ''; //if not number display nothing
document.getElementById("daysfromtoday").value = daysFromToday; //outuput
}
modifyDays(); //here is the problem. If I delete this line of code, everything works perfectly
$("#datefromtoday").on('change', function(){ //run function when modify delay date
modifyDays();
});
});
PROBLEM
the modifyDays function works like a charm on the on.change event, but
when is loaded on document ready, it interferes with datatables www.datatables.net and also with other scripts, and they don't work anymore...
I'm probably using the wrong code to call the function on page load.... any ideas? Thanks for your help!!!
If you think it is because of calling the main function, in the body element of the html page, add an onload attribute:
<body onload="loaded()">
and declare loaded as that main function:
var loaded = function (){
function modifyDays(){ //definy function to modify days
var endDateToDays = $( "#datefromtoday" ).val();
var endDateToDays_obj = new Date(endDateToDays); // convert in object
var endDateToDays_ms = endDateToDays_obj.getTime(); // convert in ms
var todayDate = new Date(); //
var todayDate_ms = todayDate.getTime(); //
var daysFromToday = parseInt(Math.ceil( (endDateToDays_ms - todayDate_ms) / 1000 / 60 / 60 / 24 ) ) || ''; //if not number display nothing
document.getElementById("daysfromtoday").value = daysFromToday; //outuput
}
modifyDays(); //here is the problem. If I delete this line of code, everything works perfectly
$("#datefromtoday").on('change', function(){ //run function when modify delay date
modifyDays();
});
};
Then it should work if the problem is how the function is called.
I don't think the problem is because of you are calling the function on page load. The error might be coming from inside the function modifyDays. Only dependency I see is #datefromtoday and #daysfromtoday. Check whether those nodes are there when the function execute on dom ready event.
If the timing of the function call is the problem, you can put the modifyDays(); call in a window.setTimeout(modifyDays, 5000); or something of the sort to delay it until the other scripts finish loading, so this snippet doesn't interrupt or interfere with them. You may want to put a placeholder in the html for the seconds when it isn't loaded yet if this works.
Thanks in advance for any help...
I'm trying to (1) generate a begin time and end time for a form, (2) find the difference between the two, and (3) add the difference to a new input.
Here's what I have so far:
Begin time
<input id="starttimeinput" name="starttimeinput" type="text" value="">
<script>
$("#starttime").click(function () {
var begintime = event.timeStamp;
$("#starttimeinput").val(begintime);
});
</script>
end time
<input id="endtimeinput" name="endtimeinput" type="text" value="">
<script>
$("#endtime").click(function () {
var endtime = event.timeStamp;
$("#endtimeinput").val(endtime);
});
</script>
<input id="totaltime" name="totaltime" type="text">
<script>
$("#totaltime").focus(function () {
var begintime = $("#starttimeinput").val();
var endtime = $("#endtimeinput").val();
var totaltime = endtime - begintime;
$("#totaltime").val(totaltime);
});
</script>
The first part works (entering the timestamps into the beginning time and end time inputs). I've never worked with numbers before and can't figure out the second part. The result that comes up is "NaN".
Also this might be useful to know the the time between when the links are clicked should be around 30 seconds...
Thanks much for any help you guys have answered so many questions of mine without me having to post!
You need to parseInt() the times back out, otherwise they're just strings (as returned by .val()).
$("#totaltime").focus(function () {
var begintime = parseInt($("#starttimeinput").val(), 10),
endtime = parseInt($("#endtimeinput").val(), 10),
totaltime = endtime - begintime;
$("#totaltime").val(totaltime);
});
Personally, I'd sooner just store the begintime and endtime values myself, rather than in text inputs (why does the user need to see them, anyway?). Like this:
var begintime,
endtime;
$("#starttime").click(function (event) {
begintime = event.timeStamp;
//$("#starttimeinput").val(begintime);
});
$("#endtime").click(function (event) {
endtime = event.timeStamp;
//$("#endtimeinput").val(endtime);
});
$("#totaltime").focus(function () {
$("#totaltime").val(endtime - begintime);
});
On a side note, I would recommend moving your jQuery code out of inline <script> tags and into an external JS file. This makes for more maintainable markup and JS. Just wrap all of your JS code in a document ready handler:
$(document).ready(function () {
/* your code here */
});
or, more concisely,
$(function () {
/* your code here */
});