make svg snap image line up on a div - javascript

Here is the code.
The svg is 1279 x 859.
How do I get the graphic to align its top-left corner to the
Right now it lines up on the top-left corner of the browser's tab/window.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<style type="text/css">
svg { position:fixed; top:0; left:0; height:100%; width:100%;
}
</style>
<script src="/script/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/script/snap.svg.js" type="text/javascript"></script>
<script src="/script/snap.svg.zpd.js" type="text/javascript"></script>
<div id="jqxPanel" style="padding: 20px; border:1px solid black; width: 1920px; height: 1080px">
<div id="image" style="padding: 2px; border: 1px solid black"; width: 1290px; height: 870px">
<svg id="SnapCanvas" ></svg>
</div>
</div>
<script type="text/javascript">
var BaseSVG = Snap('#SnapCanvas');
$(document).ready(function () {
SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function (elem) {
return elem.getScreenCTM().inverse().multiply(this.getScreenCTM());
}
Snap.load("Canvas.svg", function (f) {
BaseSVG.append(f);
});
});
</script>
</body>
</html>

A) You're missing some words from your questions. I'm assuming you mean to say, "How do I get the graphic to align its top-left corner to the top left corner of its container"
If so,
B)Your image has:
position: fixed;
Fixed positioning means that the element will measure its top, bottom, left, right values from the edge of the viewport (i.e. the window). What you want is:
position: absolute;
Positioning something absolutely means that its top, bottom, left, and right values will be measured from the edges of its last positioned ancestor. That part is important. None of it's ancestor elements are positioned by default. All elements have position: static by default. static is the only value for the position property that is not considered positioned. So, you need to change the position property of the svg's parent. I would change it to relative because it's least likely to screw with your styles.
At the end of the day your styles should look like this:
svg {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
}
#image {
position: relative;
}
Edited for typos.

Related

How to scale a div while keeping top in same place

I have created an iframe (lets call it a div to simplify things), that has a transform: scale property that I'm calling with javascript.This scales the div, but however, it also shifts the div upwards. I would like the top to stay in the same place.
Background info (from answers suggestions): I want to create something that looks like google docs. I have created an iframe that will transform when an input box value is change (like google docs). I want the top to remain in the same place (like google docs).
1) I have tried in javascript to implement document.getElementById("textareathingy").style.transform = "translateY(1000px)"; document.getElementById("textareathingy").style.transform = "scale(" + percentage + ")"; I tried to put the translate both before and after the scale, but both methods do not work, and the div continues to go upwards when I put translate first, and the div does not zoom in when I put scale first.
2) I have tried to put position: absolute; to counteract it going up, but that doesn't help either, and it gets rid of my scrolling feature on the div. So in answers please don't use position: absolute.
3) I have tried using the zoom feature, but that doesn't zoom in on the contents of the div, so that also doesn't work.
For some reason, there is no error messages in any of my attempts.
Here is also my css for the div:
#textareathingy{
width: 820px;
margin: 20px auto;
height: 1000px;
border: none;
display: block;
padding: 75px;
background-color: white;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
}
Here are two pictures from google docs that represents what I want.
Notice how they both have the same "top" position, but it is zoomed in.
Use the transform-origin CSS property to set the point in the element that the transform should originate from. Set this to top so that the scale extends downward from the top point.
img { border:1px solid black;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Transforms</title>
<style>
img {
/* Single Transformations: */
transform-origin: top;
}
/* Triggering a transformation: */
img:hover {
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<img class="car" src="data:image/png;base64,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">
</body>
</html>
To trigger this from JavaScript, just access the transformOrigin property as you would any other:
let img = document.querySelector("img");
img.style.transformOrigin = "top"; // Set the origin
img.addEventListener("mouseover", function(){
this.classList.add("scale");
});
img.addEventListener("mouseover", function(){
this.classList.remove("scale");
});
.scale {
transform:scale(1.5,1.5);
}
img { border:1px solid black; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Transforms</title>
<style>
img {
/* Single Transformations: */
transform-origin: center;
}
/* Triggering a transformation: */
img:hover {
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<img class="car" src="data:image/png;base64,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">
</body>
</html>

using a javascript file as a background in css

I am aware I can use background-image: url("www.linktoimage.com/image.png"), in css, to place an image in the background. I also know I can add a javascript file into html with tag. My challenge is how do I apply css characteristics of a background image to my javascript file?
To add some context, the javascript file is a simple animation (randomly bouncing balls, that responds to the screen width and height. I want to place text on top of this as if it was background, but no matter what I do, text will place itself above the script, in a white box, instead of directly on top of my script. Below is the general result of my various attempts:
I would like to place "Welcome" on top of my javascript, as oppose to how it currently appears on top of window with a white background. My css is as follows:
#font-face {
font-family:'HighTide';
src: url('assets/HighTide.otf')
font-family:'HighTideSans';
src: url('assets/HighTideSans.otf')
}
body {
padding: 0;
margin: 0;
}
canvas {
vertical-align: top;
z-index: -1
}
.title {
font-family:'HighTide';
font-size: 10vw;
margin: auto;
text-align: center;
z-index: 1;
}
.enter {
font-family:'HighTideSans';
font-size: 2vw;
text-align: center;
margin: auto;
z-index: 1;
}
And here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LockeDesign</title>
<script src="libraries/p5.js" type="text/javascript"></script>
<script src="libraries/p5.dom.js" type="text/javascript"></script>
<script src="libraries/p5.sound.js" type="text/javascript"></script>
<script src="libraries/svg.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=title> WELCOME </div>
<a href="main.html" class=enter> </a>
</body>
</html>
Any suggestions are appreciated, thank you!
EDIT
Using position: absolute; works partially, all I had to do was add left: 0;
right: 0; and bottom: 50%; to re-center the text. Resizing the window would cause scrollbars to appear, which was less than desirable, so I added overflow:hidden; to the body tag. Now this works exactly as intended, thanks all!
I would suggest WRAPPING all of the content you wish to display over the dynamic background in a single div
Example
<html>
<body>
<div id="BodyWrapper">
<h1> This is an HTML Page </h1>
</div><!-- End BodyWrapper -->
</body>
</html>
Then apply some Z positioning to the BodyWrapper with css
#BodyWrapper{position:absolute; top:0; left:0; width:100%; height:100%; z-index:5;}
If the above is still not enough then you may have to delay the
showing of the body content (make sure the dynamic background
completely loads first).
You can set the initial display styling of the wrapper to
#BodyWrapper{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; display:none;}
and onLoad... call this function
function show_PageBody()
{
setTimeout(function(){ update_Wrapper(); },1000);
function update_Wrapper()
{
document.getElementById('BodyWrapper').style.display='block';
document.getElementById('BodyWrapper').style.zIndex = 5;
}
}
You can add a css transition for the opacity of the BodyWrapper so that it fades onto the screen instead of just appearing.
This should work (has worked for me in the pass).
If not please let me know.
Using position: absolute; works partially, and renders this result:
All I had to do was add left: 0; right: 0; and bottom: 50%; to re-center the text. Also, resizing the window would cause scrollbars to appear, which was less than desirable, so I added overflow:hidden; to the body tag. Now this works exactly as intended:

Can I overlap exactly half of an image with another using CSS?

I am trying to overlap exactly half an image in CSS using another image. Thing is I want the height of the images to be say (x=200px). The width of the image will wary depending on the aspect ratio of the image. Can I still write CSS that will overlap exactly half of the resized image with another image.
Following is a code where I have played around with the position of the overlapping image. Can I let CSS do this for me somehow? Or is there some js that can help? In the following code I want the height to be unchanged, but half of any image used should be overlapped widthwise.
<html>
<head>
<style type="text/css">
#collage-container{
width:300px;
height: 200px;
position: relative;
background:#f22;
}
#collage-one, #collage-two{
height:200px;
position:absolute;
}
#collage-one{
z-index:1;
left:100px;
position:absolute;
}
</style>
</head>
<body>
<div id=collage-container>
<img src="http://www.hack4fun.org/h4f/sites/default/files/bindump/lena.bmp" id=collage-one />
<img src="http://www.hack4fun.org/h4f/sites/default/files/bindump/lena.bmp" id=collage-two />
</div>
</body>
</html>
Since the width of images is vary, you could use CSS transform translate() expression with a percentage value to move images to a side with the respect to their width value:
EXAMPLE HERE
#collage-container {
height: 200px;
position: relative;
}
#collage-container img {
height: 100%; /* As tall as the container */
width: auto;
float: left;
}
#collage-container img + img { /* Move the second image 50% of its width */
transform: translateX(-50%); /* to the left */
}
It's worth noting that CSS transforms are supported in IE9+
I think, it is simple:
<html>
<head>
<style type=text/css>
.container {
float:left;
}
.half-img {
display:inline-block;
width:25%;
}
.clear {clear:left;}
</style>
</head>
<body>
<div class="container">
<span class="half-img">
<img src="http://www.hack4fun.org/h4f/sites/default/files/bindump/lena.bmp" width="100">
</span><img src="http://www.hack4fun.org/h4f/sites/default/files/bindump/lena.bmp" width="100">
</div>
<div class="clear"></div>
</body>
</html>

Setting some images in the middle of a screen- row, while resizing window

I building an HTML site for mobile, so the width of the window change on every device, I am trying to display 2 images in the middle of row- in the title place, so between the images would be a little space, and while resizing the window I want those 2 images to move automaticly and stay in the middle of the row with the same space. I tried some code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style>
#box {
width: 55%;
padding-left: 45%;
}
.imgSize {
width: 150px;
height: 150px;
}
</style>
<div id="box">
<div id="img1"> <image src = "http://icons.iconarchive.com/icons/sniffels/christmas/256/house-icon.png" class="imgSize"></div>
<div id="img2"> <image src ="http://icons.iconarchive.com/icons/archigraphs/collection/256/House-icon.png" class="imgSize"></div>
</div>
</html>
But as a result one image is covering other,or image covered by the window...any ideas how to set them in a middle on one row.
Mr.Alex..
Try this..
#box {
width: 100%;
text-align:center;
background-color:#000;
}
.imgSize {
width: 150px;
height: 150px;
align:center;
}
Also take a look at http://jsfiddle.net/7nJND/ and drag the middle in between (eighter html or Javascript) and Result. You can see your image at center.
Good Luck !

Scrolling a DIV inside a DIV container with Javascript

I have a DIV container in which I have a SVG document (bigger than DIV). In this same container I have another DIV (lets call it DIV#2) that moves over my SVG, to help people locate some feature. When I scroll the container DIV I would like DIV#2 to stay anchored on the same position on my SVG, so as to be coherent my the new position of the selected feature (cf Rect_Follow() function below).
Can someone help me troubleshooting that without the use of jQuery?
Here's a small portion of the code:
CSS:
<style type="text/css">
<!--
div.SVG_container {
height:800px;
width:900px;
margin-top:250px;
overflow:scroll;
}
div.select_div {
position: absolute;
height: 98px;
width: 98px;
background: #CCF;
border: 1px solid #AAD;
text-align: center;
font-size: 10px;
border:1px solid black;
filter:alpha(opacity=60); /* for IE */
opacity:0.6; /* CSS3 standard */
}
-->
</style>
HTML/JavaScript:
<head>
<!-- ... -->
<script type="text/javascript">
function Rect_Follow(obj){
var rect = document.getElementById('arect');
rect.style.top = obj.scrollTop;
}
</script>
</head>
<body bgcolor="white">
<div id="DivCont" class="SVG_container" onscroll="Rect_Follow(this)">
<div id="arect" name="arect" class="select_div"></div>
<object id="aSVG" data="out.svg" style="margin-top:0px;overflow:hidden;" />
</div>
<!-- ... -->
</body>
Add position:relative to .SVG_container, and remove the JavaScript.
I hope this is what you mean.

Categories