jQuery-UI resizable bug with slide animation

jQuery-UI resizable bug with slide animation - javascript

I cannot seem to figure out what the jQueryUI resizable function is doing to cause the anchor point of the "chat box" div element I've created. The problem is that when you resize this element by dragging the top right corner, it does resize correctly, but when you press the close button to play the jQuery animation to collapse it, it will collapse in the wrong direction. If you do not resize the box at all then this collapse animation works correctly.
There seems to be another problem where resizing it causes the box to jump higher on the page, but this only seems to happen on Google Chrome, Firefox works fine, and not sure why!
Try resizing the box and then closing it to see the problem:
$(document).ready(function() {
// controls resizing of the chat box
$('.chat_box').resizable({
handles: 'n, e, ne',
minWidth: 300,
minHeight: 100,
maxWidth: 700,
maxHeight: 500,
});
});
function minimize(chatId) {
var bottom_bar = document.getElementById("bottom_bar");
var box = bottom_bar.getElementsByClassName("chat_box")[chatId];
var bar = bottom_bar.getElementsByClassName("chat_bar")[chatId];
bar.className = "chat_bar chat_box_minimized";
$(box).stop().animate({
height: "0px",
width: bar.offsetWidth,
},
'normal', function() {
$(box).hide();
}
);
}
#bottom_bar {
position: fixed;
z-index: 10;
bottom: 0px;
left: 0px;
right: 0px;
max-height: 40px;
background-color: #0042b3;
padding: 2px 20px;
}
div.chat_box {
position: fixed;
width: 350px;
height: 180px;
margin: 0px 4px;
bottom: 45px;
}
div.close_btn {
position: absolute;
top: 0px;
right: 0px;
width: 30px;
height: 100%;
}
div.close_btn:before {
content: 'x';
display: block;
text-align: center;
vertical-align: middle;
line-height: 25px;
font-weight: bold;
font-family: Arial, sans-serif;
pointer-events: none;
}
div.close_btn:hover {
background-color: rgba(0, 9, 26, 0.8);
cursor: pointer;
}
div.chat_box_maximized {
background-color: white;
width: 350px;
margin: 5px 0px;
padding: 2px;
border: 3px solid #0045cc;
border-radius: 5px;
display: inline-block;
}
div.chat_box_maximized input {
width: 100%;
border: none;
}
div.chat_box_maximized p {
display: none;
}
div.chat_box_minimized {
background-color: #002266;
;
max-width: 200px;
min-width: 80px;
margin: 5px 0px;
padding: 2px;
border: 3px solid #002266;
;
border-radius: 5px;
display: inline-block;
}
div.chat_box_minimized:hover {
background-color: #3378ff;
border: 3px solid #3378ff;
cursor: pointer;
}
div.chat_box_minimized form {
display: none;
}
div.chat_box_minimized p {
margin: 0px 5px;
font-size: 10pt;
color: white;
font-weight: bold;
pointer-events: none;
}
.light_container,
.dark_container {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
border: 1px solid #005eff;
padding: 1px;
}
.light_container {
background-color: rgba(0, 34, 102, 0.9);
}
.dark_container {
background-color: rgba(0, 9, 26, 0.9);
}
.light_container .body,
.dark_container .body {
padding: 5px;
}
div.basic_title {
position: relative;
width: 100%;
background-color: #005eff;
padding: 4px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div.basic_title p {
margin: 0px;
pointer-events: none;
}
div.basic_panel div.basic_title {
font-size: 14px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="bottom_bar">
<div class="chat_box dark_container">
<div class="basic_title">
<p>Chat Box</p>
<div class="close_btn" onclick="minimize(0)"></div>
</div>
<div class="body"></div>
</div>
<div class="chat_bar chat_box_maximized">
<p>Chat Box</p>
<form>
<input type="text" placeholder="send a message">
</form>
</div>
</div>

When you resize from top handle, it changes top coordinate and height. Since you set the position with bottom, normally on animate the height will change but not bottom coordinate. But as soon as resizable sets top coordinate, then the animation will be made but with top coordinate remaining.
What you can do is use resize callback to prevent top coordinate to be set when you resize. Then it'll keep the proper direction on animation, and the resize will work as well.
$(document).ready(function() {
// controls resizing of the chat box
$('.chat_box').resizable({
handles: 'n, e, ne',
minWidth: 300,
minHeight: 100,
maxWidth: 700,
maxHeight: 500,
resize: function(event, ui) {
ui.helper.css('top', '');
}
});
});
function minimize(chatId) {
var bottom_bar = document.getElementById("bottom_bar");
var box = bottom_bar.getElementsByClassName("chat_box")[chatId];
var bar = bottom_bar.getElementsByClassName("chat_bar")[chatId];
bar.className = "chat_bar chat_box_minimized";
$(box).stop().animate({
height: "0px",
width: bar.offsetWidth,
},
'normal', function() {
$(box).hide();
}
);
}
#bottom_bar {
position: fixed;
z-index: 10;
bottom: 0px;
left: 0px;
right: 0px;
max-height: 40px;
background-color: #0042b3;
padding: 2px 20px;
}
div.chat_box {
position: fixed;
width: 350px;
height: 180px;
margin: 0px 4px;
bottom: 45px;
}
div.close_btn {
position: absolute;
top: 0px;
right: 0px;
width: 30px;
height: 100%;
}
div.close_btn:before {
content: 'x';
display: block;
text-align: center;
vertical-align: middle;
line-height: 25px;
font-weight: bold;
font-family: Arial, sans-serif;
pointer-events: none;
}
div.close_btn:hover {
background-color: rgba(0, 9, 26, 0.8);
cursor: pointer;
}
div.chat_box_maximized {
background-color: white;
width: 350px;
margin: 5px 0px;
padding: 2px;
border: 3px solid #0045cc;
border-radius: 5px;
display: inline-block;
}
div.chat_box_maximized input {
width: 100%;
border: none;
}
div.chat_box_maximized p {
display: none;
}
div.chat_box_minimized {
background-color: #002266;
;
max-width: 200px;
min-width: 80px;
margin: 5px 0px;
padding: 2px;
border: 3px solid #002266;
;
border-radius: 5px;
display: inline-block;
}
div.chat_box_minimized:hover {
background-color: #3378ff;
border: 3px solid #3378ff;
cursor: pointer;
}
div.chat_box_minimized form {
display: none;
}
div.chat_box_minimized p {
margin: 0px 5px;
font-size: 10pt;
color: white;
font-weight: bold;
pointer-events: none;
}
.light_container,
.dark_container {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
border: 1px solid #005eff;
padding: 1px;
}
.light_container {
background-color: rgba(0, 34, 102, 0.9);
}
.dark_container {
background-color: rgba(0, 9, 26, 0.9);
}
.light_container .body,
.dark_container .body {
padding: 5px;
}
div.basic_title {
position: relative;
width: 100%;
background-color: #005eff;
padding: 4px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div.basic_title p {
margin: 0px;
pointer-events: none;
}
div.basic_panel div.basic_title {
font-size: 14px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="bottom_bar">
<div class="chat_box dark_container">
<div class="basic_title">
<p>Chat Box</p>
<div class="close_btn" onclick="minimize(0)"></div>
</div>
<div class="body"></div>
</div>
<div class="chat_bar chat_box_maximized">
<p>Chat Box</p>
<form>
<input type="text" placeholder="send a message">
</form>
</div>
</div>

Related

Onclick Function in Dropdown Menu not working

I'm a newbie and practicing dropdown menu using the following Youtube video https://www.youtube.com/watch?v=uFIl4BvYne0. Everything is working except the onclick function.
Can anyone point out where I'm going wrong?
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.onclick = function() {
dropdown.classList.toggle('active');
}
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>
I have tried some fixes but couldn't find out the problem.
Note: I'm pretty new in this field.

You need to add addEventListener in order to append an action:
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) { // add click function
dropdown.classList.toggle('active'); // i don't know what class you want to change so i changed the background to a class to demonstrate the click
});
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
background-color: grey;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>

How do I close custom popover when click outside?

I'm developing a Cordova app. For that I'm using Vue.js and jQuery for bindings and script and I'm developing UI on my own. I could do page transitions and animations for most of the UI like, Radio buttons and check boxes etc. But I could not be able to develop a custom popover. I have tried following code.
Vue.directive('popover', {
bind: function(el, bindings, vnode) {
$(el).click(function() {
var pageEl = $(this).closest('.ui-page');
pageEl.find('.drawer').toggleClass('active');
$(el).closest('.ui-page').click(function(e) {
// $('.drawer', this).removeClass('active');
});
});
}
})
var pageInstace = new Vue({
el: '#popover-page',
data: {
options: [1, 2, 3, 4, 5]
}
})
html,
body {
position: relative;
width: 100%;
height: 100%;
}
body {
font-family: 'Open Sans';
font-size: 16px;
margin: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
*, *:active, *:hover, *:focus {
outline: 0;
}
button {
padding: 0;
}
img {
max-width: 100%;
}
.ui-page,
.header,
.scroll-content {
position: absolute;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.ui-page {
height: 100%;
background-color: #fff;
}
.page-content {
position: relative;
height: 100%;
overflow-y: auto;
z-index: 1;
}
.header {
height: 54px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
background-color: #607D8B;
color: #fff;
display: flex;
align-items: center;
padding-left: 16px;
padding-right: 16px;
z-index: 1;
}
.scroll-content {
bottom: 0;
overflow: auto;
}
.scroll-content.has-header {
top: 54px;
}
.header button {
color: #fff;
height: 100%;
}
.header .header-title {
margin: 0 22px;
font-size: 18px;
font-weight: 600;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.header .buttons {
position: relative;
display: flex;
}
.header .buttons button {
padding: 4px 8px;
}
.header .buttons button:last-child {
padding: 4px 0 4px 8px;
}
.btn {
position: relative;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border: none;
padding: 8px 16px;
font-size: 16px;
border-radius: 4px;
font-family: unset;
overflow: hidden;
}
.btn-clear {
background-color: transparent;
border: none;
}
.item {
position: relative;
display: flex;
overflow: hidden;
border-bottom: 1px solid #bdbdbd;
}
.drawer {
position: absolute;
background-color: #fff;
z-index: 4;
top: 60px;
right: 4px;
border-radius: 2px;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
transform: scale(0, 0);
transform-origin: top right;
transition: transform ease 0.3s;
min-width: 180px;
}
.drawer.active {
transform: scale(1, 1);
}
.drawer .drawer-content {
position: relative;
padding: 4px 0;
}
.drawer .drawer-content:after {
content: '';
position: absolute;
border: 8px solid transparent;
border-bottom-color: #fff;
top: -14px;
right: 22px;
}
.drawer .item {
padding: 12px 16px;
font-size: 14px;
}
.drawer .item:last-child {
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div class="ui-page" id="popover-page">
<div class="page-content">
<div class="header">
<div class="header-title">
Page Title
</div>
<button class="btn-clear" v-popover>Popover</button>
</div>
<div class="drawer">
<div class="drawer-content">
<div class="item" v-for="option in options">{{ option }}</div>
</div>
</div>
<div class="scroll-content has-header">
<div class="page-content">
<p>Some Content</p>
</div>
</div>
</div>
</div>
This works fine for toggling popover on button click. I tried so much. But I could not hide the popover when click on outside of the popover.
How can I hide popover when clicking out side of it?

Please try this. I have added jQuery
$('body').click(function(e) {
if (!$(e.target).closest('.drawer').length){
$(".drawer").removeClass("active");
}
});
$('body').click(function(e) {
if (!$(e.target).closest('.drawer').length){
$(".drawer").removeClass("active");
}
});
Vue.directive('popover', {
bind: function(el, bindings, vnode) {
$(el).click(function(e) {
e.stopPropagation();
var pageEl = $(this).closest('.ui-page');
pageEl.find('.drawer').toggleClass('active');
$(el).closest('.ui-page').click(function(e) {
// $('.drawer', this).removeClass('active');
});
});
}
})
var pageInstace = new Vue({
el: '#popover-page',
data: {
options: [1, 2, 3, 4, 5]
}
})
html,
body {
position: relative;
width: 100%;
height: 100%;
}
body {
font-family: 'Open Sans';
font-size: 16px;
margin: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
*, *:active, *:hover, *:focus {
outline: 0;
}
button {
padding: 0;
}
img {
max-width: 100%;
}
.ui-page,
.header,
.scroll-content {
position: absolute;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.ui-page {
height: 100%;
background-color: #fff;
}
.page-content {
position: relative;
height: 100%;
overflow-y: auto;
z-index: 1;
}
.header {
height: 54px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
background-color: #607D8B;
color: #fff;
display: flex;
align-items: center;
padding-left: 16px;
padding-right: 16px;
z-index: 1;
}
.scroll-content {
bottom: 0;
overflow: auto;
}
.scroll-content.has-header {
top: 54px;
}
.header button {
color: #fff;
height: 100%;
}
.header .header-title {
margin: 0 22px;
font-size: 18px;
font-weight: 600;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.header .buttons {
position: relative;
display: flex;
}
.header .buttons button {
padding: 4px 8px;
}
.header .buttons button:last-child {
padding: 4px 0 4px 8px;
}
.btn {
position: relative;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border: none;
padding: 8px 16px;
font-size: 16px;
border-radius: 4px;
font-family: unset;
overflow: hidden;
}
.btn-clear {
background-color: transparent;
border: none;
}
.item {
position: relative;
display: flex;
overflow: hidden;
border-bottom: 1px solid #bdbdbd;
}
.drawer {
position: absolute;
background-color: #fff;
z-index: 4;
top: 60px;
right: 4px;
border-radius: 2px;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
transform: scale(0, 0);
transform-origin: top right;
transition: transform ease 0.3s;
min-width: 180px;
}
.drawer.active {
transform: scale(1, 1);
}
.drawer .drawer-content {
position: relative;
padding: 4px 0;
}
.drawer .drawer-content:after {
content: '';
position: absolute;
border: 8px solid transparent;
border-bottom-color: #fff;
top: -14px;
right: 22px;
}
.drawer .item {
padding: 12px 16px;
font-size: 14px;
}
.drawer .item:last-child {
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div class="ui-page" id="popover-page">
<div class="page-content">
<div class="header">
<div class="header-title">
Page Title
</div>
<button class="btn-clear" v-popover>Popover</button>
</div>
<div class="drawer">
<div class="drawer-content">
<div class="item" v-for="option in options">{{ option }}</div>
</div>
</div>
<div class="scroll-content has-header">
<div class="page-content">
<p>Some Content</p>
</div>
</div>
</div>
</div>

Vue.directive('popover', {
bind: function(el, bindings, vnode) {
$(el).click(function() {
$(el).closest('.ui-page').find('.drawer').toggleClass('active');
});
$('body').on('click', $(el).closest('.ui-page'), function(e) {
var $drawer = $(el).closest('.ui-page').find('.drawer');
var $target = $(e.target);
if ($target.closest($(el)).length <= 0
&& $drawer.hasClass('active')
&& $target.closest('.drawer').length <= 0) {
$drawer.removeClass('active');
}
});
}
})
var pageInstace = new Vue({
el: '#popover-page',
data: {
options: [1, 2, 3, 4, 5]
}
})
html,
body {
position: relative;
width: 100%;
height: 100%;
}
body {
font-family: 'Open Sans';
font-size: 16px;
margin: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
*, *:active, *:hover, *:focus {
outline: 0;
}
button {
padding: 0;
}
img {
max-width: 100%;
}
.ui-page,
.header,
.scroll-content {
position: absolute;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.ui-page {
height: 100%;
background-color: #fff;
}
.page-content {
position: relative;
height: 100%;
overflow-y: auto;
z-index: 1;
}
.header {
height: 54px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
background-color: #607D8B;
color: #fff;
display: flex;
align-items: center;
padding-left: 16px;
padding-right: 16px;
z-index: 1;
}
.scroll-content {
bottom: 0;
overflow: auto;
}
.scroll-content.has-header {
top: 54px;
}
.header button {
color: #fff;
height: 100%;
}
.header .header-title {
margin: 0 22px;
font-size: 18px;
font-weight: 600;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.header .buttons {
position: relative;
display: flex;
}
.header .buttons button {
padding: 4px 8px;
}
.header .buttons button:last-child {
padding: 4px 0 4px 8px;
}
.btn {
position: relative;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border: none;
padding: 8px 16px;
font-size: 16px;
border-radius: 4px;
font-family: unset;
overflow: hidden;
}
.btn-clear {
background-color: transparent;
border: none;
}
.item {
position: relative;
display: flex;
overflow: hidden;
border-bottom: 1px solid #bdbdbd;
}
.drawer {
position: absolute;
background-color: #fff;
z-index: 4;
top: 60px;
right: 4px;
border-radius: 2px;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
transform: scale(0, 0);
transform-origin: top right;
transition: transform ease 0.3s;
min-width: 180px;
}
.drawer.active {
transform: scale(1, 1);
}
.drawer .drawer-content {
position: relative;
padding: 4px 0;
}
.drawer .drawer-content:after {
content: '';
position: absolute;
border: 8px solid transparent;
border-bottom-color: #fff;
top: -14px;
right: 22px;
}
.drawer .item {
padding: 12px 16px;
font-size: 14px;
}
.drawer .item:last-child {
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div class="ui-page" id="popover-page">
<div class="page-content">
<div class="header">
<div class="header-title">
Page Title
</div>
<button class="btn-clear" v-popover>Popover</button>
</div>
<div class="drawer">
<div class="drawer-content">
<div class="item" v-for="option in options">{{ option }}</div>
</div>
</div>
<div class="scroll-content has-header">
<div class="page-content">
<p>Some Content</p>
</div>
</div>
</div>
</div>

How can I also animate border radius in jquery?

I'm trying to animate the div to extend width (like slide out animation) but I've gotten that to work, however I'm also trying to remove the border radius as this happens but when I do this the entire function doesn't work like.
Thank you for any help!
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
$(this).animate({
width: "950px",
border - radius: "0px"
}, 1000);
$('#enquiry-form').slideToggle('slow');
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
transition: width ease 1s;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
</div>
</div>

just change border-radius: "0px"; to borderRadius: "0px"
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
$(this).animate({
width: "950px",
borderRadius: "0px"
}, 1000);
$('#enquiry-form').slideToggle('slow');
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
transition: width ease 1s;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
</div>
</div>

You also can change the function like this: Notice "border-radius":"0px"
$(this).animate({
"width": "950px",
"border-radius": "0px"}, 1000);

how to implement snappuzzle jquery

I'm quite new to javascript & jquery and wanted to use the snappuzzle plugin:
snappuzzle plugin
I thought that i should just download & link in my html-file to jquery, jquery ui & the snappuzle.js, as well as link to a code.js file where i put the $(document).ready()(
But somehow I can't seem to figure out what to do exactly to implement this plugin - both in my html as well as what i should do with the javascript
Can anyone help me?
Edit: Do you know if it's possible to change the background/template picture of the puzzle? As in, I would like to use another picture as the source of the template than the puzzle itself. I can't seem to find the code that does that..

$(document).ready(function() {
});
body {
font-family: 'Roboto', sans-serif;
background: #ee9ca7; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #ee9ca7 , #ffdde1); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #ee9ca7 , #ffdde1); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
* {
margin: 0;
padding: 0;
}
.ref_imgWrap {
max-width: 200px;
margin: 0 auto;
overflow: hidden;
margin-top: 1em;
position: relative;
}
.ref_imgWrap img {
max-width: 100%;
float: left;
height: auto;
}
.contRofl_clr,
.wrap {
width: 100%;
float: left;
}
.restartPuzzleWrap {
width: 100%;
float: left;
text-align: center;
padding: 1em 0;
}
.restart_puzzleX999 {
padding: 1.6em;
display: inline-block;
background: orange;
color: #ffffff;
letter-spacing: 1px;
font-weight: 300;
border-radius: 2px;
cursor: pointer;
-webkit-box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
-moz-box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
}
.snappuzzle-piece {
-webkit-box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
-moz-box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
}
/* required snapPuzzle styles */
.puzzleX999_paddedWrap {
width: 100%;
float: left;
position: relative;
overflow: hidden;
}
.puzzleX999_imgWrap {
max-width: 560px;
padding: 5%;
padding-top: 0;
margin: 0 auto;
box-sizing: border-box;
position: relative;
}
.puzzleX999_imgWrap img {
max-width: 100%;
float: left;
height: auto;
}
.puzzleX999_relWrap {
position: relative;
display: block;
max-width: 500px;
float: left;
}
#puzzleX999_Main {
width: 100%;
float: left;
}
.snappuzzle-wrap {
position: relative;
display: block;
}
/*snappuzzle-pile { position: relative; }*/
.snappuzzle-piece {
cursor: move;
}
.snappuzzle-slot {
position: absolute;
background: #fff;
opacity: .8;
}
.snappuzzle-slot-hover {
background: #eee;
}
<!DOCTYPE html>
<head>
<title>Test puzzle</title>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<script src="code.js"></script>
<script src="jquery-3.2.1.min.js"></script>
<script src="jquery-ui-1.12.1.js"></script>
<script src="jQuery-snapPuzzle.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js'></script>
</head>
<body>
<div class="contRofl_clr">
<div class="ref_imgWrap">
<img src="https://images.unsplash.com/photo-1462524500090-89443873e2b4?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=991&h=661&q=80" alt="" />
</div>
<div class="restartPuzzleWrap">
<span class="restart_puzzleX999">
Restart Puzzle
</span>
</div>
</div>
<div class="puzzleX999_paddedWrap">
<div class="puzzleX999_imgWrap">
<img class="puzzleX999_img" src="https://images.unsplash.com/photo-1462524500090-89443873e2b4?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=991&h=661&q=80" alt="" />
<div id="puzzleX999_Main">
</div>
</div>
</div>
</body>
</html>

Issue with div floating on top of carousel

I'm using jCarousel and there's a weird bug on my page and I can't figure it out! Essentially, I'm trying to overlay a <div> on top of my carousel.
When I place the <div> on top, this weird gap pops up on top of the carousel! I don't know where it's coming from. Is it in the JavaScript?
The black box, I can format later. Just need to know why the white space is appearing.
JsFiddle from the bug
HTML
<div class="carousel-wrapper">
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li>
<img src="http://placekitten.com/850/500" width="850" height="500" alt="">
</li>
<li>
<img src="http://placekitten.com/850/500" width="850" height="500" alt="">
</li>
<li>
<img src="http://placekitten.com/850/500" width="850" height="500" alt="">
</li>
</ul>
</div>
‹
›
<p class="jcarousel-pagination"></p>
</div>
</div>
CSS
#login-carousel-wrapper {
width: 850px;
height: 500px;
margin: 0px auto;
}
#login-carousel-area {
background-color: #000;
z-index: 999;
width: 200px;
height: 200px;
position: relative;
top: 200px;
left: 100px;
}
#body-wrapper {
width: 970px;
height: 100%;
margin: 0px auto;
text-align: top;
}
.carousel-wrapper {
max-width: 850px;
/*padding: 0 20px 40px 20px;*/
margin: auto;
}
.jcarousel-wrapper {
margin: 20px auto;
position: relative;
border: 10px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.jcarousel-wrapper .photo-credits {
position: absolute;
right: 15px;
bottom: 0;
font-size: 13px;
color: #fff;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
opacity: .66;
}
.jcarousel-wrapper .photo-credits a {
color: #fff;
}
/** Carousel **/
.jcarousel {
position: relative;
overflow: hidden;
width: 850px;
height: 500px;
}
.jcarousel ul {
width: 20000em;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.jcarousel li {
float: left;
}
/** Carousel Controls **/
.jcarousel-control-prev, .jcarousel-control-next {
position: absolute;
top: 200px;
width: 30px;
height: 30px;
text-align: center;
background: #4E443C;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000;
font: 24px/27px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.jcarousel-control-prev {
left: -50px;
}
.jcarousel-control-next {
right: -50px;
}
.jcarousel-control-prev:hover span, .jcarousel-control-next:hover span {
display: block;
}
.jcarousel-control-prev.inactive, .jcarousel-control-next.inactive {
opacity: .5;
cursor: default;
}
/** Carousel Pagination **/
.jcarousel-pagination {
position: absolute;
bottom: 0;
left: 15px;
}
.jcarousel-pagination a {
text-decoration: none;
display: inline-block;
font-size: 11px;
line-height: 14px;
min-width: 14px;
background: #fff;
color: #4E443C;
border-radius: 14px;
padding: 3px;
text-align: center;
margin-right: 2px;
opacity: .75;
}
.jcarousel-pagination a.active {
background: #4E443C;
color: #fff;
opacity: 1;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}

Live Demo
If you are talking about the 20px white line in the top, that comes from .jcarousel-wrapper's margin: 20px auto;.
Just change 20px to 0px or add a new line overwriting margin-top if you want to keep the bottom margin:
.jcarousel-wrapper {
margin: 20px auto;
margin-top: 0px;
}

Develop Reference

JavaScript is the programming language of the Web.

jQuery-UI resizable bug with slide animation - javascript

Related

Onclick Function in Dropdown Menu not working

How do I close custom popover when click outside?

How can I also animate border radius in jquery?

how to implement snappuzzle jquery

Issue with div floating on top of carousel

Categories

Resources