vertically resizable panel fixed to bottom of screen - javascript

When i add resizable to a div fixed to bottom of page the div jumps to the top of the page on resize - I want it to stay fixed at the bottom but resize upwards.
I'm sure its something simple but not simple enough for me right now!
Here is a fiddle showing my problem
<div class="resize">
$('.resize').resizable({handles: 'n'});
.resize{
position:fixed;
bottom:0px;
width:100%;
background-color:#aaaaaa;
height:100px;
}
.ui-resizable-n {
background-color:red;
width:5px;
height:5px;
}
https://jsfiddle.net/gnz96vhy/
Any pointers gratefully received.

I made it work. I solved it by adding the distace that the div needed from the top. I also made a jQ script for that so the distance the top will be correct even if the window is resized. Hope this was the solution you wanted! =)
function disToTop() {
var windowHeight = $(window).height(),
resizeHeight = $("#div2").height(),
difference = windowHeight - resizeHeight;
$("#div2").css("top", difference);
}
https://jsfiddle.net/gnz96vhy/4/

Related

How to determine if after scrolling the bottom of browser window has reached top of DIV?

I am trying to solve this issue with jQuery/Javascript:
When the browser scrolls down and the bottom of the window reaches the top of the footer DIV, action a CSS code change.
Example of problem:
https://elodywedding.com/blog
(Ensure your browser window is mobile-sized.)
If you scroll down to footer on a smaller resolution, the footer floats statically and sits above the "tags" DIV. I would need to set position back to absolute.
Any ideas how to detect when the scrolling causes the window to reach the top of the footer DIV?
Something like this appears to work: https://jsfiddle.net/zk49cuy7/
<style type="text/css">
#body {
height:1500px;
background-color:red;
}
#footer {
height:200px;
background-color:blue;
}
</style>
<div id="body"></div>
<div id="footer"></div>
jQuery(function($){
$(window).bind('scroll', function(e){
if($(window).scrollTop() + window.innerHeight >= $('#footer').offset().top)
{
console.log('BOTTOM');
}
else
{
console.log('NOT BOTTOM');
}
});
});
Binding to window scroll and checking whether the scroll top + window height is greater than the offset top of the footer.

bootstrap 3: Dynamically re-size a panel and keep panel footer on bottom

I'm resizing a panel to be the same height as the column to its left.
Here a bootply link
I resizes fine but the panels footer is stuck at the top. What is the best way to solve this?
Here's the js I'm using:
$(document).ready(function(){
//Panels have a margin-bottom
$topRightCol = $('.homepage-top-right-col .panel');
$leftColHeight = $('.homepage-top-left-col').height() -
parseInt($topRightCol.css('margin-bottom')) -
parseInt($topRightCol.css('borderBottomWidth'));
$topRightCol.height($leftColHeight);
When I tried to set the height on the column class itself like this ('.homepage-top-right-col).height($leftColHeight) it didn't increase the height so I modified the panel instead.
Well..you could solve this with a bit of extra CSS, and position:absolute, if you aren't against that. I added these CSS styles:
.homepage-top-right-col > .panel{
position:relative;
}
.homepage-top-right-col .panel-footer{
position:absolute;
width:100%;
bottom:0;
}
This causes the .panel-footer of the right panel to always stick to its bottom, regardless of the panel's height. Here's a JSFiddle to show you what this achieves.
Hope this helps! If you have any questions, let me know.

JQuery sticky bar flickering on page resize

I've added a sticky 'call to action' bar to my site, it works like a sticky navigation, however it's stuck to the bottom of the window its original position in the page is scrolled past, then it jumps back in to the flow of the document.
It uses a CSS class '.sticky' to add the fixed position when the scroll position is less than the vertical position of the bar's original position.
The issue is, when I resize the page I get a nasty flicker and the bar more often than not disappears from view.
The code I am using is below...
(function() {
$(window).on('resize', function() {
var stickyNavTop = $('#wrap-bar').offset().top;
var stickyNav = function(){
var scrollBottom = $(window).scrollTop() + $(window).height() - $('.cta-bar').height();
if (scrollBottom < stickyNavTop) {
$('#wrap-bar').addClass('sticky');
$('#wrap-bar-dummy').show();
} else {
$('#wrap-bar').removeClass('sticky');
$('#wrap-bar-dummy').hide();
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
$(document).ready(function() {
$(window).trigger('resize');
});
})(jQuery);
Can anyone point me in the right direction as to what I need to change to get the bar to stop flickering when resizing?
Thanks.
The flickering you're reporting is most likely because Javascript isn't rendering your DOM changes as quickly as you scroll. As mentioned by #Switching Brains, attempt using CSS to absolutely position your footer at 0px from the bottom of the window. Then, you'll only need Javascript to locate when you've reached the bottom of the page, then apply your class to hold it in a fixed position.
A realy dirty example of this, but you'll get the idea:
HTML
<div id="body">
<div id="bar">Bar at the bottom</div>
</div>
CSS
html, body {
height:100%;
widht:100%;
}
#body {
position:relative;
height:100%;
border:1px solid #000000;
}
#bar {
position:absolute;
bottom:20px;
width:300px;
left:50%;
margin-left:-150px;
background-color:#cccccc;
}
http://jsfiddle.net/Auc6n/
I found with Mozilla that .resize() caused a lot of page flickering as it was being driven too hard.
I used:
$window.resize(throttle(500,function(){

Position a Div "Fixed" Vertically and "Absolute" Horizontally within a "Position:Relative" Container Div

I'm looking for a way I can create a div which will be fixed on the page vertically, so if the user scrolls down, the div stays at the same place on the page. But have it positioned absolutely horizontally, so if the users screen is narrower than my webpage, scrolling to the right or left will not cause the div to move with the screen and, in some cases, remain either half visible at the edge of the screen or off the page completely.
This div must be within a "Position:Relative" Div.
I'm fairly sure there is no way to assign different positions to the varying axis of a div but this is the best way to describe the effect which I am hoping to achieve.
I have this so far, which is basically just a Fixed Div within a Relative Div.
CSS
#container {
position:relative;
width:700px;
height:1000px;
top:50px;
left:50px;
background-color:yellow;
}
#blue-box{
position:fixed;
width:100px;
height:100px;
background-color:blue;
margin-top:20px;
margin-left:400px;
{
HTML
<div id="container">
<div id="blue-box"></div>
</div>
I have also created a jsFiddle to help demonstrate the problem.
This works fine for the vertical, but if you resize your web-browser so that it is narrower than the yellow box (container) and then scroll horizontally, the blue box will move with the page. I'm hoping to stop that from happening.
If there is no way to achieve this through CSS, I'm perfectly happy to use JavaScript as long as it works with all modern browsers and both IE7 and IE8. (Which is why I have added the JavaScript tag)
Can anyone help me out?
With JQuery, use the scrollLeft() property of the document! This would work
$(window).scroll(function(event) {
$("#blue-box").css("margin-left", 400-$(document).scrollLeft());
});
See also
http://jsfiddle.net/zhQkq/9/
Good luck!
Edit: If you want it to use your preset margin-left instead of a hard-coded "400", use
$(window).scroll(function(event) {
$("#blue-box").css("margin-left", $("#blue-box").css("margin-left")-$(document).scrollLeft());
});
Using vanilla javascript would be something like this:
var bb = document.getElementById('blue-box');
window.addEventListener('scroll',function(event){
bb.style.marginLeft = window.scrollX + 'px';
});
In modern browsers, as of 2020, you should try to use the CSS position:fixed; instead of JavaScript positioning because it is widely supported now.
Here's my solution (tested in Opera and Firefox): http://jsfiddle.net/cCH2Z/2
The trick is to specify right: 0px;, this will position the box 0px from the right border of the window.

jquery get document width

Im running in to a weird issue with getting the width of the document. Im using $(document).width() to get the width both on $(window).load and $(window).resize, my problem occurs when the browser is open full screen then resized (shrank) to a width where the content requires you to scroll horizontally to see all the content. At the point in which you need to scroll my header and footer divs just end. I would like them to go 100% of the document width. The problem fixes itself when i refresh the page. Is there a solution that allows a browser to shrink when resizing the window and updates the header and footer divs? This is what i have so far and its not working.
$(window).load(function() {
resize_me();
});
$(window).resize(function() {
resize_me();
});
function resize_me() {
var doc_width = $(document).width();
$('#header').width(doc_width);
$('#footer').width(doc_width);
console.log(doc_width);
}
try window.innerWidth, it should get you the size of the viewport.
No jQuery needed.
and honestly, why not just set their widths to 100% with css ???
#header, #footer {
width:100%;
}
If I understand what you are saying correctly you could try the following in your stylesheet, which would be much more efficient than using JS.
#header, #footer{
width : 100%;
}

Categories