Fabric.js makes jQuery script fail on Chrome - javascript

I use Fabric.js to make a product customizer.
To get an interface with other interactions, I use jQuery. On Firefox everything works fine, but on Chrome, the jQuery part fails. No error is displayed.
I use other javascript scripts on this same page (Tinymce, jQuery Form Plugin). But I made a first debug and if I do not load Fabricjs on the page, the jQuery part executes well.
You will see other plugins loaded, it's from the CMS we use.
The jQuery* part is the one I have problems with. It is the one handling the three tabs on the right part of the page (on click content under them should change).
I try to make a JSFiddle but the problem doesn't appear, so here is the page :
page
You can login with:
Name: demo
Password: demo
Thank you :)
EDIT : I have found a way to avoid the problem : I comment the ""Click" event proxy" in Fabric.js file. This redefinition seems to be in conflict with jQuery.

Related

javascript scratchblocks squarespace

I would like to use Scratchblocks (a tool for rendering visual Scratch code blocks from a text listing, on GitHub) on my Squarespace website. The problem I am getting is that the scratchblocks are never rendered on the first load - but only after a refresh.
This is in the header (set in the header for that particular blog):
<script src="https://scratchblocks.github.io/js/scratchblocks-v3.1-min.js""></script>
Then I think I need to call this function at the end of the page - I've put it in the footer:
scratchblocks.renderMatching('pre.blocks');
NOTE: When I view the source I sort of see this JavaScript twice at the end of the page. Not sure what is happening there.
Here's an example of it on my website, where it renders the scratchblocks only after a refresh. [UPDATE - following the fix provided below, this now renders first time, every time as far as I can tell.]
[http://www.glennbroadway.com/coding-zone/2017/4/6/simple-collisions-in-scratch]2
Here's an example of someone else using it and it working properly. I've inspected the source and I can't work out how they are doing it.
https://codeclubprojects.org/en-GB/scratch/memory/
I've also tried all the different methods listed elsewhere on stackoverflow for getting javascript to load only after the HTML has finished. I can't get any of them to work - but I think the problem is something to do with Squarespace, I just don't have the knowledge to work out what.
Any help would be greatly appreciated.
In Squarespace, when your custom Javascript only works after a page refresh, it most likely has to do with Squarespace's AJAX loading:
Occasionally, Ajax may conflict with embedded custom code or anchor
links. Ajax can also interfere with site analytics, logging hits on
the first page only.
You may be able to disable AJAX for your template. Or, see the other approaches outlined here: https://stackoverflow.com/a/42604055/5338581 including:
window.addEventListener("mercury:load", function(){
// do stuff
});
In addition, I would generally recommend placing custom code in the "Footer" code injection area unless you have a specific reason to do otherwise.

Typo3 - t3jquery integration is not working

so first i have to say that i'm realy new to Typo3, so i dont rly know much about the cms.
Actually i have a Problem with my Page.
I want to integrade a Image Slider in my Page with the Nivo Slider Plugin.
The Problem is, that the Slider is not shown.
The page gives the error
TypeError: jQuery(...).nivoSlider is not a function
so i think, there is some problem with the jQuery.
For that i installed t3jquery but its still not working.
i nearly tried every configuration for t3jquery and also analysed the other extensions on my Page with the plugin, but nothing works.
Some of you have advice what i can do?
The page is hxxp://www.eventbringer.de/skireisen/opening-slider/ (so you can see the error in the JS Console)
TYPO3 has a very versatile way of getting content of code to the front-end.
One way is to use typoscript.
read : https://docs.typo3.org/typo3cms/TyposcriptReference/
You can see typoscript as a huge configuration 'array' that can declare all sorts of settings.
One of the settings is about how the 'page' itself needs to have.
If you need, for example, some javascript in your page, you could use
page.includeJs
https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#setup-page-includejs-array
if you need yous JS at the footer, and its an external lib, you could use
includeJSLibs.twitter = http://twitter.com/javascripts/blogger.js
includeJSLibs.twitter.external = 1

jquery conflict with hoverIntent

I have a site that has been working fine however recently we added a form to a specific page. This form was built by someone else and uses javascript/jQuery to process.
Upon adding this form it has broken most of the other jquery on the page, namely the dropdown menu plugin.
This is only happening on the below page:
http://agovo.co.uk/crm-and-sales/crm-sales/bpmonline/
The console error is:
TypeError: $(...).hoverIntent is not a function
But I noticed it has broken the slide out box to the right of the site. and these errors do not happen on other pages.
I realise there is jquery loaded twice, one if by WP and the other is manually, if i remove the manually added one it breaks everything so im not sure what the jquery one is doing!
Any advice? Thanks
You're loading two different versions of jQuery on your page (1.11.1 first, and then 1.10.2).
Every script tag that contains a plugin that occurs after the first version, but before the second version, will be "overwritten" (and you'll see the error you are getting above).
Please only ever include one version of jQuery on your page.
I added no conflict to the form jQuery and it works fine now.

Google Developer Tools for javascript modification doesn't work for long 'js' file

I am trying to edit a website, whose UI lacks the property what I want. I can navigate over items using KeyUp or KeyDown (keyboard keys). However, when it scrolls the window, it performs unnecessary animation and I want to remove this feature.
I used Google Developer Tools to browse and edit the main javascript file, but it doesn't change the webpage's features even if I edit the code. I think it's because the script file is written in one line so that it can't be properly displayed in 'not pretty' (or normal) mode of Source tab, where I can edit the code. The reason that I am suspecting this is that the code shows until it's end in pretty mode, but in not pretty mode, the source code is cut somewhere before the end of the file.
Is there anyway to get over this problem? The website I want to modify is as follows:
https://www.gqueues.com/main
If you edit the javascript it wont execute unless it is called, so you are probably binding to keyboard events but the code never gets executed because it does when the js loads, and not when it is edited.
I would suggest adding the functionality you want using the console if you can't edit the file on the server.

Jquery image gallery issue in expression engine

I have a slight problem with a javascript plugin i have integrated into expression engine (EE). I'm not sure whether its a CSS/HTML problem or something being overwritten in EE. I using the plug jqzoom, which i've managed to integrate fine on my static site However on my EE site click here the secondary image is not displaying (none) and is over lapping the primary. Initial set up of this plugin mean't to work like the following click here - you click on the thumbnail the image changes etc... does anyone know what's causing this problem?
in your first link I saw two images are already in a div with a class clearfix. But in the second one there is only one. I think somehow you messed up with the images in the first one. Try to look in the code where you entered the image source in the website you mentioned in first link

Categories