We Keep Coding

Auto-scroll to section

I need to automatic, smooth scroll from section #banner, to section #about-me if in section #banner will event scroll.
I try this:
$('#banner').bind('scroll', function(event) {
$(window).scrollTo($('#about-me'), 500);
});
but it not working. (I used scrollTo plugin).
#banner have height 100vh.

The delegation that you are looking for is mousewheel. You need to use e.preventDefault(); to block the default behavior (scroll) of the browser.
Working demo:
$('#banner').bind('mousewheel DOMMouseScroll', function(e) {
if (e.originalEvent.wheelDelta < 0) {
e.preventDefault();
$(window).scrollTo('#about-me', 500);
}
});
body {
margin:0;
}
div {
width:100%;
height:100vh;
}
#banner {
background:red;
}
#about-me {
background:green;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
<div id="banner"></div>
<div id="about-me"></div>
http://jsbin.com/dubaza/edit?html,css,js

jQuery toggle() with dblclick() changing display to none

I have created a div that when I double click it, it will expand the entire contents of the div to full screen. I now want to be able to toggle this when double clicking so it goes back to original size.
The code was working to increase the div size, but once adding the toggle() function, it now changes the display to none when I double click the first time. I assume I am just using toggle incorrectly, but am unable to figure out how to make this work.
HTML
<div class="popout-box">
<button id="btnShow">Wallboard</button>
<div class='menu' style='display: none'>
<div id="framewrap">
<button id="btnHide">Close</button><br/>
<iframe id="frame" src="https://url.com">
</iframe>
</div>
</div>
</div>
</div>
jQUery
$(document).ready(function(){
$("#framewrap").dblclick(function(){
$("#framewrap").toggle().css({"width":"100%","height":"100%","position":"fixed","left":"0px","right":"0px","top":"5px","bottom":"0px"});
});
});
CSS
#framewrap {
background-color:#1886c5;
overflow:hidden;
box-shadow: 0px 2px 10px #333;
}
#frame {
width:100%;
height:100%;
background-color:#1886c5;
}
.popout-box {
width: 400px;
height: 300px;
}
.menu {
position: absolute;
right: 15px;
}

I believe this is what you're after:
$(document).ready(function(){
$("#framewrap").dblclick(function(){
$(this).toggleClass('newClass');
});
});
CSS:
.newClass
{
width:100%,
height:100%,
...
...
}

jQuery
$(document).ready(function() {
$("#framewrap").on('dblclick', function() {
$("#framewrap").toggleClass('fixed');
});
});
CSS
.fixed {
width:100%;
height:100%;
position:fixed;
left:0;
right:0;
top:5px;
bottom:0
}

A website can start in a determinate div when load?

A website can start in a determinate div when load?
I make three divs like this.
and I want to start on the second div when the website load.
How I can do it?
html,body {
height:100%;
margin:0;
}
.content {
height:100%;
min-height:100%;
}
html>body .content {
height:auto;
}
#one {
background: #ff4444;
}
#two {
background: #ff5555;
}
#three {
background: #ff6666;
}
<div class='content' id='one'></div>
<div class='content' id='two'></div>
<div class='content' id='three'></div>

You need to use #two (id of the second div) in the url.
like this

You can use smooth animation to scroll to the div using animate:
$('html,body').animate({
scrollTop: $("#two").offset().top
}, 'slow');
Demo.
EDIT
Without Animation:
document.location.href="#two";
Demo

Use this to scroll the second div into view on load:
$(function() {
$("#two")[0].scrollIntoView();
});

How to created Fading In Navbar after scroll?

I have a cover photo which, using jscript, stretches the entire window on any resolution. When you scroll down the cover page goes up and content appears. I am trying to have the navbar fade in once the cover photo is completely scrolled up and then keep the navbar static the rest of the page unless you scroll back up to the cover photo which will have the navbar fade back out. Unfortunately if i make the position of the navbar fixed, it will not show at all. Please help.
HTML
<body>
<div id="container">
<div id="header">
</div>
<div id="navbar">
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>
</body>
CSS
html, body{
height:100%;
margin:0;
background:#F9F9F9;
/*This is to cut off the white border around the webpage*/
}
#container {
position: relative;
max-width: 2048px;
margin: 0px auto;
width: 100%;
height:100%;
}
#header {
background: url('../images/cover6.jpg') no-repeat;
background-size:cover;
height: 100%;
margin:0px auto;
width:100%;
}
#navbar ul{
list-style-type: none;
margin: 0;
padding: 0;
}
JSS
<script>
$(window).resize(function() {
$("#container").height($(window).height());
});
</script>
<script>
(function ($) {
$(document).ready(function(){
// hide .navbar first
$("#navbar").hide();
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 1000) {
$('#navbar').fadeIn();
} else {
$('#navbar').fadeOut();
}
});
});
});
}(jQuery));
</script>

make the navbar inside the header div, and change the top and left properties to 0 :
#navbar {
position:static;
margin: 0;
padding: 0;
left:0;
top:0;
}

here is the exact same effect your are looking for :
Live Demo
I've used Jquery and waypoints.js to do so easily :
$( function() {
$( "#demo-heading" ).waypoint( function() {
$( "#demo" ).fadeIn();
},
{
offset: 400
} );
$( ".site-header" ).waypoint( 'sticky' );
} );
make sure to add these two libs after Jquery :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/shortcuts/sticky-elements/waypoints-sticky.js"></script>

How to eliminate the flicker from this JQuery/CSS3 Animation

I'm trying to do an animation using css3/JQuery while clicking the side bar, the current div slides to the left and disappears, while another div which was hidden slides in sort of like a page transition.
this is what i've ATM : fiddle
HTML:
<div id='wrap'>
<header></header>
<div id='content'>
<div id='contentMenu'></div>
<div id='page1'>
<div id='left'></div>
<div id='right'></div>
</div>
<div id='page2'></div>
</div>
<footer></footer>
</div>
CSS:
* {
margin:0;
padding:0;
}
html, body, #wrap {
height:100%;
}
header {
height:15%;
background: #0080FF;
}
#content {
width:100%;
height:75%;
min-height:75%;
}
#contentMenu {
width:2%;
height:100%;
background:black;
display:inline-block;
}
#page1 {
width:97%;
height:100%;
display:inline-block;
-webkit-transition:height 5s;
}
#page1 div {
display:inline-block;
}
#left {
width:50%;
height:100%;
background:#FF8000;
}
#right {
width:40%;
height:100%;
background:grey;
display:none;
}
#page2 {
width:49%;
height:100%;
background:purple;
display:none ;
}
footer {
background: #58D3F7;
height:10%;
z-index:99;
}
.dis{
display:inline-block !important;
}
Script:
$('#contentMenu').click(function () {
$('#page1').toggle('fast', 'swing', function () {
$('#page2').toggleClass('dis');
});
});
but when the hidden div is given visibility, you can see a flicker in the footer.
is there anyway to eliminate this?
if i remove -webkit-transition:height 5s;, the div is animated from top right to bottom left ( toggle() animates height , width and opacity at same time) is it possible to disable the change in height and animate simply from right to left?
is there anyway to avoid the jQuery and achieve this using pure css3?
Any other ways to achieve the same using css animations also would be greatly appreciated :)

Adding overflow: hidden on #content should fix your problem :
#content {
overflow: hidden;
width:100%;
height:75%;
min-height:75%;
}
( updated JSFiddle here )

I like the overflow hidden idea as well. Also, you could get rid of most of the jquery by using css for the animation. Using transition position the div absolutely outside of the div with overflow:hidden. Then set .active to the position where you want it.