Develop Reference

jQuery UI, resize the last div responsively

How to make the last div always fill the end by pulling it to the left, decreasing its size by pushing it to the right and when changing the size of the first div does not affect the last div only the first and second div?
In the code below, for exceeding the size of the caixa, the div goes to the bottom.
codepen.io e.g.
$(".caixa").resizable({
handles: "s",
minHeight: 50,
maxHeight: 300
});
$(".ta").resizable({
handles: "e",
});
.caixa {
background-color: #444;
/* margin: 100px auto; */
height: 200px;
width: 600px;
overflow: hidden;
padding-bottom:2px;
}
.ta {
float: left;
height: 100%;
width: 33%;
padding-right:2px;
}
.ta1 {
background-color: #000;
}
.ta2 {
background-color: #ddd;
}
.ta3 {
background-color: #888;
}
textarea {
resize:none;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="caixa">
<div class="ta ta1"><textarea></textarea></div>
<div class="ta ta2"><textarea></textarea></div>
<div class="ta ta3"><textarea></textarea></div>
</div>

How to Add Custom Increment and decrements Counter in jQuery Ui Slider

I am trying to increase the width of an element (.inner) using jQuery Ui slider. This is somehow working fine but I need to keep the center of the inner always in the center of .wrapper. so I think I need to add negative values for top and left but I do not know how to achieve them. Do I have to create two custom counter there or is there any better way to achieve this?
$(function() {
$("#slider").slider({
range: "max",
min: 300,
max: 1000,
value: 1,
slide: function(event, ui) {
$(".inner").css({
"width": ui.value,
"height": ui.value
});
}
});
});
body,
html {
height: 100%;
width: 100%
}
.wrapper {
position: relative;
height: 300px;
width: 300px;
border: 2px solid #999;
border-radius: 4px;
overflow:hidden;
}
.inner {
position: absolute;
width: 100%;
height: 100%;
display: -webkit-flex;
-webkit-align-items: center;
display: flex;
align-items: center;
justify-content: center;
background: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper ">
<div class="inner"> Center </div>
</div>
<br />
<div id="slider"></div>

Since the width of the div and the range of the slider were the same, I used the slider value to change the left and top positions of the inner div.
This was of course possible because it was in position absolute.
Only half the value of the slider is applied, because to be centered you should split the change on left/right and top/bottom. Obviously adding the right or bottom css property would be pointless, since one is enough to properly position your element.
$(function() {
var $inner = $(".inner");
var lastValue = 300;
$("#slider").slider({
range: "max",
min: 300,
max: 1000,
value: 300,
slide: function(event, ui) {
var curLeft = $inner.position().left;
var curTop = $inner.position().top;
var toAdd = (lastValue - ui.value) /2;
$inner.css({
"width": ui.value,
"height": ui.value,
"top": curTop + toAdd,
"left": curLeft + toAdd,
});
lastValue = ui.value;
}
});
});
body,
html {
height: 100%;
width: 100%
}
.wrapper {
position: relative;
height: 300px;
width: 300px;
border: 2px solid #999;
border-radius: 4px;
overflow:hidden;
}
.inner {
position: absolute;
width: 100%;
height: 100%;
display: -webkit-flex;
-webkit-align-items: center;
display: flex;
align-items: center;
justify-content: center;
background: #eee;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper ">
<div class="inner"> Center </div>
</div>
<br />
<div id="slider"></div>

Using jQuery / JavaScript to float element to right

Fiddle
Hello,
I found sticky sidebar jQuery script, but the fixed element (sidebar) floats to the left once I start scrolling down. I am trying to keep it on the right-hand side the whole time. Also, I am trying to get some spacing around sidebar once it starts scrolling, as now it's just stuck to the very top.
I trust it's a simple fix but JavaScript is like a dark forest to me, I tried to change couple things, tried to look online but can't seem to find the answers or I just don't know how to look for them so I apologise if this has been asked before.
$( document ).ready(function() {
console.log( "document ready!" );
var $sticky = $('.sticky');
var $stickyrStopper = $('.sticky-stopper');
if (!!$sticky.offset()) { // make sure ".sticky" element exists
var generalSidebarHeight = $sticky.innerHeight();
var stickyTop = $sticky.offset().top;
var stickOffset = 0;
var stickyStopperPosition = $stickyrStopper.offset().top;
var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
var diff = stopPoint + stickOffset;
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset });
} else {
$sticky.css({position: 'absolute', top: 'initial'});
}
});
}
});
.container {
width: 1000px;
float: left
}
.header {
clear: both;
margin-bottom: 10px;
border: 1px solid #000000;
height: 90px;
}
.sidebar {
float: right;
width: 350px;
border: 1px solid #000000;
}
.content {
float: right;
width: 640px;
border: 1px solid #000000;
height: 800px;
}
.footer {
clear: both;
margin-top: 10px;
border: 1px solid #000000;
height: 820px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
This is header
</div>
<div class="sidebar sticky">
This is side bar
</div>
<div class="content">
This is main content
</div>
<div class="footer">
<div class="sticky-stopper"></div>
This is my footer
</div>
</div>

I used the Sticky-Kit.js plugin. That worked for me. See below, it keeps your sidebar to the right the entire time and has the sticky effect you're after:
$(document).ready(function() {
console.log("document ready!");
$(".sidebar").stick_in_parent();
});
.container {
width: 1000px;
float: left
}
.header {
clear: both;
margin-bottom: 10px;
border: 1px solid #000000;
height: 90px;
}
.sidebar {
float: right;
width: 350px;
border: 1px solid #000000;
}
.content {
float: left;
width: 640px;
border: 1px solid #000000;
height: 800px;
}
.footer {
clear: both;
margin-top: 10px;
border: 1px solid #000000;
height: 820px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.js"></script>
<div class="container">
<div class="header">
This is header
</div>
<div class="sidebar sticky">
This is side bar
</div>
<div class="content">
This is main content
</div>
<div class="footer">
<div class="sticky-stopper"></div>
This is my footer
</div>
</div>

You can use JQuery's css() method to apply css on scroll to the element to achieve the desired effect.
Change the JavaScript as follows:
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff, right: '0px' });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset, right: '0px' , margin: '10px 10px 0px 0px'});
} else {
$sticky.css({position: 'absolute', top: 'initial', right: "0px", margin: '0px'});
}
A css property of right:0px is applied to the element on scroll, since it's position becomes aboslute on scroll.
margin: 10px 10px 0px 0px was also applied to the element to provide additional spacing around it when scrolling. This is then sent to margin:0px when the scroll stops.
You will also need to adjust the css of the content css class, if you do not want your side bar sitting on top of the content area.
.content {
width: 550px;
border: 1px solid #000000;
height: 800px;
}
Here is an updated fiddle demonstrating these changes.

Jquery UI can't drag from left to right side

On my page I'm using the Jquery UI extension to sort divs. The divs are arranged in 2 columns. I created a JS Bin, please take a look on it.
When you drag all 3 divs to the left side, you can't get them on the right side again. Where is the mistake?
$(document).ready(function() {
var $grid = $('.grid').packery({
itemSelector: '.gridItem',
gutter: '.gridGutter',
percentPosition: true
});
var $items = $grid.find('.gridItem').draggable();
$grid.packery('bindUIDraggableEvents', $items);
});
* {
margin: 0px;
padding: 0px;
font-family: 'Francois One', sans-serif;
font-size: 16px;
text-decoration: none;
}
.grid {
width: 1000px;
background-color: aqua;
}
.gridItem {
width: 49%;
background-color: coral;
}
.gridGutter {
width: 2%;
}
#media screen and (max-width: 1000px) {
.grid {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://unpkg.com/packery#2.1.1/dist/packery.pkgd.min.js"></script>
<div class="grid">
<div class="gridGutter"></div>
<div class="gridItem">div 1</div>
<div class="gridItem">div 2</div>
<div class="gridItem">div 3</div>
</div>

The Packery documentation says the following:
Without columnWidth set, dragged items can only be dropped in place of other items.
You can set a selector for the columnWidth so it takes that element's width as the column's width.
$(document).ready(function() {
var $grid = $('.grid').packery({
itemSelector: '.gridItem',
gutter: '.gridGutter',
percentPosition: true,
columnWidth: '.gridSizer'
});
var $items = $grid.find('.gridItem').draggable();
$grid.packery('bindUIDraggableEvents', $items);
});
* {
margin: 0px;
padding: 0px;
font-family: 'Francois One', sans-serif;
font-size: 16px;
text-decoration: none;
}
.grid {
width: 1000px;
background-color: aqua;
}
.gridSizer,
.gridItem {
width: 49%;
}
.gridItem {
background-color: coral;
}
.gridGutter {
width: 2%;
}
#media screen and (max-width: 1000px) {
.grid {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://unpkg.com/packery#2.1.1/dist/packery.pkgd.min.js"></script>
<div class="grid">
<div class="gridSizer"></div>
<div class="gridGutter"></div>
<div class="gridItem">div 1</div>
<div class="gridItem">div 2</div>
<div class="gridItem">div 3</div>
</div>

If you add a columnWidth: 390 as show below it should work.
$(document).ready(function(){
var $grid = $('.grid').packery({
itemSelector: '.gridItem',
gutter: '.gridGutter',
columnWidth: 390,
percentPosition: true
});
var $items = $grid.find('.gridItem').draggable();
$grid.packery( 'bindUIDraggableEvents', $items );
});
I suspect that when you move all div to the left it sees it as only one column.
Hope this helps.

.stop on .mouseover or .hover

I can't figure out how to stop and resume the slide on a mouseover or hover occurrence. I basically want to stop all the scripts when .mouseover or .hover is triggered. Can anyone help me on this?
Edit: Code should work if you simply copy paste it, it is all hosted externally
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/jvojroo/DIamwjvp3/jquery.caroufredsel-6.2.0-packed.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#slider').carouFredSel({
width: '100%',
align: false,
items: 4,
items: {
width: $('#wrapper').width() * 0.15,
height: 500,
visible: 1,
minimum: 1
},
scroll: {
items: 1,
timeoutDuration: 1000,
onBefore: function(data) {
// find current and next slide
var currentSlide = $('.slide.active', this),
nextSlide = data.items.visible,
_width = $('#wrapper').width();
// resize currentslide to small version
currentSlide.stop().animate({
width: _width * 0.15
});
currentSlide.removeClass('active');
// hide current block
data.items.old.add(data.items.visible).find('.slide-block').stop().fadeOut();
// animate clicked slide to large size
nextSlide.addClass('active');
nextSlide.stop().animate({
width: _width * 0.7
});
},
onAfter: function(data) {
// show active slide block
data.items.visible.last().find('.slide-block').stop().fadeIn();
}
},
onCreate: function(data) {
// clone images for better sliding and insert them dynamacly in slider
var newitems = $('.slide', this).clone(true),
_width = $('#wrapper').width();
$(this).trigger('insertItem', [newitems, newitems.length, false]);
// show images
$('.slide', this).fadeIn();
$('.slide:first-child', this).addClass('active');
$('.slide', this).width(_width * 0.15);
// enlarge first slide
$('.slide:first-child', this).animate({
width: _width * 0.7
});
// show first title block and hide the rest
$(this).find('.slide-block').hide();
$(this).find('.slide.active .slide-block').stop().fadeIn();
}
});
// Handle click events
$('#slider').children().click(function() {
$('#slider').trigger('slideTo', [this]);
});
$('.slide:firstchild').mouseover(function() {
$('.slide:firstchild').stop();
});
$('#slider').children().mouseover(function() {
$('#slider').stop();
});
//$('#slider').children().mouseout(function() {
// $('#slider').trigger( 'slideTo', [this] );
//});
// Enable code below if you want to support browser resizing
$(window).resize(function() {
var slider = $('#slider'),
_width = $('#wrapper').width();
// show images
slider.find('.slide').width(_width * 0.15);
// enlarge first slide
slider.find('.slide.active').width(_width * 0.7);
// update item width config
slider.trigger('configuration', ['items.width', _width * 0.15]);
});
});
</script>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #f9f9f3;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #222;
line-height: 20px;
}
#wrapper {
height: 100%;
width: 100%;
min-height: 650px;
min-width: 900px;
padding-top: 1px;
}
#slider {
margin: 100px 0 0 0;
height: 500px;
overflow: hidden;
}
#slider .slide {
position: relative;
display: none;
height: 500px;
float: left;
background-position: center right;
cursor: pointer;
border-left: 1px solid #fff;
}
#slider .slide:first-child {
border: none;
}
#slider .slide.active {
cursor: default;
}
#slider .slide-block {
position: absolute;
left: 40px;
bottom: 75px;
display: inline-block;
width: 435px;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
font-size: 14px;
color: #134B94;
border: 1px solid #fff;
overflow: hidden;
border-radius: 4px;
}
#slider .slide-block h4 {
font-size: 36px;
font-weight: bold;
margin: 0 0 10px 0;
line-height: 1;
}
#slider .slide-block p {
margin: 0;
}
#donate-spacer {
height: 0;
}
#donate {
border-top: 1px solid #999;
width: 750px;
padding: 50px 75px;
margin: 0 auto;
overflow: hidden;
}
#donate p, #donate form {
margin: 0;
float: left;
}
#donate p {
width: 650px;
color: #999;
}
#donate form {
width: 100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="slider">
<div class="slide">
<img src="http://farm4.staticflickr.com/3821/10956569263_92a647e267_o.png">
<div class="slide-block">
<h4>Ice Age</h4>
<p>Heading south to avoid a bad case of global frostbite, a group of migrating misfit creatures embark on a hilarious quest to reunite a human baby with his tribe.</p>
</div>
</div>
<div class="slide">
<img src="http://farm8.staticflickr.com/7444/10956575693_94fd773731_o.png">
<div class="slide-block">
<h4>For The Birds</h4>
<p>For the Birds is an animated short film, produced by Pixar Animation Studios released in 2000. It is shown in a theatrical release of the 2001 Pixar feature film Monsters, Inc.</p>
</div>
</div>
<div class="slide">
<img src="http://farm4.staticflickr.com/3789/10956504824_4845433ff6_o.png">
<div class="slide-block">
<h4>UP</h4>
<p>A comedy adventure in which 78-year-old Carl Fredricksen fulfills his dream of a great adventure when he ties thousands of balloons to his house and flies away to the wilds of South America.</p>
</div>
</div>
<div class="slide">
<img src="http://farm6.staticflickr.com/5464/9449526762_ed5339251e_o.jpg">
<div class="slide-block">
<h4>Ice Age</h4>
<p>Heading south to avoid a bad case of global frostbite, a group of migrating misfit creatures embark on a hilarious quest to reunite a human baby with his tribe.</p>
</div>
</div>
</div>
</div>
</body>
</html>

You can trigger a custom event named "stop" on carouFredSel component If you want to stop the slider.
$('#slider').trigger("stop");
And trigger a custom event named "play" with a extra parameter true to resume the slider
$("#slider").trigger("play",true);
For example:
<script>
$(function(){
$("#slider").carouFredSel({
items: 4
});
$("#slider > div.slide").hover(
function(){
$("#slider").trigger("stop");
},
function(){
$("#slider").trigger("play",true);
}
);
});
</script>
Hope this is helpful for you.