i am intermediate jquery experience, so i need help here with an awesome interface Demo:
Demo
But i don't know why it isn't drag to other div's with same id's "#drophere". please make it work just like Windows Taskbar. Thanks
$( function() {
$( "#dragme" ).draggable({
appendTo: 'body',
containment: '#drophere'
});
} );
body {
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#dragme {
position: absolute;
background: rgba(0, 100, 200, 0.6);
width: 100%;
height: 50px;
left: 0;
bottom: 0;
text-align: center;
font-size: 36px;
z-index: 999;
}
#drophere {
position: absolute;
background: rgba(200, 100, 0, 0.1);
text-align: center;
}
.top {top:0;width: 100%;height: 50px;}
.left {left:0;width: 50px;height: 100%;}
.bottom {bottom:0;width: 100%;height: 50px;}
.right {right:0;width: 50px;height: 100%;}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dragme">Drag me</div>
<div id="drophere" class="top">Drop it Here</div>
<div id="drophere" class="left" style="padding-top:200px;">Drop it Here & stand it like me</div>
<div id="drophere" class="bottom">Drop it Here</div>
<div id="drophere" class="right" style="padding-top:200px;">Drop it Here & stand it like me</div>
Like Michael mentioned, id's must be unique, you'll want to use classes instead.
Also, IMHO, I'd use .sortable() for this "snap to and fill" type behaviour, not draggable(). You could do it with draggable() with a bit of configuring, but sortable will work with minimal effort.
Here is a working example and a jsfiddle
$(function() {
$(".drophere").sortable({
connectWith: ".drophere"
}).disableSelection();
});
body {
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#dragme {
list-style-type: none;
position: absolute;
background: rgba(0, 100, 200, 0.6);
width: 100%;
height: 50px;
left: 0;
bottom: 0;
text-align: center;
font-size: 36px;
z-index: 999;
}
.left #dragme, .right #dragme{
height: 100%;
}
.drophere {
position: absolute;
background: rgba(200, 100, 0, 0.1);
text-align: center;
margin:0;
}
.top {
top: 0;
width: 100%;
height: 50px;
}
.left {
left: 0;
width: 50px;
height: 100%;
}
.bottom {
bottom: 0;
width: 100%;
height: 50px;
}
.right {
right: 0;
width: 50px;
height: 100%;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<ul class="top drophere">
<li id="dragme">Drag me</li>
</ul>
<ul class="left drophere" style="padding-top:200px;"></ul>
<ul class="bottom drophere"></ul>
<ul class="right drophere" style="padding-top:200px;"></ul>
Related
I have a jquery function that allows an element to be draggable and resizeable and it works fine. What I wanted to add to it was to set a location in which the element can be draggable and resizable at. To be more specific I wanted to make my element draggable between the space in 2 lines (v1 and vh) in my code. Is there any way to achieve this? Any help is appreciated. Thanks in advance.
$(".box").mouseup(function () {
$(this).find('iframe').fadeIn('slow');
}).mousedown(function () {
$(this).find('iframe').hide();
});
$(function () {
$(".box")
.resizable()
.draggable();
});
.box {
display: flex;
justify-content: center;
align-items: center;
width: 32%;
height: 30%;
background-color: #2b2d2f;
color: black;
position: absolute;
top: 1%;
}
.box h4{
color: white;
font-size: 20px;
text-align:center;
}
.vl {
height: 100%;
position: absolute;
right: 5%;
top: 0;
background-color: red;
width: 2.5px;
height: 100%;
overflow: hidden;
}
.vh {
width: 100%;
position: absolute;
top: 75%;
background-color: red;
height: 2.5px;
width: 100%;
overflow: hidden;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
</head>
<body>
<div class="box">
<h4>box</h4>
</div>
<div class="vl">
</div>
<div class="vh">
</div>
</body>
</html>
The draggable() jQueryUI component has a containment parameter. One of its signatures allows you to provide 4 co-ordinates which equate to the bounding box the draggable element should be restricted to.
To calculate this you can retrieve the left and top of the vertical and horizontal lines respectively, subtracting the width/height of the .box. Try this:
jQuery($ => {
let $box = $('.box');
let $vl = $('.vl');
let $vh = $('.vh');
$box
.resizable()
.draggable({
containment: [
8, // default body padding, amend as necessary
8, // default body padding, amend as necessary
Math.ceil(parseFloat($vl.css('left'))) - Math.floor(parseFloat($box.width())),
Math.ceil(parseFloat($vh.css('top'))) - Math.floor(parseFloat($box.height()))
]
});
});
.box {
display: flex;
justify-content: center;
align-items: center;
width: 32%;
height: 30%;
background-color: #2b2d2f;
color: black;
position: absolute;
top: 1%;
}
.box h4 {
color: white;
font-size: 20px;
text-align: center;
}
.vl {
height: 100%;
position: absolute;
right: 5%;
top: 0;
background-color: red;
width: 2.5px;
height: 90%;
overflow: hidden;
}
.vh {
position: absolute;
top: 75%;
background-color: red;
height: 2.5px;
width: 95%;
overflow: hidden;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<div class="box">
<h4>box</h4>
</div>
<div class="vl"></div>
<div class="vh"></div>
One approach is wrap the box in a container that fits within the area you want and use containment: "parent"
function getContainerDimensions() {
const buffer = 6 // used in demo to prevent borders overlap
return {
width: $('.vl').offset().left - buffer,
height: $('.vh').offset().top - buffer
}
}
$(function() {
const $cont = $('<div id="container">').css(getContainerDimensions())
$(".box").wrap($cont)
.resizable({containment: "parent"})
.draggable({containment: "parent"});
});
body {
padding: 0;
margin: 0
}
#container {
border: 2px solid green
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 32%;
height: 30%;
background-color: #2b2d2f;
color: black;
position: absolute;
top: 1%;
}
.box h4 {
color: white;
font-size: 20px;
text-align: center;
}
.vl {
height: 100%;
position: absolute;
right: 5%;
top: 0;
background-color: red;
width: 2.5px;
height: 100%;
overflow: hidden;
}
.vh {
width: 100%;
position: absolute;
top: 75%;
background-color: red;
height: 2.5px;
width: 100%;
overflow: hidden;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
</head>
<body>
<div class="box">
<h4>box</h4>
</div>
<div class="vl">
</div>
<div class="vh">
</div>
</body>
</html>
I am trying to make an on click image overlay, where you click the left icon and an image fades or slides in, but when you click the right icon a different image fades or slides in. Also, when you click either icon, the associated images fade or slide out.
I've been trying to use
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
to make the display go from none to block when you click the icon, but there is no way to use this function with two separate links. I am not very great with javascript so any help would be greatly appreciated. Thanks.
https://jsfiddle.net/hzfw00L7/
Are you looking for something like this? I have used Jquery to speed up the coding!
$(document).ready(function() {
$(".left").click(function() {
$("#overlay").fadeIn(3000);
});
$(".right").click(function() {
$("#overlay2").fadeIn(3000);
});
$("#overlay").click(function() {
$("#overlay").fadeOut(2000);
});
$("#overlay2").click(function() {
$("#overlay2").fadeOut(2000);
});
});
#overlay {
position: fixed;
z-index: 4;
display: none;
width: 100%;
height: 350px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
}
#overlay2 {
position: fixed;
z-index: 4;
display: none;
width: 100%;
height: 350px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
z-index: 2;
cursor: pointer;
}
#text {
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#content {
padding: 20px;
}
a.left {
display: block;
position: absolute;
top: 320px;
left: 80px;
z-index: 6;
height: 20px;
background-color: purple;
color: white;
font-family: Arial;
padding: 10px;
}
a.right {
display: block;
position: absolute;
top: 320px;
right: 80px;
z-index: 7;
height: 20px;
background-color: magenta;
color: white;
font-family: Arial;
padding: 10px;
}
#buttons {
height: 50px;
width: 300px;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="overlay">
<div id="text">Overlay Text</div>
</div>
<div id="overlay2">
<div id="text">Overlay Text 2</div>
</div>
<div id="content">
<div id="buttons">
<a class="left">Turn on overlay effect</a>
</div>
<div id="content">
<a class="right">Turn on overlay effect 2</a>
</div>
</div>
</body>
</html>
Added Fade in and fade out animations!
For More Reference Go here
I'm trying to make the left arrow in my page change the background color of the container on click, but whenever I click it I get this error: (index):147 Uncaught ReferenceError: slide is not defined I've tried every solution available here and still no luck. Here's the jsfiddle: https://jsfiddle.net/mLr6oax0/
I would do the following:
use element.style.backgroundColor instead of your intended element.setAttribute('style', 'background-color: 'orange')
use of addEventListener with id or class hooks over HTML's onclick
Test the solution below:
var container = document.getElementById("container");
var clickable = document.getElementById('clickable');
clickable.addEventListener('click', function () {
container.style.backgroundColor = 'orange';
});
html, body {
overflow: hidden;
margin: 0;
}
.wrapper {
margin: 0;
overflow: hidden;
}
#container {
background-color: blue;
}
.container {
position: absolute;
overflow: hidden;
margin: 0;
width: 300%;
height: 520px;
display: flex;
background-color: #ccc;
}
.flex-item {
margin-top: 10px;;
margin-right: auto;
width: 500px;
height: 500px;
background-color: #fff;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
list-style: none;
}
.flex-item:first-child {
position: absolute;
left: 0px;
margin-left: 15px;
}
.flex-item:nth-child(2) {
position: absolute;
left: 500px;
margin-left: 20px;
}
.flex-item:nth-child(3) {
position: absolute;
left: 1000px;
margin-left: 20px;
}
.flex-item:nth-child(4) {
position: absolute;
left: 1500px;
margin-left: 20px;
}
li {
display: flex;
}
.left-arrow {
position: absolute;
top: 250px;
font-size: 50px !important;
}
.right-arrow {
position: absolute;
top: 250px;
right: 0px;
font-size: 50px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<title>Flex</title>
<body>
<div class="wrapper">
<ul class="container" id="container">
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
</ul>
<i id='clickable' class="left-arrow fa fa-chevron-left" aria-hidden="true"></i>
<i class="right-arrow fa fa-chevron-right" aria-hidden="true"></i>
</div>
</body>
I'm trying to do a menu that hides on the left side and when we click on the button it opens or closes. I have the following code but the menu just opens, the code for closing isn't working, someone have a clue about what I did wrong?
var menu = function() {
/* Open Menu*/
$('.js_open_seta').click(function() {
$('.js_menu').animate({
left: "0px"
}, 200);
$(".js_open_seta").addClass("js_close_seta");
$(".js_open_seta").removeClass("js_open_seta");
});
/* Close Menu*/
$('.js_close_seta').click(function() {
$('.js_menu').animate({
left: "-240px"
}, 200);
$(".js_close_seta").addClass("js_open_seta");
$(".js_close_seta").removeClass("js_close_seta");
});
};
$(document).ready(menu);
body{
background: url("imagens/exp.jpg");
background-repeat: no-repeat;
background-size: 1280px 800px;
padding: 0;
margin: 0;
border: 0;
}
.js_menu{
background: #4d4d4d;
top: 0px;
left: -240px;
position: fixed;
width: 310px;
height: 100%;
text-align: center;
font-family: 'Lato', sans-serif;
color: #ffffff;
z-index: 50;
padding: 0;
margin: 0;
border: 0;
}
#js_exp, #js_open{
float: left;
background: #4d4d4d;
height: 100%;
}
#js_exp{
width: 240px;
}
#js_open{
border-left: #ff0000;
width: 70px;
text-align: center;
vertical-align: middle;
}
#js_seta{
margin-top: 325px;
width: 70px;
height: 70px;
}
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="js_menu">
<section id="js_exp">
SMPC
NGC Informática(2015)
NGC Informática (2015-2016)
</section>
<section id="js_open">
<img src="http://vignette1.wikia.nocookie.net/ladygaga/images/4/40/Seta.png/revision/latest?cb=20110522223038&path-prefix=pt" class="js_open_seta" id="js_seta"/>
</section>
</nav>
</div>
var menu = function() {
$('#js_seta').click(function() {
var check = $("#js_seta").hasClass("js_open_seta");
if(check) {
$('.js_menu').animate({
left: "0px"
}, 200);
$(".js_open_seta").addClass("js_close_seta");
$(".js_open_seta").removeClass("js_open_seta");
} else {
$('.js_menu').animate({
left: "-240px"
}, 200);
$(".js_close_seta").addClass("js_open_seta");
$(".js_close_seta").removeClass("js_close_seta");
}
});
};
$(document).ready(menu);
This works
I am not an expert in jQuery (and to be honest, I am taking my first steps).
I have the example below, and what I am trying to do is choose the direction of the expansion of my div. I am using animate() and expanding the width and height.
At the moment it is expanding to the right, but I want it to change it, so it would expand to the left. The only way I could make the div expand to the left, is to add float: right; in the CSS of #map element.
I want it to know if there is another way to get to this, without changing the float of #map.
jsFiddle.
Snippet:
$(document).ready(function () {
$('#expand').click(function (expandir) {
this.value = 'collapse';
if ($(this).data('name') === 'show') {
$('#map').animate({ width: '600', height: '400' });
$('#inside').animate({ width: '600', height: '336' });
$('#expand').animate({ top: '370' });
$(this).data('name', 'hide');
} else {
this.value = 'expand';
$('#map').animate({ width: '300', height: '250' });
$('#inside').animate({ width: '300', height: '169' });
$('#expand').animate({ top: '220' });
$(this).data('name', 'show');
}
});
});
html, body {
width: 100%;
height: 100%;
}
#map {
z-index: 1;
position: relative;
width: 300px;
height: 250px;
border: 1px solid;
}
#expand {
z-index: 4;
position: absolute;
top: 220px;
left: 10px;
width: 70px;
height: 25px;
}
#inside {
z-index: 2;
position: absolute;
top: 40px;
right: 0;
background-color: #000000;
width: 300px;
height: 169px;
background-size: 220px 170px;
background-position: 0px 0px;
background-repeat: no-repeat;
}
#close {
position: absolute;
margin-top: 0;
margin-left: 0;
background-color: #34FF56;
width: 100px;
height: 50px;
background-size: 220px 170px;
background-position: 0px 0px;
background-repeat: no-repeat;
}
#btn {
z-index: 3;
position: relative;
float: left;
margin: 2px;
background-color: #FF9834;
width: 70px;
height: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map">
<input type="button" data-name="show" value="expand" id="expand" />
<div id="inside"></div>
<div id="btn"></div>
</div>
You can change the positioning inside #map to absolute and add right:??%.The percentage works off the 100% in body tag. Hope this helps for what you need :}
#map {
z-index: 1;
position: absolute;
width: 300px;
height: 250px;
border: 1px solid;
right: 50%;
}