Develop Reference

iPhoneX-like show/hide menu/container by drag

I want to implement ability to collapse the gray .content-wrapper block (with blue sqare inside) smoothly based on drag value when user drags .drag element. What is the best and efficient way nowadays to do this for mobile touch drag?
* {
box-sizing: border-box;
color: white;
}
.drag {
width: 50px;
height: 3px;
border-radius: 3px;
opacity: 0.3;
margin: 0 auto;
background: linear-gradient(to left, white, rgba(255, 255, 255, 0.8) 50%, white 100%);
transition: opacity 0.4s;
}
.screen {
padding-top: 40px;
margin: 0 auto;
border-radius: 5px;
overflow: hidden;
background: #2b2d5b;
width: 320px;
height: 568px;
}
.controls {
background: linear-gradient(to bottom, #fd2929, #fd5c5c);
height: 100px;
}
.drag-wrapper {
display: block;
padding: 20px;
}
.drag-wrapper:active .drag,
.drag-wrapper:hover .drag,
.drag-wrapper:focus .drag {
opacity: 0.7;
}
.board {
padding: 0 20px;
}
.content-wrapper {
padding: 20px;
height: 320px;
}
.content-wrapper {
background: #444;
}
.content {
display: flex;
justify-content: center;
align-items: center;
font-family: Helvetica;
background: linear-gradient(to bottom, #3adffd, #00abfb);
height: 100%;
}
<div class="screen">
<div class="content-wrapper">
<div class="content">
.content
</div>
</div>
<a href="javascript:void(0)" class="drag-wrapper">
<div class="drag"></div>
</a>
<div class="board">
<div class="controls"></div>
</div>
</div>

here's my implementation for this case with hammer.js
http://hammerjs.github.io
movement of the board could have more complex calculations based on e.velocityY, but I'm using quick CSS transition when pan ended which looks good for my case
$(document).ready(function() {
let sliderManager = new Hammer.Manager(document.querySelector('.drag-wrapper'));
let board = document.querySelector('.board');
let threshold = 150;
let boardTopInitial = board.style.top = board.offsetTop;
let boardTopCollaped = 30;
sliderManager.add(new Hammer.Pan({
threshold: 0,
pointers: 0
}));
sliderManager.on('pan', function(e) {
e.preventDefault();
board.classList.remove("transitable");
board.classList.add("full-height");
if (!board.classList.contains('pinned-top') && e.deltaY < 0) {
board.style.top = boardTopInitial + e.deltaY + "px";
if (e.isFinal) {
board.classList.add("transitable");
if (Math.abs(e.deltaY) > threshold) {
board.style.top = boardTopCollaped + "px";
board.classList.add("pinned-top");
} else {
board.setAttribute('style', '');
board.classList.remove("full-height");
}
}
} else if (board.classList.contains('pinned-top') && e.deltaY > 0) {
board.style.top = boardTopCollaped + e.deltaY + "px";
if (e.isFinal) {
board.classList.add("transitable");
if (Math.abs(e.deltaY) > threshold) {
board.setAttribute('style', '');
board.classList.remove("pinned-top");
board.classList.remove("full-height");
} else {
board.style.top = boardTopCollaped + "px";
board.classList.add("top");
}
}
}
})
})
* {
box-sizing: border-box;
color: white;
}
.drag {
width: 50px;
height: 3px;
border-radius: 3px;
opacity: 0.3;
margin: 0 auto;
background: linear-gradient(to left, white, rgba(255, 255, 255, 0.8) 50%, white 100%);
transition: opacity 0.4s;
}
.pinned-top {
top: 30px;
}
.full-height {
box-shadow: none;
min-height: 100vh;
}
.transitable {
transition: top .2s ease-out;
}
.screen {
position: relative;
padding-top: 40px;
margin: 0 auto;
border-radius: 5px;
overflow: hidden;
background: #2b2d5b;
width: 320px;
height: 568px;
}
.controls {
background: linear-gradient(to bottom, #fd2929, #fd5c5c);
height: 100px;
}
.drag-wrapper {
display: block;
padding: 20px;
}
.drag-wrapper:active .drag,
.drag-wrapper:hover .drag,
.drag-wrapper:focus .drag {
opacity: 0.7;
}
.board {
padding: 0 20px;
position: absolute;
background: #2b2d5b;
top: 360px;
left: 0;
right: 0;
}
.content-wrapper {
padding: 20px;
height: 320px;
}
.content-wrapper {
background: #444;
}
.content {
display: flex;
justify-content: center;
align-items: center;
font-family: Helvetica;
background: linear-gradient(to bottom, #3adffd, #00abfb);
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
<div class="screen">
<div class="content-wrapper">
<div class="content">
.content
</div>
</div>
<div class="board">
<a href="javascript:void(0)" class="drag-wrapper">
<div class="drag"></div>
</a>
<div class="controls"></div>
</div>
</div>

How do I get fancybox gallery to respect Isotope combination filtering in a gallery?

The code that I'm using to add the data-fancybox-group attribute of "gallery" is only applying to the last filter button I clicked, instead of the combination of filters that are currently being applied. You can filter images with isotope, and then click any of them to load into lightbox. If you go here http://codepen.io/benslocum/pen/jVQjpo and choose sink then you can click one of the sink images, and scroll through just sinks by hitting left or right (or scrolling with your mousewheel). So far, so good. If you then click kitchen you'll see the images are now filtered to JUST kitchen sinks. But, if you click one of those images, the gallery that you'll be scrolling through will be all KITCHEN images... including non-sinks. It appears that somewhere around line 32 in JS I am causing the fancybox gallery to only be applied to the last filter button you click, and not the cumulative filterValue that takes into account all the filters that are checked. What do I need to change to make the data-fancybox-group attribute of gallery apply to the combination filter, and not just the last filter that was checked?
In case that codepen goes away, here is the JS
// external js: isotope.pkgd.js
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.optiones',
layoutMode: 'fitRows'
});
// random order
$grid.isotope({ sortBy : 'random' });
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
// store filter for each group
var filters = {};
$('.filters').on( 'click', '.button', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.attr('data-filter');
// combine filters
var filterValue = concatValues( filters );
// set filter for Isotope
$grid.isotope({ filter: filterValue });
// make the selected images part of fancybox gallery
var selector = $(this).attr('data-filter');
if(selector == "*"){
$(".fancybox").attr("data-fancybox-group", "gallery");
} else{
$(selector).find(".fancybox").attr("data-fancybox-group", selector);
}
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
// flatten object by concatting values
function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
}
$(".fancybox").fancybox({
arrows : false, closeClick : true, closeBtn : false
});
// ignoring my NOT selection... trying to make the anyfeature-button NOT be among the buttons that forces the detail button to be selected
$('#feature').not('#anyfeature-button').on('click', function(e){
$('#roomdetails') .find('.is-checked').removeClass('is-checked');
$('#detail-button') .addClass('is-checked');
$('#detail-button').trigger('click');
});
$('#fullroom-button').on('click', function(e){
$('#feature') .find('.is-checked').removeClass('is-checked');
$('#anyfeature-button') .addClass('is-checked');
$('#anyfeature-button').trigger('click');
});
$('.generic-location').on('click', function(e){
$('#room') .find('.is-checked').removeClass('is-checked');
$('#anyroom-button') .addClass('is-checked');
$('#anyroom-button').trigger('click');
});
$('#bathshower-button').on('click', function(e){
$('#room') .find('.is-checked').removeClass('is-checked');
$('#bathroom-button') .addClass('is-checked');
$('#bathroom-button').trigger('click');
});
$('filters a').click(function(event){
event.preventDefault()
});
And here's shorter version of the html
<div id="header"><img src="http://sales.newpasaderahomes.com/wp-content/uploads/2015/05/Pasadera_Logo_Horiz.png" alt="Logo" class="logo-img">
<div class="filters">
<div class="ui-group" id="roomdetails">
<div class="button-group js-radio-button-group" data-filter-group="type">
<button class="button is-checked" id="both-button" data-filter="">both</button>
<button class="button" id="fullroom-button" data-filter=":not(.detail)">full room</button>
<button class="button" id="detail-button" data-filter=".detail">detail</button>
</div>
</div>
<div class="ui-group">
<h3>Room</h3>
<div class="button-group js-radio-button-group" data-filter-group="room">
<button class="button is-checked" id="anyroom-button" data-filter="">any</button>
<button class="button" data-filter=".kitchen">kitchen</button>
<button class="button" id="bathroom-button" data-filter=".bathroom">bathroom</button>
<button class="button" data-filter=":not(.kitchen):not(.bathroom)">other</button>
</div>
</div>
<div class="ui-group">
<h3>Plan</h3>
<div class="button-group js-radio-button-group" data-filter-group="plan">
<button class="button is-checked" data-filter="">any</button>
<button class="button" data-filter=".Plan1">plan 1</button>
<button class="button" data-filter=".Plan2">plan 2</button>
<button class="button" data-filter=".Plan3">plan 3</button>
<button class="button" data-filter=".Plan4">plan 4</button>
<button class="button" data-filter=".Plan5">plan 5</button>
</div>
</div>
<div class="ui-group" id="feature">
<h3>Feature</h3>
<div class="button-group js-radio-button-group" data-filter-group="feature">
<button class="button anyfeature-button is-checked" id="anyfeature-button" data-filter="">any</button>
<button class="button" data-filter=".tile">tile</button>
<button class="button" data-filter=".hardware">hardware</button>
<button class="button" data-filter=".door">door</button>
<button class="button" data-filter=".sink">sink</button>
<button class="button generic-location" data-filter=".lighting">lighting</button>
<button class="button generic-location" data-filter=".handrail">handrail</button>
<button class="button generic-location" id="wallceiling-button" data-filter=".wall-ceiling">wall/ceiling</button>
<button class="button" id="bathshower-button" data-filter=".bath-shower">tub/shower</button>
<button class="button" data-filter=".cabinet-interior">cabinet interior</button>
</div>
</div>
</div>
</div>
<div class="gridholder">
<div class="grid">
<div class="optiones detail lighting "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/Bath-Vanity-2-Kichler-6122-NI.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/Bath-Vanity-2-Kichler-6122-NI.jpg"></a></div>
<div class="optiones detail lighting "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/Dining-Room-Transglobe-6545-BN.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/Dining-Room-Transglobe-6545-BN.jpg"></a></div>
<div class="optiones detail lighting "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/Front-Porch-Kichler-10953-TZ.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/Front-Porch-Kichler-10953-TZ.jpg"></a></div>
<div class="optiones detail lighting "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/Garage-Entry-Kichler-10923-TZ.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/Garage-Entry-Kichler-10923-TZ.jpg"></a></div>
<div class="optiones Plan1 detail kitchen sink tile "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2597.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2597.jpg"></a></div>
<div class="optiones Plan1 detail wall-ceiling "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2602.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2602.jpg"></a></div>
<div class="optiones Plan1 detail hardware "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2603.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2603.jpg"></a></div>
<div class="optiones Plan1 detail kitchen sink tile "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2606.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2606.jpg"></a></div>
<div class="optiones Plan2 detail kitchen "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2664.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2664.jpg"></a></div>
<div class="optiones Plan2 cabinet-interior detail kitchen "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2665.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2665.jpg"></a></div>
</div> </div>
</div>
And finally, a little css
* { box-sizing: border-box; }
body {
font-family: sans-serif;
}
#header {
background-color: #00A8A5;
height: 115px;
width: 100%;
}
.logo-img {
margin: 10px;
float: left;
max-width: 350px;
}
h1 {
margin: 0;
padding: 0;
}
/* ---- button ---- */
.filters {
position: relative;
top: 20px;
left: 30px;
}
.button {
display: inline-block;
padding: 0.5em .8em;
background: #EEE;
border: none;
border-radius: 7px;
background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.15) );
color: #222;
font-family: sans-serif;
font-size: 16px;
text-shadow: 0 1px white;
cursor: pointer;
}
.button:hover {
background-color: #f7e7ba;
text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
color: #222;
}
.button:active,
.button.is-checked {
background-color: #fdbe10;
}
.button.is-checked {
color: white;
text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}
.button:active {
box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}
/* ---- button-group ---- */
.button-group:after {
content: '';
display: block;
clear: both;
}
.button-group .button {
float: left;
border-radius: 0;
margin-left: 0;
margin-right: none;
}
.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }
/* ---- isotope ---- */
.grid {
background: lightgray;
max-width: 1920px;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ui group */
.ui-group {
display: inline-block;
}
.ui-group h3 {
display: inline-block;
vertical-align: top;
line-height: 5px;
margin-right: 0.2em;
font-size: 16px;
}
.ui-group .button-group {
display: inline-block;
margin-right: 20px;
}
/* options */
.optiones {
margin: 5px;
float: left;
}
.optiones img {
display: block;
max-width: 100%;
}
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-outer, .fancybox-inner {
position: relative;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_sprite.png);
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_loading.gif) center center no-repeat;
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url(http://benslocum.com/pasadera-options/fancybox/source/blank.gif); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}
.fancybox-prev {
left: 0;
}
.fancybox-next {
right: 0;
}
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev span {
left: 10px;
background-position: 0 -36px;
}
.fancybox-next span {
right: 10px;
background-position: 0 -72px;
}
.fancybox-nav:hover span {
visibility: visible;
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock {
overflow: visible !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_overlay.png);
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}
/* Title helper */
.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
position: relative;
text-shadow: none;
z-index: 8050;
}
.fancybox-opened .fancybox-title {
visibility: visible;
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center;
}
.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #fff;
}
.fancybox-title-inside-wrap {
padding-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 10px;
background: #000;
background: rgba(0, 0, 0, .8);
}
/*Retina graphics!*/
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_sprite#2x.png);
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
}
#fancybox-loading div {
background-image: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_loading#2x.gif);
background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
}
}
In case it helps anyone else, when I was just trying to get Fancybox to respect ANY filtering at all, I found these. None of them worked "as is" but when I took a piece of it
var selector = $(this).attr('data-filter');
if(selector == "*"){
$(".fancybox").attr("data-fancybox-group", "gallery");
} else{
$(selector).find(".fancybox").attr("data-fancybox-group", selector);
}
And put it in the code that was already doing stuff with filters, it worked to the extent that I explained above.
Now for the things that didn't work for me, but put me on the right track
$('filters a').click(function(event){
event.preventDefault()
var selector = $(this).attr('data-filter');
if(selector == "*"){
$(".fancybox").attr("data-fancybox-group", "gallery");
} else{
$(selector).find(".fancybox").attr("data-fancybox-group", selector);
}
});
Neither did this
$('#filters a').on("click", function(){
var selector = $(this).attr('data-option-value');
$('#container').isotope({ filter: selector }, function(){
if(selector == "*"){
$(".fancybox-thumbs").attr("data-fancybox-group", "gallery");
} else{
$(selector).find(".fancybox-thumbs").attr("data-fancybox-group", selector);
}
});
return false;
});
Here's one more that I found and tried to customize... it didn't work for me either.
// filter buttons
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$('#isotopegallery').isotope({ filter: selector }, function(){
if(selector == "*"){
$(".fancybox").attr("data-fancybox-group", "gallery");
} else{
$(selector).find(".fancybox").attr("data-fancybox-group", selector);
}
});
return false;
});
Anyone have an idea on how to make this work with my setup?

jQuery Slide from left to right distorts CSS

I have a textbox and a button. On clicking the button, if textbox value is blank, then textbox will be highlighted with red borders. On putting focus on the textbox, a validation message will be displayed (slide in from left to right) , something like this:
But after putting the code for sliding in from left to right the validation message is shown as below:
Below is the snippet for the same.
$(document).ready(function(){
$.fn.textWidth = function (text, font) {
if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
$.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
return $.fn.textWidth.fakeEl.width();
};
$('#btnSave').click(function(){
if (!$('#txtName').val()) {
$('#txtName').addClass('validationInput');
$('#txtName').closest('div').addClass('wrap');
}
else
alert("Success");
});
$('#txtName').on('blur', function () {
if ($(this).val() != "" && $(this).val() != null) {
$(this).removeClass("validationInput");
$(this).closest('div').removeClass("wrap");
}
$(this).parent().parent().siblings().html("");
$(this).parent().parent().siblings().css("display", "none");
});
$('#txtName').on('focus', function () {
if ($(this).hasClass('validationInput')) {
var w = $.fn.textWidth("Please enter name", '12px arial') + 50;
$(this).parent().parent().siblings().html("Please enter name");
//$(this).parent().parent().siblings().css({ "display": "inline-block", "width": w });
$(this).parent().parent().siblings().css({ "width": w }).show('slide', {direction: 'left'}, 1000);
}
});
});
.wrapTextboxDiv {
height: 25px;
}
.col-lg-3 {
width: 25%;
}
.wrap span:first-child {
display: flex;
overflow: hidden;
position: relative;
width: 100%;
}
.wrap span:first-child .input-holder::after {
border-color: red;
border-style: solid;
border-width: 5px;
box-shadow: 0 0 0 1px #ffffe0;
content: "";
height: 0;
position: absolute;
right: -5px;
top: -5px;
transform: rotate(45deg);
width: 0;
}
input.vtooltips[type="text"] {
display: inline;
height: 20px;
position: relative;
}
.vspan {
background: #dc000c none repeat scroll 0 0;
border: 1px solid #6d6d6d;
border-radius: 4px;
box-shadow: 2px 2px 0 #afb1b1;
color: #fff;
display: none;
font-family: Arial;
font-size: 12px;
height: 20px;
line-height: 15px;
margin-left: 101%;
opacity: 1;
padding-left: 5px;
padding-right: 5px;
position: relative;
text-align: center;
top: -23px;
z-index: 1000;
}
.validationInput, .validationInput:focus, .validationInput:hover {
background-color: #ffffe0 !important;
border: 1px solid red !important;
height: 20px;
}
.mandatoryText {
background-color: #fafad2 !important;
}
.textbox {
border: 1.5px solid #f2ca8c;
border-radius: 4px !important;
height: 23px !important;
width:90%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<div class="col-lg-3 wrapTextboxDiv">
<span>
<span class="input-holder">
<input type="text" class="mandatoryText vtooltips form-control textbox" style="width: 100%; vertical-align: top; border-radius: 4px;" maxlength="100" id="txtName" name="tname">
</span>
</span>
<span class="vspan"></span>
</div>
<br/>
<br/>
<input type="button" id="btnSave" value="Save"/>
What am I doing wrong? Any help will be appreciated.

Remove margin-left and add left:100% in .vspan class.
$(document).ready(function(){
$.fn.textWidth = function (text, font) {
if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
$.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
return $.fn.textWidth.fakeEl.width();
};
$('#btnSave').click(function(){
if (!$('#txtName').val()) {
$('#txtName').addClass('validationInput');
$('#txtName').closest('div').addClass('wrap');
}
else
alert("Success");
});
$('#txtName').on('blur', function () {
if ($(this).val() != "" && $(this).val() != null) {
$(this).removeClass("validationInput");
$(this).closest('div').removeClass("wrap");
}
$(this).parent().parent().siblings().html("");
$(this).parent().parent().siblings().css("display", "none");
});
$('#txtName').on('focus', function () {
if ($(this).hasClass('validationInput')) {
var w = $.fn.textWidth("Please enter name", '12px arial') + 50;
$(this).parent().parent().siblings().html("Please enter name");
//$(this).parent().parent().siblings().css({ "display": "inline-block", "width": w });
$(this).parent().parent().siblings().css({ "width": w }).show('slide', {direction: 'left'}, 1000);
}
});
});
.wrapTextboxDiv {
height: 25px;
}
.col-lg-3 {
width: 25%;
}
.wrap span:first-child {
display: flex;
overflow: hidden;
position: relative;
width: 100%;
}
.wrap span:first-child .input-holder::after {
border-color: red;
border-style: solid;
border-width: 5px;
box-shadow: 0 0 0 1px #ffffe0;
content: "";
height: 0;
position: absolute;
right: -5px;
top: -5px;
transform: rotate(45deg);
width: 0;
}
input.vtooltips[type="text"] {
display: inline;
height: 20px;
position: relative;
}
.vspan {
background: #dc000c none repeat scroll 0 0;
border: 1px solid #6d6d6d;
border-radius: 4px;
box-shadow: 2px 2px 0 #afb1b1;
color: #fff;
display: none;
font-family: Arial;
font-size: 12px;
height: 20px;
line-height: 15px;
/* margin-left: 101%;*/ /* Remove this*/
opacity: 1;
padding-left: 5px;
padding-right: 5px;
position: relative;
text-align: center;
top: -23px;
z-index: 1000;
left:100%;
}
.validationInput, .validationInput:focus, .validationInput:hover {
background-color: #ffffe0 !important;
border: 1px solid red !important;
height: 20px;
}
.mandatoryText {
background-color: #fafad2 !important;
}
.textbox {
border: 1.5px solid #f2ca8c;
border-radius: 4px !important;
height: 23px !important;
width:90%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<div class="col-lg-3 wrapTextboxDiv">
<span>
<span class="input-holder">
<input type="text" class="mandatoryText vtooltips form-control textbox" style="width: 100%; vertical-align: top; border-radius: 4px;" maxlength="100" id="txtName" name="tname">
</span>
</span>
<span class="vspan"></span>
</div>
<br/>
<br/>
<input type="button" id="btnSave" value="Save"/>

Simply do this with float:left property , add float to this class .vspan , just try with this snippet
$(document).ready(function(){
$.fn.textWidth = function (text, font) {
if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
$.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
return $.fn.textWidth.fakeEl.width();
};
$('#btnSave').click(function(){
if (!$('#txtName').val()) {
$('#txtName').addClass('validationInput');
$('#txtName').closest('div').addClass('wrap');
}
else
alert("Success");
});
$('#txtName').on('blur', function () {
if ($(this).val() != "" && $(this).val() != null) {
$(this).removeClass("validationInput");
$(this).closest('div').removeClass("wrap");
}
$(this).parent().parent().siblings().html("");
$(this).parent().parent().siblings().css("display", "none");
});
$('#txtName').on('focus', function () {
if ($(this).hasClass('validationInput')) {
var w = $.fn.textWidth("Please enter name", '12px arial') + 50;
$(this).parent().parent().siblings().html("Please enter name");
//$(this).parent().parent().siblings().css({ "display": "inline-block", "width": w });
$(this).parent().parent().siblings().css({ "width": w }).show('slide', {direction: 'left'}, 1000);
}
});
});
.wrapTextboxDiv {
height: 25px;
}
.col-lg-3 {
width: 25%;
}
.wrap span:first-child {
display: flex;
overflow: hidden;
position: relative;
width: 100%;
}
.wrap span:first-child .input-holder::after {
border-color: red;
border-style: solid;
border-width: 5px;
box-shadow: 0 0 0 1px #ffffe0;
content: "";
height: 0;
position: absolute;
right: -5px;
top: -5px;
transform: rotate(45deg);
width: 0;
}
input.vtooltips[type="text"] {
display: inline;
height: 20px;
position: relative;
}
.vspan {
background: #dc000c none repeat scroll 0 0;
border: 1px solid #6d6d6d;
border-radius: 4px;
box-shadow: 2px 2px 0 #afb1b1;
color: #fff;
display: none;
font-family: Arial;
font-size: 12px;
height: 20px;
line-height: 15px;
left: 100%;
opacity: 1;
padding-left: 5px;
padding-right: 5px;
position: relative;
text-align: center;
top: -23px;
z-index: 1000;
float:left;
}
.validationInput, .validationInput:focus, .validationInput:hover {
background-color: #ffffe0 !important;
border: 1px solid red !important;
height: 20px;
}
.mandatoryText {
background-color: #fafad2 !important;
}
.textbox {
border: 1.5px solid #f2ca8c;
border-radius: 4px !important;
height: 23px !important;
width:90%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
</head>
<body>
<div class="col-lg-3 wrapTextboxDiv">
<span>
<span class="input-holder">
<input type="text" class="mandatoryText vtooltips form-control textbox" style="width: 100%; vertical-align: top; border-radius: 4px;" maxlength="100" id="txtName" name="tname">
</span>
</span>
<span class="vspan"></span>
</div>
<br/>
<br/>
<input type="button" id="btnSave" value="Save"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body>
</html>

Got double "onmouseover" Javascript

first can you look on those two image so you understand.
When not hover: http://s15.postimg.org/sn6rk45rf/not_Hover.png
When hover: http://s16.postimg.org/yk6beg1ad/on_Hover.png
Right now when I have my mouse over a image, both image get buttons.
But I just want each image have theve own buttons on mouse over and the other image hide the buttons.
I don't really know how to fix it, and I'm very beginner with Javascript.
Here is my HTML/CSS/Javascript codes.
var buttonNew = document.getElementsByClassName('buttonNewest');
var buttonRan = document.getElementsByClassName('buttonRandom');
function imageOver() {
for(var i = 0; i < buttonNew.length; i++) {
buttonNew[i].style.display = "block";
buttonNew[i].style.animation = "moveButtonsRight 2s";
}
for(var i = 0; i < buttonRan.length; i++) {
buttonRan[i].style.display = "block";
buttonRan[i].style.animation = "moveButtonsLeft 2s";
}
}
function imageLeave() {
for(var i = 0; i < buttonNew.length; i++) {
buttonNew[i].style.display = "none";
}
for(var i = 0; i < buttonRan.length; i++) {
buttonRan[i].style.display = "none";
}
}
.charSelect[role="Background"] {
width: 1600px;
min-height: 600px;
margin: 25px auto;
}
.charSelect[role="Background"] > h1 {
width: 300px;
margin: 0 auto;
border: dashed 2px rgba(255, 207, 0, 0.75);
text-align: center;
text-transform: uppercase;
font-size: 2.6em;
text-shadow: 2px 2px 3px rgb(0, 0, 0);
}
.charSelect[role="Characters"] {
position: relative;
display: inline-block;
width: 250px;
height: auto;
background: rgba(42, 42, 42, 0.7);
border: dashed 2px rgba(255, 207, 0, 0.4);
color: rgba(255, 207, 0, 1);
opacity: 0.6;
-webkit-transition: opacity 1s;
margin-left: 250px;
}
.charSelect[role="Characters"]:hover {
opacity: 1;
transform: scale(1.05);
}
.charSelect[role="Names"] {
width: 100%;
font-size: 1.8em;
}
.charSelect[role="Names"] > p {
margin: 0 !important;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgb(0, 0, 0);
}
/* Buttons */
.charSelect[role="LatestVid"], .charSelect[role="RandomVid"] {
width: 170px;
height: 45px;
background: -webkit-linear-gradient(top, rgb(255, 207, 0), rgba(255, 207, 0, 0));
text-align: center;
line-height: 45px;
color: black;
-webkit-transition: background 1s;
transition: background 1s;
box-shadow: 0px 0px 3px;
}
.charSelect[role="LatestVid"] {
display: none;
position: absolute;
top:50%;
right: 70%;
}
.charSelect[role="RandomVid"] {
display: none;
position: absolute;
top:50%;
left: 70%;
}
.charSelect[role="RandomVid"]:hover , .charSelect[role="LatestVid"]:hover {
background: rgb(255, 207, 0);
}
/* Animation */
#-webkit-keyframes moveButtonsLeft {
0% {
left: 50%;
}
100% {
left: 70%;
}
}
#-webkit-keyframes moveButtonsRight {
0% {
right: 50%;
}
100% {
right: 70%;
}
}
<!-- Character one -->
<div onmouseover="imageOver()" onmouseleave="imageLeave()" class="charSelect" role="Characters">
<img src="chars/Dekker.gif" width="250"/>
<div class="charSelect buttonNewest" role="LatestVid">Newest Videos</div>
<div class="charSelect buttonRandom" role="RandomVid">Random Videos</div>
<div class="charSelect" role="Names"><p>Dekker</p></div>
</div>
<!-- Character two -->
<div onmouseover="imageOver()" onmouseleave="imageLeave()" class="charSelect" role="Characters">
<img src="chars/Dekker.gif" width="250"/>
<div class="charSelect buttonNewest" role="LatestVid">Newest Videos</div>
<div class="charSelect buttonRandom" role="RandomVid">Random Videos</div>
<div class="charSelect" role="Names"><p>Dekker</p></div>
</div>

You're calling an imageOver() that loops all your elements.
Instead of using JS (at all) I'd go with pure CSS:
*{font: 14px/1 sans-serif;}
.charSelect{
position: relative;
display: inline-block;
vertical-align: top;
}
.charButtons{
position: absolute;
bottom: 40px;
width: 100%;
text-align:center;
opacity: 0;
visibility: hidden;
transition: 0.4s;
-webkit-transition: 0.4s;
}
.charButtons a{
display: block;
margin-top: 1px;
text-align: center;
color: #fff;
background: #444;
padding: 10px;
opacity: 0.9;
transition: 0.3s;
-webkit-transition: 0.3s;
}
.charButtons a:hover{ opacity:1; }
.charSelect:hover .charButtons{
visibility: visible;
opacity: 1;
}
<div class="charSelect">
<img src="http://placehold.it/180x150/4af/&text=Hero+1">
<div class="charButtons">
Newest Videos
Random Videos
</div>
<h2>HERO 1</h2>
</div>
<div class="charSelect">
<img src="http://placehold.it/180x150/fa4/&text=Hero+2">
<div class="charButtons">
Newest Videos
Random Videos
</div>
<h2>HERO 2</h2>
</div>

The problem is that you're not reffering tot the current object that you have cursor on. If you go with with cursor over and image, your function will apply those changes for all buttonNew and buttonRan that can be found on page.

Slide from left to right

I have been searching and tried alot of things but I can't get the solution;
#bar {
width: 2em;
height: 15em;
display: none;
position: relative;
float: left;
margin-left: -1.7em;
background: rgba(22, 43, 58, 0.4);
}
#button {
width: 2em;
height: 1.3em;
float:left;
position: relative;
margin-top: 0.7em;
margin-left: 0.em;
background: rgba(22, 43, 58, 0.4);
color: rgba(250, 250, 250, 0.7);
font-size: 1em;
border-radius:0px 5px 5px 0px;
text-shadow: 1px 1px 2px;
cursor: pointer;
border: none;
opacity: 0.8;
}
I would like when I press the button the bar slides to the right.
$(document).ready(function () {
$('#button').click(function () {
$("#bar").show('slide', {
direction: 'right'
}, 1500);
});
});
this is the HTML for the part
<div class="apps border">
<div id="bar"></div>
<div id="button">>></div>
<div class="field"></div>
</div>
Demo

Please check the updated version: https://jsfiddle.net/isherwood/gc3b8n9q/
In JS, direction should be 'left'
$("#bar").show('slide', {
direction: 'left'
}, 1500);
Also in CSS (not directly needed)
#bar {
width: 20em; //can try make bigger
}