Make content inside fixed sidebar scrollable - javascript

I made this js fiddle: http://jsfiddle.net/VaCfV/3/
It has some long content and a fixed positioned sidebar with content inside it. I'm trying to figure out how to make content inside sidebar #side-content scrollable Not by using overflow-y: scrollable; but actually scroll together with page when user uses mouse wheel, arrow keys, main scrollbar etc..
Can this be somehow achieved?

you can try:
#page-wrapper{
overflow: hidden;
position: relative;
width: 100%;
}
#sidebar {
width: 30%;
height: 100%;
position: absolute;
left: 20px;
top:0px;
bottom:0px;
background: #fff;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 20px;
}
http://jsfiddle.net/VaCfV/4/

Related

div going out of parents div

i have a question about a div being longer then it's parent div.
My page is looking as followed:
<div id="wrapper">
<div id="top">
</div><!--/top-->
<div id="middle">
<div id="keep_up">
<div id="thread_menu">
<div id="new_thread">
New threads in here
</div>
<div id="active_thread">
Active threads in here
</div>
</div>
</div><!--/keep_up-->
</div><!--/middle-->
<div id="bottom">
</div><!--/bottom-->
</div>
And the css (Will skip the top div since that is working fine).
html,body {
margin: 0;
padding:0;
height:100%;
}
#wrapper {
min-height:110%;/*Did this, so the page will be a little longer already*/
position:relative;
}
#middle{
width: 80%;
margin-left: 10%;
padding-bottom: 30px;
}
#bottom {
color: white;
background:#000;
width:100%;
height:20px;
position: absolute;
bottom:0;
left:0;
text-align: center;
font-weight: bold;
}
#thread_menu{
float: left;
width: 17%;
}
#new_thread{
height: 80%;
width: 100%;
border-left: 2px solid black;
border-bottom: 2px solid black;
border-right: 2px solid black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#active_thread{
height: 80%;
width: 100%;
margin-top: 5%;
border-left: 2px #000 solid;
border-bottom: 2px #000 solid;
border-right: 2px #000 solid;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
Now, i fill the active and new_thread div with 15 items that i retrieve from my database. Same with Active_thread div. However, on a big screen the results will show fine (As it should). But on a small screen (laptop) it shows it like this:
(The browser is not that big, you always need to scroll a little bit down in order to see the footer (See height: 110% in wrapper))
Question: how do i make my thread_menu push the footer down and keep it inside my wrapper or at least middle div?
(Used the tags Jquery and Javascript because i'm not sure how to solve this problem, and it might needs one of those).
Image EDIT:
Looks like #threadMenu is floated left, this pulls the element out of the flow of the document, so it will not effect the containing divs height!
You could use JS to get the #threadMenu height, then push the content down by this much, but thats not an ideal solution!
I'm assuming the 'menu-items' on the image is the #thread_menu in the CSS. When you float something in the CSS, you're taking it out of the flow. Meaning they won't listen to what it's parents has to say.
What you can do is use display: flex; flex-direction: row; on the middle, force #thead_menu to use a base of 17% by using flex: 0 0 17%.
See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for detailed information on how to use flexbox
Remove the following styles from #bottom
position: absolute;
bottom:0;
left:0;
Add a clearfix for #keep_up (see examples mentioned by Michael_B)
#keep_up:after {
content:"";
display:block;
clear:both;
}
JSFiddle Link
Note: changed id="Middle" to id="middle" in your fiddle example

CSS: Make two column layout with left column fluid (fill all remaining space) and right column fixed (200px)

I want to make it so that Online Users div stays always at size of 200px while the chat window to the left of it resize to the max size it can taking all available space.
So when window is resized for example - the chat window will shrink but Online Users window stays at 200px, kind of like liquid layout.
left div (chat window) is: entry_window
right div (online users) is: online_window
#entry_window{
border: 2px solid #D4D4D4;
float: left;
width: 75%;
height: 100%;
margin: 1%;
overflow: scroll;
overflow-x: hidden;
}
#online_window{
border: 2px solid #D4D4D4;
margin: 1%;
margin-left: 0%;
display: inline-block; float: left;
background-color: white;
width: 21.5%;
height: 100%;
}
oh and by the way: for vertical size I made this function to make it in height as big as possible without disturbing bottom part.
function autoscale(){
var v = window.innerHeight - 170;
document.getElementById("entry_window").style.height= v+"px";
document.getElementById("online_window").style.height= v+"px";
}
This can be done entirely without javascript. You can use absolute positioning along with defining top/left/bottom/right and width.
example:
<div id="lefty">this is left content</div>
<div id="righty">this is right content</div>
and
#lefty {
position: absolute;
background-color: blue;
top: 0;
bottom: 0;
left: 0;
right: 200px;
}
#righty {
position: absolute;
background-color: red;
top: 0;
bottom: 0;
width: 200px;
right: 0;
}
See this jsfiddle:
http://jsfiddle.net/Lyp96yqq/
With display:table and table-cell you can do it this way:
*{margin:0;padding:0}
.parent {
width:100%;
display:table;
}
.parent > div {
height:200px;
line-height:200px;
background:orange;
display:table-cell;
}
.parent .fixed {
width:200px;
}
.parent .flexible {
background:red;
}
<div class="parent">
<div class="fixed">Fixed Width</div>
<div class="flexible">Chat Room</div>
</div>
Here The Example on Jsfiddle too.
This could be easily done with the css calc function. However, it depends on what browsers you want to support. check out this link so see what it is compatible with.
Essentially, just do this:
#entry_window{
border: 2px solid #D4D4D4;
float: left;
width: calc(100% - 208px);
height: 100%;
overflow: scroll;
overflow-x: hidden;
background-color:red;
}
#online_window{
border: 2px solid #D4D4D4;
margin-left: 0%;
display: inline-block;
float: left;
background-color: white;
width: 200px;
height: 100%;
}
note: you need to -208 to take the border into account. Also, check out the jsfiddle

Position of div after jQuery.show();

I am trying to get a div to show up in the correct place after using jQuery's .show().
In the image below, you can see the search div (autocomplete div) shows up to the far left, but I want it to show up where I drew the red box.
Basically I have a small header in the center of my site 1000px in width, and when the autocomplete div shows up, I'd like it to be lined up in the right place, but I'm not sure how set margins or anchors to get it to be in the right spot.
Here is my JS:
$('#sbar').focus(function(){
$('#acd').show();
});
Here is the CSS for the autocomplete DIV:
.autoCompleteDiv{
width: 428px;
height: 150px;
position: fixed;
background-color: white;
border-radius: 3px;
box-shadow: 0px 4px 4px;
z-index: 999;
top: 66px;
padding: 10px;
font-size: small;
color: gray;
margin-left: auto;
margin-right: auto;
overflow-y: scroll;
display: none;
opacity: 0.93;
Basically I want to move the div into the red spot, but have it compatible between screen sizes, and have it stay lined up when the window is 'windowed'.
Any ideas on how to do this?
Regards
If you use the search div as a container for your auto complete div, then it should show in
place. I have created a quick demo that illustrates this.
the html looks like this:
<div id="search"><input value="search" type="text"/>
<div id="auto"><p>autocomplete</p></div>
</div>
and the css:
#search{position:fixed;top:20px;left:200px;}
#auto{display:none;width:auto;min-height:100px;}
To make it responsive, simply use media queries to update the position of the search box...
hope that helps...
Figured it out.
Made a 1000px container div with:
#acdContainer {
width: 1000px;
height: 150px;
top: 64px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
And changed my auto-complete div to be:
.autoCompleteDiv{
width: 730px;
margin-left: 250px;
margin-top: 2px;
height: 150px;
position: relative;
background-color: white;
border-radius: 3px;
box-shadow: 0px 4px 4px;
z-index: 999;
padding: 10px;
font-family: Raleway;
font-size: small;
color: gray;
overflow-y: scroll;
display: none;
}
So that the autocomplete div saw itself as being in a 1000px window, which was always centered.

Appending a <div> to the horizontal center of another <div>

I'm currently trying to create a little menu that changes position as the user scrolls. I've come up for this for a style - http://jsfiddle.net/piedoom/S8tyn/
As you can see, the dots are appended to each text <div> element, and it looks like this.
However, this looks very ugly. How can I center each dot beneath each text div? I've tried doing things like text-align: center to no avail.
Use the css style of margin: auto to center the child div.
http://jsfiddle.net/S8tyn/1/
Just change your style to next
.unselectedcircle
{
background: grey;
position: relative;
top: 32px;
border-radius: 100%;
width: 10px;
height: 10px;
margin: 0 auto;
}
Demo
Here is the answer for your question:
added left and margin-left
.unselectedcircle
{
background: grey;
position: relative;
top: 32px;
border-radius: 100%;
width: 10px;
left:50%;
margin-left:-5px;
height: 10px;
}
updated link

Centring a div horizontally inside another div with absolute position state

I am trying to centre a div horizontally inside another div. The div that I am trying to centre is a scroll-down button that uses jQuery and has a custom icon font made by me and default width/height. I want to centre this div inside my main div and keep the original size as I want to keep using it as a button. For example:
I want to make something like the white arrow that is pointing down in the centre but without messing with my width.
This is my code:
HTML
<div id="intro-tab"> <!-- First/Intro Tab -->
<div id="introtab-godownbtn">Q</div>
</div>
CSS
#intro-tab {
width: auto;
height: 100%;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
font-family: iconFont;
font-size: 50px;
position: absolute;
bottom: 25px;
width: 60px;
height: 30px;
left: 50%;
margin-left: 30px;
background-color: #FFF;
}
#introtab-godownbtn:hover {
cursor: pointer;
}
jQuery
$('#introtab-godownbtn').click(function(){
$("html, body").animate({
scrollTop: (screen.height - 90)
}, 600);
return false;
});
I have tried many ways to centre the button introtab-godownbtn but it doesn't work or it just messes up my buttons size and clicking location. Any solution to my problem?
From what I understand, you're trying to horizontally center an HTML element. Generally, one would use the margin: 0 auto; approach where a fixed width is set on the element it's being applied to. Here's an example of such: http://jsfiddle.net/5XTq2/
Can you provide a mockup/screenshot of the layout you're trying to achieve, if this answer doesn't help? I can happily update the answer to accommodate your need.
EDIT:
As per your Spotify example, if you inspect the page and select the down arrow, it will have the follow styles.
.scroller-arrow {
width: 60px;
height: 60px;
background-image: url(../i/_global/arrow-big.png);
cursor: pointer;
display: block;
margin: 0 auto;
position: relative;
-webkit-tap-highlight-color: transparent;
}
To get the inner absolutely positioned div to be horizontally and vertically centered:
http://jsfiddle.net/7P4n5/
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
HTML:
<div id="intro-tab">
<div id="introtab-godownbtn">Q</div>
</div>
CSS:
body { margin: 0; }
#intro-tab {
width: 100%;
height: 100%;
position: absolute;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
background-color: #FFF;
font-family: iconFont;
font-size: 20px;
width: 60px;
/* this does the centering */
height: 30px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#introtab-godownbtn:hover { cursor: pointer; }

Categories