JQuery :: Passing Click Events Through A Blocking Element
Feb 3, 2010
I have a script that's dimming the page by appending a black transparent canvas element to the body, positioning it over the page with a high z-index, and then using clearRect to cut out the sections of canvas element so that certain sections of the actual site show through..I'm having a hard time figuring out the best way to pass a click through the canvas and onto whatever would accept it if the canvas wasn't in the way so a user can edit the text.
My first choice was hiding the canvas on mousedown, and then listening for mouseup for everything underneath. but it looks terrible to have that 200ms flicker. can a trigger() be used to emulate a click at a certain (pageX,pageY)? the last option i can think of would be adding 30 divs and duplicate the punched-out canvas..but that seems like a lot of math, does anyone know of a plugin that does this? a reverse blockUI
pardon my ignorance if this topic has been discussed before - I couldn't construct a search query that returned anything of the like!
Currently I have a set of two div elements, both of which span the width and height of the window. The top div plays host to a user interface, and the bottom div to various editable elements. The problem here lies in the fact that the user interface div is intercepting all mouse events, and as such neither the lower div nor any of its children may be interacted with.
And so my question is just that: is there any way to pass events through an element, or, more specifically, transparent sections of div elements? I have considered simply triggering the same event on the lower div, but without the ability to pass offset coordinates to the .trigger() function, it would require a rather undesirable amount of code to calculate which element on the lower div to trigger the even on...
My other consideration is to minimize the dimensions of the user interface layer (something similar to 50 x 50 px) and use absolute positioning to position the user interface widgets, additionally using a div element below the bottom div to constrain the movement and resizing of user interface widgets.
I'm using the Microsoft Virtual Earth Version 1 Commercial Control. I want to make it so you can click on a pinpoint that's plotted on the map and all mouse events are passed to the map so that the user can click anywhere on the map (including the pin points) and drag/zoom the map around.
For those of you who haven't used Virtual Earth: Basically, there are a bunch on absolutely positioned Div elements. I basically want to pass all mouse events from one absolutely positioned div element to the absolutely positioned div element directly beneath it.
I am fairly new to JQuery and have been asked by my manager to implement the flip plugin into one of our on-line courses.I have got the 'flip' code working fine, and have a number of tiles that get flipped (like this).My question is, how do I know when a user has flipped each of the tiles? I can't just do a count as they could click on one tile multiple times.
I want to get all the click events attached to a webpage..or in simple language how to find, if an element contains click event??<span onclick="http://www.google.com">google</span>if a page contains element like this i can easily get like this
I'd like to have a hyperlink on a page, that when clicked reveals some hidden text below the hyperlink AND at the same time opens a new browser window to a specified URL (which would have been declared in the HTML code NOT the jQuery bind code). There will be several of these 'Click here to reveal password and open site' hyperlinks on the page. Will this scenario cause a problem in the sense that if you click on one hyperlink then all of the reveals would be triggered and numerous windows would be opened?
would just like to set some "click" function on specific LI element in menu. As you can see, every LI level has it's own class. I specify a .live() function ( because I'm dealing with .ajax and append() ) if maybe this is a problem ? Clicking on a child element you can see that the .click() function is called even the class is diferent,
I wonder if I can see somewhere what events are binded to a DOM element (in FireBug maybe). Maybe it's obvious, but I just don't know yet if it's even possible.
Is there any way in jQuery to move the order of events on a dom element. I have an element (the add button on a jQGrid display) that I want to place a click event in front of the one one put in by jQGrid. I had a look at the jquery.eventmanager plugin but that doesn't really allow the kind of manipulation I want. I also found it didn't like handling the click event anyway.
I'm thinking something along the lines of;
var saved = $(ele).getEvent('click'); //this function doesn't exist yet $(ele).unbind('click').bind('click.new',my_new_func).bind('click.old',saved);
I'm using some click events on normal <a> tags. When I rewrite the links within a html() method call, the click events no longer work. I've set up a very simple example here:When the page is loaded, clicking either of the 'link 2' links displays the correct information.When 'link 1' is then clicked, the main information is redisplayed. However, now, the 'link 2' link in the main paragraph doesn't work, although the 'link 2' link in the menu does.
I'm relatively new to JQuery and am having troubles trying to get two functions to work together. I have a pagination function and a modal dialog function. Each one is triggered by different anchor tags. My troubles happen whenever one function is triggered, the other function can not be triggered anymore. If I trigger the modal dialog, the pagination function can't be triggered, and when the pagination is triggered first, the modal dialog no longer triggers. I've tried to use .die() and .unbind() on the click events for the opposing function. That seems to work only once. then the opposing function can no longer be triggered. I think I am on the right path, just need to have some guidance on where I'm going wrong.
I have an div element (lets call it div number 1) that I have attached a click event to using jquery.bind() method. That works fine. I then have another div element (div number 2) that is absolute positioned on top of div 1. Now div number 2 also has a click event binded to it, which works... the problem is when I click div 2 and the click event triggers, so does the click event from div 1... I don't want the click event from div 1 to fire.
I've tried searching for this under the forums — and maybe it's because I just am using the wrong terms — but I cannot find any answers around this. Here's the skinny:
I've got a listener for click events from links in DIV #1 in the loaded document, and when a user clicks on one of those links, it passes a value to a .get() function and runs a simple AJAX call and dumps the data/html results into DIV #2.
After that click event, DIV #2 has a bunch of links in it, and I'm trying to traverse that dynamically assembled list and perform another .get() function based upon whatever link they click in DIV #2.
Based on the parameter passed from the link in the dynamically assembled DIV #2 box, it would run the .get() function and fill DIV #3 with the data/html results from that second AJAX call. The problem is that I can't seem to detect any sort of click event from the contents of DIV #2 aside from clicking on DIV #2 itself. I've tried the usual .children() to try and traverse down to where the inserted links would be, but that's not working (e.g.: $("#div2").children("a").click(); ). I've also tried .find(), filter() and .has() but it doesn't respond, as if there was nothing there.
I have a feeling it's something simple that I'm missing here; but I've no clue what I'm doing wrong. It seems that you should be able to traverse the DOM, even when you're essentially building it dynamically based upon a user's selection or an event within the DOM.
what I should be using to use to detect click() events from dynamically assembled elements? I know exactly what DIV they'll be sent to, I just can't seem to traverse anything with them when I'm dynamically inserting HTML into them.
The click event will fire if you click the <a>, OR if you tab to it with your keyboard and hit Enter.My question is: is there a way to make elements other than <a> tags accessible in this way? I recently discovered if you define a tabindex on your div, such as <div tabindex="0">test</div>, you can tab to that div, but click events don't seem to fire if you use your keyboard. Are <a> tags the only tags that can work in this way?
I`m trying to make selecting an select list option (as it become when we click on it)by clicking on a special pseudo element.I`m trying to do it in this way:
how do I hook a button click event so that my handler fires first but does not affect the firing of other clickhandlers for the same button?
What I want to do is hook all the form submit button click events. When a submit button is clicked, my handler will stuff some hidden fields into the form the button is contained within. Then the handler returns and the built in form submit button handler posts the form back to the server.
I have an Ajax post that gets 100 records. That runs a callback function called Update(data.d) that loops through and populates a Div container with these records each in their own Div with numbered IDs. (It also removes old Divs so that there are never more than 100 n the container. During this loop I register the click event for each <a> called'Like':
Is it possible to do an 'on click' event that changes a css selector, then an 'off click' that switches it back? I am working on a touch screen app and need to replicate a css hover state.
How do I pass the parameter to the function? Would I set an attribute and read it with[att=XXX] where the attribute is the echo'd $Region or is there a better way?
I'm trying to hide() show() an element when a specific checkbox is checked, the checkbox is nested within an asp Panel which is nested within a Web User Control.When the user control is loaded, the checkbox's id changes to the panel id + the checkbox id due to the face that i have an unknown number of user controls that can be added to the same aspx page.I need a way to hide a textbox when the checkbox is checked without using the '#controlId' syntax, and when i pass the txt.id its not working:
toggleMe: function toggleTest(ID) { var elem = document.getElementById(ID); var parentId = $(elem).parent().parent().parent().parent().attr("id");
I am working on a mini select manipulation, moving options back and fourth, etc.
What are some of the considerations between passing just the ID names of the two selects from the button that triggers the add/remove versus passing the selects?
I got a pretty large function, one that could essentially be condensed (if you feel so inclined). I would like to know how I can get my if statements inside the toggle functions working properly. I have 4 functions and 2 of them are click functions for closing (display:none). I would like to pass a listener to the toggle funciton to listen for the $close.click(). The if statement in the toggle functions is not doing anything.
<script type="text/javascript" > $(document).ready(function(){ var $contactLink = $("#contactLink"); var $contactBox = $("#contact-container"); var $qrLink = $("#qrLink"); var $qrBox = $("#qr-container"); var $qrBack = $("#qrBack"); var $contactBack = $("#contactBack"); $contactBox.css("display","none"); $qrBox.css("display","none"); $contactLink.toggle( function(){ if($contactBox.css("display","none")){ $contactBox.css("display","inherit"); alert('here'); .....
