how to use horizontal scroll feature in tinyscroll plugin - javascript

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

Related

Centering HTML Content Inside Colorbox Iframe

I am using Jack Moore's Colorbox. I am having an HTML file open in an iframe popup. When the screen is smaller than the width of the content, the alignment is always at essentially left: 0.
I have noodled around witch the colorbox css and I can't seem to get this one figured out.
HTML:
<h2><a class="iframe" href="videolinks.html">[CLICK HERE]</a></h2>
CSS:
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; text-align: center; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%; text-align: center;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; }
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin: 0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
#cboxOverlay{background:url(../images/colorbox/overlay2.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90); z-index: 9999;}
#colorbox{outline:0;}
#cboxTopLeft{width:21px; height:21px; background:url(../images/colorbox/controls2.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(../images/colorbox/controls2.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(../images/colorbox/controls2.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(../images/colorbox/controls2.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(../images/colorbox/controls2.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(../images/colorbox/controls2.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(../images/colorbox/border2.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(../images/colorbox/border2.png) 0 -29px repeat-x;}
#cboxContent{background:white; height: 100%; margin: auto;}
.cboxIframe{background:#fff; margin-right: 0;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:0px;} /* THIS WAS '28px' WHICH CAUSED A BAR ALONG THE BOTTOM */
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxLoadingOverlay{background:url(../images/colorbox/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(../images/colorbox/loading.gif) no-repeat center center;}
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(../images/colorbox/controls2.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(../images/colorbox/controls2.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxClose{position:absolute; top:0; left:0; opacity: 0.7; background-image: url(../images/colorbox/x2.png); background-size: 35px; width:35px; height:35px; text-indent:-9999px;}
#cboxClose:hover{opacity: 1.0}

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);
})

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

Footer stuck in slideshow

I imported a wow slider to my webpage and now my footer is stuck in it. I tried using www.cssstickyfooter.com but it didn't work. I think is has something to do with the position element the slideshow uses. What would be causing this?
LIVE DEMO: http://epicureancateringaz.com/New/123
#footer{
position: relative;
margin-top: -100px;
height: 100px;
clear:both;
background-image:url(../images/backgrounds/footerback.png);
}
#wowslider-container1 {
zoom: 1;
position: relative;
max-width:1000px;
margin:9px auto 9px;
z-index:90;
border:9px solid #FFFFFF;
text-align:left; /* reset align=center */
}
#wowslider-container1 .ws_images ul{
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
You've inserted div#footer into your slideshow div. Just pull it out.

Categories