I have this function to adjust the page so that it does not scroll regardless of the device, it works at all, however, when you rotate the screen or when I change the device to inspect Google Chrome, the function does not work well, only if I do the reload on the page that works, I don't know what I'm doing wrong.
I believe the problem is in the variable h, where it picks up the height, which doesn't pick up the height when modifying or rotating the device, but I'm not sure, I've tried everything
function changeSize() {
let h = $(document).height();
let he = $("header").height();
let m = $("main").height();
let f = $("footer").height();
let l = $("ui-loader").height();
let x = h - he - m - f - l;
$("container").css('height', x + 'px');
}
$(document).ready(function() {
changeSize();
$(window).resize(function() {
changeSize();
});
};
The first issue I see is here:
let he = $("header").height();
let m = $("main").height();
let f = $("footer").height();
let l = $("ui-loader").height();
$("container").css('height', x + 'px');
These do not select any element. Are they Class selectors or ID Selectors? I will assume Class selectors for my Example.
function changeSize() {
let h = $(document).height();
let he = $(".header").height();
let m = $(".main").height();
let f = $(".footer").height();
let l = $(".ui-loader").height();
let x = h - he - m - f - l;
$(".container").css('height', x + 'px');
}
$(function() {
changeSize();
$(window).on("resize deviceorientation", changeSize);
};
Another issue I see here is that this does not capture any Padding or Margins.
Related
I have the following JS code I am using to move something around on the screen and then when i click a button I want to move everything back to where the original element loaded. Why does my following logic not work? I have also tried subtracting the gMouseDownOffsetX and gMouseDownOffsetY still the button does not transform the image back to the orgin of where it started.
I know the button works because it does in fact change other properties I set, but not the position.
$('#clickMe').click(function(){
$(#element).css({' transform : 'translate('+ -gMouseDownX + ')' });
$(#element).css({' transform : 'translate(' + -gMouseDownY + ')' });
});
let gMouseDownX = 0;
let gMouseDownY = 0;
let gMouseDownOffsetX = 0;
let gMouseDownOffsetY = 0;
function addListeners() {
document.getElementById('cursorImage').addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
}
function mouseUp() {
window.removeEventListener('mousemove', divMove, true);
}
function mouseDown(e) {
gMouseDownX = e.clientX;
gMouseDownY = e.clientY;
var div = document.getElementById('cursorImage');
//The following block gets the X offset (the difference between where it starts and where it was clicked)
let leftPart = "";
if(!div.style.left)
leftPart+="0px"; //In case this was not defined as 0px explicitly.
else
leftPart = div.style.left;
let leftPos = leftPart.indexOf("px");
let leftNumString = leftPart.slice(0, leftPos); // Get the X value of the object.
gMouseDownOffsetX = gMouseDownX - parseInt(leftNumString,10);
//The following block gets the Y offset (the difference between where it starts and where it was clicked)
let topPart = "";
if(!div.style.top)
topPart+="0px"; //In case this was not defined as 0px explicitly.
else
topPart = div.style.top;
let topPos = topPart.indexOf("px");
let topNumString = topPart.slice(0, topPos); // Get the Y value of the object.
gMouseDownOffsetY = gMouseDownY - parseInt(topNumString,10);
window.addEventListener('mousemove', divMove, true);
}
function divMove(e){
var div = document.getElementById('cursorImage');
div.style.position = 'absolute';
let topAmount = e.clientY - gMouseDownOffsetY;
div.style.top = topAmount + 'px';
let leftAmount = e.clientX - gMouseDownOffsetX;
div.style.left = leftAmount + 'px';
}
addListeners();
I found that your position is moved by setting top and left. Why not try to directly set the top and left values to the default values?
Update:
try this:
$('#clickMe').click(function(){
$("#cursorImage").css({ left: 0, top: 0});
});
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 have created a range slider where I am displaying a bubble with slider value within it.
( This example is based on https://css-tricks.com/value-bubbles-for-range-inputs/, I am simply attempted to recreate based on JS)
Here is a function that is suppose to make the bubble move along with the slider:
function displayValue(event) {
var rangeInput = document.getElementById('myRange');
var width = rangeInput.offsetWidth;
var min = rangeInput.getAttribute('min');
var max = rangeInput.getAttribute('max');
var newPoint = (event.target.value - min)/(max - min);
var offset = -1.3;
var newPlace;
if (newPoint < 0) {
newPlace = 0;
} else if (newPoint > 1 ) {
newPlace = width;
} else {
newPlace = width * newPoint + offset;
offset -= newPoint;
}
var outputElement = document.getElementById('myOutput');
outputElement.value = event.target.value;
outputElement.style.left = newPlace;
outputElement.style.marginLeft = offset = "%";
}
This function only partially works (as in the value insider the bubble updates but not the position)
Why is the sldier failing to update it's position ?
http://plnkr.co/edit/lt99U0uvMkPsibY54GAU
I found couple of anomalies in your code which might be typos.
Instead of:
outputElement.style.left = newPlace;
outputElement.style.marginLeft = offset = "%";
Try:
outputElement.style.left = newPlace + 'px';
outputElement.style.marginLeft = offset + "%";
I have to move an image using jQuery / Javascript exactly like this url
I have done similar to this using my own logic. But it gets cut for smaller / bigger image either at the top or at the bottom. Or It moves completely at the bottom and doesn't move completely at the top or vice-versa.
http://jsfiddle.net/N2k6M/
(Please move the horizontal scrollbar to view full image.)
Can anyone please suggest me / Fix my code here, so that my mousemove functionality works perfectly fine and upper / lower part of image moves properly.
I need a seamless movement of image just like in the original url.
HTML PART
<div id="oheight" style="z-index:1000;position:absolute;">123</div> , <div id="yheight" style="z-index:1000;position:absolute;">123</div>
<img id="avatar" src="http://chaikenclothing.com/wp-content/uploads/2012/05/11.jpg![enter image description here][2]" style="position:absolute;overflow:hidden;" />
JAVASCRIPT PART
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script lang="javascript">
var doc_height = $(document).height();
function updateAvatarPosition( e )
{
var avatar = document.getElementById("avatar");
var yheight = parseInt(e.y);
var ywidth = e.x;
//avatar.style.left = e.x + "px";
if((yheight)<(doc_height)){
yheight*=2;
avatar.style.top = '-'+(yheight) + "px";
}
console.log(yheight);
$("#oheight").html(doc_height);
$("#yheight").html(yheight);
/*if((ywidth)<(doc_height/6)){
avatar.style.top = '-'+e.x + "px";
}*/
}
document.getElementById("avatar").onmousemove = updateAvatarPosition;
</script>
see http://jsfiddle.net/N2k6M/7/
function updateAvatarPosition( e )
{
var img_height = $('#avatar').height();
var window_height = $(window).height();
var factor = (img_height - window_height) / window_height;
if(factor > 1) {
var avatar = document.getElementById("avatar");
var yheight = parseInt(e.clientY);
avatar.style.top = '-'+(yheight * factor) + "px";
}
}
#Felix's answer is great and works well, however it's doing more work than necessary. There are a few constants that do not need to be reassigned with every call. By setting these outside of the updateAvatarPosition function you can improve performance some.
var avatar = $('#avatar');
img_height = avatar.height(),
window_height = $(window).height();
function updateAvatarPosition( e )
{
var factor = (img_height - window_height) / window_height,
yheight = parseInt(e.clientY);
if (factor < 1) {
factor = 1;
}
avatar.css('top', -(yheight * factor));
}
avatar.on('mousemove', updateAvatarPosition);
Updated Fiddle
Avatar is referenced more than once so no need to traverse the DOM multiple times, especially multiple times within a constantly cycling event like mousemove. Make a variable reference to avatar outside of the function. The image_height and window_height are also constants and do not change, so there is no need to recalculate them every time as well. If there is the chance that they would change, reassignment should be handled by a resize event.
Would have replied/commented directly under #Felix's answer but apparently don't have enough influence yet. :-/
i think this is something you want
http://jsfiddle.net/N2k6M/6/
var doc_height = $(document).height();
function updateAvatarPosition( e )
{
var avatar = document.getElementById("avatar");
var yheight = parseInt(e.clientY);
var ywidth = e.clientX;
if((yheight)<(doc_height)){
yheight*=2;
avatar.style.top = '-'+(yheight) + "px";
}
/*if((ywidth)<(doc_height/6)){
avatar.style.top = '-'+e.x + "px";
}*/
}
document.getElementById("avatar").onmousemove = updateAvatarPosition;
I'm trying to create an loading icon by moving the css 'background-position' of an image in a loop:
$('#LoginButton').click(function () {
var i = 1, h = 0, top;
for (i = 0; i <= 12; i++) {
h = i * 40;
top = h + 'px';
$('#ajaxLoading').css('background-position', '0 -' + top).delay(800);
}
});
The problem here is that it runs to fast so I don't se the 'animation' of the moving background.
So I added jquerys delay(), but:
delay(800) is not working because delay() only works in jquery animation effects and .css() is not one of those.
How to delay this loop?
I'd suggest using jQuery timer plugin: http://jquery.offput.ca/js/jquery.timers.js
$('#LoginButton').click(function () {
var times = 13;
var delay = 300;
var h = 0, top;
$(document).everyTime(delay, function(i) {
top = h + 'px';
$('#ajaxLoading').css('background-position', '0 -' + top);
h += 40;
}, times);
});
In case you don't want any plugins, use setInterva/clearInterval:
$('#LoginButton').click(function () {
var delay = 300;
var times = 13;
var i = 0, h = 0, top;
doMove = function() {
top = h + 'px';
$('#ajaxLoading').css('background-position', '0 -' + top);
h += 40;
++i;
if( i >= times ) {
clearInterval( interval ) ;
}
}
var interval = setInterval ( "doMove()", delay );
});
Have you looked at using animate() instead of css()? I'm not 100% sure I understand what you're trying to accomplish, so this is kinda a shot in the dark.
http://api.jquery.com/animate/
Chrome, Safari and IE3+ should support background-position-y, so if you're targeting these specific browser, using jquery you could just make a timed animation() on backgroundPositionY property - http://snook.ca/archives/html_and_css/background-position-x-y
(On Firefox the effect won't work)
You can use setTimeout() and clearTimeout() functions in order to accomplish that.
IE:
var GLOBAL_i = 0;
function doAnimation() {
var h = GLOBAL_i * 40;
var top = h + 'px';
$('#ajaxLoading').css('background-position', '0 -' + top);
if (GLOBAL_i < 12) {
GLOBAL_i++;
t=setTimeout(doAnimation, 800);
}
}
$('#LoginButton').click(function () {
doAnimation()
});