I am working on a simple HTML/JS/Jquery game where you are supposed to look for a hidden vegetable on the page.
I have an image placed on the screen randomly on page load but it is hidden. When the user clicks on the image I want it to appear.
I tried using Jquery hide/show. This works fine if the image starts visible however, it fires the onclick event nicely. If the image starts as hidden it deactivates the onclick event. I know I am clicking on the correct spot on the page but the event never fires.
I tried using $("#image").css("display", "none");however this also deactivates the onclick. Is there another means of hiding an element that does not deactivate it's events?
You could use $("#image").css("opacity", "0");
$(document).ready(function(){
$("#image").hide();
)};
when u return to show
$("#image").show();
or
$("#image").style("opacity", "0");
Related
Ionic/cordova/angular/ios application:
I am using angular-notify to display overlay messages that have ng-click events attached. They show up fine and the ng-click events register EXCEPT when an ionicModal is open - while it's open and an angular-notify message displays, I can't click it. As soon as I click to close the modal (I have to click on my notification since it is overlaying the close button but it still closes the modal) the ng-click registers again.
I am not sure how to test this theory, but it feels like the click is getting captured or disabled by ionicModal. Is there something I can do (z-index is set to 99999) to make those clicks get registered?
-- UPDATE (Testing in Chrome w/inspector)
It doesn't appear to matter in which order the elements are loaded. Whether the modal, notification overlay or popup load in first, the issue remains.
Click events are cut off for my notification overlay until the modal and/or popup are dismissed.
When I look at the DOM inspector, I see some divs are created when the popup or modal instantiates. This one:
<div class="click-block click-block-hide"></div>
looks like it might be causing my issues but it sits lower in the DOM and when I delete the element (in Chrome Inspector) it doesn't fix my issue.
No matter what z-index I set or where I move the element in the DOM (via inspector) or what background div elements I delete, I still cant click my notification until any and all popup/modals are dismissed.
Any thoughts?
Can you explain the layout a bit better? Is the ionicModal sitting on top of the message? Or are they side by side?
If the modal is sitting above the message, then it is a matter of z-index. You need to make sure that the z-index for the class that is being used isn't overriding the z-index of 99999.
I figured it out, at least how to hack around it.
$ionicModal and $ionicPopup add a class to the body element <body class='popup-open modal-open'>. I didn't look into how, but it is blocking clicks to my notification.
So I added an interval to the angular-notify notification to remove the modal-open and popup-open classes from $ionicBody.
var notificationInterval;
notificationInterval = $interval(function() {
$ionicBody.removeClass('modal-open');
$ionicBody.removeClass('popup-open');
// console.log("removing those body classes while the notification is up.");
}, 1000)
For notification dismissal, I added to the $scope.$close function
$interval.cancel(notificationInterval)
I am having a big of an issue.
I have some third party js includes and they popup some info on a button click, that is in an iframe. Of course, I don't have access to this iframe. But the 3rd party captures clicks and closes the iframe popup. So the behaviour is like so -
I am a user, I click on this "3rd party button, an iframe popups up anchored bottom right". Now, if click anywhere on the main parent page (my page), the iframe closes.
Here is the problem. I have some custom form fields/spans etc.... in which I capture the clicks before they bubble up so the document.body never get that "click".
How can I fake this out? I tried "mousedown" and that seems to propagate up. So I then said something like:
jQuery(document.body).mousedown(function(){
jQuery(document.body).click();
})
so, no matter what is mousedown, I try to say there is a click happening. BUT that doesn't work. Not sure why? If I attach that click onto a div and alert - it alerts, but perhaps "natively" it isn't the same.
Any ideas of to truly simulate a body click event when/if the element clicked on has had its native clicked event captures before it can bubble up?
EDIT: I have tried various things.
ie:
<div id="captureclick"></div>
<script>
jQuery(document.body).mousedown(function(){
jQuery("#captureclick").click();
})
</script>
I also tried:
jQuery's trigger function trigger('click');
Not working. I haven't tried using a button as the "click traget", yet.
Thanks.
I have a div with several buttons in a form. When one of the buttons is clicked, this div is hidden and a new div is displayed. In my case, I am also having the button click trigger an ajax call for some data to populate the newly displayed div. The div that loads is a game that captures key events to allow the player to play.
In Firefox on Windows, I notice that all key events are being targeted at the button that was clicked on the first div, rather than at the body element. This means that the enter key re-clicks that button (restarting the game). If I disable the buttons when I switch divs, key events do not get triggered at all (making it unplayable).
What would a good strategy be to deal with this situation?
Not sure if this is an answer to my own question or a workaround, but it looks like I can call:
document.activeElement.blur()
I've added this to my button's onclick function and this seems to solve the problem.
I have a div which is half way down the page. After I click a button, I load an image in that div. What happens is, that the page scrolls all the way up. How to avoid this ?
you have to edit your click event. the simplest thing would be to return false. you could also preventDefault f.e. if you are using jquery.
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
});