How to restrict draggable element into particular element - javascript

In JQuery UI, I am trying to restrict draggable element into particular elements which are present inside the container (.container).
Even I have tried with containment as array of values it is working but in my case I will be unaware of the .container height and width. Please suggest me which will the right approach to do this one.
<div class="container">
<div class="restricted-field-1">should be restricted here</div>
<div class="dragme">DRAG ME</div>
<div class="restricted-field-2">should be restricted here</div>
</div>
$(".dragme").draggable({
containment: ".container"
});
JSFIDDLE

You can move the .container div to wrap .dragme, remove position: relative of .container and set following style changes.
body {
position:relative;
}
Modify as follows.
.container {
position: absolute;
height: 362px;
}
.restricted-field-2 {
top: 400px;
}
Here is the jsfiddle link.
Edited:
There are options in jquery draggable to set x-axis and y-axis positions for the containment and we need to calculate based on our requirement.
Here is the updated js fiddle link.

$(".dragme").draggable({
containment: ".mini"
});
.container{
position:relative;
width: 500px;
height: 400px;
background: #FFF;
}
.dragme{
width: 100px;
cursor: move;
background: black;
color:white;
text-align:center;
}
.restricted-field-1{
width:480px;
background: silver;
padding:10px;
user-select:none;
height: 20px;
}
.restricted-field-2{
position:absolute;
width:480px;
bottom:0;
padding:10px;
background: silver;
user-select:none;
height:20px;
}
.mini{
position: absolute;
top: 40px;
left: 0px;
bottom: 40px;
width: 100%;
}
<div class="container">
<div class="restricted-field-1">should be restricted here</div>
<div class="mini">
<div class="dragme">DRAG ME</div>
</div>
<div class="restricted-field-2">should be restricted here</div>
</div>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

Related

how to apply overflow:hidden for children of children with absolute positioning [duplicate]

We have two DIVs, one embedded in the other. If the outer DIV is not positioned absolute then the inner DIV, which is positioned absolute, does not obey the overflow hidden of the outer DIV.
#first {
width: 200px;
height: 200px;
background-color: green;
overflow: hidden;
}
#second {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 250px;
top: 250px;
}
<div id="first">
<div id="second"></div>
<div id="third"></div>
</div>
Is there any chance to make the inner DIV obey the overflow hidden of the outer DIV without setting the outer DIV to position absolute (cause that will muck up our complete layout)?
Also position relative for our inner DIV isn't an option as we need to "grow out" of a table TD.
#first {
width: 200px;
height: 200px;
background-color: green;
}
#second {
width: 50px;
height: 400px;
background-color: red;
position: relative;
left: 0px;
top: 0px;
}
<table id="first">
<tr>
<td>
<div id="second"></div>
</td>
</tr>
</table>
Are there any other options?
Make outer <div> to position: relative and inner <div> to position: absolute. It should work for you.
What about position: relative for the outer div? In the example that hides the inner one. It also won't move it in its layout since you don't specify a top or left.
An absolutely positioned element is actually positioned regarding a relative parent, or the nearest found relative parent. So the element with overflow: hidden should be between relative and absolute positioned elements:
<div class="relative-parent">
<div class="hiding-parent">
<div class="child"></div>
</div>
</div>
.relative-parent {
position:relative;
}
.hiding-parent {
overflow:hidden;
}
.child {
position:absolute;
}
Make sure.
parent position relative.
parent have manually assigned width and height(important as child element having absolute position).
child position absolute;
.outer{
position:relative;
width:200px;
height:100px;
overflow:hidden;
}
.inner{
position:absolute;
width:100px;
height:100px;
font-size:3rem;
}
<div class="outer">
<div class=inner>
Inner DIV to apply overflw hidden
</div>
</div>
}
You just make divs like this:
<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
<br/>
<div style="position:inherit; width: 200px; height:200px; background:yellow;">
<br/>
<div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
<br/>
</div>
</div>
</div>
I hope this code will help you :)

Disable page content

My search textbox is positioned in header. On typing in textbox, I want to disable rest of the page(except header). The page should be greyed out.Two separate div are there: header and main. Main div contains several sub div to structure the content.
How can I achieve this?
#Thinker solution is good (although I'm not sure if using "text-indent": "-9999px" is a good practice). Another option is to add another div upon your main div and play with the opacity setting to achieve a suitable result. Have in mind that a container div is needed though as main div's parent, look at the demo:
$("#text1").keydown(function() {
$(".main").append('<div class="overlay"></div>');
});
.header {
width: 100%;
height: 50px;
background-color: blue;
}
.main {
width: 100%;
height: 450px;
background-color: red;
}
.container{
position:relative;
}
.overlay{
width:100%;
height:100%;
background-color:grey;
position:absolute;
top:0px;
left:0px;
opacity:0.8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<input type="text" id="text1">
</div>
<div class="container">
<div class="main">Content that is going to hide when textbox is changed</div>
</div>
Yes, you can do it using css properties.
$("#text1").keydown(function() {
$(".main").css({
"text-indent": "-9999px",
"background-color": "gray"
})
});
$("#text1").focusout(function() {
$(".main").css({
"text-indent": "0px",
"background-color": "red"
})
});
.header {
width: 100%;
height: 50px;
background-color: blue;
}
.main {
width: 100%;
height: 450px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<input type="text" id="text1">
</div>
<div class="main">Content that is going to hide when textbox is changed</div>
Hope it helps :)

Change CSS of a div when hovering another (JQuery)

I want to change the CSS of a div when hovering its parent div.
This is my HTML:
<div id="box1" class="hover-on-div-1">
<img src="images/1.png" alt="" />
<div id="line1"></div>
<div class="text_align"><span>Text here</span>
</div>
</div>
Here is the CSS:
#box1 {
height: 295px;
width: 220px;
background-color: #86d1f4;
float: left;
margin-left: 30px;
margin-right: 120px;
margin-top: 55px;
color: #0081C5;
}
#box1:hover {
background-color: #494c5b;
color: #BFB6AF;
}
#line1 {
height:1px;
background:#0081C5;
width:126px;
margin-top:67px;
margin-left:40px;
position:absolute;
}
Note: .hover-on-div-1 is the class I use for a JQuery function that changes the image, the <span> is used only for a text-transform and the text-align class is pretty self explanatory.
How do I change the .line1 div when hovering over #box1?
I managed to change everything inside the #box1 div when I hover but not the .line1. Did some search on SO but since I'm a total noob when it comes to JQuery/JavaScript it didn't helped too much.
https://jsfiddle.net/nLg8Lr7x/
You don't need JS for this - your #line1 div is child of #box1 div.
Just add some css like this:
#box1:hover #line1 {
/* Changes for #line1 when #box1 hovered */
}
Here is examle on jsbin.
If you want to do it with jQuery you can make use of mouseover and mouseleave functions to change css like below.
Notes: I suggest you to make use of addClass and removeClass functions instead of setting hard codded css in functions.
$('#box1').mouseover(function() {
$('#line1').css("background", "red"); // change css
});
$('#box1').mouseleave(function() {
$('#line1').css("background", "#0081C5"); // change back css as it was
});
$('#box1').mouseover(function() {
$('#line1').css("background", "red");
});
$('#box1').mouseleave(function() {
$('#line1').css("background", "#0081C5");
});
#box1 {
height: 295px;
width: 220px;
background-color: #86d1f4;
float: left;
margin-left: 30px;
margin-right: 120px;
margin-top: 55px;
color: #0081C5;
}
#box1:hover {
background-color: #494c5b;
color: #BFB6AF;
}
#line1 {
height: 1px;
background: #0081C5;
width: 126px;
margin-top: 67px;
margin-left: 40px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="hover-on-div-1">
<img src="images/1.png" alt="" />
<div id="line1"></div>
<div class="text_align"><span>Text here</span>
</div>
</div>

CSS window width resize issues

I am having problems with some content not fixed into one place when I resize the window on a browser, I basically have 3 div id box elements placed next to each other.
They are positioned fine however when I resize the screen they seem to fall below one another.
I have min-width: 947px; in the body of the CSS however this does not do anything.
HTML:
<div id ="featured1">
</div>
<div id ="featured3">
</div>
<div id ="featured2">
</div>
CSS:
#featured1{
float:left;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
margin-left:150px;
border:1px solid black;
width:250px;
height:150px;
}
#featured2 {
display: inline-block;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
}
#featured3 {
float:right;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
margin-right:200px;
}
For some reason when I try resizing the screen with this code the elements fall below each other, I am looking for the content to completely remain the same and not resize at all.
Here is the working example: jsFiddle link
use
display: inline-block;
on all 3 divs, then they wont go down.
Note: this property will not work on IE7 and smaller versions.
You have given your body a min-width:947px but the actual width occupied by all divs including the margin and borders, etc is 1150px.
Thats why its breaking.
Please add vertical-align: top; property on all the divs
This should help. FYI. When writing in CSS make sure you minify the code. Google developer has a great section on this (https://developers.google.com/speed/pagespeed/service/MinifyCSS).
HTML:
<div id="container">
<div id="featured1">
Featured 1
</div>
<div id="featured2">
Featured 2
</div>
<div id="featured3">
Featured 3
</div>
</div>
CSS:
#container {
position: absolute;
width: 836px;
height: 190px;
}
#featured1, #featured2, #featured3 {
position: relative;
font-family: 'Lobster13Regular';
font-size: 35px;
float: left;
left: 20px;
top: 20px;
width: 250px;
height: 150px;
border: 1px solid #000;
overflow: hidden; /*Remove if you are not going to overflow text in each element*/
}
#featured2, #featured3 {
margin-left: 20px;
}

Having trouble extending divs to the bottom of the page. jsFiddle included

Having trouble extending the left and right divs to the bottom of the page, no more no less.
Here's my work.
http://jsfiddle.net/qggFz/26/
Thanks,
Dale
Here is your js solution, sir:
//Can place js in <head> tag
$(document).ready(function(){
var remHeight = $('html').height() - $('#top').height();
$('#left').css('height', remHeight);
$('#right').css('height', remHeight);
});
css:
body, html
{
height: 100%;
}
.top {
background: red;
}
.left {
width: 25%;
background: grey;
float: left;
}
.right {
width: 25%;
background: blue;
float: left;
}
html:
<html>
<body>
<div id="top" class="top">
<div id="msg">hello</div>
</div>
<div id="left" class="left">
left
</div>
<div id="right" class="right">
right
</div>
</body>
</html>
http://jsfiddle.net/zTEhB/
Check: http://jsfiddle.net/5gqNn/
You need to specify the height of the root element.
Reference:
https://developer.mozilla.org/en/CSS/height
The is calculated with respect to the height of the
containing block. If the height of the containing block is not
specified explicitly, the value computes to auto. A percentage height
on the root element (e.g. ) is relative to the viewport.
You have to say that the body and html tags are also 100% like this:
html, body{
height:100%;
position: relative;}
.top {
background: red;
}
.left {
position: relative;
width: 25%;
height: 100%;
background: grey;
float: left;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%;
}
.right {
position: relative;
width: 25%;
height: 100%;
background: blue;
float: left;
}

Categories