Position fixed y axis only inside scrollable div - javascript

Im trying to make a div which is inside another scrollable div fixed only y axis. I have tried a few things but the navbar keeps scrolling x axis aswell. I want it to be fixed only y axis and when scrolled x axis the nabar should scroll with it
Heres my code https://jsbin.com/qewopukuwo/2/edit?html,css,output
div.main {
width:90%;
height:400px;
overflow: scroll;
white-space: nowrap;
}
div.nav {
position:fixed;
background:red;
padding:10px;
}
div.row {
margin-bottom:10px;
}
div.content {
display:inline-block;
width:50px;
background:blue;
color:white;
padding:20px;
text-align:center;
}
<div class="main">
<div class="nav">scrollable nav bar</div>
<div class="row">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
</div>
<div class="row">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
</div>
<div class="row">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
</div>
<div class="row">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
</div>
<div class="row">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
</div>
<div class="row">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
</div>
<div class="row">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
</div>
</div>


make the follwing changes to the div.main css
height:100%;
overflow-x: scroll;
This would make the Y axis stretch to full height of contents and scroll only x axis.

Related

jQuery Sortable with static content

I writing a website by using Bootstrap and jQuery. Now, i have a horizontal list of div at the bottom of webpage. It's act like the Slide bar in Microsoft Powerpoint. The number is unchange element. If i got 6 record from server, it will generate 6 slide in the list. User can drag the "DIV" box and move to another position. Just like the normal flow of Sortable plugin.
Expected result:
I tried two way to code this "slide bar". However, i cannot build the expected result.
Concept 1:
Split two row to perform. but will have two scrollable.
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
<div class="row">
<div class="col-md-12 sortable-list">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
</div>
Concept 2:
use "items". However, it will exist some weird issue when can drag the box. slideNumber div will move to wrong position and box will disappear
$("sortable-list").sortable({
items:'.box'
});
.slideNumber{
position: absolute;
top:0px;
left:15px;
}
.box{
position: absolute;
top:30px;
left:0;
}
/**roughly css**/
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 sortable-list">
<div>
<div class="slideNumber">1</div>
<div class="box"></div>
</div>
<div>
<div class="slideNumber">2</div>
<div class="box"></div>
</div>
<div>
<div class="slideNumber">3</div>
<div class="box"></div>
</div>
<div>
<div class="slideNumber">4</div>
<div class="box"></div>
</div>
<div>
<div class="slideNumber">5</div>
<div class="box"></div>
</div>
<div>
<div class="slideNumber">6</div>
<div class="box"></div>
</div>
</div>
</div>
</div>
</div>
Anyone can give me a hint to build this slide bar?

This should work:
$( function() {
$(".sortable-list")
.sortable()
.disableSelection();
} );
.container > div {
padding:0 30px 0px 30px;
display:inline-block;
}
.sortable-list > div {
margin:1px;
display:inline-block;
padding:30px;
background:#777;
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
<div class="row">
<div class="col-md-12 sortable-list">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
</div>
</div>
</div>

.row
{
width:100%;
}
.col-md-12,.slideNumber
{
width:100%;
display:flex;
margin-right:50px;
}
.box
{
width:50px;
height:50px;
background:gray;
text-align:center;
line-height: 50px;
vertical-align: middle;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 sortable-list">
<div>
<div class="slideNumber">1</div>
<div class="box">Div</div>
</div>
<div>
<div class="slideNumber">2</div>
<div class="box">Div</div>
</div>
<div>
<div class="slideNumber">3</div>
<div class="box">Div</div>
</div>
<div>
<div class="slideNumber">4</div>
<div class="box">Div</div>
</div>
<div>
<div class="slideNumber">5</div>
<div class="box">Div</div>
</div>
<div>
<div class="slideNumber">6</div>
<div class="box">Div</div>
</div>
</div>
</div>
</div>
</div>

Bootstrap Affix Not Moving

I'm trying to make the navigation sidebar on my website move down with the browser view via Bootstrap's Affix plugin however it refuses to follow the view and just stays at the top.
This is the structure I have for my HTML:
<div id="page-wrapper">
<div class="container">
<div class="row">
<div id="navigation-affix" data-spy="affix" data-offset-top="20" data-offset-bottom="200">
<div class="col-xs-2" id="navigation-wrapper">
<div class="inner">
<div class="row">
<div class="col-xs-12">
<img src="images/me.png" alt="Liam Potter" id="picture-me" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div id="navigation">
Home
Portfolio
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-10" id="content-wrapper">
<div class="inner">
</div>
</div>
</div>
</div>
<div id="page-push"></div>
</div>
<footer>
<div class="container">
</div>
</footer>
Source: https://jsfiddle.net/tbejd5en/1/
Any thoughts?

You can just add a position:fixed to your id #navigation-affix and add col-xs-offset-2 to your id #content-wrapper
div#navigation-affix {
position: fixed !important;
}
Here is fiddle: https://jsfiddle.net/tbejd5en/5/

You can just add a position:fixed to your id #navigation
HTML
<div class="row">
<div class="col-xs-12">
<div id="navigation">
Home
Portfolio
</div>
</div>
</div>
CSS
div#navigation {
text-align: right;
padding-top: 10px;
position: fixed;
}
DEMO
https://jsfiddle.net/tbejd5en/2/

jQuery not working in jade. Documnet.ready function not working

Tried different intendations but the jQuery part is still not working.
PS : The jQuery lib is already included this document is extended.
extends home
mixin print(x,y)
if x < y
.column=x
else
.column
mixin rooms(n,num,a,b,c,d)
while n < num
.row(value=n++)
+print(n,a)
+print(n,b)
+print(n,c)
+print(n,d)
block content
div(id="tabs")
.row
.column
a(href="#tab1" onclick="open(this.href)") Ground Floor
.column
a(href="#tab2" onclick="open(this.href)") Ist Floor
.column
a(href="#tab3" onclick="open(this.href)") IInd Floor
div(id="tab1")
+rooms(100,111,111,104,111,111)
div(id="tab2")
+rooms(200,217,217,211,214,211)
div(id="tab3")
+rooms(300,317,317,311,314,311)
script(src='https://code.jquery.com/jquery-2.1.1.min.js')
script.
$(document).ready(function(){
$('#tab1').hide();
$('#tab2').hide();
$('#tab3').hide();
});
1.jQuery isn't hiding the div it is asked to hide
2.NO error in console.

The html generated is as expected
I copied the Jade into this online converter.
The end of the output looked like this:
<script>
$(document).ready(function(){
$('#tab1').hide();
$('#tab2').hide();
$('#tab3').hide();
</script>});
You missed out the indent before }); so it was placed outside the script element.
no errors in console
This generated the error:
Uncaught SyntaxError: Unexpected end of input
When I corrected that error, it successfully hid the elements:
<div id="tabs"></div>
<div class="row">
<div class="column">Ground Floor</div>
<div class="column">Ist Floor</div>
<div class="column">IInd Floor</div>
</div>
<div id="tab1">
<div value="100" class="row"></div>
<div class="column">101</div>
<div class="column">101</div>
<div class="column">101</div>
<div class="column">101</div>
<div value="101" class="row"></div>
<div class="column">102</div>
<div class="column">102</div>
<div class="column">102</div>
<div class="column">102</div>
<div value="102" class="row"></div>
<div class="column">103</div>
<div class="column">103</div>
<div class="column">103</div>
<div class="column">103</div>
<div value="103" class="row"></div>
<div class="column">104</div>
<div class="column"></div>
<div class="column">104</div>
<div class="column">104</div>
<div value="104" class="row"></div>
<div class="column">105</div>
<div class="column"></div>
<div class="column">105</div>
<div class="column">105</div>
<div value="105" class="row"></div>
<div class="column">106</div>
<div class="column"></div>
<div class="column">106</div>
<div class="column">106</div>
<div value="106" class="row"></div>
<div class="column">107</div>
<div class="column"></div>
<div class="column">107</div>
<div class="column">107</div>
<div value="107" class="row"></div>
<div class="column">108</div>
<div class="column"></div>
<div class="column">108</div>
<div class="column">108</div>
<div value="108" class="row"></div>
<div class="column">109</div>
<div class="column"></div>
<div class="column">109</div>
<div class="column">109</div>
<div value="109" class="row"></div>
<div class="column">110</div>
<div class="column"></div>
<div class="column">110</div>
<div class="column">110</div>
<div value="110" class="row"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div id="tab2">
<div value="200" class="row"></div>
<div class="column">201</div>
<div class="column">201</div>
<div class="column">201</div>
<div class="column">201</div>
<div value="201" class="row"></div>
<div class="column">202</div>
<div class="column">202</div>
<div class="column">202</div>
<div class="column">202</div>
<div value="202" class="row"></div>
<div class="column">203</div>
<div class="column">203</div>
<div class="column">203</div>
<div class="column">203</div>
<div value="203" class="row"></div>
<div class="column">204</div>
<div class="column">204</div>
<div class="column">204</div>
<div class="column">204</div>
<div value="204" class="row"></div>
<div class="column">205</div>
<div class="column">205</div>
<div class="column">205</div>
<div class="column">205</div>
<div value="205" class="row"></div>
<div class="column">206</div>
<div class="column">206</div>
<div class="column">206</div>
<div class="column">206</div>
<div value="206" class="row"></div>
<div class="column">207</div>
<div class="column">207</div>
<div class="column">207</div>
<div class="column">207</div>
<div value="207" class="row"></div>
<div class="column">208</div>
<div class="column">208</div>
<div class="column">208</div>
<div class="column">208</div>
<div value="208" class="row"></div>
<div class="column">209</div>
<div class="column">209</div>
<div class="column">209</div>
<div class="column">209</div>
<div value="209" class="row"></div>
<div class="column">210</div>
<div class="column">210</div>
<div class="column">210</div>
<div class="column">210</div>
<div value="210" class="row"></div>
<div class="column">211</div>
<div class="column"></div>
<div class="column">211</div>
<div class="column"></div>
<div value="211" class="row"></div>
<div class="column">212</div>
<div class="column"></div>
<div class="column">212</div>
<div class="column"></div>
<div value="212" class="row"></div>
<div class="column">213</div>
<div class="column"></div>
<div class="column">213</div>
<div class="column"></div>
<div value="213" class="row"></div>
<div class="column">214</div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div value="214" class="row"></div>
<div class="column">215</div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div value="215" class="row"></div>
<div class="column">216</div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div value="216" class="row"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div id="tab3">
<div value="300" class="row"></div>
<div class="column">301</div>
<div class="column">301</div>
<div class="column">301</div>
<div class="column">301</div>
<div value="301" class="row"></div>
<div class="column">302</div>
<div class="column">302</div>
<div class="column">302</div>
<div class="column">302</div>
<div value="302" class="row"></div>
<div class="column">303</div>
<div class="column">303</div>
<div class="column">303</div>
<div class="column">303</div>
<div value="303" class="row"></div>
<div class="column">304</div>
<div class="column">304</div>
<div class="column">304</div>
<div class="column">304</div>
<div value="304" class="row"></div>
<div class="column">305</div>
<div class="column">305</div>
<div class="column">305</div>
<div class="column">305</div>
<div value="305" class="row"></div>
<div class="column">306</div>
<div class="column">306</div>
<div class="column">306</div>
<div class="column">306</div>
<div value="306" class="row"></div>
<div class="column">307</div>
<div class="column">307</div>
<div class="column">307</div>
<div class="column">307</div>
<div value="307" class="row"></div>
<div class="column">308</div>
<div class="column">308</div>
<div class="column">308</div>
<div class="column">308</div>
<div value="308" class="row"></div>
<div class="column">309</div>
<div class="column">309</div>
<div class="column">309</div>
<div class="column">309</div>
<div value="309" class="row"></div>
<div class="column">310</div>
<div class="column">310</div>
<div class="column">310</div>
<div class="column">310</div>
<div value="310" class="row"></div>
<div class="column">311</div>
<div class="column"></div>
<div class="column">311</div>
<div class="column"></div>
<div value="311" class="row"></div>
<div class="column">312</div>
<div class="column"></div>
<div class="column">312</div>
<div class="column"></div>
<div value="312" class="row"></div>
<div class="column">313</div>
<div class="column"></div>
<div class="column">313</div>
<div class="column"></div>
<div value="313" class="row"></div>
<div class="column">314</div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div value="314" class="row"></div>
<div class="column">315</div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div value="315" class="row"></div>
<div class="column">316</div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div value="316" class="row"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
$('#tab1').hide();
$('#tab2').hide();
$('#tab3').hide();
});
</script>

Okay finally when you have a file which is extended you keep your js code in the parent file because keeping at the end of the extended document causes it to be inherited by some tag.

try writing # with ids
div(id="tabs")
.row
.column
a(href="#tab1" onclick="open(this.href)") Ground Floor
.column
a(href="#tab2" onclick="open(this.href)") Ist Floor
.column
a(href="#tab3" onclick="open(this.href)") IInd Floor
#tab1 rooms(100,111,111,104,111,111)
#tab2 rooms(200,217,217,211,214,211)
#tab3 rooms(300,317,317,311,314,311)

how deactivate scrolling in javascript bootstrap navs

In my code i'm using bootstrap (navs) like this in my html :
{{extend 'layout.html'}}
<div class="row" id="container_R_economics">
<div class="span12">
<div class="dropdown ">
<select class=" btn-Action" id="groupe" >
<option value="">Awaiting data...</option>
</select>
</div>
</div>
<div class="span3" id="reportingContainer"></div>
<div class="span7 offset1" id="dashboard">
<div id="combochart"></div>
<div id="control" style='height:50px'></div>
</div>
</div>
<div class="tabbable" >
<ul id="ul_tabs" class="nav nav-tabs"></ul>
<div class="tab-content" id="graphTabsContent"></div>
</div>
<div class="row" id="container_R_physics">
<div class="span4 offset4" id="dashboard_div">
<div id="chart_div" style='width: 600px; height: 300px;'></div>
<div id="filter_div" style='width: 600px; height: 80px;'></div>
</div>
when i use bootstrap (navs) in my page web in (<div class="row" id="container_R_economics">) and (<div class="row" id="container_R_physics">) i have a scrolling, how i cant deactivate it?

have you tried setting the overflow to hidden:
.yourclass-name{
overflow:hidden;
}

centered "row" content with Bootstrap

i have a problem to center the content in a "row", the buttons in the example are always on the left side and i have too much space on the right side.
Is there a way to center this buttons?
thx
tomas
<div class="abc">
<div class="row red show-grid">
<div class="span2 btn">a</div>
<div class="span2 btn">b</div>
<div class="span2 btn">c</div>
<div class="span2 btn">d</div>
<div class="span2 btn">e</div>
</div>

The class span2 has property float:left:
<div class="block">
<div class="row show-grid">
<div class="span2 btn">a</div>
<div class="span2 btn">b</div>
<div class="span2 btn">c</div>
<div class="span2 btn">d</div>
<div class="span2 btn">e</div>
</div>
</div>
CSS:
.block {
max-width: 500px;
}
.block > div {
text-align:center;
}
.block > div > div {
float:none;
}
I would consider not using span2 (layout and grid class) with btn (button style class) together.

http://jsfiddle.net/sTwj7/10/
HTML
<div class="abc">
<div class="row red show-grid">
<div class="btn">a</div>
<div class="btn">b</div>
<div class="btn">c</div>
<div class="btn">d</div>
<div class="btn">e</div>
</div>
</div>
CSS
.red {
background-color: red;
}
.abc {
max-width: 500px;
}
.red .btn {
width: 160px;
margin: 0 auto;
display: block;
}

Updated 2018
Bootstrap 4
Use the auto-layout columns and text-center
<div class="row text-center">
<div class="col-sm border">a</div>
<div class="col-sm border">b</div>
<div class="col-sm border">c</div>
<div class="col-sm border">d</div>
<div class="col-sm border">e</div>
</div>
https://www.codeply.com/go/2fDFPSB5A4
Bootstrap 3
Use column offset and text-center
<div class="row red show-grid text-center">
<div class="col-md-2 col-md-offset-1 btn btn-default">a</div>
<div class="col-md-2 btn btn-default">b</div>
<div class="col-md-2 btn btn-default">c</div>
<div class="col-md-2 btn btn-default">d</div>
<div class="col-md-2 btn btn-default">e</div>
</div>
https://www.bootply.com/zEYom4EJUF
Bootstrap 2 (original answer)
You could add CSS to center your spans like this:
http://jsfiddle.net/sTwj7/9/
<div class="span2 pull-center">
<h1>a</h1>
</div>
CSS class:
.pull-center {text-align:center;margin:0 auto !important;float:none !important;}

Categories

Resources