In this simplistic JSFiddle sample, you can see a div with text over a img. The cursor can take one of three behaviors depending on where it hovers: pointer over img, text selection over div's content and default when outside both:
<img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png">
<div>Stack Overflow</div>
img {position: absolute; clip: rect(0px, 238px, 61px, 0px); cursor: pointer;}
div {position: absolute; margin: 50px; border: 3px solid gray;}
How can you completely ignore div's interference on cursor?
And by that I mean when you hover the cursor over div and img intersection you get only img's behavior, and when over div and outside intersection you get only outside's behavior.
If you can, please avoid invisible layers or sending the div behind the img.
If the solution involves JavaScript or jQuery, please do it!
The solution would be useful for labeling on maps.
One solution is to set the CSS property pointer-events to none on the div in question. You can find the pointer events specification here--the support isn't great (IE9+, mainly) but sounds like exactly what you need.
Related
I've been working from the InfoBox documentation and this post here to try to get an InfoBox looking almost the same as a standard InfoWindow as a starting point for some slight cosmetic changes.
As you can see in this fiddle the 'stub' that connects the InfoBox to the marker is still positioned at the top of the InfoBox.
I've tried to use backgroundPosition (commented out when you first open the fiddle) as follows in the boxStyle parameter, but it doesn't work.
boxStyle: {
backgroundImage: "url('https://directory.fsf.org/w/extensions/SemanticDrilldown/skins/down-arrow.png')",
backgroundRepeat: "no-repeat",
/*backgroundPosition: "center bottom",*/
opacity: 0.75,
width: "280px"
},
How can I move the stub down to the bottom center rather than the top left?
Add it with an :after selector to the infobox. Like this
#infobox:after{
content: "";
position: absolute;
bottom: -15px;
left: 125px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #333 transparent;
display: block;
width: 0;
}
See Demo
p.s. I didn't remove the old one from your JS. That's why you'll see it in the screen still.
Supporting documentation per OP's request
There is plenty of documentation of CSS selector specifically the :before and :afterselectors. Some of it, and probably the most basic information will be found in w3schools.
SmashingMagazine also has a lot more detialed information and usefulness of this concept.
By hacking the element with a selector you can also style according to behaviors. such as :hover, :focus, :active, :inactive, :empty, and :blank
The actual triangle is built by drawing a small rectangle using borders and clipping one side of the borders. See this link in CSS tricks on how to build a CSS triangle.
As far as choosing :before or :after, there isn't a definite explanation as to which one you should use. Depending which one you use you will have to reposition accordingly. In some specific situations such as adding a font awesome icon via CSS selectors, it would make sense to add it to the :before selector if it is going to precede the element it is being attached to or use the :after selector if it's going to proceed the element instead
You need to set the background position on .infoBox and change the margin-top to margin-bottom on #infobox.
.infoBox {
background-position: center bottom;
}
#infobox {
margin-bottom: 8px;
}
See updated fiddle
I am trying to create an effect on my webpage where you click a thumbnail, and a full-size div "zooms in" from the thumbnail. I thought it should be fairly straight forward using CSS/Jquery: simply set the div to position:absolute with top and left set to match the thumbnail clicked on, set the zoom property to an appropriate low value (such as .25), and use the query animate function to animate the zoom value to 1 and the top/left values to where I want the final image. This almost worked, with one caveat: Apparently the zoom CSS zoomed not only the size of the div (and it's contents), it also zoomed the position.
So my question is (relatively) simple: how can I position the "full size" div with top and left matched to the thumbnail and the zoom parameter set to less than 1?
Edit 1:
After further research, I discovered that apparently Firefox doesn't support the zoom property at all, and the behavior I was getting in other browsers was simply too inconsistent, so I switched over to using CSS transformations/transitions instead. Granted, the transition property doesn't work on IE<10, but then neither does lots of other stuff, so I can live with that.
That is unexpected behavior. An alternative is to put the zoomed element within another element, which has the absolute-position styling:
$('#content div').animate({
zoom: 0.2
},2000);
#content {
position: fixed;
top: 50px;
left: 50px;
border: 1px solid black;
background: #88e;
font: 60px verdana;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div>Lorem ipsum</div>
</di>
I am working on building Email Based HTML. Now as we know, Position attribute is not well supported in Email clients so i will have to go on without that. Now, looking at my options... i can go for either Margin or padding to position the elements.
The input elements can be relatively positioned or absolute. I'll just take the absolute part for now. So, my input will be for example
One Parent DIV (top:0, left:0)
A Child DIV (top:20, left:20)
Second Child DIV (top:20, left: 200)
Now, in a normal browser based HTML, these elements would easily be placed on their appropriate positions. But without the position: absolute or even top, left attributes. It get's tricky as the margin attribute arranges the elements relative to the other elements. Here is a sample run:
<div style="width: 600pt; height: 600pt; border:2px solid red; margin-left:20pt; margin-top: 30pt">
<div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>
<div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>
<div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>
</div>
Fiddle
My Expected outcome was, all the black divs overlapping each other, placed on the same position. That is possible if it calculates the margins according the the "Parent Element" but it is margining left from parent and top from the previous elements.
So My question now is, Is there a side way of using marging-left, top as top, left attributes and producing the same behavior as they would with position:absolute? Or simply, placing these three elements on top of each other using margin or padding attributes (No position, as it is not supported by Email clients)
I also know, using Divs for email isn't the best approach and i should consider using tables but trust me, the kind of HTML i am dealing with can only be generated using Divs and some playing around with margin or paddings. Any help will be appreciated.
You can use negative margins to achieve overlapping.
margin-top: -50pt
http://jsfiddle.net/pkdqh7kt/1/
Here is an example of stacking your divs horizontally:
http://jsfiddle.net/pkdqh7kt/2/
Also you can check this table to find out which CSS properties are currently supported by major email clients.
I have a <a> tag, rendered as a button that I'd loved to move a pixel to the north on hover. However, I noticed an unwanted behavior when positioning the mouse cursor just so at the bottom edge, the hover gets triggered, and once the button is repositioned the hover is no longer active. This leads to an infinite repaint loop, as long as the cursor is in that position. It maxes out my CPU.
I understand why it's happening, yet, I'd love to find some more elegant solution, than wrapping it in another div that handles the hover, without moving itself.
Any ideas?
Edit: JsFiddle with exaggerated movement of 5px.
I've tried these (all trigger the same loopiness):
position: relative; top: -1px;
transform: translateY(-1px);
margin-top: -1px; margin-bottom: 1px;
border-top: none; border-bottom: 2px ... /* normally 1px all around */
Edit2: The border trick worked, but the bounding box does not move only the content.
not sure if I am understanding your question correctly but
try giving your div the class button and use the following code.
$('.button').on('click', function(){
$('.button').css('margin-top' , '15px');
});
I run a small webpage that allows users to click on various links using image maps. I'd like to highlight the section that a user clicks on to give some feedback to the user (they may be clicking on several different parts rapidly).
Is there a way I can invert (or otherwise highlight) a small section of an image JavaScript?
Instead of using image maps, you could try this CSS method:
Use a transparent <div> on top of each "image-map" part (link), and then use the CSS :hover pseudo-class to handle the highlighting.
CSS:
#image {
position: relative;
width: 400px;
height: 100px;
background-image: url(image_map.png);
}
#map-part {
position: absolute;
top: 10px;
left: 10px;
width: 50px;
height: 50px;
background-color: transparent;
}
#map-part:hover {
background-color: yellow; /* Yellow Highlight On Hover */
opacity: 0.2;
filter: alpha(opacity=20);
}
HTML:
<div id="image">
<a id="map-part" href="http://www.example.com/"></a>
</div>
Note that this will only work for rectangular links.
Take a look at jQuery MapHilight.
I'm not sure it does exactly what you need, but you can achieve that with minor tweaking.
How about overlaying a semi-transparent <DIV> block over the clicked area to highlight it?
There are many way,
In a d fashion way, break down your images into many smaller pieces and using table to combine them. After that, by using javascript to replace thr "src" attribute for the highlight effect.
In another CSS way, use CSS to clip the alt. image on top of the original, and control which area should be visible.
It is better to have a single image for all rather then many small images to speed up and user will get it without delay by network.