I'm doing a responsive background video. I have this code.
<video id="bgvideo" />
function scaleVideo() {
var windowHeight = $(window).height();
var windowWidth = $(window).width();
var videoNativeWidth = $('video#bgvideo')[0].videoWidth;
var videoNativeHeight = $('video#bgvideo')[0].videoHeight;
var heightScaleFactor = windowHeight / videoNativeHeight;
var widthScaleFactor = windowWidth / videoNativeWidth;
if (widthScaleFactor >= heightScaleFactor) {
var scale = widthScaleFactor;
} else {
var scale = heightScaleFactor;
}
var scaledVideoHeight = videoNativeHeight * scale;
var scaledVideoWidth = videoNativeWidth * scale;
$('video#bgvideo').height(scaledVideoHeight);
$('video#bgvideo').width(scaledVideoWidth);
}
I'm using grunt to compile my code and etc.
Jshint of grunt is saying I'm using "scale" out of scope and I cant understand why.
Any suggests ?
You should not write var scale = heightScaleFactor; inside the else statement if you want to use it outside of it.
Initialize scale outside the if
var scale;
if (widthScaleFactor >= heightScaleFactor) {
scale = widthScaleFactor;
} else {
scale = heightScaleFactor;
}
Try this instead:
function scaleVideo() {
var scale; //this is the change
var windowHeight = $(window).height();
var windowWidth = $(window).width();
var videoNativeWidth = $('video#bgvideo')[0].videoWidth;
var videoNativeHeight = $('video#bgvideo')[0].videoHeight;
var heightScaleFactor = windowHeight / videoNativeHeight;
var widthScaleFactor = windowWidth / videoNativeWidth;
if (widthScaleFactor >= heightScaleFactor) {
scale = widthScaleFactor; //simply modify the value here
} else {
scale = heightScaleFactor;
}
var scaledVideoHeight = videoNativeHeight * scale;
var scaledVideoWidth = videoNativeWidth * scale;
$('video#bgvideo').height(scaledVideoHeight);
$('video#bgvideo').width(scaledVideoWidth);
}
Related
So, I'm trying to get some parallax scrolls in my document. So I did:
window.onscroll = function() {scrollPost()};
function scrollPost () {
var i = window.scrollY;
blockShift(i);
console.log(i);
}
function blockShift (i){
var blockOne = document.querySelector(".block-1");
var blockTwo = document.querySelector(".block-2");
var y = i - 900
if (i < 980){
blockOne.style.transform = `translateY(${y/3}px)`
blockTwo.style.transform = `translateY(${y/-3}px)`
}
}
However, I wonder if there's a more accurate way to get numbers? One of the problem is that scrollY number is variable depending on screen size. I've also tried.
var x = window.screen.width;
var i = window.scrollY;
var number = Math.round(i/x);
Which gives me a 0.xxxxxxx number. How would I get something better?
Edit: this also works well
var x = window.screen.width;
var i = window.scrollY;
var a = i / x;
var numb = Math.round(a * 10) / 10;
I am currently using the following javascript to resize an image to the size of it's parent, while maintaining aspect ratio and keeping the parent div square. So i have a square box with a rectangle stretched to either the max width or max height depending on orientation. This works great on first load however I cannot get the images and divs to resize on page orientation change or resize to work. Any ideas. I have tried using the window.resize and window.orientation listeners.
Original code was from:
Scale, crop, and center an image...
var aspHt = $('.aspectcorrect').outerWidth();
$('.aspectcorrect').css('height', aspHt + 'px').css('width', aspHt + 'px');
function ScaleImage(srcwidth, srcheight, targetwidth, targetheight, fLetterBox) {
var result = {
width : 0,
height : 0,
fScaleToTargetWidth : true
};
if ((srcwidth <= 0) || (srcheight <= 0) || (targetwidth <= 0) || (targetheight <= 0)) {
return result;
}
// scale to the target width
var scaleX1 = targetwidth;
var scaleY1 = (srcheight * targetwidth) / srcwidth;
// scale to the target height
var scaleX2 = (srcwidth * targetheight) / srcheight;
var scaleY2 = targetheight;
// now figure out which one we should use
var fScaleOnWidth = (scaleX2 > targetwidth);
if (fScaleOnWidth) {
fScaleOnWidth = fLetterBox;
} else {
fScaleOnWidth = !fLetterBox;
}
if (fScaleOnWidth) {
result.width = Math.floor(scaleX1);
result.height = Math.floor(scaleY1);
result.fScaleToTargetWidth = true;
} else {
result.width = Math.floor(scaleX2);
result.height = Math.floor(scaleY2);
result.fScaleToTargetWidth = false;
}
result.targetleft = Math.floor((targetwidth - result.width) / 2);
result.targettop = Math.floor((targetheight - result.height) / 2);
return result;
}
function RememberOriginalSize(img) {
if (!img.originalsize) {
img.originalsize = {
width : img.width,
height : img.height
};
}
}
function FixImage(fLetterBox, div, img) {
RememberOriginalSize(img);
var targetwidth = $(div).width();
var targetheight = $(div).height();
var srcwidth = img.originalsize.width;
var srcheight = img.originalsize.height;
var result = ScaleImage(srcwidth, srcheight, targetwidth, targetheight, fLetterBox);
img.width = result.width;
img.height = result.height;
$(img).css("left", result.targetleft);
$(img).css("top", result.targettop);
}
function FixImages(fLetterBox) {
$("div.aspectcorrect").each(function(index, div) {
var img = $(this).find("img").get(0);
FixImage(fLetterBox, this, img);
});
}
window.onload = function() {
FixImages(true);
};
Call .resize() after $(window).resize():
$(window).resize( function(){
var height = $(window).height();
var width = $(window).width();
if(width>height) {
// Landscape
$("#landscape").css('display','none');
} else {
// Portrait
$("#landscape").css('display','block');
$("#landscape").click(function(){
$(this).hide();
});
}
}).resize();
I figured out what I was missing. The first bit of javascript is setting the style of height and width. When recalling the .outerHeight it was still using the inline style to calculate the width, and hence not resizing the div. I simply used .removeAttr('style') to remove that property first and then did the resize. Working now. I simply used $(window).on("resize", resizeDiv) and wrapped my resizing into a function named resizeDiv
function resizeDiv() {
var asp = $('.aspectcorrect');
asp.removeAttr("style");
var aspHt = asp.outerWidth();
asp.css('height', aspHt + 'px').css('width', aspHt + 'px');
FixImages(true);
}
I'm using a code that scale images to fit the parent div, it's called "aspectcorrect".
The problem happens on the mobile version: my parent div has 100% width, and when the user changes the orientation of the screen to landscape, the image doesn't resize to fit the new div's width.
There is a way to rerun the onload event (which scales the image), when the user changes the orientation of the screen?
Here is my website: www.mcsoftware.com.br/sitemc
I'm still working on it.
(To understand what I'm saying, open it on your cellphone, and when you change the screen orientation just click on "Continuar mesmo assim" to navigate)
Thanks!
aspectcorrect.js
function ScaleImage(srcwidth, srcheight, targetwidth, targetheight, fLetterBox) {
var result = { width: 0, height: 0, fScaleToTargetWidth: true };
if ((srcwidth <= 0) || (srcheight <= 0) || (targetwidth <= 0) || (targetheight <= 0)) {
return result;
}
// scale to the target width
var scaleX1 = targetwidth;
var scaleY1 = (srcheight * targetwidth) / srcwidth;
// scale to the target height
var scaleX2 = (srcwidth * targetheight) / srcheight;
var scaleY2 = targetheight;
// now figure out which one we should use
var fScaleOnWidth = (scaleX2 > targetwidth);
if (fScaleOnWidth) {
fScaleOnWidth = fLetterBox;
}
else {
fScaleOnWidth = !fLetterBox;
}
if (fScaleOnWidth) {
result.width = Math.floor(scaleX1);
result.height = Math.floor(scaleY1);
result.fScaleToTargetWidth = true;
}
else {
result.width = Math.floor(scaleX2);
result.height = Math.floor(scaleY2);
result.fScaleToTargetWidth = false;
}
result.targetleft = Math.floor((targetwidth - result.width) / 2);
result.targettop = Math.floor((targetheight - result.height) / 2);
return result;
}
onimageload.js
function OnImageLoad(evt) {
var img = evt.currentTarget;
// what's the size of this image and it's parent
var w = $(img).width();
var h = $(img).height();
var tw = $(img).parent().width();
var th = $(img).parent().height();
// compute the new size and offsets
var result = ScaleImage(w, h, tw, th, false);
// adjust the image coordinates and size
img.width = result.width;
img.height = result.height;
$(img).css("left", result.targetleft);
$(img).css("top", result.targettop);
}
Where onload function goes
<img onload="OnImageLoad(event);" />
https://jsfiddle.net/ffxeqq21/
You can try some javascript library like jQuery mobile and use the orientationchange event This way you could just do
$( window ).on( "orientationchange", function( event ) {
//Some code
});
Is it possible of getting the width/height of browser each time BEFORE the resize() is triggered?
$(window).resize(function() {
});
This is due to I'm calculating the difference before/after browser has resize().
You would have to store the previous value, a little like this
var prevHeight = 0;
var prevWidth = 0;
$(document).ready(function() {
prevHeight = $(window).height();
prevWidth = $(window).width();
});
$(window).resize(function() {
var currentHeight = $(window).height();
var currentWidth = $(window).width();
//do difference stuff
prevHeight = currentHeight;
prevWidth = currentWidth;
});
I am having a Tooltip (larger image view) that is being positioned via e.pageX e.pageY and i am trying to make sure it is not hidden below the current scrolled view port.
I have seen many sites have this
my code is something like this but i am missing something.
var positionImg = function(e) {
var viewportWidth = $(window).width();
var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
var mouseAtY = e.pageY;
var mouseAtX = e.pageX;
var maxBottomVPos = viewportHeight-"i dont know";
var maxTopVPos = 30;
if (mouseAtY >= maxBottomVPos)
{
tPosX = mouseAtX+ 10;
tPosY = mouseAtY -520;
}
else if (mouseAtY <= maxTopVPos)
{
tPosX = mouseAtX;
tPosY = mouseAtY +40;
}
else
{
tPosX = mouseAtX;
tPosY = mouseAtY +20;
}
$zoomContainer.css({top: tPosY, left: tPosX});
};
var maxBottomVPos = viewportHeight-"i dont know";
You probably don't want to go any lower than the height of the element that you are positioning. So use the height of zoomContainer to figure out how much higher it needs to go. This way, the whole thing can be included. Of course, you'll have to consider that the user might shrink the screen too small to fit the container.
To get the scroll offset use scrollTop. With this you will have both the size of the viewport and how far down the viewport is.
I found the answer:
Quite simple:
var positionImg = function(e) {
cntnrH = $zoomContainer.height() + 230;
calHight = e.pageY - $(window).scrollTop() + cntnrH;
docH = $(window).height()
var mouseAtY = e.pageY;
var mouseAtX = e.pageX;
if (calHight >= docH)
{
tPosX = mouseAtX + 5;
tPosY = mouseAtY - cntnrH;
}
else if (calHight <= calHight){
tPosX = mouseAtX;
tPosY = mouseAtY + 15;
}
else
{
tPosX = mouseAtX;
tPosY = mouseAtY +20;
}
$zoomContainer.css({top: tPosY, left: tPosX});
};
doIt = $("img.hovelble");
doIt.hover(showZoomImg, hideZoomImg).mousemove(positionImg);
});