I basically have one smaller div with overflow set to auto. Inside I have another, big div of the size of the grid and inside this div I have canvas element, that should have the size of the first smaller div.
What I want to achieve is to have the canvas always shown in the smaller div, no matter where I scrolled.
I set the position of canvas to relative and the top and left attributes are set as scrollTop and scrollLeft in javascript whenever I scroll. This way my canvas will have always fixed size ( no performance issues) and in javascript I can compute the position in which I am scrolled in.
var s=document.getElementById("scrollable");
var c=document.getElementById("canvas");
c.width=400;
c.height=400;
var maxw = s.scrollWidth;
var maxh = s.scrollHeight;
s.onscroll = function(){
c.style.top = s.scrollTop + "px";
c.style.left = s.scrollLeft + "px";
}
The problem I am having is that when I reach the end of scrolling, canvas seems to overflow the big div (thanks to size of the scrollbars I believe) and thus the big div's size is increasing and scrolling continues while it shouldn't.
Link to simple example: http://jsfiddle.net/kwynt/1/
I think you are right about the scrollbars causing the problem. they shrink the viewable area of your div, so the canvas is always overflowing over the right and bottom (since you keep moving the canvas down, you can never scroll all the way there). You can add this to your "wrap" div to fix:
overflow:hidden
http://jsfiddle.net/a3XPB/
Related
I am currently struggling with a div container with multiple children elements, some of which are images with absolute px width values.
The issue is resizing the parent and ensuring the content isn't cut off.
My current solution is:
function customResize(element){
let parent = element.parentNode;
element.style.width = parent.style.width;
element.style.height = parent.style.height;
}
$(window).resize(function (){
let elem = document.getElementById('contentContainerId');
customResize(elem);
});
This uses a parent element of the container div (that automatically resizes correctly) as a guide, taking its width and height values and assigning them to the container div. This works for resizing, but for some reason, it's not fully correct.
Any advice would be greatly appreciated!
After some feedback, I'm noticing the container div is resizing correctly and staying to the width of its parent. However, its contents, despite shrinking, still gets cut far too much. See the example image below - green is the desired width, red is the problem area.
Example Image
Or perhaps more clear with this
Example Image 2
Check out this w3schools page: https://www.w3schools.com/jsref/prop_style_overflow.asp
If you replace "hidden" with "scroll" and run it, you'll see how you can make your elements fixed size and scrollable.
As far as adapting to your situation, you may want to set the css width from the width before adding your images. You can do this like
var myDiv = ...;
let wid = myDiv.getBoundingClientRect().width;
myDiv.style.width = wid + "px";
And remember to add css style overflow-x : "scroll"
Is there away to increase to increase a div's offset.left when its width changes. for example am resizing a div element with jQuery resize function .resize(function)
Now everything work well but i would like to make the div move the opposite side of resize,. like if am resizing to make it bigger the left offset should extend left and thus lessening the left offset relative to the new width.
I have a simple canvas drawing program that works perfectly.
But when I want to use it on my webpage I have to position it. I need canvas element to be inside 1 div element and i need to position that div element in css. When I do change position of parent div element my canvas window moves regularly but when I try to draw, mouse position of my cursor is not matching line on the screen.
I would like to know how to solve this problem and how to position my canvas window correctly where I want.
Here is canvas program that works(color buttons are not positioned well but nevermind).
HjD7e -> jsfiddle id
And here is the one that is messed up(cursor position is not matching)
S6Dhe -> jsfiddle id
Since you are now offsetting multiple elements, you'll need to take the new positions into account. Seeing as you are positioning the parent container, it might be easier to put all your positioning there and remove the extra positioning from the canvas itself. Using:
#contain{
position:absolute;
top:300px;
left:500px;
width: 400px;
height: 400px
}
instead. From there, change the code getting the positions to:
contain = document.getElementById('contain');
currX = e.clientX - contain.offsetLeft + window.scrollX;
currY = e.clientY - contain.offsetTop + window.scrollY;
also accounting for scrolling in the window.
The working fiddle is here. (Caveat, only tested in Firefox)
Is it possible to shrink both the height and the width of a div simultaneously while scrolling down a page? For example, as the user scrolls down, the div size goes from 400px by 400px to 200px by 200px while staying in the center of the page? I know it's possible to shrink the height OR the width using jQuery, but I haven't seen anything on shrinking both.
You can get the height and width, decrement both, and then reapply the new values inside of a scroll event.
var divToChange = $('#sizeShifter');
$(document).scroll(function(){
var divHeight = divToChange.height();
var divWidth = divToChange.width();
divHeight-=5;
divWidth-=5;
divToChange.css({width:divWidth, height:divHeight});
});
You can also reverse this effect when the user scrolls up. This is a little more involved, but here is a working fiddle to get you started.
So I have a div that is positioned in the middle of my page(centered horizontally but not vertically), and it scales to fit the device width until the device becomes larger than 600px. After that the div remains at 600px wide and stays centered in the window no matter how much larger it becomes.
What I would like to do is position a background image so that it is always located at the bottom left of this scaling div (background of the page not background of the div). I believe I will need to use javascript to do this, but I'm not exactly sure. I think I might need to do something like:
var divWidth = document.getElementById('theScalingDiv').offsetWidth;
var pageWidth = document.clientWidth;
var xCoord = (pageWidth/2) - (divWidth/2);
Then I could use absolute positioning to position the background image according to the height of the scaling div and the calculated xCoord. Does this sound like it would work?
You could use fixed positioning on the div:
.divtoposition {
position:fixed;
left: 0;
bottom: 0;
}
http://jsfiddle.net/7v5L4/