We Keep Coding

Change FabricJS objects position and size when canvas width and height is changed

i'm trying to update fabric js objects position and size when when the canvas box width and height is changed
i have used PDFJS library with fabricjs and added drawing canvas on each pdf page (worked perfectly).
but my problem when i zoom in or out the pdf pages, fabricjs objects starts changing there position. is there any way i can fix this or call an event for fabric js ?
here's what my code looks like:
$(".spread .page").each(function () {
$(this).append(
"<div class='canvasArea'><canvas></canvas></div>"
);
});
$(".canvasArea canvas").each(function () {
let target = $(this).closest(".page").attr("data-page-number");
let bookmarkTarget = $(this).closest(".spread")
$("#bookmark").on('click', function(){
bookmarkTarget.addClass("bookmark")
})
$(this).attr("id", target);
var canvas = new fabric.Canvas(target, {
isDrawingMode:false,
});
function addText(e) {
var customtxt = new fabric.IText('Tap and Type', {
fontFamily: 'sans serif',
fontSize: 20,
fontWeight: 400,
fill: 'red',
fontStyle: 'normal',
top: e.offsetY,
cursorDuration: 500,
left: e.offsetX,
});
canvas.add(customtxt);
customtxt.fill = $("#textmode-color").val();
customtxt.fontSize = $("#text-size").val();
}
function addRect() {
var rect = new fabric.Rect({
left: 100,
top: 50,
fill: 'transparent',
stroke: 'rgb(202 28 28 / 73%)',
strokeWidth: 3,
width: 200,
height: 100,
});
canvas.add(rect);
}
canvas.setWidth($(".page").width());
canvas.setHeight($(".page").height());
$(".tool-button").on("click", function () {
$(".tool-button").removeClass("active");
$(this).addClass("active");
const addRectF = () => {
if ($("#addRect").hasClass("active")) {
canvas.on("mouse:up", function (options) {
if (options.target == null) addRect();
canvas.renderAll();
});
} else {
canvas.off("mouse:up", );
}
}
addRectF();
});
$(".tool-button").on("click", function () {
$(".tool-button").removeClass("active");
$(this).addClass("active");
const addTextF = () => {
if ($("#addText").hasClass("active")) {
canvas.on("mouse:down", function (options) {
if (options.target == null) addText(options.e);
canvas.renderAll()
});
} else {
canvas.off("mouse:down", );
}
}
addTextF();
});
});

Js file doesn't work when imported in Angular project

I've used an HTML template in my angular project. Everything seems fine until I realized that some js files doesn't work which affected the whole project. The most important part is even the main.js file didn't work. My lect said to ignore the js and recreate which part doesn't work but I'm tryna use this file because there are many things in there.
Here are the codes in the main.js file, is there something here that is not compatible with Angular?
This is my first time using StackOverflow so I'm sorry if there's anything wrong with the way I'm asking
(function () {
"use strict";
/**
* Easy selector helper function
*/
const select = (el, all = false) => {
el = el.trim()
if (all) {
return [...document.querySelectorAll(el)]
} else {
return document.querySelector(el)
}
}
/**
* Easy event listener function
*/
const on = (type, el, listener, all = false) => {
let selectEl = select(el, all)
if (selectEl) {
if (all) {
selectEl.forEach(e => e.addEventListener(type, listener))
} else {
selectEl.addEventListener(type, listener)
}
}
}
/**
* Easy on scroll event listener
*/
const onscroll = (el, listener) => {
el.addEventListener('scroll', listener)
}
/**
* Navbar links active state on scroll
*/
let navbarlinks = select('#navbar .scrollto', true)
const navbarlinksActive = () => {
let position = window.scrollY + 200
navbarlinks.forEach(navbarlink => {
if (!navbarlink.hash) return
let section = select(navbarlink.hash)
if (!section) return
if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {
navbarlink.classList.add('active')
} else {
navbarlink.classList.remove('active')
}
})
}
window.addEventListener('load', navbarlinksActive)
onscroll(document, navbarlinksActive)
/**
* Scrolls to an element with header offset
*/
const scrollto = (el) => {
let header = select('#header')
let offset = header.offsetHeight
let elementPos = select(el).offsetTop
window.scrollTo({
top: elementPos - offset,
behavior: 'smooth'
})
}
/**
* Toggle .header-scrolled class to #header when page is scrolled
*/
let selectHeader = select('#header')
if (selectHeader) {
const headerScrolled = () => {
if (window.scrollY > 100) {
selectHeader.classList.add('header-scrolled')
} else {
selectHeader.classList.remove('header-scrolled')
}
}
window.addEventListener('load', headerScrolled)
onscroll(document, headerScrolled)
}
/**
* Back to top button
*/
let backtotop = select('.back-to-top')
if (backtotop) {
const toggleBacktotop = () => {
if (window.scrollY > 100) {
backtotop.classList.add('active')
} else {
backtotop.classList.remove('active')
}
}
window.addEventListener('load', toggleBacktotop)
onscroll(document, toggleBacktotop)
}
/**
* Mobile nav toggle
*/
on('click', '.mobile-nav-toggle', function(e) {
select('#navbar').classList.toggle('navbar-mobile')
this.classList.toggle('bi-list')
this.classList.toggle('bi-x')
})
/**
* Mobile nav dropdowns activate
*/
on('click', '.navbar .dropdown > a', function(e) {
if (select('#navbar').classList.contains('navbar-mobile')) {
e.preventDefault()
this.nextElementSibling.classList.toggle('dropdown-active')
}
}, true)
/**
* Scrool with ofset on links with a class name .scrollto
*/
on('click', '.scrollto', function(e) {
if (select(this.hash)) {
e.preventDefault()
let navbar = select('#navbar')
if (navbar.classList.contains('navbar-mobile')) {
navbar.classList.remove('navbar-mobile')
let navbarToggle = select('.mobile-nav-toggle')
navbarToggle.classList.toggle('bi-list')
navbarToggle.classList.toggle('bi-x')
}
scrollto(this.hash)
}
}, true)
/**
* Scroll with ofset on page load with hash links in the url
*/
window.addEventListener('load', () => {
if (window.location.hash) {
if (select(window.location.hash)) {
scrollto(window.location.hash)
}
}
});
/**
* Preloader
*/
let preloader = select('#preloader');
if (preloader) {
window.addEventListener('load', () => {
preloader.remove()
});
}
/**
* Clients Slider
*/
new Swiper('.clients-slider', {
speed: 400,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false
},
slidesPerView: 'auto',
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
breakpoints: {
320: {
slidesPerView: 2,
spaceBetween: 40
},
480: {
slidesPerView: 3,
spaceBetween: 60
},
640: {
slidesPerView: 4,
spaceBetween: 80
},
992: {
slidesPerView: 6,
spaceBetween: 120
}
}
});
/**
* Porfolio isotope and filter
*/
window.addEventListener('load', () => {
let portfolioContainer = select('.portfolio-container');
if (portfolioContainer) {
let portfolioIsotope = new Isotope(portfolioContainer, {
itemSelector: '.portfolio-item'
});
let portfolioFilters = select('#portfolio-flters li', true);
on('click', '#portfolio-flters li', function(e) {
e.preventDefault();
portfolioFilters.forEach(function(el) {
el.classList.remove('filter-active');
});
this.classList.add('filter-active');
portfolioIsotope.arrange({
filter: this.getAttribute('data-filter')
});
portfolioIsotope.on('arrangeComplete', function() {
AOS.refresh()
});
}, true);
}
});
/**
* Initiate portfolio lightbox
*/
const portfolioLightbox = GLightbox({
selector: '.portfolio-lightbox'
});
/**
* Portfolio details slider
*/
new Swiper('.portfolio-details-slider', {
speed: 400,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
/**
* Testimonials slider
*/
new Swiper('.testimonials-slider', {
speed: 600,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false
},
slidesPerView: 'auto',
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
/**
* Animation on scroll
*/
window.addEventListener('load', () => {
AOS.init({
duration: 1000,
easing: "ease-in-out",
once: true,
mirror: false
});
});
})()```

You need to export this code logic, and import it in the files that you need it in.
Let's put all your code in a file called a.js.
Your file becomes
export default a = (function () {
"use strict";
...
let's create a file called b.js on the same level as a.js
And later you import it in b.js as follows
import a from "./a"
Note
Once you import a.js into any file, all the logic inside it will be automatically executed (you can see the function execution at the end) because the function self executes.

Reveal more text on click for multiple "show more" buttons. Duplicate didn't work

This opens more text when I click a button. Now I need more of these on a web page. I duplicated the function and renamed in const lines the names to menubutton2 and dropdownmenu3 but the second button doesn't work
import wixAnimations from 'wix-animations';
$w.onReady(function() {
activeMenu();
});
function activeMenu() {
const menuButton = $w('#menuButton');
const dropdwonMenu = $w('#dropdownMenu');
const dropdownBoxHeight = 0;
const dropdownAnimation =
wixAnimations.timeline().add(dropdwonMenu, {
y: 0,
duration: 100
});
wixAnimations.timeline().add(dropdwonMenu, {
y: -
dropdownBoxHeight
}).play();
menuButton.onClick(() => {
dropdwonMenu.collapsed ? openMenu() : closeMenu();
});
dropdownAnimation.onReverseComplete(() => {
dropdwonMenu.collapse();
});
function openMenu() {
dropdwonMenu.expand().then(() => {
dropdownAnimation.play();
})
}
function closeMenu() {
dropdownAnimation.reverse();
}
}
import wixAnimations from 'wix-animations';
$w.onReady(function() {
activeMenu();
});
function activeMenu() {
const menuButton = $w('#menuButton2');
const dropdwonMenu = $w('#dropdownMenu2');
const dropdownBoxHeight = 0;
const dropdownAnimation =
wixAnimations.timeline().add(dropdwonMenu, {
y: 0,
duration: 100
});
wixAnimations.timeline().add(dropdwonMenu, {
y: -
dropdownBoxHeight
}).play();
menuButton.onClick(() => {
dropdwonMenu.collapsed ? openMenu() : closeMenu();
});
dropdownAnimation.onReverseComplete(() => {
dropdwonMenu.collapse();
});
function openMenu() {
dropdwonMenu.expand().then(() => {
dropdownAnimation.play();
})
}
function closeMenu() {
dropdownAnimation.reverse();
}
}

Images from Backstretch(backstretch.js) in onepage creeping in to other page's backstretch in Durandal.js

I have used Durandal.js for my SPA. I need to have slideshow of Images as background in certain pages, for which I am using jquery-backstretch. I am fetching images from my web back-end. Everything works fine while navigating between pages in normal speed. But, when I navigate from one of the pages which has backstretch to another one with backstretch very rapidly, Images from backstretch in first page also creeps in second page. When I debugged, only the correct Images were being passed to second page. And also the slideshow is not running in a proper interval. So it must be both the backstretches being invoked.
Please tell me how I can stop the previous backstretch from appearing again. Here are the relevant code snippets.
This is my first page's(with backstretch) viewmodel code.
var id = 0;
var backstetcharray;
function loadbackstretchb() {
backstetcharray = new Array();
$.each(that.products, function (i, item)
{
if(item.ProductBackImage != "")
{
backstetcharray.push("xxxxxxxxxx" + item.ProductBackImage);
}
}
);
$.backstretch(backstetcharray, { duration: 5000, fade: 1500 });
}
var that;
define(['plugins/http', 'durandal/app', 'knockout'], function (http, app, ko) {
var location;
function callback() {
window.location.href = "#individual/"+id;
// this.deactivate();
};
return {
products: ko.observableArray([]),
activate: function () {
currentpage = "products";
that = this;
return http.get('yyyyyyyyyyyyyyy').then(function (response) {
that.products = response;
loadbackstretchb();
});
},
attached: function () {
$(document).ready(function () {
$('.contacticon').on({
'mouseenter': function () {
$(this).animate({ right: 0 }, { queue: false, duration: 400 });
},
'mouseleave': function () {
$(this).animate({ right: -156 }, { queue: false, duration: 400 });
}
});
});
$(document).ready(function () {
$(".mainmenucont").effect("slide", null, 1000);
});
//setTimeout($(".mainmenucont").effect("slide", null, 1000), 1000);
$(document).on("click", ".ind1", function (e) {
// alert("ind1");
id = e.target.id;
// $(".mainmenucont").effect("drop", null, 2000, callback(e.target.id));
$('.mainmenucont').hide('slide', { direction: 'left' }, 1000, callback);
});
}
}
});
This is my second page's(with backstretch) viewmodel code.(To where I am navigating)
var recs;
var open;
var i, count;
var backstetcharray;
function loadbackstretchc() {
backstetcharray = new Array();
$.each(recs, function (i, item) {
if (item.BackgroundImage != "") {
backstetcharray.push("xxxxxxxxxx" + item.BackgroundImage);
}
}
);
$.backstretch(backstetcharray, { duration: 5000, fade: 1500 });
}
var that;
define(['plugins/http', 'durandal/app', 'knockout'], function (http, app, ko) {
var system = require('durandal/system');
var location;
function menucallback() {
window.location.href = location;
// this.deactivate();
};
return {
activate: function (val) {
currentpage = "recipes";
open = val;
that = this;
var pdts;
recs;
var recipeJson = [];
http.get('yyyyyyyyyyyyyy').then(function (response) {
pdts = response;
http.get('yyyyyyyyyyyy').then(function (response1) {
recs = response1;
loadbackstretchc();
$.each(pdts, function (i, item) {
var json = [];
$.each(recs, function (j, jtem) {
if (item.DocumentTypeId == jtem.BelongstoProduct) {
json.push(jtem);
}
});
jsonitem = {}
jsonitem["product"] = item.ProductName;
jsonitem["link"] = "#" + item.UmbracoUrl;
jsonitem["target"] = item.UmbracoUrl;
jsonitem["recipes"] = json;
recipeJson.push(jsonitem);
});
// that.products = recipeJson;
count = recipeJson.length;
i = 0;
return that.products(recipeJson);
});
});
},
attached: function(view) {
$(document).ready(function () {
$('.contacticon').on({
'mouseenter': function () {
$(this).animate({ right: 0 }, { queue: false, duration: 400 });
},
'mouseleave': function () {
$(this).animate({ right: -156 }, { queue: false, duration: 400 });
}
});
});
$(document).ready(function () {
$(".mainmenucont").effect("slide", null, 1000);
});
$(document).on("click", ".recipeclick", function (e) {
console.log(e);
location = "#recipe/" + e.target.id;
$('.mainmenucont').hide('slide', { direction: 'left' }, 1000, menucallback);
});
$(document).on("click", ".locclick", function (e) {
if (e.handled != true) {
if (false == $(this).next().is(':visible')) {
$('#accordion ul').slideUp(300);
}
$(this).next().slideToggle(300);
e.handled = true;
}
});
},
products: ko.observableArray([]),
expand: function() {
++i;
if (i == count) {
$("#" + open).addClass("in");
}
}
};
});

combining two jquery functions for use on the same html page

How can I combine these two jQuery functions ? or the .js . Trying to put them together in the same page makes the latter not work at all.
They work just fine for their job if I only use one on the page, but I need them both.
The first one I have is:
(function ($) {
$(document).ready(function () {
// Dropdown Menu
if (!($.browser.msie && ($.browser.version == 6))) {
$("ul#topnav li:has(ul)").addClass("dropdown");
}
$("ul#topnav li.dropdown").hover(function () {
$('ul:first', this).css({
visibility: "visible",
display: "none"
}).slideDown('normal');
}, function () {
$('ul:first', this).css({
visibility: "hidden"
});
});
$("div.prod_hold").hover(function () {
$('.info', this).css({
visibility: "visible",
display: "none"
}).slideDown('normal');
}, function () {
$('.info', this).css({
visibility: "hidden"
});
});
$("li.cat_hold").hover(function () {
$('.info', this).fadeIn(300);
}, function () {
$('.info', this).fadeOut(200);
});
$("li.side_cart").hover(function () {
$('#cart', this).fadeIn(500);
}, function () {
$('#cart', this).fadeOut(200);
});
$("li.side_currency").hover(function () {
$('#currency', this).fadeIn(500);
}, function () {
$('#currency', this).fadeOut(200);
});
$("li.side_lang").hover(function () {
$('#language', this).fadeIn(500);
}, function () {
$('#language', this).fadeOut(200);
});
$("li.side_search").hover(function () {
$('#search', this).fadeIn(500);
}, function () {
$('#search', this).fadeOut(200);
});
$(".main_menu li").hover(function () {
$('.secondary', this).fadeIn(500);
}, function () {
$('.secondary', this).fadeOut(200);
});
$(".cat_right ul li a").hover(function () {
$(this).stop().animate({
paddingLeft: 20,
color: '#ccc'
}, "fast")
}, function () {
$(this).stop().animate({
paddingLeft: 10,
color: '#999'
}, "fast")
});
// Tipsy - tooltips jQuery plugin
$('a.wish_button, a.compare_button, a#button-cart, a.twitter_follow').tipsy({
gravity: 's',
fade: true,
title: function () {
return this.getAttribute('original-title').toUpperCase();
}
});
$('#service_links li a').tipsy({
gravity: 'e',
fade: true,
title: function () {
return this.getAttribute('original-title').toUpperCase();
}
});
// SLIDING ELEMENTS
$("ul.categories li, #sidebar ul.secondary_menu li").hover(function () {
$("a", this).stop().animate({
left: "15px"
}, {
queue: false,
duration: 200
});
}, function () {
$("a", this).stop().animate({
left: "0px"
}, {
queue: false,
duration: 200
});
});
// FADING ELEMENTS
$(".logo img, .oferta_s, .oferta_d").hover(function () {
$(this).stop().animate({
opacity: 0.6
}, "medium")
}, function () {
$(this).stop().animate({
opacity: 1
}, "medium")
});
$(".intro").hover(function () {
$(this).stop().animate({
paddingBottom: 230
}, "medium")
}, function () {
$(this).stop().animate({
paddingBottom: 140
}, "slow")
});
$(".desc_box,.desc_box2").hover(function () {
$(".desc_box,.desc_box2").not(this).stop().animate({
opacity: 0.7
}, "fast")
}, function () {
$(".desc_box,.desc_box2").not(this).stop().animate({
opacity: 1
}, "fast")
});
});
})(window.jQuery);
// non jQuery scripts below
$(document).ready(function () {
var interval;
$('ul#myRoundabout').roundabout({
'btnNext': '.next_round',
'btnPrev': '.previous_round'
}).hover(
function () {
clearInterval(interval);
}, function () {
interval = startAutoPlay();
});
interval = startAutoPlay();
});
function startAutoPlay() {
return setInterval(function () {
$('ul#myRoundabout').roundabout_animateToPreviousChild();
}, 6000);
}
When I add this second code the problems start.. and the code is :
<!-- Validate email using regular expression -->
function validateEmail(emailValue) {
var emailPattern = /^[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]#[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/;
return emailPattern.test(emailValue);
}
<!-- Validate Form fields -->
function validateForm() {
var send_message = true;
if (jQuery("textarea#message").val().length < 2) {
jQuery("label#message_error").slideDown();
jQuery("textarea#message").focus();
send_message = false;
}
if (!validateEmail(jQuery("input#email").val())) {
jQuery("label#email_error").slideDown();
jQuery("input#email").focus();
send_message = false;
}
if (jQuery("input#name").val().length < 2) {
jQuery("label#name_error").slideDown();
jQuery("input#name").focus();
send_message = false;
}
return send_message;
}
jQuery(function () {
<!-- Contact Form validation -->
jQuery('.error').hide();
jQuery("input#name").bind("keyup focusout", function () {
if (jQuery(this).val().length > 1) {
jQuery("label#name_error").slideUp();
} else {
jQuery("label#name_error").slideDown();
}
});
jQuery("input#email").bind("keyup focusout", function () {
if (validateEmail(jQuery(this).val())) {
jQuery("label#email_error").slideUp();
} else {
jQuery("label#email_error").slideDown();
}
});
jQuery("textarea#message").bind("keyup focusout", function () {
if (jQuery(this).val().length > 1) {
jQuery("label#message_error").slideUp();
} else {
jQuery("label#message_error").slideDown();
}
});
<!-- Submitting Contact Form -->
jQuery("form#contact_form").submit(function () {
var dataString = jQuery(this).serialize();
if (validateForm()) {
jQuery.ajax({
type: "POST",
url: "FormToEmail.php",
data: dataString,
success: function () {
jQuery('#contact_form').slideUp('slow', function () {
jQuery(this).html("<div id='confirmation'></div>");
jQuery('#confirmation').html("<h4>Mesajul a fost trimis cu succes!</h4>").append("<p>Va multumim pentru ca ne-ati contactat. Va vom raspunde la e-mail in cel mai scurt timp posibil!</p>");
Cufon.refresh();
jQuery(this).slideDown('slow');
})
}
});
}
return false;
});
})

* EDIT *
The problem has been fixed, it was the comments. Changed the <!-- comm --> into /* comm */ and it works just fine. Thank you all for your time and help!