I want to use bootstrap affix in a similar way to "How to Format" on the right side of Ask Question page of stackoverflow.
I can make it affix to the viewport by adding a css .affix { top: 70px } and use class='affix' data-spy='affix' in html, but what if I want the affix element to be fixed to a parent element?
For example, if I have such html:
<div class='affix-container'>
<div class='left-panel'>
some form, including a textarea
</div>
<div class='right-panel affix' data-spy='affix'>
how to format
</div>
</div>
I'd like right-panel to be affixed only relative to affix-container, so when I scroll down, if affix-container is still in viewport, then affix right-panel, otherwise let right-panel scroll up.
Can I still do this if affix-container is resizable? ie. its size/height increases with the resize of textarea it contains?
If you want to track the left-panel's scroll movement, you need to use a scroll-spy with the affix. You'll need the body tag setup first.
<body data-spy="scroll" data-target="#myScrollspy" data-offset="200">
Here the offset will ensure that tracking only starts at 200 from the top depending on header size etc. The right-panel then gets id="myScrollspy" e.g.
<div class="hidden-xs col-sm-2" id="myScrollspy">
<div class="right-panel affix" data-spy="affix" data-offset-top="400">
</div>
</div>
The fixing of the element is fixed at 400 offset (useful if you have a header etc.). You can then change the position with css as you scroll from a certain point forward. I've added things that's from my code extract and can be used/ignored i.e. on xs screens I hide my scrollspy, otherwise it takes up 2 cols in the parent row.
.affix {
top: 100px;
}
Should work with resizable container, but I didn't test it.
Related
I have the below structure:
<div class="wrapper1">
<div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
<div class="right">some content here</div>
</div>
<div class="items">
<ul><li></li></ul>
</div>
The above layout is used for a responsive site. so on resizing the window or on page load on different devices the content in the right div should always remain of the same height as that of the left div.
Also, I have to append a link "more >>" responsively where the last character of the content in the right div ends.
I have used overflow hidden property for the right div and I am trying to give some height to the right div based on the window width using media queries. Have tried different things but since the text amount changes responsively it is becoming difficult to append more link to the last character.
Also, i tried using jquery/jscript to detect the height of the left div on page load so as to set the height of the right div same as that using .outerheight() property but on initial load of the page I am not able to get the height in pixels since the width of the image inside the left div is set to 100%.
Also, there are 2 main issues here,
1)I set the height of the left div same as that of the right div responsively. Here the extra content to be displayes in the right div should always be hidden.
2) append more link just where last last charcter of the last visible line of the content on the left div is responsively.
Could anyone please suggest some solution.
With flexbox the columns share the same height automatically, without any javascript.
.wrapper {
display: flex;
}
.left {
background: yellow;
flex: 1;
}
.right {
background: red;
flex: 1;
}
<div class="wrapper">
<div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
<div class="right">some content here</div>
</div>
I believe all your problem will be solved if and only if you use bootstrap css rules the grid system and furthermore make a class with specific height and assign it to the div . And more advice get familiar with media query in css3
Create a div with relative position for appending links and make it in the bottom of the container div
Every time that the scroll bar reaches the sticky menu it shifts the menu over a few pixels. If you scroll down slowly on my website and watch the menu you can see it.
I'm using the JQuery plugin stickUp to accomplish the sticky menu. I found that the only way I could get the menu to stick to the top without jumping to the left was by putting the "buttons" class inside of another class called "menu" and setting the width of "menu" to 100%. But that just resulted in the tiny little jump you can see now.
<body>
<div id="page1">
<div id="p1content">
<h id="Name">Travis Morenz</h>
<p>Testing & Testing</p>
</div>
<div class='menu'>
<div id='buttons'>
<div>Home</div>
<div>Projects</div>
<div>About</div>
</div>
</div>
</div>
<div id="page2">
<div class='behindmenu'></div>
</div>
I tried setting up a JFiddle to make it easier to view but the sticky menu doesn't work inside of it.
The code, however, is the same. Any help would be greatly appreciated.
In your site, when you scroll down .menu stuckMenu isStuck is getting style and got position:fixed and top:0 but you have to add left:0px then div wont move.
just add left:0px to .menu stuckMenu isStuck and it will work. Please let me know if it wont help or for more explanation.
UPDATED
When you scroll down then by jquery there is class added to .menu stuckmenu and it gives position:fixed and top:0 means fixing the div at one place so you should remove the left part too by using left:0 so it will be in center of screen.(top:0 and left:0). I will update the answer as soon as i will get more clarification.
OFFTOPIC
Your content of page 2 will hide the button but if you will hover then it will look like bugs so i have a suggestion that in .menu stuckMenu class add background:white and it will look great..hope it will help. :)
In this id #p1content you have used css which is not good..to center this column you should use margin-left:auto margin-right:auto with width:80% and you column will be responsive also. Never use fix width, its not good practise.
Concerning your question why it was moving: It received some additional style. A position left of 8px.
See screenshot.
This plugin seems to change the position from relative to fixed.
Moreover it adds top- and left-properties.
It gets moved since position gets changed to position: fixed; when you scroll down and it then ignores the margin of the body, making its own margin bigger.
CSS
body {
margin: 0;
}
I have following setup:
<div class="wrapper">
<div class="element" id="first"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
...
</div>
so wrapper is set to overflow-x: auto and content that overflows it is horizontally scrollable. #first div has fixed position and more styling applied, but essentially it is always visible and other divs scroll behind it, like this:
issue here is that I'm using drag and drop functionality which works fine, but once I try to drop stuff on a fixed div and if it has content behind it, the drag and drop happens to that content. Basically feels like I'm interacting with stuff behind fixed div even though it is in front. I know fixed elements are out of the flow and maybe this is whats causing it? But I can't figure out how to make content behind that div stay behind it.
Well... It maybe because fixed elements are out of the flow.
You can try setting the element with id first as absolute and giving it a high z-index value. A high value of z-index will make it stay on top of other elements.
So when others scroll it will remain at that position.
Try plaing with ay pointer-events: none; in CSS
I'm trying to build a blog site and I'm initially using the template on getbootstrap.com's examples.
Basically, I want the sidebar on the right, to be fixed, so that when you scroll through blog posts, the sidebar stays where it is, like the top navigation does.
I've tried using the affix plugin, but having issues keeping it in the same place.
<div class="col-sm-3 col-sm-offset-1 blog-sidebar" data-spy="affix" data-offset-top="100">
Here's a JSFiddle - http://jsfiddle.net/Sambolina/L3a7q/
First, split out your sidebar from your column- in my earlier answer, I missed that:
<div class="col-sm-3 col-sm-offset-1">
<div class="blog-sidebar" data-spy="affix" data-offset-top="130">
<!---content--->
</div>
</div>
When your sidebar gains the class affix, the css updates from position:relative to position:fixed, but you don't provide any CSS for the position of the sidebar once it is fixed. Now that your column isn't being affixed, you need to explicitly define the top positioning. To keep the width consistent, we'll also explicitly define it for both affixed and unaffixed states:
.blog-sidebar{
width: 200px;
}
.blog-sidebar.affix{
top: 40px;
padding-top: 15px; /*or add it into the top value, I'm just weird*/
width: 200px;
}
The only issue after that is handling how you'll deal with the column when it collapses- since it's affixed, the content will stay even after the column collapses. A good way to fix this is to add the class hidden-xs (and others if you change the column from sm) to hide this content, then create a new div as you want it to show up on small viewports and give it the class visible-xs. You can style this uniquely, which is probably a good idea since a navbar + nav + content on the smallest devices is probably too much.
For an example of all of this, see the Bootstrap docs which have a right affixed nav.
(edited per author's comments below)
I have a div that I want to always move such that it is stuck to the top of the page. Let's just say that I cannot use position: fixed;
I originally used $(document).scroll(function(){}) to move the div with the scrolling. But this makes the site extremely slow after 10 seconds of scrolling.
My current solution is to use setTimeOut() to prevent multiple calls. However, this causes a delay, and the div only sticks to the top of the page once I have stopped scrolling.
Is there a way to get the continuous smooth moving of the div without killing my speed?
EDIT:
I have the following code:
<div id="outerDiv">
<div class="div">
<div class="fixed"></div>
<div class="otherDivs"></div>
</div>
<div class="div">
<div class="fixed"></div>
<div class="otherDivs"></div>
</div>
</div>
So .outerDiv has a fixed width, and there are many .div, such that outerDiv has overflow-x: scroll. If I use position: fixed on .fixed, then they will not show up properly. I want each .div to be like a column, with the heading of each column to move down
How about using two different divs. One containing the fixed content, and one containing the content which should be scrollable?
So you don't scroll within the document itself but only within the second div?
Or... use position:fixed