We Keep Coding

How to add navigation to this js slider

VERY new to JS and I need to add navigation to this image slider that my website uses. Like arrows that let me move back and forth between the images. I know it's got something to do with this part of the code
#slider div.navBulletsWrapper {
display:none;
top:320px;/* Its position is relative to the #slider */
text-align:center;
background:none;
position:relative;
z-index:5;
But I don't know what command the "display:" is supposed to have. Here is the full js code below.
/* http://www.menucool.com */
#sliderFrame, #sliderFrame div {
box-sizing: content-box;
}
#sliderFrame
{
position:relative;
width:660px;
margin:0 auto; /*center-aligned*/
}
#slider, #slider div.sliderInner {
width:660px;height:280px;/* Must be the same size as the slider images */
}
#slider {
background:#fff url(loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto; /*center-aligned*/
transform: translate3d(0,0,0);
box-shadow: 0px 1px 5px #999999;
}
/* image wrapper */
#slider a.imgLink, #slider div.video {
z-index:2;
position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
#slider .video {
background:transparent url(video.png) no-repeat 50% 50%;
}
/* Caption styles */
#slider div.mc-caption-bg, #slider div.mc-caption-bg2 {
position:absolute;
width:100%;
height:auto;
padding:10px 0;/* 10px will increase the height.*/
left:0px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
bottom:0px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
z-index:3;
overflow:hidden;
font-size: 0;
}
#slider div.mc-caption-bg
{
/* NOTE: Its opacity is to be set through the sliderOptions.captionOpacity setting in the js-image-slider.js file.*/
background:Black;/* or any other colors such as White, or: background:none; */
}
#slider div.mc-caption-bg2 {
background:none;
}
#slider div.mc-caption {
font: bold 14px/20px Arial;
color:#EEE;
z-index:4;
text-align:center;
background:none;
}
#slider div.mc-caption a {
color:#FB0;
}
#slider div.mc-caption a:hover {
color:#DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
/* Note: check themes\2\js-image-slider.css to see how to hide nav bullets */
#slider div.navBulletsWrapper {
display:none;
top:320px;/* Its position is relative to the #slider */
text-align:center;
background:none;
position:relative;
z-index:5;
}
/* each bullet */
#slider div.navBulletsWrapper div
{
width:8px; height:8px;
font-size:0;color:White;/*hide the index number in the bullet element*/
background:transparent url(bullet.png) no-repeat 0 0;
display:inline-block; *display:inline; zoom:1;
overflow:hidden;cursor:pointer;
margin:0 6px;/* set distance between each bullet*/
}
#slider div.navBulletsWrapper div.active {background-position:0 -11px;}
/* --------- Others ------- */
#slider div.loading
{
width:100%; height:100%;
background:transparent url(loading.gif) no-repeat 50% 50%;
filter: alpha(opacity=60);
opacity:0.6;
position:absolute;
left:0;
top:0;
z-index:9;
}
#slider img, #slider>b, #slider a>b {
position:absolute; border:none; display:none;
}
#slider div.sliderInner {
overflow:hidden;
-webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/
position:absolute; top:0; left:0;
}
#slider>a, #slider video, #slider audio {display:none;}
#slider div {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
Any help would be appriciated.

90 degree flipped vertical responsive div

I am attempting to have an inner div be responsive to a parent div so that if the parent div resizes, the inner div will also resize. I managed to flip the contents in the parent div, but after experimenting with a few things, I wasn't able to come with an adequate result.
What I'm trying to accomplish:
-Inner div is 100% height of parent div.
-Inner div's height is responsive to parent div's height.
-Inner div is 90 degree flipped.
-Inner div sticks to the left side of the parent div.
My jsfiddle:
https://jsfiddle.net/4obd6ye3/
.ok{
width:100px;
height:500px;
display:flex;
flex-direction:column;
border:1px solid black;
position:relative;
float:left;
}
.heh{
float:left;
position: absolute;
top: 0px;
left: 100%;
transform-origin: left bottom;
transform: rotate(-90deg);
border:1px solid green;
/* height:100%;
width:100%; */
}
*{
box-sizing:border-box;
margin:0;
padding:0;
}
<div class="ok">
<div class="heh">
hey
</div>
</div>

You'll need JavaScript to maintain 100% height through resizing the bounding box. My example uses jQuery:
CSS:
.ok{
width:100px;
height:500px;
display:flex;
flex-direction:column;
border:1px solid black;
position:relative;
float:left;
}
.heh{
float:left;
position: absolute;
bottom: 0px;
left: 100%;
transform-origin: left bottom;
transform: rotate(-90deg);
border:1px solid green;
/* height:100%;
width:100%; */
}
*{
box-sizing:border-box;
margin:0;
padding:0;
}
JS:
$(document).ready(function(){
var h1 = $('.ok').height();
$('.heh').width(h1);
})

jqueryUI Draggable mouse offset

Trying to code a similar feel to the ios8 Lockscreen, having a dragable item only move on the x axis.
$( "#IDlsDragable" ).draggable({ axis: "x" });
.lockscreen {
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:rgba(89,54,158,1);
background-image:url('../pics/wall.png');
background-size:cover;
background-position:center center;
}
.lockscreenFace {
position:absolute;
top:0px;
left:1080px;
width:1080px;
height:1920px;
}
.lockscreenSlider {
position:absolute;
top:0px;
left:-1080px;
width:200%;
height:100%;
}
.lockscreenClock {
position:absolute;
top:110px;
left:0px;
width:100%;
height:300px;
font-size: 296px;
color:white;
text-align:center;
}
.lockscreenDate {
position:absolute;
top:432px;
left:0px;
width:100%;
height:80px;
font-size: 60px;
color:white;
text-align:center;
}
.lockscreenSlideText {
position:absolute;
bottom:234px;
left:0px;
width:100%;
height:80px;
font-size: 80px;
font-weight:bold;
color:white;
text-align:center;
background:url('../pics/highlight.png');
-webkit-animation: slidetounlock 3s infinite linear;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.lockscreenSlideText:before {
content: "\f105";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
font-size:85px;
line-height:1;
-webkit-font-smoothing: antialiased;
}
#-webkit-keyframes slidetounlock {
0% {
background-position: -880px 0;
}
100% {
background-position: 0px 0;
}
}
<div class="lockscreen">
<div id="IDlsDragable" class="lockscreenSlider">
<div class="lockscreenFace">
<div id="IDlsClock" class="lockscreenClock">
#TIME#
</div>
<div id="IDlsDate" class="lockscreenDate">
#DATE#
</div>
<div class="lockscreenSlideText">
slide to unlock
</div>
<div class="cameraGrabby">
</div>
</div>
</div>
</div>
When I begin to drag it to the right the div "lockscreenSlider" jerks to the right.

transform:scale([anything]);
this causes issues with mouse offset

how to use horizontal scroll feature in tinyscroll plugin

I am using tiny scroll bar function from http://baijs.com/tinyscrollbar/ , Documentation said we can use the horizontal feature by setting the x axis like below
$(document).ready(function(){
$("#scrollbar1").tinyscrollbar({ axis: "x"});
});
But Only vertical is working for me , not horizontal.I want to make it work with horizontal scrollbar and custom width.
Fiddle : http://jsfiddle.net/874pzsvL/

You are missing the CSS for the horizontal. Check this link and search for #scrollbar2. In the fiddle I replaced the CSS and renamed scrollbar1 to scrollbar2 as their CSS is targetting #scrollbar2 for horizontal styling.
/* scrollbar2 */
#scrollbar2
{
width:251px;
margin:0 0 10px;
}
#scrollbar2 .viewport
{
width:236px;
height:125px;
overflow:hidden;
position:relative;
}
#scrollbar2 .overview
{
list-style:none;
width:1416px;
padding:0;
margin:0;
position:absolute;
left:0;
top:0;
}
#scrollbar2 .overview img
{
float:left;
}
#scrollbar2 .scrollbar
{
background:transparent url(../images/bg-scrollbar-track-x.png) no-repeat 0 0;
position:relative;
margin:0 0 5px;
clear:both;
height:15px;
}
#scrollbar2 .track
{
background:transparent url(../images/bg-scrollbar-trackend-x.png) no-repeat 100% 0;
width:100%;
height:15px;
position:relative;
}
#scrollbar2 .thumb
{
background:transparent url(../images/bg-scrollbar-thumb-x.png) no-repeat 100% 50%;
height:25px;
cursor:pointer;
overflow:hidden;
position:absolute;
left:0;
top:-5px;
}
#scrollbar2 .thumb .end
{
background:transparent url(../images/bg-scrollbar-thumb-x.png) no-repeat 0 50%;
overflow:hidden;
height:25px;
width:5px;
}
#scrollbar2 .disable
{
display:none;
}
Fiddle Demo

Center multiple elements in a fluid fixed div

I am trying to center multiple elements, img and button types, in a div that is fixed to the top of the screen. I have tried all the tricks I could find on the internet but none have worked. I want it to work no matter what the windows' size is.
<div id='FixedMenu'>
<button class='MenuItem'>Home</button>
<button class='MenuItem'>About</button>
<img id='Main' src='http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png'></img>
<button class='MenuItem'>Tools</button>
<button class='MenuItem'>Events</button>
<img id='CloseMenu' src='http://upload.wikimedia.org/wikipedia/commons/d/df/Chevron_up_font_awesome.svg'></img>
</div>
http://jsfiddle.net/clarinetking/2PGZS/37/

if you add a fake flex/justify-content you can have something close to what you are looking for :
http://jsfiddle.net/2PGZS/45/
#Main {
vertical-align:middle;
height:50px;
width:80px;
}
#FixedMenu {
position:fixed;
margin:0 auto;
top:0%;
left:0%;
background:#444444;
width:100%;
height:70px;
transition: all 1s;
text-align:justify;/* prepare fake flex justify */
}
#FixedMenu:after { /* add an extra line so inline content is justified */
content:'';
display:inline-block;
width:100%;
}
#FixedMenu.active {
background: rgba(0, 0, 0, 0.0);
}
button.MenuItem {
height:40px;
width:80px;
vertical-align:middle;
}
#Start {
margin-top:100px;
}
#CloseMenu {
width:70px;
height:70px;
transition: all 1s;
vertical-align:middle;
}
#CloseMenu.opacite {
opacity:0.1;
}
alternative with uparrow always on top right http://jsfiddle.net/2PGZS/46/

Add text-align:center; to your FixedMenu css
http://jsfiddle.net/2aUbv/

There is no need in js here. Pure css.
#Main {
position:relative;
height:50px;
width:80px;
display: inline-block;
}
#FixedMenu {
position:fixed;
margin:0 auto;
top:0%;
left:0%;
background:#444444;
width:100%;
height:70px;
transition: all 1s;
text-align:center;
}
#FixedMenu.active {
background: rgba(0, 0, 0, 0.0);
}
button.MenuItem {
display: inline-block;
height:40px;
width:80px;
float:top;
}
#Start {
margin-top:100px;
}
#CloseMenu {
position:fixed;
width:80px;
height:80px;
transition: all 1s;
}
#CloseMenu.opacite {
opacity:0.1;
}
#FixedMenu * {
}