Align <svg><rect> on an <input> - css

I have a bunch of <input> sliders, with DOM that looks something like this -
<div>
<label style="width:100px">Slider A: </label>
<input type="range" style="width:600px; height:20px;"/>
<svg width="600px" height="20px">
<rect x="0" y="0" width="300" height="20"></rect>
</svg>
</div>
I want the svg rectangle to highlight portion of the input, let's say starting at left, ending exactly at middle in this example, but other ranges are also possible.
How do I do position the svg so that it exactly overlaps the input?

I got the answer to this after some research. Posting in case anyone comes across this.
Basically define height/width for the container div, and set style="position:absolute" for the divs that need to overlap.

Related

Canvas not rendering inside g with transform

please save my sanity!
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" id="sake" stroke-opacity="0.3" style="width: 100%; height: 100%;">
<g id="1" class="squaregroup" transform="translate(300, 20)">
<g id="square_main_1" class="square_main" transform="translate(250, 50)">
<foreignObject class="" id="fo_1" style="width: 500px; height:500px;">
<div id="globe" style="width:100%; height:100%" ></div>
</foreignObject>
</g>
</g>
</svg>
A working simplified jsfiddle
https://jsfiddle.net/n6erd5dq/6/
The canvas works (albeit the globe is only a few pixels in the bottom right corner) and draws the right ThreeJS world, but it never renders inside the parent DIV.
If you inspect the body elements, you can see the DIV is translated right and down a bit.
I've tried so many options of position, absolute, max-width, div clear, changing hierarchy, etc, every trick I know. From what I see, canvas should honour a foreignObject which honours transform/translate.
Nor can I find any other question on this, so I wonder if I'm doing something SO wrong that no one else has come across this?
I know an alternative is to have one canvas for the entire screen and then multiple viewports (?) for each little image, but given the rest of the project I'm trying to stay away from this.
e.g. https://threejs.org/examples/webgl_multiple_elements.html
Many Thanks
Andy

CSS how to warp/bend an image or div?

Hi,
Is it possible to achieve this effect with CSS only?
As you can see, the image on top is distorted along with the text inside to look like the one below. It may be a div or an image. I have been researching on transform but found nothing about curves.
This is NOT a duplicate because I am not asking how to curve the text only but the div container as well as in case of an image.
Thank you.
I don't know if you would technically qualify this as "CSS only" since it is using an SVG filter, but I think it could be made to achieve the type of warping you want.
.warped {
display: inline-block;
background-color: yellow;
padding: 4px;
filter: url(#displacement);
}
#filterSource {
display: none;
}
<span class="warped">Warped Text!</span>
<div>
<svg id="filterSource" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="displacement" filterUnits="userSpaceOnUse">
<!-- this is just a base64 encoded PNG with a simple linear gradient -->
<!-- this may not be exactly what you want, but you can adjust the R and B channels to displace the element however you like. -->
<feImage href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAdhAAAHYQGVw7i2AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAGlJREFUaIHtz6ENwEAMxVBfUWn3H7Kw8LpCdMjAT/osIF7AZuAGnsMt4D3cN3kOuIZ3eoXYFGJTiE0hNoXYFGJTiE0hNoXYFGJTiE0hNoXYFGJTiE0hNoXYFGJTiE0hNoXYFGJTiE0hNj9ceBBjuV6HJAAAAABJRU5ErkJggg==" result="dispMap" />
<feDisplacementMap
in="SourceGraphic"
in2="dispMap"
scale="10"
xChannelSelector="B"
yChannelSelector="R" />
</filter>
</defs>
</svg>
</div>
Here's a nice tutorial on some cool effects you can achieve with this technique: https://www.creativebloq.com/how-to/add-svg-filters-with-css

AngularJS set element fixed position based on another element

This app takes an image, which is essential a background, or workspace. I need to add input text fields onto this workspace given specific coordinates (top, left, width, height). These coordinates would be relative to the image (top/left = 0/0). How would I position my fields/elements relative to the image?
<img id="background" ng-src="{{page.backgroundImage}}" />
<input type="text" ng-repeat="field in page.fields" ng-model="field.value"
ng-style="{position:'absolute',
left:field.left,
top:field.top,
width:field.width,
height:field.height}"/>
The code above works great for absolute positioning but it is not relative to the image.
<div style="position:relative">
<img id="background" ng-src="{{page.backgroundImage}}" class="course-image" />
<input type="text" ng-repeat="field in page.fields" ng-model="field.value"
style="position:absolute"
ng-style="{left:field.left,
top:field.top,
width:field.width,
height:field.height}" />
</div>

Make img height 100% of td

I'm creating an HTML email and since background images can't be used on anything but <body> thought I could get around this by making a border image 100% height within a cell. Perhaps it was wishful thinking? I've searched at the solutions that worked in the past no longer work in modern browsers. Is there any special trick to making this happen without setting a hard height for the cell?
Here are the things I've tried so far:
<td width="25" style="margin:0; padding:0;">
<img src="http://www.example.com/images/side-left.jpg" width="25" height="100%" alt="border" style="margin:0; padding:0; display: block;" />
</td>
stretches the image to 100% height of the entire table (even though the table is nested in a <td>.
<td width="25" height="100%" style="margin:0; padding:0;">
<div style="height:100%; diplay: block;">
<img src="http://www.example.com/images/side-left.jpg" width="25" height="100%" alt="border" style="margin:0; padding:0; display: block;" />
</div>
</td>
ditto
<td width="25" height="1" style="margin:0; padding:0;">
<div style="height:100%; diplay: block;">
<img src="http://www.example.com/images/side-left.jpg" width="25" height="100%" alt="border" style="margin:0; padding:0; display: block;" />
</div>
</td>
setting a smaller td size does not force it to stretch as expected.
I assume you're mostly running into trouble in Outlook?
Hotmail doesn't recognize background images, but it does seem to recognize height="100%."
In my own tests, declaring height="100%" on an image, does successfully stretch it to the height of the cell in the major web-based clients (Hotmail, Gmail, Yahoo).
Outlook only allows image stretching to a fixed size (and the image can only be stretched proportionately in both directions). The other clients allow significant stretching in one direction (up to ~4000% of the original size?)
Tips:
1) Use a tall image sized to fit Outlook, or slightly taller.
2) Using height="100%" will still stretch the image as needed in most non-Outlook clients.
3) Declaring a vertically repeating background image for the table cell is also useful as a fallback (but it won't help you with Outlook or Hotmail.)
Here is my preferred solution for border images:
<td width="25" height="100%" valign="top" style="background:Transparent url('http://www.mysite.com/images/side-left.jpg') repeat-y;margin:0; padding:0;">
<img style="margin:0; padding:0;display:block;" src="http://www.mysite.com/images/side-left.jpg" alt="border" width="25" height="100%" />
</td>
Try making the height of the cell a percentage instead of pixels in css. Like how Jezen Thomas said, use css but this time do it like this.
td {border: 4px solid red; height: /*height in desired percentage*/%; valign:top;}
img {height: 100%; width: 100%;}​
Plus formatting webpages or email in just tables is bad practice. You should try to do it entirely in css and use tables only for tabular data. But since it's what you want to do I am not going to stop you.
Is it ok if you get the rest of the html so I can show the proper css way to do it if you are interested?
Never use div's in emails, gmail and android does not support this.
Its not possible for at image to have a 100% height or width in an e-mail.
You have to type the exact size in px. Its pretty annoying

Putting a Border Around Floating Elements

Say I have something like the following code, where I want to display some text between two images that I am floating left and right.
<img src="testImage1.png" alt="Test Image 1" style="float:right;" />
<img src="testImage2.png" alt="Test Image 2" style="float:left;" />
<p>Test Text</p>
I want to add a border around the two images and the text. I tried putting a <div> around all 3 of the above tags and using style="border:2px black solid;". While this adds a border, it seems to not take the images into account. That is, we get something like the following (using StackOverflow and Google logos).
I am guessing this is happening because the floating elements are not being considered as part of the <div>. I am a software developer, not a web developer, so I am no expert in CSS. But I do think I recall that floating elements are kind of "ignored" in a way. Can anyone give a detailed description of what is going on and how to fix it?
Adding an overflow in this case with a value of hidden or auto remedies the issue.
Check the fiddle below:
http://jsfiddle.net/XMrwR/
Clearing floats the overflow way
http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html
In CSS, floated elements do not add height to a parent by default.
The solution is simply to set overflow: hidden.
<div style="border: 2px solid black; overflow: hidden;"
<img src="testImage1.png" alt="Test Image 1" style="float:right;" />
<img src="testImage2.png" alt="Test Image 2" style="float:left;" />
<p>Test Text</p>
</div>
fiddle: http://jsfiddle.net/JNets/
Add this line to your CSS properties:
overflow: hidden

Resources