Develop Reference

CSS: Using transform to move an element to a specific place on the DOM

I have an image (svg) that start out in the middle of the page on load. As the user scrolls down, I want to have that image drift up and to the left so that it eventually gets pinned in the top left corner.
I tried using translate with the scroll number but I feel like it's a guessing game on where the image will end up and what path it takes. Here is what I had so far.
window.addEventListener('scroll', function(evt) {
let image = document.getElementById('image');
let scrollY = window.pageYOffset;
// how do I use the scrollY to accomplish this?
image.style.transform = ??
<div style="text-align: center; background: blue; height: 900px;">
<img id="image" style=" margin-top: 200px; " src="mySvg.svg" />
</div>

for working document.getElementById('image'); need to have is corresponded element.
<img id="image" style=" margin-top: 200px; " src="mySvg.svg" />

Restricting image inside div and arrange those div inside a div

I am using Gridster for webpage.The widgets have images on it.These images can be added and deleted with + and X button.
On clicking +, a modal opens and displays images which I retrieve from server dynamically
The modal is the <div1 class="modal-body">.In that I want <div2 class="outerdiv">.
In a single row in div1 there should be an equal number of div2 is what I want.Entire div1 should have div2 which are separated properly from each other and same in number on each row.
Then comes <div3 class="innerdiv"> which will be inside each div2.Thediv3` will contain my image which should fit properly within that div only.
Overall, when I open my modal the images should symmetrically and properly placed from each other
The CSS which I tried
.modal-body {
width: 100%;
position: relative;
text-align:center;
}
.outerdiv {
height: 90px;
width: 90px;
display:inline-block;
margin: 10px;
}
.innerdiv{
max-height:95%;
max-width:95%;
}
My actual code for server
<div class="modal-body">
{% for file in brands %}
{% load static %}
<div class="outerdiv"><div class="innerdiv"><img src="{% get_static_prefix %}images/brands/{{file}}"></div></div>
{% endfor %}
</div>
My representational image:
<div class="outerdiv"><div class="innerdiv"><img src="https://cdnd.icons8.com/wp-content/uploads/2015/07/Run-Command-100.png"></div></div>
I dont know if what I did is right or not because when I when I do inspect element in browser I see that image is coming out of the div also sometimes the images almost overlap each other
Jquery function which applies preset class to clicked image.I want it to be applied to innverdiv
var parentLI;
$(document).on("click", ".addmorebrands", function() {
parentLI = $(this).closest('li');
$('#exampleModalCenter').modal('show');
$('#exampleModalCenter img').click(function(){
$(this).addClass('preselect');
$(this).siblings().removeClass('preselect');
selectedImageSRC = $(this).attr('src');
})
});
Fiddle

Move the preselect class to the innerdiv.
Make some of these css modifications:
img {
width: 100%;
height: 100%;
}
.preselect{
background: lightgreen;
border: 1px solid black;
}
checkout fiddle

JS Get background image then display in lightbox

I have a set of divs with background images. Im trying to get the image onclick then display it in a lightbox. When the lightbox pops, the image i get in undefined. I can get the image url to display correctly through console. I know lbImg.src = galImg.src; is incorrect but i am unsure how to fix it.
HTML
<div id="lightbox">
<span class="closeBTN">×</span>
<img class="lbContent" src="">
</div>
<div class="imgCon">
</div>
CSS
.imgCon
{
height: 500px;
width: 15%;
min-width: 200px;
background-image: url(../images/01.jpg);
background-position: center;
background-size: auto 500px;
margin-bottom: 66px;
}
JS
var lightbox = document.querySelector('#lightbox')
img = document.querySelector('.imgCon')
span = document.querySelector('.closeBTN')
lbImg = document.querySelector('.lbContent')
img.onclick = (function(){
lightbox.style.display = "block";
var galImg = window.getComputedStyle(this,
null).getPropertyValue("background-Image");
lbImg.src = galImg.src;
//console.log(galImg);
})
span.onclick = (function(){
lightbox.style.display = "none";
});

You get the background-image itself in galImg, so you need to set it directly (it is a string and does not have a .src property).
But, the value of galImg we obtain from getComputedStyle is a string like as: "url("file:.../Desktop/1.png")". We have to remove the url( part and also the quotation marks ("...") from it:
lbImg.src = galImg.slice(4, -1).replace(/"/g, "");

Can you please try lbImg.setAttribute('src', galImg.src).

Add image over text using jquery

I'm trying to add an image over some text that I have. This is similar to retailmenot.com's reveal coupon code. When a user clicks on the image the image is removed and reveals the text underneath while simultaneously linking the user to an external url.
The base layer can be as follows:
<div class="base">
<h3>Some text</h3>
</div>
I want to load an image with the following over it when the text is clicked:
<div class="overlay">
<img src="http://example.com/image.jpg"/>
</div>
The height of the base layer with class "base" is variable, so the image has to be resized to fit it. I have a working example where I place the image and then resize it, but this creates issues when javascript may not be enabled as the image fails to be resized and looks messy. I want the script to fall back to just showing the underlying text if javascript is disabled.
How can I add and automatically resize such an overlay on page load using jquery or javascript?

You can do it like this:
$(document).ready(function () {
//Set overlay position and dimension to same as base
$base = $(".base");
$overlay = $(".overlay");
$overlay.offset($base.offset());
$overlay.height($base.outerHeight());
$overlay.width($base.outerWidth());
$overlay.show();
//Hide overlay on click (show hidden text)
$(".overlay").click(function () {
$(this).fadeOut();
});
});
and with css:
.overlay{
/* Hide overlay if no js */
position: absolute;
display: none;
}
Check it out here: JSFiddle

If you can have the overlay in the base, as such:
<div class="base">
<h3>Some text</h3>
<div class="overlay">
<img src="http://example.com/image.jpg"/>
</div>
</div>
You can css this, no need for javascript:
.base{
position: relateive;
}
.overlay{
position: absolute; /* or fixed if scrollbars involved */
display: none;
left: 0;
right: 0;
top: 0;
bottom: 0;
/* or replace right and bottom with: */
/* width: 100%;
height: 100%; */
}
You can now use javascript to toggle visibility:
$('.overlay').fadeIn();

Let your html page has this following code
<div class="base">
</div>
Don't place any code about your image in html page. And then in your jQuery code.
var img = '<img src="http://example.com/image.jpg"/>';
var txt = 'Some text';
$(document).ready(function(){
$(this).find('.base').html(txt).show();
$(this).find('.base').click(function(){
if($(this).html() == img)
$(this).html(txt).show();
else
$(this).html(img).show();
});
});
This will solve your issue.

Can each new click produce a new image?

I know how to make an image appear using onclick or onMouseOver but how can I make each click produce the appropriate image not just in the same place but, for example, in a row, next to it's previous apperance? My idea is this: I click on reference1 and a picture1 shows up. Then I click on reference2 and a picture2 shows up next to the picture1 already displayed. Now I click on reference1 again, and I want to see pictures 1,2,1 in a row. How can I do that? My ideal would be to see the row rolling when filled, and a delete button deleting the last image in that row, even making the pictures jump out being called from the text field, but I can search for these myself. My greatest concern for now is new click=new image. Thank you.

Assuming this is relatively simplistic- you could keep track of the current position in a list of images, afterwards create a function that deals with the current image then increments this position. Have the onClick event call this function, and there you are.
An example of this in action, using JQuery, can be viewed here:
http://jsfiddle.net/8Q4LQ/

Here's an example.
<html>
<head>
<style>
.refimg { width: 100px; height: 100px; }
.choices a { margin-right: 2ex; }
.choices img { display: none; }
#target { display:block; width: 500px; overflow-x: scroll; border: 1px solid black; }
</style>
</head>
<body>
Choices:
<div class="choices">
ref1
ref2
<image id="image1" src="image1.gif" class="refimg" />
<image id="image2" src="image2.gif" class="refimg" />
</div>
<br />
Selections: <input type="button" value="Delete" onclick="delImage()" />
<nobr id="target">
</nobr>
<script>
function putImage(src) {
var a = src.cloneNode(true);
a.id = ''; //clear id to prevent duplicate id
target.appendChild(a);
a.scrollIntoView(true);
return false;
}
function delImage() {
var a=target.children;
if (a.length>0) target.removeChild(a[a.length-1]);
}
target.style.height=((target.offsetHeight-target.clientHeight)+100)+'px'; //extend height for scroll bar
</script>
</body>
</html>