I have a GWT app that have a HorizontalPanel that span across the width of the page, that serves as the "top bar" of the app. However I want to make it "sticky" that is when the page content grows, and when scrollbar appears, when scrolled I want the said HorizontalPanel to stick on top. Is it possible to do with GWT and/or with the help of GQuery?
By using CSS:
Add/set a css class to your HorizontalPanel
myHorizontalPanel.setStyleName("onTop");
In you css file:
.onTop{
position: fixed;
top: 0px;
left: 0px;
/* adapt width and heigth to fit your needs */
width:100%;
height:40px;
}
That should do the trick
You can use DockLayoutPanel to divide page. Put your bar on g:north and an scroll panel on g:center. That way if content inside the scroll panel overflow, the scrollbars will appear only on the "content" part.
<g:DocLayoutPanel unit="PX">
<g:north size="40"> <!-- you must provide a fixed size, you can change it later -->
your bar content
</g:north>
<g:center>
<g:ScrollPanel> <!-- it will be stretched to ocuppy all available space -->
here goes your content
</g:ScrollPanel>
</g:center>
</g:DocLayoutPanel>
Related
I have a site based on foundation 5 & angularjs with the following layout:
header
-left-nav
--content
footer
Currently the left nav is absolute positioned to the left with an initial height of 100% (top:0, bottom:0)
The content div changes in height as to what is being loaded into it (via ajax). I'm manually adjusting the height of the left-nav div when the content height changes, but I was wondering if there was a way with html/css that would enable me to get rid of this script.
I've tried using all the techniques i've found through googling, but none seem to work without the javascript.. I need the left nav to always been 100% of the page height as it has a dark background that stretches to the bottom of the page.
Many thanks,
Ben
Update
Its working in this jsfiddle.net
This FIDDLE has an "add content" button which will show you it working with dynamic data.
I just changed this ...
.small-fixed-130-left.column {
position:absolute;
width:11.4285714286rem;
top:0;
left:0;
bottom: 0;
}
You could position: fixed; the left nav with a height: 100%;
on my website i want the footer at the bottom of the site. i add this to the footer css:
position: fixed;
bottom: 0;
width: 100%;
The footer is now good at the bottom but all the content goes on the footer div. Like the footer div is background. How can i put the footer at the bottom right?
You seem to be asking two different questions. Try raising the z-index of the footer element to keep it above other content.
To put it at the bottom right, set a width and a right position of zero.
I'm not sure if I understand your problem but you can try to add/change this in your footer css
right: 0;
width: 50%;
z-index: 999;
You'll need to make use of the CSS z-index property and give your main content container padding-bottom equal to the height of the footer to prevent your footer cutting off the bottom of your page.
Take a look at this article "How to keep footers at the bottom of the page":
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
You will want to compensate for the height of the footer by adding the footer's height to the margin-bottom of your content's region. First, look for the element that appears right before your footer on every page. Hopefully it will be something like this:
<div id="header">
HEADER CONTENT
</div>
<div id="content" style="margin-bottom: 50px;">
YOUR SITES CONTENT
</div>
<div id="footer" style="position: fixed; bottom: 0; width: 100%; height: 50px;>
FOOTER CONTENT
</div>
Also, don't use inline styles like I have above. Use propper css please :) It helps all the internets.
Position: fixed takes the element out of the flow of the page. The result is that your footer is occupying "nothing" when it comes to affecting your other elements.
The reason your content is ending up on top is that it doesn't actually know it's there. What I mean is that you need to account for your footer when thinking of your other elements.
For instance, if you have a wrapper that ends just before your footer, you can give it an extra bottom padding that is equivalent to the height of your footer.
To answer a sort of hidden second part of your question: To be able to give an element a z-index, it needs to be position with something other than "static" (the default positioning). If you're trying to work out z-indexes on two different elements, you'll want to give them both a position value other than "static" to get total control.
Hope some of this helps,
iso
I have an application a sort of a toolbar which will appear at the bottom of screen with fixed positioning. But when I scroll a page all the way down, toolbar hides some links at the footer of the page. Now I can hide that bar, but I want that even without hiding none of the client page's link should get hidden behind toolbar.
Thus I want to attach a transparent div at the bottom of the page. I attach it just above body tag. I know it can mess with client's page, but just wanna experiment. I attach it with this style
style='width:100%; height:190px;'. This works fine, but if I give absolute positioning to the body, it gets all messed up.
So I want to know whether there is a way to attach a div to bottom of a page regardless of positioning of the main container. Is this achievable only using css or javascript should be used?
You can set the bottom attribute to 0px.
Use the following style for the div.
<div style="position: absolute; bottom: 0px; height: 120px; width: 300px;background-color: blue">
I couldn't think of the right wording for this question, but here is my problem:
When users hit Ctrl+Plus to zoom in on my page, content seems to push each other around.
For example, I have a navigation div floating on its own on the top left corner of the page.
Then there is main content text that is centered in the page. When the user zooms in, the centered content quickly moves left towards the navigation and eventually starts wrapping around it and it looks awful.
Is there a high-level way that you can describe to me how to structure my page so that zooming keeps things stable and 'just zooms in' without distorting the original positioning?
This link from "A List Apart" covers some font sizing and fluid web development. It should give you some good direction of how to structure your page to adapt to changes in font sizes. You may also want to look into media queries because they allow you to apply styles based on certain characteristics of the browser or device.
How to keep code in center on zooming?
Center the code on zooming?
ANSWER:
< div id="wrapper"> Place this div tag outside the code < /div>
#wrapper
{
background-color: #F00;
width: 400px;//This width can be anything according to your need
margin-right: auto;//Note margin-right and left are allocated automatically
margin-left: auto;
}
Another Way
#wrapper
{
background-color: #F00;
width: 400px;
position:relative;
}
I have a website scrolling horizontally using this script:
http://tympanus.net/Tutorials/WebsiteScrolling/index.html
Sometimes with this build I end up with a vertical scrollbar because, depending on the user's resolution, the copy may run further down the visible portion of the page.
I have a bit of footer information that I want to scroll along with the page horizontally, but I want it to always be at the VERY bottom of the page if there is a scrollbar, not just the window. Using this CSS:
.footer { position: fixed; bottom: 10px; left: 100px; }
Doesn't do what I want because the footer will overlay the site's copy.
So I also tried something like this:
html, body { min-height: 900px; }
.footer { position: fixed; top: 880px; left: 100px; }
Which also didn't work because the information was still always pushed off the visible portion of the page.
So I'm looking for a solution to essentially let the footer information lay wherever it naturally falls on the page, but always fixed 100px from the left as the page scrolls horizontally.
Thanks for any help!
I'm not sure you can do this entirely with CSS. I would make a javascript (or jquery) function that detects the size of the content div (or body) and positions your footer div after it (with offset if you're using jquery, or by manipulating the top margin if not). Then you can use the .scroll method on the window to move the div's horizontal position when a user scrolls to the right.