We Keep Coding

Open-Close sections on a webpage?

On site, scroll down few times to show tiles. Click any tile which will display two sections.
One from right, another from left side and overlays landing page.
Both sections can be exited by clicking close button on the right side.
How to do similar open-close effect of sections?

$(document).on('click','#boxes div', function(e){
$('body').addClass('show-menus');
});
$(document).on('click','.close', function(e){
$('body').removeClass('show-menus');
});
#boxes div {
display:inline-block;
width:20%; padding-bottom:20%;
background:red;
cursor:pointer;
}
#boxes div:nth-child(even) {
background:blue;
}
#boxes div:hover {
opacity:0.5;
}
.left, .right {
transition:600ms ease-in-out transform;
position:fixed; top:0; height:100vh;
}
.left {
background:green; width:60%;
left:0;
transform:translate3d(-100%,0,0);
}
.right {
background:purple; width:40%;
right:0;
transform:translate3d(100%,0,0);
}
.show-menus .left, .show-menus .right {
transform:translate3d(0,0,0);
}
.right .close {
position:absolute;
top:10px; right:0;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes">
<div></div><div></div><div></div><div></div><div></div>
</div>
<div class="left"></div>
<div class="right"><button class="close">close</button></div>

Horizontal scrolling UL with buttons and "width:auto" lists

As the title suggests, I am trying to create a horizontal scrollable <ul> with <li> with width:auto and with prev and next buttons, clearly with overflow:hidden.
Any suggestions on how to manage it with jquery?
This is the code that I have prepared...
JSFiddle
HTML:
<div id="wrapper">
<span class="arrow"><</span>
<span class="arrow">></span>
<ul id="nav">
<li>Abbaiare</li>
<li>Bolle</li>
<li>Cantante</li>
<li>Domodossola</li>
<li>Elefante</li>
<li>Giovanni</li>
<li>Hotel</li>
<li>Inti</li>
<li>Montagna</li>
<li>Nave</li>
</ul>
</div>
CSS:
* {
margin:0;
padding:0;
}
#wrapper {
width:calc(100% - 120px);
height:60px;
background-color:#dbdbdb;
padding:0 60px;
margin-top:60px;
font-family:helvetica;
overflow:hidden;
position:relative;
z-index:99;
}
.arrow {
display:block;
width:60px;
height:60px;
line-height:60px;
text-align:center;
background-color:#cccccc;
font-weight:bold;
cursor:pointer;
position:absolute;
top:0;
z-index:101;
}
.arrow:first-of-type {
left:0;
}
.arrow:nth-of-type(2) {
right:0;
}
#nav {
width:auto;
height:60px;
overflow:hidden;
list-style-type:none;
white-space:nowrap;
transition:2.0s;
}
#nav li {
display:inline-block;
height:60px;
line-height:60px;
font-size:13px;
padding:0 30px;
}

You can simply use bxSlider without reinventing the wheel. To make your code work, you just need to add:
$(function () {
$('#nav').bxSlider({
pager: false,
minSlides: 3,
maxSlides: 3,
slideWidth: 150,
slideMargin: 25
});
});
#wrapper {
margin: auto;
}
.bx-viewport {
height: 50px !important;
padding: 0 30px;
box-sizing: border-box;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.easing.1.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.fitvids.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" />
<div id="wrapper">
<ul id="nav">
<li>Abbaiare</li>
<li>Bolle</li>
<li>Cantante</li>
<li>Domodossola</li>
<li>Elefante</li>
<li>Giovanni</li>
<li>Hotel</li>
<li>Inti</li>
<li>Montagna</li>
<li>Nave</li>
</ul>
</div>

Hoping it will be useful for anyone, This what I needed...
(Thank you Praveen Kumar)
JSFiddle
$(".arrow:first-of-type").click(function() {
var navwidth = $("#nav");
navwidth.animate( { scrollLeft: '-=200' }, 1000);
}
);
$(".arrow:nth-of-type(2)").click(function() {
var navwidth = $("#nav");
navwidth.animate( { scrollLeft: '+=200' }, 1000);
}
);

When scroll page down appear and dissapear element

Whenever I scroll page down to bottom of B element my sticky element (which is the display none; on the top) must be appear and if I scroll page up to top of my B element my sticky must be hidden.
my codes
HTML
<html>
<head>
</head>
<body>
<ul class="sticky">
<li>Home</li>
<li>About Us</li>
<li>Download</li>
<li>Forums</li>
<li>Contact</li>
</ul>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
</html>
CSS
.container {
width:1020px;
margin:0 auto;
}
.container>div{
width:100%;
height:300px;
background:#f0f0f0;
border:1px solid #ccc;
margin:100px 0;
}
.a:after{
content:"A";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.b:after{
content:"B";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.c:after{
content:"C";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
ul.sticky{
list-style-type:none;
padding:0;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
background:#f0f0f0;
height:50px;
border-bottom:5px solid #ccc;
display:none;
}
ul.sticky:after,ul.sticky:before{
content:"";
display:table;
clear:both;
}
ul.sticky li a{
display:block;
float:left;
line-height:50px;
padding:0 30px;
text-decoration:none;
color:#999;
}
ul.sticky li a:hover{
background:#999;
color:#f0f0f0;
}
(in my css I have sticky element which is none appear)
JQUERY
$(function() {
$(window).scroll(function() {
/* I dont't know what I have to do */
});
});
click to see on codepen

I've solved it by doing this, it appears after you pass the bottom of .b and hides if not:
$(function() {
$(window).scroll(function() {
if($(window).scrollTop() > $(".b").offset().top+$(".b").height()){
$(".sticky").show();
}else{
$(".sticky").hide();
}
});
});

Suggested Solution:
Add this to your jquery code:
$(function() {
var targetOffset = $(".b").offset().top; //based on this div, the sticky element should appear
var $w = $(window).scroll(function(){
if ( $w.scrollTop() > targetOffset ) {
$(".sticky").show(); //show the sticky element
} else {
$(".sticky").hide();//hide the sticky element
}
});
});
Whenever I scroll page down to bottom of B element my sticky element must appear
If I scroll page up to top of my B element my sticky must be hidden

You need to check the scrollTop of the document to see how far you are from the top, then compare that to the scrollTop of the element you are scrolling to (to see if you have reached it)
The reason you should cache your selectors, like I have, is that the onScroll event triggers A LOT. So if you have $('ul.sticky').dosomethign inside of $.scroll(), you are A.) creating that jquery object, B.) querying the DOM C.) doing stuff. This can get rather expensive for performance. Typically if you are going to do an onScroll event handler, you should add a debounce or throttle to it to limit the number of times the handler function is called.
$(function() {
var $sticky = $('ul.sticky');
var bToTop = $('.b').scrollTop();
$(window).scroll(function() {
if($(document).scrollTop() > bToTop){
$sticky.show();
}
else {
$sticky.hide();
}
});
});
.container {
width:1020px;
margin:0 auto;
}
.container>div{
width:100%;
height:300px;
background:#f0f0f0;
border:1px solid #ccc;
margin:100px 0;
}
.a:after{
content:"A";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.b:after{
content:"B";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.c:after{
content:"C";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
ul.sticky{
list-style-type:none;
padding:0;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
background:#f0f0f0;
height:50px;
border-bottom:5px solid #ccc;
display:none;
}
ul.sticky:after,ul.sticky:before{
content:"";
display:table;
clear:both;
}
ul.sticky li a{
display:block;
float:left;
line-height:50px;
padding:0 30px;
text-decoration:none;
color:#999;
}
ul.sticky li a:hover{
background:#999;
color:#f0f0f0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<ul class="sticky">
<li>Home</li>
<li>About Us</li>
<li>Download</li>
<li>Forums</li>
<li>Contact</li>
</ul>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
</html>
If you want to show the sticky only when you have reached the end of element b, you can do var bToTop = $('.b').height() + $('.b').scrollTop();

codepen
$(document).on("scroll", function() {
if ($(document).scrollTop() >= 600) {
$("ul").css({"display":"initial"});
}
if($(document).scrollTop() <=600) {
$("ul").css({"display":"none"});
}
});

This should be the proper and correct solution.
Just change the display: none to visibility: hidden;.
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > $(".a").offset().top + $(".a").height()) {
$(".sticky").css({
"visibility": "visible"
});
} else {
$(".sticky").css({
"visibility": "hidden"
});
}
});
});
.container {
width:1020px;
margin:0 auto;
}
.container>div{
width:100%;
height:300px;
background:#f0f0f0;
border:1px solid #ccc;
margin:100px 0;
}
.a:after{
content:"A";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.b:after{
content:"B";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.c:after{
content:"C";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
ul.sticky{
list-style-type:none;
padding:0;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
background:#f0f0f0;
height:50px;
border-bottom:5px solid #ccc;
visibility: hidden;
}
ul.sticky:after,ul.sticky:before{
content:"";
display:table;
clear:both;
}
ul.sticky li a{
display:block;
float:left;
line-height:50px;
padding:0 30px;
text-decoration:none;
color:#999;
}
ul.sticky li a:hover{
background:#999;
color:#f0f0f0;
}
.show{
display:block;
}
<html>
<head>
</head>
<body>
<ul class="sticky">
<li>Home</li>
<li>About Us</li>
<li>Download</li>
<li>Forums</li>
<li>Contact</li>
</ul>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
</html>

CSS with right border - Nested

I am attempting to nest some divs. Each div is a unit which contains a right div and a left div. The left div can contain more units or single non-child units. Basic tree structure. However, I can't seem to get the css to work for what I'm going for.
I've created a js fiddle for it, listed below. The code is also below. I've also included a picture of what I'm going for. Any help is appreciated. I am open to jquery/javascript solutions.
JSFiddle
http://jsfiddle.net/atsFA/
HTML
<div id="main">
<div class="inmain">
<div class="inleft">
<div class="inthing">
Thing THing Thing X
</div>
<div class="inmain">
<div class="inleft">
<div class="inthing">
thing2 thing2 thing2 X
</div>
</div>
<div class="inright">
R<br/>
I<br/>
G<br/>
H<br/>
T<br/>
2
</div>
</div>
</div>
<div class="inright">
R<br/>
I<br/>
G<br/>
H<br/>
T<br/>
1
</div>
</div>
</div>
CSS
#main{
width:600px;
height:600px;
background-color:grey;
position:relative;
}
.inmain{
width:100%;
border:2px solid black;
position:relative;
height:100%;
}
.inleft{
background-color:blue;
position:relative;
width:100%;
margin-right:20px;
height:100%;
}
.inright{
background-color:green;
position:absolute;
width:20px;
right:0px;
top:0px;
}
Image for Reference

I have used nested classes and nth-child or nth-of-type basing on your html structure.
Bear in mind I have used padding-bottom: 22px to take into account of your 2px border.
You can try:
#main{
width:600px;
height:600px;
position:relative;
}
.inmain{
width:100%;
position:relative;
height:100%;
}
.inmain:nth-of-type(2){
border:2px solid black;
position:relative;
height:100%;
width:96%;
}
.inmain:nth-child(1) .inleft{
background:white;
position:relative;
width:100%;
margin-right:20px;
height:100%;
padding-bottom:22px;
}
.inmain:nth-child(2) .inleft{
background:blue;
position:relative;
width:100%;
margin-right:20px;
height:100%;
padding-bottom:0;
}
.inmain .inleft .inmain .inright{
background-color:#00FF00;
position:absolute;
width:20px;
right:0px;
top:0px;
height:100%;
padding-bottom:0;
}
.inmain .inright{
background-color:#00FF00;
position:absolute;
width:20px;
right:0px;
top:0px;
height:100%;
padding-bottom:22px;
}
Check this DEMO: http://jsfiddle.net/atsFA/12/

Using the below JQuery method with the css worked. The 22px less on the width is to account for a scroll bar, if one is used.
function setConstructSizes(element) {
//Set split group heights
element.find(".inthing").each(function () {
var hR = $(this).parent().parent().children(".inright").first().height();
if (hR > $(this).height()) {
$(this).height(hR);
}
});
//Set width of all inner lefts
element.find(".inleft").each(function () {
var p = $(this).parent();
var w = p.width();
$(this).width(w - 22);
});
//Set height of all inner rights
element.find(".inright").each(function () {
$(this).height($(this).parent().height());
});
}
.inmain
{
position:relative;
width:100%;
border-top:1px solid black;
border-bottom:1px solid black;
text-align:left;
}
.inleft
{
position:relative;
}
.inright
{
text-align:center;
border-left:1px solid black;
border-right:1px solid black;
width:20px;
position:absolute;
right:0px;
top:0px;
}

Image resizing issue in Slides

The problem is, in one of my pages I have a slide, where my images are 1920x1080 while the slide is just set to 1350 as width. My images are not getting centered, you just see about 1/3 of the picture's top left-middle-ish. The slide also doesn't reach out to the ends (<---->) of the screen, there's this tiny space there. Any solutions?
Picture: http://tinypic.com/view.php?pic=29crp7a&s=6
Code
Html:
<div id="container">
<div id="banner">
<ul class="bjqs">
<li><img src="images/lamborghini/av_lp700-4_roadster_ov3_v2_1920x1080.jpg" title="This is my slideshow!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_home_1920x1080.jpg" title="Apparently it works!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_spyder_home_1920x1080.jpg" title="By Andreas!"></li>
</ul>
</div>
</div>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/basic-jquery-slider.min.js"></script>
<script>
$(document).ready(function() {
$('#banner').bjqs({
'animation' : 'slide',
'width' : 1350,
});
});
</script>
Css:
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
/* demo styles */
body{
font-family: 'Carter One', sans-serif;
}
#container{
width:100%;
padding:20px 0;
margin:0 auto;
overflow:hidden;
}
#banner {
height:300px;
width:700px;
margin:0 auto;
position:relative;
background:#fff;
#fff solid;
}
ul.bjqs-controls li a{
display:block;
padding:5px 10px;
position:absolute;
background:#000000;
color:#fd0100;
text-decoration:none;
text-transform:uppercase;
}
a.bjqs-prev{
left:0;
}
a.bjqs-next{
right:0;
}
p.bjqs-caption{
background:rgba(0,0,0,0.7);
color:#fff;
text-align:center;
}
ol.bjqs-markers{
position:absolute;
bottom:-50px;
}
ol.bjqs-markers li{
float:left;
margin:0 3px;
}
ol.bjqs-markers li a{
display:block;
height:10px;
width:10px;
border:4px solid #fff;
overflow:hidden;
text-indent:-9999px;
background:#000;
border-radius:10px;
}
ol.bjqs-markers li.active-marker a{
background:#fd0100;
}

The solution is very simple actually.
You need to set a width to your images to 100% in your CSS.
.bjqs img {
width:100%;
}
Hope that helps, good luck