JavaScript Grid module conflict with top (sidebar) menu. how to fix?

[noojum]

Hello friends
I hope you are all well.

I need a little help from you if you are familiar with CSS, PhP or Javascript.
I needed a grid display component for my site, and after searching I found a suitable one and installed it. Now the problem is that after activating the module related to this component on any page, the menu at the top of my site stops working. It means that there is an interference between the grid component and the menu. If I disable the grid module, the menu works again without any problem.
Please see for yourself in the link below.
beauty of life
Currently, the grid module is active under articles, So nothing happens if you click on the search button or the corresponding button on the sidebar menu. This issue occurs only in mobile and tablet display mode. So reduce the browser size to see what I mean.
The question is, what should I do to solve the problem? I don't think it should be a very complicated problem?
Also, when the grid module is active, the following error can be seen on the Google Inspect page.

mootools-core.js?d25b1e28c6a2a29d5e390c182349c46d:136 Uncaught TypeError: Cannot read properties of undefined (reading 'x')
    at getWidth (mootools-core.js?d25b1e28c6a2a29d5e390c182349c46d:136:134)
    at Object.check (script.js:137:23)
    at Object.initialize (script.js:58:14)
    at HTMLDocument.<anonymous> (script.js:442:14)
    at n (jquery-1.7.1.min.js:2:14784)
    at Object.fireWith (jquery-1.7.1.min.js:2:15553)
    at Function.ready (jquery-1.7.1.min.js:2:9773)
    at HTMLDocument.B (jquery-1.7.1.min.js:2:14348)

 

[Deleted member 2829]

Hello ! I have little or no experience with jQuery, and had not even heard about MooTools. But after a quick peek at the latter, I wonder why you are using both of these frameworks ? They look vaguely similar to me and I would not be surprised if they interfered with each other. Just guessing though.
As to your error at Object.check (script.js:137:23), have you looked at that location in script.js (assuming this is your own code, I'm not sure) ?

 

[noojum]

Hi cbreemer,
Thanks a lot for reply. I'm not a programmer and I can't understand code. script.js is not my own code. this is a Joomla based website actually and I used a template with some modules/components installed by me.
the latest component I installed on my website for grid view, made me troubles because It interfered with mootools toolbar.

So, Actually, for now I disabled MooTools and will remove sidebar buttons.

But I still see two errors with google inspect:

`script.js:361 Uncaught TypeError: window.addEvent is not a function at script.js:361:8`

and when i click on error it mention to the following code:

window.addEvent('load', function(){
    if(window.menuIScroll){
        window.menuIScroll.refresh();
    }
 
    if(window.sidebarIScroll){
        window.sidebarIScroll.refresh();
    }
});

and second error:

`Uncaught ReferenceError: Class is not defined at caption.js:15:16`

and when i click on error it mention to the following code:

var JCaption = new Class({
    initialize: function(selector)
    {
        this.selector = selector;

        var images = $$(selector);
        images.each(function(image){ this.createCaption(image); }, this);
    },

I'll be thankful if you have any ideas for fixing this two errors (Especially the first error)?
you can see it in site now

 

[Deleted member 2829]

It seems what I thought is true : it's a dangerous game using two similar frameworks in one app.
The first error seems to expose a bug in script.js. As it says rightly, there is no such method addEvent(). Surely this should be
addEventHandler(). That file seems a bit buggy, I also see this error

Uncaught TypeError: window.getWidth is not a function
    at Object.check (script.js:137:23)

The second error is less obvious. The class (or object, if you wish) with name Class is not defined. How to fix this, no idea.... being unfamiliar with Joomla, jQuery and all the other stuff you are using here. Perhaps you need to include some more script files ?

 

[noojum]

It seems what I thought is true : it's a dangerous game using two similar frameworks in one app.
The first error seems to expose a bug in script.js. As it says rightly, there is no such method addEvent(). Surely this should be
addEventHandler(). That file seems a bit buggy, I also see this error

Uncaught TypeError: window.getWidth is not a function
    at Object.check (script.js:137:23)

The second error is less obvious. The class (or object, if you wish) with name Class is not defined. How to fix this, no idea.... being unfamiliar with Joomla, jQuery and all the other stuff you are using here. Perhaps you need to include some more script files ?

Actually, I think second error I mentioned before is related to images' caption which I really don't care about it and I may delete its related file to remove that error (if I can't find a solution).
About first error, After getting some help from another programmer I changed code to window.addEventListener('load', function(event)and it seems OK now.

But as you mentioned currently my main error is following

script.js:137 Uncaught TypeError: window.getWidth is not a function

at Object.check (script.js:137:23)
    at Object.initialize (script.js:58:14)
    at HTMLDocument.<anonymous> (script.js:442:14)
    at n (jquery-1.7.1.min.js:2:14784)
    at Object.fireWith (jquery-1.7.1.min.js:2:15553)
    at Function.ready (jquery-1.7.1.min.js:2:9773)
    at HTMLDocument.B (jquery-1.7.1.min.js:2:14348)

You can see it on google inspect in website beauty of life
I would appreciate it if you have any ideas to solve the problem

Perhaps you need to include some more script files ?

Honestly, I did not understand what you mean by this sentence. Do you want me to send you the template files?

 

[Deleted member 2829]

If you look at the documentation for the window object, for example here, you see that it does not have a getWidth() function. So this is yet another bug script.js. How many more to go, I wonder ? But you can see it does have innerWidth and outerWidth properties. One of these might fix it for you (not sure which one is appropriate here).

With "include some more script files" I meant that your list of external script files

<script type="application/json" class="joomla-script-options new">{"csrf.token":"c048b7e8d9074a62225decea3c2ab568","system.paths":{"root":"","base":""},"joomla.jtext":{"COM_COMMENT_PLEASE_FILL_IN_ALL_REQUIRED_FIELDS":"\u0644\u0637\u0641\u0627\u064b \u0647\u0645\u0647 \u06a9\u0627\u062f\u0631\u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u067e\u0631 \u06a9\u0646\u06cc\u062f.","COM_COMMENT_ANONYMOUS":"\u06a9\u0627\u0631\u0628\u0631 \u0645\u0647\u0645\u0627\u0646","JLIB_FORM_FIELD_INVALID":"\u0641\u06cc\u0644\u062f \u0646\u0627\u0645\u0639\u062a\u0628\u0631:&#160"},"system.keepalive":{"interval":840000,"uri":"\/component\/ajax\/?format=json"}}</script>
    <script src="/media/jui/js/jquery.min.js?3cca43c9ae4a449cd7b86cffe2a3e083" type="text/javascript"></script>
    <script src="/media/jui/js/jquery-noconflict.js?3cca43c9ae4a449cd7b86cffe2a3e083" type="text/javascript"></script>
    <script src="/media/jui/js/jquery-migrate.min.js?3cca43c9ae4a449cd7b86cffe2a3e083" type="text/javascript"></script>
    <script src="/media/k2/assets/js/k2.frontend.js?v=2.11&b=20230112&sitepath=/" type="text/javascript"></script>
    <script src="https://static.addtoany.com/menu/page.js" type="text/javascript" async="async"></script>
    <script src="/media/system/js/core.js?3cca43c9ae4a449cd7b86cffe2a3e083" type="text/javascript"></script>
    <script src="/media/system/js/punycode.js?3cca43c9ae4a449cd7b86cffe2a3e083" type="text/javascript"></script>
    <script src="/media/system/js/validate.js?3cca43c9ae4a449cd7b86cffe2a3e083" type="text/javascript"></script>
    <!--[if lt IE 9]><script src="/media/system/js/polyfill.event.js?3cca43c9ae4a449cd7b86cffe2a3e083" type="text/javascript"></script><![endif]-->
    <script src="/media/system/js/keepalive.js?3cca43c9ae4a449cd7b86cffe2a3e083" type="text/javascript"></script>
    <script src="/media/lib_compojoom/third/polyfills/assign.js" type="text/javascript"></script>
    <script src="/media/lib_compojoom/third/polyfills/promise.js" type="text/javascript"></script>
    <script src="/media/jui/js/bootstrap.min.js?3cca43c9ae4a449cd7b86cffe2a3e083" type="text/javascript"></script>
    <script src="/modules/mod_ol_stickysidebar/assets/js/theia-sticky-sidebar.js" type="text/javascript"></script>
    <script src="/media/system/js/html5fallback.js" type="text/javascript"></script>

might perhaps need yet another script which will define that class Class for you. My wording was a bit cryptic indeed.

 

[noojum]

thank you so much. I actually managed to solve that problem! But I still have one more question that maybe you can help me with.
When I touch on any of the menu buttons at the top of my site, the menu page opens. (in mobile and tablet view) Now, if I touch on the surrounding environment, the menu page closes, but if I click on the button itself, the menu page does not close.
How to solve this issue?
I want to open the menu when I touch on the menu button, and close when I touch again.
At first, I thought this was a css problem, but when I asked in the css forum, they told me that it it's a JavaScript issue and they said I need to write my own script for this (onclick event).

 

[Deleted member 2829]

You mention mobile and tablet view. Sadly I do not have experience with those. Isn't it so on a mobile phone that the phone's "back" button will close the menu ?