Develop Reference

Problem with gridview image zoom with updatepanel

I'm new to asp.net, hopefully this makes sense. I have a gridview in an update panel. I must keep this arrangement to maintain scroll position with a frozen header and no paging. In the gridview I have an image column that zooms with mouse hover. This basically all works. Problem is that when I zoom near the top or bottom of the gridview the image is cropped. It won't expand beyond the panel edge so the image is cut during zoom. I tried to move the image with transform, translate and margins but it only helps for top or bottom, not both. Is there anyway around this? Can I center the image in the panel or allow it to expand beyond the panel edge? I prefer a mouse hover vs a modal window with a close button if that's possible. Here is the markup:
<asp:Image ID="ImageX" CssClass="zoom" runat="server" Height="122px" ImageUrl='<%#"\Images\" + Eval("ImagePath")%>' Width="150px" />
and the CSS:
.zoom {
transition: transform .2s;
width: 100px;
height: 100px;
}
.zoom:hover {
-ms-transform: scale(1.5); /*IE 9*/
-webkit-transform: scale(1.5); /*Safari 3-8*/
transform: scale(3.5) translate(40px, 40px);
}
Also note that the image can be sensitive. If I change settings in CSS the image can flicker like crazy when I mouse out. Thanks.

Bootstrap 3 align elements into circle

I have a question about forming elements to form a circle, or align elements to form a circle, depending how you like it to be pronounce, now back to question:
There are couple of examples here on stackoverflow and on the internet regarding this question but any off these examples do not cover Bootstrap 3 responsive align elements to form a circle, I would like if someone can make an example out of mine working JSFiddle example (text needs to be a center of the circle, because I need to animate it), and make this using bootstrap grid system.
Is this possible, can you please explain to me how you do this so I can learn something out of this.

TL;DR; http://jsfiddle.net/k7yxtpc7/
Edit with (very long?) explanation:
So we start off with a bootstrap's hierarchy:
<div class="container-fluid">
<div class="row">
<div class="circle_container col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
</div>
</div>
</div>
The planetary of images will be put inside .circle_container. Our aim is to make sure the whole circle will respond to .circle_container's width changes and adapt correctly. This way any change Boostrap makes to the container will be reflected on the circle itself, making it Bootstrap-compliant.
First we have to prepare .circle_container a bit. Since it's a whole circle the container must be square-ish. We must find a way to make .circle_container's height to be always equal to its width. I do this by putting a square img inside .circle_container, then scale the img's size according to the container's width:
<div class="circle_container ...">
<img class="transparent_square" src="http://i.stack.imgur.com/5Y4F4.jpg" width="2" height="2" />
</div>
.transparent_square{
width: 100%;
height: auto;
}
Note: I couldn't find a transparent square image on the web, so I had to make do with a white square. In your product a 2pxx2px transparent image is best.
Great, now we have a square container. But we've put a limiter on ourselves too. From now on, the img must be the only child of .circle_container that have a static (default) or relative position, because any further child will extend the container, destroying the square shape. Not a big deal though, since we'll position other children absolute anyway.
Next up is the central text bubble:
<div class="central_text text-center">
<h3>Special for you</h3>
<h5>Lorem ipsum</h5>
</div>
.central_text{
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
The translate trick make use of the fact that percentile value in css transform use the element's pre-render width & height, while all other positioning rule use its parent's width & height instead. By giving the element left: 50%; top: 50% we put its top left corner at the center of its parent, then we translate it up and to the left by 50% of its own width and height, effectively centering the element within its parent. This is only 1 of several methods to center an element within a container, but it fits our situation best because the element is absolutely positioned.
Finally we reach the part where we create the circle. To sum up the trick here: we put the actual image inside a container, which has a pivot point at the center of the container, and position the image off to 1 side of the container equal to the radius of the circle. This way when we rotate the image's container, the image will be moved in a circle around the center of the container, like a drawing compass. After the image has reached our desired position, we rotate the image itself by the same degree in the other direction to compensate for the tilt in orientation, making the image upright again.
The container and image:
<div class="moon_container moon1"><img class="moon moon1" src="http://letscode.ghost.io/content/images/2015/09/stackoverflow.png"></div>
.moon_container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 20%; /* This is the final width of the image */
}
I set the width for .moon_container as 20% of .circle_container's width. This will be the width of the images in our final circle. Increasing or decreasing this number simply change the size of the image to your desire.
Now to offset the image from its container:
.moon{
width: 100%;
height: auto;
/* The image can be relative positioned without breaking anything because its parent is absolute */
position: relative;
/* The radius of the circle. This is equal to 175%*20% = 35% of .circle_container's width */
left: 175%;
}
Note that CSS's left use an element's direct parent's width as base unit. If you changed .moon_container's width in the previous part, the actual distance of the images will change as well.
Finally, rotations (I use moon2 as the example here because moon1 doesn't need to rotate):
/* Container rotate 45deg clockwise... */
.moon_container.moon2{
/* 360/8 (the number of images) = 45deg */
transform: translate(-50%, -50%) rotate(45deg);
}
/* ... while the image rotate 45deg counter-clockwise */
.moon.moon2{
transform: rotate(-45deg);
}
Why transform: translate(-50%, -50%) rotate(45deg); and not transform: rotate(45deg);? Because we declared transform: translate(-50%, -50%); earlier for the .moon_container (the centering trick). If we only write transform: rotate(45deg); here, the CSS parser will override the previous rule with the new one, losing the translate part. So we have to append manually.
Repeat the process to all 8 images and we're done!
If you have undetermined number of images, simply use javascript to calculate this rotation part for each image.
I hope my explanation was useful for you. I've always been bad at explanation...
Edit 2: http://jsfiddle.net/k7yxtpc7/3/ Text change on hover version as per OP's request. There's only 1 thing to note in this part, that is
$("body").on({
mouseenter : function(event){
...
},
mouseleave : function(event){
...
}
}, ".moon");
It is good habit to bind all events on either 'body' or document, instead of binding them on the actual elements itself (the .moon). This way you:
Always use only 1 event listener for the hover event, instead of 8 (you can imagine how the number scale up on an actual product).
When you add more images later, you don't have to bind the event on the new .moon again.
Original Answer:
As the requirement is rather vague, I couldn't know if my solution would satisfy you. My solution is based on 3 assumptions:
The entire planetary of images are only based on view port width, similar to how Bootstrap handle its responsive design. If you want to take view port height into consideration maybe I can conjure up another version.
The images are scaled based on the Bootstrap container's width, in order to make sure there's enough space to display all images.
Typography uses Bootstrap's defaults.
The solution avoid using javascript at the cost of not being able to add/remove images on-the-fly. If a dynamic number of images is your intention, I will put calculations in.
Sexy animations compatible.
Unfortunately Bootstrap's center-block only center a block horizontally, I had to make use of the translate trick to center the pivot point.
.central_text{
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
This is only an answer placeholder. I will write detailed explanation once we have a satisfactory solution.

using css transform scale on element positioned using translateY

Front-end developers have little recourse but to use css transform: translateY(-50%) with top: 50% to vertically center elements of variable height. I'm doing this for a slide show of images that I want to be able to zoom in on. I've been trying to animate this using transform: scale(x) but of course any transform values applied to an element will overwrite any other ones that came before. So, to preserve transform: translateY(-50%) value while also running animate( transform: 'scale(2.5)' )I've instead run animate( transform: 'translateY(-50%) scale(2.5)' ). However, in all cases I've noticed that same curious result. The first time I trigger the animation it simply resets the translate values to nothing, and then on subsequent runs it toggles the following transform values on and off:
first state:
-webkit-transform: translate(0px, -50px) rotate(0rad) skewX(0rad) scale(1, 1);
second state:
-webkit-transform: translate(0px, -125px) rotate(0rad) skewX(0rad) scale(2.5, 2.5);
On thing that's clear is my reset translateY value somehow gets reinterpreted to pixels before being multiplied by the same factor as the scale.
Here's the code. For a little more content, the slideshow has a property draggable that I am toggling on and off in concert with enabling the zoom since I think having them work simultaneously would be terrible for UX.
$('.activate-zoom').click (e) ->
if $('.slideshow-products').slick('slickGetOption', 'draggable')
$('.slideshow-products').slick('slickSetOption', 'draggable', false).slick('slickSetOption', 'swipe', false)
$('.products .slick-active img').animate( 'transform': 'scale(2.5) translateY(-50%)')
else
$('.slideshow-products').slick('slickSetOption', 'draggable', true).slick('slickSetOption', 'swipe', true)
$('.products .slick-active img').animate( 'transform': 'scale(1) translateY(-50%)' )
What can I do to prevent the image from first reseting its translateY value, remaining vertically centered, and then zooming given that y-axis baseline.

Flipping 3D cube in CSS, transition height after

I am trying to do a simple 2 sided cube rotation. After the rotation I want to click one of the sides and make the height increase, however the transition takes place from the middle, not top down (like height transition does normally) so I tried changing the transform-origin.
The other issue is, if I change this to 90deg, on mouse move, it triggers mouseleave and fluctuates between the two states, click event doesn't work properly then either.
.cube.active {
-webkit-transform: rotateX(89deg);
transform: rotateX(89deg); /* Text bleed at 90º */
}
http://jsfiddle.net/w7y4N/27/

maybe it is better to remove the limitation of transition to transform:
just do:
-webkit-transition: .33s;
transition: .33s;
http://jsfiddle.net/w7y4N/30/
also you have two different transition times. one for the container of .33s and one for the height of the inner with 1s. so the outer is finished its height-transition and the inner is not finished and take place in the middle.

Set the rotation point for CSS object

Is it possible to specify the rotation point when rotating a HTML element?
For example: if a HTML div has the left, top, width, height attributes: 0,0,100,100. The rotational point(the point we rotate the div around) will be 50,50(the midpoint). But I want to change the rotational point to 0,0.
I am rotating using the CSS 'transform' attribute:
#myDiv {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
/*Can I specify the rotational point???*/
transform: rotate(45deg) rotation-point:0px 0px; ??
}
There is a way to do it using the CSS 'rotation' attribute but W3Schools says that isn;t supported by major browsers:
rotation: 45deg;
rotation-point:0px 0px;

Yes, use the transform-origin CSS3 property.
http://www.w3.org/TR/css3-2d-transforms/#transform-origin-property