I am currently working on a custom component that will allow you to pick different points which correspond to different values in time. Here is some sample code:
<div class="shell">
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
</div>
.shell {
background-color: #DCDCDC;
border-radius: 20px;
display: inline-flex;
}
.indicator {
background-color: #3CB371;
border-radius: 50%;
height: 15px;
margin: 2px 5px;
width: 15px;
}
.indicator:hover {
background-color: white;
}
var shell = document.querySelector('.shell');
shell.addEventListener('click', function(event) {
if (event.path && event.path[0].classList.value === 'indicator') {
console.log(event);
}
});
This looks like:
I was wondering if it would be possible to write some JS that would allow my mouse to sort of lock into each of these individual circles. Sort of like when you have the grid open in PhotoShop and your mouse will gravitate to the points and lock on.
Ideally, I'd be able to lock on to the center point of each individual circle.
Thanks!
I guess the word for that mouse movement is often referred as "snap".
To accomplish that with JavaScript, you would have to be able to manipulate the users mouse position. And as far as I know that is not possible.
Think about the Usability concerns this ability would bring. For example it could bring security issues as the visited page could direct your mouse to a malicious link when you try clicking somewhere else on the page.
Related
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
So I'm trying to get two individual divs which are close in proximity to share one background image but I'm not sure if this is possible. I've uploaded two pictures, the second being designed for a smaller screen (just to further explain what I mean) http://imgur.com/a/2dypd . I can't imagine two separate background images would work as they wouldn't line up when resizing the window.
The only solution I can think of is creating two plain white divs to overlay on one single div but that seems like a dodgy way to go about it. I'm not expecting a hunk of code to be written for me, maybe just explain if it's possible and a reference so I can learn. Cheers.
Based on #cale_b's comment, you can set the same background to both div's and then use the background-position property to do the delusion of background sharing.
Then you can use media queries to make it look good in mobile too.
Here you've got a simple example that looks like the one you posted:
#wrapper {
width: 800px;
font-family: sans-serif;
}
#top {
height: 200px;
margin-bottom: 20px;
background-image: url("https://placekitten.com/800/400");
background-position: 0 0;
line-height: 150px;
color: #FFF;
font-size: 32px;
text-indent: 50px;
}
#bottom {
width: 500px;
height: 100px;
background-image: url("https://placekitten.com/800/400");
background-position: 0 -220px;
}
#bottom ul {
list-style: none;
}
#bottom ul li {
display: inline-block;
list-style: none;
padding: 0 10px;
line-height: 50px;
color: #000;
font-size: 24px;
}
<div id="wrapper">
<div id="top">
I'm a banner
</div>
<div id="bottom">
<ul>
<li>I'm</li>
<li>a</li>
<li>menu</li>
</ul>
</div>
</div>
As I understand, you want to use only one image copy of one image over two div and you dont want to use any overlay.
So you can do the following:
On the bottom div, use background-position-y:-100px or any other desired value. This way you push the image upwards.
This looks promising so far, but you will face an issue with the size of the background size specially if you are making a responsive web page.
I would say that background-size:100% 100%for both div would do the job yet it will make the image stretching (unless you go really responsive).
I still recommend using an overlay or even a ready made image. But if you insist on using two div then the above steps should be enough while you have to make your design suitable for this image.
N.B. keep in mind that you might need to use background-repeat:no-repeat
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'm working with InfoBubble right now, and I can't seem to get the actual tabs/titles off my InfoBubbles. How do you hide tabs? Just to be clear, I'm referring to just the actual tab at the top of the bubble, not the entire content area.
Is there an example I can look at, or some documentation that covers this?
I assume it must be since the label shown on the InfoBubble wizard is tab free, but I don't see HOW when I look at the source. (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/)
This is my map right now if it matters: http://jsbin.com/ugabaz/3/
Thank you!!!!
With some libraries you could use some css to fix this -- the problem here is that it doesn't give the tab a good name or class or anything to get ahold of via a css selector.
But you can cheat!
ethiopiaInfoBubble.tabsContainer_.style['display'] = 'none'; // like this
Here we are using the infoBubble's own pointer to the dom node for the tab container, and forcing it to be display-none.
The InfoBubbles you are using are designed to use tabs, that is the whole point of them...
Looking at the examples here:http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/
I don't see any without tabs, or any way to make one without.
If you simply want an untabbed pop-up then why not use the standard infowindow to display the information? That is what it is for after all.
Anyhow, if you must you could hide the tab in two ways.
Firstly, simply pass an empty string to the tab title parameter. This will stop the text appearing but you will still get a small square.
i.e. ethiopiaInfoBubble.addTab('', ethiopiaContentString);
Secondly, you could edit the InfoBuble code so that the inline css hides the tab.
Specifically the code that writes the following element...
<div style="float: left; position: relative; cursor: pointer; background-color: rgb(127, 21, 66); border-width: 1px 1px 0px; border-style: solid; border-color: rgb(127, 21, 66); padding: 7.5px 15px 8.5px; margin-right: -15px; white-space: nowrap; border-top-left-radius: 0px; border-top-right-radius: 0px; z-index: 100; display: inline;" class=" _ibani_1563"></div>
Should output simply...
<div style="display: none;" class= " whatever"></div>
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).