Develop Reference

How do I scale an SVG based on my website's window size

I'm trying to use a settings icon svg file which will scale depending on then window width. I've tried to do this by creating a function in JavaScript that changes the element's width and height based on the window size but this doesn't work. (Btw i'm testing it with a width of 360 pixels but the svg's size is about 300 pixels).
The HTML:
<img id="settings-icon" class="icon" src="images/icons/settings-icon.svg" onclick="settingsPage();" alt="Settings" />
The JavaScript:
var settings_icon = scaleIcon(dcument.getElementById("settings-icon"));
scaleIcon(settings_icon);
function scaleIcon(icon) {
var w = window.innerWidth;
var h = window.innerHeight;
if (w <= 360) {
icon.width = "44";
icon.height="44";
}
else if (w <= 400) {
icon.width = "48";
icon.height="48";
}
else if (w <= 440) {
icon.width = "52";
icon.height="52";
}
}

I think you spelt 'document' as 'dcument'. Also, try using icon.style.width and icon.style.height. Also, remember to add the units for your measurements. Example: icon.style.width = "44vw";

Image orientation lost when resizing with javascript

I need to show an image in the largest size possible so I use javascript to create a square div with the maximum dimensions that fit the browser window.
I load the image and then I then change the width and height attributes to values that will make the image fit.
This works fine for 99% of images, but I have some that are shown in landscape format when they actually in portrait. I know they should be portrait because they are shown correctly in Windows explorer, Photoshop etc, and even when I right-click on the displayed image in a browser and select "show image in new window"
I have even rotated the image with PhotoShop and it is still shown landscape.
This makes me think that metadata is not being respected.
In ASPX Page_Load... imgImage.ImageUrl = "~/" & tPath
In HTML
function resizeImg() {
var windowWidth = window.innerWidth || document.documentElement.clientWidth;
var windowHeight = window.innerHeight || document.documentElement.clientHeight;
var imgMax = windowHeight - 54;
var div = document.getElementById('divImage');
div.style.width = imgMax + 'px';
div.style.height = imgMax + 'px';
var divW = div.offsetWidth;
var divH = div.offsetHeight;
var winR = divW/divH
var newImgH = imgH;
var newImgW = imgW;
if(newImgW > divW) {
newImgW=divW
newImgH = Math.floor(Math.round(divW / imgR));
}
if(newImgH > divH) {
newImgH=divH
newImgW =Math.floor(Math.round(divH * imgR));
}
img.setAttribute('width',newImgW);
img.setAttribute('height',newImgH);
img.setAttribute('hspace',(divW - newImgW)/2);
img.setAttribute('vspace', (divH - newImgH) / 2);
}

Failed to resize image vertically in Draft.js

I am using Draft.js plugin Resizeable.
I am trying to resize the image with original length-to-width ratio.
However, for the code below, when I use the mouse to resize by the bottom edge of the image, the cursor changed, but it failed to resize. It only works well at the left and right edge.
const resizeablePlugin = createResizeablePlugin({
vertical: 'relative',
horizontal: 'relative'
});
codesandbox
After viewing the source code, I still didn't figure out what causes this.

It does not seem like developers of this plugin had provided this opportunity to change image size with saving ratio when you resize by the top or bottom edges. Configuration option vertical: 'relative' means that plugin should set height value in relative units (percents). You can check with devtools that when you try to resize your image height value does change. But we should change width value to reach the behaviour when we resize the image with saving ratio.
It can be achieved by rewriting the source code a bit. Check this fork of your sandbox.
Check createDecorator.js it is the same file that is stored in /node_modules/draft-js-resizeable-plugin/lib/createDecorator.js. What did I change in it? Find doDrag function (I market with // ! all strings that was added or changed):
...
var startWidth = parseInt(document.defaultView.getComputedStyle(pane).width, 10);
var startHeight = parseInt(document.defaultView.getComputedStyle(pane).height, 10);
var imageRect = pane.getBoundingClientRect(); // !
var imageRatio = imageRect.width / imageRect.height; // ! get image ratio
// Do the actual drag operation
var doDrag = function doDrag(dragEvent) {
var width = startWidth + dragEvent.clientX - startX;
var height = startHeight + dragEvent.clientY - startY;
var block = store.getEditorRef().refs.editor;
width = block.clientWidth < width ? block.clientWidth : width;
height = block.clientHeight < height ? block.clientHeight : height;
var widthForPercCalculation = (isTop || isBottom) && vertical === 'relative' ? height * imageRatio : width; // ! calculate new width value in percents
var widthPerc = 100 / block.clientWidth * widthForPercCalculation; // !
var heightPerc = 100 / block.clientHeight * height;
var newState = {};
if ((isLeft || isRight) && horizontal === 'relative') {
newState.width = resizeSteps ? round(widthPerc, resizeSteps) : widthPerc;
} else if ((isLeft || isRight) && horizontal === 'absolute') {
newState.width = resizeSteps ? round(width, resizeSteps) : width;
}
if ((isTop || isBottom) && vertical === 'relative') {
newState.width = resizeSteps ? round(widthPerc, resizeSteps) : widthPerc; // ! here we update width not height value
} else if ((isTop || isBottom) && vertical === 'absolute') {
newState.height = resizeSteps ? round(height, resizeSteps) : height;
}
...
I think you can ask this plugin dev-team for add this feature or
fork the project.

How to shrink an image width based on scroll position

I'm looking to shrink a logo based on scroll
So far, I have something like this
logoSize = function(){
var headerOffset = $(window).height() - 650;
var maxScrollDistance = 1300;
$(window).scroll(function() {
var percentage = maxScrollDistance / $(document).scrollTop();
if (percentage <= headerOffset) {
$('.logo').css('width', percentage * 64);
}
console.log(percentage);
});
}
logoSize();
I'm close, but the image either starts too wide or it shrinks too quickly, I need it to happen for the first 650px of scroll as you can see - Any ideas? Perhaps a percentage width would be better?

I've re-written your code based on the assumption that you have a target size in mind , e.g. after scrolling 650px you want your image to be 250px wide.
It scrolls smoothly between the native size and the target size, and takes into account the fact that the window height could be less than your maximum scrolling distance:
logoSize = function () {
// Get the real width of the logo image
var theLogo = $("#thelogo");
var newImage = new Image();
newImage.src = theLogo.attr("src");
var imgWidth = newImage.width;
// distance over which zoom effect takes place
var maxScrollDistance = 650;
// set to window height if that is smaller
maxScrollDistance = Math.min(maxScrollDistance, $(window).height());
// width at maximum zoom out (i.e. when window has scrolled maxScrollDistance)
var widthAtMax = 500;
// calculate diff and how many pixels to zoom per pixel scrolled
var widthDiff = imgWidth - widthAtMax;
var pixelsPerScroll =(widthDiff / maxScrollDistance);
$(window).scroll(function () {
// the currently scrolled-to position - max-out at maxScrollDistance
var scrollTopPos = Math.min($(document).scrollTop(), maxScrollDistance);
// how many pixels to adjust by
var scrollChangePx = Math.floor(scrollTopPos * pixelsPerScroll);
// calculate the new width
var zoomedWidth = imgWidth - scrollChangePx;
// set the width
$('.logo').css('width', zoomedWidth);
});
}
logoSize();
See http://jsfiddle.net/raad/woun56vk/ for a working example.

jQuery - How to know if window is resizing in width/height or both?

I have a little problem with window resizing using jQuery's function .resize(). I would like to know which dimension is getting bigger/smaller - width or height. I need this because if I just put two conditions - if width is for 50px bigger than div and if height is for 50px bigger than div,
// (pseudocode)
if width = div.width + 50px
width = something
if height = div.height + 50px
height = something
then is working on just one condition and I can resize only width or height.
How could I know which dimension is changing in size or if both are?

By saving last window size values in variables.
var h = $(window).height(), w = $(window).width();
$(window).resize(function(){
var nh = $(window).height(), nw = $(window).width();
// compare the corresponding variables.
h = nh; w = nw; // update h and w;
});

Save the previous size and compare with it, everytime the size changes.
For ex:
var prevW = -1, prevH = -1;
$(document).ready(function() {
// ... other stuff you might have inside .ready()
prevW = $(window).width();
prevH = $(window).height();
});
$(window).resize(function() {
var widthChanged = false, heightChanged = false;
if($(window).width() != prevW) {
widthChanged = true;
}
if($(window).height() != prevH) {
heightChanged = true;
}
// your stuff
prevW = $(window).width();
prevH = $(window).height();
});
Demo: http://jsfiddle.net/44aNW/