Bootstrap blog fixed sidebar issue - javascript

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)

Related

bootstrap affix how to fix it to a parent element

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.

JQuery Issue: Sticky menu shifts to the right when it sticks

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;
}

Strategy for dynamically changing the position of a footer using CSS in ExpressionEngine

so using ExpressionEngine, I can generate a lot of webpages using the same template with different content. My problem is that I can't get the footer to appear where I want it to appear: at the bottom of the background image for each separate webpage.
For example, say that one of my pages is about dogs and the other is about cats. I love dogs so I write two paragraphs about dogs while only writing one paragraph about cats. I would like for both the background image to grow and the footer to be relatively positioned at the bottom of the background image. I have tried messing with both relative and absolute positioning in css, but the minute that I get it right for the "dog" page, it screws up the format for the "cat" page. I have also tried to adjust the height of the background image.
Am I missing something? Maybe there is an easier way to position an object relative to another object in css that I am not aware of? Thanks in advance.
As I previously mentioned, this does NOT achieve the result that I would like:
#landing_details {
position: relative;
bottom: -20px;
left: 40px;
height: 900px;
}
#belowTitle {
position: relative;
bottom: 25px;
}
#landingBodyCopy {
width: 400px;
position: relative;
bottom: -50px;
}
#landing_footer {
position: relative;
left: 120px;
bottom: -105px;
}
These are both nested within a div id="wrapper" which I never reference in my css. The landing details is what changes per entry. Also, the landing_footer div is kept within the landing_details div.
UPDATE:
So the part that I highlighted in red represents the space that I would like to be eliminated from the page.
UPDATE: The basic html layout is as follows
{exp:channel:entries channel="landing_pages" url_title="{segment_2}" sort="asc" disable="categories|pagination"}
<div id="wrapper">
<link rel="stylesheet" type="text/css" media="all" href="{stylesheet='in-store-analytics/LandingBodyStyle'}" />
<div id="landing_details">
<h3 class="LandingHeader"> {landing_page_header} </h3>
<div id="belowTitle">
<h4 class="LandingSubTitle"> {landing_page_sub_title} </h4>
<div id="landingBodyCopy">
<div class="landingBodyCopyText"> {landing_body_copy} </div>
</div>
<div id="landing_footer">
{embed="embed/footer"}
</div> <!-- End of landing footer>
</div> <!--- End of below title-->
</div> <!-- End of the landing details -->
</div> <!-- END div wrapper -->
{/exp:channel:entries}
Thanks again and any help on this matter would be greatly appreciated.
If you do not absolutely position your footer, its default position value will be static, which means that it will naturally appear below ("at the bottom of", like you asked for) any statically or relatively positioned preceding elements, however many there may be, and however big they are.
As for the background image growing according to content length, any div whose height is not explicitly set will expand according to the size of its content. Therefore your two-paragraph content div about dogs will be larger than the one-paragraph page about cats. If there is a background image on the content div, the div will act as a window displaying a portion of the background depending on its size. More content -> bigger content div -> more of the background image displayed. This is possibly not what you mean by having the background image "grow", but it does effectively grow.
If you'd like to perform some kind of dynamic scaling on the bg image, you should be more specific about how you want that to work, since I'd only be guessing at your intent. As well, it would help people answer you if you can provide a barebones version of your rendered pages using jsFiddle or jsbin. Isolate the part of the layout that you want help with and mock it up.

Fixing the position of a div on webpage

I have a div whose position has been fixed. Everything is fine till the window is re-sized. On re-size, when we scroll to the rightmost part of the webpage, the fixed div still remains at the left-most end of screen. I wish it to scroll left along with the window, but not scroll down along with the window.
If I am unclear in expressing my doubt. You can have a live demo here.
Search for any product say Apple Ipod Touch there. Once the results are displayed , resize window and scroll to rightmost part .
Can anyone suggest some CSS or Javascript to resolve the same.
Thanks !
I would restructure your layout and remove position fixed. For example something like this. Obviously this isn't exactly like your code. But the concept is the same. If you have your div with the control inside of the same container as the results and the history, it should then move with it.
#wrapper {
width:960px;
margin:0 auto 0 auto;
}
#left-col,
#right-col {
width:100px;
float:left;
}
#mid-col {
width:710px;
float:left;
}
<!-- holds your column containers -->
<div id="wrapper">
<!-- your control -->
<div id="left-col">
</div>
<!-- your search results -->
<div id="mid-col">
</div>
<!-- your history -->
<div id="right-col">
</div>
</div>
Either use CSS Media Queries or Javascript. A quick way is on Jquery $(window).resize method.
I think you just need to remove
position: fixed from #completeSlider
at least that worked for me on chrome.
EDIT:
then I'd say you need to use JQuery to handle this. You can't have both a fixed positioning and still relative to other elements. Still remove position: fixed as mentioned above and add some JQuery magic like follows:
$(window).scroll(function() {
$('#completeSlider').offset({ top: $(window).scrollTop(), left: 0});
});
Seems like the standard $ for jQuery is reserved for some other function on your page... try this:
jQuery(window).scroll(function() {
jQuery('#completeSlider').offset({ top: jQuery(window).scrollTop(), left: 0});
});

How to set up the browser scrollbar to scroll part of a page?

I've seen this done in a few sites, an example is artofadambetts.com. The scroll bar on the page scrolls only an element of the page, not the entire page. I looked at the source and havent't been able to figure it out yet. How is this done?
That's pretty nifty. He uses "position:fixed" on most of the divs, and the one that scrolls is the one that doesn't have it.
In fact it is not the scrolling part that is "doing the job", it is the fixed part of the page.
In order to do this, you should use CSS and add position: fixed; property (use it with top, bottom, left and/or right properties) to the elements that you wish not to scroll.
And you should not forget to give them a greater z-index, if you don't there might be some of the scrolling element that can go over your fixed element as you scroll (and you certainly don't want that).
To find out how people do these kinds of things in CSS and/or Javascript the tool Firebug is just outstanding:
Firebug addon for Firefox
It should be noted that without further hacks position fixed does not work for IE6, which is still managing to hold on to 15-30% of the market, depending on your site.
You can use fixed positioning or absolute positioning to tie various elements to fixed positions on the page. Alternatively you can specify a fixed size element (such as a DIV) and use overflow: scroll to force the scrollbars on that.
As already mentioned, getting everything to work in Internet Explorer AND Firefox/Opera/Safari requires judicious use of hacks.
This can be done in CSS using the "position:absolute;" clause
Here is an example template:
http://www.demusdesign.com/bipolar/index.html
From http://www.demusdesign.com/
The browser is scrolling the page, its just that part of it is fixed in position.
This is done by using the "position: fixed" CSS property on the part that you wish not to scroll.
They've set the side and top elements to have fixed positions via CSS (see line 94 of their style.css file). This holds them in the viewport while the rest scrolls.
Try this for scrolling a particular part of web page......
<html>
<head>
<title>Separately Scrolled Area Demo</title>
</head>
<body>
<div style="width: 100px; border-style: solid">
<div style="overflow: auto; width: 100px; height: 100px">
sumit..................
amit...................
mrinal.................
nitesh................
maneesh................
raghav...................
hitesh...................
deshpande................
sidarth....................
mayank.....................
santanu....................
sahil......................
malhan.....................
rajib.....................
</div>
</div>
</body>
</html>
For a div, you can add in the cSS
overflow: auto
For example,
<div style="overflow:auto; height: 500px">Some really long text</div>
Edit: After looking at the site you posted, you probably don't want this. What he does in his website is make the layout as fixed (position: fixed) and assigns it a higher z-index than the text, which is lower z-index.
For example:
<div class="highz"> //Put random stuff here. it'll be fixed </div>
<div class="lowz"> Put stuff here you want to scroll and position it.&lt/div>
with css file
div.highz {position: fixed; z-index: 2;}
div.lowz {position: fixed; z-index: 1;}
To put scroll bars on an element such as a div:
<div style="overflow-x: auto; overflow-y: auto;>the content</div>
If you only want a horizontal or vertical scroll bar, only use whichever of overflow-x and overflow-y you need.

Categories