The issue is the following :
I have a calendar in which the user can create an appointment (using DHTMLX Scheduler Timeline View), the main problem is the Scheduler doesn't support a scrollable view , only fits the schedule into the view.
I Solve the previous problem, creating a div with a FIXED width (in this way can i have a longer horizontal scheduler ) and wrapping it inside a div that allows to scroll horizontally its content.
However , I dont have a clear idea of how to solve the following problem caused :
When the calendar is loaded , you can see which div belongs to its horizontal Row
And when the user scrolls horizontal (to see 7:00 PM for example)
You cannot see in which div with color you need to create the appointment !
So i need something like this, where the div is still visible although the user scrolls horizontally :
I already tried with something like the following :
May be a problem too with the parent container, because it hides the div if the following works maybe ?
.visible-division{
position:relative; /*Because the div with color is inside a table, and i need that still floating in the same row !!*/
float:left;
z-index:9000;/*a higher z-index in case something cover the div*/
}
without any luck ..
My CSS
#calendar-container{
width: 2000px;
}
#calendario {
height: 900px;
width: 100%;
border: 1px solid #cecece;
}
.scrolling_container {
height: 100%;
overflow: auto;
}
And my Markup
<div class="scrolling_container">
<div id="calendar-container">
<div class="dhx_cal_container panel" id="calendario">
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab"></div>
<div class="dhx_cal_tab" name="week_tab"></div>
<div class="dhx_cal_tab" name="month_tab"></div>
<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>
</div>
<div class="well text-right">
<div>
a link
</div>
</div>
</div>
It can be solved via CSS ? Otherwise, Should I apply classes to it in case of scroll event ?
Any help is appreciated, thanks !
This may help you do the trick.
.visible-division{
position:fixed;
width: /* specifiy */
height: /* specify */
top: /* specify */
left: /* specify */
}
.scrolling_container {
height: 100%;
overflow: auto;
}
Though not supported by most browser, you may try sticky position value position: sticky.
Hope this will be helpful, apply this class to the floating div only.
.floating{
position:fixed;
top:20px;
right:0px;
width:80%; /* as required */
}
Related
Can anyone help me ?
I need to create pop-up to specific in line.
if the user was reading the article and have already reached the mid articles then a pop up will appear, and if returning to the top of the popup will be hide.
This is my source code pop up
$(".news").css("width","100%");
$(document).ready(function(){
if($("#blanket").length==1){
if($("#popUpDiv2").length==1){
popup('popUpDiv2');
}
else{
popup('popUpDiv');
}
}
checkCookie('popUpDiv');
$('#popUpDiv').removeAttr('style');
$('#popUpDiv').css({left: 20, bottom: 25});
});
#blanket {width: 10px;background-color:#fff;opacity:0;position:fixed;z-index:9001;top:0px;left:0px;/*width:100%;*/}
#popUpDiv {position:fixed;background:url('../image/Pop-Up-Banner-NOS-6000-Vermillion.png') no-repeat;width:275px;height:275px;z-index:9002;background-size: 275px auto;}
.trbox{width:270px;height:270px;bottom: 0px;left: 0px;}
#popUpDiv a,#popUpDiv2 a {width:45px;height:10px;padding: 2px 35px;position:relative;bottom: 29px;left:103px;}/*fix jangan diutak atik*/
.closepopup2{position: absolute;cursor: pointer;font-weight: bold;color: #fff;width:20px;height:2px;padding: 5px 10px;float:right;bottom: 232px;right:1px;} /*fix jangan diutak atik*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
div id="popup"></div>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;"><div class="trbox"> </div>
<a target="_blank" href=""></a>
<div onclick="popup('popUpDiv')" class="closepopup2"></div>
<!-- <div class="popUpbottom">
<div class="comboAlert"><input type="checkbox" name="checkboxAlert" id="checkboxAlert"> Don't show again Today</div>
</div> -->
</div>
For the line which you want to use as trigger for the popup, you have to do the following.
Suppose it is a div. Calculate the scollTop of the div on scoll event. and when the scollbar position becomes equal to the scrollTop of the div, then show the popup.
See below links,
How to get scrollbar position with Javascript?
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_prop_element_offsettop
I am creating an accordion using bootstrap 3. What I want is the accordion's height is always fixed no matter how its content is. If the content of an element is too large then a vertical scrollbar should appear inside that element. Also, when user click an element's header that element should take the rest of the height of the wrapper (and display scrollbar if the rest of height is not enough).
I change flex-grow:1 when user click on the panel-header. However, when clicking "Collection 2" the scrollbar didnt appear inside the content-body of "Collection 2" as I expected and the accordion is pushed outside of the wrapper div. Could you please help? I prefer a css only solution if possible. Thanks.
The template is:
<body ng-app="accordion" ng-controller="ctrler as ctrl">
<div id="wrapper" class="full-height wrapper">
<div class="panel-border panel-group column-flex full-height" id="accordion">
<div ng-repeat='key in [1,2,3]' class='panel panel-default'>
<div class="list-group-item">
<a class="panel-title" data-toggle="collapse" data-target="#{{key}}" data-parent="#accordion" ng-click='onClick($event)'>Collection {{key}}</a>
</div>
<div class="panel-collapse collapse content-body" id="{{key}}">
<div class="panel-body">
<ul class="list-unstyled">
<li ng-repeat="item in data1">
<div>{{item}}</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
The styling is :
.column-flex{
display : flex;
flex-direction: column;
}
.wrapper {
height: 500px;
border-style: solid;
}
The code to add flex-grow is:
if($(e.target).parents('.panel').css('flex-grow')==1){
$element.find(".panel").css('flex-grow',0);
}else{
$element.find(".panel").css('flex-grow',0);
$(e.target).parents('.panel').css('flex-grow',1);
}
You can check the example here : https://plnkr.co/edit/iqrHG80GXj8teiRGeBU8?p=preview.
Add this to your code:
.panel {
display: flex;
flex-direction: column;
}
.collapse.in {
overflow-y: auto;
}
revised plunkr
If you want a scrollbar to appear when the height of .wrapper is exceeded, add overflow: scroll; to .wrapper. But that will show a scrollbar for .wrapper, not individual panels in the accordion. If you want a scrollbar to appear for the individual panel in the accordion, apply a height and overflow: scroll; to each .panel-collapse where you want the scrollbar to appear.
I am trying to create a sticky menu using CSS Bootstrap affix and list-group menu.
I manage to get most of it to work except for when the user scrolls down.
When the user scrolls down, the menu seems to take the entire with of the page.
I tried to set it up via data attributes
using something like this
<div class="container">
<div class="row">
<div class="col-md-3" id="leftCol">
<div data-spy="affix">
<div class="list-group list-group-root well">
<a class="list-group-item" href="#introduction">Introduction</a>
<a class="list-group-item" href="#features">Features</a>
<a class="list-group-item" href="#dependencies">Dependencies</a>
</div>
</div>
</div>
<div class="col-md-9" id="mainCol">
Some long text for the body along with some tables.
</div>
</div>
</div>
But the data attribute did not make the menu stick! it just kept it on the top.
So I tried to use JS to get the job done like this
$(function(){
$('#leftCol').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
});
});
I created jsFiddle to show you the current behavior.
How can I fix this affix so when the user scrolls down the menu maintain the same shape?
First of all, you should use either data-attributes or JS.
I updated your jsFiddle. The position of id="leftCol" was changed:
<div class="col-md-3" >
<div id="leftCol">
...
</div>
</div>
and style was added:
#leftCol {
width: 220px;
}
Also, you should add media queries to remove affix from mobile view.
As an "unacceptable" workaround, I set a max width of the menu to 250px like so
.list-group.list-group-root {
padding: 0;
max-width: 250px;
}
I am not sure how to get it to work without adding a max-with the max with should be defined by the parent. In this case class="col-md-3"
UPDATED
javascript to the rescue!
I added the following JS code to solve this problem once an for all.
It basically resize the menu everytime affix.bs.affix event is fired
$(document).on('affix.bs.affix', '#docs-menu', function() {
$(this).width($(this).width());
});
From the docs
affix.bs.affix => This event fires immediately before the element has
been affixed.
Ok I believe I got most of the code working like you want it to. The main changes I made were adding this CSS:
#leftCol {
display: block;
height: auto;
padding: 0;
width: 100%;
}
.navbar-fixed-top-again {
position: static;
top: 60px;
z-index:1031;
}
.navbar-inner {
background: red;
padding: 5px;
}
.affix {
position: fixed !important;
}
and I changed up some of the structure on your HTML:
<div class="container body-content">
<div>made up content to allow the navigation to scroll more before it becomes sticky. This height will need to be set in the data-offset-top which is in the leftCol DIV just below this content. The same will apply if you need to set it for a footer offset.</div>
<!-- new nav section -->
<div class="col-md-3 navbar-fixed-top-again" id="leftCol" data-spy="affix" data-offset-top="80">
<div class="navbar-inner">
<div class="list-group list-group-root well">
*the rest of your code*
</div>
</div>
</div>
</div>
The main problem now is having a sticky navigation menu with variable height. If you notice when you scroll your reading content underneath jumps up and gets hidden. It seems that it is possible to fix this using JavaScript (link to SO question).
Heres the link to your updated Fiddle. Hope that helps.
I am using bootstrap as my CSS framework. Now I have some dynamic content in the left side div, and some static content in the right div. I want to the height of right side div auto change base on the height of left side div. Is that possible?
<div class="container-fluid">
<div class="row-fluid">
<div class="span5 offset1">
<div class="well">
Dynamic Content
</div>
</div>
<div class="span5">
<div class="well" style="height: 330px; overflow-x: hidden; overflow-y: scroll;">
Static Content
</div>
</div>
</div>
You could do this
<div class="wrapper">
<div class="dynamic">
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
</div>
<div class="static">
Static<br />
Static<br />
</div>
</div>
CSS
.wrapper {
position: relative;
width: 400px;
overflow: auto;
}
.dynamic {
position: relative;
background-color: yellow;
width: 200px;
}
.static {
position: absolute;
background-color: orange;
width: 200px;
float: left;
left: 200px;
top: 0px;
bottom: 0px;
right: 0px;
}
I think jQuery is the best solution to achieve this. Check out my fiddle:
http://jsfiddle.net/PHjtJ/
$(document).ready(function() {
var dynamic = $('.dynamic');
var static = $('.static');
static.height(dynamic.height());
});
the solution depends on the behavior you want in the case where the static column is larger than the dynamic one. [I actually think you want the second scenario.]
Notice: both case are pure CSS, and without specifying any height whatsoever.
also, not specifying a margin of any sort, so you can change the width of the column at your will, without the need to calculate the margin/position again and again..
if you want the dynamic column to enlarge, and to be as the static height:
so you actually want the columns to always be a the same height.
and that can be easily achieved with CSS table layout styling.
in that case: See this Fiddle (the script is only for adding dynamic content, this is a pure CSS SOLUTION)
if you want the dynamic column to stretch only to its content height, and the static one to have the same height + a scroller.
in that case: see this Fiddle (again: the script is only for adding dynamic content, this is a pure CSS SOLUTION)
in both cases, the static column grows if the dynamic one become longer.
Use Javascript/jQuery to find which box has the biggest height. Then set the same height to all the divs.
<script type="text/javascript">
jQuery(document).ready(function($) {
var description = jQuery("div.description");
var big =0;
description.each(function(index, el) {
if(jQuery(el).height() > big)
big =jQuery(el).height(); //find the largest height
});
description.each(function(index, el) {
jQuery(el).css("min-height", big+"px"); //assign largest height to all the divs
});
});
</script>
I'm currently building a popup box script using css/jquery and i can't seem to get the div centered on the screen on all cases. It it possible to center it without knowing the div width?
Instead of posting all the code here i put up a live example at http://goo.gl/N45cp
Any kind of help is much appreciated!
Best Regards
John
<div id="wrapper">
<div id="child"></div>
</div>
If the position of the #child is not absolute, you can set left and right margins to auto:
#child {
margin: 0 auto;
}
Or if the position is absolute you can try the following:
$("#child").css("left", function(){
return ($("#wrapper").width() - $(this).width()) / 2;
});
You can achieve this with pure CSS if you have a containing div:
HTML
<div id="outer">
<div id="inner">some content here</div>
</div>
CSS
body, html, div#outer { height:100%; }
div#outer { text-align:center; }
div#inner { display:inline-block; }
http://jsfiddle.net/NjZbW/