I'm having an issue where my left navigation arrow for a portfolio viewer I'm using is moving with the size of the window and I can't figure out how to contain it within my div and stay stationary. The plugin that I'm using is called "Portfoliojs"
Here is the link to the page that I'm having the issue on: http://bopratt.com/bopratt/test/
Any ideas?
An element with position: absolute is relative to the page, or the next highest relatively positioned element.
You can add position: relative to #bomain which will make the position: absolute in .gallery-arrow-right relative to that div instead of to the page (and not always stay left: x distance from the left edge of the page)
#bomain {
position: relative;
/* other stuff */
}
you will also need to adjust the css on .gallery-arrow-right (something like top: 0 and left: 870px)
Related
I need sidebar to scroll down as we scroll down and I cannot use CSS positions – fixed / sticky because the sidebar horizontal position needs to be consistent with the form on zoom in and zoom out and should work on both chrome and IE11, however I am using positon relative and absolute.
I tried putting logic to modify top property of sidebar (position: absolute) as we scroll down by calculating the position of form above the viewport using getBoundingClientRect() function, but the transition of sidebar from one position to another is not smooth and gives a bad user experience.
There needs to be some logic which can change the position of sidebar smoothly and bring it up/down aImage of sidebar with viewports we scroll up/down.
I have got his working with combination of relative and fixed positioning. position: relative when user scroll is less than 250px and if user scroll is greater than 250px the position property is changed to fixed with top: 150px without providing right/left property. The key to the solution is by not providing right/ left property which is causing horizontal position of the side bar to stay consistent with the position of form on zoom in/out by keeping horizontal position of sidebar relative to its own initial position.
Earlier, I was providing right property along with top with position: fixed. On zoom in, right: 50px property was causing sidebar to gradually move away from the Form and move closer to the right edge of the viewport and making it look weird.
As per the answer for (Position fixed without top and bottom) – “Using fixed position without setting top, left, .. will have the same behave as absolute position relative to its own initial position. But setting the top, left, ... will fix the position relative to the document or the page.”
//sidebar.js
handleSidebarScroll() {
$(document).scroll(function() {
let scrollTop = $(window).scrollTop;
let sidebar = $('.sidebar');
if(scrollTop < 250 ) {
If(sidebar.hasClass('sticky-sidebar-bottom')){
sidebar.removeClass('sticky-sidebar-bottom');
}
sidebar.addClass('sticky-sidebar-top');
}
else {
if(sidebar.hasClass('sticky-sidebar-top')){
sidebar.removeClass('sticky-sidebar-top');
}
sidebar.addClass('sticky-sidebar-bottom');
}
}
//SCSS
.sidebar-container{
position: relative;
}
.sidebar {
width: 200px;
height: 65vh;
border: 5px solid black;
&.sidebar-sticky-top{
position: absolute;
top: 50px;
}
&.sidebar-sticky-bottom{
position: fixed;
top: 150px;
}
}
For those who are new to scss – “&.sidebar-sticky-top” Is to select element which has both classes – “sidebar” and “sidebar-sticky-top” .
&. Is parent selector and refers to outside selector (“.sidebar” in this case )
I am creating a page I need help with, I have the HTML and CSS ready, all I want is to make the element come to the top after I scroll down a bit, and there have to be more than 5 screens than I need to come to top as I keep scrolling
I can't find a solution so need help
Here's a link of what I need, this is exactly what I want
https://www.blackrock.com/corporate#intro
CSS
The CSS property you need is position: sticky means that this element would be in it's respective relative position until you scroll down enough and it reached the top (if you set its top: 0) and would then "stick" to the top as if it instantly changed it's position to position: fixed. Enjoy
The following code could help you achieve your desired behavior:
.sticky-container {
position: sticky;
top: 0;
left: 0;
}
If it is a container that takes up the entire width then also add width: 100% and a certain fixed height in pixels to see the container.
If you want to have the element stay in a certain position in default when the user just entered the website you probably would need position: fixed instead of sticky. You could take a look at a similar solution for position fixed here with a demo
I create a big div (div1 in the Fig 1.1) and set it to position: absolute. This div is the content container of the page, and inside this div are all the other elements. My reason to do absolute this div is for remove the bounce on scroll in browser:
Remove bounce on scroll in browser solution
My problem, is if I have other absolute divs inside the big one. In the Fig 1.1 can see the div2 with position:absolute, and if the div1 is scrolling, the div2 conduct is like a fixed element. Div2 is only an example, I have a lot of absolute elements like Popovers that to be relative is not an option.
How can I say to div2 (in the Fig 1.1 example) that when div1 scrolls moves along with page scrolling?
Code example
html, body {
height: 100%;
overflow: hidden;
}
.div1 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
div2{
position: absolute;
}
Image Example (Fig 1.1)
Correct way
I know that exist a lot of related answers, but all of them is quite different to my question.
Related questions:
Absolute positioning inside absolute position
CSS: Absolute Element inside Absolute Element
I have other solution. To fix iPad overscroll I wrote a small script, that fixes "scroll bouncing" / "overscroll"
https://github.com/aiboy/PerfectScrollFix
First of all, you don't need to change layout drastically and use absolute div's. Second, scroll is remains to be "native".
There is two problems thou:
1) For now only horizontal overscroll fix is supported
2) Your content ( that will be scrolled ) should be wrapped in a single element (wrapper)
You can test this script on iPad: http://jsbin.com/usomob/4
Source code of Example http://jsbin.com/usomob/4/edit
I have what seemed like a simple issue but cant quite figure this one out. I am using bootstrap version 3 to create my base layout. I have a footer that needed to be at the bottom of the page so i made it position: absolute; bottom: 0; and worked fine if I zoom out. When the content start getting lengthy it creates the vertical scroll bar and when scrolling the DIV floats around instead of staying at the bottom.
I tried giving the container a position: relative; but dosent seem to do anything. Would anyone have any ideas?
Heres an example of my layout, if you resize the preview section to force the vertical scroll bar you will see that when you scroll the DIV floats around instead of staying in place.
https://jsfiddle.net/DTcHh/10301/
try with fixed
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
js fiddle example
non-fixed, see the below:
your problem is (from what I gather) the footer is floating dependent on the content and and you want it to stay put where you call it.
.footerElement {
// base styles all styles
display: inline-block; // add this, does as you imagine
}
"Displays an element as an inline-level block container. The inside of
this block is formatted as block-level box, and the element itself is
formatted as an inline-level box" -W3schools
scrollbar, see the below:
As for the element that has a scrollbar resolving.
.elementwithScrollbar {
// base styles all styles
overflow:hidden; // or use overflow-y:hidden; or x
}
fixed, see the below:
If you want it to be fixed; adding position: fixed; and the value coordinates should all you have to do there. (ie. position:fixed; and where you want it)
"Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page." -MDN
Using fixed only anchors it to the bottom of the screen regardless of which part of the page you are viewing. I think you want to have the footer at the bottom of the page rather than constantly sitting at the bottom of the screen.
To fix, amend your spelling mistake here:
.contrainer-fluid { <-- should be container
position: relative;
}
I'm currently coding a jQuery slideshow effect and need a bit of help.
I have all of the sideshow functionality working properly, my only problem is that I want to have my navigation arrows to be automatically positioned on either side of the slideshow box (960px, centered on the screen).
The end product should be something like Kriesi does here: http://www.kriesi.at/themes/upscale/
I've looked at his code, but can't quite figure it out. Any help would be appreciated!
Thanks!
I don't understand what you mean by "I can't quite figure out how to initially position them over the slideshow... If I do it in CSS, then it won't work on all screen resolutions."...?
If you position the arrows relative to the slideshow, there will be no issue. For example to place them at the top left and top right corners, include the following in your styles:
#slideshowcontainer{
width: 960px;
height: 400px;
position: relative;
}
#leftarrow{
position: absolute;
top: 0px;
left: -40px; /* position the arrow 40px to the left of the slideshow */
}
#rightarrow{
position: absolute;
top: 0px;
right: -40px; /* position the arrow 40px to the right of the slideshow */
}
Obviously you will need to adjust the values to suit, depending on the size of your arrows and where you want them etc
Arrows are situated in . That block is positioned as absolute with top value as 50% - 12px (margin-top: -12px);
Then, there is a list which contains images and other data and affect height of it's parent .
So, basically, in the code, when user clicks on an arrow, jQUery probabaly uses outerHeight() to get height of li elements in and then uses animate() to change height of the which affects height of the and that in it's turn smoothly changes position of the arrows.
Personally, i think it's a bad designing when arrows change it's position. Very annoying when you have to move mouse up and down every time you want to see the next slide.