Why is This Date Causing an Error?

Why is This Date Causing an Error? - javascript

So not so long ago I made my own booking system which displays a calendar on a page with the dates that have been booked but I noticed recently, if one of the bookings goes across two months e.g. 29th March to 4th April the whole thing just crashes / doesn't load and I'm really confused as to why. The date still gets entered into my database but then it breaks.
Here is the code for displaying the calendar (Note: I got most of this code from a CodePen and edited it accordingly):
<?php
session_start();
ob_start();
$host = "myhostname"; // Host name
$username = "myusername"; // Mysql username
$password = ""; // Mysql password
$db_name = "mydatabase"; // Database name
$tbl_name = "booking"; // Table name
// Connect to server and select databse.
$conn = mysqli_connect($host, $username, $password)or die("cannot connect");
mysqli_select_db($conn, $db_name)or die("cannot select DB");
$sql = "SELECT * FROM $tbl_name";
$result = mysqli_query($conn, $sql);
?>
<script>
!function() {
var today = moment();
function Calendar(selector, events) {
this.el = document.querySelector(selector);
this.events = events;
this.current = moment().date(1);
this.events.forEach(function(ev) {
ev.date = moment(ev.date);
});
this.draw();
var current = document.querySelector('.today');
if(current) {
var self = this;
window.setTimeout(function() {
self.openDay(current);
}, 500);
}
}
Calendar.prototype.draw = function() {
//Create Header
this.drawHeader();
//Draw Month
this.drawMonth();
}
Calendar.prototype.drawHeader = function() {
var self = this;
if(!this.header) {
//Create the header elements
this.header = createElement('div', 'header');
this.header.className = 'header';
this.title = createElement('h3');
var right = createElement('div', 'right');
right.addEventListener('click', function() { self.nextMonth(); });
var left = createElement('div', 'left');
left.addEventListener('click', function() { self.prevMonth(); });
document.addEventListener("keydown", function(event) {
if (event.keyCode === 39) {
event.preventDefault();
self.nextMonth();
} else if (event.keyCode === 37) {
event.preventDefault();
self.prevMonth();
}
});
//Append the Elements
this.header.appendChild(this.title);
this.header.appendChild(right);
this.header.appendChild(left);
this.el.appendChild(this.header);
}
this.title.innerHTML = this.current.format('MMMM YYYY');
}
Calendar.prototype.drawMonth = function() {
var self = this;
if(this.month) {
this.oldMonth = this.month;
this.oldMonth.className = 'month out ' + (self.next ? 'next' : 'prev');
this.oldMonth.addEventListener('webkitAnimationEnd', function() {
self.oldMonth.parentNode.removeChild(self.oldMonth);
self.month = createElement('div', 'month');
self.backFill();
self.currentMonth();
self.fowardFill();
self.el.appendChild(self.month);
window.setTimeout(function() {
self.month.className = 'month in ' + (self.next ? 'next' : 'prev');
}, 16);
});
} else {
this.month = createElement('div', 'month');
this.el.appendChild(this.month);
this.backFill();
this.currentMonth();
this.fowardFill();
this.month.className = 'month new';
}
}
Calendar.prototype.backFill = function() {
var clone = this.current.clone();
var dayOfWeek = clone.day();
if(!dayOfWeek) { return; }
clone.subtract('days', dayOfWeek);
for(var i = dayOfWeek; i > 1 ; i--) {
this.drawDay(clone.add('days', 1));
}
}
Calendar.prototype.fowardFill = function() {
var clone = this.current.clone().add('months', 1).subtract('days', 1);
var dayOfWeek = clone.day();
if(dayOfWeek === 7) { return; }
for(var i = dayOfWeek; i < 7 ; i++) {
this.drawDay(clone.add('days', 1));
}
}
Calendar.prototype.currentMonth = function() {
var clone = this.current.clone();
while(clone.month() === this.current.month()) {
this.drawDay(clone);
clone.add('days', 1);
}
}
Calendar.prototype.getWeek = function(day) {
if(!this.week || day.day() === 1) {
this.week = createElement('div', 'week');
this.month.appendChild(this.week);
}
}
Calendar.prototype.drawDay = function(day) {
var self = this;
this.getWeek(day);
//Outer Day
var outer = createElement('div', this.getDayClass(day));
outer.addEventListener('click', function() {
self.openDay(this);
});
//Day Name
var name = createElement('div', 'day-name', day.format('ddd'));
//Day Number
var number = createElement('div', 'day-number', day.format('DD'));
//Events
var events = createElement('div', 'day-events');
this.drawEvents(day, events);
outer.appendChild(name);
outer.appendChild(number);
outer.appendChild(events);
this.week.appendChild(outer);
}
Calendar.prototype.drawEvents = function(day, element) {
if(day.month() === this.current.month()) {
var todaysEvents = this.events.reduce(function(memo, ev) {
if(ev.date.isSame(day, 'day')) {
memo.push(ev);
}
return memo;
}, []);
todaysEvents.forEach(function(ev) {
var evSpan = createElement('span', ev.color);
element.appendChild(evSpan);
});
}
}
Calendar.prototype.getDayClass = function(day) {
classes = ['day'];
if(day.month() !== this.current.month()) {
classes.push('other');
} else if (today.isSame(day, 'day')) {
classes.push('today');
}
return classes.join(' ');
}
Calendar.prototype.openDay = function(el) {
var details, arrow;
var dayNumber = +el.querySelectorAll('.day-number')[0].innerText || +el.querySelectorAll('.day-number')[0].textContent;
var day = this.current.clone().date(dayNumber);
var currentOpened = document.querySelector('.details');
//Check to see if there is an open detais box on the current row
if(currentOpened && currentOpened.parentNode === el.parentNode) {
details = currentOpened;
arrow = document.querySelector('.arrow');
} else {
//Close the open events on differnt week row
//currentOpened && currentOpened.parentNode.removeChild(currentOpened);
if(currentOpened) {
currentOpened.addEventListener('webkitAnimationEnd', function() {
currentOpened.parentNode.removeChild(currentOpened);
});
currentOpened.addEventListener('oanimationend', function() {
currentOpened.parentNode.removeChild(currentOpened);
});
currentOpened.addEventListener('msAnimationEnd', function() {
currentOpened.parentNode.removeChild(currentOpened);
});
currentOpened.addEventListener('animationend', function() {
currentOpened.parentNode.removeChild(currentOpened);
});
currentOpened.className = 'details out';
}
//Create the Details Container
details = createElement('div', 'details in');
//Create the arrow
var arrow = createElement('div', 'arrow');
//Create the event wrapper
details.appendChild(arrow);
el.parentNode.appendChild(details);
}
var todaysEvents = this.events.reduce(function(memo, ev) {
if(ev.date.isSame(day, 'day')) {
memo.push(ev);
}
return memo;
}, []);
this.renderEvents(todaysEvents, details);
arrow.style.left = el.offsetLeft - el.parentNode.offsetLeft + 27 + 'px';
}
Calendar.prototype.renderEvents = function(events, ele) {
//Remove any events in the current details element
var currentWrapper = ele.querySelector('.events');
var wrapper = createElement('div', 'events in' + (currentWrapper ? ' new' : ''));
events.forEach(function(ev) {
var div = createElement('div', 'event');
var span = createElement('span', '', ev.eventName);
div.appendChild(span);
wrapper.appendChild(div);
});
if(!events.length) {
var div = createElement('div', 'event empty');
var span = createElement('span', '', 'No Booking');
div.appendChild(span);
wrapper.appendChild(div);
}
if(currentWrapper) {
currentWrapper.className = 'events out';
currentWrapper.addEventListener('webkitAnimationEnd', function() {
currentWrapper.parentNode.removeChild(currentWrapper);
ele.appendChild(wrapper);
});
currentWrapper.addEventListener('oanimationend', function() {
currentWrapper.parentNode.removeChild(currentWrapper);
ele.appendChild(wrapper);
});
currentWrapper.addEventListener('msAnimationEnd', function() {
currentWrapper.parentNode.removeChild(currentWrapper);
ele.appendChild(wrapper);
});
currentWrapper.addEventListener('animationend', function() {
currentWrapper.parentNode.removeChild(currentWrapper);
ele.appendChild(wrapper);
});
} else {
ele.appendChild(wrapper);
}
}
Calendar.prototype.drawLegend = function() {
var calendars = this.events.map(function(e) {
return e.calendar + '|' + e.color;
}).reduce(function(memo, e) {
if(memo.indexOf(e) === -1) {
memo.push(e);
}
return memo;
}, []).forEach(function(e) {
var parts = e.split('|');
var entry = createElement('span', 'entry ' + parts[1], parts[0]);
});
}
Calendar.prototype.nextMonth = function() {
this.current.add('months', 1);
this.next = true;
this.draw();
}
Calendar.prototype.prevMonth = function() {
this.current.subtract('months', 1);
this.next = false;
this.draw();
}
window.Calendar = Calendar;
function createElement(tagName, className, innerText) {
var ele = document.createElement(tagName);
if(className) {
ele.className = className;
}
if(innerText) {
ele.innderText = ele.textContent = innerText;
}
return ele;
}
}();
!function() {
var data = [
<?php
$colour = 'blue';
while($rows = mysqli_fetch_array($result)) {
if($rows['status'] == 'Confirmed') {
$colour = 'red';
} else {
$colour = 'blue';
}
?>
{ eventName: 'Booking Start', calendar: 'Booking <?php echo $rows['status']; ?>', color: '<?php echo $colour; ?>', date: '<?php echo $rows['arrive_date']?>'},
<?php
$date = date('Y-m-d', strtotime($rows['arrive_date']));
while ($date < date('Y-m-d', strtotime($rows['depart_date']. '-1 day'))) {
$date++;
?>
{ eventName: 'Booked', calendar: 'Booking <?php echo $rows['status']; ?>', color: '<?php echo $colour; ?>', date: '<?php echo $date;?>'},
<?php
}
?>
{ eventName: 'Booking End', calendar: 'Booking <?php echo $rows['status']; ?>', color: '<?php echo $colour; ?>', date: '<?php echo $rows['depart_date']; ?>'},
<?php
}
?>
];
var calendar = new Calendar('#calendar', data);
}();
</script>
EDIT: In case you need further help this is what an example looks like from the table in the database:
I can't work out what is causing this problem, I believe it is something to do with the events but I don't know. I was hoping someone a little more experienced could help me out a little.
To see what it looks like visually you can see it live here: https://ryan-simms.com/booking/bookings
EDIT: I just found out, doing a test, that if I put in 28th February to the 1st March it doesn't crash but if I change it so it ends on the 2nd March it crashes, really odd.

Solution by OP.
Solved by editing the while loop and using a different method for getting all dates in between two dates. Example code:
$start = date('Y-m-d', strtotime($rows['arrive_date']. '+1 day'));
$end = date('Y-m-d', strtotime($rows['depart_date']. '-1 day'));
while ($start <= $end) {
?>
{ eventName: 'Booked', calendar: 'Booking <?php echo $rows['status']; ?>', color: '<?php echo $colour; ?>', date: '<?php echo $start;?>'},
<?php
$start = date ("Y-m-d", strtotime("+1 days", strtotime($start)));
}

Related

Why is a function running before the others?

I have the following code I got from codepen.io to generate a calendar:
!function() {
var today = moment().locale('es');
function Calendar(selector, events) {
this.el = document.querySelector(selector);
this.events = events;
this.current = moment().date(1);
this.draw();
var current = document.querySelector('.today');
if(current) {
var self = this;
window.setTimeout(function() {
self.openDay(current);
}, 500);
}
}
Calendar.prototype.draw = function() {
//Create Header
this.drawHeader();
//Draw Month
this.drawMonth();
}
Calendar.prototype.drawHeader = function() {
var self = this;
if(!this.header) {
//Create the header elements
this.header = createElement('div', 'header');
this.header.className = 'header';
this.title = createElement('h1');
var right = createElement('div', 'right');
right.addEventListener('click', function() { self.nextMonth(); });
var left = createElement('div', 'left');
left.addEventListener('click', function() { self.prevMonth(); });
//Append the Elements
this.header.appendChild(this.title);
this.header.appendChild(right);
this.header.appendChild(left);
this.el.appendChild(this.header);
}
this.title.innerHTML = this.current.locale('es').format('MMMM YYYY');
}
Calendar.prototype.drawMonth = function() {
var self = this;
this.events.forEach(function(ev) {
ev.date = moment(ev.date);
});
if(this.month) {
this.oldMonth = this.month;
this.oldMonth.className = 'month out ' + (self.next ? 'next' : 'prev');
this.oldMonth.addEventListener('webkitAnimationEnd', function() {
self.oldMonth.parentNode.removeChild(self.oldMonth);
self.month = createElement('div', 'month');
self.backFill();
self.currentMonth();
self.fowardFill();
self.el.appendChild(self.month);
window.setTimeout(function() {
self.month.className = 'month in ' + (self.next ? 'next' : 'prev');
}, 16);
});
} else {
this.month = createElement('div', 'month');
this.el.appendChild(this.month);
this.backFill();
this.currentMonth();
this.fowardFill();
this.month.className = 'month new';
}
}
Calendar.prototype.backFill = function() {
var clone = this.current.clone();
var dayOfWeek = clone.day();
if(!dayOfWeek) { return; }
clone.subtract('days', dayOfWeek+1);
for(var i = dayOfWeek; i > 0 ; i--) {
this.drawDay(clone.add('days', 1));
}
}
Calendar.prototype.fowardFill = function() {
var clone = this.current.clone().add('months', 1).subtract('days', 1);
var dayOfWeek = clone.day();
if(dayOfWeek === 6) { return; }
for(var i = dayOfWeek; i < 6 ; i++) {
this.drawDay(clone.add('days', 1));
}
}
Calendar.prototype.currentMonth = function() {
var clone = this.current.clone();
while(clone.month() === this.current.month()) {
this.drawDay(clone);
clone.add('days', 1);
}
}
Calendar.prototype.getWeek = function(day) {
if(!this.week || day.day() === 0) {
this.week = createElement('div', 'week');
this.month.appendChild(this.week);
}
}
Calendar.prototype.drawDay = function(day) {
var self = this;
this.getWeek(day);
//Outer Day
var outer = createElement('div', this.getDayClass(day));
outer.addEventListener('click', function() {
self.openDay(this);
});
//Day Name
var name = createElement('div', 'day-name', day.locale('es').format('ddd'));
//Day Number
var number = createElement('div', 'day-number', day.format('DD'));
//Events
var events = createElement('div', 'day-events');
this.drawEvents(day, events);
outer.appendChild(name);
outer.appendChild(number);
outer.appendChild(events);
this.week.appendChild(outer);
}
Calendar.prototype.drawEvents = function(day, element) {
if(day.month() === this.current.month()) {
var todaysEvents = this.events.reduce(function(memo, ev) {
if(ev.date.isSame(day, 'day')) {
memo.push(ev);
}
return memo;
}, []);
todaysEvents.forEach(function(ev) {
var evSpan = createElement('span', ev.color);
element.appendChild(evSpan);
});
}
}
Calendar.prototype.getDayClass = function(day) {
classes = ['day'];
if(day.month() !== this.current.month()) {
classes.push('other');
} else if (today.isSame(day, 'day')) {
classes.push('today');
}
return classes.join(' ');
}
Calendar.prototype.openDay = function(el) {
var details, arrow;
var dayNumber = +el.querySelectorAll('.day-number')[0].innerText || +el.querySelectorAll('.day-number')[0].textContent;
var day = this.current.clone().date(dayNumber);
var currentOpened = document.querySelector('.details');
//Check to see if there is an open detais box on the current row
if(currentOpened && currentOpened.parentNode === el.parentNode) {
details = currentOpened;
arrow = document.querySelector('.arrow');
} else {
//Close the open events on differnt week row
//currentOpened && currentOpened.parentNode.removeChild(currentOpened);
if(currentOpened) {
currentOpened.addEventListener('webkitAnimationEnd', function() {
currentOpened.parentNode.removeChild(currentOpened);
});
currentOpened.addEventListener('oanimationend', function() {
currentOpened.parentNode.removeChild(currentOpened);
});
currentOpened.addEventListener('msAnimationEnd', function() {
currentOpened.parentNode.removeChild(currentOpened);
});
currentOpened.addEventListener('animationend', function() {
currentOpened.parentNode.removeChild(currentOpened);
});
currentOpened.className = 'details out';
}
//Create the Details Container
details = createElement('div', 'details in');
//Create the arrow
var arrow = createElement('div', 'arrow');
//Create the event wrapper
details.appendChild(arrow);
el.parentNode.appendChild(details);
}
var todaysEvents = this.events.reduce(function(memo, ev) {
if(ev.date.isSame(day, 'day')) {
memo.push(ev);
}
return memo;
}, []);
this.renderEvents(todaysEvents, details);
arrow.style.left = el.offsetLeft - el.parentNode.offsetLeft + 27 + 'px';
}
Calendar.prototype.renderEvents = function(events, ele) {
//Remove any events in the current details element
var currentWrapper = ele.querySelector('.events');
var wrapper = createElement('div', 'events in' + (currentWrapper ? ' new' : ''));
events.forEach(function(ev) {
var div = createElement('div', 'event');
var square = createElement('div', 'event-category ' + ev.color);
var span = createElement('span', '', ev.eventName);
div.appendChild(square);
div.appendChild(span);
wrapper.appendChild(div);
});
if(!events.length) {
var div = createElement('div', 'event empty');
var span = createElement('span', '', 'No Events');
div.appendChild(span);
wrapper.appendChild(div);
}
if(currentWrapper) {
currentWrapper.className = 'events out';
currentWrapper.addEventListener('webkitAnimationEnd', function() {
currentWrapper.parentNode.removeChild(currentWrapper);
ele.appendChild(wrapper);
});
currentWrapper.addEventListener('oanimationend', function() {
currentWrapper.parentNode.removeChild(currentWrapper);
ele.appendChild(wrapper);
});
currentWrapper.addEventListener('msAnimationEnd', function() {
currentWrapper.parentNode.removeChild(currentWrapper);
ele.appendChild(wrapper);
});
currentWrapper.addEventListener('animationend', function() {
currentWrapper.parentNode.removeChild(currentWrapper);
ele.appendChild(wrapper);
});
} else {
ele.appendChild(wrapper);
}
}
Calendar.prototype.nextMonth = function() {
this.current.add('months', 1);
this.next = true;
this.draw();
}
Calendar.prototype.prevMonth = function() {
this.current.subtract('months', 1);
this.next = false;
this.draw();
}
window.Calendar = Calendar;
function createElement(tagName, className, innerText) {
var ele = document.createElement(tagName);
if(className) {
ele.className = className;
}
if(innerText) {
ele.innderText = ele.textContent = innerText;
}
return ele;
}
}();
!function() {
var data = [
{}
];
data.push({ eventName: 'test', calendar: 'Other', color: 'green', date:moment('2022-12-11T10:20:25')});
var partialsDates
const xhr = new XMLHttpRequest();
xhr.onload = () => {
partialDates = JSON.parse(xhr.responseText);
data.push({ eventName: 'Inicio de primer parcial', calendar: 'Other', color: 'green', date:moment(partialDates[0].startFirstPartial)});
data.push({ eventName: 'Inicio de segundo parcial', calendar: 'Other', color: 'green', date:moment(partialDates[0].startSecondPartial)});
data.push({ eventName: 'Inicio de tercer parcial', calendar: 'Other', color: 'green', date:moment(partialDates[0].startThirdPartial)});
console.log("a")
}
xhr.open("GET", "/api/timeAssignment/");
xhr.responseType = "text";
xhr.send();
var calendar = new Calendar('#calendar', data);
}();
I'm trying to push the information I grab with Ajax into the array data the events that I want the user to see, while it does add them to the array and successfully in the calendar, the function that draws a square doesn't seems to add the new elements in the array. This seems to be because the next function is called before:
todaysEvents.forEach(function(ev) {
var evSpan = createElement('span', ev.color);
element.appendChild(evSpan);
});
I don't really understand why that function is called before others like Calendar.prototype.renderEvents = function(events, ele) {}. Is there a way I can call it after adding elements to the array like the others? Is my approach incorrect?

Odoo 13 : Error Js "Could not find client action"

I received the following error: Could not find client action eacta_previsionnel_hebdomadaire
XML code
<record id="eacta_previsionnel_report_action_client" model="ir.actions.client" >
<field name="name">Prévisionnel hebdomadaire</field>
<field name="tag">eacta_previsionnel_hebdomadaire</field>
</record>
JS code :
odoo.define('eacta_previsionnel.eacta_previsionnel_hebdomadaire', function (require) {
'use strict';
var core = require('web.core');
var Widget = require('web.Widget');
var ControlPanelMixin = require('web.ControlPanelMixin');
var AbstractAction = require('web.AbstractAction');
var SearchView = require('web.SearchView');
var data = require('web.data');
var pyeval = require('web.pyeval');
var field_utils = require('web.field_utils');
var session = require('web.session');
var datepicker = require('web.datepicker');
var QWeb = core.qweb;
var _t = core._t;
var ClientAction = AbstractAction.extend(ControlPanelMixin, {
custom_events: {
search: '_onSearch',
},
events:{
'change .o_eacta_date_start': 'on_change_date_start',
'change .o_mps_save_input_text': 'save_line_prevision',
'click .o_eacta_product_name': 'open_eacta_product',
'click .o_eacta_variete_name': 'open_eacta_plantation',
'click .o_eacta_next_week': 'on_click_next_week',
'click .o_eacta_prev_week': 'on_click_prev_week',
},
init: function(parent, action) {
this.actionManager = parent;
this.action = action;
this.domain = [];
return this._super.apply(this, arguments);
},
render_search_view: function(){
var self = this;
var defs = [];
this._rpc({
model: 'ir.model.data',
method: 'get_object_reference',
args: ['eacta_mrp_base', 'eacta_search_mrp_farm_plantation'],
})
.then(function(view_id){
self.dataset = new data.DataSetSearch(this, 'eacta.r.variete.serre.period');
self.loadFieldView(self.dataset, view_id[1], 'search')
.then(function (fields_view) {
self.fields_view = fields_view;
var options = {
$buttons: $("<div>"),
action: this.action,
disable_groupby: true,
};
self.searchview = new SearchView(self, self.dataset, self.fields_view, options);
self.searchview.appendTo($("<div>")).then(function () {
self.$searchview_buttons = self.searchview.$buttons.contents();
self.update_cp();
defs.push(self.update_cp());
});
});
});
},
willStart: function() {
return this.get_html();
},
start: function() {
var self = this;
this.render_search_view();
return this._super.apply(this, arguments).then(function () {
self.$el.html(self.html);
});
},
re_renderElement: function() {
this.$el.html(this.html);
this.update_cp();
},
open_eacta_product: function(e){
this.do_action({
type: 'ir.actions.act_window',
res_model: "eacta.conf.culture",
res_id: parseInt($(e.target).data('product')),
views: [[false, 'form']],
});
},
open_eacta_plantation: function(e){
this.do_action({
type: 'ir.actions.act_window',
res_model: "eacta.r.variete.serre.period",
res_id: parseInt($(e.target).data('plantation')),
views: [[false, 'form']],
});
},
save_line_prevision: function(e){
var self = this;
var $input = $(e.target);
var target_value;
try {
target_value = field_utils.parse.float($input.val().replace(String.fromCharCode(8209), '-'));
} catch(err) {
return this.do_warn(_t("Wrong value entered!"), err);
}
return this._rpc({
model: 'eacta.data.recolte.previsionnel',
method: 'save_line_prevision',
args: [field_utils.parse.float($input.val()), parseInt($input.data('plantation')),$input.data('date')],
})
.done(function(res){
self.get_html().then(function() {
self.re_renderElement();
self.update_cp();
});
});
},
on_change_date_start: function(e){
var self = this;
var $input = $(".o_eacta_date_start").val();
var target_value;
try {
if ($input == ''){
this.do_warn(_t("Wrong value entered!"), "<ul><li>Date de debut</li></ul>");
return;
}
// target_value = field_utils.format.date(field_utils.parse.date($input, {}, {isUTC: true}));
} catch(err) {
return this.do_warn(_t("Wrong value entered!"), err);
}
return this._rpc({
model: 'eacta.previsionnel.hebdomadaire',
method: 'search',
args: [[]],
})
.then(function(res){
return self._rpc({
model: 'eacta.previsionnel.hebdomadaire',
method: 'write',
args: [res, {'date_start': $input}],
})
.done(function(result){
self.get_html().then(function() {
self.re_renderElement();
self.update_cp();
});
});
});
},
on_click_next_week: function(e){
var self = this;
var date = self.operation_date("next",7);
var max_next_date = new Date(date[2], parseInt(date[1])-1,date[0])
var date_max = new Date($('.o_eacta_date_start').getAttributes()["date-max"]);
if (max_next_date > date_max)
$(".o_eacta_date_start").val(field_utils.parse.date(date_max).format('DD/MM/YYYY'));
else
$(".o_eacta_date_start").val(date[0] + "/" + date[1] + "/" + date[2]);
self.on_change_date_start();
},
on_click_prev_week: function(e){
var self = this;
var date = self.operation_date("prev",7);
var min_prev_date = new Date(date[2], parseInt(date[1])-1,date[0])
var date_min = new Date($('.o_eacta_date_start').getAttributes()["date-min"]);
if (min_prev_date < date_min)
$(".o_eacta_date_start").val(field_utils.parse.date(date_min).format('DD/MM/YYYY'));
else
$(".o_eacta_date_start").val(date[0] + "/" + date[1] + "/" + date[2]);
self.on_change_date_start();
},
operation_date: function(operation,nbr_day){
var counter = 0;
counter = counter + nbr_day;
var today = new Date($(".o_eacta_date_start").datepicker( "getDate" ));
if (operation == "next")
today.setDate(today.getDate() + counter);
else if (operation == "prev")
today.setDate(today.getDate() - counter);
var formattedDate = new Date(today);
var d = ("0" + formattedDate.getDate()).slice(-2);
var m = ("0" + (formattedDate.getMonth() + 1)).slice(-2);
var y = formattedDate.getFullYear();
return [d,m,y]
},
get_html: function() {
var self = this;
return this._rpc({
model: 'eacta.previsionnel.hebdomadaire',
method: 'get_html',
args: [this.domain],
})
.then(function (result) {
self.html = result.html;
self.report_context = result.report_context;
});
},
update_cp: function() {
var self = this;
self.readonly_input_previsionnel();
self.enabled_input_previsionnel();
self.sous_total_previsionnel();
self.total_previsionnel();
self.total_sous_total_previsionnel();
self.visibility_icon_next();
self.visibility_icon_prev();
this.update_control_panel({
breadcrumbs: this.actionManager.get_breadcrumbs(),
cp_content: {
$buttons: this.$buttons,
$searchview: this.searchview.$el,
// $searchview_buttons: this.$searchview_buttons,
$searchview_buttons: this.$searchview_buttons
},
searchview: this.searchview,
});
},
total_previsionnel: function() {
$('.demand_forecast').each(function () {
var sum = 0.00
$(this).find('.text-right .o_mps_save_input_text').each(function () {
sum += Number(field_utils.parse.float($(this).context.value));
});
$(this).find('.o_mps_save_input_text_total').html(field_utils.format.float(sum));
});
},
sous_total_previsionnel: function(){
var list_periode = [];
var sum = 0.00;
$('tr.demand_forecast:first td.text-right input').each(function () {
list_periode.push($(this)[0].attributes['data-date'].value);
});
for (var i = 0;i< list_periode.length;i++){
$('.demand_forecast') .parent() .each(function () {
sum = 0.00;
$(this).find('input[data-date='+list_periode[i]+']').each(function () {
sum += field_utils.parse.float($(this).context.value);
});
$(this).parent().find('span[class=o_eacta_sous_total][data-date='+list_periode[i]+']').html(field_utils.format.float(sum));
});
}
},
total_sous_total_previsionnel: function(){
var sum = 0.00;
$('.demand_forecast').parent().parent().each(function () {
$(this).find('span[class=o_eacta_sous_total]').each(function () {
sum += field_utils.parse.float($(this).text());
});
$(this).find('tr.active td:last .o_eacta_total_sous_total').html(field_utils.format.float(sum));
sum = 0.00;
});
},
enabled_input_previsionnel: function() {
$('.demand_forecast').each(function () {
$(this).find('.eacta_readonly').each(function () {
$(this).prop('disabled', true);
$(this).prop('readonly', true);
$(this).css('background-color', 'transparent');
$(this).css('color', '#AEA79F');
});
});
},
readonly_input_previsionnel: function() {
$('.demand_forecast').each(function () {
$(this).find('.eacta_input_span_readonly').each(function () {
$(this).prop('disabled', true);
$(this).prop('readonly', true);
$(this).css('background-color', '#ffffff');
$(this).css('border', 'medium none');
});
});
},
visibility_icon_next:function(){
var self = this;
var date = self.operation_date("next",7);
var max_next_date = new Date(date[2], parseInt(date[1])-1,date[0])
var date_max = new Date($('.o_eacta_date_start').getAttributes()["date-max"]);
if (max_next_date > date_max)
$('.o_eacta_next_week').css('visibility', 'hidden');
else
$('.o_eacta_next_week').css('visibility', 'visible');
},
visibility_icon_prev:function(){
var self = this;
var date = self.operation_date("prev",7);
var min_prev_date = new Date(date[2], parseInt(date[1])-1,date[0])
var date_min = new Date($('.o_eacta_date_start').getAttributes()["date-min"]);
if (min_prev_date < date_min)
$('.o_eacta_prev_week').css('visibility', 'hidden');
else
$('.o_eacta_prev_week').css('visibility', 'visible');
},
_onSearch: function (event) {
var session = this.getSession();
var result = pyeval.eval_domains_and_contexts({
contexts: [session.user_context],
domains: event.data.domains
});
this.domain = result.domain;
this.update_cp();
this.get_html().then(this.re_renderElement.bind(this));
},
});
core.action_registry.add('eacta_previsionnel_hebdomadaire', ClientAction );
return ClientAction ;
});
I am using Odoo 13
What I am doing wrong here?
Let me know if you need more details.
thanks!

Moment.js legend instead of color to change as an icon

I am still learning Js and I would like to use this template for calendar that I found here https://codepen.io/peanav/pen/ulkof.
I want to add additional icons on the date , For example on the calendar July 27 I can add an icon like a wine symbol on the said date instead of color. I tried to add a background image in a certain class in css such as the .blue but it won't work.
<style>
.blue { background: rgba(156, 202, 235, 1); }
.orange { background: rgba(247, 167, 0, 1); }
.green { background: rgba(153, 198, 109, 1); }
.yellow { background: rgba(249, 233, 0, 1); }
.entry.blue:after { background: rgba(156, 202, 235, 1); }
.entry.orange:after { background: rgba(247, 167, 0, 1); }
.entry.green:after { background: rgba(153, 198, 109, 1); }
.entry.yellow:after { background: rgba(249, 233, 0, 1); }
</style>
!function() {
var today = moment();
function Calendar(selector, events) {
this.el = document.querySelector(selector);
this.events = events;
this.current = moment().date(1);
this.draw();
var current = document.querySelector('.today');
if(current) {
var self = this;
window.setTimeout(function() {
self.openDay(current);
}, 500);
}
}
Calendar.prototype.draw = function() {
//Create Header
this.drawHeader();
//Draw Month
this.drawMonth();
this.drawLegend();
}
Calendar.prototype.drawHeader = function() {
var self = this;
if(!this.header) {
//Create the header elements
this.header = createElement('div', 'header');
this.header.className = 'header';
this.title = createElement('h1');
var right = createElement('div', 'right');
right.addEventListener('click', function() { self.nextMonth(); });
var left = createElement('div', 'left');
left.addEventListener('click', function() { self.prevMonth(); });
//Append the Elements
this.header.appendChild(this.title);
this.header.appendChild(right);
this.header.appendChild(left);
this.el.appendChild(this.header);
}
this.title.innerHTML = this.current.format('MMMM YYYY');
}
Calendar.prototype.drawMonth = function() {
var self = this;
this.events.forEach(function(ev) {
ev.date = moment(ev.date);
});
if(this.month) {
this.oldMonth = this.month;
this.oldMonth.className = 'month out ' + (self.next ? 'next' : 'prev');
this.oldMonth.addEventListener('webkitAnimationEnd', function() {
self.oldMonth.parentNode.removeChild(self.oldMonth);
self.month = createElement('div', 'month');
self.backFill();
self.currentMonth();
self.fowardFill();
self.el.appendChild(self.month);
window.setTimeout(function() {
self.month.className = 'month in ' + (self.next ? 'next' : 'prev');
}, 16);
});
} else {
this.month = createElement('div', 'month');
this.el.appendChild(this.month);
this.backFill();
this.currentMonth();
this.fowardFill();
this.month.className = 'month new';
}
}
Calendar.prototype.backFill = function() {
var clone = this.current.clone();
var dayOfWeek = clone.day();
if(!dayOfWeek) { return; }
clone.subtract('days', dayOfWeek+1);
for(var i = dayOfWeek; i > 0 ; i--) {
this.drawDay(clone.add('days', 1));
}
}
Calendar.prototype.fowardFill = function() {
var clone = this.current.clone().add('months', 1).subtract('days', 1);
var dayOfWeek = clone.day();
if(dayOfWeek === 6) { return; }
for(var i = dayOfWeek; i < 6 ; i++) {
this.drawDay(clone.add('days', 1));
}
}
Calendar.prototype.currentMonth = function() {
var clone = this.current.clone();
while(clone.month() === this.current.month()) {
this.drawDay(clone);
clone.add('days', 1);
}
}
Calendar.prototype.getWeek = function(day) {
if(!this.week || day.day() === 0) {
this.week = createElement('div', 'week');
this.month.appendChild(this.week);
}
}
Calendar.prototype.drawDay = function(day) {
var self = this;
this.getWeek(day);
//Outer Day
var outer = createElement('div', this.getDayClass(day));
outer.addEventListener('click', function() {
self.openDay(this);
});
//Day Name
var name = createElement('div', 'day-name', day.format('ddd'));
//Day Number
var number = createElement('div', 'day-number', day.format('DD'));
//Events
var events = createElement('div', 'day-events');
this.drawEvents(day, events);
outer.appendChild(name);
outer.appendChild(number);
outer.appendChild(events);
this.week.appendChild(outer);
}
Calendar.prototype.drawEvents = function(day, element) {
if(day.month() === this.current.month()) {
var todaysEvents = this.events.reduce(function(memo, ev) {
if(ev.date.isSame(day, 'day')) {
memo.push(ev);
}
return memo;
}, []);
todaysEvents.forEach(function(ev) {
var evSpan = createElement('span', ev.color);
element.appendChild(evSpan);
});
}
}
Calendar.prototype.getDayClass = function(day) {
classes = ['day'];
if(day.month() !== this.current.month()) {
classes.push('other');
} else if (today.isSame(day, 'day')) {
classes.push('today');
}
return classes.join(' ');
}
Calendar.prototype.openDay = function(el) {
var details, arrow;
var dayNumber = +el.querySelectorAll('.day-number')[0].innerText || +el.querySelectorAll('.day-number')[0].textContent;
var day = this.current.clone().date(dayNumber);
var currentOpened = document.querySelector('.details');
//Check to see if there is an open detais box on the current row
if(currentOpened && currentOpened.parentNode === el.parentNode) {
details = currentOpened;
arrow = document.querySelector('.arrow');
} else {
//Close the open events on differnt week row
//currentOpened && currentOpened.parentNode.removeChild(currentOpened);
if(currentOpened) {
currentOpened.addEventListener('webkitAnimationEnd', function() {
currentOpened.parentNode.removeChild(currentOpened);
});
currentOpened.addEventListener('oanimationend', function() {
currentOpened.parentNode.removeChild(currentOpened);
});
currentOpened.addEventListener('msAnimationEnd', function() {
currentOpened.parentNode.removeChild(currentOpened);
});
currentOpened.addEventListener('animationend', function() {
currentOpened.parentNode.removeChild(currentOpened);
});
currentOpened.className = 'details out';
}
//Create the Details Container
details = createElement('div', 'details in');
//Create the arrow
var arrow = createElement('div', 'arrow');
//Create the event wrapper
details.appendChild(arrow);
el.parentNode.appendChild(details);
}
var todaysEvents = this.events.reduce(function(memo, ev) {
if(ev.date.isSame(day, 'day')) {
memo.push(ev);
}
return memo;
}, []);
this.renderEvents(todaysEvents, details);
arrow.style.left = el.offsetLeft - el.parentNode.offsetLeft + 27 + 'px';
}
Calendar.prototype.renderEvents = function(events, ele) {
//Remove any events in the current details element
var currentWrapper = ele.querySelector('.events');
var wrapper = createElement('div', 'events in' + (currentWrapper ? ' new' : ''));
events.forEach(function(ev) {
var div = createElement('div', 'event');
var square = createElement('div', 'event-category ' + ev.color);
var span = createElement('span', '', ev.eventName);
div.appendChild(square);
div.appendChild(span);
wrapper.appendChild(div);
});
if(!events.length) {
var div = createElement('div', 'event empty');
var span = createElement('span', '', 'No Events');
div.appendChild(span);
wrapper.appendChild(div);
}
if(currentWrapper) {
currentWrapper.className = 'events out';
currentWrapper.addEventListener('webkitAnimationEnd', function() {
currentWrapper.parentNode.removeChild(currentWrapper);
ele.appendChild(wrapper);
});
currentWrapper.addEventListener('oanimationend', function() {
currentWrapper.parentNode.removeChild(currentWrapper);
ele.appendChild(wrapper);
});
currentWrapper.addEventListener('msAnimationEnd', function() {
currentWrapper.parentNode.removeChild(currentWrapper);
ele.appendChild(wrapper);
});
currentWrapper.addEventListener('animationend', function() {
currentWrapper.parentNode.removeChild(currentWrapper);
ele.appendChild(wrapper);
});
} else {
ele.appendChild(wrapper);
}
}
Calendar.prototype.drawLegend = function() {
var legend = createElement('div', 'legend');
var calendars = this.events.map(function(e) {
return e.calendar + '|' + e.color;
}).reduce(function(memo, e) {
if(memo.indexOf(e) === -1) {
memo.push(e);
}
return memo;
}, []).forEach(function(e) {
var parts = e.split('|');
var entry = createElement('span', 'entry ' + parts[1], parts[0]);
legend.appendChild(entry);
});
this.el.appendChild(legend);
}
Calendar.prototype.nextMonth = function() {
this.current.add('months', 1);
this.next = true;
this.draw();
}
Calendar.prototype.prevMonth = function() {
this.current.subtract('months', 1);
this.next = false;
this.draw();
}
window.Calendar = Calendar;
function createElement(tagName, className, innerText) {
var ele = document.createElement(tagName);
if(className) {
ele.className = className;
}
if(innerText) {
ele.innderText = ele.textContent = innerText;
}
return ele;
}
}();
!function() {
var data = [
{ eventName: 'Lunch Meeting w/ Mark', calendar: 'Work', color: 'orange' ,date:'2018-07-27'},
{ eventName: 'Interview - Jr. Web Developer', calendar: 'Work', color: 'orange',date:'2018-06-28' },
{ eventName: 'Demo New App to the Board', calendar: 'Work', color: 'orange',date:'2018-06-29' },
{ eventName: 'Dinner w/ Marketing', calendar: 'Work', color: 'orange',date:'2018-06-30' }
];
function addDate(ev) {
}
var calendar = new Calendar('#calendar', data);
}();

Since the color property in the data is really being used as a class name and the div you should be able to adjust the .blue class, for example to point to an image. Try using the content CSS property to change to an icon like this:
.blue { content:url("https://www.freeiconspng.com/uploads/wine-icon-30.png"); }

prevent slideshow from refresh or load content in div

I have a nice working image slideshow, but every time when i open a new page from the menu, the slideshow starts from the beginning. I want it to go on where it was while entering a new page. Now could there be a possibility to change it in the code of my slideshow, but maybe a better solution is to open my content in a div with AJAX, so the whole page doesn't refresh.
I found this on the web:
<div id="navigatie">
<div id="buttons">
<a class="menu" id="page1" href="#">Home</a><span>|</span>
<a class="menu" id="page2" href="#">Projects</a><span>|</span>
<a class="menu" id="page3" href="#">About</a><span>|</span>
</div>
</div>
<script>
$(document).ready(function() {
$("#page1").click(function(){
$('#content').load('index.php #content');
});
$("#page2").click(function(){
$('#content').load('projects.php #content');
});
$("#page3").click(function(){
$('#content').load('about.php #content');
});
});
</script>
But this doesn't workout very well because when i start with my index page and go to projects (where lightbox is present), i get full images instead of thumbnails.(This was because the extended files were not in #content) i get index.php# instead of projects.php. Maybe i should use an easier solution, but im getting stuck. Can someone help me out please?
Edit: Let me also share the code of the slideshow with you, perhaps there is a possibility to resume after loading a new page/refresh.
/*!
* crosscover v1.0.2
* Carousel of a simple background image using jquery and animate.css.
* http://git.blivesta.com/crosscover
* License : MIT
* Author : blivesta <enmt#blivesta.com> (http://blivesta.com/)
*/
;(function(factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof exports === 'object') {
module.exports = factory(require('jquery'));
} else {
factory(jQuery);
}
}(function($) {
'use strict';
var namespace = 'crosscover';
var __ = {
init: function(options) {
options = $.extend({
inClass: 'fade-in',
outClass: 'fade-out',
interval: 5000,
startIndex: 0,
autoPlay: true,
dotsNav: true,
controller: false,
controllerClass: 'crosscover-controller',
prevClass: 'crosscover-prev',
nextClass: 'crosscover-next',
playerClass: 'crosscover-player',
playerInnerHtml: '<span class="crosscover-icon-player"></span>',
prevInnerHtml: '<span class="crosscover-icon-prev"></span>',
nextInnerHtml: '<span class="crosscover-icon-next"></span>'
}, options);
__.settings = {
currentIndex: options.startIndex,
timer: null,
coverBaseClass:'crosscover-item',
coverWaitClass:'is-wait',
coverActiveClass:'is-active',
playerActiveClass: 'is-playing',
dotsNavClass: 'crosscover-dots'
};
return this.each(function() {
var _this = this;
var $this = $(this);
var data = $this.data(namespace);
var $item = $this.children('.crosscover-list').children('.' + __.settings.coverBaseClass);
if (!data) {
options = $.extend({}, options);
$this.data(namespace, {
options: options
});
if (options.dotsNav) __.createDots.call(_this, $item);
if (options.controller) __.createControler.call(_this, $item);
__.setup.call(_this, $item);
}
});
},
setup: function($item) {
var _this = this;
var $this = $(this);
var options = $this.data(namespace).options;
$item.each(function(index) {
var $self = $(this);
var image = $self.find('img').attr('src');
$self
.addClass(__.settings.coverBaseClass, __.settings.coverWaitClass)
.css({
'background-image': 'url(' + image + ')'
});
});
return __.slideStart.call(_this, $item);
},
slideStart: function($item) {
var _this = this;
__.autoPlayStart.call(_this, $item);
__.show.call(_this, $item);
},
createDots: function($item) {
var _this = this;
var $this = $(this);
var options = $this.data(namespace).options;
var len = $item.length;
$this
.append(
$('<ul>')
.addClass(__.settings.dotsNavClass)
);
for (var i = 0; i < len; i++) {
$this
.children('.' + __.settings.dotsNavClass)
.append(
$('<li>')
.addClass('crosscover-dots-nav-' + i)
.append(
$('<button>')
)
);
}
__.addDots.call(_this, $item);
},
addDots: function($item) {
var _this = this;
var $this = $(this);
var options = $this.data(namespace).options;
var $dots = $this.children('.' + __.settings.dotsNavClass);
var $dot = $dots.children('li').children('button');
$dot.on('click.' + namespace, function(event) {
return __.toggle.call(_this, $item, 'dots', $(this).parent('li').index());
});
},
createControler: function($item) {
var _this = this;
var $this = $(this);
var options = $this.data(namespace).options;
var isClass = options.autoPlay ? __.settings.playerActiveClass : null;
$this
.append(
$('<div>')
.attr({
'data-crosscover-controller': ''
})
.addClass(options.controllerClass)
.append(
$('<button>')
.attr({
'data-crosscover-prev': ''
})
.addClass(options.prevClass)
.html(options.prevInnerHtml)
)
.append(
$('<button>')
.attr({
'data-crosscover-player': ''
})
.addClass(options.playerClass)
.addClass(isClass)
.html(options.playerInnerHtml)
)
.append(
$('<button>')
.attr({
'data-crosscover-next': ''
})
.addClass(options.nextClass)
.html(options.nextInnerHtml)
)
);
return __.addControler.call(_this, $item);
},
addControler: function($item) {
var _this = this;
var $this = $(this);
var options = $this.data(namespace).options;
var $controller = $this.children('[data-crosscover-controller]');
var $navPrev = $controller.children('[data-crosscover-prev]');
var $navNext = $controller.children('[data-crosscover-next]');
var $navPlayPause = $controller.children('[data-crosscover-player]');
$navPlayPause.on('click.' + namespace, function(event) {
$(this).blur();
return __.playToggle.call(_this, $item, $(this));
});
$navPrev.on('click.' + namespace, function(event) {
$(this).blur();
return __.toggle.call(_this, $item, 'prev');
});
$navNext.on('click.' + namespace, function(event) {
$(this).blur();
return __.toggle.call(_this, $item, 'next');
});
},
playToggle: function($item) {
var _this = this;
var $this = $(this);
var options = $this.data(namespace).options;
var $navPlayPause = $this.find('[data-crosscover-player]');
if (options.autoPlay) {
options.autoPlay = false;
$navPlayPause
.removeClass(__.settings.playerActiveClass)
.addClass(options.playClass);
return __.autoPlayStop.call(_this);
} else {
options.autoPlay = true;
$navPlayPause.addClass(__.settings.playerActiveClass);
return __.autoPlayStart.call(_this, $item);
}
},
toggle: function($item, setting, num) {
var _this = this;
var $this = $(this);
var options = $this.data(namespace).options;
__.hide.call(_this, $item);
if (setting === 'next') {
__.settings.currentIndex++;
} else if (setting === 'prev') {
__.settings.currentIndex--;
} else if (setting === 'dots') {
__.settings.currentIndex = num;
}
if (__.settings.currentIndex >= $item.length) {
__.settings.currentIndex = 0;
} else if (__.settings.currentIndex <= -1) {
__.settings.currentIndex = $item.length - 1;
}
__.autoPlayStart.call(_this, $item);
return __.show.call(_this, $item);
},
show: function($item) {
var $this = $(this);
var options = $this.data(namespace).options;
if(options.dotsNav) {
$this
.children('.' + __.settings.dotsNavClass)
.children('li')
.eq(__.settings.currentIndex)
.addClass('is-active')
.children('button')
.prop('disabled', true);
}
return $item
.eq(__.settings.currentIndex)
.addClass(__.settings.coverActiveClass)
.removeClass(__.settings.coverWaitClass)
.addClass(options.inClass)
.csscallbacks('animationEnd',function() {
$(this)
.removeClass(options.inClass + ' ' + __.settings.coverWaitClass)
.addClass(__.settings.coverActiveClass);
});
},
hide: function($item) {
var $this = $(this);
var options = $this.data(namespace).options;
if(options.dotsNav) {
$this
.children('.' + __.settings.dotsNavClass)
.children('li')
.eq(__.settings.currentIndex)
.removeClass('is-active')
.children('button')
.prop('disabled', false);
}
return $item
.eq(__.settings.currentIndex)
.removeClass(__.settings.coverActiveClass)
.addClass(options.outClass)
.csscallbacks('animationEnd', function() {
$(this)
.removeClass(options.outClass + ' ' + __.settings.coverActiveClass)
.addClass(__.settings.coverWaitClass);
});
},
autoPlayStart: function($item) {
var _this = this;
var $this = $(this);
var options = $this.data(namespace).options;
if (options.autoPlay) {
__.autoPlayStop.call(_this);
__.settings.timer = setTimeout(function() {
__.toggle.call(_this, $item, 'next');
__.autoPlayStart.call(_this, $item);
}, options.interval);
}
return _this;
},
autoPlayStop: function() {
return clearTimeout(__.settings.timer);
},
currentIndex: function() {
return __.settings.currentIndex;
}
};
$.fn.crosscover = function(method) {
if (__[method]) {
return __[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return __.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.' + namespace);
}
};
$.fn.csscallbacks = function(type, callback){
var _animationStart = 'animationstart webkitAnimationStart oAnimationStart';
var _animationEnd = 'animationend webkitAnimationEnd oAnimationEnd';
var _transitionEnd = "transitionend webkitTransitionEnd oTransitionEnd";
if(type === 'animationStart'){
type = _animationStart;
} else if(type === 'animationEnd'){
type = _animationEnd;
} else if(type === 'transitionEnd'){
type = _transitionEnd;
}
return this.each(function(index) {
var $this = $(this);
$this.on(type, function(){
$this.off(type);
return callback.call(this);
});
});
};
}));

Its fixed, i just load my content in the #content div and i changed every 'href' to #Home (or name i like) in combination with Benalman's hashchange script

S3Slider jQuery Stop After One Rotation

I'm using an S3Slider on WordPress. I'd like it to stop after one rotation, but can't seem to figure out the setting.
The following code is used in the slider.js file. Right now it's live at http://beaconwc.com on the frontpage, would like it to show the two slides and then stop until the user refreshes the page.
(function($){
$.fn.s3Slider = function(vars) {
var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var capOpacity = vars.captionOpacity || .7;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image div");
itemsSpan.css({
'opacity': capOpacity,
'display': 'none'
});
items.each(function(i) {
$(items[i]).mouseover(function() {
mOver = true;
});
$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});
});
var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}
var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}
makeSlider();
};
})(jQuery);
Thanks!
Source
http://www.serie3.info/s3slider/

Develop Reference

JavaScript is the programming language of the Web.

Why is This Date Causing an Error? - javascript

Related

Why is a function running before the others?

Odoo 13 : Error Js "Could not find client action"

Moment.js legend instead of color to change as an icon

prevent slideshow from refresh or load content in div

S3Slider jQuery Stop After One Rotation

Categories

Resources