Develop Reference

jquery resizable 1px mismatch error

I am trying to use jquery resizable handlers with absolute position square divs
but when I click the "north" and "west" button(only this two direction) and drag just a little for resizing, the box itself became smaller by 1 or 2px
in north handler case, like (top:100px,height:100px => top:99px,height:99px)
what did I do wrong??
element.resizable({
minWidth: 1,
minHeight: 1,
handles:{
'n': '.ui-resizable-n',
'w': '.ui-resizable-w',
'e': '.ui-resizable-e',
's': '.ui-resizable-s'
}
})
Here's a demo link!
when I drag "keeper" item to "screen" and move north resize handler little, the square makes problem

Please change box-sizing: border-box; to box-sizing: content-box;.
https://jsfiddle.net/6h02cmvf/
$(document).ready(function() {
$('#container > .ui-element-libraries-container > .ui-element-container').draggable({
opacity: 0.5,
helper: "clone",
appendTo: '#full',
cursor: "move",
revert: true
})
$('#screen').droppable({
drop: (event,ui)=>{
let layoutOffset=$('#screen').offset()
let element=ui.helper.clone().css({
'position': 'absolute',
'opacity': 1,
'left': (ui.position.left-layoutOffset.left)+'px',
'top': (ui.position.top-layoutOffset.top)+'px',
})
element.toggleClass('ui-element-container ui-element')
element.empty()
element.append("<div class='ui-resizable-handle ui-resizable-n'></div>")
element.append("<div class='ui-resizable-handle ui-resizable-s'></div>")
element.append("<div class='ui-resizable-handle ui-resizable-e'></div>")
element.append("<div class='ui-resizable-handle ui-resizable-w'></div>")
element.appendTo('#screen')
element.resizable({
minWidth: 1,
minHeight: 1,
handles:{
'n': '.ui-resizable-n',
'w': '.ui-resizable-w',
'e': '.ui-resizable-e',
's': '.ui-resizable-s'
}
})
ui.helper.remove()
}
})
})
.pane{
color: black;
background-color: white;
position: absolute;
display: block;
overflow: hidden;
border: 2px solid black;
}
#container{
margin: 0px;
left: 300px;
right: auto;
top: 0px;
bottom: 0px;
width: 300px;
height: 500px;
}
#screen{
margin: 0px;
left: 0px;
right: auto;
top: 0px;
bottom: 0px;
width: 300px;
height: 500px;
}
.ui-element-libraries-container{
width:100%;
}
.ui-element-container{
color: black;
background-color: yellow;
border: 1px solid black;
margin-left: -1px;
margin-top: -1px;
width: 33.3%;
min-width: 80px;
max-width: 90px;
height: 100px;
box-sizing: border-box;
text-align: center;
line-height: 12px;
float:left;
font-size: 11px;
position: relative;
overflow: hidden;
cursor: move;
}
.ui-element{
color: black;
background-color: white;
border: 1px solid black;
margin-left: -1px;
margin-top: -1px;
width: 100px;
height: 100px;
box-sizing: content-box;
text-align: center;
line-height: 12px;
float:left;
font-size: 11px;
position: relative;
cursor: move;
}
.ui-resizable-handle{
position: absolute;
width: 7px;
height: 7px;
border: 1px solid blue;
background: white;
display: block;
}
.ui-resizable-n{
top: -4px;
bottom: auto;
left: 50%;
right: auto;
margin-left: -4px;
cursor: ns-resize;
}
.ui-resizable-s{
top: auto;
bottom: -4px;
left: 50%;
right: auto;
margin-left: -4px;
cursor: ns-resize;
}
.ui-resizable-e{
top: 50%;
bottom: auto;
left: auto;
right: -4px;
margin-top: -4px;
cursor: ew-resize;
}
.ui-resizable-w{
top: 50%;
bottom: auto;
left: -4px;
right: auto;
margin-top: -4px;
cursor: ew-resize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div id="full">
<div id="screen" class="pane">
screen
</div>
<div id="container" class="pane">
keeper
<div class="ui-element-libraries-container">
<div class="ui-element-container">
<div>
b
</div>
</div>
</div>
</div>
</div>

Smooth mouse cursor movements in jQuery or Javascript? [duplicate]

I have seen this tendency on some websites now, where the default cursor is replaced with a new cursor – in many cases circles
These cursors are interactive – with interactive i mean when hovering an a-tag it changes size and color.
On this website: https://en.leviev-group.com/ you can see the effect on the cursor that I want.
I have tried to make a Pen, but it isn't working properly: https://codepen.io/anon/pen/VQwdBv?q=cursor&limit=all&type=type-pens
<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>
I would like the circle in the middle to be the cursor and the big circle around to follow the cursor with delay.
When hovering a-tags it should wrap around the a-tag, similar to the example on the website. If possible made with javascript and css
How is this possible?

You are almost good, simply make both element behave the same and by adding the transition on the small one you will make it slower and create the follow effect.
$('body').mouseover(function() {
$(this).css({
cursor: 'none'
});
});
$(document).on('mousemove', function(e) {
$('#circle-big').css({
left: e.pageX,
top: e.pageY
});
$('#circle').css({
left: e.pageX,
top: e.pageY
});
});
#circle-big {
display: block;
position: absolute;
margin-top: -30px;
margin-left: -30px;
width: 60px;
height: 60px;
z-index: -1;
text-align: center;
border: 2px solid red;
border-radius: 50%;
}
#circle {
display: block;
position: absolute;
margin: auto;
transition: all 1s linear;
width: 15px;
height: 15px;
margin-top: -7.5px;
margin-left: -7.5px;
z-index: -1;
background-color: rgba(255, 0, 0, 0.5);
border-radius: 50%;
box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}
a {
font-size: 26px;
text-align: center;
margin: 100px auto;
display: block;
}
a:hover {
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>
<a>link</a>
Or change the transition if you want the bigger one to follow the small one:
$('body').mouseover(function() {
$(this).css({
cursor: 'none'
});
});
$(document).on('mousemove', function(e) {
$('#circle-big').css({
left: e.pageX,
top: e.pageY
});
$('#circle').css({
left: e.pageX,
top: e.pageY
});
});
#circle-big {
display: block;
position: absolute;
margin-top: -30px;
margin-left: -30px;
transition: all 1s linear;
width: 60px;
height: 60px;
z-index: -1;
text-align: center;
border: 2px solid red;
border-radius: 50%;
}
#circle {
display: block;
position: absolute;
margin: auto;
width: 15px;
height: 15px;
margin-top: -7.5px;
margin-left: -7.5px;
z-index: -1;
background-color: rgba(255, 0, 0, 0.5);
border-radius: 50%;
box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}
a {
font-size: 26px;
text-align: center;
margin: 100px auto;
display: block;
}
a:hover {
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>
<a>link</a>
UPDATE
You may consider event on links tag if you want to change the cursor when hovering links.
Here is a simple example:
$('body').mouseover(function() {
$(this).css({
cursor: 'none'
});
});
$(document).on('mousemove', function(e) {
$('#circle-big').css({
left: e.pageX,
top: e.pageY
});
$('#circle').css({
left: e.pageX,
top: e.pageY
});
});
$('a').mouseover(function() {
$('#cursor').addClass('on-link');
})
$('a').mouseout(function() {
$('#cursor').removeClass('on-link');
})
#circle-big {
display: block;
position: absolute;
margin-top: -30px;
margin-left: -30px;
transition: all 1s linear;
width: 60px;
height: 60px;
z-index: -1;
text-align: center;
border: 2px solid red;
border-radius: 50%;
}
#circle {
display: block;
position: absolute;
margin: auto;
width: 15px;
height: 15px;
margin-top: -7.5px;
margin-left: -7.5px;
background-color: rgba(255, 0, 0, 0.5);
border-radius: 50%;
z-index: -1;
box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}
#cursor.on-link #circle-big {
border: 2px solid blue;
}
a {
font-size: 26px;
text-align: center;
margin: 100px auto;
display: block;
}
a:hover {
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>
<a>link</a>

Toggling Menu Overlays Using JavaScript

I'm currently using JavaScript to show overlay menus that render in the same location on my website. The issue is that while clicking on a space outside the menus closes them, clicking on the other menu buttons does not close them and they end up overlapping each-other. Here is what I have for code so far:
function navitem1(event) {
event.stopPropagation();
document.getElementById("navitem1dropdown").classList.toggle("navitem1contentshow");
}
function navitem2(event) {
event.stopPropagation();
document.getElementById("navitem2dropdown").classList.toggle("navitem2contentshow");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
document.getElementById("navitem1dropdown").classList.remove("navitem1contentshow");
document.getElementById("navitem2dropdown").classList.remove("navitem2contentshow");
}
#navitem1 {
display: inline-block;
background: url('images/inbox.png');
background-size: 60% 60%;
background-repeat: no-repeat;
background-position: center;
background-color: #fff;
width: 15%;
height: 100%;
border-radius: 50%;
border: 2px solid #f3ac12;
cursor: pointer;
}
#navitem1:hover {
background-color: #e7f4fa;
}
#navitem1:active {
background-color: #e7f4fa;
}
#navitem1 .text {
position: relative;
bottom: 25px;
left: -0px;
visibility: hidden;
}
#navitem1:hover .text {
visibility: visible;
}
.navitem1content {
display: none;
position: absolute;
margin-top: 20px;
left: 0.40%;
background-color: #fff;
width: 24.1%;
min-width: 256px;
max-width: 360px;
height: 400px;
padding: 10px;
border: 1px solid #5b696c;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
}
.navitem1contentshow {
display: block;
}
#navitem2 {
display: inline-block;
background: url('images/music.png');
background-size: 60% 60%;
background-repeat: no-repeat;
background-position: center;
background-color: #fff;
width: 15%;
height: 100%;
border-radius: 50%;
border: 2px solid #9e33ef;
}
#navitem2:hover {
background-color: #e7f4fa;
}
#navitem2:active {
background-color: #e7f4fa;
}
#navitem2 .text {
position: relative;
bottom: 25px;
left: -0px;
visibility: hidden;
}
#navitem2:hover .text {
visibility: visible;
}
.navitem2content {
display: none;
position: absolute;
margin-top: 20px;
left: 0.40%;
background-color: #fff;
width: 24.1%;
min-width: 256px;
max-width: 360px;
height: 400px;
padding: 10px;
border: 1px solid #5b696c;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
}
.navitem2contentshow {
display: block;
}
<div id="navitem1" onclick="navitem1(event)">
<p class="text">Inbox</p>
<div id="navitem1dropdown" class="navitem1content"></div>
</div>
<div id="navitem2" onclick="navitem2(event)">
<p class="text">Music</p>
<div id="navitem2dropdown" class="navitem2content"></div>
</div>

I would recommend ensuring that you hide the other content on click, and then toggle between the block and none display state on the element that you're trying to toggle:
function navitem1(event) {
event.stopPropagation();
document.getElementById("navitem2dropdown").style.display = 'none';
if (document.getElementById("navitem1dropdown").style.display == 'none') {
document.getElementById("navitem1dropdown").style.display = 'block';
} else {
document.getElementById("navitem1dropdown").style.display = 'none';
}
}
function navitem2(event) {
event.stopPropagation();
document.getElementById("navitem1dropdown").style.display = 'none';
if (document.getElementById("navitem2dropdown").style.display == 'none') {
document.getElementById("navitem2dropdown").style.display = 'block';
} else {
document.getElementById("navitem2dropdown").style.display = 'none';
}
}
#navitem1 {
display: inline-block;
background: url('images/inbox.png');
background-size: 60% 60%;
background-repeat: no-repeat;
background-position: center;
background-color: #fff;
width: 15%;
height: 100%;
border-radius: 50%;
border: 2px solid #f3ac12;
cursor: pointer;
}
#navitem1:hover {
background-color: #e7f4fa;
}
#navitem1:active {
background-color: #e7f4fa;
}
#navitem1 .text {
position: relative;
bottom: 25px;
left: -0px;
visibility: hidden;
}
#navitem1:hover .text {
visibility: visible;
}
.navitem1content {
display: none;
position: absolute;
margin-top: 20px;
left: 0.40%;
background-color: #fff;
width: 24.1%;
min-width: 256px;
max-width: 360px;
height: 400px;
padding: 10px;
border: 1px solid #5b696c;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
}
.navitem1contentshow {
display: block;
}
#navitem2 {
display: inline-block;
background: url('images/music.png');
background-size: 60% 60%;
background-repeat: no-repeat;
background-position: center;
background-color: #fff;
width: 15%;
height: 100%;
border-radius: 50%;
border: 2px solid #9e33ef;
}
#navitem2:hover {
background-color: #e7f4fa;
}
#navitem2:active {
background-color: #e7f4fa;
}
#navitem2 .text {
position: relative;
bottom: 25px;
left: -0px;
visibility: hidden;
}
#navitem2:hover .text {
visibility: visible;
}
.navitem2content {
display: none;
position: absolute;
margin-top: 20px;
left: 0.40%;
background-color: #fff;
width: 24.1%;
min-width: 256px;
max-width: 360px;
height: 400px;
padding: 10px;
border: 1px solid #5b696c;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
}
.navitem2contentshow {
display: block;
}
<div id="navitem1" onclick="navitem1(event)">
<p class="text">Inbox</p>
<div id="navitem1dropdown" class="navitem1content">navitem1
</div>
</div>
<div id="navitem2" onclick="navitem2(event)">
<p class="text">Music</p>
<div id="navitem2dropdown" class="navitem2content">navitem2
</div>
</div>
Hope this helps! :)

Remove the show class from the dropdown not being selected when the other is selected. This covers the problem whether it has been toggled yet or not.
function navitem1(event) {
event.stopPropagation();
document.getElementById( "navitem2dropdown" ).classList.remove( "navitem2contentshow" );
document.getElementById( "navitem1dropdown" ).classList.toggle( "navitem1contentshow" );
}
function navitem2(event) {
event.stopPropagation();
document.getElementById( "navitem1dropdown" ).classList.remove("navitem1contentshow");
document.getElementById( "navitem2dropdown" ).classList.toggle( "navitem2contentshow" );
}

Content doesn't show up on toggle button with jQuery

i'm creating a toggle button with jquery. I've watched a tutorial from youtube (lynda.com) on how to create toggle button with jquery. I tried copying the code but the content under "p tag" doesn't show up. it's working perfectly on the tutorial. i'm not good in javascript. maybe you could see what i missed or maybe libraries idk. here's my code. thank you in advance.
HTML:
<div id="toggle">
<div id="poptext"> toggle </div>
<div id="box">
<p> hello</p>
</div>
</div>
CSS:
#toggle {
position: fixed;
bottom: 0px;
left: 50%;
width: 240px;
margin: 0 auto;
margin-bottom: 10px;
margin-left: -120px;
}
#box {
margin: 0 auto;
position: relative;
margin-bottom: 10px;
margin-top: 10px;
border-radius: 19px;
text-shadow: 0 1px 2px #000;
background-color: #644d52;
display: none;
opacity: .9;
}
#box p {
margin: 0;
padding: 5px 20px 15px 20px;
text-align: left;
color: #FFF;
}
#poptext {
width: 50px;
height: 18px;
font-size: 14px;
text-align: left;
padding-left: 23px;
overflow: hidden;
cursor: pointer;
margin: 0 auto;
border-radius: 10px;
}
#poptext.highlight {
background: url("images/blue.jpg") no-repeat 5px 18px rgba(255, 128, 0, 0.8);
}
JAVASCRIPT:
<script>
window.jQuery || document.write('script src=\'jquery.min.js\'></script>');
$(document).ready(function () {
$('#poptext').click(function () {
$('#poptext').toggleClass('#highlight');
$('#box').animate({
height: 'toggle',
opacity: 'toggle',
width: 'toggle'
}, 500);
});
});
</script>

There are 2 issues here, 1 appending script tag as given won't work, you need to split it, second you need to wait for the script to load to execute your code. You can use the window load event to do that
document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></' + 'script>');
window.addEventListener('load', function() {
$('#poptext').click(function() {
$('#poptext').toggleClass('#highlight');
$('#box').animate({
height: 'toggle',
opacity: 'toggle',
width: 'toggle'
}, 500);
});
})
#toggle {
position: fixed;
bottom: 0px;
left: 50%;
width: 240px;
margin: 0 auto;
margin-bottom: 10px;
margin-left: -120px;
}
#box {
margin: 0 auto;
position: relative;
margin-bottom: 10px;
margin-top: 10px;
border-radius: 19px;
text-shadow: 0 1px 2px #000;
background-color: #644d52;
display: none;
opacity: .9;
}
#box p {
margin: 0;
padding: 5px 20px 15px 20px;
text-align: left;
color: #FFF;
}
#poptext {
width: 50px;
height: 18px;
font-size: 14px;
text-align: left;
padding-left: 23px;
overflow: hidden;
cursor: pointer;
margin: 0 auto;
border-radius: 10px;
}
#poptext.highlight {
background: url("images/blue.jpg") no-repeat 5px 18px rgba(255, 128, 0, 0.8);
}
<div id="toggle">
<div id="poptext">toggle</div>
<div id="box">
<p>hello</p>
</div>
</div>

Jquery Image Slider not behaving

I liked the look of this image slider:
http://coolcarousels.frebsite.nl/c/58/coolcarousel.html
and wanted to implement it. I copied and pasted the javascript, css, and html.
Here's the site: http://violetoeuvre.com/slider.html
html:
<script>
$(function() {
$('#carousel').carouFredSel({
width: 800,
items: 3,
scroll: 1,
auto: {
duration: 1250,
timeoutDuration: 2500
},
prev: '#prev',
next: '#next',
pagination: '#pager'
});
});
</script>
</div>
<div>
<div id="wrapper">
<div id="carousel">
<img src="img_slider/1.jpg" />
<img src="img_slider/2.jpg" />
<img src="img_slider/3.jpg" />
<img src="img_slider/4.jpg" />
<img src="img_slider/5.jpg" />
<img src="img_slider/6.jpg" />
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
<div id="pager"></div>
</div>
</div>
CSS:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #ff00ff;
min-height: 700px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 100px;
width: 800px;
height: 127px;
padding: 10px;
margin: -75px 0 0 -410px;
position: absolute;
left: 50%;
top: 50%;
}
.caroufredsel_wrapper {
border-radius: 90px;
}
#carousel img {
width: 201px;
height: 127px;
margin: 0 5px;
float: left;
}
#prev, #next {
background: transparent url( img/carousel_control.png ) no-repeat 0 0;
text-indent: -999px;
display: block;
overflow: hidden;
width: 15px;
height: 21px;
position: absolute;
top: 65px;
}
#prev {
background-position: 0 0;
left: 30px;
}
#prev:hover {
left: 29px;
}
#next {
background-position: -18px 0;
right: 30px;
}
#next:hover {
right: 29px;
}
#pager {
text-align: center;
margin: 0 auto;
padding-top: 20px;
}
#pager a {
background: transparent url(img/arrow1.png) no-repeat -2px -32px;
text-decoration: none;
text-indent: -999px;
display: inline-block;
overflow: hidden;
width: 8px;
height: 8px;
margin: 0 5px 0 0;
}
#pager a.selected {
background: transparent url(img/arrow2.png) no-repeat -12px -32px;
text-decoration: underline;
}
I downloaded the javascript zip file, and I'm sure that's what's missing in the code to make everything behave properly. I'm new to this, and I just don't know where to fit that part in. In the script? In another referenced file? (Tried these).
Thanks in advance.
Claire

You can try to include jQuery Library as well :
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
include before the slider script, you can add in the header in your case

Slap me if I am wrong but I dont see any jQuery on your page :3