I have my own custom popup window in my framework that is draggable using the draggable attribute.
Problem is, on multiple displays you can drag my window completely off the browser's screen and potentially break my web application (if the custom window is modal for example).
How can I stop the default draggable attribute from being dragged off onto another screen?
The .draggable() function in JQuery UI has an option for containment
Here's an example of its usage
JSFiddle
HTML
<div id="container">
<div class="child-container">
<div class="draggable" id="d1">I'm stuck inside my parent</div>
<div class="draggable" id="d2">I'm stuck inside the outer container</div>
</div>
<div class="draggable" id="d3">I'm stuck inside the document</div>
<div class="draggable" id="d4">I can go anywhere!</div>
</div>
CSS
div {
border-width: 2px;
border-style: solid;
margin: 2px;
padding: 2px;
background-color: #fff;
}
#container {
margin: 20px;
border-color: lime;
height: 300px;
}
.child-container {
border-color: red;
width: 50%;
float: right;
height: 250px;
}
.draggable {
width: 100px;
height: 100px;
border-color: blue;
}
JQuery
// Make draggable
$('.draggable').draggable();
// Add containment for each item
$('#d1').draggable('option', 'containment', 'parent');
$('#d2').draggable('option', 'containment', '#container');
$('#d3').draggable('option', 'containment', 'document');
$('#d4').draggable('option', 'containment', 'window');
Related
I would like to make a cell to not move in sortablejs.
All items are draggable and sortable except for .clearing. However, you can move any other divs around or in front of .clearing and force it to move. Try to move A or B to the beginning of the grid (left top corner) and observe .clearing is pushed down the grid.
I would like to disable that and ensure .clearing can not be moved at all. Thanks
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 10px;
background-color: #fff;
color: #444;
}
https://codepen.io/zocoi/pen/xxbogZw
EDIT: updated screenshot, description and codepen with current undesired behaviour
Select which elements are draggable.
$(()=>{
const wrapper = $("#wrapper")[0]
Sortable.create(wrapper, {
draggable: '.box'
})
})
Codepen
Alternatively, you can use draggable: 'div:not(.clearing)' or something similar.
Since sortable.js actually re-orders the HTML all we need to do is determine the location of the "clearing" div and the natural grid flow will take care of the rest.
Remove the "clearing" filter from the sortable.js code and lock the required div into its required place in the grid with:
grid-row:1;
grid-column:1
$(()=>{
const wrapper = $("#wrapper")[0]
Sortable.create(wrapper)
})
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-template-columns: 120px 120px 120px;
grid-gap: 10px;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
cursor: grab;
}
.clearing {
background-color: blue;
color: #fff;
border-radius: 5px;
padding: 10px;
font-size: 150%;
grid-row:1;
grid-column:1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.1/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper" id="wrapper">
<div class="clearing" title="but I can be moved by moving others around me">Can't move me</div>
<!-- should not allow dragging any element before this .clearing, try to drag A before here and it does move -->
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
</div>
When I click on a button in my header, it goes to the div id I specified, which is what I want, but my header, which is always on top and fixed at the top of my window, hide the informations. Is there a way to say that when I click my button, the window will go 20px above the div? My code right now:
<nav class="Nav">
<a class="Navigation" id="FirstHeader" href="#FirstTitle">Title</a>
<a class="Navigation" id="SecHeader" href="#sSecTitle">Title2</a>
</nav>
This put the div I called directly at the top and its hidden by my header. Can I make it so that the div is displayed under my header?
Please use CSS property "position" to address your requirement, as on button click place position in a way making at desired postion with "top", "left", "right", "bottom", please find below code snippet, might be usefull:
#parent {
position: relative;
width: 500px;
height: 400px;
background-color: #fafafa;
border: solid 3px #9e70ba;
font-size: 24px;
text-align: center;
}
#child {
position: absolute;
left: 0px;
width: 200px;
height: 200px;
background-color: #fafafa;
border: solid 3px #78e382;
font-size: 24px;
text-align: center;
}
<div id='parent'>
<div id='child'></div>
</div>
Please can someone assist, looks like such a simple function but for the life of me I cannot get it right. I need to have it inserted on my wordpress website.
Its a simple show hide content when mouseover on another block. Exactly like the one on this site, under the heading Solutions. I mouseover the title block and I see the content on the right hand side.
Is there a very simple way to this? Or even a WP plugin?
Thanks in advance.
I just created a simple solution. Check this below or https://jsfiddle.net/oneness/Lotaaxdh/
JS/CSS/HTML RESPECTIVELY
$( ".science" ).mouseover(function() {
$( "#social_display" ).hide("fast");
$( "#science_display" ).show("slow");
});
$( ".social" ).mouseover(function() {
$( "#science_display" ).hide("fast");
$( "#social_display" ).show("slow");
});
.box{
background-color: #37545c;
border:1px solid #000000;
padding:5px 5px 5px 5px;
color:#ffffff;
}
.right{
float:right;
}
.left{
float:left;
}
#science_display, #social_display {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='left'>
<div class="box science">Science</div><br>
<div class="box social">Social</div>
</div>
<div class='right'>
<div id='science_display'>This is the story behind Science</div>
<div id='social_display'>Social button story and other details </div>
</div>
I made this for you, but if you have no knowlegde of coding it might be hard to add alone.
https://jsfiddle.net/Skaadel/5s7symfe/
Jquery
$('#puppies').hover(function() {
$('.display').html('Puppies'); /** Change ('Puppies') to change text displayed when hover**/
});
$('#kittens').hover(function() {
$('.display').html('Kittens');/** Change ('Kittens') to change text displayed when hover**/
});
$('#aardvark').hover(function() {
$('.display').html('Aardvark');
/** Change ('Aardvark') to change text displayed when hover**/
});
HTML
<div class="container">
<div id ="kittens"></div>
<div id ="aardvark"></div>
<div id ="puppies"></div>
</div>
<br>
<div class="display">Hover on the picture for description.</div>
CSS
body { background: black; }
.display {
font:20pt 'Georgia';
height:50px;
width: 759px;
text-align:center;
background-color: white;
border: 1px solid black;
margin: auto;
}
.container{
height: 250px;
width: 759px;
margin: auto;
border: 3px solid black;
}
#kittens{
background-image: url(http://goo.gl/Ktu3u0);
height: 250px;
width: 250px;
display: inline-block;
}
#aardvark{
background-image: url(http://goo.gl/qQUUff);
height: 250px;
width: 250px;
display: inline-block;
}
#puppies{
background-image: url(http://goo.gl/6gvDn2);
height: 250px;
width: 250px;
display: inline-block;
}
I made it fast, so the design is not that pretty.
I have a main div under which there can be one or two sub divs. When there are two sub-divs, I would want them to be displayed side-by-side. But If I have only one sub div, then I'd want it to be displayed in the center. Can this be achieved by using CSS or should I take help of JavaScript? Using the following CSS I'm able to achieve the side-by-side part of it. But I'm not sure how to go forward when there is only one sub div
HTML:
<div id="maindiv">
<div class="subdiv">
<p>Div One</p>
</div>
<div class="subdiv">
<p>Div Two</p>
</div>
</div>
CSS:
div.subdiv {
float: left;
padding: 20px;
}
div#maindiv {
border: 2px solid black;
height: 120px;
width: 200px;
}
Use display:inline-block instead of float:left. Try to remove the second sub div in my example fiddle and you can see the desired result.
div.subdiv {
display:inline-block;
padding: 20px;
}
div#maindiv {
border: 2px solid black;
height: 120px;
width: 200px;
text-align:center;
}
DEMO
Disclaimer: I'm relatively new to jQuery and JavaScript. The openStatement() function below executes whenever it is determined that the #statementTab is not already open. If the code below isn't enough information, simply check out the source below.
Basically, the UL containing the various tabs flickers and disappears whenever the user opens the #statementTab. I'd like to fix this.
Source: http://www.cameronhermens.com/dbunkr/brochure.html
// The openStatement function opens the statement tab when the user clicks
<a id="openIt"> (if the statement tab isn't already open).
function openStatement() {
$('#explore').animate({width: '70%'}, '200');
$('#statementTab').animate({width: '213px'}, '1000');
};
// Here's the DIV.
<div id="explore" class="brochure">
<ul id="brochureTab">
<li><a href="welcome.html" >welcome</a></li>
<li>our mission</li>
<li>what is dBunkr</li>
</ul>
</div>
<div id="statementTab">
<a id="openIt">
<img class="opaque left-5" src="images/rightArrow.jpg" height="10" width="6" alt="Expand the Statement tab">
<span class="statementBar">Statements</span>
</a>
</div>
The UL#brochureTab is being hidden during animation because as #explore is animating, the jQuery is applying a style of overflow: hidden to it. This style is then removed upon completion of the animation.
A quick solution (i.e. without addressing the way that you have styled the rest of your elements) would be to add the style overflow: visible !important; to #explore.
You have the ul#brochureTab outside the div#explore by using the CSS top: -45px;.
Whenever you animate the div#explore with jQuery .animate(), the ul#brochureTab gets "flashed" because the jQuery .animate() automatic switches to overflow:"hidden" while performing the animation.
The solution is to use a DIV to serve as a wrapper to the div#explore, and have it with the visual look you've got on the div#explore:
CSS
#wrapper {
background-color: #FFFFFF;
border: 3px solid #CCCCCC;
border-radius: 7px 7px 7px 7px;
box-shadow: 3px 3px 3px #CCCCCC;
float: left;
height: inherit;
padding: 5px;
}
THE MARKUP WOULD BE:
<div id="wrapper">
<div id="explorer">
<ul id="brochureTab">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<div id="ui-tabs-3">...</div>
<div id="ui-tabs-10">...</div>
<div id="ui-tabs-12">...</div>
</div>
<div id="statementTab">...</div>
</div>
AND TO PREVENT THE FLASHING:
#brochureTab {
float: left;
left: 10px;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
/* top: -45px; remove this line */
}
.ui-tabs-panel {
background: none repeat scroll 0 0 #FFFFFF;
border: 2px solid #CCCCCC;
float: left;
left: 30px;
margin: 0 auto 30px;
min-height: 410px;
padding: 10px;
position: relative;
/* top: -20px; remove this line */
width: 90%;
z-index: 1;
}
To your current animation method, no changes need to be made.
To your new CSS for the wrapper, may require some "tunning".