When i add #top or #bottom it goes up and down, but not all the way. It goes to the middle of the page instead of the top or bottom.
The #top anchor is just bellow the body tag.
<a name="top"></a>
TOP
Related
I have set up a sticky footer in an HTML page. I want it to stick to the bottom of the page and anchor at the bottom of the content section. Code:
`<div id="content" class="row">`
`<div class="columns large-12" style="width: 100%; height:400px;">`
`<!--Main content here-->`
`</div>`
`</div>`
`<div class="row ">`
`<div class="footer large-12 sticky" data-sticky data-stick-to="bottom" data-top-anchor="content:bottom">`
`<div class="text-center">`
`<!--footer content here-->`
`</div>`
`</div>`
`</div>`
In order to test, I styled the content and footer divs with borders. The footer sticks to the bottom, but if I resize the browser by moving the bottom of it up without stopping, the footer does not anchor to the bottom of the content div.
However, if I move the bottom of the browser window up and stop when the top border of the footer is on the bottom border of the content div I can actually see it attach to the bottom of the content div, and it stays attached when I again move the bottom of the browser up.
The same thing happens on the way down after the footer has attached to the contend div: if I pull the bottom of browser window down and stop when I see the bottom of the content div, when I start pulling it down again, it detaches from the content div and sticks to the bottom.
Is there any way to fix this so that it works correctly if a user resizes the browser this manner?
I'm using Bootstrap 5 grid layout (row, col-md4, etc.). When I go to print a page, the content is being cut off at the top and bottom of each page, like so:
What causes this? Do I need to add some kind of special markup to prevent this from happening?
I am using jquery-ui draggable. When I drag my box to beyond the bottom of the screen, the body shifts down. How can I prevent this from occurring?
Tried...
I have tried making the draggable to be containment: "*tag*" where tag is html or body.
Still trying containment, I have tried surrounding the layout with a div, however, this breaks the layout scroll-ability of LHS, RHS and center.
The problem is solved by making the body - position: static !important. This then breaks the layout.
For reference, here is the jquery-ui draggable page.
Css Layout
I have a layout which is header, fixed-height-footer, left and right fixed-width-scrollable, fluid center-scrollable. The header and footer is achievable using a large body border hack. See this question for information on the layout. How to have a 3 column layout with fixed left/right, fluid middle and fixed footer?
Reproduction of the problem.
Here is my Fiddle: http://jsfiddle.net/valamas/LrXCA/
Please click and drag the blue box below the footer to see a black band or a further pink band.
Pass scroll: false to your draggable constructor.
By default the auto-scroll option is set to true, if you don't want it, you have to specify scroll: false when creating the draggable. See scroll option on the jQuery draggable page.
Working jsFiddle
I have a simple page with fixed header and footer. When it Slides from page1 to page2, the footer on page is first shown at the position where the content of page2 is ended (somewhat middle) then after page finish sliding the footer re-position itself and move to bottom. Is there any way to avoid this?
In the pageshow event handler of the second page you can try adding the following code snippet:
$.mobile.fixedToolbars.show(true);
I believe this is a bug in JQM. It happens when the page content is shorter than the screen size.
My educated guess, why it happens:
After transitions, JQM triggers updateLayout, which recalculates footer position by hiding-recalulate-showing
Toolbars are hidden using CSS:top property and setting it to 0
So on a long page, to hide the footer CSS:top is set to 0, pushing your footer down to where it would be in a static page flow = the end of your document.
To show the footer, JQM calculates, where you are on your page vs. your screen size and footer height and comes up with some CSS:top = -12345px. Check CSS-top in Firebug when the footer is visible.
= to hide: CSS-top = 0
= to show: CSS-top = -1234px
Now if your page is shorter than the screen height (screen 600px, page 200px for example), hiding the footer by setting CSS:top=0 will stick it to the end of the page, which is right in the middle of your screen at 200px.
Since updateLayout recalculates footer position, it is hidden-recalculated-shown. And there you have your jumping footer.
I've done a fix with pull request on Github - https://github.com/jquery/jquery-mobile/pull/3050.
I guess since the toolbars will switch to pos:fixed with JQM 1.1. nobody bothered to pull it in any more. But it work nevertheless.
I have a div in a page (footer) and I want the following to happen with CSS:
If the page has not enough content to fill the window, the div should be at the very bottom.
If the page has enough content (and a scroll bar perhaps appears) then I want the div to be after all the content.
If I do it with position absolute etc, I can't get the second case to work.
Any ideas?
I think you're looking for 100% min-height layout. Check out this post: 100% Min Height CSS layout.
You want to use a sticky footer.
For example: http://ryanfait.com/sticky-footer/
or if you google Sticky footer you find a few alternatives