Develop Reference

Remove child element if being "cut" by parent element with overflow hidden

I am making a page where there should be content on the left side and commercials in divs on the right side. The height of the left sides div is unknown. I want to add as many commercial divs as possible on the right side without making the height of the right side taller than the left side.
I have set the right sides div height equal to left sides height and then I have added overflow: hidden on the right sides div so that the commercial divs are being cut off. I don't want my commercial divs to be cut off so I would like to remove the one that is being cut off.
Here is my code https://jsfiddle.net/p9dmzoa3/

You can try below code, this will remove all those commercials DIV, which are getting cut-off :
$(document).ready(function() {
$(".right_side").css("height", $(".left_side").height());
$commercialDivs = $(".right_side").children("div.commercials");
$rightSideDivHeight = $(".right_side").height();
$tempHeight = 0;
for(var i=0;i<$commercialDivs.length;i++){
$tempHeight += $commercialDivs[i].clientHeight;
if($tempHeight>$rightSideDivHeight){
$commercialDivs[i].remove();
}
}
});

Something like this should do the thing.
$(document).ready(function() {
$(".right_side").css("height", $(".left_side").height());
var j = $(".right_side").children("div").length;
for (var i = 1; i < j; i++) {
if ((($('.right_side').offset().top + $(".right_side").height()) - ($('.right_side div:last-child').offset().top + $(".right_side div:last-child").height())) < 0) {
$(".right_side div:last-child").remove();
} else {
break;
}
}
});
div.left_side {
display: inline-block;
}
div.right_side {
display: inline-block;
float: right;
overflow: hidden;
}
div.left_side_content {
height: 30px;
margin-top: 10px;
background-color: green;
}
div.commercials {
height: 50px;
margin-top: 10px;
background-color: forestgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content" style ="width: 430px; background-color: lightblue; padding: 5px;">
<div class="left_side" style ="width: 200px; background-color: tomato; padding: 5px;">
<div class="left_side_content">content</div>
<div class="left_side_content">content</div>
</div>
<div class="right_side" style ="width: 200px; background-color: orange; padding: 5px;">
<div class="commercials">commercials</div>
<div class="commercials">commercials</div>
<div class="commercials">commercials</div>
<div class="commercials">commercials</div>
<div class="commercials">commercials</div>
<div class="commercials">commercials</div>
</div>
</div>

js vertical slider with arrows

The thing is that I need to make a vertical images slider,so that when i press arrow down/arrow up every image changes it's position (the highest one goes bottom,the previous take it's place)
what it should look like:
what i have got so far:
$(function(){
var $vsliderboxes = $('#vsliderboxes'),
$vslidernav = $('#vslidernav'),
boxHeight = $vsliderboxes.height(),
current_index = 0;
function clickslide(){
clearInterval(intervalTimer);
clearTimeout(timeoutTimer);
timeoutTimer = setTimeout(function () {
intervalTimer = window.setInterval(autoslide, 2000);
}, 2500);
var index = $(this).index();
current_index = index;
$vsliderboxes.children().stop().animate({
top : (boxHeight * index * -1)
}, 500);
}
function autoslide(){
current_index++;
if (current_index >= $vsliderboxes.children().children().length) {
current_index = 0;
}
$vslidernav.find('a').eq(current_index).trigger('click');
}
$vslidernav.find('a').click(clickslide);
var intervalTimer = window.setInterval(autoslide, 2000),
timeoutTimer = null;
});
#vslidernav ul {
list-style: none;
padding: 0;
}
#vslidernav ul a {
padding: 0;
cursor: pointer;
height: 50px;
}
#vslidernav ul a:active {
color: #9C9A99;
}
#vslidernav ul a li {
height: 50px;
}
#vslidernav ul .active li {
}
.#vslidernav ul a:active {
background: transparent;
color: #9C9A99;
}
.vslider {
display: inline-block;
}
#vslidernav {
float: left;
width: 100px;
z-index: 1;
height: 250px;
}
#vsliderboxes {
position : relative;
overflow : hidden;
}
#vsliderboxes div {
height: 250px;
width: 900px;
}
#vsliderboxs-inner {
position : relative;
width : 900px;
height : 250px;
}
<div class="vslider">
<div id="vslidernav">
<ul>
<a id="1">
<li><img src="img/arrtop.gif"></li>
</a>
<a id="2">
<li><img src="img/arrdown.gif"></li>
</a>
<a id="3">
<li></li>
</a>
</ul>
</div>
<div id="vsliderboxes">
<div id="vsliderboxs-inner">
<div id="box1" class="active"><img src="img/slide1.gif"></div>
<div id="box2" class="inactive"><img src="img/slide2.gif"></div>
<div id="box3" class="inactive"><img src="img/slide3.gif"></div>
</div>
</div>
</div>
thanks for any advice

I think, that it isn't possible to solve this issue like you try to.
Because, when you work with the "top" property, you can't take one image from the top and append it to the other end because appending the image, will move the other images to another place --> the top property wouldn't be correct any more.
I think the contributed sliders (e.g. http://www.jssor.com/demos/vertical-slider.slider) work with the transform CSS property.
transform: translate3d()
Try to research about this property.
Roko C. Buljan answered on this page: loop carousel jquery
He uses a scrollTop loop for your problem.
I've also written a simple slider some time ago. I have now implemented the Roku C. Buljan method. Feel free to look at my code on Bitbucket.
https://bitbucket.org/d-stone/jqueryslider
An excerpt may help you:
value = prev_or_next == 'next' ? self.globals.slide_height : 0;
last = $('#container').find('> div:last');
first = $('#container').find('> div:first');
if(prev_or_next == 'prev') { // click on "next"-button
first.before(last); // put last element before first
settings.elements.inner.scrollTop(self.globals.slide_height); // set the scrollTop to 1 slide-height
}
// animation itself:
$('#container').stop().animate({scrollTop: value}, {
duration: settings.slide_speed,
done: function() {
if(prev_or_next == 'next') {
// put first item after last
last.after(first);
}
}
});
I'd advise you to validate your HTML (W3C Validator). There are some errors inside.
Invalid HTML can be the reason for some CSS and Javascript Errors.

jQuery custom slider creation with loop

Please, help me to configure my slider.
If you click on numbers in any row, you can see, that jquery give them classes and spin slider to index()
I want to add arrows to my slider, and do infinite loop. Eg if number 2 selected right arrow moves all 3 rows to number 3. And vice versa.
Here is my code.
$('.item').click(function() {
$this = $(this);
$(".item").removeClass("active");
$('.item').each(function() {
if (+$(this).index() == +$this.index()) {
$(this).addClass('active');
var box = $(this).closest('.scroll');
var x = ($(this).position().left - (box.width() / 2)) + box.scrollLeft();
box.animate({
scrollLeft: x
});
}
});
});
* {
margin: 0;
padding: 0;
}
.first-line,
.second-line,
.line3 {
margin-top: 20px;
}
.second-line,
.line3 {
margin-left: 20px;
}
.second-line {
width: 200px;
overflow: auto;
}
.line3 {
width: 200px;
overflow: hidden;
}
.wrap {
width: 500px;
}
.number,
.anotherclass,
.onemoreclass {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 15px;
border: 1px solid blue;
text-align: center;
margin: 0 10px;
}
.right-arrow,
.left-arrow {
display: inline-block;
cursor: pointer;
margin: 0 20px;
}
.number.active,
.anotherclass.active,
.onemoreclass.active {
background: blue;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="left-arrow"> << </div>
<div class="right-arrow"> >> </div>
<div class="first-line scroll">
<div class="anywrap">
<div class="number active item">1</div>
<div class="number item">2</div>
<div class="number item">3</div>
<div class="number item">4</div>
<div class="number item">5</div>
</div>
</div>
<div class="second-line scroll">
<div class="wrap">
<div class="anotherclass item active">1</div>
<div class="anotherclass item">2</div>
<div class="anotherclass item">3</div>
<div class="anotherclass item">4</div>
<div class="anotherclass item">5</div>
</div>
</div>
<div class="line3 scroll">
<div class="wrap">
<div class="onemoreclass item active">1</div>
<div class="onemoreclass item">2</div>
<div class="onemoreclass item">3</div>
<div class="onemoreclass item">4</div>
<div class="onemoreclass item">5</div>
</div>
</div>

Added to your function to support all of what you want. Let me know if this helps! Added comments to areas I changed to explain what I am doing. I also made $this a local variable instead of a global as well by defining it with var.
Fiddle: http://jsfiddle.net/AtheistP3ace/3ewguuyL/
JS:
// Attach click to all clickable elements
$('.item, .left-arrow, .right-arrow').click(function () {
var $this = $(this);
// check if we clicked an item or arrow
if (!$this.hasClass('item')) {
// if left arrow, get previous item of first active we find
if ($this.hasClass('left-arrow')) {
$this = $('.item.active:first').prev();
}
// if right arrow, get next item of first active we find
else if ($this.hasClass('right-arrow')) {
$this = $('.item.active:first').next();
}
// Handle being at the start or end of items
if ($this.length == 0) {
return;
}
}
// Let your previous code run
$(".item").removeClass("active");
$('.item').each(function () {
if (+$(this).index() == +$this.index()) {
$(this).addClass('active');
var box = $(this).closest('.scroll');
var x = ($(this).position().left - (box.width() / 2)) + box.scrollLeft();
box.animate({
scrollLeft: x
});
}
});
});

Have a look at https://jsfiddle.net/0m0raekm/
For the arrow support I just added this part:
$('.arrow-control').click(function(){
var direction = $(this).hasClass('left-arrow') ? -1 : 1;
var currentItemIndex = $('.anywrap .active').index();
var itemCount = $('.anywrap .item').length;
var nextItemIndex = (currentItemIndex + direction)%itemCount;
var nextItem = $('.anywrap .item').get( nextItemIndex );
$(nextItem).trigger( "click" );
});
It is quite generic: it determines the currently active item, chooses the next one depending on the arrow direction and the number of items (infinite loops) and triggers a click event on the item that is supposed to be next. So after determining the next item, it uses your original code to do the actual effect.

Bootstrap - hide column via animation

I have the following layout in html:
<button>Hide first column</button>
<div class="row">
<div class="col-lg-1" id="left">Stuff</div>
<div class="col-lg-8" id="middle">Main Middle</div>
<div class="col-lg-3">1 + 8 + 3 is 12 right?</div>
</div>
With the following JS/jQuery:
$(document).ready(function() {
$('button').click(function() {
$('#left').toggleClass('hidden');
if ($("#left").hasClass('hidden')) {
$("#middle").removeClass('col-lg-8');
$("#middle").addClass('col-lg-9');
}
else {
$("#middle").removeClass('col-lg-9');
$("#middle").addClass('col-lg-8');
}
});
});
As you can see essentially I'm removing the left column and widening out the middle ( I may eventually widen out the right as well).
Is there anyway to animate these changes as opposed to having them suddenly occur? I'm thinking something along the columns sliding to fill the space.
Here's the bootply: http://www.bootply.com/MWz4O7khWq
Thanks

I'm not working with bootstrap but with this you should get the idea:
$(document).ready(function () {
originalwidth = $('#left').width();
$('button').click(function () {
if ($('#left').width() > 0) {
$('#left').animate({
width: "0"
}, 500);
}
else {
$('#left').animate({
width: originalwidth
}, 500);
}
});
});
.table {
display: table;
width: 500px;
table-layout: fixed;
}
.row {
display: table-row;
}
.row div {
display: table-cell;
border: 1px solid red;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Hide first column</button>
<div class="table">
<div class="row">
<div class="col-lg-1" id="left">Stuff</div>
<div class="col-lg-8" id="middle">Main Middle</div>
<div class="col-lg-3">1 + 8 + 3 is 12 right?</div>
</div>
</div>
Useful links:
jQuery .animate()
jQuery .width()
Using CSS animations

jquery-ui : drop&drag inventory with stackable items

Hello everyone,
I'm building a drop&drag inventory panel for my webgame, but I was unable to make it work with stackable elements. I have simplified the whole inventory so that it's less confusing.
FIrst off, let me explain how do I expect it to work:
Every .item element can be dropped on any free .inv_slot.
If I try to drop an .item element on another .item that does not contain class .stackable, it will simply activate the draggable's revert() function.
if I try to drop the .item element on an .item that does have the .stackable class,
it will only remove the clone/helper. (Later on I will addd an function that only increases the items stack size.)
Now what's wrong with the below example :
in case an .item accidentally dropped on border or between two .inv_slotslots, the Revert animation is not activated. It does work however, while dropping the .item element outside the #panel.
Also if I accidentally dropped an .item between two .inv_slot elements, it will behave as if the .item was dropped on a .stackable item. So it will remove the clone instead of reverting back to it's prev. position. (Most likely an issue with the selector in drop: method)
If I drop a .stackable item over another .stackable item, it does not refresh the cursor. It seems to be stuck in the drag mode which activates the "pointer" cursor.
Now here's the (partialy working) example:
$(document).ready(function() {
//var prev_el = '';
var item_isStackable = "";
$( ".item").draggable({
scroll: true,
revert: function(isValidEl)
{
if(isValidEl)
{
return false;
}else{
return true;
}
},
helper: "clone",
cursor: "pointer",
stack: false,
zIndex: 27,
drag: function(event, ui)
{
item_isStackable = $(this).hasClass("stackable");
},
});
$( ".inv_slot" ).droppable({
accept: ".item",
drop: function( event, ui ) {
var item = $(this).find(".item");
if(item.length == 0) /// See if there any items already in the currently selected inventory slot //
{
console.log("Inserting");
ui.draggable.detach().appendTo($(this)); // if none, insert the item into athe free slot ///
}
else if(item_isStackable == true && item.hasClass("stackable")){
console.log("Increasing ");
ui.draggable.detach(); /// If yes, just destroy the clone ///
}else{
console.log("reverting back");
// in case it's not .inv_slot , revert the item back to it's previous position //
ui.draggable.animate(ui.draggable.data().origPosition,"slow");
}
}
});
});
#panel
{
width: 340px;
height: 44px;
border: 1px solid #000;
padding: 4px;
}
.inv_slot
{
z-index: 22;
position: relative;
width: 40px;
height: 40px;
border: 1px solid red;
float: left;
}
.inv_slot .slot_pos{
z-index: 24;
position: absolute;
margin-left: 50%;
left: -4px; top: 2px;
}
.item
{
position: relative;
z-index: 25;
margin: 4px;
width: 30px;
height: 30px;
border: 1px solid blue;
}
.item.stackable
{
border: 1px solid green;
}
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<div id="panel">
<div class="inv_slot">
<div class="item stackable" ></div>
<span class="slot_pos">0</span>
</div>
<div class="inv_slot">
<div class="item"> </div>
<span class="slot_pos">1</span>
</div>
<div class="inv_slot">
<div class="item stackable"> </div>
<span class="slot_pos">2</span>
</div>
<div class="inv_slot"><span class="slot_pos">3</span> </div>
<div class="inv_slot"><span class="slot_pos">4</span> </div>
<div class="inv_slot"><span class="slot_pos">5</span> </div>
<div class="inv_slot"><span class="slot_pos">6</span> </div>
<div class="inv_slot"><span class="slot_pos">7</span> </div>
</div>
I have spent couple of hours without any progress , so I'd really appreciate if someone could help me out with this one.
Thanks in advance,
Alex.

What's happening is that when you drag a box onto a border next to it, it deletes itself because it tries to stack itself. You need to change the second part of your if statement:
else if(item_isStackable == true && item.hasClass("stackable") && ui.draggable.filter(function() { var d = this; return item.filter(function() { return d == this; }).length > 0; }).length === 0)
To fix the cursor pointer problem:
.item
{
position: relative;
z-index: 25;
margin: 4px;
width: 30px;
height: 30px;
border: 1px solid blue;
cursor: default !important; /* Add this property. */
}
Fiddle.