Not sure if the title made sense, but I noticed in the wordpress 3.8.1 admin panel, If you resize your window to where the sidebar has menu items blocked from view, it is normal positioning, which allows the sidebar to scroll.
If all the items are visible, then the sidebar has fixed positioning so that only the content to the right of the sidebar will scroll.
Neat little effect.
I was thinking it requires jQuery to add a class or change css. Maybe if the last item in the sidebar is visible then add the class, else leave it alone.
Not sure how to actually code that though.
Can someone help out, maybe even a basic fiddle?
You can do this with simple CSS.
.div_name {
position:fixed;
}
check W3schools Position fixed property for tags
Related
I already have Sticky header nav in my project, however I need to have the sidenav (filter section) or Aside also show fixed on the left when the scroll occurs as there is a long list on the right side of the page. As I mentioned the header is already in FIXED position to top. How can I make the Aside or sidenav to stick along with the header, just beneath it. I am unable to do it via CSS and not sure how can I accomplish this using jquery.
Any help would be much appreciated.
Thanks in Advance..
Can you please provide us with your code with the css?
Basically what you can do is:
Create a container to have your sidebar and center section in with
overflow hidden and width to 100%.
Set the sidebar position as relative, with a provided width and
padding to the top so that the navbar does not overlap on it.
Set your main container (the element containing the list) width
position relative, this way it will display next to the sidebar, you
can add overflow auto to make sure that you get a scrollbar when you
have many list items.
There are several ways to solve your problem.
You can also use an Iframe but I wouldn't recommend it for responsive designs.
I'm editing a wordpress theme and I want the main content area to be larger. But when I enlarge it beyond the limits of the screen it does not scroll. And I know the most common cause of this problem is position: fixed, but I only found two cases of this in the code and when disabling both it doesn't fix the issue.
The original code makes a div with the id of "content" have a scrollbar, but I made the div much larger and so I want the scrollbar to appear and be back in the default spot like most pages have it.
Resources: Here is the original page for reference. (You can just inspect the code from there since I haven't made any edits to it yet anyway.)
http://themes.themolitor.com/wpzoom/2011/04/first-blog-post-title/
You page has been setup in such a way that, a javascript file is placing an inline style to the content, and giving a dynamic height depending on the screen size.
and the content id has a overflow auto, which gives a scroll bar when the content overflows outside the parent element.
So if you wan to have the scroll bar removed either do "overflow: hidden;" (this will hide the content which overflows unfortunately.
Or you will have to rearrange the whole page structure.
Your problem seems to be in http://themes.themolitor.com/wpzoom/wp-content/themes/wpzoom/style.css, where html and body are set to overflow:hidden. If the content extends past the end of the page, it will not scroll. You can change it to overflow:auto (auto adds a scroll bar when there's too much content to fit), or you can just get rid of the overflow property because auto is the default behavior.
overflow:scroll /* always show a scroll bar */
overflow:auto /* show a scroll bar when the content of a box is bigger than the box itself */
overflow:hidden /* never show a scroll bar */
I'm trying to avoid scrolling on the main content in mobile browsers when a sidebar menu is opened ° by adding a class to the main content with a 100% height, a hidden overflow and an absolute position, but the problem is if I scroll down and then open the menu I get automatically moved to the top of the page and don't stay on the position where I was before opening the sidebar. I can't figure out what's going wrong.
I tried some solutions like saving the position and then forcing the window to stay always at that place until the sidebar is closed, but I'm pretty sure there's a cleaner way to do it.
Anyone has a better idea?
Thank you very much.
° (I think the technique is known as "off canvas")
You must have put the sidebar at the top of your page, thats why it scrolls to top. To solve this, just use position:absolute;
I need your help, i want to create a dynamic fixed DIV
That means it a fixed div but it cant override header (or other div's above it) and footer (or other div's below it). Example when scroll on top it below other div but when scroll down enough it will be in top, and when scroll to bottom of pages it stand above other div. I don't know the key for this div is, so i call it "dynamic fixed div".
An example here: http://www.1stwebdesigner.com/wp-content/uploads/2010/07/index.html. I want to create a div like as "Select category" div.
Thanks!
You can use the css property "position: fixed;" to do it, and with Jquery you can do some effects interesting.
So, look this tutorial, I believe it'll help you.
http://www.sutanaryan.com/jquery/how-to-create-fixed-menu-when-scrolling-page-with-css-and-jquery/
When I take mouse over the Navigation menu links (About Us..), the page moves to left. Is that due to javascript?
link text
It's because of the scrollbar that appears at the browser window's right side. It seems to me that there is a design error causing the content to be much larger with the menu hovered ...
if you hover the menu, the page gets so long that scrollbars occur - and that causes the page to "move to left" (it stays in the center of your viewport, which is what it should do). to fix this, find out whats causing this overflow (the page isn't looking that long, i don't know where the scrollbars come from) or set overflow-y:scroll for your body, so there's always a scrollbar (which would be the bad "i don't know what else to do to fix this"-solution)
Try moving the UL dropdown elements away from the bottom of the page or set them to display:none until after you've absolutely positioned them at the top of the page. visibility:hidden does not take the elemtens out of the flow of the document but just hides them.
A better bet though would be to make them children of the <a> tags you already have, so they only need to be displayed rather than displayed and moved.