I have a problem with an icon I'm overlapping over other image
Originally, the image I'm showing has a hover popover that displays information about that product, we're aggregating a new feature to mark the products for example as removed or forbidden, the problem is that when the image icon overlaps the product's then it takes the mouse over event causing that when the mouse is over it the popover doesn't display.
Adding a listener to the icon to trigger the popover would be problematic (a bit difficult and disrupts the continuity of the popover being displayed)
Is there css trick or other way in which the icon can be inhibited from taking events and letting the underlying image to throw the events, kind of making the icon "transparent" for events? (don't know if this is possible at all)
Thanks in advance!
Sample overlapped images
Related
I´m working on a tool only for tablets (Android, iPad) based on Cordova and jQuery Mobile (1.4.5). In the first phase of this tool, many of the users who have to work with it were asking for some more comfort regarding the behavior of the form popups.
The problem was:
As a user came to one section, I provided him with a collapsible-set, consisting of sub-sections. In this sub-sections, the user gets data-grids with Add, Edit and Delete buttons next to each data-set.
So, as the user tapped on Edit button (or Add), I opened up a popup with the necessary form and form-elements to edit this data-set or add new data to the database. But in many of the upcoming popups the amount of the form-elements is as high, so the popup appears higher or even much higher then the collapsible-set (including the data grid) behind the modal popup is.
The popup of jQuery Mobile is centered by default and even if I positionTo origin and pass x and y coordinates to it, the library/widget wants to position the popup to this coordinates by the center point, rather then the upper left corner.
Users always had to scroll around to come to the start point of the form and after submitting the form, they had to scroll up again to where they tapped on the button to open the popup.
Now I tried to do everything I could imagine, to force the popups top position to 20 pixels below the top position of the visible area on the tablet, regardless of where I am, when tapping on any Edit or Add button.
I was playing around with offset() (window.pageYOffset), etc. and set the position of the popup by:
popup2open.popup('open').css({'top':popupTopValue+'px','left':popupLeftValue+'px'});
In fact, the popup is positioned to exactly where I want it, if the top offset is between 0 and 100. On all values above 100, the top position of the popup increases by absolutely incomprehensible value. The only consistent fact is, that the more I scroll down before I tap on a button, the more this value increases - so it does not in/decrease by random.
(BTW: I found out that I have to set "popupLeftValue" to 0, so the popup is positioned in the center horizontally.)
I just can´t see any regularity on increasing value...
Can anybody give me a hint or a punch to the right direction?
Thank you in advance!
PS: I experimented also with .css({'position':'[fixed|absolute]','top':popupTopValue+'px','left':popupLeftValue+'px'}); and that worked well. Only to find out one show-stopper: If I set the focus to an input-field inside the form and than closing the virtual keyboard on the tablet, a reposition-event is triggered and by this, the popup is re-positioned massively below the former position (in fact around 300 pixels below and just marginalized to the right border of visual area). The Cancel and Save buttons are even out of scroll-able area.
(some more funny fact, btw.: if I set the focus to the same input-field, than not closing the virtual-keyboard but directly setting the focus to a select element and after this pressing the back button of the tablet to escape the select menu, no reposition-event is triggered...!?)
On 18th of July 2013 Gabriel Schulhof added this line to a feature-request from one user, who asked exactly for what I´m struggling around with:
"We are indeed considering adding such a feature..."
I'm having a little problem with my ASP .NET site on Ipad Safari. I have the following form:
A div overlayed on top of the main form.
In this div I have an update panel with 4 or 5 drop down lists.
Each drop down list when changed will pull some data from DB and populate certain gridview on this same div.
On PC using Chrome, FF, IE..., my site works great. But on Ipad Safari, I have this weird problem:
After user changing a drop down list, there is a chance that the clickable area of all elements will drift upward from the elements's actual position.
For example, when I click on a button, nothing happens, if I want to use that button, I have to click an empty area a few dozen pixel above it. The same goes for textarea, radio button,...
The amount which all clickable area drift upward does not seem to be fixed, some time they drift up hundreds of pixels, while other time they only drift up a dozen pixels or so, but all clickable area always drift up by the same amount.
Zoom in/zoom out on the page or select any textbox will reset all clickable areas to their right positions.
I'm using .NET Framework 4.5, and testing on a Ipad using IOS 8.3. Unfortunately, I can't reproduce it using js and html alone.
I finally found the answer for this strange issue. Apparently, when I scroll up and down on the overlay div, I might also scroll the main form by accident. If I scroll the main form together with the overlay div, when I click on the drop down list and populate the gridview, all clickable areas on overlay div will drift up. The more I scroll my main form, the more the clickable areas drift.
I fix this issue by adding the following function to onclick event of all drop down list:
function fixClickableDrift() {
$(window).scrollTop(0);
}
Now matter how much I scroll my main form, when I click on the drop down lists, this function will reset main form's position back to the top of the page. Hope this will be helpful for someone in the future.
The Back button in the top left corner of my touch user interface is a little hard to press on a resistive touchscreen, because the touch events are not so precise at the borders of the screen.
The visual size of the button can't really be increased because the screen space is needed for other things. Thus I would like to increase only the clickable area of the button. So when the user touches somewhere in the top left corner of the screen (as marked in red), the back button should be pressed. Note that the red area also overlaps another button. Ideally, the visual button state would also change to the "pressed" state.
Can anyone give me some pointers in the right direction? I have considered the following things, but I'm unsure which would work.
Overlaying the actual button with a larger, invisible button, painted with a transparent brush. But I have no idea how I could paint the smaller button as "pressed" when the user is pressing the invisible button.
Creating a new class based on QWidget, which has the size of the red area (with invisible background) and contains the actual button. Then relay touch events to the button so that it is pressed when the user touches the empty area.
Subclassing QPushButton and reimplementing QAbstractButton::hitButton to accept points outside of the button's area. But I guess that function would probably isn't even called when I touch outside the widget area.
To occupy more vertical space inside a layout, set buttons vertical policy to expanding.
To increase the clickable area without increasing the visual size, increase the margin.
To have the back button overlapping other buttons, don't put it to a layout. Instead set its parent directly and move it to the corner.
backButton = new QPushButton("< Back", mainWindow);
backButton->setStyleSheet("margin: 30;");
backButton->show();
backButton->resize(150, 90);
backButton->move(-30, -30);
How can I get the buttons (close, minimize, maximize) to hide when the cursor isn't over the window and show themselves when the cursor is.
Basically, I want to duplicate the behavior that Quicktime has.
If you subclass NSWindow you can do it with your own buttons and tracking area.
I want to implement an image/div drag functionality like the one in the tinymce,
when the user click on the image, its border are selected and one can move the image/div around in the editor, and in the meanwhile it generate inline css as well..
Thanks...
You probably want something like jQuery UI's draggables, which allows you to make dragging movements with your mouse which will alter the dragged element's CSS accordingly. Use the start and stop events if you want to change the border color when it is being dragged.