Long ago at a conference talk on React I saw the presenter add something to his code that allowed you to click-drag a divider on the screen by getting to within a certain number of pixels of it, rather than have click exactly on it.
It's a handy concept for improving usability, though I don't know what it is called. Adding 'slop' perhaps? Anyway I completely forget how he did it, presumably using some padding approach. Does anyone know what this practice is called and how to implement it? I assume it was something he achieved it with CSS but am not sure.
You can use vanilla js to do that. Using element.getBoundingClientRect() to retrieve the element's offset relative to body and comparing with the actual mouseX and mouseY(in the click moment of course) you now know the distance between the element and the click, now add some logic like: Case distance < acceptable offset then do some side effect.
Related
I wish to animate a page always from the right when switching between two pages. Why? Because the 'next' page is always dynamically loaded. Is there a neat way to do this? I am self answering with a hack, however I am looking for a way that isn't messing witht the DOM.
It is possible to achieve this effect by switching the DOM order of the elements instead of switching the selected property of the <core-animated-pages>. A way to do this can be found in this answer. The disadvantage is that it makes is very hard to switch between transition types (if so you were to wish) and makes for some ugly code either way.
I imagine that the answer to this question is no, but just in case I'm going to ask it anyway.
I want to use know if it is possible to use html5 drag and drop functionality without adding markup to the html (i.e., without adding draggable="true".
The reason I'm asking is because I want to use this within TinyMCE but I do NOT want to publish to the front end dragabble="true". I only want the drag and drop to function in the backend.
Any ideas?
P.S. I imagine I could see if there is a filter within TinyMCE for when the content actually gets published to the front end, but I would first prefer to see if it is possible to do this without a filter.
These things are draggable by default (ie. without any kind of attribute):
Links
Images
Selections
If you can make everything you want to be draggable be one of those things then you're OK, you just have to handle the events in the normal way. The easiest ways I can think of are:
Absolutely positioned images as 'drag proxies' (if they're absolutely positioned then they'll be out of the document flow)
Automatically select text on mouseover
However, I think it would be far more simple to add and remove the draggable attributes dynamically, eg. with jQuery (perhaps in the save event of TinyMCE):
$('#editor *').removeAttr('draggable');
I'm going to try and ask this the best way I can so sorry if I am not clear.
I am trying to learn css and html.
When it comes to positioning a image, for example top: # px;, how do I know what the pixel location is? Is there a program for that or is it a guessing game?
I hope you can understand my question. Thanks
Knowing the position of a element just by using CSS is not possible. This can be done using javascript. Check this link1 and link2.
If you know jQuery, it would have been more simpler.
Just use .offset().
is there a program for that or is it a guessing game?
You can also guess the position of an element when you assigned fixed dimensions to all the elements in your layout.
If you're trying to use the CSS top property in conjunction with display:absolute or fixed, then yes, it's mostly a guessing game. You can use browser addons to adjust your CSS so that you can see your element being positioned as you change it, get an IDE that supports live updating or previewing, or take a screenshot and measure the pixels yourself.
Normally, however, you shouldn't be placing elements this way. Just let the DOM do it's thing, and use padding and margins to put things into the right place. It takes a bit of trial and error to get things visually appealing, but it really isn't so bad.
I have to place on a web page a cylinder that looks like this:
it is composed by small images that overlaps to draw the curves on the surface. Every one of them is places on the page with a different img tag enveloped in an anchor with its own href. The z-index property of the img is used to make them overlap in the right way.
The cylinder has to be composed because it is dynamically created, as you can see from the image, its faces can have different colors.
What i need to do is to make all the faces clickable and each one has to point to a different URL.
My problem is, of course, that the cylinder has curves. And i have to be sure that the clicks points to the correct URL especially near the curves, it hasn't to be precise at pixel level, but at least acceptable.
I've tried to use a map with a single area for each of the images that composes the cylinder, but of course it didn't work, as i saw from the specifications, in such cases only the first declared map in the DOM works.
I'm thinking about to solve this via Javascript, but i think it wouldn't be an easy job, so i would be happy if someone can give me some advice on what should i try.
Oh, i cannot use HTML5 features to solve this.
Neat application of older technology to solve a challenging puzzle.
I can think of two ways forward for you. One is to put a transparent (rectangular) image on top of the cylinder and create an HTML image map, using the shape="poly" attribute. For resources, search for the HTML elements map and area for reference, especially the shape attribute. There should be many good tutorials online. Nowadays this technique isn't used that much any more, but it was really popular in the late 90s.
Another way is to use event delegation in javascript, attaching an event listener to the primary container. On each of your image "pixels" apply a CSS class for the appropriate portion of the cylinder it is in. In your event handler, you can do something differently depending on the class of the clicked on image, and you can do this without the massive overhead of attaching an event on each individual "pixel". In JQuery this would be something like:
$("#cylinder").on("click", ".green", function() { location.href = "green_url"; }
$("#cylinder").on("click", ".red", function() { location.href = "red url"; }
assuming you put class="green" on your green pixels and class="red" on your red pixels. (You can do this by quadrant or other technique; color is just an example).
Your best luck SVG ! https://developer.mozilla.org/en-US/docs/SVG/Tutorial
It is almost impossible with html dom elements to do this, you will have to bend it with CSS compatible all browsers.
There is also Canvas but you will have a hard time dealing with the clicks.
Only problem with SVG is that it's not supported in < IE8, and hardly in IE8. But bending a DOM element is also not available < IE9.
EDIT:
I saw that you can't use HTML5, so your only chance is generating the whole image in GD2 for example and trying to map the points. But what is the reason you can't use HTML5 ?
You might also try doing it using javascript / canvas via getImageData() function. This canvas function will rgba values of the given point. Using the alpha value you can check if mouse is over or clicking on the correct area or if it is a transparent area and nothing should happen.
I also made jquery plugin exactly for this purpose. Maybe it might help. http://www.cw-internetdienste.de/pixelselection/
I'm thinking of making an application where at some points a graph is displayed that maps people over time and space. The vertical access is location, the horizontal access is time, and each person is identified by a line. At any point where the person did something of significance, there is a bigger dot on their line. Conceptually, clicking the dot brings up data about that particular dot, but clicking anywhere else on the line brings you to a detail on that person. Hypothetically, when you hover over the line the line should change color, and when you hover over a dot, just the dot should change color.
I know that I could do this pretty easily with flash, but I was wondering if these days there is any way to do this using only html and javascript. Is it possible? (Compatibility is not an issue, the only machine I am targeting is my own.)
Thanks!
You can do this with canvas, but it might be simpler to use SVG.
Since SVG uses DOM, you get builtin methods for handling events like clicking etc., instead of having to write your own handling code like you would need with canvas.
There are a few libraries that make working with SVG simpler and cross-browser compatible, such as Raphael and Dojo's dojox.gfx library.
You could create the dots as overlaid divs, so you can easily handle clicks etc. You'd have to sort out positioning quite neatly, of course.
However, highlighting the line will involve calculating the point-to-line distance manually and redrawing.