I just started using the Wookmark script and it's making my Tumblr theme overflow by also scrolling to the left when it should scroll vertically. This is what I have for now.
http://lt-neon.tumblr.com/
And the code is on this site.
http://pastebin.com/aZTpxX8C
Is there anyway I can solve this so that way my Tumblr theme scrolls vertically instead of horizontally?
Just to clarify, this issue isn't related to Wookmark. There are two elements on your page that are pushing the page width and creating the scroll.
The first is div#search. Remove left: 770px replace with float: right.
The second is #content. Again if you remove left: 150px the scroll disappears.
I am not 100% sure why your using left: to position elements, but this may be helpful: http://alistapart.com/article/css-positioning-101
Related
Since adding a slide-in menu to my web page the rest of the page doesn't seem to be able to scroll to remaining content at the bottom of the page? This is more noticeable if you resize the browser to make the height smaller.
http://handmade-nation.com/dev/v3/shop.html
I think the reason is down to the fixed position and 100% height on the #right div but if this is removed it knocks out the menu so I need help working around this is possible?
Thanks!
Add overflow:auto in your #right it solved the issue for me in my browser.
I've got your stereotypical two column (1 content, 1 sidebar) layout with each column floated opposites and all that. But I need my sidebar to scroll with the page. My first instinct was to use position:fixed, not realizing it would mess up my floats. So I'm not really sure what to do. I'd rather not absolute position the two columns if I can avoid it. This website is more or less completely coded and I only found out about the need for the sidebar to scroll in the last leg of the process. So it's kind of a PITA to do too much to it.
So essentially I need a way to make a floated DIV to act as though it's under the affects of position:fixed
My thought was ideally maybe a javascript/jQuery solution that just latches onto the div and makes magic happen? But I'm open to a CSS solution if it's a quick/easy one.
I'm guessing that your problem with making the sidebar position: fixed is that it takes it out of the flow, so your main content shifts over to the left, under the sidebar. If that's a correct interpretation, then add margin-left to the main content with the same width as the sidebar, e.g.:
.sidebar {
position: fixed;
width: 200px;
}
.content {
margin-left: 200px;
}
With only two columns, there's no need to float the main content. Adjust as needed for your particular situation (e.g. change units to em or whatever).
On my site I have the Problem that when I´m coming from the Imprint or How-to-find-us Site and I click on service or contact, the scrollTop doesn´t work correktly.
http://wicker-schuetz.de/en/
thanks
It's doing that because when you get to that point on the page, there's no more room for the page to scroll up any further; because your footer is kind of stuck to the bottom of the page.
You need to add some padding to the bottom of your footer to allow some extra space for your page to scroll up. You can do that by either adding a line to your css:
#footer { padding-bottom: 40%; }
or by adding a line to your javascript file:
document.getElementById("footer").style.paddingBottom="40%";
Either one should work, but If you want to dynamically adjust the padding on the bottom of the footer, so that the padding is just right, based upon the screen size, you might want to take a look at javascript's window onresize event and adjust the padding accordingly. Or you could probably just use CSS3 media queries.
This is the code I have
http://jsfiddle.net/qhoc/KUYeJ/3/
Here is what I am trying to do (requirements):
.left has known fixed width of 100px
.right must be position:fixed because I want it to stay still regardless of the left content. It will have a bunch of images in Pinterest style using Wookmark
http://www.wookmark.com/jquery-plugin
.right needs to scroll independently using some scrollbar plugin. I tried all below and none works: no scrollbar.
http://www.baijs.nl/tinyscrollbar/
https://github.com/jamesflorentino/nanoScrollerJS
https://github.com/rochal/jQuery-slimScroll
I was thinking it's because the usage of position:fixed causing it to not have overflow scroll. But I tried to adjust it in css and it still doesn't show scroll.
I am stuck at this point and would like to find out how to fix this. The following are negotiable in term of requirements.
If I have to set a dynamic width in .right, that is OK. I think I can use jQuery to detect a change in window size. Because right now, it is expanding all the way as right:0
If both .left and .right have to use the artificial scrollbar, that's OK too. Although ideally the .left one has browser default scrollbar (just like Facebook today: imagine the .left is Facebook Feed and .right is the Chat Panel)
If I need to add more parent elements, I am OK too.
Really appreciate the help!
I ended up using slimScroll but the trick is to change the html structure and where to apply the plugin.
This is the structure:
.scrollable
.photo-thumbs
%ul
%li
Here is how to apply the plugin:
$('.scrollable').slimScroll();
$('.photo-thumbs ul li').wookmark();
I'm using the scrollto jquery plugin (http://trevordavis.net/blog/jquery-one-page-navigation-plugin).
It's a single-page website that scrolls horizontally. But there is also a page with larger content, so that page scrolls vertically. As you can see in this example: http://www.seegermattijs.be/!/ When you go from 'projecten' to 'seeger', the vertical scrollbar also slides, and this is not what I want (if you can't see the scrollbar, resize your browserscreen).
Can anybody help me out?
Thanks a lot!
Put the overflow-x: hidden;overflow-y: auto; to the wrapper, not to the child elements.