Basically I have a bunch of elements inside a div, lets say <div class="wrapper">. I want to be able to scale this outer div and have the elements inside scale properly along with it.
For example, if this were a collection of SVGs all we would have to do is change the transform of the outer SVG. to get this result:
Scaled SVG from blue bounding box
I want to do this same effect with a div wrapper... Is that even possible? (The reason I want to do this is because I want to be able to use img tags etc, otherwise I would simply use the svgs). If it helps, the end goal is to allow the user to drag and drop elements to create their own interface, but it would help if it works on multiple screens.
Credit to #samuellawrentz
Use transform:scale(x, y) to scale any wrapper element
Related
I'm working on a little project that uses the mapquest API. While the map is being populated with all the pins that get pulled in, I want to make it where I have a "dummy map" that is shown as a static map and has pins that will fall onto it at random points. The pins will be nothing more than a series of styled div's. I can get them to move about the dummy map, but I cannot get them to each have a different position. How can I get the div's to each drop at a different positions? Also, what would be the best way to stagger the animations so they don't all fire at once? I'll put together a fiddle and include it below. Thanks for any input.
jsfiddle.net/45geyrzx/
First enclose all those divs in another div, that you style this way:
<div id="holder" style="position:relative;">
This "holder" block will have a location on the overall web page that is relative to other stuff; if you add something above it, the block will move downward appropriately.
Then, for each of the divs that you have enclosed by that "holder", style them something like this:
<div id="div00" style="position:absolute; top='0px'; left='0px';">
This div item (note the 2-digit identifier allows for a total of 100 divs this way) will have an absolute position inside the "holder" div. If the "holder" is moved due to some page-edit outside that block, everything inside the block, positioned absolutely, will be moved along with it, staying synchronized in terms of positions.
The key point is that those "top" and "left" values can be randomly assigned. In your JavaScript code you can create an array, something like this:
var x,divarr=[]; //make sure divarr is global
for(x=0; x<100; x++) //do this inside an appropriate JavaScript function, just once
divarr[x]=document.getElementById("div+((x<10)?"0"+x:x));
which lets you access each of the divs at any later time, so that you can change its "top" and "left" coordinates:
divarr[14].style.top=37+"px";
Here I've used 37 as an example, but you can assign any random integer you want.
I am working on a dashboard where user can drag and drop elements to create html pages.Now,he can have multiple images using an image component.We have managed to calculate the z-index of the images and they can be adjusted using up-down keys.
Issue:
The issue we are facing is when we select a image component we attach a dotted layer above it for helping the user to easily drag and resize it.If the user places the images as shown in the image below
we are not able to select the inner image again because the z-index of the selection div(the one with the blue dots) is(has to be) the highest(highest bcoz we have to use it for all components).So if I try to select the inner image now it cannot be selected.How can I handle the situation? For reference it works on this site as expected.
I believe we have get the element under the parent when it is clicked.But not sure how!We are using javascript,jquery to handle the events.
You can use JavaScript or jQuery to get the position of the inner image, and when the user clicks on the outer image, check to see whether the mouse position lies within the range of the smaller image. The range can be calculated with the position, width, and height of the inner element.
To get the element's position: use jQuery .offset() or .position() (The former is relative to the document, the latter to the parent).
To get the mouse position: http://docs.jquery.com/Tutorials:Mouse_Position
You could consider hiding the masking element quickly in order to gather the coordinate for your underlying element, when done, you could re enable visibility for the masking element. Use document.elementFromPoint() in order to get the DOM item from mouse coordinate.
An example:
http://jsfiddle.net/s94cnckm/14/
Alternatively you can use The CSS property pointer-events: none; on the masking element.
Related:
https://developer.mozilla.org/de/docs/Web/CSS/pointer-events
How to detecting a click under an overlapping element?
When I use scale or rotate, the parent element wraps to the size of the pre-translation dimensions of the element.
JSFiddle Example
Is there any way to wrap the parent container around the bounding box of the transformed element with CSS, or do I need to use Maths to manually position things?
Based on this earlier question it sounds like you will need to use some math and javascript to change the wrapper.
By using the function in the answer you could then set the wrapper dimensions based on the dimensions you just calculated.
I'd like to have elements on my page that expand on mouseover events. That's working great already, but when the elements are too close to the edge of their containing div, parts of the expanded section aren't visible (or show up outside the container).
How can I calculate a corrected position that would put the expanded element completely within the div? The expanding elements can have an arbitrary size, and so can the surrounding div.
If this code is static you can simply manually set the width of the containing and the contained div manually with CSS. However, if size of the containing div is variable based upon content you may want to use javascript (I like jQuery) to grab the width of the containing div and use that value as the final expand point of the contained div.
$('.contained_element').css("width", $('.container_element').width());
that jQuery will set the width of the contained element to the width of the containing element. jQuery's $(element).width(); can be used to grab the width of any element and use that value elsewhere in your code.
I want to insert an image tag into a block of text so that the image is, say, 100 pixels down in the DIV.
<div>
A lot of text in a text block and a <img tag> somewhere
that is floated left or right and positioned inside the text block
</div>
So, the tag above is put in the text block to be floated so that it is positioned at 100px DOWN in the DIV. Now, this can't be done statically, it has to be done in javascript since 100px down in the div may be represented by different text depending on font rendering issues and such.
So, is there a way to find what "word" in a text block that is 100px down in the DIV? jQuery perhaps?
The short answer is no
Basically it comes down to the DOM doesn't give a way for you to get an elements pixel position. There are sort of hacks you can do for some browsers, but good luck getting a solution working.
If you cannot get the position of the containing div, you are not going to get the position for the text within.
Leaving aside the no, if you were to find a way to get the div's pixel height, I would follow a procedure similar to the following.
Get the text from inside the div and store it in a local var.
Inside a loop for each word in the text:
Insert a div tag into just before the word.
Get the pixel position of the div tag.
Use this to determine the closest word to pixel pos 100 down.
Once you have the closest position, create a document fragment to build up your new inner for the div
Replace the div's content with the document fragment.