Given the following images, I'm really not sure how best to approach this issue.
I mean I could make a sprite image and position each link/icon absolute so that when the hover state occurs they don't push each other. However the problem is the clickable area will grow with the hover state thereby overlapping the other buttons and making them hard to click.
Any suggestions/ideas would be greatly appreciated.
Cheers!
My solution thanks to #ioannis-karadimas
http://codepen.io/trev/pen/overlapping-hover-states/2
If there 's no movement involved, there is no reason why you cannot separate the trigger area from the images themselves. Make all triggers invisible divs floating above the graphics, and the clickable area will stay constant and predictable. Changes in the graphics, like overlaying an image with another or changing a sprite's placement need not be related to the clickable area at all.
To help you in the initial positioning and debugging of it, you could initially place a border around each layer, then position them above the graphics. When you are done, remove the border and make the layers transparent filling them with a fully transparent GIF.
Haven't tried but I think it should work.
.button:hover:after {
display: inline;
position: absolute;
left: 60px; // button's width / 2
width: 150px;
height: 150px;
background-image:url('cross.png');
}
You need to create an absolutely positioned elments (or, pseudo-elements) inside the icon containers and show them on mouse over. Thus, it won't affect the hover area.
Here's the example with pseudo-elements, but in case you need support for IE < 8, you can just add normal ones:
http://jsfiddle.net/bFVx8/
Related
For instance, I have 10 left-float divs which take 20% of the container width with an aspect ratio of 1:1 (made using jQuery):
width: 20%;
float: left;
http://i1214.photobucket.com/albums/cc494/Golitan11/example1_zps7a24eb88.png
Now, when I click one of them, they take 40% of the container width (without losing the aspect ratio of 1:1) and the image is changed to a Soundcloud iFrame. In this example, I clicked the second one:
http://i1214.photobucket.com/albums/cc494/Golitan11/example2_zps9b7a9f48.png
The problem is, as you can see, the floating. In fact, I would like to fill the hole on the left. I tried using a table instead of divs, but in this situation, it makes it too hard to move the s to other (even with jQuery) when the clicked is getting colspan/rowspan. Any idea?
Thanks!
I have checked other posts but none mentioned about a precise location to overlay.
Consider that I have an image, for eg. a traffic light. I need to overlay (not sure if this is the correct term or not) a div on top of the precise location of, the green lamp, for example. This is so that I can animate the div via jQuery to change the colour of the div in order to have an effect that the image is being animated.
The problem now is how to be precise in this, so that the location of the div completely matches that part of the image? Does it mean having to measure the pixels before setting the top and left of the divs? Or is there a smarter way?
I have considered other options such as using canvas (or svg, or silverlight) to redraw the whole thing instead of embedding the image (i.e. redraw a whole new traffic light picture). However, for this I believe it will be way more complicated than what I asked. Correct me if I am wrong here.
Please advise.
One way is to put the image inside a div which is either positioned relative if you want it to be inline with other elements or positioned absolute if you want to set its position on the page. Then position absolutely the overlapping div inside the same div as the image.
for example
Styles
#holder {
position:relative;
}
#over {
position:absolute;
width:40px;
height:40px;
left:20px;
top:30px;
}
Body
<div id='holder'>
<img src='IMAGE SOURCE'>
<div id='over'></div>
</div>
You will need to adjust the width, height, left and top of the div with id='over' as necessary.
You could replace the div with id='over' with an image use position absolute on this image and set left and top as needed.
I am a very new (see: about a week) CSS user trying to do something that I think is pretty simple. I'm trying to (in a paragraph of text) post an image that is a help icon, that will display more information when you hover over it.
I'm having a bit of a problem with getting my divs to align correctly. I'd like the div containing the picture to only trigger when you hover over the help icon itself, not the entire line it's on. On my code (although not exactly in jsfiddle), I can do this with positioning it absolutely, however this causes the text below it to be overlapped when you use the hover. If I position it any other way, it doesn't overlap, but it isn't fit to the picture. It's back to only working on the entire line.
Is there a way to both fit a div to its contents (a small ~25x25 help icon) and then cause the hover below to not overlap what's under it? I'm trying to keep it on just css.
http://jsfiddle.net/YbGE6/ <--- Very basic jsfiddle format.
<div id = "Big">
<div id = "one"> "Hover" <div id="two"> "Hover text" </div></div></div>
Change the CSS for the div with the help icon to include display: inline-block;, which will cause it to fit its contents. div is by default display: block; which stretches across the entire line. Do not position the div absolutely, use the default static position, and have it float to wherever you want. The text will flow around it, and when the size of the help div changes on hover, it will push the text aside and the text will reflow around it.
Here is some documentation for float: https://developer.mozilla.org/en-US/docs/Web/CSS/float
I'm trying to create a responsive site (resize the browser window to see the changes), but I'm unable to center these checkered divs.
http://arunmahendrakar.com/ktw/play.html
The divs are dynamically created and appended to one of the four 'container' divs (#topLeft, #topRight, #bottomLeft and #bottomRight).
I have tried using margin-left:auto; and margin-right:auto on various elements, but that did not help.
Please help me horizontally center the #topLeft, #topRight, #bottomLeft and #bottomRight divs. I prefer a pure CSS solution, but if it is not do-able, I'm ok with a js tweak as well.
There are a whole bunch of different way to do this with some tweaking to the way you build that structure. Here's what I'd do:
First, size things a bit more normally; make the quadrants (#topLeft for example) width: 100% and the individual square sizes padding: 5%. This will give the squares the same size as they have currently, but the 100% width ensures that things are actually centered where you want them to be. At 200% the "center" of a quadrant will be off by 50%.
Next, instead of using float and clear, use display: inline-block on the squares. This will have them all running together on a line; your Javascript can manually break them up by inserting a <br> after every 5 squares. You'll no longer need to add the clearBoth class once you've done this.
At this point, you should have almost exactly what you want. There will, however, be some extra spacing between each row of squares. This is due to whitespace in the HTML, and to get rid of it, just set make sure the quadrants (again, #topLeft for example) have font-size: 0 set.
That ought to do it!
Explanation
It's really pretty simple: display: inline-block obeys text align. By creating your checkerboards out of inline-block elements instead of floats, you can control which side they align to by just changing out text-align.
All the other stuff is just some necessary cleanup work to make this technique work nicely.
I need to implement mouse resistance in JavaScript.
As an example of what I mean, think of how the Enlightenment window manager handles screen edge resistance to switch between different desktops, or if you are not familiar with that:
Imagine a large rectangle with a square within it.
When click-moving the mouse [onmousedown] within the square, the mouse lets itself be moved until the borders of the square, then exercises some resistance until a threshold is met, and then moves around within the larger rectangle.
Ideally the mouse cursor should stay trapped within the square until that threshold isn't met, and only leave that area if it is met.
Any ideas or examples of this somewhere?
A cross-browser solution is also greatly appreciated. (Down to IE7, that is)
As stated you can't set the mouse position with Javascript.
Since you asked about implementing this on mousedown, however, I assume the user is dragging something around on screen. So you could have the element they are dragging show this behavior. You need two elements to act as regions, one where the target can be freely dragged and another to define the size of the boundary. I'd do it with jQuery to shorten up the code but basically you'd have something like this. (Untested code)
HTML:
<div class='borderLand'>
<div class='freeZone'>
<img class='draggable'>
</div>
</div>
CSS:
.borderLand {position: relative; width: 110px; height: 110px;}
.freeZone {position: relative; top: 10px; left:10px; height: 100px; width: 100px;}
JS:
I can't write the full code off the top of my head but the algorithm would be something like
onmousedown{
check for click location
if it's over the draggable (watch for bubbling) begin dragging, set dragging flag
}
onmouseup{
clear dragging flag if it's set
}
borderland onmouseover{
if dragging, stop the movement of the draggable (watch for bubbling here too)
}
borderland onmouseout{
start dragging again (if they move back in or out it doesn't matter, you want to drag)
}
Sorry if you need more detail, but doing this in plain JS would be a little lengthy and I'm not sure how much help you need.