Center multiple elements in a fluid fixed div - javascript

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

Related

Stop the propagation of an outline? CSS

I'm trying to add a search box that has an outline animation, this oneI
form {
display:block;
left:50%;
position:absolute;
top:30%;
input[type=search] {
border:solid 3px #fff;
box-sizing:border-box;
font-size:2em;
height:2em;
margin-left:-15vw;
outline:solid #fc0 0;
padding:.5em;
transition:all 2s ease-in;
width:30vw;
z-index:1;
&:focus {
border:solid 3px #09f;
outline:solid #fc0 2000px;
}
}
In specific and what this does is create a form where as the input produces a 2000px massive outline throughout the body - my question is: Is it possible to have a wrapping div around this form and have some sort of command to stop the propagation of the outline? In order to have the outline only manifest itself inside of the containing div and not to the whole page.
If the solution is not available in CSS, I'm open to JS ones, aswell.
Thanks in advance!
I've inserted input into a div, which has overflow: hidden css property, which stops outline from showing.
Here is working codepen
SASS
$shadow: #fc0;
html {
background-color:#ccc;
}
#outlineBorder {
width: 800px;
height: 200px;
display:flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
form {
input[type=search] {
border:solid 3px #fff;
box-sizing:border-box;
font-size:2em;
height:2em;
outline:solid #fc0 0;
padding:.5em;
transition:all 2s ease-in;
width:30vw;
z-index:1;
&:focus {
border:solid 3px #09f;
outline:solid #fc0 2000px;
}
}
}
HTML
<form>
<div id="outlineBorder">
<input type="search" placeholder="Search...">
</div>
</form>

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.

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

Nivo Slider issue, sliding off original position

so I'm no CSS wizard or Nivo slider master.. I got this working on a page of mine that had nothing with it to begin with.. but when I try to get it working with my prostores page the images come up but the sliding then moves up and left and does it for every slide. I assume there must be some CSS that I need to change.. or something.. but since I dont know much about CSS I dont know what to change.. I just left the default settings in here..
here is where I was testing
http://www.securemycargo.com/servlet/the-template/testnivo/Page
any pointers are appreciated
ok here is the default CSS`
.theme-default .nivoSlider {
position:relative;
background:#fff url(loading.gif) no-repeat 50% 50%;
margin-bottom:10px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.theme-default .nivoSlider a {
border:0;
display:block;
}
.theme-default .nivo-controlNav {
text-align: center;
padding: 20px 0;
}
.theme-default .nivo-controlNav a {
display:inline-block;
width:22px;
height:22px;
background:url(bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin: 0 2px;
}
.theme-default .nivo-controlNav a.active {
background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(arrows.png) no-repeat;
text-indent:-9999px;
border:0;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.theme-default:hover .nivo-directionNav a { opacity: 1; }
.theme-default a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
.theme-default a.nivo-prevNav {
left:15px;
}
.theme-default .nivo-caption {
font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
color:#fff;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled {
width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
width: auto;
height: auto;
background: none;
margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
display: block;
width: 120px;
height: auto;
}`
and I took out the table entry.. does the same thing..I assume I need one of these
CSS entries to be modified ?
UPDATE: Layout issues aside, I think this is your primary problem:
GET http://www.securemycargo.com/.../nivo-slider.css 404 (Not Found)
CSS is a critical part of such a utility. Without it, overflow isn't controlled and images aren't sized properly. I've placed the file at http://dq3f8u841c3z3.cloudfront.net/wp-content/plugins/nivo-slider/scripts/nivo-slider/nivo-slider.css in your page via dev tools and it solves your issue.
At least part of the problem is that you're using tables for layout, and the table isn't wide enough. The images aren't shown on load, so the browser makes it too narrow. At a minimum, set the width of the table to 100% to let it use the entire main column:
<table width="100%">
<tr>...
Note that the width attribute is deprecated. If you're using tables for layout, though, you probably don't much care. If you happen to care, use CSS instead:
<table class="main-col">
<tr>...
<style>
.main-col {width: 100%;}
</style>
Better: remove that table altogether. Tables are for data, and this one has just one cell in it anyway.

Categories