Develop Reference

How to fit elements at slider container

I work with statick creation elements, and for this i need to have slider.
I just create slider, but elements are not fit in to slider container.
Example:
var htmlElements;
var userName = "Jonny Programmer"
var id = "6656"
function createUserCard() {
htmlElements = `<div class="user-card">
<img src="https://source.unsplash.com/user/erondu" class="userImage" />
<div class="info">
<div class="name">${userName}</div>
<div class="handle">
<div class="idPersone">${id}</div>
</div>
</div>
</div>`
$('.cardsCreation').append(htmlElements);
}
$('#plus-button').on('click', function () {
createUserCard();
});
(function () {
var sliderImages = document.querySelectorAll('.image'),
arrowLeft = document.querySelector('#left-arrow'),
arrowRight = document.querySelector('#right-arrow'),
currentImg = 0;
function initSlider() {
resetSlider();
sliderImages[0].style.display = 'block';
}
function resetSlider() {
for (var i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = 'none';
}
}
function toLeft() {
resetSlider();
sliderImages[currentImg - 1].style.display = 'block';
currentImg--;
}
function toRight() {
resetSlider();
sliderImages[currentImg + 1].style.display = 'block';
currentImg++;
}
arrowLeft.addEventListener('click', function () {
if (currentImg === 0) {
currentImg = sliderImages.length;
}
toLeft();
});
arrowRight.addEventListener('click', function () {
if (currentImg === sliderImages.length - 1) {
currentImg = -1;
}
toRight();
});
initSlider();
})();
.user-card, userImage {
box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.25);
}
.user-card {
margin: 12px;
padding: 10px 10px 10px 10px;
border-radius: 12px;
width: 160px;
text-align: center;
float: left;
background-color: #fff;
}
.userImage {
border-radius: 50%;
height: 140px;
width: 140px;
border: 5px solid #eee;
}
.name {
font-size: 20px;
margin: 5px;
font-weight: bold;
}
.progress {
color: #25af53;
font-size: 48px;
}
#plus-button {
width: 55px;
height: 55px;
border-radius: 50%;
background: #428bca;
position: absolute;
top: 33%;
margin-left: 20px;
cursor: pointer;
box-shadow: 0px 2px 5px #666;
border: none;
outline: none;
}
.plus {
color: white;
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 0;
margin: 0;
line-height: 55px;
font-size: 38px;
font-family: 'Roboto';
font-weight: 300;
}
#plus-button:hover {
box-shadow: 0 6px 14px 0 #666;
transform: scale(1.05);
}
.wrapper {
position: relative;
}
.arrow {
cursor: pointer;
position: absolute;
width: 0;
height: 0;
border-style: solid;
top: 50%;
margin-top: 160px;
}
#left-arrow {
border-width: 50px 40px 50px 0;
border-color: transparent #000 transparent transparent;
left: 0;
margin-left: 25px;
}
#right-arrow {
border-width: 50px 0 50px 40px;
border-color: transparent transparent transparent #000;
right: 0;
margin-right: 25px;
}
.image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.vertical-align-wrapper {
display: table;
overflow: hidden;
text-align: center;
}
.vertical-align-wrapper span {
display: table-cell;
vertical-align: middle;
font-size: 5rem;
color: #ffffff;
}
#media only screen and (max-width : 992px) {
.vertical-align-wrapper span {
font-size: 2.5rem;
}
#left-arrow {
border-width: 30px 20px 30px 0;
margin-left: 15px;
}
#right-arrow {
border-width: 30px 0 30px 20px;
margin-right: 15px;
}
.arrow {
margin-top: -30px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div id="left-arrow" class="arrow"></div>
<div id="slider">
<div class="image image-one">
<div class="vertical-align-wrapper">
<div class="cardsCreation"></div>
<button id="plus-button">
<p class="plus">+</p>
</button>
</div>
</div>
<div class="image image-two">
<div class="vertical-align-wrapper">
<span>Slide 2</span>
</div>
</div>
<div class="image image-three">
<div class="vertical-align-wrapper">
<span>Slide 3</span>
</div>
</div>
</div>
<div id="right-arrow" class="arrow"></div>
</div>
So as u can see affter tapping "+" i add new ellement in to html.
And from two sides i have arrows which are changing slider.
After tapping arrows go down, and this is not good.
And after i will reach limit of adding element in one slider it's add new element to new slider page.
What i want ex:

If you are using toggle of display CSS property that happened because it remove whole element from the DOM so, I suggest you to use visibility or opacity properties to done your task.

Some hr tags have gaps inside them while other doesn't

I have a pen, which is basically a todo app. The todo items are actually li elements which have text, button and a hr. Some of them are having hr with spaces inside them while some doesn't.
Image:
HTML:
const j = $;
j(() => {
let validify = txt => {
if (txt.length > 0) {
j('#ctn').append(`<li class='td'>${txt}<button class='td-btn'>Dismiss</button><hr/></li>`);
}
j('.td-btn').on('mouseenter', function() {
console.log('added');
j(this)
.parent()
.addClass('del');
console.log(j(this).parent().attr('class'))
}).on('mouseleave', function() {
console.log('removed')
j(this)
.parent()
.removeClass('del');
}).on('click', function() {
j(this).parent().css('display', 'none');
});
j('#addtd').val('');
}
validify('');
j('#btn').on('click', () => {
validify(j('#addtd').val());
});
});
#import url("https://fonts.googleapis.com/css?family=Lato");
* {
box-sizing: border-box;
font-family: Lato;
}
body {
margin: 0;
padding: 3vh 7vw;
background: #004D40;
}
#in-ctn {
position: fixed;
width: 86vw;
height: 16vh;
background: #388E3C;
box-shadow: 0 6px 9px #272727;
z-index: 2;
}
#btn {
position: absolute;
border-radius: 100%;
outline: none;
border: none;
right: 7vh;
top: 3vh;
width: 10vh;
height: 10vh;
font: 500 8vh arial;
display: inline-block;
transition: 0.25s all;
background: #CDDC39;
}
#btn:hover {
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.33);
transform: scale(1.1);
}
#btn:active {
transform: translateY(4px);
}
#addtd {
position: absolute;
outline: none;
border: none;
background: rgba(255, 255, 255, 0.33);
width: 50vw;
height: 6vh;
top: 5vh;
left: 5vw;
font: 500 14pt Lato;
padding: 0 10px;
}
#addtd::placeholder {
color: #FFF;
}
#ctn {
position: absolute;
top: 27vh;
width: 86vw;
background: #388E3C;
box-shadow: 0 6px 9px #272727;
padding: 3vh 5vw;
z-index: 1;
}
li.td {
font: 500 20pt Lato;
list-style: none;
color: #FFF;
}
button.td-btn {
float: right;
outline: none;
border: none;
background: #E53935;
height: 20px;
position: relative;
top: 25px;
color: #FFF;
}
hr {
border: 7px solid #9E9D24;
padding: 0;
}
.del {
color: #CDDC39 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='main'>
<div id='in-ctn'>
<button id='btn'>+</button>
<input type='text' id='addtd' placeholder='Enter a new Todo' />
</div>
<div id='ctn'>
<li class='td'>
Code a Todo App
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
<li class='td'>
Style the Elements
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
<li class='td'>
Debug some problems
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
<li class='td'>
Go for a walk
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
</div>
</div>
Can anyone explain me why it is so?

This is happening due to CSS Sub pixel rendering.
When you zoom-in/out of the browser, the rescaled elements will have left over pixel values like 5.75px etc. The vendor decides how to deal with that.
In your case the easiest fix, at least in Chrome, is to cancel the border radius to 0px, instead set the height of the hr to double the border and give it a background color:
border: 0px solid #9E9D24;
padding: 0;
height: 14px;
background: #9E9D24;

Seems like this issue is browser related, since it works fine for most people. Possibly your browser has a default styling for hr elements. It is, however, nowadays bad practice to use a horizontal line for presentational terms. Source
You would be fine by using a border-bottom on your li element. If you want to position the border lower than the default position, you can use padding-bottom on the li element. Your HTML structure also looks a lot more clear with this.
For example, changing the styling of your CSS selector li.td to the following could do the trick:
li.td {
font: 500 20pt Lato;
list-style: none;
color: #CDDC39;
border-bottom: 10px solid #9E9D24;
padding-bottom: 10px;
margin-bottom: 10px;
}
In case you really need to use the hr element, you could attempt to remove all default margin since some browsers add a margin by default. For that, add the following styling to the element:
margin: 0
which would result into
hr {
border: 7px solid #9E9D24;
padding: 0;
margin: 0;
}

Did you edit your pen to fix the issue? When looking at your pen preview all <hr> tags are rendered without an empty space inside.
The only suggestion I have, is that in HTML <hr> doesn't need to be explicitly closed, unless you are using XHTML, then you need to properly close the tag <hr />. Since you are just writing HTML, I would go with the <hr>.

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?

How to reverse jQuery css styling?

What is the best way to reverse css styling on the second on click?
What I'd like to happen is when the user clicks on the button again, it will just reverse everything to the original position. I'm not sure what's the most efficient way to do this without re-declaring everything in reverse. Especially that there's not just one class that changes status.
HTML:
<div class="wrapper-available">
<a class="available">Available</a>
<div class="available-img"><img src="http://www.petmd.com/sites/all/modules/breedopedia/images/thumbnails/cat/tn-california-spangled-cat.jpg" width="40" height="40"></div>
</div>
CSS:
.wrapper-available {
display: inline-block;
margin-top: 40px;
position: relative;
}
.available {
border-radius: 15px;
padding: 5px 20px 5px 50px;
background: #39b54a;
color: #FFF;
display: inline-block;
font-weight: bold;
}
.available-img {
left: 0;
position: absolute;
top: -12px;
transition: all .20s ease-in;
}
.available-img img {
border-radius: 30px;
border: 2px solid #39b54a;
}
jQuery:
$(".available").click(function() {
$(this).css({ "background" : "#CCC", "padding" : "5px 50px 5px 20px" }).text("Away");
$(".available-img").css({
"left": 100
});
$(".available-img img").css({
"border" : "2px solid #CCC"
});
});
http://codepen.io/aguerrero/pen/ORKjya

The simplest way would be to toggle a class on the wrapper-available instead of adding inline styling and to also toggle the text() within the .available element. Try this:
$(".available").click(function() {
$(this).text(function(i, t) {
return t == 'Available' ? 'Away' : 'Available';
}).closest('.wrapper-available').toggleClass('away');
});
.wrapper-available {
display: inline-block;
margin-top: 40px;
position: relative;
}
.available {
border-radius: 15px;
padding: 5px 20px 5px 50px;
background: #39b54a;
color: #FFF;
display: inline-block;
font-weight: bold;
}
.wrapper-available.away .available {
background-color: #CCC;
padding: 5px 50px 5px 20px;
}
.available-img {
left: 0;
position: absolute;
top: -12px;
transition: all .20s ease-in;
}
.wrapper-available.away .available-img {
left: 70px; /* note 70px seems to work better than 100px here */
}
.available-img img {
border-radius: 30px;
border: 2px solid #39b54a;
}
.wrapper-available.away .available-img img {
border: 2px solid #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-available">
<a class="available">Available</a>
<div class="available-img">
<img src="http://www.petmd.com/sites/all/modules/breedopedia/images/thumbnails/cat/tn-california-spangled-cat.jpg" width="40" height="40">
</div>
</div>

I added three classes in your CSS document with the styling that you added in your jQuery snippet. Now, instead of updating the specific styling for each element via jQuery you can just specify the new styling in your three selectors with the .active class.
CSS:
.available.active {
background: #CCC;
padding: 5px 50px 5px 20px;
}
.available-img.active {
left: 100px;
}
.available-img.active img {
border: 2px solid #CCC;
}
The jQuery snippet now toggles the .active class on your desired elements. These two:
<a class="available">Available</a>
<div class="available-img">
$(this).text() now toggles between Available and Away.
jQuery:
$('.available').click(function() {
$(this).toggleClass('active').siblings().toggleClass('active');
$(this).text(function(i, text) {
return (text === 'Available') ? 'Away' : 'Available';
});
});
Example: http://codepen.io/praktikdan/pen/wzVrGM

Displaying some text when mouse is over an input text box

I have an input text box, on which I would like to display some text area when the user's mouse get over it, giving to him informations on the text to enter.
here is my HTML code :
<html>
<body>
<style type="text/css">
.mouseover
{
}
</style>
<span onmouseover="this.classname='mouseover'" onmouseout="this.classename=''"></span>
<input id="mybox" type="text" />
</body>
</html>
What is the best CSS trick that would help to do that ?
Thank you for help in advance.

You can do all of this with CSS. Play around with CSS triangles for the tooltip but what you're mainly looking for is to use the :hover pseudo-class. No need for Javascript.
.input {
position: relative;
}
.tooltip {
display: none;
padding: 10px;
}
.input:hover .tooltip {
background: blue;
border-radius: 3px;
bottom: -60px;
color: white;
display: inline;
height: 30px;
left: 0;
line-height: 30px;
position: absolute;
}
.input:hover .tooltip:before {
display: block;
content: "";
position: absolute;
top: -5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid blue;
}
http://jsfiddle.net/v8xUL/1/

You can use Jquery Tooltip:
Jquery Tooltip

Just one more way to do that...
Filldle Demo
For me in IE8 OK DEMO
<input type="text">
<span>Some Text inside... </span>
span {
background-color: rgba(0,102,255,.15);
border: 2px solid rgba(0,102,255,.5);
border-radius: 10px;
color: #000;
display: none;
padding: 10px;
position: relative;
}
span:before {
content: "";
border-style: solid;
border-width: 0 15px 15px 15px;
border-color: transparent transparent rgba(0,102,255,.5) transparent;
height: 0;
position: absolute;
top: -17px;
width: 0;
}
input {
display: block
}
input:hover + span {
display: inline-block;
margin: 10px 0 0 10px
}

* simple css-based tooltip */
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
text-align:left;
font-size:12px;
/* outline radius for mozilla/firefox only */
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}
// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
// custom opacity setting
opacity: 0.7
});
got to this link http://jquerytools.org/demos/tooltip/form.html

Try this property it's asp but may work for your case
ErrorMessage="Your Message";