Develop Reference

Photoshop like canvas image droppable, scalable images position absolute issue while dragging

there I have a problem with making images drop inside canvas that I made (not canvas tag). I am dropping images into my canvas. I gave it a click and drag option that enables properties window, that can change its CSS. When I scale image with transform scale, images with initial position: absolute property, behave weird while dragging (jquery UI draggable) and changes its location under the mouse, what is looking like the image (if smaller) is under the mouse or over it (if bigger scale). So I removed position absolute. But now when I add images to canvas, one is added under another so if the image is bigger than canvas it's relocated somewhere down below.
function newImage(image){
var img = new Image()
img.onload = function (){
imgWidth[image.id] = img.naturalWidth
console.log(img.naturalWidth)
imgHeight[image.id] = img.naturalHeight
console.log(img.naturalHeight)
}
img.src = image.url
$('#canvas').append('' +
'<div id="img-'+image.id+'" class="selectable" style="top: 0px; left: 0px; width: 0px; height: 0px; outline-offset: -2px; position: absolute">' +
'<img class="realImg" id="realImg-'+image.id+'" src="'+image.url+'" style="left: 0px; top: 0px; width: 100%; height: 100%; mix-blend-mode: unset;">' +// to ma .nameide i .speed
'</div>'
)
setTimeout(function(){
$('#img-'+image.id).css('width', imgWidth[image.id])
//$('#realImg-'+image.id).css('width', imgWidth[image.id])
$('#img-'+image.id).css('height', imgHeight[image.id])
//$('#realImg-'+image.id).css('height', imgHeight[image.id])
}, 100)
$('#img-'+image.id).draggable({
start: function( event, ui ) {
activeImg = "#img-"+image.id
activeImgId = image.id
$('.selectable').removeClass('border-blend')
console.log('reselect')
$('#img-'+activeImgId).addClass('border-blend')
console.log('selected')
console.log('aktywny '+activeImg)
$('#formPosX').val(parseInt($(activeImg).css('left')))
$('#formPosY').val(parseInt($(activeImg).css('top')))
}
})
$('.realImg').each(function (index) {
$(this).click(function (){
if ( $(this).is('.ui-draggable-dragging') ) {
return;
}
$('.selectable').removeClass('border-blend')
activeImgId = $(this).attr('id').split("-")[1]
activeImg = '#img-'+activeImgId
$(activeImg).addClass('border-blend')
console.log('selected')
console.log('aktywny '+activeImg)
$('#formPosX').val(parseInt($(activeImg).css('left')))
$('#formPosY').val(parseInt($(activeImg).css('top')))
})
})
}
I was thinking about changing the position to relative as I think draggable is using, after starting dragging. But first drag click is with this problem of images being relocated and next are not (they are fine). Next thing I was thinking on making relative, when timeout is runoff, images go down. But when I was writing this question I thought that I might change position to relative when draggable is created, but then images also appear under another.
Is there a way to repair it?
My fiddle: https://jsfiddle.net/1enyLof5/1/

Ufff i did it. I made position: relative. And then i add two variables for calculation for height of all of previous images, and then I subtracted this height from top: property inside new image.

User Manipulated Frame - HTML/CSS/JS

How can I make the below frame, once loaded, to allow for the user to drag and scale the size? Is this possible with HTML/CSS/JS?
<script>
var frame;
function addFrame() {
frame = document.createElement('iframe');
frame.height = "200px";
frame.width = "200px";
frame.setAttribute('id', 'superFrame');
document.body.appendChild(frame);
}
function loadGoogle() {
frame.setAttribute('src','http://www.google.com')
}
</script>
Left is what I have, right is what I want but with the user setting the size via dragging the frame.
Image

src Responsive IFrames — The Right Way!
remove width and height attributes
set up a parent div for the iframe
make the containing div responsive, and the iframe with the following size/positioning rules:
iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

How to resize of a image base on screen size

How can I resize of a image base on screen size. Example:
I have a tag (width:1349, height: 449) and a image in div (width:78, height:78). When display image in div I fix for width of image is 60 and height is 60. I saw in mobile screen then the size of image still keep state so now I want to image display automatic resize base on screen example: in iPhone 4 the image have size (20x20) or percent of it in the screen. How can I use the formular for calculate it? This is my code jquery for calculate it.
var mw = $("#c").width();
var mh = $("#c").height();
console.log();
var img = new Image();
img.src = './img/photo-circle.png';
var wdImg = img.width;
var hiImg = img.height;
var ratioImg = wdImg/hiImg;
var ratioDiv = mw/mh;
if (ratioDiv > 1) {
var newwd = wdImg*(mh/hiImg);
alert(newwd);
} ;

You should be using percentages to achieve dynamic resizing of your elements. Then, as long as the parents are also dynamically resizing, their children will as well. For example, width: 30%; instead of width: 100px;

use the css unit vh and vw
each unit is worth 1% of the screen size
http://caniuse.com/#feat=viewport-units
example:
.item {
height: 20vw;
width: 20vw;
}
If the screen width is 100pixels, .item would be 20px by 20px

Simply you can use a bootstrap class called "img-responsive" at your img tag .
That's all , It will be responsive on any screen.

How to change div img when scrolling down a page

Pretty simple javascript issue that I am not sure how to do:
When scrolling down on the website:
http://cerebral-supplements.myshopify.com/ (use password "aiglog")
the header shifts up into a minimalistic design. As the logo is too big it sticks out.
What javascript code would be needed to change the logo's div properties to resize the image?
Thanks

If you can add custom CSS, add the following:
/* scale logo down to ~75% size when scrolled sidebar is activated (fadeInDown class) */
.fadeInDown .template-logo img {
width: 225px;
height: 61px;
}

modify the functions values to your needs.
function onScrollChange()
{
if ( document.body.scrollTop > 500 ) {
var divElement = document.getElementById('divID');
// either change style properties directly
divElement.style.width = '100px';
divElement.style.height = '100px';
// or change the div's css class
divElement.classname = 'smallLogoClass';
}
}
than register it, so it executes on each scroll.
document.addEventListener('scroll', onScrollChange);

How can i make my script center img in div

I have concocted a little script here out of bits and pieces I have found and scraped together, but I need a little help to add an extra function to it,
First of all - this is what it is doing for me at the moment:
It resizes and crops/letterboxes an image to completely fill a div
which is a % height and a % width – it keeps doing this whenever and
whatever window resize
It keeps working seamlessly as the window is resized
The image is filling 100% the area the div covers - left to right
and top to bottom.
The image is not being squashed or stretched - just being cropped
or is overflowing.
The image is kept as small as possible, so whatever the resize -
you can still see either the very sides OR the very top and bottom of
the image.
It seems to be OK across IE9, Fire Fox, Oprea, Chrome, and Safari
over XP and 7
All of these things are very important to me, please don't tell me that all i need is:
<img style="width : 100%;">
This is so much more than that. It's not too easy to explain but check the demo and drag the corner of the window around and that'll be worth 1000 words...!
Now, what I want to add:
All it is, I’d like the letter box to centre on the image.
When the div is a very tall portrait or a very flat landscape I’m just getting the top or just the left hand side of the image.
I’d like the centre of the original image to stay in the centre of the resized div.
I’ve tried a few things but have drawn a blank. I’m sure the script could feed a minus top: or left: into the style but it seems if I get too many div’s in div’s IE doesn’t like it, or what am I doing wrong?
Thing is I don’t really know how to wright this stuff, I only steal bit and bobs and splat them together…
And finally the demo
And the script:
<html>
<head>
<title>test</title>
<style>
#imgarea {
position:absolute;
right:0px;
height:75%;
width:70%;
top:25%;
}
</style>
<script type="text/javascript">
function resizeImage()
{
var window_height = document.body.clientHeight
var window_width = document.body.clientWidth
var image_width = document.images[0].width
var image_height = document.images[0].height
var area_width = window_width * 0.7
var area_height = window_height * 0.75
var height_ratio = image_height / area_height
var width_ratio = image_width / area_width
if (height_ratio > width_ratio)
{
document.images[0].style.width = "100%"
document.images[0].style.height = "auto"
}
else
{
document.images[0].style.width = "auto"
document.images[0].style.height = "100%"
}
}
</script>
</head>
<body onresize="resizeImage()">
<div id="imgarea">
<img onload="resizeImage()" src="f/a.jpg">
</div>
</body>
</html>
Thanks Very Much For This.

I'm not quiet sure if that's what you're looking for, but let's try this:
*upd: the wysiwyg is not working on comments at this moment, so sorry for messy code snippets.
1.Position the div#imgarea relatively. You can then float it to the right, to replicate your right:0px declaration. Don't forget to hide the overflow, to ensure that 'letter-boxed' parts of the image stay hidden.
#imgarea {
position: relative;
width: 70%;
height: 75%;
float: right;
overflow: hidden;
top: 25%;
};
Some user agents will add paddings and margins to the body element, thus preventing the image container to slide all the way to the right. Reset those, to get rid of the gaps between the container and the edge of the browser window.
body {
margin: 0;
padding: 0;
}
As for the image itself, position it absolutely.
img {
position: absolute;
}
And finally javascript. To center the image, you need to calculate what this width/height=auto sums up to, and then reset left/top attributes respectively. Your if function needs to be adjusted just a bit; leave your variables as is:
if (height_ratio > width_ratio) {
var newWidth, newHeight, newTop;
newWidth = area_width;
newHeight = image_height/width_ratio;
newTop = -(newHeight-area_height)/2;
document.images[0].style.width = newWidth;
document.images[0].style.height = newHeight;
document.images[0].style.top = newTop;
document.images[0].style.left = 0;
}else{
var newWidth, newHeight, newLeft;
newHeight = area_height;
newWidth = image_width/height_ratio;
newLeft = -(width-area_width)/2;
document.images[0].style.width = newWidth;
document.images[0].style.height = newHeight;
document.images[0].style.top = 0;
document.images[0].style.left = newLeft;
}
I hope that if this doesn't solve the issue completely, it at least sends you in the right direction. Good luck.

I'm not sure if this will work exactly, but may get your started. I had a client request a radial gradient be fixed to the left and right of a website's main ontent section. The page was set up with dynamic widths and I had a heck of a time getting one solid image to work, so I came up with a quick css solution.
#bgHold #gradLeft{
width:248px;
height:975px;
position:fixed;
right:50%;
margin-right:399px;
background:url("../images/gradLeft.png") top center no-repeat;
}
margin-right is half of the content block's width. So basically, the gradient is fixed on the page at 50% from the right, then shoved left 50% of the content box making it line up with the edge of the content. The same idea applies to the other side.
Now, with your situation, perhaps you can set right:50%; and margin-right:imgWidth/2?