Develop Reference

resizable box with rough edges using svg

I am working on a small project where I need to build a a box with rough edges around text. For this I use an SVG with funky edges - sort of a bit like this one: https://ikedabarry.com/InkTex/wp-content/uploads/2012/07/Ink_039_6501.jpg (but as SVG).
What I am trying to achieve is that I add this as background to a DIV and that it always fills nicely to the edges of the containing DIV, on all sides, so that the DIV does NOT look perfectly square on any sides. No matter the size of the box (it resizes with screen-size).
This does not work right now.
What we use at the moment:
background-image: url(above.svg);
background-size: cover;
This does not work because only half the edges are rough as the other ones extend outside of the visible area.
We also tried:
background-size: 100% 100%;
but that does not work because I end up having the image following its own naturally size.
I am now not sure what is the best possible solution using JS / CSS to make this work.
Here is what I see as options:
OPTION 1:
write some JS that:
a. listens to size changes in DIV
b. adds width and height to SVG
c. sets background image as 100% 100%.
OPTION 2:
a. add image as normal image with DIV
b. set DIV as position relative and IMAGE as position absolute
c. set top / bottom / left / right for image as ZERO.
(it does not work right now because it is an SVG - not sure why).
I feel option 2 is the best, but I am wondering if I am overlooking something ...
Any help appreciated.
UPDATE: here is a runnable example:
https://jsfiddle.net/sunnsideup/er1xd0wg/15/

Maybe try this:
background-size: 100vw 100vh;
I am not sure, if this is solution for your problem, but it can help

Here is what we have come up with:
https://jsfiddle.net/sunnsideup/er1xd0wg/15/
create different SVGs for portrait / landscape divs so you dont end up with BG images that look straight because they are overstretched.
remove height and width from svg, add viewbox like this with actual width and height:
viewBox="0 0 WIDTH HEIGHT"
add to svg:
preserveAspectRatio="none"
convert SVG to css background:
https://yoksel.github.io/url-encoder/
add the following css:
background-image: url("data:image/svg+xml,.... SVG GOES HERE ... ");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;

Image not moving when style.top is changed

When I execute that style.top statement, the image doesn't want to change 600 px from the top.
document.getElementById("testing").onclick = function(event){
document.getElementById("image").width=400;
document.getElementById("image").style.top = "600px";
}
#testing{
color:blue;
}
<p id="testing">
aewrfafffffffffffffffacvfav
</p>
<img id="image" src="katakana.jpg" alt="nothing" width="300"/>
From my understanding, that should work. I don't know what's going on.
In a nutshell, how can I change the position of an image with JavaScript?
There's the position absolute thing, but not sure.

The top, right, bottom, and left properties specify the position of positioned elements. -positionMDN
Your image element is not positioned, and as a result using top, right, bottom, or left will have no effect. In order to position an element without altering the flow of the document (which using fixed or absolute will do) you can use position: relative; and it will remain in the document flow while now being considered "positioned".
document.getElementById("testing").onclick = function(event){
document.getElementById("image").width=400;
document.getElementById("image").style.top = "600px";
}
#testing{
color:blue;
}
#image{
position: relative; /* <- positioning */
}
<p id="testing">
aewrfafffffffffffffffacvfav
</p>
<img id="image" src="katakana.jpg" alt="nothing" width="300"/>
What Is Positioning?
By default, elements flow one after another in the same order as they appear in the HTML source, with each element having a size and position that depends on the type of element, the contents of the element, and the display context for the element as it will render on the page. This default flow model for HTML layout doesn't allow a high level of control over the placement of elements on the page. By applying a small set of CSS attributes to the elements that are defined for the page, CSS can control the precise position of elements by giving exact coordinates. -About Element PositioningMSDN

The top property by itself does absolutely nothing. The elements needs to be positioned as well. For example, position: relative or position: absolute.
The top, right, bottom, and left properties specify the position of positioned elements.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/position
An example where the image is positioned relative to the container and the top property is changed after clicking the paragraph:
document.getElementById("testing").onclick = function(event) {
document.getElementById("image").style.top = "100px";
}
.container {
position: relative;
}
img {
position: absolute;
width: 400px;
}
<div class="container">
<p id="testing">aewrfafffffffffffffffacvfav</p>
<img id="image" src="http://lorempixel.com/g/400/200/" />
</div>

jquery resize so content is always centered perfectly

I have the following right now, but its not perfect:
$(window).resize(function () {
$("#app-views").height($(window).height() - 140);
});
Basically, I have 75px from top before my content starts, and I have 60px from bottom of the page to my content.
How do I make it so when I resize the window, it will always respect those dimensions? I am using malihu scroll bar, and I am loading my view into #app-views.
I have a border all around the window (10px), a navbar (50px), and 15px of padding until my body. Then, I have 15px bottom padding on body, a footer of height 35px, and 10 px bottom border.
Here is the basic HTML:

If you want your contents to be placed and resized while keeping the same distance from the top and the bottom of the window, you don't have to use jQuery or Javascript. Only CSS would do the trick. Try this without height attribute in your style code:
#app-views {
position: fixed;
top: 75px;
bottom: 60px
}
You can set left and right without width to get the same effect in horizontal dimension.

You say you have specific measurements to place your content on the page
(75px from top before my content starts, and I have 60px from bottom
of the page)
Well with jQuery offset you can get the top position of the element and you can also update the css top position on screen resize so that your content will always adjust its position on resize.
To see where the bottom of your content element is you could find the offset of the top of the content and add the content's height to get the bottom position of the content relative to the top of the page.

I would recommend doing this in CSS, perhaps by dynamically changing the jQuery object's CSS property. I would attend to it with a simple CSS selector. This works even when the window is resized. Have a look:
#app-views {
position: absolute; /*this will allow you to position it exactly where you want it*/
left: 50%; /*this will move the left side of the container halfway across the page*/
transform: translateX(-50%); /*moves the container left by half its width,
so that the centre of the container aligns with the center of the page*/
}
You can adjust the vertical position with the 'top' property and 'translateY()' in a similar way I demonstrated with transform and translateX().
If you want to use jQuery, you could try:
#('app-views').css('position', 'top');
Furthermore, I would also suggest that you do not maintain the 75px at the top of your page for all kinds of screen sizes. 75px may be suitable for a desktop but not for a mobile. If you do intend to make your website fully support mobile, it is often a good idea to design the mobile layout first, as it tends to by simpler. Then, you can use media queries to adjust it for the desktop. It really does work brilliantly. I've used it myself many times before. You can learn more about that here:
MediaQuery CSS

skrollr transform from bottom left

I'm using skrollr to animate the scale of some svg elements. The problem is I'd like to animate them expanding from a bottom left position, but instead they are animating from the top left (default art board anchor point).
...
<g data-0="transform:scale(0)"
data-600="transform:scale(1)">
...
http://jsfiddle.net/PvNGE/
You can see it above. Is there a tag I can add to the svg that will change its anchor point, something I can do in skrollr or a way of exporting it from illustrator that will do this?
Thanks

I'm not sure skrollr is meant to be used on SVG elements, it works on webkit but I'm unsure it will work on other browsers (just a heads up).
You need to specify the transform origin, -webkit-transform-origin: bottom left;
<g data-0="transform:scale(0)" data-600="transform:scale(1)" class="bottom-left skrollable skrollable-between" style="-webkit-transform: scale(0.19333333333333333); -webkit-transform-origin: bottom left;">
http://jsfiddle.net/swwRB/

Is it possible to get an adjustable "view" of a static image in HTML?

I'm working on a web app where I have an image, and, for lack of a better word, a "view" of that image which is a box limiting what you can see to whatever part of the image is inside the box. The view can be adjusted by dragging the edges around, and the image is stays. However, I also want to be able to drag both the view and the image around together.
The best analogy I can think of is the Snipping Tool in Windows that you use to capture a portion of your screen.
I've tried a div with a background image, but that always resizes the image to fit the div. Right now I'm trying to have a div that contains an img, and setting the div to have overflow:hidden, but that makes the image stick to the upper left corner of the div.
Help? Thanks in advance!

Sounds like you want something that masks the image and only shows a segment.
Assuming a structure like.
<div class="img-mask">
<img>
</div>
You can set the styles of the mask to be overflow hidden with a width and a height (this creates the mask). Then position the image relatively, left and top till it's where you want it to be.
.img-mask {
overflow: hidden;
height: 200px;
width: 200px;
}
.img-mask img {
position: relative;
top: -25%;
left: -25%;
}
This should center the image to the mask.

I think there's a CSS property cut out for exactly this task: the clip attribute.
Here's the W3schools tutorial: http://www.w3schools.com/cssref/pr_pos_clip.asp. Click the Try it Yourself button to get a hands-on idea.
With this the CSS property applies only on the image and you do not need an additional masking div.