Context
On OSX, I notice that if I take my mouse cursor and drag it to the border (bottom, left, or right), the cursor changes to from regular pointer to resize cursor (<->) when:
I am inside the window, but within 4-5 pixels of the border
I am outside of the window, but within 4-5 pixels of the border
Question
Now, I note that in CSS/DOM, I have the "on mouse over" event -- how would I implement something like this in CSS / DOM / JavaScript?
Would the correct approach be:
create some type of "invisible border" that is not shown, and also not contribute to the window size?
do some type of complicated manual mouse tracking to know when I'm close to the border (since I also need to handle when the mouse cursor is outside of the border)
does CSS have some type of "mouse near border" rather than "on mouse over" event?
Thanks!
This is an approach I refined from one originally posted by undefined (another user) which was subsequently deleted for some reason. By no means should this be interpreted as a final approach, but it shows how you could create a bounding box with left/right/top/bottom handles, all added by CSS.
HTML
<div id='container' class='boundary top-bottom'>
<div class='boundary left-right'>
<div class='contents'></div>
</div>
</div>
CSS
#container {
width: 300px;
height: 300px;
margin: 50px;
}
.contents {
cursor: default;
background: green;
width: 100%;
height: 100%;
}
.boundary {
background: blue;
padding: 10px;
}
.boundary.top-bottom {
cursor: row-resize;
padding-left: 0;
padding-right: 0;
}
.boundary.left-right {
cursor: col-resize;
padding-bottom: 0;
padding-top: 0;
width: 280px;
height: 300px;
}
http://jsfiddle.net/userdude/V5h5F/1/
Handling something like needing a border and invisible overlaps would require some retooling, probably using something like Javascript and the internal boundary being the border; the complexity of doing that in pure CSS is problematic I think (undefined's answer handled this with positioned elements on the boundaries).
Related
I want to create a button like the one you see here
This page has a Feedback button on the right hand side which is near to the scrollbar. How can I create a similar button.
There can be a lot of solutions depending on the exact behaviour you want with the feedback button. Those can involve JavaScript to delay the button's appearance, and CSS transforms to rotate the element. The simplest one, I think, would be to create a fixed element and setting it's right to 0.
.feedback {
position: fixed;
right: 0;
bottom: 30%;
height: 80px;
width: 20px;
background-color: #55E;
color: #FFF;
}
.feedback:hover {
width: 30px;
}
<div class="feedback">
</div>
I have a start button in my js game. I just noticed that I can be slightly to the right of it, and the cursor is a pointer. My css:
#start{
position: absolute;
top: 130px;
left: 195px;
height: 80px;
width:320px;
background-color: red;
cursor: pointer;
border: 2px solid yellow;
border-radius: 20px;
}
The button is just a div. After setting the button to a variable named "start", I use the following js to make it change background on hover:
start.onmouseover=function(){
this.style.backgroundColor="#FF4500";
}
start.onmouseout=function(){
this.style.backgroundColor="red";
}
I am able to trigger the hover by being outside of the button. Why is that? Here is the game where the issue occurs. The button is the first thing you see. This occurs with some other buttons as well. I know that I can use css hover, but am curious to find out what's wrong with this.
The reason why it is acting this way can be found in your css for #new:
#new {
font-size: 40px;
font-weight: bold;
color: yellow;
position: relative;
left: 48px;
bottom: 24px;
You should note that this child component is inheriting the width of the parent div which you set to have a width of 320px. You can verify this by inspecting the parent and child and looking at the computed styles:
Parent:
Child:
Then in your css for #new, you MOVED the position of the element to the right by 48px:
left: 48px;
This element still has a width of 320px as shown in chrome developer tools.
I bet that little blue bit that has overflowed is exactly 48px and where you are experiencing that unwanted behavior =) So, I hope you now understand what is going on with your css!
You can even verify this by setting the width of the child to be:
width: calc(100% - 48px);
You should find now that there is no more overflow:
The browser is actually taking the hover-detection from this area here.
http://i.imgur.com/WPYi7gj.png
You can probably see that it uses the text as the start of the hover area, and that there's a lot of padding on the right of the element. You'll want to remove this padding using CSS.
I'd like to be able to detect possibly with CSS clicking / hovering on a shape (<img> tag with an SVG source file) but not on the box-model estate around it. In the image below, the area that would listen for a click / hovering is the one in light blue, while the 'extra' estate is in orange.
In my particular case, I have two circles one on top of the other - the one below listening for a click / hovering. Therefore, I'd like the light blue annulus only to listen for them. However, according to the box model, in order for the underlying circle to detect a click / hovering, the user would have to click or hover on that square orange stripe.
I think you would need to convert the image from an SVG and use an image map polygon to specify the area for an onclick event.
https://developer.mozilla.org/en/docs/Web/HTML/Element/map
You could also achieve this by using two divs (one wraped around the other) with cSS border-radius and background-image set to your image. With stopPropagation () and cancelBubble you can set the clicking behaviour to your favorite.
HTML
<div class="big_cycle" onclick="alert ('clicked');">
<div class="small_cycle" onclick="event.cancelBubble = true; event.stopPropagation ();"></div>
</div>
CSS
.big_cycle {
width: 50px;
height: 50px;
position: relative;
cursor: pointer;
background-color: #f00;
border: 1px solid #000;
border-radius: 25px;
}
.small_cycle {
width: 28px;
height: 28px;
position: absolute;
left: 10px;
top: 10px;
cursor: default;
background-color: #0f0;
border: 1px solid #000;
border-radius: 14px;
}
I made a simple Plunker to demonstrate that: Click me
tldr; I want to have a button's event captured (click) even though it's under a DOM layer.
Here's my problem, I have a DOM layer that's relatively positioned and has a z-index set higher than 1, let's just say 2. That DOM layer is above the button (Button A) I'd like to have triggered when clicked. The reason that DOM layer is above the button (Button A) in question, is that the button (ShoreMore) across from it has another event that when clicked, opens a drawer of other little links.
Here's what I've tried:
I tried adding pointer-events: none; to the DOM layer above my button. problem is that while it now allows the button to be pressed, the DOM layer with the button that opens the drawer of other link no longer works. Suggested by this SO question.
I also came across this little trick found on this website. It essentially, hides the mask and rechecks the user's click coordinates and fires the event that is found within the coordinate. However, I found myself unsatisfied with the results, as I'm often given DOM that's unhelpful too specific or too broad based on the user's click. (e.g. getting the icon, text next to the icon, etc. of the Button).
For illustration purposes, here's what I have:
Here's my code:
HTML
<div id="drawer" class="drawer">
<div id="shield" class="shield"></div>
<div id="expander" class="expander">
<div class="inner">
<ul>
<li>links</li>
<li>links</li>
<li>links</li>
<li>links</li>
<li>links</li>
</ul>
<div id="tab" class="tab" >
<i class="icon"></i> Show More
</div>
</div>
</div>
</div>
<span id="btnA" class="btn">
<i class="icon"></i>
<span>Button A</span>
</span>
CSS
.drawer {
position: relative;
height: 0;
z-index: 2;
margin-bottom: .5em;
}
.expander {
position: relative;
height: 28px;
transition: height .2s ease;
overflow: hidden;
}
.inner {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin-bottom: 28px;
}
I didn't include the javascript, but "Button A" and "Show More" have a click listener. They both work, but Button A is confirmed to work if pointer-events: none; is added to the CSS of the class "expander."
EDIT: spelling
One possible solution is to use more absolute positioning.
The problem you're running into is that HTML elements, no matter their shape, end up as rectangles when rendered. Your blue outlined layer has a complex shape that's not strictly rectangular, but HTML doesn't care - it expands the layer's shape into a big rectangle to cover the parent element and all of its children elements, as you've correctly drawn in your diagram.
Absolute positioning helps prevent that from happening. Instead of leaving space for an element in the document flow, absolute positioning sort of pops the element out and positions it relative to its parent. The result is an element that doesn't expand the borders of its parent element, because it essentially takes up zero space in the normal document flow.
Consider the following example:
$(function(){
function slideDown(){
this.innerHTML = "Close";
$("#tray").animate({top: "50px"});
$("#higher-button").off("click").on("click", slideUp);
}
function slideUp(){
this.innerHTML = "Show More";
$("#tray").animate({top: "0px"});
$("#higher-button").off("click").on("click", slideDown);
}
$("#higher-button").on("click", slideDown);
$("#lower-button").on("click", function(){
alert("Lower button clicked.");
});
});
* {
margin: 0;
padding: 0;
text-align: center;
line-height: 50px;
}
#box {
position: absolute;
top: 20px;
left: 20px;
}
#lower-button {
width: 200px;
height: 50px;
background-color: #cccccc;
position: absolute;
top: 50px;
}
#higher-button {
width: 200px;
height: 50px;
background-color: #888888;
position: absolute;
top: 50px;
left: 200px;
}
#tray {
width: 400px;
height: 50px;
background-color: #aaaaaa;
position: absolute;
}
#mask {
position: absolute;
width: 400px;
height: 50px;
background-color: #dddddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<div id="lower-button">Button A</div>
<div id="tray">
<div id="higher-button">Show More</div>
</div>
<div id="mask">Mask</div>
</div>
Absolute positioning lets you easily layer and position elements in a way that avoids them taking up excess space.
The caveat to all this is that absolute positioning can be pretty messy. Since it removes elements from the normal document flow, they don't take up any space, and it can wreak havok with your layouts. So use absolute positioning sparingly, for cases like this where you're building a UI element that you probably don't need taking up space in the layout anyway.
As always there are dozens of ways to solve this problem and this is only one possibility, but I hope it helps you figure out your own solution. Good luck!
Edit: Note you don't necessarily need to make all of the UI elements absolutely positioned, only the ones you need in order to manage the document flow. For example, the parent UI element could still be relatively positioned, and you just "pop out" the individual UI components. You still need to manually manage the size of the parent UI container, because absolutely positioned elements take up zero space in the flow. jsfiddle.net/v2646v41
One easy solution would be to change the z-index of Button A. When the drawer is closed, set it higher than the drawer's div, and when Show More is clicked, set the z-index underneath, then back above after the drawer has slid back under the mask.
I know a lot of responsive design uses percentage width and absolute positioning to adapt to screen widths of different media types. But what if we can take advantage of the float right css style that is not commonly used but highly cross browser compatible?
Demo: http://jsfiddle.net/3A89Q/48/
.wrapper { width: 70%; margin: 0 auto; }
div, span { display: block; float: left; position: relative; }
.wrapper > div { width: 60px; }
.b1 { background-color: blue; height: 132px; }
.b2 { background-color: red; height: 88px; }
.b3 { background-color: green; height: 44px; }
.test { background-color: black; max-width: 160px; min-width: 100px; float: right; border: 2px solid black; }
.test div { width: 16px; height: 16px; background-color: yellow; margin: 2px; }
<section class="wrapper">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<span class="test">
<div></div>
<div></div>
<div></div>
</span>
</section>
My idea is to shrink a right floating element to a minimum width without using percentages. This shrinking process should only occur on the condition of neighboring elements restricting the available space of the element when the window width is reduced in size. If the available space available to said element is not restricted, the element will increase its width to a max length. So virtually the element has a max and a min width governing a given range of flexibility in size. (Note: This range of width can be easily demonstrated by shrinking the results window to a small size in the jsfiddle demo I have linked above.)
At this time if the right floating element merges into a left floating element, it will float down underneath the left floating element maintaining its max width.
My desired result is to have this right floating element shrink to its minimum size before floating down under its neighbor. Once the element reaches its min-size it will drop down under its neighbor and in turn increase its width to fill in the remaining space up to its max width, and begin to repeat the process of adapting to its available space while floating right.
My question is, can my desired results be accomplished by just using css / css3? If not, is there a JavaScript / jQuery plugin that performs this functionality?
I have linked a jsfiddle demo above to help you understand and utilize a solution to this idea.
Thank you for your help.
Have you though about using CSS media tags to target different screen sizes?
here is a reference link.
http://webdesignerwall.com/tutorials/css3-media-queries
A jQuery approach would be using a resize event handler, and adjusting the CSS accordingly with jQuery. This will be for only when the browser window has been resized. Alternative during document when ready, you can calculate widths and heights dynamically.
see this stack solution Using jQuery To Get Size of Viewport
here is another reference link
http://api.jquery.com/resize/