I have a div (RightSide) on the far right side of my web page that sits just underneath another div (TopBanner). The TopBanner div maintains its exact position at the top of the screen even when user scrolls down. Exactly what I want. But I also want RightSide div (underneath TopBanner) to stay exactly where it is even when user scrolls down.
I have achieved this about 80% but it behaves strangely. When you begin to scroll down, RightSide begins to move up the page until it starts being obscured by TopBanner (goes behind it), and then suddenly it pops back down to its fixed position, and stays there for the remainder of scrolling. Here's the jquery that does the "popping back down":
var stickerTop = parseInt($('#RightSide').offset().top);
$(window).scroll(function () {
$("#RightSide").css((parseInt($(window).scrollTop()) + parseInt($("#RightSide").css('margin-top')) > stickerTop) ? {
position: 'fixed',
top: '0px'
} : {
position: 'relative'
});
});
It's the initial behavior of RightSide moving up the page for a hundred pixels or so before it pops back to its correct position that is driving my boss and our users crazy. I have experimented with changing "top: '0px'" to various values, but that only makes things worse.
It seems to me that the jquery that "re-anchors" RightSide doesn't get invoked until I've scrolled a hundred pixels or so, and then suddenly it moves the div down and keeps it in the right place after that.
Summary: I never want RightSide to move up or down, even while the user is dragging the vertical scrollbar (scrolling).
How can this be achieved? (I really don't want to use an iframe for this.) Thanks.
How about packing these two divs into one with fixed position? Something like this?
<div id="StickToTop">
<div id="TopBanner">
...
</div>
...
<div id="RightSide">
...
</div>
</div>
And CSS:
#StickToTop {
position: fixed;
top: 0px;
}
#TopBanner {
float: left;
...
}
#RightSide {
float: right;
...
}
Quick preview: http://jsfiddle.net/k5xH4/3/
Related
Currently on my single page site when you click on the Bootstrap navbar menu items it takes you to the section of the page with that div #ID. However, naturally because the top of the navbar lines up with the top of the new section my content is overlapped by the width of the navbar (80px or 50px when collapsed).
Screenshot of issue:
"Ready to book" heading is actually centered in the middle of that div but overlapped by 80px of navbar.
Screenshot showing top of page:
The issue is that I do not wish for the navbar to overlap the content in the section I have linked to. Put in other words, I would like the top of bottom of the navbar to line up with the top of the new section div.
Surely this can be handled using some JS to offset the navbar up by the height of the the navbar?
I have had a suggestion to use CSS to add padding into the top of section but this adds an extra 80px of padding that I don't want, when normally scrolling the page.
Okay so I found two solution to this finally using JS and CSS
here.
My preference is for this CSS solution:
#id:before {
display: block;
content: " ";
margin-top: -80px;
height: 80px;
visibility: hidden;
}
Obviously, replace ID with the ID of the anchor.
The actual JS snippet solution:
var shiftWindow = function() { scrollBy(0, -50) };
window.addEventListener("hashchange", shiftWindow);
function load() { if (window.location.hash) shiftWindow(); }
However, it is still a bit clunky as you can actually see the the browser scroll to the anchor point and then back up by the scrollBy offset amount of 80px.
I am not sure if this problem has been solved yet, but I had the same problem and adding the appropriate heading worked (by appropriate padding I mean the height of your navbar element).
For example:
#id { padding:50px }
I am using a div that slides out when you click on it.
Here are some images of what I am trying to achieve:
This is the Div, collapsed by default
This is the Div after it is slid out (highlighted)
This is what happens after screen size is changed. The clickable div is present behind content Which I wish to avoid.
My Div's CSS:
.sliderDiv {
z-index: -10;
position: relative;
left: 200px;
width: 240px;
}
I use this command to slide it out on click:
slideItOut:function(){
var divsize=$(".sliderDiv").offset().left-150;
if(divsize>100){
$(".sliderDiv").animate({
"left":"-=194px"
},"slow");
}
else{
$(".sliderDiv").animate({
"left":"+=194px"
},"slow");
}
}
The problem is when you resize, it is not responsive at all and the div actually hides behind other content. Maybe this method is not supposed to be responsive.
Is there a way to make the same "slider" responsive or atleast hold its position while the screen size is changed?
I want to know of any way in which I could resize my window or screen and the div remains in same area as the 1st two images.
Also, this is being implemented in a modal. So its not exactly in a fixed area of the screen.
It won't solve without your full source code, I think. You should give its source code or put somewhere. Then, I try to fix. Or, I can offer optimum way
This is a strange bug i'm facing, i don't really understand the problem so forgive me for the obscure title.
The problem is I'm developing a SPA style site and i want the content to slide in from the right (when the buttons at the bottom are clicked)
I thought this would be easy, but for some reason it is easy to achieve from the left, using the example below
.page {
right: 100%;}
.page.active {
right: 0; }
https://jsfiddle.net/pphfstos/3/
and less ideally to slide the full width across like this
.page {
left: -100%;}
.page.active {
left: 0; }
https://jsfiddle.net/pphfstos/4/
But when i try to create the same effect as the first example but from the right it not only doesn't work but totally seems to destroy the page
.page {
right: -100%;}
.page.active {
right: 0; }
https://jsfiddle.net/pphfstos/5/
There is other code involved as you can see in the fiddle, but these are the only things that are different between the 3 examples
Can anyone explain what is happening and how to fix it?
Content you position outside of the viewport to the left is actually hidden, and can’t be reached via scrolling.
Content you position outside of the viewport to the right however “extends” the page in that direction, and can be scrolled to.
Remove the overflow-x: hidden from html/body in your first and third fiddle, and you see what I mean – in the first one, the content positioned to the left is hidden, and no scrollbar appears; in your third fiddle however you do get a scrollbar, and the content positioned to the right can be reached via scrolling, moving the part of your page that is initially visible to the left while you’re doing so.
Now, setting overflow-x: hidden removes the ability to scroll using the mouse; but the viewport can still be “shifted” to display that content, for example by navigating to an anchor – and that is what your links are doing. (But because this is an “instant jump” and not smooth scrolling, you don’t see your initially visible content move away, it is just gone instantly.)
So you simply need to suppress the default action of your anchor links in your click event handler:
mainNavButton.click(function (e) {
e.preventDefault(); // prevent event default action
// … rest of your code
– and the effect of the page ”jumping” to the anchor position is gone.
https://jsfiddle.net/pphfstos/6/
html:
<div class="div_fixed"></div>
<div class="other_content">
content goes here
</div>
css:
.div_fixed{
position:fixed;
height:40px;
}
.other_content{
height:200px;
}
The div_fixed will remain fixed at the top position of the page.
But as the page scrolls up, the content of the div other_content will vanish just at the lower edge of the div div_fixed .
In the case of scrolling down the invisible content of other_content will begin to be visible from the lower edge of the div_fixed
How to achieve that ?
EDIT: no scroll bar should appear for any div
Use overflow: hidden to get rid of scrollbars
Is this what you're looking for? http://jsfiddle.net/BCRPa/
I've taken your HTML/CSS and added a bit on a jsFiddle - I think in order to achieve the effect you're looking for, you just need to make your content actually tall enough to be scrollable. At 200px high and one line of text, nothing is going to scroll.
So I made your other_content div taller, and then added a top: 0 to your .div_fixed selector, to keep it stuck to the top of the screen, and a margin-top: 40px to the .other_content div in order to have it start below the floating div.
If you want it to be a navbar-type thing, you can of course add a width: 100% to the .div_fixed.
All of this should transfer into a container div (with position: relative) fairly easily as well if you want, although you may have to re-position the fixed div.
I've been working on my new portfolio/website and decided to go for a design that is basically one big index page that scrolls horizontally to show the different sections and vertically to show the content of the sections. Both the container and the boxed inside have a fixed width. The container is positioned relative and the boxes inside are floated left and positioned relative.
My question now is - how do I make it so that, regardless of the size of the browser window the user has when opening the website and even when re-sizing, the first box appears centered horizontally in the browser window AND without revealing the content that is on its right (content to which the user can scroll horizontally using buttons)?
The inspiration for my website came from this website http://www.cosstores.com/
I've inspected the code and I believe they are doing it using JavaScript and negative margins; but my Javascript knowledge is quite basic and I don't really understand how these negative margins are implemented effectively.
Would appreciate it if someone could explain how it works for the COS website or even come up with an easier alternative a noobie like me could use.
Thank you and please feel free to ask me to post anything else you think could help understand the problem better!
This is really quite simple, don't you worry. See it in action!
You'll need to work on a grid system. (You can use different-sized columns, but it's simpler if everything's nice and square.) Create a container div and a bunch of child "box" divs in your HTML:
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br />
<div class="box"></div>
<div class="box "></div>
<div class="box"></div>
<div class="box"></div>
</div>
Use <br /> to start a new row. Otherwise, rows will extend infinitely. The container div is exactly the height and width of one box, so it will only show one box at a time. But you can scroll, obviously.
Annotated CSS below:
#container {
font-size: 0; /* remove gaps between boxes */
height: 400px; /* show one box at a time */
margin: 0 auto; /* center horizontally */
overflow: scroll; /* show scroll bars */
width: 400px; /* show one box at a time */
white-space: nowrap; /* let boxes continue horizontally until manually <br />'d */
}
.box {
display: inline-block; /* stack up left to right */
font-size: 14px; /* undo font-size from parent so you can actually see text */
height: 400px;
vertical-align: top; /* line up tops of boxes within row */
width: 400px;
}
Then, to scroll to a location with Javascript:
$("#container").animate({ scrollTop: 400, scrollLeft: 800 }, "slow"); //with animation
$("#container").scrollTop(400).scrollLeft(800); //without animation
You'll need jQuery to use that code. Well worth it, since it hides browser inconsistencies in scrolling with Javascript.
If you want to use the browser's scrollbars, you'll need to use the body as your container. It's trickier, because you don't have a specified width and height. There is no way to hide elements (for sure) from every user—some have truly massive screen resolutions.
Basically, add a margin on each box so you get some space around it. With some quick JS calculations, you can figure out the location of each box and center it on screen. See updated fiddle.
Here's the relevant JS for anyone interested:
$("#scroll").click(function() { scrollCenter("#target"); });
scrollCenter("#home", 0);
function scrollCenter(target, duration) {
if (duration == undefined) duration = "slow";
target = $(target);
var offset = target.offset();
var top = offset.top - ($(window).height() - target.height()) / 2;
var left = offset.left - ($(window).width() - target.width()) / 2;
$("html, body").animate({ scrollTop: top, scrollLeft: left }, duration);
}
Run that OnDOMReady. The call to scrollCenter("#home", 0) forces the page to center the first box on load. You shouldn't even notice the jump.
Happy coding!
you should use the jQuery plugin scrollTo
http://archive.plugins.jquery.com/project/ScrollTo
Centering a div tag on the screen is easy. Set the margin property in it's css class to this:
margin:0px auto;
As for the rest of your question, this is a case for jQuery (in my opinion). Take a look at this link:
http://addyosmani.com/blog/building-spas-jquerys-best-friends/
And also google jQuery tutorials (you need to learn the framework first) and then, more specifically, "single-page sites" and "jQuery Paralax".
Good Luck!