How can I have a popUp window in mobile view

[sashaiel]

Hi guys,
I'm working on a website right now and I need a little help from someone who is familiar with programming.
In my website http://harfrooz.com , when I click on an article, it will open a popup window and show the content of the article. (so we don't leave the index page). This is good for me.
But in mobile view (or if you reduce the size of the screen in PC), when you click on that article, The website will not show the article in the popup window, instead you will leave the main page and will enter the article page. I don't want this.

How can I have a popup window for articles in Mobile view?
In my opinion, It is much better if visitors don't leave the main page when reading articles in Mobile.

Can you please help me. any ideas? any suggestion to fix this?

[Pavel-ww]

Hi.

You use JA Wall template. All your questions are related to this template.
JA Wall template has its own functionality of building a layout of articles that has nothing to do with Joomla standards.

And this template is not widely popular. You need not just a programmer, but a specialist in this template. Therefore the chance that you will find such a specialist on this forum is minimal.

I think you better contact the developer of the template to solve all the problems joomlart.com/tag/ja-wall


IMO - You are mistaken about the fact that popup will be good for mobile. It will be very not convenient for users. The developer of the template is not in vain turn off this option for mobile devices.

[sashaiel]

Hi Pavel,
Thanks for the reply. Yes, I know the template, but actually this template is very old and the manufacturer's website no longer supports its changes (I contacted them before).
I have been in this forum for many years and I know that there will be someone who can help me to solve this problem, since I think it is not a complicated issue.
You are partially right about pop-ups, because when browsing the web, we don't like to suddenly see a pop-up advertising window. But in my opinion, this type of popup is a little different.
This is more like the new feature of Google Chrome for mobiles. I mean the "preview window".
In fact, if it is possible for the browser to display the "preview Page" first when the user clicks on the article, it will completely solve my problem. Is this possible?

[Pavel-ww]

I looked more intently. Try in /templates/ja_wall/js/wall.js in line 378 change the value from 700 to 300

1.jpg

And I think you will need additional CSS editing for popup on screens less than 700px

[sashaiel]

Thanks a lot Pavel. That's working in mobile view now.
Currently popup width is a fix number (640px).
For screens below 700 pixels, is it possible to give the popup a dynamic variable width so that it always displays well on all mobile devices? For example, the popup width should always be 100 pixels smaller than the screen width. If you are familiar with this coding?

[Pavel-ww]

Hi. Try this css

Code: Select all

@media (max-width: 700px) {
    body.popupview #popup-content {
        width: calc(100% - 100px);
    }
    #popupIFrame {
        width: 100% !important;
    }
}

[sashaiel]

Thank you so much Pavel. You are amazing. That was exactly what I was looking for.
Also do you have any idea Why when I touch the search button (on the top left side of the site), instead of opening the search menu, it opens the main sidebar menu (on the top right side)!? (This only happens on mobile devices and if you reduce the size of the window on the computer, this error will not be shown)

This site was originally in English and RTL, which I tried to convert to LRT for Farsi/Arabic. I know that the problem is in moving the sidebar button from the left side of the site to the right side and the changes I made in the code were wrong and not fundamental, but I don't know where the problem is exactly and how to solve it.

[Pavel-ww]

Also do you have any idea Why when I touch the search button (on the top left side of the site), instead of opening the search menu, it opens the main sidebar menu (on the top right side)!? (This only happens on mobile devices and if you reduce the size of the window on the computer, this error will not be shown)

Hi.

This behavior is possible reproducing in the desktop browser if you select any phone in browser Dev Tools while testing responsive behavior in mobile mode.

And the reason of this is z-index. Remove it

11.jpg

or use css if you don't know where it is in the code

Code: Select all

#dummy-toggle {
	z-index: 1 !important;
}

[sashaiel]

Thank you very much Pavel. Exactly solved the problem. And thanks for the tip. I really enjoy when I meet people who are so professional in their work.
Just one last question. When I open the site on my mobile phone, if I change the display mode to "desktop site" from the browser menu, the site looks very messy and is seen with a large empty space. I think it is the fault of the top menu. Do you have any idea how to fix it?

[Pavel-ww]

Hi. Looks good on my phone. If you faced with a problem, most likely it depends on the width of your phone screen. I don't think there can done something about it

2.jpg

[sashaiel]

Hi. Looks good on my phone. If you faced with a problem, most likely it depends on the width of your phone screen. I don't think there can done something about it
2.jpg

I checked in 2 phones and this problem exists in both. The screen size of the phones is large and I also checked in landscape mode and the problem was still there.
I also checked the original version of the site (English LTR without template changes) on the phones and everything looks completely correct. So the problem is not with the phones.
For a second, when the site is not fully loaded, everything looks fine, but then it crashes.
Clearly, this problem is from the top menu of the site, and there is a very strong possibility that it is related to the sidebar menu button ( (top-right) & its RTL settings.

[Pavel-ww]

Clearly, this problem is from the top menu of the site, and there is a very strong possibility that it is related to the sidebar menu button ( (top-right) & its RTL settings.

There is no means to check it. If you think that the problem is this, return everything back, as it was before your editing and I can look to tip you how the sidebar menu button RTL can be done in the right or more reliable way.

UPD. I got your problem - this is in the Chrome browser. I usually use Firefox and there is no problem there. But as I said above, there are no tools to check this and establish the reason

[sashaiel]

Hi Pavel,
After trying all day I found the solution and I fixed that issue, But the problem was much bigger than I thought and I had to change many parts of the code to fix it.
But another problem appeared (Probably because of my changes) that I could not solve and I think you know how to fix it.
In tablet and mobile view mode, the top menu of the site has two buttons to scroll the menu options to the right and left. There is a problem with their location and performance, and I did not understand how to fix them. In the image below, I marked the location of the buttons in tablet mode with green color. (Also, when we change the size of the browser window several times, sometimes the contents of the top menu get messed up and go behind the logo!)

[Pavel-ww]

But the problem was much bigger than I thought and I had to change many parts of the code to fix it.

Hi @sashaiel. I assumed that it is. Therefore, I gave you advice to return to the original code and do everything right from the very beginning.

The same goes for your last problem. In addition, there are other problems that you apparently have not yet noticed.
I looked at the code - there are many properties that contradict each other and are in different CSS files. It is not possible to find all your changes and fix them. Errors create new errors and errors that must also be corrected for correction . It's like a snowball.

The workflow with css should be so: You create and connect your own CSS file in which you write your entire code that overrides the template code. And in no case do not edit the template's core CSS files. Then you can easily find errors and fix them.

If you have an installation package of this template, copy original files from it and replace those that you edited. Then it will be possible to start from scratch without making mistakes

[sashaiel]

But the problem was much bigger than I thought and I had to change many parts of the code to fix it.

Hi @sashaiel. I assumed that it is. Therefore, I gave you advice to return to the original code and do everything right from the very beginning.

The same goes for your last problem. In addition, there are other problems that you apparently have not yet noticed.
I looked at the code - there are many properties that contradict each other and are in different CSS files. It is not possible to find all your changes and fix them. Errors create new errors and errors that must also be corrected for correction . It's like a snowball.

The workflow with css should be so: You create and connect your own CSS file in which you write your entire code that overrides the template code. And in no case do not edit the template's core CSS files. Then you can easily find errors and fix them.

If you have an installation package of this template, copy original files from it and replace those that you edited. Then it will be possible to start from scratch without making mistakes

Hi Pavel,
I know that you are absolutely right and I will probably do the same thing you told me in the near future. But due to the fact that I am not a programmer and in addition to correcting the template to RTL I made many other personal changes, at least for now I will use this version.
I know I took up a lot of your time and I really don't know how to thank you. You have helped me a lot and I am truly grateful.
Just one more question and I promise that this is my last question.
When we click on the article and the pop-up page opens, the scrolling of the pop-up page is not as smooth as the main page. Is there any way or code in CSS to correct this behaviour and make the scrolling of the popup page smoother and faster?

[Pavel-ww]

Hi. Plugin is here /templates/ja_wall/plugins/jquery.mousewheel.js

Play with deltaX and deltaY values. Also on very top of this file you can find the links to developer. Or google Mouse wheel 3.0.6 plugin documentation

[sashaiel]

Hi. Plugin is here /templates/ja_wall/plugins/jquery.mousewheel.js

Play with deltaX and deltaY values. Also on very top of this file you can find the links to developer. Or google Mouse wheel 3.0.6 plugin documentation

Sorry I forgot to mention that the problem is only on "Mobile Phone" popup. If you check in your mobile phone you'll see it. it's OK in PC.

[Pavel-ww]

Hi. There are no different settings for desktop and phone in this plugin. It doesn’t work smoothly the same on the desktop. Play with values. I don't know exactly what values are needed there. Use the test and error method

[sashaiel]

Hi. There are no different settings for desktop and phone in this plugin. It doesn’t work smoothly the same on the desktop. Play with values. I don't know exactly what values are needed there. Use the test and error method

Hi Pavel,
Well, to be honest, I couldn't understand how those numbers work, because every number I put, I felt that nothing changed. But at least by changing the number divided by half, I feel that I doubled the scrolling speed.

Code: Select all

  { deltaY = orgEvent.wheelDeltaY/60; } and { deltaX = -1*orgEvent.wheelDeltaX/60; }

However, these changes only happened in the computer popup and had no effect on the speed and smoothness of the mobile popup. There is another file in the same folder called iscroll.js. Is it possible that this file is related to the scrolling speed in the popup of the mobile phone? I attached the file.

[Pavel-ww]

Hi. Yes, both plugins are connected on your site. I did not expect this .

1.jpg

And yes, it looks like iscrol.js is used for mobile. But I'm not sure. Remote verification tools that are in my disposal are insufficient for an accurate diagnosis.

Unfortunately, I cannot help with this plugin. Here look at its documentation github.com/cubiq/iscroll

[sashaiel]

Hi. Yes, both plugins are connected on your site. I did not expect this .
And yes, it looks like iscrol.js is used for mobile. But I'm not sure. Remote verification tools that are in my disposal are insufficient for an accurate diagnosis.
Unfortunately, I cannot help with this plugin. Here look at its documentation github.com/cubiq/iscroll

Hi Pavel,
Well, honestly, after a lot of effort I came to the conclusion that I won't get any results with that file because I don't know anything about JavaScript programming and it seems like a very long code. I recently bought a JavaScript training book, but at best it will probably take me 2 years to learn anything from it.

Meanwhile, I found an article about popup scrolling on mobile, but I'm not sure if it's what will help?
https://www.lilengine.co/articles/smoot ... pup-mobile

As far as I understand, should I use these two lines?

Code: Select all

   overflow-y: scroll; /* has to be scrolled, not auto */
   -webkit-overflow-scrolling: touch;

But in which file and exactly where should I put this? do you have any opinion

[Pavel-ww]

But in which file and exactly where should I put this? do you have any opinion

It is css. But this should not be used.
https://developer.mozilla.org/en-US/doc ... -scrolling
https://caniuse.com/?search=-webkit-overflow-scrolling

And this is used for standard scrolling. But your scroll is controlled through JS. That is, standard scrolling is not used, but completely replaced using JS. So this in any case would not work

[sashaiel]

But in which file and exactly where should I put this? do you have any opinion

It is css. But this should not be used.
https://developer.mozilla.org/en-US/doc ... -scrolling
https://caniuse.com/?search=-webkit-overflow-scrolling

And this is used for standard scrolling. But your scroll is controlled through JS. That is, standard scrolling is not used, but completely replaced using JS. So this in any case would not work

Hi Pavel,
Okay. So that's why it didn't work. In the end, it seems that I should ignore this issue and let it stay like this. Thank you so much for all your help and time. You are really a good person.

[Pavel-ww]

You are wellcome