90 degree flipped vertical responsive div - javascript

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

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.

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

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.

CSS/JQUERY make div scrollable without showing scrollbar

is there any way to make a div scrollable with overflow-y:hidden; and overflow-x:hidden?
i'm trying without success, maybe i need some js or jquery script?
i mean, i would like to make div scroll on y axes without showing scrollbar on right side( as it is now).
itryed:
.get-list{
position:absolute;
z-index:444;
text-align: center;
display: none;
bottom:0;
clear:both !important;
left:0;
right:0;
top:11%;
margin:0 auto;
background:#fff;
max-height:800px;
overflow-y:no-display;
overflow-x:hidden;
display: block;
}
thanks
EDIT
.log-widget-list{
position:absolute;
z-index:444;
text-align: center;
display: none;
width:99%;
margin:0 auto;
background:#fff;
height:800px;
overflow: hidden;
}
.log-widget-list .scroller{
overflow: scroll;
height:800px;
width:100%;
}
it shows right scrollbar anyway
Let's create a div with a width of 200px: (note the overflow:hidden)
#sidebar{
width: 200px;
height: 300px;
border: 1px solid #000;
overflow: hidden;
}
Inside that div we will create the 'scrollable' div. See:
#sidebar #scroller{
width: 215px;
height: 300px;
padding-bottom: 15px;
overflow: scroll;
}​
Altough we give it overflow:scroll, the scrollbar isn't visible. This is because this div has a total width of 215px which will make the scrollbar disappear outside the div.
Also see: http://jsfiddle.net/TBsN8/
fixed as shown thanks to Sebass van Boxel
.log-widget-list{
position:absolute;
display: none;
width:98% !important;
top:11%;
max-height:500px;
overflow: hidden;
bottom:0 !important;
left:0;
right:0;
margin:0 auto !important;
}
.log-widget-list .scroller{
overflow: scroll;
max-height:500px;
padding-bottom:3%;
width:104% !important;
}

Categories