I can't figure this out for the life of me. On this page, if the browser height is too small, you won't be able to see the full form. How do I add a scroll bar to the popup so that people with small screen sizes will still be able to see the entire form from top to bottom?
http://kinkarso.com/rayku/profile.html
Thanks!
You change position: fixed; to position: relative; (or absolute if you want it to be overlaid something else) on the .filter-popup class
Your problem is the CSS position attribute for your popup (using filter_popup class). If you used position: fixed, the containing element will not grow to accommodate it. Change it to position: absolute instead and the scroll bar will appear.
To solve this you should use overflow:scroll which is the css way of creating scroll bars.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
Related
I'm new to jQuery/Javascript and am trying to animate a DIV off-screen.
The problem is after it animates to a left: 125% which is off-screen, the webpage just extends. This means the user could scroll to the right and see where it went.
How can I create a fixed page size or something like this?
Thanks!
Give overflow: hidden in CSS:
body {overflow-x: hidden;}
You may need to revert it back after the animation is done, so as not to obstruct the contents scrolling.
I would like to make a div that is fixed vertically but after a point (a coordinate for instance) he stops following and stays where he is.
thanks for answers!!
Based on your edited question and question tags, I assume you want to make a fixed position div to stay at a particular position even when you are scrolling.
(And maybe you have done it already but it does not work, if that's the case please provide some related code)
This can be done by setting the div's position and the top/right/bottom/left in css.
#my_div{
position: fixed;
top: 0px;
left: 0px;
}
This will set your div fixed on the window's top-left corner no matter what.
Here's a short but clear tutorial on css positioning, have a look if you have some time :)
Learn CSS Positioning in Ten Steps
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();
What I'm saying is, I have some extremely long pages on my website, which can make it annoying if my visitors need to scroll to the top of the page to be able to navigate to another page.
I'm not quite sure what I would call this but any Google search that contains the words 'DIV' and 'float' come up with completely unrelated results...
What I'm looking to do is create a DIV that stays at the top of the Screen (not to be confused with the page) so that if the user is at the bottom of the page, they can still see the navigation bar just floating at the top of the screen. What I can think of is to position the DIV relative to the position of the screen but I don't know how to code this.
I'm happy to use JavaScript (preferably in the form of jQuery), but if you know how to do this using CSS, I would favour your response.
This might help: I know a little bit of jQuery and JavaScript and I know a good deal of CSS and HTML.
Thanks in advance.
fixed position has exactly this purpose and this is pure CSS:
div {
position: fixed;
top: 0;
}
Try this:
<div style="position: fixed;"></div>
You should be able to use CSS Fixed Positioning
#eleID {
position: fixed;
top: 0;
}
On many sites now, say you have a toolbar/table-header that is midway in the page.
Once you start scrolling, you can't see the header or toolbar anymore so you can't perform actions on any rows you may have selected, or you can't see the name's of the headers of the columns.
Many sites do this now, which is great, when you start to scroll the toolbar/header is fixed at the top of the browser. This doesn't happend right away, only when you scroll down to the point where the header/toolbar would normally not be visible.
How can I do this? Is there a name for this functionality?
Gmail has this, if you scroll down when reading an email, the toolbar at the top is fixed at the top so you can label/move/spam the email.
Take a look at jQuery Waypoints - Sticky elements, should be what you're looking for.
Use this css:
.static{
position:fixed;
}
And then, put a class="static" to your header element.
Hope this helps. Cheers
You don't need Javascript to solve this problem — don't make it harder on yourself. Using fixed positioning forces the header to "hover" above your content, and when you scroll, remain at the top of your screen, not at the top of the page. You can use this CSS to make your header fixed.
.header {
position: fixed;
}
Make sure you assign the class "header" to your div. For design reasons, I'd suggest keeping your header at the very top of the screen and stretching all the way across. You can use this CSS to do so.
.header {
top: 0px;
left: 0px;
width: 100%;
}
Technically, you don't need to specify "top" or "left" positioning, but it ensures you don't have anything to go wrong if you do decide to change something like that later. You can take a look at other types of positioning at this site.