this is my code:
Link to Codepen
How do I make the website stop scrolling down where the content actually ends?
overflow-y:hidden;
in body element, it won't work because it will not give me scroll the page at all. but I need to scroll it down where my content ends.
How can I do it or prevent it in the most simple way except using js or bootstrap?
The problem happening because every new element goes lower and lower.
Thank you for help !
It happens because many elements has position:relative. Position relative saves place where element should be rendered by default.
You need change html structure and css.
Example: codepen
I'm using bootstrap. I want a div element to move as I scroll the page downwards. How do I accomplish this please? For instance, I want the div element to follow me downwards as I scroll downwards and still maintain its position
This can accomplished with functionality jQuery plugin.
See more on the API call here
This jQuery plugin is used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.
Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down past the target position, the element will be restored to its original position on the page.
Using CSS, you can do it with the position attribute.
div{
position: fixed;
}
I have designed a simple website. The only thing left is to make a small box on the left. But I want to be always visible even when I scroll down. It's use will be something like a small ad. ![floating box][1]
Can you post an example or two? what css is needed for this? (if it's needed)
unfortunately I can't post any images because of I am a new user (I am not allowed to.. and this kinda frustrating)
But I will post an image as soon as possible.
You should apply position: fixed to this box.
Fixed Positioning
An element with fixed position is positioned relative to the browser
window.
It will not move even if the window is scrolled.
Here's a sample: http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed
You can read more about CSS positioning here: http://www.w3schools.com/css/css_positioning.asp
Here's a jsFiddle that I baked for your that shows how you can get this working: http://jsfiddle.net/leniel/8ub7s/2/
You can see that even when you scroll, the title is still visible and if you hover it, the ad box will show. Just adapt the CSS to your needs as you want it floated to the left. :)
I am doing a popup on a clients site for their new restaurant location. The base site is kind of a cookie cutter type site, and very messy (I'm not sure if I should attribute this to the problem). Everything was going fine until I added some divs that were positioned relatively and had width and height to the absolute div "pop-up". Now, the popup pushes the base site down, and the popup goes behind (it has a z-index of 10?). Here is the brand new css:
http://addproxy.net/sites/testing_space/css/style.css
and the site is down a level:
http://addproxy.net/sites/testing_space/
And a mockup of the desired effect (disregard the backslashes, hit max of href):
//http://addproxy.net/sites/testing_space/popup-mockup.jpg
The divs that seemed to trigger the problem were the .coupon class
Any help will be greatly appreciated!
You placed the original content inside of your new div's.
To make it look like your image that would be the id="coupons" div. Just so we're clear it's the one that starts like this:
<div id="coupons">
<div class="coupon" style="background:url(images/bg1.png);">
You need to move that div (and all it's contents) to just after the end tag of the id="popup" div.
I have a scrollable area that contains popup menus. Conceptually, something like this:
<div style="overflow:auto; width:100px; height:100px">
... content here that's big enough to trigger scrollbars...
<div>
Click here
<div style="position:relative">
<div id="popup"
style="display:none; position:absolute; width:150px; height:150px">
... more content. This div gets shown and hidden by jquery on click events.
</div>
</div>
</div>
</div>
The problem is that when the popup menu pops up, it is also contained within the scrolling div, and doesn't show up outside the 100x100 pixel scrollable area no matter how high I make the z-index. I realize of course that in a sense that's exactly what I asked for when I told the outer div to be overflow:auto in the first place. But for my use case it isn't what I want - I want the popup menu to be "over the top" and able to extend outside the scrollable area, while still staying in the right place, which is to say, directly underneath the "Click here" link. Even though the "Click here" link can move around as the container is scrolled.
I also realize that there are some complicated workarounds I could employ, like putting the popup entirely outside the scrollable div and using javascript to position it. And then I'd need to react to scroll events to reposition it as the content is scrolled, etc. Quite apart from needing to write lots of code to re-implement what the "position:relative/position:absolute" gave me for free, that'd also require quite a bit of refactoring of my own code, so I'd rather avoid it.
I'm wondering if there's some simple trick I can apply to my inner div to tell it to disregard its container's "overflow" property, or, failing that, a handy jquery script that will implement the complicated stuff for me behind the scenes so I just need to call it to get the effect I'm after.
I'd say that it's not possible to do that without using JS to calculate the position of the link and then display the popup with a position:fixed..
The problem is that your popup is inside a div with overflow:auto and everything inside that div will affect the scroll, so to show the popup you'll need to take it outside that div, and the only way i know to do that is by using the position:fixed... (or maybe using position:absolute on the popup, and a wrapper div with position:relative that contains the text and the popups)
so i'll propose 3 solutions:
put the popup outside the div with scroll, and when the user clicks
on the link, display the popup
calculate the exact position of the link (x,y) and display the popup using position:fixed and the coordinates
use a nice and always-easy-to-use "message box" (e.g. http://csscody.com/demo/wp-content/demo/popup/demo.htm) I know that this is not exactly what you wanted, but.. i ran out of ideas =D
I hope this helps
Displaying a popup inside a of a div with "overflow: auto", "overflow: scroll" or "overflow: hidden" will always generate this kind of issues. By rule, an element child can't be displayed beyond the parent's borders in all these cases because the overflow property makes precisely that. Using "position: fixed" to the popup will solve your issue BUT if you scroll down you'll see how the popup is displayed in the old position, previous to the scroll event. To solve this you can use JQuery, as follows:
$(".your-popup-PARENT-class").live( {
mouseenter: function(event) {
event.stopPropagation();
var position = $(this).offset();
$(this).find(".your-popup-class").css("top", (position.top + 30) );
$(this).find(".your-popup-class").css("left", position.left);
$(this).find(".your-popup-class").css("display", "inherit");
},
mouseleave: function(event) {
event.stopPropagation();
$(this).find(".your-popup-class").css("display", "none");
}
});
This code segment finds your popup parent element on the DOM tree, saves the current position and display the popup in the same position of the parent. As you can see, you can add or remove needed pixels, (bold code in previous CSS top definition).
Hopefully, this will be hepful for someone else with this kind of issue.
Kind regards!
I'm not sure what the effect you're going for is, but if you remove the popup's container, then the popup will show up outside of the scrollable div.
<div style="overflow:auto; width:100px; height:100px">
... content here that's big enough to trigger scrollbars...
<div id="popup"
style="display:none; position:absolute; width:150px; height:150px">
... more content. This div gets shown and hidden by jquery on click events.
</div>
</div>
I don't have an answer to this but if you ever found a good answer I'd love to hear about it. I have a very similar issue (I've a list of options for the user to select to modify the item in the scrolling section. It doesn't look so good if I'm near the bottom of the list.