I'm looking for ways to make this happen:
A nav bar that is put into a page normally and when it touches the top as I scroll, it fixes there.
You can take this in another way: it's like a fixed nav bar that was not put at the top at first.
It's something like this question where the guy was using js but I want a more easy solution.
I'm using bootstrap and is it possible to use pure css to do this?
If you are using bootstrap, why not just the "Affix" component that is built in?
To more properly answer your question though, no, there isn't a way to do this with CSS alone. Reason being is that CSS is not capable of monitoring scroll position. With javascript its as simple as adding a listener to scroll position of the window, and toggling a class that has a fixed position when it gets to "x" pixels.
Related
I am having trouble with the scrolling when I use a position:fixed inside of another position:fixed. The simplest way to demonstrate this issue is with this fiddle:
http://jsfiddle.net/xDDJb/
I want to be able to scroll with the mousewheel while having the mouse over the smaller fixed div. I have to keep .wrapper the way it is (aka I cannot remove the position:fixed).
The context is that I'm using Bootstrap 3 modals and I want to essentially create this layout in the modal. The BS .modal class uses position: fixed and creates the same construct as the example's .wrapper.
I would love any suggestions please!
One option could be to use jQuery Mousewheel to catch scroll events on your fixed div and then pass them through. Not elegant, but might do the trick.
I have a problem with css overflow property for twitter bootstrap dropdown component with submenus.
When setting max-height and overflow to auto the scrollbar appears in the list as it should, but submenus go inside the drop down list under horizontal scroll, which is not what I need.
Here is the example of this issue.
http://jsfiddle.net/ftMhv/1/
I've tried changing values overflow-x and overflow-y, but none of them worked well.
When using overflow in the matter you described it will hide all children within it. Unfortunately there really is no way around it.
Why do you need a scrolling navigation dropdown? Is it because it is too long?
I would suggest trying a columned approach if that is the case. Have <div>'s within an <li> that have float: left; and then place submenus within them.
Sorry, but I think this is the only answer to your issue.
Edit: You could use javascript and jquery to create a floating absolutely positioned container that displays at the coordinates of the user's mouse. That will probably get pretty hairy and complicated though.
I'm going to create an special floating menu like this site:
http://www.just-eat.co.uk/restaurants-toscana/menu
as you can see, Categories and Your Order menus float in screen so that their position is almost always the same, and they always stick to top of screen (of course after you scroll the page down), how can I create this effect in ASP.NET? I've set my menu style position property as fixed, but in this way, my menu always has the same position, I want my menus to stick to top of screen
Not sure if ASP.NET has such feature by default. Never seen something like that in it. But it could be done easily with CSS position:fixed placed on top most div of your menu block or using plugin like this, for instance. Please note that position:fixed may cause problems in old browsers
Hello Ali you must add stylesheet in order to float your menu, but you don't have property in order to float your menu basicaly
You can keep the position of the div to position:fixed.
By doing that its position will be relative to the position to browser window and it will appear to be fixed.
Here is Sample Fiddle
More on CSS Fixed Positioning.
i have made in my asp.net applictation a small div container, which is draggable (in this way: Make jQuery-ui draggable handle cover entire page).
I want to make clear, that the normal user knows instinctively, that he/she can drag this container around the page.
I have set the cursor via CSS to cursor: move;.
But with this solution the user only gains the knowledge while moving the mouse over the small container.
How can I make sure, the user knows from the beginning, that this small div is draggable?
You can set this kind of image on div which is draggable. This image will always visible so user can get to know easily this div is draggalbe and of course by the css you can put it center over the div. and image will type of png so it will not look ugly and you can apply transparency that hand image so contant of the div can visible even image is over the div.
and yes there are other suggestion also given by #Prabhavith and #Matt Lowe..you can also work around with that.
The only way I've seen this done that makes any sense to me is to have a faintly written message with the word "Drag" and arrows pointing through the four ordinals centered in the div.
Like the image in the linked question, you can make your draggable div look more like a traditional desktop window. Users are used to dragging around windows that have a title bar across the top and minimize,mazimize, and close buttons, and a border with an optional bevel. Approximating this style will help communicate draggability.
Likewise, having the border around the div grow darker or highlight will help communicate draggability as well.
You can go through this site http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/DragPanel/DragPanel.aspx
I'm trying to implement a design with a shrink-wrapped left bar and a fluid main panel, which will allow as many pictures to be shown as the window width will accommodate, without a horizontal scroll bar.
I'm having massive trouble doing this. When I float:left the control bar, the content of the main panel begins to flow around it. Floating the main panel as well solves this, but causes the content to be shrink-wrapped, meaning that the images tend to be lined up in a single column.
Is there any elegant solution to do this?
I've made a mockup of the problem here: http://jsfiddle.net/PYKwg/2/embedded/result/
Try this: http://jsfiddle.net/CXvRn/10/ It's all in the code:
I wrapped #main in #mainWrapper
I added padding-left 220px to #mainWrapper.
I added float:left to "#top .thing" and "#bottom .thing"
http://jsfiddle.net/CXvRn/29/
here is the most basic jquery version:
You have to set some constants such as the total horizontal padding and the horizontal margin for the #main. you could derive those using jQuery but if they are never going to change them you might as well set them your self and save some lines of code.
If you'd like to do it with jquery you can figure that out here: Padding or margin value in pixels as integer using jQuery
The solution is "overflow:auto" on the main-content section. This establishes a new frame of block flow, which content won't flow out of (under/behind the floated control section). Reference: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
See it in action here:
http://jsfiddle.net/PYKwg/3/embedded/result/
(Thanks Alex)