I'm manipulating divs with javascript all the time.
Sometimes I need to make those divs fit inside a container who's size is contantly changing.
One way to make that happen is to use css scaling.
The problem with scaling is that it simply schrinks the picture of the element.
The system continues to see the element the same way. So all location etc. become skewed. For instance, if I position the div to become top:0%, then if the element has been scaled down it will not go to zero percent but a bit below that, because the system thinks the div is bigger than its visuals show.
This change in behavior causes a lot of complications as the system is now making assumptions about the elements that simply dont hold true.
It's bad programming.
I looked at the 'zoom' but the articles warned against using it.
Is there any way to scale elements and also keep the system updated on whats actually going on?
The default transform-origin is 50% 50% (the middle of the element), so when you reduce the size of an element with scale, the edges are "retracted" from all sides towards the middle.
so the top left corner appears to move down and to the right. But if you set the transform-origin to 0% 0% (top left) only the right and bottom sides move.
Hope this helps!
Related
Hoping someone can advise a good strategy for this.
I have a page I am trying to code that has five elements on it. The content of these elements will change as one uses the page ... sometimes consisting of text, sometimes images ... and importantly the height of the content will change (all built using JavaScript). The idea is that all of this will be visible on the screen at once.
The issue is that I want the elements to retain their positions on the screen (e.g., upper left, exact center, etc.) regardless of the size of the others. For example, the element in the middle may be a single line of text and may suddenly become a 300 px high image, may then become a 100 px high image. When that happens, I don't want the objects below it to move up or down.
(PS: this will only be used on a desktop computer)
Is there a way to HTML or CSS this to give these elements absolute positions (e.g., the one one in the middle: 50% from top, 50% from left, centered on the screen) regardless of the size of the others? I was previously just using line breaks and position things using line heights, but that causes elements lower on the screen to "move" down when the higher ones resize.
Any help or suggestions would be appreciated!
youc can use CSS for this, you should try with position property(relative/absolute)/ Check this out link and this link
Per the GIF below, as you can see as I increase/decrease the window size the image on the left grows and shrinks as it 's supposed to. What I've done is include the line inside of the "image wrapper" that I have set up. My goal here is when the image shrinks I have the line line up with its respected block of text you see on the right. Right now I have the line positioned as absolute with percentage values for left and top. Is there a way to adjust the rotation of the line for what I'm trying to accomplish? How can I get that line to line up with the title no matter what? Are percentages possible for rotation? (I don't think so)
This raises one concern of mine. Sure, a CSS only solution would be great, but the concern is compatibility with browsers. If the solution can be in JavaScript that would be just as perfect, but I wouldn't know where to start with something like this for JS.
Any other suggestions are welcome.
GIF Example:
Code example used: https://jsfiddle.net/01sxrjkr/ *Make sure the preview window is <768px
You are rotating from the wrong end of the line. Try this instead, then just use media queries to alter the number of rotation degrees in relation to the text on the right for each of the most common media widths. Remember, people don't go around re-sizing their screens, so having it perfect at every single pixel of width is unnecessary and really not possible with what you have going on there. You're image is responsive and your text, of course, is not. therefor as the width of the screen is reduced, your left column decreases in height as your image gets smaller while your right column increases in height as more text wraps.
.line.line-1 {
left: 62%;
top: 39%;
transform: rotate(14deg);
width: 40%;
}
I'm scaling a div (zoom functionality) on page with non-scaled divs. The scaled div has mouseover events that cause text to follow the mouse. Scaling breaks the position of the element that should follow the mouse.
Hover text is done like:
$("#container").on('mousemove','.mouseMe',function(e){
$("#followA").css("top",e.clientY)
.css("left",e.clientX);
});
//also some additional mouseenter/leave events are used to display hover
Scaling:
#container{
transform-origin: top left;
transform: scale(1.1,1.1);
}
I think what I need is to get the mouse's position on a css scaled div as if it wasn't scaled. (example: if the mouse is at the center of the div say [25,25], it should always return [25,25] even if the div is scaled). I could be wrong about what I need though, so the functional requirements take priority:
Element needs to follow mouse when hovered
Element container (or several containers up) needs to be scalable via css without breaking hovers (other transforms not relavant and no nested scaling)
JS, JQuery, CSS are all in use.
Chrome support is primary. Should also work in FF but not crucial. IE isn't supported.
This fiddle may explain this better and shows what doesn't work: http://jsfiddle.net/yvanaxe1/4/ (make the result pane big enough)
Is having those “follower” elements be descendants of the scaled element(s) an absolute requirement? Because, if you could take them out of there, and then simply position them over the top left edge of the mouseover-triggering element (by using the clientX/-Y values everywhere, plus some offsets to re-position them from there to appropriate distances), I think you might get there easier … http://jsfiddle.net/yvanaxe1/6/
I increased the scale value here, so that the effect on the follower elements (that the scaling has been applied to as well) is more obvious.
I recently asked a question about scaling an SVG / Raphael JS layout to fit an entire screen using percentages and transformations. What I didn't fully realize, is that SVG (or, at least, Raphael) scales from the center, which is no good. This makes it look a little odd when trying to align various elements.
My design goal is to create a base layout at 1280 x 720 and have it automatically detect the screen resolution to fit the height and keep its aspect ratio. The important content fits right in the middle, and two panels can slide in or out if the width is too small, or whatever (need to work on that later).
The solution I was thinking about (which I haven't really tested), was to pretty much ignore element.transform(), and create a custom scaling function. Each element would, somewhere, require an additional attribute where it is to be scaled to (for example, bottom-right corner, top, etc). And, the, the element would just be redrawn with the new dimensions. An element that has its 'anchor' set to top, would shift one pixel to the top and left, and expand one pixel to the right at a time. Or, something like that. As for text, I was just thinking about using percentages for the font size.
So, my question before I start tinkering, is- are there any SVG-based javascript libraries out there they have this functionality built in already? I was looking at Snap, svg.js and D3 (which I did not understand at all), but I couldn't find anything related. Or, are there some things I am missing with Raphael?
Or, maybe I am thinking about this too much and going about it wrong?
The latest vogue seems to be things that move when you scroll.
Now, I have a bunch of square divs containing a background image scattered around a long page of content. My idea is to ever so slightly make these background images slide upwards when you scroll downwards. The background image is as wide as the square, but 1.5 times as tall.
The easy solution is to set the backgroundPosition to a fraction of the current scrollTop, but when I thought about it more, it's not altogether that simple.
Essentially, the background image of a div should be at background-position: 0 0; when the div is just obscured beyond the fold. Once it appears, the top position would decrease relative to scrolling, until reaching the end of the background image's bottom edge once the div has disappeared over the top edge of the window.
The divs are floated within text content, so there's no way to hardcode any position values for them.
Maybe I could manage to do this on my own, but there are several considerations;
Scrolling back and forth at any speed, and never moving the background image to a location where any part of the square div wasn't covered.
Divs which appear in the middle of the page on load. It doesn't matter if the background-position isn't 0 0 for them initially, the important thing is that the background image moves at the same speed as all the others.
Adjusting when the user changes the window size.
Now since this is just an extra little flair, I'm not expecting amazing browser compatibility or that this would work on mobile (although if it does, cool).
But I can't even begin to think how all of this would work out. What would be the best way to achieve this? Since the scrolling sliding thing is so popular, are there any (jQuery) plug-ins that I could utilize to build this?