Develop Reference

Floating visible div inside horizontal scrollable div CSS

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 */
}

Adding AutoScroll inside a DIV-Javascript

How do I add an auto scroll function to the below file?
By auto scroll I mean it automatically scrolls to the bottom within the scrollable area and then start from the top again.
I tried different JavaScript code, but none of it worked.
<div class="box">
<div class="box-heading"><?php echo $heading_title; ?></div>
<div class="box-content">
<?php foreach ($all_news as $news) { ?>
<div align="center">
</div>
<div style="
width: 98%;
height: 200px;
overflow-y:auto;">
<script type="text/javascript" src="http://domain.com/file.php"></script>
<div id="feedmain" class="feed11">PFeed</div>
</div>
</div>
<?php } ?>
</div>
</div>
The file.php we are loading is only an HTML table.

You can use overflow-y:scroll instead of overflow-y:auto.

This one worked for me.
var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

Use CSS
.divClass{
overflow:scroll;
}

How to place a div at the bottom of another div without know the parent's div height

I have had some problems to resolve this situation.
I have a div "header" with no set height because could have a variable value depending on browser.
Inside her I have two more divs and I want to place one div exacly at the bottom of the another but I never know height "header" height. I tried to define a height for div "header" but sometimes it fails.

Use position:absolute in combination with a positioning context on the parent, for example:
<header>
Ohai
<div>
Noes!
</div>
</header>
CSS:
header {
position:relative;
height:25%;
background:#eee;
}
div {
position:absolute;
bottom:0;
left:50%;
margin-left:-50px;
width:100px;
background:red;
}
The header's size is unknown, since it's based on the viewport height, and the div is locked to its bottom with the combination of position:absolute and bottom:0. The header needs the position:relative to designate it a positioning context used by absolutely positioned child elements.
Fiddle here.

One way to do this would be to set position:relative on the header div, and position:absolute and bottom:0 on the child div you want to sit on the bottom of the header.
jsFiddle example

just use clear:both for the second div at bottom ,and set the height of the header as height:auto
Sample:
<div id="header">
<div id="first">
first
</div>
<div id="second">
second
</div>
</div>
CSS:
#header{height:auto}
#first{}
#second{clear:both}
DEMO

<div id="header">
<h2>Some title..</h2>
<div class="right">
<p style="color: black;display: inline">
Some data.....
</p>
</div>
<div class="left">
<form action="#" >
<input type="text" placeholder="put here..." required="required">
<button type="submit">Validar</button>
</form>
</div>
</div>
CSS:
#header{position: relative;height: 150px; border:1px solid black}
.right{right: 0; bottom: 0; top:auto; position: absolute}
.left {left: 0; bottom: 0; top:auto; position: absolute}
This work just fine in Chrome and Firefox but is not working in IE.
The div which have the left css is not being placed at the bottom of the "header".

<div>
<div>
div1
</div>
<div>
div2
</div>
</div>

Inputbox focus set style to containing div : Background

I have this page div#container which contains inputboxes, textareas and selectboxes. When I click them i want to change the background color of the containing div "djform_field"
#dj-classifieds .dj-additem .djform_row .djform_field:focus {
background: none repeat scroll 0 0 #F5F5F5;
border-radius: 5px;
float: left;
padding: 15px;
}
<div class="djform_field">
<textarea id="contact" name="contact" rows="1" cols="55" class="inputbox required"><?php echo $this->item->contact; ?></textarea>
<div id="input-tips"><span class="hint"><?php echo JTEXT::_('COM_DJCLASSIFIEDS_CONTACT_TOOLTIP')?><span class="hint-pointer"> </span></span></div>
</div>
<div style="clear:both"></div>
</div>

$('#contact').focus(function(){
$('.djform_field').addClass('red');
}).blur(function(){
$('.djform_field').removeClass('red');
})
See demo here (using jQuery)

Set one big click handler:
$("#container :text, #container select").click(function() {
$("div.djform_field)".css("background-color", "red"); //or whatever
});

$('.djform_field').children('*').click(function () { //use required selector in .children(), * means all children
$('.djform_field').css('background', 'color');
})

How to set a 'div' height same with his neighbor?

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>