We Keep Coding

Scroll effect to change opacity of each new div element

I am new to website design and have a question I'd like to ask. I have tried to use velocity.js to achieve this with failure. I am sure there is a rather simple css solution for what i want. I just want the previous div to "fade" and the new div that's scrolled to, to fade in with greater opacity. Open to any jQuery examples as well.
Here is my code for the section in question:
html:
<section id="services">
<h2 class="pb-5">Services We Offer</h2>
<div id="service1">
<h2>Service 1</h2>
</div>
<div id="service2">
<h2>Service 2</h2>
</div>
<div id="service3">
<h2>Service 3</h2>
</div>
</section>
css:
#services{
}
#service1{
height: 100vh;
background-color: rgb(44, 49, 90);
}
#service2{
height: 100vh;
background-color: #267481;
}
#service3{
height: 100vh;
background-color: #373f24;
}

I am sure there is a rather simple css solution for what i want
Unfortunately, that is not the case. CSS can perform animations, but if scrolling is involved in any way, JS is required.
You could use something like animate.css to control your CSS animations and then use wow.js to make them load on scroll.

As before stated by other answers and comments you cannot manipulate the scroll event in css alone but here is a simple jquery example that may help you. You can add and remove classes on scroll and you can add an animation to the css to control the opacity of your div.
$(window).on("scroll", function(){
var scrollTop = $(this).scrollTop();
$('.scrollDiv').each(function(){
var el = $(this);
var offsetTop = el.offset().top;
if(scrollTop > offsetTop){
el.addClass("scrolled");
}else{
el.removeClass("scrolled");
}
});
});
.scrollDiv{
height:100vh;
transition:opacity 500ms ease-in-out;
opacity:0.2;
}
.scrollDiv.scrolled{
opacity:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollDiv" style="background:green;"></div>
<div class="scrollDiv" style="background:red;"></div>
<div class="scrollDiv" style="background:blue;"></div>
<div class="scrollDiv" style="background:yellow;"></div>

How to Align a div in Center When Contents added Dynamically

Please have a look at this Image.
Here I was use the Bootstrap for aligning the divs. And created only one div. The Contents are added in this div dynamically from the admin side. then it will loop the div. That's Working fine.
But here you can see only 6 Contents are available. So 2 Divs are aligned in the left. I need these div should align in the middle of the Page. If the Contents are 7 or 5 the Second row Contents should be in the Middle. How to align these Divs Middle. Please Help me to Solve this Problem.
Here Is My Code..
<div class="col-sm-6 col-md-3">
<div class="service-item hvr-grow wow fadeIn" data-wow-duration="500" data-wow-delay="100ms">
<img src="{{ 'assets/img/icon-services.png' |theme }} ">
<h4>{{ service['name'] }}</h4>
<p>{{ str_limit(service['description'], 100) }}</p>
Read More
</div>
</div>
Thank you in Advance.

Add display: inline to child div and text-align: center to the parent div. Don't use col-md of bootstrap because it have float: left propertive
.parent {
text-align: center;
}
.child {
display: inline-block;
width: 24%;
border: solid 1px #123;
height: 50px;
margin: 0 auto !important;
}
<div class="parent" id="parent">
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>

You can use bootstrap to set an offset for each div dynamically depending on your div's desired position or set the margin of the divs to auto. See this post for a detailed explanation.

Cannot get push menu inline with Bootstrap

I'm using Bootstrap as UI framework, what I'm trying to do is make a push menu on the left. Actually, I almost achieve this result, but there are some bugs on the system. In particular, I'm not able to get the menu inline. See the code for more details:
HTML
<div id="calendar-wrapper">
<div class="container-fluid">
<div class="row">
<div id="resource-bar" class="sidenav col-sm-2">
<h4>Resource</h4>
<div class="input-group">
<input type="text" placeholder="Search resource"
class="form-control resource-filter"/>
<span class="input-group-btn">
<button class="clear btn btn-default clean-resource btn-danger" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
<div id="popover-content" hidden></div>
</div>
<div id="calendar-container" class="col-sm-10">
<div id="calendar" class="well"></div>
</div>
</div>
</div>
</div>
<br><br><br>
<button type="button" id="show" >Show</button>
<button type="button" id="hide" >Hide</button>
Note that the html above is adapted for a fiddle example.
CSS
.sidenav
{
background-color: azure;
height: 100%;
width: 0;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.5s;
}
#calendar-container
{
background-color: whitesmoke;
transition: margin-left .5s;
padding: 16px;
}
JS
$(document).ready(function()
{
var resourceContainer = $('#resource-bar');
var calendarContainer = $('#calendar-container');
$('#show').click(function()
{
resourceContainer.css('width', '250px');
calendarContainer.css('margin-left', '250px');
});
$('#hide').click(function()
{
resourceContainer.css('width', '0px');
calendarContainer.css('margin-left', '0px');
});
})
The result when the menu on the left is closed:
Seems that both divs are inline, the problem occurs when I press show button and the menu appears:
BUG actually noticed:
When the menu is opened I get the divs in two line instead of one row
Adding the class col-sm-2 to resource-bar the overflow-x: hidden; doesn't working, in fact, seems that the menu is visible when it should be closed.
col-sm-2 does not go in another line when the minimum resolution of the screen doesn't have enough space in width.
Someone could help me to fix this issues? Thanks. JSFIDDLE.

Edited to another workaround which wouldn't affect bootstrap grid:
With this setup sidebar would be absolute, since it's out of viewport and you set it to a fixed width (250px), using the grid wouldn't be necessary.
Visible input will not overflow once sidebar shows.
Raised buttons above sidebar.
Note the HTML structure was tweaked.
$(document).ready(function() {
var resourceContainer = $('#resource-bar');
var calendarContainer = $('#calendar-container');
$('#show').click(function() {
resourceContainer.css('width', '250px');
calendarContainer.css('margin-left', '250px');
});
$('#hide').click(function() {
resourceContainer.css('width', '0px');
calendarContainer.css('margin-left', '0px');
});
})
div.sidenav {
background-color: azure;
height: 100%;
width: 0;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.5s;
/* added absolute to sidenav since it will have fixed width anyways */
position: absolute;
}
#calendar-container {
background-color: whitesmoke;
transition: margin-left .5s;
padding: 16px;
/* this is just to vertically align with sidebar input */
padding-top: 36px;
}
button {
position: relative;
z-index: 2;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="calendar-wrapper">
<div class="container-fluid">
<div class="row">
<div id="calendar-container" class="col-sm-12">
<div id="calendar" class="well"></div>
</div>
<div id="resource-bar" class="sidenav">
<h4>Resource</h4>
<div class="input-group">
<input type="text" placeholder="Search resource" class="form-control resource-filter" />
<span class="input-group-btn">
<button class="clear btn btn-default clean-resource btn-danger" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
<div id="popover-content" hidden></div>
</div>
</div>
</div>
</div>
<br>
<br>
<br>
<button type="button" id="show">Show</button>
<button type="button" id="hide">Hide</button>

You're issue lies with the mix of bootstrap and your own JavaScript generated style. It seems you already have knowledge of the Bootstrap Grid layout, but to reinforce, https://v4-alpha.getbootstrap.com/layout/grid/ will tell you that there are 12 columns in a row.
Each column is styled by Bootstrap to a set width with set margins in between. You've have all 12 columns filled up in your row. As you add an additional margin to your already-filled-up calendarContainer column, it will pop out of the row.
Therefore, the easiest way to achieve what you want without affecting any other styles is too make your column smaller and reduce the amount of 'margin-left' you push on the column like so https://jsfiddle.net/Zeenglishking/DTcHh/28837/
<div id="calendar-container" class="col-sm-8">
<div id="calendar" class="well"></div>
</div>
$('#show').click(function()
{
resourceContainer.css('width', '250px');
calendarContainer.css('margin-left', '50px');
});
Also, as you say "seems infact that the menu is even visible also when is closed.", the menu is indeed visible. This is again down to the fact of the bootstrap styling of the grid-layout. If you can figure out what styles are creating this issue (F12), you can override them using "something:!important". https://css-tricks.com/snippets/css/style-override-technique/ . Otherwise, find another way. If you mess around with css positioning elements too much, it's easy to get lost and jumbled with the rest of your code.
EDIT (in regard to comment):
What needs to be used in addition to this is 'col-xs-**' with a smaller size column, allowing for a responsive design and for it to work on the smaller viewports such as the one in JSFiddle. I have updated my fiddle to include
col-xs-1
and
col-xs-4
on resource-bar and calendar-container respectively. This will change the size of the column, upon resize of the screen/viewport to ensure it doesn't drop down on extra-small viewports. More info at http://getbootstrap.com/css/#grid-options
Upon using Bootstrap framework you almost acquire yourself to a certain standard. Shortcuts in fixing this can cause problems with other elements. You're probably best to read more into it before chucking random positioning in to fix certain elements on a page.

How to add `scroll` bar to a `div`, when its height as `auto`

In my container, there is multiple childrens, one of the 'div' getting appended by content in that.
when the total height of the container(parent) overflows, i would like to add the scroll bar to the div
is it possible to do by css?
here is the html :
<div id="container">
<div>
<h2>Heading</h2>
</div>
<div class="content">
</div>
<div class="footer">
Footer
</div>
</div>
<button>Add</button>
Js :
var p= "</p>Some testing text</p>";
$('button').click(function(){
$('.content').append(p);
});
jsfiddle
UPDATE
I don't want to put the over-flow to container, if so my footer will hide. i require my user need to see the add button always. I can't put my button out side of the container again there would be multiple content in to the container
UPDATE
I find a solution by js is it possible to made without using `js'?
jsSolution

Yes, it is possible to do in CSS. Simply add this CSS rule to #container:
overflow-y:scroll;
Alternatively add this to show the scroll bar only when necessary:
overflow-y:auto;

http://jsfiddle.net/doesfmnm/2/
var p= "</p>Some testing text</p>";
$('button').click(function(){
$('.content').append(p);
});
.content{
border:1px solid red;
height:300px;
width:200px;
overflow-y:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div>
<h2>Heading</h2>
</div>
<div class="content">
</div>
<div class="footer">
Footer
</div>
</div>
<button>Add</button>
Adding a little more explanation to what #Guy3000 said. You're appending (adding after) into an element with the class 'content'. Let's consider what that means for the parent .container class. By adding content into a div inside of the parent, your parent will need to either grow to compensate for the added content, or it will need to have a y-axis scroll that permits content longer than the height of the container.
This means you can approach the dilemma you're facing by adding height to the container element, or you can keep a fixed height on the container and have a frame with a y-axis scroll bar contain the added content.

Here is the solution i find :
<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down">
<div class="content"></div>
</div>
<div class="misc"><button>Add</button></div>
</div>
css :
#container { width: 300px; height: 300px; border:1px solid red;display:table;}
#up { background: green;display:table-row;height:0; }
#down { background:pink;display:table-row; overflow-y:auto}
.misc {
display:table-row;
background:gray;
height:30px;
}
.content {
overflow:auto;
height:100%;
}
Live
js solution :
http://jsfiddle.net/doesfmnm/4/

positioning 3 divs in a div

i'm facing to css problem.basically i have main div tag and 3 div s class named pic_con,body_con and msg_con .
div msg_con length and height depend on the text of it.if text is too long it should have morethan one line to display all.look at the picture.first one with small text,second one with big text ..div msg_con have minimem width and maximum width.
i want to position this 3 div look like in the picture.
<div id="apDiv1">
<div id="div_id_1" class="msg_w_1">
<div class="pic_con">
<div class="body_con">small icon"</div>
<div class="msg_con">hi</div>
</div>
<div id="div_id_2" class="msg_w_1">
<div class="pic_con">
<div class="body_con">small icon"</div>
<div class="msg_con">hey this is multiline text</div>
</div>
</div>
my css
.pic_con {
float:left;
background-color:#096;
}
.back_con {
float:left;
background-color:#3CC;
border:5px solid red;
width:150;
}
.body_con {
/*float:left;*/
margin:0 auto 0 auto;
background-color:#C39;
border:5px solid red;
}
i set flote left but it's not work.

As far as I understood you want to align them one after another.
You can manage this, as you tried, by using float: left. Furthermore, you should set the parent div to clear: both.
Another thing that I saw is that you didn't close the pic-con DIVs. Try with this:
HTML
<div id="apDiv1">
<div id="div_id_1" class="msg_w_1">
<div class="pic_con">pic</div>
<div class="body_con">small icon</div>
<div class="msg_con">hi</div>
</div>
<div id="div_id_2" class="msg_w_1">
<div class="pic_con"></div>
<div class="body_con">small icon"</div>
<div class="msg_con"> hey this is multiline text</div>
</div>
</div>
CSS
.msg_w_1 {
clear: both;
}
.msg_w_1 div {
float: left;
}
Edit: I didn't see the updated post containing CSS when I posted this. Try removing the float: left and width from your CSS classes before trying this

use display:table style.
.msg_con {
display : table
}
this makes .msg_con behave like a table element, it will re-size according to its content's length ( both height and width ).