how to drag and resize DIV element - javascript

I want to resize and drag DIV element in a HTML page. The code I used is as follows.
Javascript:
<script type="text/javascript" src="dragresize.js"></script>
<script language="javascript" type="text/javascript">
var dragresize = new DragResize('dragresize',
{ minWidth: 50, minHeight: 50, minLeft: 20, minTop: 20, maxLeft: 600, maxTop: 600 });
// Optional settings/properties of the DragResize object are:
// enabled: Toggle whether the object is active.
// handles[]: An array of drag handles to use (see the .JS file).
// minWidth, minHeight: Minimum size to which elements are resized (in pixels).
// minLeft, maxLeft, minTop, maxTop: Bounding box (in pixels).
// Next, you must define two functions, isElement and isHandle. These are passed
// a given DOM element, and must "return true" if the element in question is a
// draggable element or draggable handle. Here, I'm checking for the CSS classname
// of the elements, but you have have any combination of conditions you like:
dragresize.isElement = function(elm)
{
if (elm.className && elm.className.indexOf('drsElement') > -1) return true;
};
dragresize.isHandle = function(elm)
{
if (elm.className && elm.className.indexOf('drsMoveHandle') > -1) return true;
};
// You can define optional functions that are called as elements are dragged/resized.
// Some are passed true if the source event was a resize, or false if it's a drag.
// The focus/blur events are called as handles are added/removed from an object,
// and the others are called as users drag, move and release the object's handles.
// You might use these to examine the properties of the DragResize object to sync
// other page elements, etc.
dragresize.ondragfocus = function() { };
dragresize.ondragstart = function(isResize) { };
dragresize.ondragmove = function(isResize) { };
dragresize.ondragend = function(isResize) { };
dragresize.ondragblur = function() { };
// Finally, you must apply() your DragResize object to a DOM node; all children of this
// node will then be made draggable. Here, I'm applying to the entire document.
dragresize.apply(document);
</script>
CSS
<style type="text/css">
.drsElement {
position: relative;
border: 1px solid #333;
}
.drsMoveHandle {
height: 10px;
border-bottom: 1px solid #666;
cursor: move;
}
.dragresize {
position: absolute;
width: 5px;
height: 5px;
font-size: 1px;
background: #EEE;
border: 1px solid #333;
}
.dragresize-tl {
top: -8px;
left: -8px;
cursor: nw-resize;
}
.dragresize-tm {
top: -8px;
left: 50%;
margin-left: -4px;
cursor: n-resize;
}
.dragresize-tr {
top: -8px;
right: -8px;
cursor: ne-resize;
}
.dragresize-ml {
top: 50%;
margin-top: -4px;
left: -8px;
cursor: w-resize;
}
.dragresize-mr {
top: 50%;
margin-top: -4px;
right: -8px;
cursor: e-resize;
}
.dragresize-bl {
bottom: -8px;
left: -8px;
cursor: sw-resize;
}
.dragresize-bm {
bottom: -8px;
left: 50%;
margin-left: -4px;
cursor: s-resize;
}
.dragresize-br {
bottom: -8px;
right: -8px;
cursor: se-resize;
}
</style>
HTML
<table cellpadding="5" cellspacing="0" width="100%" style="margin:auto;">
<tr>
<td><div class="drsElement drsMoveHandle" id="output1" style="font-weight:bold;height:20px;margin-top:40px"></div></td>
</tr>
<tr>
<td><div class="drsElement drsMoveHandle" id="output2" style="height:40px;margin-top:30px"></div></td>
</tr>
<tr>
<td><div class="drsElement drsMoveHandle" id="output3" style="height:50px;margin-top:40px;"></div></td>
</tr>
</table>
The issue is that I can't drag it any where I can resize but can't reduce the DIV element size from the original size, I don't know why..?.

I see you are using the code from TwinHelix http://www.twinhelix.com/javascript/dragresize/
1) Please give credit to the author by always stating, clearly, where you got the code you are using. You should have told us that you are using the package available from TwinHelix. Don't, deliberately or by omission, let people think that code you show is your own. If you got it somewhere, tell us.
2) I've used that code to explore some possibilities and I had no problem with it. I could resize divs to any size, including to smaller than the original size.
I recommend you go to the TwinHelix site and get the current code and then start over and make sure you are using it correctly.
You can set limits on how large or small a div can be made, limits on how much it can be moved up and down, etc.
Make sure you understand at least the basics of what it is doing and how to code the divs to do what you want done.
Take TwinHelix's demo page, copy it to your system, with all the Javascript, etc. and get it to work on your system. Then make that page work the way you want - divisions sizes, content, etc. - and once you have divisions working the way you want, integrate the code into your own pages. Never take code from somewhere and jump right in and put it in your pages. Isolate things, make a separate test page with only the new thing, drag and resize in this example, and then integrate it into your pages.
Trying to change it to work the way you want at the same time you are integrating it into your pages will cause you more problems than you can handle.
When doing any programming, break it down into easily handled chunks, get them working the way you want, and then put them together to make the whole (I've been at "this" for 39+ years and have just a bit of experience).
Read the comments in the sample code and the other code and understand at least who to define the divisions.
Unless you are sure of what you are doing, don't modify any of the code or CSS or you may introduce problems with no idea of where they came from.
3) Except for a couple of issues, the TwinHelix code works well. My problem was in trying to stretch the capabilities and adding new ones. I got things working the way I want but there are a few quirks I simply don't like. So, I'm looking at some other methods of doing it. I don't know when I'll have it done, but when I do I'll post a page on my web site at http://www.bobnovell.com --- be aware that there is not much there right now (as of December 28, 2012) but I have a lot to add when I have time.
4) For a reasonably good drag function, take a look at http://tool-man.org/ToolManDHTML/ - the "Basic Dragable Layers" It does not have resizing but it works well. The only problem has to do with setting the zIndex. I've added code to handle mouseDowns to bring divisions
5) I would not expect anyone to look at all of the code - JavaScript, CSS, HTML - that you provided in this question and give you advice -- it is simply too large.
Also, go to the authors if you have questions.

Related

Page doesn't scroll when cursor is over fixed div

My layout looks almost identical to this codepen.
.parent {
color: white;
padding: 70px;
position: relative;
background-color: #0074d9;
margin-top: 50px;
}
.element {
background-color: lighten(#0074d9, 20);
opacity: .85;
padding: 20px;
color: rgba(255,255,255,.9);
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
The codepen works the right way, so it's been hard to come up with a demonstrable example.
When my cursor is positioned over the fixed "child element" div, I want to be able to scroll the parent but not be able to clickthrough.
The common answer seems to be "pointer-events: none", but that allows click interaction with the page below.
Open to other suggestions or explanations as to why it works in the codepen, but doesn't outside of it.
The solution that worked for me was to use jquery to grab the parent by id and add my deltaY to its scrollTop.
<div
onWheel={(e) => {
const component = $(`#content`);
const contentScrollPosition = component.scrollTop();
component.prop("scrollTop", contentScrollPosition + e.deltaY);
}}
</div>
This allows me to scroll the parent even when my cursor is on the fixed-position div.
Unfortunately, mobile doesn't work well. First, you would need to track the touch event though onTouchStart, End, and Move. Even then, you lose touch scroll momentum which makes it feel too unnatural.

CSS pseudo class disappears after variable value update via JS

I would like to be able to update a CSS variable via JS, but when I make the variable update the CSS pseudo element get's destroyed (i.e. just disappears).
Here's the SCSS code:
:root {
--test-thing: "";
}
.folder-1-open span::after {
width: 90%;
height: 85%;
bottom: 0;
left: 5%;
background-color: #fff;
z-index: 3;
content: var(--test-thing);
}
I'm trying to manipulate the variable thusly:
const root = document.documentElement
root.style.setProperty('--test-thing', "Hello World")
The CSS above works perfectly fine on the element (a label) that it's applied to, basically just a white square, but as soon as I try and update the CSS variable --test-thing to add a string via the content prop, the whole thing just disappears.
Is it not possible to do this with a pseudo element or class?
From researching related posts on SO, my understanding was that this was possible using CSS variables.
For context, I’m working off this example of a pure CSS interactive folder (when it’s open is when I’d like to update content proper dynamically).
Ok, I figured out why this is happening, sort of. Still not 100% sure why, but it has something to do with the fact that the new value isn't in quotes. Just put the value in quotes and it works fine.
const root = document.documentElement
root.style.setProperty('--test', "'Hello World'") // <-- this needs to be in quotes
:root {
--test: "";
}
#test {
height: 100px;
width: 100px;
background: #ccc;
}
#test:after {
content: var(--test);
min-width: 100px;
background: #000;
min-height: 30px;
color: #fff;
}
<div id="test">
</div>

jQuery: using a div embedded in a JavaScript variable as a jQuery selector

I have a jQuery custom scrollbar, and I invoke it like this:
<script>
(function($){
$(window).on("load",function(){
$(".main_text,#C2,.png_container").mCustomScrollbar();
});
})(jQuery);
That works correctly for all of the page elements except .png_container, but unlike the other sections, that section is only used in a JavaScript variable that is used to substitute text in a placeholder ID, and I think that's where the problem is.
Here is how it's called from an "onclick" button event:
<div class="main_text">
<div id="C2">Main Text</div>
</div>
if (type == 101) {
var X = "<header>First Section</header><br>A classic example of good form/<br><br>More information<ul type=\"circle\"><li>Element Point 1<br></li><li>Element Point 1</li></ul><i><span class=\"span_01\">So much better</i></span><br><br><div class=\"png_container\"><img class=\"png_format\" src=\"images/Element 001.png\"></div>"}
document.querySelector("#C2").innerHTML = X;}
The png_container has a separate set of scroll bars, but they are not replaced by the custom scroll bars (the other page sections do get the custom scroll bars).
Here is the relevant css:
.png_container{
overflow: auto;
overflow-y: auto;
overflow-x: auto;
height: 400px;
width: 800px;
border: 2px solid;
border-color: green;
}
#C2{
color:#DBDBDB;
font-family: camphorW04-Thin,calibri,arial;
font-size: 14pt;
text-indent: 0px;
width: auto;
margin: auto;
margin-left: 20px;
margin-right: 250px;
}
So my question is: how can I replace the scroll bars on a section that is embedded in a JavaScript variable, as shown above?
My research has found some similar questions, but none that answer this specific question, so I hope somebody knows the answer. Thanks very much for any ideas.
You initialize the mCustomScrollbar plugin on load this way:
$(window).on("load",function(){
$(".main_text,#C2,.png_container").mCustomScrollbar();
});
The two first selectors have matching elements at this moment. But there is no existing element to match the last selector since .png_container is appended on click.
So you can safely remove .png_container from the load handler...
And initialise mCustomScrollbar on .png_container when it exists.
$(window).on("load",function(){
$(".main_text,#C2").mCustomScrollbar(); // Remove .png_container
});
$(".something").on("click",function(){
if (type == 101) {
var X = "<header>First Section</header><br>A classic example of good form/<br><br>More information<ul type=\"circle\"><li>Element Point 1<br></li><li>Element Point 1</li></ul><i><span class=\"span_01\">So much better</i></span><br><br><div class=\"png_container\"><img class=\"png_format\" src=\"images/Element 001.png\"></div>"}
document.querySelector("#C2").innerHTML = X;
$(".png_container").mCustomScrollbar(); // Add this.
}

why will jquery not put results in div with background color set

I have a menu containing onclick calls. Then my js script catches the data and sends it to a php script for processing and returns it back to my js script which is supposed to place the results into the defined document element. Simple enough, right.
For some reason though, if I set the background color in my css the results will not show. Here are the relevant parts of my code. Can someone point out to me if there is a flaw in my code; and if not, why does this behavior happen and is there a work around.
My css...
.decade { margin-left: 150px; padding: 20px; color: green; }
.slaby { position: fixed; left: 200px; bottom: 86px; top: 50px; right:50px; color: black; padding: 20px; background-color: #ddd; border: 2px solid grey; }
My html...
<div class='tln'>
<span class='point' onclick='mes(this)' go='a' >The 70's</span>
<span class='point' onclick='mes(this)' go='b' >The 80's</span>
</div>
<div id='decade' class='decade'>
<div id='slab' class='slaby'></div>
</div>
My js...
function mes(span) {
var clam = span.getAttribute('go'); var shot = 1;
$.ajax({ url:'', type:'POST',
data:{ page: clam, shoot: shot, },
success: function(snowy){
$('#slab').html(snowy);
$('#decade').html(snowy);}});}
In my js script I am placing the results in both 'slab' and 'decade' elements just for testing purposes. Now with my css the way that it is, div(decade) is showing the results, while div(slab) is still blank.
For some reason: if I remove the background color from the div(slab) The results show here; if I add a background color to the div(decade) the results still show here.
I'm looking for a way to display the results in div(slab); as well as, having css style div(slab)'s background color. Thank you all for any help and have a great day.
Some of the other comments pointed out that #slab is "inside" of #decade so when you are doing $('#decade).html() you are replacing/removing #slab.
Use
$('#decade').append()
instead or alternatively
$('#decade').prepend()
(SOLVED) why will jquery not put results in div with background color set.
I am not sure why the query contents were not being displayed, but changing the style for div(slab) with a z-index provided the results I was looking for.
I set the z-index for div(slab) to z-index: -1; and 'voila', works perfect.
.slaby { position: fixed; left: 200px; bottom: 86px; top: 50px; right:50px; color: black; padding: 20px; z-index: -1; background-color: #ddd; border: 2px solid grey; }
I have no idea why this works because no other element inside or outside of it has a z-index set.
Thank you all for your input and effort. I hope this solution helps somebody.

Create and Display a Div using JQuery without distorting other elements

I am trying to create a div and show a timeout message in there. But it actually distorts other parts of Page. For eg see below. Session Timed out is the div with the message.
Now I don't want this to happen. PFB the JQuery code I am using to create this Div
function ShowSessionTimeOutDiv() {
var styler = document.createElement("div");
styler.setAttribute("style","font-size:15px;width:auto;height:auto;top:50%;left:40%;color:red;");
styler.innerHTML = "<b><i>Session TimedOut, Please refresh the Page</i></b>";
document.body.appendChild(styler);
var currentDiv = $('#GoToRequestControl1_UpdatePanel1').get(0);
currentDiv.parentNode.insertBefore(styler,currentDiv) ;
}
Am I missing something here? The Part in which this div is being displayed is coming from Master Page.
Have you tried the position:fixed styling on it in css, i did that on one of my websites and it didn't distort anything.
A page has a natural flow of its elements based on the default display rules specified by the W3C. When you add a div in between other elements it naturally affects the layout of the page; the positions of the other elements.
In order to drop in a new element without it affecting other elements you have to either reserve space for it, or take it out of the normal page flow.
There are a couple of ways to take an element out of the flow — you can float it, float:left or float:right, which is great, for example, to stack blocks on the left (instead of top-down) and let them wrap to new rows as available width changes. Using a flex layout gives you a lot of control also. But in this case of one thing popping up, changing the positioning of the new element is the most straightforward and can let you put the block exactly where you want it.
I have a demonstration and full explanation in a fiddle showing several examples along the way to getting what you want.
Basically, styling is needed to reposition the timeout message element that you're inserting. Styling is better done with CSS styles, compared to adding a bunch of inline styles. If I put my timeout popup message in a "messagebox" I can make a class for it.
/* Your styles, plus a couple extra to make the example stand out better */
div.messagebox {
font-size: 16px;
width: auto;
height: auto;
top: 40%;
left: 30%;
background-color: white;
border: 2px solid black;
}
Likewise, style the message itself with a class, instead of using inline styles and the deprecated presentational tags <b> and <i>.
/* I want the message in a messagebox to be bold-italic-red text. */
div.messagebox .message {
color: red;
font-style: italic;
font-weight: bold;
}
The big difference is that we will change the positioning of the element from the default static to instead use absolute positioning:
/* I don't really recommend a class called "positioned".
A class should describe the kind of thing the element *is*
not how it *looks*
*/
div.messagebox.positioned {
position: absolute;
width: 40%;
padding: 1.5em;
}
/* The container of the positioned element also has to be positioned.
We position it "relative" but don't move it from its natural position.
*/
section#hasposition {
position: relative;
}
The term "absolute" is tricky to learn ... the element being positioned is given an absolute position within its container, in a sense it's positioned relative to its container... but what position:relative means is relative to its own natural position, so it's easy to get confused at first over whether you want absolute or relative positioning.
Putting it all together, we have some basic HTML that represents major portions of a page — a real page will have far more, but those should be contained within some top-level containers. This shows only those top-level containers.
Then we have some javascript that will add the new element at the appropriate time. Here I just call the function to add it after a delay created with setTimeout(). I'm using full-on jQuery since you're using some in your example, and it makes the javascript more portable and more concise.
function ShowSessionTimeoutStyled() {
var styler = $('<div>').addClass('messagebox').addClass('positioned');
styler.html('<span class="message">The Session Timed Out</span>');
$('#hasposition .above').after(styler);
}
// wait 6 seconds then add the new div
setTimeout(ShowSessionTimeoutStyled, 6000);
div.messagebox {
font-size: 16px;
width: auto;
height: auto;
top: 20%;
left: 20%;
background-color: white;
border: 2px solid black;
}
div.messagebox .message {
color: red;
font-style: italic;
font-weight: bold;
}
div.messagebox.positioned {
position: absolute;
width: 40%;
padding: 1.5em;
}
section#hasposition {
position: relative;
}
/* also style some of the basic parts so you can see them better in the demonstration */
section.explanation {
margin: 1em 0.5em;
padding: 0.5em;
border: 1px solid gray;
}
.demonstration {
margin-left: 1em;
padding: 1em;
background-color: #e0e0e0;
}
.demonstration .above {
background-color: #fff0f0;
}
.demonstration .middle {
background-color: #f0fff0;
}
.demonstration .below {
background-color: #f0f0ff;
}
.demonstration footer {
background-color: white;
}
p {
margin-top: 0;
padding-top: 0;
}
section {
font-family: sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="explanation">
<p>Here, a div is added dynamically, after the "basic part above", but the added div is <em>positioned</em>. You can see the other content isn't affected.</p>
<section class="demonstration" id="hasposition">
<div class="above">Basic part above</div>
<div class="middle">Middle part</div>
<div class="below">Part Below</div>
<footer>This is the page footer</footer>
</section>
</section>
I highly recommend the site Position Is Everything for articles and tutorials on positioning. Some of its other content is outdated — who needs to make PNGs to do drop-shadows any more? — but the way positioning works hasn't changed.

Categories