drawing diagonals in every div of specific class? - javascript

Generally speaking - is it possible to draw with javascript two diagonal lines inside of a specific div on a website? It should basically look like a placeholder image … e.g. http://wightwildflowers.com/assets/images/placeholder.png
I'm just curious. If it's possible how would it be done?

You could add tags for each specific div with the correct size to your DOM and link the image. It will be a bit distorted.
OTO you can also try to create a canvas over each such div and draw the lines there.

there isn't a good native way to do this. the only pure javascript solution is to build a 2d array of some html element (table cells or divs or whatever) and treat them as pixels, coloring specific cells.
providing/generating an image is probably a good alternative.
the next option is using something like raphaeljs to generate browser supported vector images. this should work fairly reliably but adds a lot of weight to your page to draw two lines.

Is it reasonable to dynamically add and size the placeholder image you just showed? That might be your best bet.
You could also try working with the canvas element.

Related

Javascript to outline a png image?

I have a map which is a png file. I use getBoundingClientRect() with 2 div containers to check for overlapping divs througout my game. (Works fine to check for collison).
I was wondering if it's possible to outline a specific part of an image or wherever the transparency starts so I can then add a onclick event to that part of the div so the user cannot click outside of the map.
Hope this kind of makes sense.. If you need any more information let me know. Thanks
I think this is what you are looking for:
http://www.outsharked.com/imagemapster/
You add an area tag with the coords you need, then you can apply something over it. I recommend you this plugin since it's very powerful, easy to use.

HTML Image map vs. multiple div elements

I am implementing an Angular component which has many little areas where user can click.
I see 2 ways how to do it:
use background image and define map areas where user can click, add click handler on the image.
use div for each clickable part and attach the click handler to parent element (so I don't have many click handlers on each div). Use the CSS to style each div so it looks like the image in 1.
The problem with 1. is that when the image changes I have to change the map coordinates too.
The advantage here is that it should work without problem in many browsers.
The advantage of the 2. is that I can style the component as I need (so it can be smaller, bigger, different font, etc.), but it can have performance impact when I need to show more than one such component.
Which way would you choose and why? Or are there any other possibilities?
Edit:
forgot to mention that the component should also work on mobile devices
I don't remember where but i just read a nice article about:
div(webkit-transform) vs svg vs canvas
To make it simple:
1-50 elements = divs & images
50-500 elements = svg
500 and more elements = canvas
this are here just to give you an idea ...then everything depends on every element and device.
Canvas would be the best solution for everything.
The problem on canvas is the click handler.You need to create a collision detection script.
(i used a canvas with a background image(worldmap),to show the dots in real time of the current users.).but it's not clickable... (there is a clickable legend under/over the map)
SVG is prbably the best solution in your case
like #mainguy said u can draw stuff and add eventHandlers (or one like on the parent element).and the performance is better than divs.
DIVS
Most of the time i use div sets with one eventhanlder. they are so easy to use and style.. but only squares or circles.. and if you start to style them you loose alot performance (box-shadow..).
If you don't style the divs you can use alot of them.Especially if you put the eventhandler on the parentNode.
that way you can handle 1000's of elements without problems.(but don't use position:absolute)
Image Map
Again ... if there are not too many elements this is prolly also a good solution.. the simplest ... (the simplest way to draw your simple shapes).As soon you have you static MAP values you can then transform your imagesize recalculation the map with the ratio.. so thats not a problem.
I would go for the image map if there are not to many elements.
else SVG.
Everything depends on how many elements you have.
is that when the image changes I have to change the map coordinates too
if you use divs you don't have to change coords?
** Mobile devices support more than ie browsers.
I would do this with a SVG library which are fast, easy to style and suporrted by most browsers.
D3.js
is available for Angular as directive. Have not worked with his one yet. But it seems to be very popular. Just look on their homepage for a WOW! effect.
Raphaël JS
Was used by me in many projects. It has the big advantage that it supports even old IEs (sic!).
Just make a search for Angular SVG and/or JS and you will find a lot of solutions.
Not knowing the exact requirements, my default choice would be 2.
There are drawbacks, such us inability to easily map non-rectangular areas. The advantages however are huge, including easy maintenance, possible responsiveness, more robust styling possibilities and more.
The sole amount of divs shouldn't cause any problems and I wouldn't worry about it.
There are cases in which I would look for different implementation, though.

Bending an image in SVG

In my SVG application, I have images which the user can extend. I'd like to give controls to the user so they can bend them from the edges as well.
Here is a visual example of what a user could do.
Would love to hear suggestions on how to go about doing this.
One possible idea is that I put the image inside a path & add controls for stretching the edges of the path. However, I wonder how to stretch the image inside the path so that it consumes the whole available space.
There is no easy way to do what you want. However I can suggest two possible tricky ways:
(1) Convert it to a chain of images and apply an appropriate skew transform to each one.
(2) Use an <feDisplacementMap> filter to displace the pixels to the appropriate place.

How would one create a triangle container for an image (x-browser)

How would I create a DIV containing an IMG where the DIV cuts the image into a triangle, thereby displaying only part of the image though a triangle.
so..
<div>
<img src='some_image' />
</div>
Where the image is a square, but the DIV containing the image is a triangle.
http://www.script-tutorials.com/creating-kaleidoscope-using-jquery-and-css/ solves this very well except this solution is not x-browser friendly (non-ie).
http://css3pie.com/ looks interesting, however this relies on PHP.
You can't create a non-rectangular DOM element.
There are a few ways to hack it.
Firstly, there is a method of using CSS borders with varying widths on each side of the element to make it look triangular. It will still be a rectangle, but it will look like a triangle.
There's a tutorial on this here: http://www.russellheimlich.com/blog/pure-css-shapes-triangles-delicious-logo-and-hearts/
The down-side of this approach is that it is limited to creating right-angled triangles. You can join several of them together to get around this, but then you don't have a single container for your image.
An alternative hacky way of doing it would be to place rotated elements on top of the main element so that they cover the appropriate parts of the image and make it look triangular. This works in all browsers, although IE does have some very nasty syntax to do rotation, and it's quite heavy on the browser, considering that you'd only be using it to make shapes.
Another option might be to use CSS transforms. However this is only supported by a minority of up-to-date browsers, so it won't work for most users.
A better approach might be to use a proper graphics library for this, rather than trying to shoe-horn it into a <div> element.
I'd recommend using Raphael. It's a Javascript library which can draw directly into the browser using SVG (or VML for IE). It's trivial to create triangles using it and to fill them with a graphic. See the examples on the Raphael home page to get you started.
Depending on what you want the outcome to be, as far as i'm aware you cant make a triangle DIV without Transform:; However one solution would be having a div positioned inside the div in question with a PNG cutting of half the image showing only the transparent part through. Not sure if this is a viable option for you though.

Dynamically pixelate an html image element

I'm to take an image on a webpage, and then use javascript (or whatever would be best suited) to dynamically 'pixelate' it (e.g. into 20px squares). Then, as the user scrolls down the page, I need the image to gradually increase in resolution, till it is no longer pixelated.
Any ideas how I could go about doing this? I realise I could use php to resize an image and several times and just switch out the image, but that would require loading several extra images. Also, I know I could probably do the effect with flash & pixelbender, but I want to achieve it within the limitations of HTML5, CSS & Javascript if possible.
Appreciate any thoughts!
Update: Something like this, but with Javascript instead of Flash? http://www.reflektions.com/miniml/template_permalink.asp?id=390
You could render the picture in a hidden <canvas> element. Then use a derivation of the technique described here http://dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulation . To create a pixelated version of the image in a second <canvas> element using ever decreasing fillRect's. This way you even buffer the orginal image data.
edit: I would use 2 <canvas> elements so that you only have to fetch and draw the original image once. Perhaps you could buffer/cache this image in the same <canvas> element but by drawing it outside of the view port i am not sure if this is possible though.
I would use a calculation where you get the width in pixels divided by the square width and then the height divided by the square height. This would give you the lower resolution your looking for.
Then you can find a way to change the resolution to the result or grab the color of every pixel at position (height and width)/2 of the square your looking for. Then generate them into div tags or table with the appropriate color and size eventually resulting in the image its self.
I have a probably faster idea where you can have multiple versions of the image and change their z-index or their visibility as you scroll. Basically each image would have the different resolutions. If you have to do that to many images then this solution wont be as efficient as there would be lots of image editing but you can always do a batch edit.
Let me see If I can think of more ideas then I will edit.
Have a look at http://close-pixelate.desandro.com/
Explanation here: https://stackoverflow.com/a/8372981/22470
Not in a portable way.
That might be doable in Flash. Firefox JS extensions allow it to read images as JS arrays, Base64 strings etc. You might experiment with "1 DIV=1 pixel" hack, but it's hard to get any reasonable size of the image at any reasonable speed. If you feel really hyper, you could try creating base64-encoded images on the fly using the data: URI... many ways but none good...

Categories