Hello friends I hope you are all well. I need a little help from you if you are familiar with css 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.

Wonderful Search: A New Amazing World, Wonderful Technologies, Future Life Style, Best Art, Top Ideas, Cool Entertainment, Luxury Life, Amazing Science, WoW, Top10, Wonders, Best, Top, top 10, Top 100, Top 50, Top 200, Top 20, wonderfulsearch,...

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)

I would appreciate it if you could help me. grid (1) 2100×1029 301 KB

Looking at the site, I’m not able to see the problem with the menu or search. But I may suggest that with today’s CSS there should be no need for javascript modules to get a grid layout. Using pure CSS would be less likely to interfere with the parts of your page that have to rely on scripts.

Hello Thank you for your reply. To see the problem, you should reduce the width of your browser or view the page on a mobile or tablet. When you click on the search button or the menu, they do not open. Unfortunately, I am not familiar with programming and it is much easier and faster for me to use ready-made modules.

I’ll move this to the JS forum as this is not a CSS issue. It looks like a conflict with your scripts (or you aren’t loading the script as I can’t find it).

It might help if you can point to where the js for the toggle menu is kept to save one of our JS gurus looking for it.

It’s too complicated for me

Unfortunately, I am not familiar with programming and it is much easier and faster for me to use ready-made modules.

That’s a problem, and in fact has made it far from easier.

You have reams of JS to trawl through, some pretty dated code, some compressed etc. — needle in a haystack comes to mind.

Checking the official blog, mootools hasn’t been updated in 7 years. Furthermore from what I can see it creates it’s own custom methods on Javascript’s built in types. This is prone to conflicts.

Doing a bit of searching, I have found quite a few old threads reporting conflicts between Jquery and Mootools. The solution being to use Jquery.noConflict() e.g.

I’m sorry to say I am with SamA74. You are in need of some modernisation of your code and would probably benefit from trimming down what you have considerably.

Hi, Thank you so much for your reply and advices. I am not a programmer and these things are pretty difficult for me. So I found out that currently the problem with my site’s script is the conflict between mootools and jQuery. And I have to use jQuery.noConflict . But my question is, where should I put jQuery.noConflict(); exactly? In which file and what part of it?

here is the content of my current “jquery.noconflict.js” file:

should I add following code at begin and end of file

like the example page you sent me? or I only put jQuery.noConflict() At beging of file?

Using no conflict frees up the ‘$’ sign for other frameworks.

An IIFE (immediately invoked function expression) is used to create a safe container for the jQuery code.

Just to give another simple IIFE example

It is not something I have used, but in theory you should only need to use jQuery.noConflict() once and it should be placed in the next script to the one that loads jQuery. e.g. from the docs

Hi, Thanks again for your help. But I feel so stupid when I can’t understand the code. Can you fix this issue for me if I send you admin password? This site is based on Joomla CMS actually.

Actually I disabled MooTools for now 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:

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:

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

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 I believe is a mootools function. Which script is this in?

The reason in the past we needed functions like this was because Internet Explorer had a function called attachEvent and other browsers like firefox had addEventListener. Mootools’ addEvent function would handle the browser differences for you.

The window.addEvent code would probably be along the lines of this

You don’t need this sort of legacy code now, addEventListener will do, so in theory you could replace that code block with native JS.

I see that line of code is from JA Wall template. So JA Wall template is dependent on Mootools. I think it would be ill advised to try and re-write JA Wall.

I also see at the top of JA wall that the copyright is 2004-2011. So the code is 12 years old?

You should not be using this program to do grid layouts for you, if that is what it does. You can use the built in grids in CSS, these weren’t available in 2011. Or alternatively you could use a popular framework like bootstrap

Sorry if that is a bit harsh @sashaiel, I can see you have put a lot of work in to your site.

window.addEvent I believe is a mootools function. Which script is this in?

It’s in script.js file (I’ll attach the content of this file at the end of my message. I think this file is the source of all my problems! )

You don’t need this sort of legacy code now, addEventListener will do, so in theory you could replace that code block with native JS.

OK . I changed the code, so it seems it fixed this part of problem. (but I also deleted following code from end of file because browser mentioned that as error again!)

but the older Error came back which I think if we can fix this, evrything will be Ok in my site. script.js:137 Uncaught TypeError: window.getWidth is not a function and when I click on error it mention to these following codes:

Although You can see full details in Google inspect.

following is the content of script.js

I also see at the top of JA wall that the copyright is 2004-2011. So the code is 12 years old?

Yes. unfortunately it’s a very old template however they had some updates in 2019 but the worst part is I worked a lot on this template/site and I really want to use it.

You can use the built in grids in CSS, these weren’t available in 2011. Or alternatively you could use a popular framework like bootstrap

Using build in grids css or bootstrap needs programming knowledge which I don’t have, And unfortunately, due to my bad economic situation, it is not possible for me to hire a programmer at the moment… But If I can solve this last issue with my template, I’m still Ok with using it (Although I know this may not be the right thing to do)

Sorry if that is a bit harsh @sashaiel, I can see you have put a lot of work in to your site.

It’s Ok. and I am really grateful for your helps

Using build in grids css or bootstrap needs programming knowledge which I don’t have

The unfortunate fact is, updating old scripts that were made for the browsers of 10 or more years ago requires even more programming knowledge. Bootstrap (though personally I’m not a fan of it, being confident in my own CSS) is a very poular framework and you may find some more modern templates using that which could be utilised without getting too deep into CSS yourself.

you may find some more modern templates using that which could be utilised without getting too deep into CSS yourself.

Honestly, starting a new site from scratch is much more difficult for me than continuing the current site. Because the new site must be optimized for rtl languages and add dozens of plugins I need. Currently, my only option is to use this template, and that’s why I was hoping to find a skilled coder who can help me with the current error. This forum is for programmers, so surely this problem can be solved with your helps

Powered by Discourse, best viewed with JavaScript enabled