Search icon on mobile site unresponsive and no longer toggles open - javascript

The search icon on my mobile website suddenly stopped working recently. It's supposed to toggle open a search bar; however, now when I click it, nothing happens.
When I long press via Chrome on mobile it displays "about:blank#blocked" and on Firefox on hover it displays javascript:void(0).
Not sure what caused it to stop working and it's a bit frustrating.
If anyone has any insights or ideas on how to solve it, that would be super helpful.
My website is www.gentlemanwithin.com

I see your issue:-
Your issue is when you are trying to access custom search form that unable to access because you added an extra search button which is not belongs to that. So you try toggle function to show yellow colored area of your code. After it your issue will solve. Below I have attached your site screenshot image, that you can see it for the reference.

Related

Button click requires double click or long-press on mobile

I'm trying to click a button in a React app, and while it works on desktop, it does not work properly on mobile. I need to long-press or double-click, and play a little bit until the button finally works.
I have replicated my problem in this demo.
If you open the page on a desktop browser and attempt to open the hamburger menu, it should open right away. However, if you open it in mobile, it will not work right away. You will also see the menu jitter a little bit off-screen. Attempting to close the menu by clicking on the overlay has the same problem in mobile.
Why is this not working properly on mobile? How can I get the button to work when I tap it?
I added cursor:pointer to the button after seeing this somewhat similar post, but this doesn't help.
This problem has occurred in the past to me, and I was able to solve it using onMouseDown but it doesn't work this time, I'm guessing because I'm using a component that is imported from a package (react-burger-menu) and can't override its onClick function? I'm not sure what is happening.
EDIT: Solved. See my answer.
Turns out it works if I fix the stacking of elements. I had nested my navbar component inside the MapContainer, but this was making things wonky mobile-side. I moved my component outside the MapContainer, and things worked.
I still don't understand why it went wonky mobile-side and in iOS only, but this problem at least is solvable.
Fixed example is here.
My map token has been removed, so you can use your own to substitute, but it is not necessary to have the map showing to see the problem/solution.

Drop-down-menu not working on second page

I have to make a website for school and we have to make a drop-down-menu. I've made one and it works fine, but on my other pages the drop-down-menu won't open when I click on it.
Can somebody help me?
I'd recommend that you use the chrome developer tools to check and see what happens to the other pages when you click the button that's supposed to initiate the dropdown menu.
If nothing happens, right click the button and hit inspect in developer tools to verify that you're targeting the correct element, and to verify that the dropdown menu actually exists on all your pages.
Most likely you haven't linked the javascript file on the other pages. Can't say much without you showing what you've done first.

How to keep a hover effect by selecting a browser suggestion?

I have a WordPress + WooCommerce website and by hovering Login / Sign Up on the header it leads to open a dropdown box where you can enter login details or register. The kind of issue described below also occurs on official theme demo website, at https://xstore.8theme.com/
Now, if I click on "Username or email address" field, Google Chrome shows me an account suggestion based on previously saved accounts on this website. You could try by attempting to login with whatever credentials and if you save them on Chrome (even if wrong), the browser will suggest them to you from the next login attempt. If you just hover the suggestion, all the dropdown box disappears. I said, "just hover the suggestion", because actually you do not have time to click on it.
I suppose this is due to hover effect, in fact if you move the cursor out of the dropdown box, this last disappears, and so happens with the suggestion making it like it was out of the dropdown box.
You can watch a video of the issue at:
https://s.nimbusweb.me/share/3721505/q5vwlz9bho2yufufoiic
How could I solve that?
Thank you in advance,
Alberto
I've had this Problem many times with outdated versions of chrome.
Have you tried updating your browser?
Do you have the same issue in other browsers?
Running updated chrome, I have not experienced this issue on the Demo Page (https://xstore.8theme.com/)

Element distorts when scrolling, and sometimes doesn't scroll

EDIT:
A colleague worked out what was wrong. It was because the aside element had z-index: 2. Although it is fixed now, I'm not sure why that z-index: 2 was causing these issues in the first place. If anybody knows why, I'd like to know.
I'm having a rather odd issue on a website i'm working on. When on the architecture section, I click on one of the blocks to open the project, and it works. Almost. When one of the projects is open, the aside on the left does not scroll correctly. It distorts and splits up. Here is a screenshot:
But the odd thing is, the interiors section, which uses the same code, works fine. I have just recently finished re-coding the news section with a new design and more features, so it could be something to do with that. But, so far, I have found no connection with other sections on the page.
There are other errors on that specific page too. The Close button and next button hover events don't seem to be firing. However, if I open Dev tools and set the width of the close button to 29px, the hover event works, and the cross goes orange.
You can access the site at http://dev.guyhollaway.co.uk/
If anybody has any ideas, I'd be very thankful.
This happens on Google Chrome on both Windows and OS X.
Thanks in advance.

AddThis - turning it on and off

I've hit a problem I can seem to find a way around.
Essentially, I have a button with the "addthis_button" class, hovering over the button displays the AddThis box. Works perfectly :)
However I need to turn this on and off based on the users other actions around the page, is it possible to turn the AddThis hover event on and off as and when I need to?
For example, I have a button that says "Share" at the top of my page. Rolling over it displays AddThis. I then go and click a few things on the page. The share button has greyed out nicely but when I roll over it I still get AddThis.
I've tried re initializing AddThis completely but to no avail.
Thank you for any help you can give.
Edit: jsFiddle link hjsfiddle.net/49Pgf/
I think this should work to disable AddThis from showing the menu on hover:
addthis.button('.addthis_button', {ui_click:true}, {});
This requires an actual click on your link to show the menu. And then of course, you can re-enable it by calling the opposite:
addthis.button('.addthis_button', {ui_click:false}, {});
Hope this works for you.

Categories