Bug with jQuery Mobile Link/Button on Click - javascript

If I have a link in my jQuery Mobile app, and make it a button with .button();. If I click on the text (center of the button), it will not throw the event "click".
Here is an example:
http://jsfiddle.net/9rZHg/
Run this script, and try aiming for the text. The alert popup will not show up. It will work only if you click on other parts of the button.
The same occurs while testing on the device.
Is there an easy way to avoid this, or do I have to use <button> tags everywhere in my app ?
Thank you

Developer on the jQuery Mobile project, here.
While the fix above may temporarily patch the issue for the time being, the fundamental issue is that the button() plugin is intended for button elements and inputs. Adding the data-role="button" attribute or calling the buttonMarkup() plugin instead will prevent this issue.

I have not created buttons like that before but the problem is with the z-index of the <a> element. If you add the following CSS to your page then you will be able to click on any part of the button to get the click event to fire:
/*place the hidden link on top of the button UI*/
.ui-btn-hidden {
z-index : 2;
}
This issue does not occur when you use data-role="button" on the <a> tag like so:
A tag w/ data-role="button"
Here is a jsfiddle of both of these solutions: http://jsfiddle.net/jasper/9rZHg/1/

Related

Protractor CCS Selector can't locate element on hidden toolbar

I'm clicking on a link that opens a new window with a PDF document. I switch to the new Window, which I verified that I was on by getting the URL. The window has a toolbar at the top which is visible for a few seconds when the window opens, and then hides itself unless you move the mouse again. I'm trying to click on the Download button, but anything I try gives an error that the CSS Selector can't find the element. I'm suspecting it's because of the nature of the animated toolbar, but I'm not sure. At first I was just trying a regular click:
element(by.id('download').click;
And that was not working. So I tried navigating the mouse to click on it:
browser.driver.actions().mouseMove(element(by.id('download'))).perform();
element(by.id('download')).click();
I've also tried selecting by css:
element(by.css('#download').click();
All give me -Failed: No element found using locator.
Could someone please tell me if what I'm doing is possible, and if so, how I might be able to accomplish it?
screencapture
Element
This is more of a workaround than a solution, but what works for me with elements that are for some reason not visible (covered with other elements or working only on hover) is to just inject a script. Like:
browser.executeScript(
"document.querySelector('[id=\"download\"]').click()"
);

How to detect text change or href change of an anchor tag in js/jquery

How to detect text change or href change of an anchor tag in js/jquery
i've tried plenty of event handlers in both jquery and vanilla js but it doesn't seem to be working for me, any simply/clever suggestions? am i missing something?
i made sure that those event handlers doesn't really support anchor tags before posting, i'm not sure what i am missing here
https://www.w3schools.com/jsref/event_onchange.asp
The text inside an anchor and its href link don't change spontaneously. There is always some javascript code that's listening to some event in order to change it. You should detect where this listener is, and to do this you can use google developer tools.
Open google chrome, go to your page and click on the top left arrow, select the element and then click on the "Event Listeners" tab. A menu with all the event listeners will appear.
Once you detected where's the function that's changing your anchor, so just append some extra code to it in order to execute actions.

Mobile Menu button takes top of the page

I have a wordpress site and i used a template to do it. So when i'm on mobile it has a mobile menu i managed to make it fixed to stay at the top when i scroll down, but the problem is. When i'm on a certain place at the site and i wanna open the menu with the "three line" icon it's opening the menu but takes me to the top of the page as well. And when i wanna close the menu with the X button it takes me to the top of the page as well, so basically the menu is unusable. I know it's a Jquery problem, but i can't find which file contain the codes for it and even how to fix it.
My website is: www.autoberles-szombathely.hu
So i wanna make the open menu button and close menu button to only open and close the menu and don't take me to the top of the page.
you can use:
$(selector).click(function(event) {
event.preventDefault();
//other stuff you might want to do on event
});
For the record you should not remove the href entirely, it should always exist to prevent unexpected behavior. If you don't want the href to be be acted on then just use that preventDefault() method, easy and keeps everything running smoothly.
Your menu has the following structure in a mobile viewport:
<i class="fa fa-bars"></i>
The # will cause the page to jump to the top, see here for a detailed answer why.
You have two possibilies to prevent this behavoir:
Add an event handler to this link and use event.preventDefault()
For jQuery
$('.menu-toggle').on('click', function(event){
event.preventDefault();
});
VanillaJs
document.getElementsByClassname('menu-toggle').addEventListener('click', function(event){
event.preventDefault()
});
Remove the attribute href completly (See here). When using this solution you have to use a css-reset or add e.g. cursor:pointer to these links again, because the standard browser css is not applied anymore.

use jQuery to disable all clicking actions except scrollbar

I am trying to make a page COMPLETELY UNCLICKABLE (both right click and left click) and to display a message when someone clicks. Since I know that this will raise lots of questions such as
"why would anyone ever want to do this...this is stupid...then nobody
can navigate the site...and it doesn't protect your content
anyway...etc"
here is the explanation of my purpose. I have a page that is at the moment only a graphic mockup of what the finished website will eventually look like. No matter how many times I explain that the mockup is ONLY AN IMAGE and not a real navigable website, they still email me to say that they cannot click on the menus and links. Since it is a single page mockup, I want to pop up an alert() message (can't use a modal because you can't click to dismiss it if clicking is disabled) to let them know that they have clicked something non-functional. I am trying to do this in as few lines of code as possible, and have the following working at the moment:
<script>
$('html').mousedown(function(event) {
event.preventDefault();//To prevent following the link
alert('Demo Graphic Only...clicking on stuff will NOT work at this point.');
});
</script>
The issue is that when using .mousedown I capture the user trying to click on the browser scroll-bar to scroll down. I was surprised by this since it is not part of the actual PAGE CONTENT but rather a part of the BROWSER...but it is catching it nonetheless. I tried using .click in place of .mousedown however only seem to catch a normal (left) click in that case... Does anyone know how to easily (minimal lines of code if possible) capture the left AND right click event, but allow user interaction with the browser scrollbar?
Try this :
$(document).click(function(event) {
event.preventDefault();//To prevent following the link
console.log('Demo Graphic Only...clicking on stuff will NOT work at this point.');
});
This Function will be called when click is made on the page , not on the Scrollbars
Try to use
event.stopPropagation();
or
event.stopImmediatePropagation()
For people who come across this question, an alternative approach, good especially if you need to prevent mousedown specifically:
Put the scrolling content in a wrapper element and prevent mousedown only on the inner element. Set the wrapper element to overflow: auto; height: 100%;

jQuery: Freezing/Disabling all events temporarily?

I have the following usecase:
A div with some buttons
When the user
clicks on a button, a popup is shown
and the background div is faded out
to 0.5 opacity
The problem is that when the popup comes in, the user is still able to click on the background buttons. At this point, I can remove the entire DIV temporarily but I don't want to do that. Is there anyway I can disable all the previously attached events and then add event handlers ONLY to the current popup? (I mean something like a close button should still work on a popup) Any suggestions?
Sounds like you need a modal popup. There are numerous jQuery plugins that do that, or you can check out this tutorial.
You could store each element with an attached event into an array, then loop through them and unbind() them. Upon closing the popup you can re-bind() them.
You can use the modal dialog option built into JQuery UI
http://jqueryui.com/demos/dialog/#modal
$("#dialog-modal").dialog({
modal: true
});

Categories