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');
});
Related
Whenever i re-size my window the slider buttons (next/previous) disappear and do not move with the slider. Any idea on how to fix this?
JSFIDDLE:https://jsfiddle.net/b31kvqwr/
Buttons CSS:
#nav img {
position: absolute;
top: -10px;
cursor:pointer;
color:grey;
width:40px;
height:30px;
}
#prev {
margin-left: 530px;
font-size: 10px;
}
#next {
right: -30px;
margin-top: 13px;
}
PS: if the result in the jsfiddle doesn't show, expand the result tab.
This is how the slider looks like when full screen (the right way);
This what happens when i re-size the browser horizontally:
The buttons aren't moving with the slider. Any help please?
The problem at the moment is that you are using margin-left:530px; meaning that the arrows will always be 530px from the left of the screen no matter the size of the screen. It also looks like what ever is wrapping it has a set width and isn't resizing, your code was to messy for me to find this but there are a few thing that I found to make the problem a little better,
https://jsfiddle.net/b31kvqwr/2/
I have managed to keep it the correct place for a lot of the, however to improve get it working perfectly you will need to create 1-2 #mediaqueries to tweet the alignments at different sizes to make it perfect.
The way I did this was by changing margin-left to position:absolute and use a left positioning instead on your prev and next buttons;
#prev {
left: 50%;
font-size: 10px;
position:absolute;
}
#next {
margin-top: 13px;
left:58%;
position:absolute;
}
As I side note I would recommend cleaning up your code like #TingGaint said as it is insanely messy. Also when posting on stack try only include the relevant code not all of it as it makes it quicker and easier to look through and help.
EDIT
I have found the problem, still do what I said above however now instead of have the arrows div where they are now, move them out and so there below <div id="wrapper"> however you will have to play around with the placement as they will be at the top of the screen. However now they stay in the same place when re-sizing!
Example - https://jsfiddle.net/b31kvqwr/4/
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>
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.
on facebook if you hover over something with a lot of likes a div pops up showing everyone who likes the post. i was wondering if anyone could mimic the div in css and explain how i can do it. there is a picture below showing what i mean. i know you have to use a :after in css but im not sure how to position the triangle and all that.
Here is some code i found somewhere else:
#pointed {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background-color: white;
}
#pointed:after,
#pointed::after {
position: absolute;
top: 100%;
left: 50%;
margin-left: -50%;
content: '';
width: 0;
height: 0;
border-top: solid 150px red;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
}
The code you pasted there has the gist of it down. You can see a working JSFiddle here that makes it more like what you're going for.
There are two parts to this problem, I think. The first part is making the triangle. The second part is positioning the triangle.
Making the Triangle
The borders on the pseudoelement are responsible for that triangle we're seeing. If you're not sure how that's happening, take a look at this great answer that explains it quite well, I think.
Positioning the Triangle
The key to positioning involves making the child appear outside of the parent. We can do this by setting absolute positioning on the child. However, if we do this without changing the parent at all, the absolute positioning will be set relative to the window.
What we want here is positioning the child relative to the parent. We can do this by setting the parent element's positioning to anything other than static, which is the default value. In the code you pasted, you can see they set it to relative. For more about positioning, the working docs are pretty explanatory, I think. Another great resource can be found on CSS Tricks.
Anyway, we want our child to be just outside the parent. Accordingly, if we have a 5px high triangle, the child's CSS for positioning should look something like:
position: absolute;
top: -5px;
This will make it appear like its attached to the top, as you can see in the above JSFiddle.
After you've positioned it vertically the way you want it to, set its left positioning to get it where you want along the horizontal.
Though of course you must ask yourself if it's worth reinventing the wheel—tooltips come with Bootstrap Jquery.
I have an issue that only affect Chrome. Furthermore its only visible when the screen is at certain widths.
I've created a fiddle that can replicate the issue.
http://jsfiddle.net/T8LvA/63/
When you rollover the red box the width of the parent is animated to reveal more of the red box.
You may need to adjust the width of the html pane several times before you see the wobble,
Any thoughts on how best to resolve this?
Thanks
Use float:right instead of positioning it absolutely.
http://jsfiddle.net/T8LvA/70/
It happens because when you change the width, it extends to the right - then it's reflowed and moves back to the left to the correct position, which causes the wobble. Floating it to the right always keeps it there.
To clarify: you'll need to replace position: absolute width float: right on both #widget and .hidden for the correct result.
if you use postion you need use left and top, in this case it is useless.
Try fx you css in this way
#wrapper{
width: 100%; // was 600px
height: 100px;
margin: 0 auto;
//position: relative;
}