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.
Related
http://jsfiddle.net/LakYy/6/
The above link demonstrates my problem.
I want to increase the size of the container when trying to drag children out of it, keeping the size of parent fixed & hence, a scroll should appear within parent with overflow:scroll for complete scrolling of container
The main intention is to increase the size of the canvas keeping the viewport size constant & hence, should have scrolls.
Have been struggling for 2 days but no luck.
You need to calculate the amount that you have dragged the element once it reaches the boundary, then on the "drag" event, increase the size of the container while dragging depending on the direction that you are going. X or Y.
Judson
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/
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/
I have a <h3> tag with limited height (100 px for example, position: absolute) and the text overflows it.
What I would like to do is slide it down over to the height that is needed when the mouse is over it and back to original height (100px).
I hope you understood what I mean
I don't think it uses slidedown() function for that and I am very weak in animate function. Any help please?
You can nest a div inside the h3 that contains the content and then use the h3 as a masking container (use overflow:hidden). When the user mouses over, fire a function that get's the height of the interior div (make sure to include any margins or padding). Then execute you height adjust animate function (In jquery, something like $('h3').animate({height: heightVar}); )The mouseout fires a function that restores the height of the h3 back to 100px.
Here's a sample: http://jsfiddle.net/XR9fb/
You can get the real height of the element with the scrollHeight property. Now, I don't really know much of jQuery, but I imagine you could just call animate to set the height CSS property to the scrollHeight of the element when the mouse hovers it, and return to the original height when the mouse moves out of it.
If the height of the element isn't fixed, you can salve the current height somewhere before displaying the full element, and when the mouse leaves the element you just restores this state.