resizable box with rough edges using svg - javascript

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;

Related

How can I display an image on top of a generated heatmap?

I am trying to use heatmap.js to create a heatmap, following the instructions from this post: How to render heatmap.js on an image?
All of my code is identical to the one at that example. Just a simple generated heatmap with a background image added in CSS. Please see this screenshot from that post :
But I want to display an image on top of the heatmap, so a foreground image instead of a background image.
I have tried using plotly, but unfortunately this is intended to run on an ESP-32, with SPIFFS, so I am extremely limited to space and processing power. Even after I used the partial bundle to get the file size down small enough, the web page just simply wouldn't load. I'd really prefer to use heatmap.js if possible anyways, since it has a much smaller footprint.
To further explain what I'm trying to do, I want to put this half-transparent image on top of the generated heatmap:
So the final desired result would look like this, displaying only the heatmap inside the transparent part of the foreground image:
All the code I am using is identical to the previously mentioned post, just a simple generated heatmap with a background image added in CSS. I also used this documentation here to build an example heatmap, https://www.patrick-wied.at/static/heatmapjs/docs.html
Is there any easy way to do this using HTML/CSS/JavaScript?
I don't know heatmap so cannot test this, but from the info given in the question if the placing of a background image works as shown then the placing of a foreground image should be possible.
What we do is style an after pseudo element on #heatmap, give it the correct dimensions, put it above the heatmap element using z-index and give it the required image as its background. The image should then appear to be sitting above the heatmap element - I assume obscuring part of it.
You need to make sure that the heatmap element is positioned so its after pseudo element knows where to position itself in relation.
#heatmap {
width: as you want
height: as you want
background-image: if you still want it to have one
any other styling you want heatmap to have
position: relative;
}
#heatmap::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* make sure this is big enough - higher than the heatmap's z-index */
background-image: url(the image you want to be in the foreground);
background-size: cover; /* or contain depending on what you want */
background-repeat: no-repeat;
background-position: center center; /*or wherever you want it */
}
}

How can I make an image as big as possible, keeping the original aspect ratio and not cutting parts of the image?

Th main question is in the title, but here is the issues I am having getting it working:
I have an image that I am trying to size to a page depending on the size of the window. I want to keep the original aspect ratio of the image which may be wider or taller. I figured out a way to get the aspect ratio, but is there a way to figure out how much space I have to make it both in width and height based on the other items in the screen?
From there I can figure out how to resize accordingly.
I don't want to base it on the size of the window because there might be other items there. I am also using ionic2/angular2, but I don't really think that plays a role in this issue.
The easiest way to achieve this, and the solution I commonly use myself, is using the CSS background-size property. No JS is required, just a few adjustments to your HTML and CSS.
Basically what you have to do is get rid of your <img> element and instead create a <div>. Adjust your layout to give this div the appropriate size and position, and then, via CSS, give it a background-image. You will end up with something like this:
CSS:
#myImg {
background-image: url("../resources/img/myPic.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
HTML:
<div id="myImg">
</div>
The CSS properties I have set for #myImg do the following:
background-image: Set the path for the image
background-size: contain: Use the contain value, which scales the image to the largest size such that both its width and its height can fit inside the div. This is where all the magic happens behind the scenes
background-repeat: no repeat: Disable repetition of the background image. If this is not set, then the image is tiled so that the entire div is covered, which we don't want.
background-position: center: Position the image in the center of the div.
Browser support

Html Css and javascript are not detecting page height correctly

I Have tried the following:
height="window.innerHeight*5"
Which produces either 150px tall or 153px tall with no pattern between the two
height="window.innerHeight"
Which produces the same result
and the css 100% attribute
Which always produces 153 px rather than one of the two listed above.
I am trying to add an easter egg so it may be hard for you to take this request seriously when you see it.
My site is http://joeybabcock.me , and if you enter the konami code((arrow keys here)type up, up, down, down, left, right, left, right, (letters here)b, a) it will open my easter egg which does not cover the whole Page. Currently i have it set to the 100% attribute.
Set the height of the body and set the element overlay go be fixed with a height/width of 100%. There is no need for JavaScript.
body { height:100%; }
#breadfish {width:100%; height:100%; position: fixed;}

How can I make svg to start from another position of div

In Raphael JS documentation, there are examples how make svg, but only at the top left corner.
// Canvas is created at the top left corner of the #notepad element
// (or its top right corner in dir="rtl" elements) var
paper = Raphael(document.getElementById("notepad"), 320, 200);
How can I make it to start not from left top corner, but for example from x=0 and y=50?
This is probably less about the CSS and more about the SVG. You can define the container in HTML using CSS, but inside that contain it is best to make your definitions directly relevant to the SVG data. Particular to this case are these attributes:
viewBox
preserveAspectRatio
On that second attribute you will want the value "xMinYMid meet". This will cause the SVG image to render from the vertical center and left edge of its available canvas. You can also remove the width and height attributes on your SVG as such are counter-intuitive to the rendering of vector graphics.
I have successfully integrated SVG graphics into three places of a slideshow app, http://mailmarkup.org/slideshow.xhtml
The quote graphic that appears at the beginning of quotes
The logo in the footer
The SMTP and HTTP diagrams on a slide mid way through
If you shrink or grow the browser window the graphics will stay in their correct location and will grow relative to the text.
Give your svg the relative position attribute of css, and by top/bottom and left/right you can set the svg according to your desired location inside the div.
<svg id="mSvg" height="539" version="1.1" width="620" xmlns="http://www.w3.org/2000/svg">
#msvg {
overflow: hidden;
top: 40px;
left: 100px;
position: relative;
}
Try this:
#notepad {
position:relative;
}
#notepad svg {
position:absolute;
top:50px; left:0;
}

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.

Categories

Resources