Display X through div of different sizes - javascript

Problem
How would you go about displaying an X through div's of different sizes so it hits all four corners? I want one solid 1px black line to go from the top left to the bottom right of the div, and another solid 1px black line to go from the top right to the bottom left.
Example
If you're not following what I'm talking about, check out my mockup here.
Thoughts
The only solution I can think of for this problem, isn't a solution at all, but just a starting point for thinking about how to implement it. I figure I'd have two solid 1px black lines in the center of the div, and then use CSS to transform: rotate (45deg) on one line, and transform: rotate (-45deg) the other. Of course this isn't a solution that will work with any size div, since the rotation of 45 degrees will only work for a square <div>. I have a feeling I'm going to need some javascript to calculate the rotation angles. I'd really prefer a pure CSS solution, but I'm not sure CSS would be able to achieve this.
Code
Here is the code I currently have. The X is going to be placed through the .overlay class.
Edit
Edit #1: If it helps, all of my images are the same width.
Edit #2: Is there a way to use HTML Canvas lineTo() to reference corners of divs as values?

I think one possible solution for this is a CSS linear-gradient:on the background:. You create a gradient with two color breaks positioned near 50%. Se the middle break to black, and the rest to transparent. This leaves a thin black line for us to angle however we want. Then you just replicate the gradient it and mirror the angle. Something like the CSS below:
.image:hover .overlay {
//your other exising styles
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(49%,transparent),
color-stop(49%,#000000),
color-stop(50%,transparent)),
-webkit-gradient(linear, right top, left bottom,
color-stop(49%,transparent),
color-stop(49%,#000000),
color-stop(50%,transparent));
}
EXAMPLE DEMO FIDDLE
The only remaining issue is that since your images vary in aspect ratio, you can't have your "X" always hit the corners of your image. You'll need to standardize the ratio of your images, or code some javascript that will dynamically do it for each image.
Hope that helps.

Related

Align image in canvas if image width is bigger than canvas

I have an image which has a ratio of 1724:1078(width:height).
Now i need to center that image inside canvas which is 800:1078.
This scenario works perfect with the code bellow:
ctx.drawImage(this.leftImageResized, ((this.thumbnailWidth/2)-this.leftImageResized.width)/2, (this.thumbnailHeight-this.leftImageResized.height)/2);
But what i cannot figure out is how to position the image to the left of the canvas and to the right of the canvas, because the image is wider than the canvas itself.
What i basically need to achieve is placing the left side of the image in the beginning of the canvas and in the second scenario placing the right side of the image to the right side of the canvas.
I already tried the code bellow to position it to the left:
ctx.drawImage(this.leftImageResized, 0, 0);
But this code does not work as expected. Basically it crops out a part of the image, although the image is positioned to the left a part of the image to the left is outside of view...
EDIT: This question has not a single point common with the question pointed as a duplicate, i am not simulating a cover at all, at the contrary my image should be cut but in different context.
As you can see on the image bellow this scenario is the one i need to cover, the image can be much bigger, but i need it aligned to the left edge of the canvas and also to the right edge.
If I understand correctly here is a schema of your situation:
leftImageResized
|------------------|
canvas
|----|
=> left margin
|------|
If this representation is correct, the width of your left margin equals
(width image - width canvas) / 2
And thus replacing
((this.thumbnailWidth/2)-this.leftImageResized.width)/2
by
-(this.leftImageResized.width - this.thumbnailWidth)/2
Should solve it

Using CSS transforms for proportional sizing and spcing

I want to use CSS transforms to do some layouts of images, and have the image layouts be consistent across different screen widths. (For the purposes of this post, I’m only going to discuss widths and x (left) values.) All the data that I need to do these layouts are in a database.
Of course, if I could do an HTML layout with dedicated styles for each layout, I’d be fine. I could do it like I have it here in this pen. There are three boxes, 2 smaller ones and a larger one that is 3 times the size of the smaller ones. The smaller boxes are each 10% of the window width, the larger one is 30%. The boxes are equally spaced, the left-most one is 10% from the left, the larger middle one is 30% from the left and the last one is 70% from the left. This leaves an equal amount of space ( 10% ) between the boxes.
img#smallA { /* CSS for the first box */
position: absolute;
top: 10%;
left: 10%;
width: 10%;
}
The spacing is uniform when using CSS only.
On the above pen that uses CSS only, you can resize the window width all you want and the sizing and spacing stays consistent; proportional to the screen width, just as we have coded it to do.
So it seems logical that one should be able to do the same thing with a transform. You can get the window width with JS, you can set the width of the boxes with the transform and you can set the x values with the transform. But here’s the pen where I’ve tried to do it. Click the larger box to run the sizeAndPos() function. Now if you resize the window width to 1000 pixels (watch the little gizmo in the center of the CodePen screen), this JS / transform method works perfectly and the layout looks like the other one. But if you stretch it, the spacing starts going off immediately. (Remember to click the larger box after resizing). I think the reason it works at 1000 pixels wide, is b/c at that window width, the boxes are at their natural width. But I don’t understand why it only works in that case.
The spacing is off now; the between gap box 2 and 3 is too big.
For anybody how looks at the code, you may wonder why I’m passing the original width of each image (origWidth) to the function. This is because the CSS scale transform function sizes the image based on it’s original dimensions (scaling an image to 1 gives you 100% of the original size). So to do a proportional size, you first have to figure out how many pixels wide the box should be (10% or 30% of the screen width, depending on the box). Then you have to divide that amount by the original size to get the proper ratio to do the scaling. The small boxes are 100 pixels wide and the large one is 300 pixels wide.
Surely this is possible with transforms. I have tried setting the transform properties individually, to control the order of the operations, but it didn’t help. Can anyone tell me why this doesn’t work?
After trying to make this way too complicated, I found the answer. Change the transform-origin property of the elements. The default on this property is 'center' both axis. But we need our transformations to originate from the top left corner.
img#smallA {
transform-origin: left top;
position: absolute;
}

apply gradient based on 3d vector in css

I have this javascript (and the markup and css is in this fiddle)
$('input[type=range]').change(function (e) {
$('.box').css('transform','rotateY('+($(this).val()/100)*360+'deg) rotateX(20deg)');
});
So basically I am trying to light the cube based on some directional light coming from certain direction.
Lets say directional light is coming from (x,y,z)... (100,100,100) to (0,0,0).
Then the gradient need to be darker based on its vector alignment from on side and lighter or same depending on the other side. It's all doable but I can't wrap my mind around it as to get transformation data comes in 3dmatrix which is beyond me.
/* .front { background: linear-gradient(to bottom, blue, rgba(220,30,30,0));} */
pseudo code may look like this:
get div's base color.
get cube 3d vector based on its transformation and its parent if any.
calculate what angle of gradient should be.
calculate what intensity of base color should be on each side..better yet add second div inside and apply transparent gradient over it which will enable for even pictures and stuff easily.
apply that
etc

position canvas on top of Scrollbar

I am simulation a projectile motion path. I've one div with css overflow property and a curve drawn using canvas. I want the motion path to appear at top of everything. But curve gets cut at the position where the scroll bar is. If i change the canvas z-index to maximum or something similar to make canvas to appear at top then the scrollbar doesnt work... here is a jsfiddle demo of my problem JSFIDDLE Demo
Following is my javascript code:
var canvas = document.getElementById('canvasTron');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 150);
context.lineTo(350, 50);
context.stroke();
Is there any way to do that ???
If you have no situation, but to go with what you have mentioned, here is the solution.
Addition in CSS:
#canvasTron{position:absolute; clip: rect(48px, 351px, 151px, 99px);}
With canvas, you cannot get the scroll to work effectively. As it will occupy the area of that div below it and will not make the scroll work.
The provided solution has to be purely applied in case of WORST CASE SCENARIO, where you are left with no option and have to do it under the existing circumstances. Otherwise, it is NOT POSSIBLE.
Instead of using canvas, You can do this :
<div id="canvasTron"></div>
canvasTron
{
position:absolute;
width:0px;
height:200px;
border:2px solid black;
transform:rotate(50deg);
-webkit-transform:rotate(50deg);
-ms-transform:rotate(50deg);
-o-transform:rotate(50deg);
-moz-transform:rotate(50deg);
left:180px;
}
Remains light weight and scrolling is also working fine.

How do non-HTML5 JavaScript RGB color pickers work?

I already asked how HSV color pickers work, now I would like to know how RGB color pickers with JavaScript work. Those that don't use the HTML5 Canvas API. Could somebody explain me the concept behind them?
Here is an example of what I mean: http://www.eyecon.ro/colorpicker/
Note: I'm not looking for ready to use jQuery color pickers. I want to develop my own one for learning purposes! jQuery for the solution is fine though!
Assuming you want to pick RGB values between 0 and 255, similar to the example you are linking to, here's how I would approach it:
Generate 1 static image (1x256 pixels) that contains the 'rainbow gradient' shown in the slider on the right
Generate 1 static overlay image RGBA image of 256x256 pixels as follows
top left: R=1 G=1 B=1 A=1
top right: R=0 G=0 B=0 A=0
bottom left: R=0 G=0 B=0 A=1
bottom right: R=0 G=0 B=0 A=1
Use the first image as a background for the slider. It should generate the color to be displayed in the top left corner of the color picker. Use mouse coordinates to find the actual Y value for the color
create a 'background' div (256x256 px) that has the color picked with the slider. Use the second static image as on overlay div on top of it. With the alpha values it should give you a white and 2 black corners and one corner of the color you need.
use the mouse coordinates in that that square. The color will have to be calculated.
I'm leaving creating the formulas and images to you. :)

Categories