I have a menu bar with hover effects, and now I want to place a transparent image with a circle and a "handdrawn" text over one of the menu items. If I use absolute positioning to place the overlay image above the menu item, the user will not be able to click the button and the hover effect will not work.
Is there any way to somehow disable mouse interaction with this overlay image so that the menu will keep on working just as before even though it's beneath an image?
Edit:
Because the menu was generated with Joomla I could not tweak just one of the menu items. And even if I could, I did not feel a Javascript solution was appropriate. So in the end I "marked" the menu item with an arrow outside the menu-item element. Not as nice as I had wanted it to be, but it worked out okey anyway.
The best solution I've found is with CSS Styling:
#reflection_overlay {
background-image:url(../img/reflection.png);
background-repeat:no-repeat;
width: 195px;
pointer-events:none;
}
pointer-events attribute works pretty good and is simple.
So I did this and it works in Firefox 3.5 on Windows XP. It shows a box with some text, an image overlay, and a transparent div above that intercepts all clicks.
<div id="menuOption" style="border:1px solid black;position:relative;width:100px;height:40px;">
sometext goes here.
<!-- Place image inside of you menu bar link -->
<img id="imgOverlay" src="w3.png" style="z-index:4;position:absolute;top:0px;left:0px;width:100px;height:40px;" \>
<!-- Your link here -->
<a href="javascript:alert('Hello!')" >
<div id="mylinkAction" style="z-index:5;position:absolute;top:0px;left:0px;width:100px;height:40px;">
</div>
</a>
</div>
What I've done:
I've crafted a div and sized it to be what a menu option could be sized to, 100x40px (an arbitrary value, but it helps with illustrating the sample).
The div has an image overlay, and a link overlay. The link contains a div sized to be the same as the 'menuOption' div. This way a user click is captured across the whole box.
You will need to provide your own image when testing. :)
Caveat:
If you expect your menu button to respond to the user interaction (for example, changing color to simulate a button), then you will need extra code attached to the javascript you will invoke on the tag, this extra code could address the 'menuOption' element through the DOM and change it's color.
Also, there is no other way I know of that you can take a click event, and have it register on an element underneath a visible page element. I've tried this as well this summer, and found no other solution but this.
Hope this helps.
PS:
The writeup on events at quirksmode went a long way to help me understand how events behave in browsers.
Give the button a higher z-index property than the hand-drawn image:
<img src="hand_drawn_image.gif" style="z-index: 4">
however, make sure you test it in all major browsers. IE interprets z-index differently from FF.
For somebody to come up with more details, you would have to post more info, a link would be best.
Building on what Pekka Gaiser said, I think the following will work. Taking his example and reworking it:
<a href="#" style="z-index: 5">
<!-- Place image inside of you menu bar link -->
<img src="hand_drawn_image.gif" style="z-index: 4">
<!-- Your link here -->
</a>
Here you should be able to place an event on the underlying a-tag and, unless your image has an event, initiates a capture (!IE browsers) and then kills propagation of the event.
If you need a bit more help, let us know a bit more about the situation.
If the image will be statically positioned, you can capture the click event from the image as it bubbles up, by placing the img tag inside the menu item element.
<div onclick="menuclick()">
<img src="overlay.png" style="position:absolute;" />
</div>
Related
I have a small issue with a series of non-bootstrap popover made by me that contains social buttons each one and have to be shown when hovering or clicking an element that contains the popover.
The html of one of the items is like this:
<li class="social__list-item js-show-popover">
<div class="media social__popover">
<div class="media-left">
<span class="popover__img"></span>
</div>
<div class="media-body">
<p class="popover__title">SÃguenos en Google+</p>
<div class="g-follow" data-annotation="bubble" data-height="20" data-href="https://plus.google.com/104645458102703754878" data-rel="community"></div>
</div>
</div>
</li>
I am hiding .social__popover with opacity: 0; and visibility: hidden; and turn visible with jquery.
Everything works as expected, the problem is when you hover over the area where the iframe embedded buttons are when the popover is hidden and they make the popover to show.
Using display:none on the popover solves the issue, but it makes to break the rendering of some of those embedded buttons (mainly google buttons)
I prepared a Jsfiddle example: https://jsfiddle.net/victorRGS/dcv2g973/1/
It seems that we can live with it but I would like to work as expected, also the area of the facebook widget (not working in the example, idk why) is quite bigger and this one could be a real annoyance.
Any help will be welcome
If I am understanding your problem right, you should try this.
Adjust pointer-events:none; to the popover when they are hidden, and set back to auto when you hover the icon.
See example: https://jsfiddle.net/y6Ldjuwd/
Is this what you want?
I solved this adding the z-index property and worked fine, with no behavior problems in touch devices.
Updated example: https://jsfiddle.net/victorRGS/dcv2g973/2/
I have multiple buttons (as menu) as images on index page. I have rollover image on all of the buttons.
On click, result is show on iframe in the middle of the page. But i want also that button change and stay changed until next menu button is clicked.
Example for one button:
<img src="images/faq_b.jpg" alt="faq" name="faq" width="70" height="70" id="faq" />
There are much better ways to achieve what you are trying to do. I take it that you are using Dreamweaver. Generally the scripts that come with Dreamweaver are pretty poor and out dated.
For example, instead of using the "roll over" image changing ability that comes with Dreamweaver. You can just use plan old css.
For example if you created an image twice as wide as your button and added both states of your button side by side. By doing that you can now use css to simply move the visible area of your button from one side to the next, or as it will appear from your "normal state" to your "hover state"
Example css:
// button normally. Because we specify a width and height that is all that
// will be shown of our background. e.g. Our "normal state"
a.myButton {
display:block;
width:200px;
height:80px;
padding:10px;
cursor:pointer;
background:url(images/my-button-sprite.png) no-repeat top left;
}
// This will switch the button to our right side (or our "over state")
a:hover.myButton, a.myButton.active {
background:url(images/my-button-sprite.png) no-repeat top right;
}
In relation to your keeping the hover state over until another menu item is clicked.
Do a Google for "jQuery". It's a set of tools and plugins that use Javascript. JavaScript is what is currently doing the swapping of images for you.
There are 1,000's of tutorial on how to use css and jQuery to get the result you want.
Check out these resources:
http://www.w3schools.com/css/ << CSS is your friend.. Learn it..
http://api.jquery.com/toggleClass/ << this is what will allow you (using the code I have provided) to do what you're trying to do.
But I'm not going to tell you exactly how to do it.. Because that spoils half the fun!
I realize that this is probably an "old school" way of doing this, but I finally got my gallery to work with one exception. If the gallery is located lower on the page, the "#" link on the thumbnails causes the page to jump the top. Is there a better way to create this gallery?
http://pacmill.bigrigmedia.com/cms/portfolio-detail-test3.html
Thanks in advance!
Adding a return false will usually stop the page from jumping to the top when clicking on a # link.
<img src="..." />
For your problem, I would go with Shawn's solution and just use CSS. So delete all of the links around the images and add this to your document:
<style> img{cursor:pointer;} #Display{cursor:auto;} </style>
The second entry (#Display) is to make sure your main image does not get the pointer cursor. It would be better to just drop a class on each of your images and then assign the cursor to images with that class. That would look like so:
<style> img.myImage{cursor:pointer;} </style>
<img class="myImage" src="...">
I'm guessing you're using the anchor tag in order to get the hand icon on hover. You could get the same effect by using CSS.
style="cursor: hand;"
This should create the same effect and avoid the problem of the anchor tag.
I strongly suggest you to don't use an anchor tag for that. JavaScript events can be added to any DOM element, just like in:
<li class="click-to-expand">
<img src="..." />
</li>
And also, as some users already replied, you can use CSS pointer property to indicate a possible user interaction when hovering the clickable interface item.
.click-to-expand{
cursor:pointer;
}
Remember to keep it accessible by providing a valid URL to access the content in case it's necessary (no javascript fallback).
I'm trying to build a jquery app where I have a fixed image and a second draggable image. I need the fixed image to display z-index on top of the moveable image -- the fixed image is a picture with an alpha cut-out hole for a face like you might find at an amusement park. The problem is that as soon as the moveable (face) image is overlapping with the fixed image, click and drag events get captured by the fixed image which is on top and don't get to the moveable image. So it's no longer moveable. Here's my code...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
<div id="fixed" style="position:relative; z-index: 2">
<img src="background.png">
</div>
<div id="face" style="position:relative; z-index: 1">
<img src="face.png">
</div>
<script>
$(function() {
$("#face").draggable();
});
</script>
How can I get the face object to be draggable when it's behind the fixed background? Can I manually fire the mouse events on the object underneath? If so, how do I invoke them so the jquery-ui draggable() works properly? Can I somehow get the fixed image just not to capture events? Or do I need to write my own draggable mechanism by hand?
I think i found a pretty simple solution for you. Basically you can relay the event only when certain conditions are met (eg #face is under the #fixed). Check out this fiddle for example.
A quick look at the even data revealed that draggable only binds mousedown, so that seems to be the only event you will need to relay.
$('#face').draggable();
$('#fixed').bind('mousedown', function(e){
// TODO: IF #face is under #fixed AND mouse is over #face THEN
$('#face').trigger(e); // trigger the event on face
});
I think you might be better off creating some sort of "drag handle" to the element underneath, which would always be visible (at least while dragging is enabled). That, or a separate UI control separated from the images which would act as a "joystick" for the draggable image, so that you could move the image without having to manually drag/drop the image itself.
Think about it: lets say they drag the item underneath the top item, then drop it; how are they to pick it up again? If this is setup like you explained (a cut-out hole for a face like you might find at an amusement park), then the user would not be able to visibly see the element underneath, and as such, it would be impossible for them to interact with that element using the mouse.
I want to enable an effect on my web app where a user clicks an "Edit" icon and a text box elegantly slides out horizontally immediately to the right of the icon. Currently it is sliding out, but not very elegantly, because when I click on the icon for some reason a new row is created in the browser below where I clicked (and all content below is bumped down). The text box slides out, and then bizarrely jumps back up to where I originally wanted it to go, and the new row created disappears.
Please note, however, that if I put the textbox on its own line so that it is fully left-justified against the margin, that it works just fine. But I want it to scroll it to the right of the icon.
This behavior is the same for IE8 and Firefox.
Here is the HTML:
<img src="../images/edit.gif" onclick="toggleNotebox()" style="cursor:pointer"/>
<span id="AddText" style="display:none">
<input name="AddNoteText" id="TextBox" onkeypress="return addNote(event);" />
</span>
And here is the relevant Javascript:
function toggleNotebox() {
var options = {};
$('#AddText').toggle('slide', options, 500);
}
Here is the jsbin.com URL to see this behavior in action: http://jsbin.com/alopu/edit
Try putting a float: left on both elements.
http://jsbin.com/uzoqo
edit: for some reason the above works but if you try to edit it it doesn't show my changes to the code. not sure what happened.
Inline elements, which spans and inputs are by default, don't honour explicit widths. So jQuery's either changing the display of the animated element to block, or wrapping it in a block element so that that element can be animated.
That's why Samuel's change works - floated elements honour widths.