Making a resizable icon stick to the bottom of a dynamically sized div
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I am trying to work on a div with that is populated by information on mouseover.
The div it is populated to is both resizable and draggable, and that works just fine. My minor issue is that the resizable icon stays in its place when the box flexes.
I would like to see if I can make the resizable icon remain on the bottom of the div as it grows in size?
$(".btn").mouseenter(function() {
$("#thepoem").html($(this).val());
});
$(".btn").mouseleave(function() {
$("#thepoem").empty();
});
$("#superresizablediv").resizable();
$("#superresizablediv").draggable();#superresizablediv {
position: absolute;
top: 15%;
left: 5%;
min-width: 250px;
min-height: 50px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
z-index: 1
}
#thepoem {
display: flex;
display: inherit;
min-height: 50px;
min-width: 250px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
}<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<button class="btn" value="Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore— While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. “’Tis some
visitor,” I muttered, “tapping at my chamber door— Only this and nothing more.">The raven verse 1</button>
<button class="btn" value="Ah, distinctly I remember it was in the bleak December;
And each separate dying ember wrought its ghost upon the floor.
Eagerly I wished the morrow;—vainly I had sought to borrow
From my books surcease of sorrow—sorrow for the lost Lenore—
For the rare and radiant maiden whom the angels name Lenore—
Nameless here for evermore.">The raven verse 2</button>
<div id="superresizablediv" class="ui-resizable-se">
<div id="thepoem"></div>
</div>javascript jquery html css resize
edited Nov 26 '18 at 23:48
itodd
2,040189
asked Nov 26 '18 at 22:45
I_Literally_CannotI_Literally_Cannot
225
add a comment |
0
I am trying to work on a div with that is populated by information on mouseover.
The div it is populated to is both resizable and draggable, and that works just fine. My minor issue is that the resizable icon stays in its place when the box flexes.
I would like to see if I can make the resizable icon remain on the bottom of the div as it grows in size?
$(".btn").mouseenter(function() {
$("#thepoem").html($(this).val());
});
$(".btn").mouseleave(function() {
$("#thepoem").empty();
});
$("#superresizablediv").resizable();
$("#superresizablediv").draggable();#superresizablediv {
position: absolute;
top: 15%;
left: 5%;
min-width: 250px;
min-height: 50px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
z-index: 1
}
#thepoem {
display: flex;
display: inherit;
min-height: 50px;
min-width: 250px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
}<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<button class="btn" value="Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore— While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. “’Tis some
visitor,” I muttered, “tapping at my chamber door— Only this and nothing more.">The raven verse 1</button>
<button class="btn" value="Ah, distinctly I remember it was in the bleak December;
And each separate dying ember wrought its ghost upon the floor.
Eagerly I wished the morrow;—vainly I had sought to borrow
From my books surcease of sorrow—sorrow for the lost Lenore—
For the rare and radiant maiden whom the angels name Lenore—
Nameless here for evermore.">The raven verse 2</button>
<div id="superresizablediv" class="ui-resizable-se">
<div id="thepoem"></div>
</div>javascript jquery html css resize
edited Nov 26 '18 at 23:48
itodd
2,040189
asked Nov 26 '18 at 22:45
I_Literally_CannotI_Literally_Cannot
225
add a comment |
0
0
0
I am trying to work on a div with that is populated by information on mouseover.
The div it is populated to is both resizable and draggable, and that works just fine. My minor issue is that the resizable icon stays in its place when the box flexes.
I would like to see if I can make the resizable icon remain on the bottom of the div as it grows in size?
$(".btn").mouseenter(function() {
$("#thepoem").html($(this).val());
});
$(".btn").mouseleave(function() {
$("#thepoem").empty();
});
$("#superresizablediv").resizable();
$("#superresizablediv").draggable();#superresizablediv {
position: absolute;
top: 15%;
left: 5%;
min-width: 250px;
min-height: 50px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
z-index: 1
}
#thepoem {
display: flex;
display: inherit;
min-height: 50px;
min-width: 250px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
}<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<button class="btn" value="Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore— While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. “’Tis some
visitor,” I muttered, “tapping at my chamber door— Only this and nothing more.">The raven verse 1</button>
<button class="btn" value="Ah, distinctly I remember it was in the bleak December;
And each separate dying ember wrought its ghost upon the floor.
Eagerly I wished the morrow;—vainly I had sought to borrow
From my books surcease of sorrow—sorrow for the lost Lenore—
For the rare and radiant maiden whom the angels name Lenore—
Nameless here for evermore.">The raven verse 2</button>
<div id="superresizablediv" class="ui-resizable-se">
<div id="thepoem"></div>
</div>javascript jquery html css resize
edited Nov 26 '18 at 23:48
itodd
2,040189
asked Nov 26 '18 at 22:45
I_Literally_CannotI_Literally_Cannot
225
I am trying to work on a div with that is populated by information on mouseover.
The div it is populated to is both resizable and draggable, and that works just fine. My minor issue is that the resizable icon stays in its place when the box flexes.
I would like to see if I can make the resizable icon remain on the bottom of the div as it grows in size?
$(".btn").mouseenter(function() {
$("#thepoem").html($(this).val());
});
$(".btn").mouseleave(function() {
$("#thepoem").empty();
});
$("#superresizablediv").resizable();
$("#superresizablediv").draggable();#superresizablediv {
position: absolute;
top: 15%;
left: 5%;
min-width: 250px;
min-height: 50px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
z-index: 1
}
#thepoem {
display: flex;
display: inherit;
min-height: 50px;
min-width: 250px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
}<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<button class="btn" value="Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore— While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. “’Tis some
visitor,” I muttered, “tapping at my chamber door— Only this and nothing more.">The raven verse 1</button>
<button class="btn" value="Ah, distinctly I remember it was in the bleak December;
And each separate dying ember wrought its ghost upon the floor.
Eagerly I wished the morrow;—vainly I had sought to borrow
From my books surcease of sorrow—sorrow for the lost Lenore—
For the rare and radiant maiden whom the angels name Lenore—
Nameless here for evermore.">The raven verse 2</button>
<div id="superresizablediv" class="ui-resizable-se">
<div id="thepoem"></div>
</div>$(".btn").mouseenter(function() {
$("#thepoem").html($(this).val());
});
$(".btn").mouseleave(function() {
$("#thepoem").empty();
});
$("#superresizablediv").resizable();
$("#superresizablediv").draggable();#superresizablediv {
position: absolute;
top: 15%;
left: 5%;
min-width: 250px;
min-height: 50px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
z-index: 1
}
#thepoem {
display: flex;
display: inherit;
min-height: 50px;
min-width: 250px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
}<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<button class="btn" value="Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore— While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. “’Tis some
visitor,” I muttered, “tapping at my chamber door— Only this and nothing more.">The raven verse 1</button>
<button class="btn" value="Ah, distinctly I remember it was in the bleak December;
And each separate dying ember wrought its ghost upon the floor.
Eagerly I wished the morrow;—vainly I had sought to borrow
From my books surcease of sorrow—sorrow for the lost Lenore—
For the rare and radiant maiden whom the angels name Lenore—
Nameless here for evermore.">The raven verse 2</button>
<div id="superresizablediv" class="ui-resizable-se">
<div id="thepoem"></div>
</div>$(".btn").mouseenter(function() {
$("#thepoem").html($(this).val());
});
$(".btn").mouseleave(function() {
$("#thepoem").empty();
});
$("#superresizablediv").resizable();
$("#superresizablediv").draggable();#superresizablediv {
position: absolute;
top: 15%;
left: 5%;
min-width: 250px;
min-height: 50px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
z-index: 1
}
#thepoem {
display: flex;
display: inherit;
min-height: 50px;
min-width: 250px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
}<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<button class="btn" value="Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore— While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. “’Tis some
visitor,” I muttered, “tapping at my chamber door— Only this and nothing more.">The raven verse 1</button>
<button class="btn" value="Ah, distinctly I remember it was in the bleak December;
And each separate dying ember wrought its ghost upon the floor.
Eagerly I wished the morrow;—vainly I had sought to borrow
From my books surcease of sorrow—sorrow for the lost Lenore—
For the rare and radiant maiden whom the angels name Lenore—
Nameless here for evermore.">The raven verse 2</button>
<div id="superresizablediv" class="ui-resizable-se">
<div id="thepoem"></div>
</div>javascript jquery html css resize
javascript jquery html css resize
edited Nov 26 '18 at 23:48
itodd
2,040189
asked Nov 26 '18 at 22:45
I_Literally_CannotI_Literally_Cannot
225
edited Nov 26 '18 at 23:48
itodd
2,040189
asked Nov 26 '18 at 22:45
I_Literally_CannotI_Literally_Cannot
225
edited Nov 26 '18 at 23:48
itodd
2,040189
edited Nov 26 '18 at 23:48
itodd
2,040189
edited Nov 26 '18 at 23:48
itodd
2,040189
2,040189
asked Nov 26 '18 at 22:45
I_Literally_CannotI_Literally_Cannot
225
asked Nov 26 '18 at 22:45
I_Literally_CannotI_Literally_Cannot
225
asked Nov 26 '18 at 22:45
I_Literally_CannotI_Literally_Cannot
225
225
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
You need to update the height of #superresizablediv on mouseenter and reset the height on mouseleave
var height = '';
$(".btn").mouseenter(function() {
height = $("#superresizablediv").outerHeight();
$("#thepoem").html($(this).val());
$("#superresizablediv").height($("#thepoem").outerHeight())
});
$(".btn").mouseleave(function() {
$("#thepoem").empty();
$("#superresizablediv").height(height)
});
$("#superresizablediv").resizable();
$("#superresizablediv").draggable();#superresizablediv {
position: absolute;
top: 15%;
left: 5%;
min-width: 250px;
min-height: 50px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
z-index: 1
}
#thepoem {
display: flex;
display: inherit;
min-height: 50px;
min-width: 250px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
}<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<button class="btn" value="Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore— While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. “’Tis some
visitor,” I muttered, “tapping at my chamber door— Only this and nothing more.">The raven verse 1</button>
<button class="btn" value="Ah, distinctly I remember it was in the bleak December;
And each separate dying ember wrought its ghost upon the floor.
Eagerly I wished the morrow;—vainly I had sought to borrow
From my books surcease of sorrow—sorrow for the lost Lenore—
For the rare and radiant maiden whom the angels name Lenore—
Nameless here for evermore.">The raven verse 2</button>
<div id="superresizablediv" class="ui-resizable-se">
<div id="thepoem"></div>
</div>answered Nov 26 '18 at 23:04
itodditodd
2,040189
Thanks! It works. I accepted your answer! It caused a bit of another unexpected issue that the div will of course return to the original size$("#superresizablediv").height(height), now I'm trying to figure out if I resize the box height, it would set the min height to not be shorter than where I dragged it to. The width will not shrink, but the height will. Tips?
– I_Literally_Cannot
Nov 27 '18 at 7:47
I'm not sure I understand what you want to achieve. Currently the box will return the to height - even if resized - it was before the text was populated.
– itodd
Nov 28 '18 at 1:13
Yeah it's a bit complex. The idea is that the box can be resized by clicking and dragging the handle, but when the box empties, it reverts back to the min-height attribute. I'm wondering, by manually dragging the resize handle to a new height, let's say 500px, it would set the css so the box would not shrink below 500px until I drag it again
– I_Literally_Cannot
Nov 28 '18 at 6:29
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53490260%2fmaking-a-resizable-icon-stick-to-the-bottom-of-a-dynamically-sized-div%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You need to update the height of #superresizablediv on mouseenter and reset the height on mouseleave
var height = '';
$(".btn").mouseenter(function() {
height = $("#superresizablediv").outerHeight();
$("#thepoem").html($(this).val());
$("#superresizablediv").height($("#thepoem").outerHeight())
});
$(".btn").mouseleave(function() {
$("#thepoem").empty();
$("#superresizablediv").height(height)
});
$("#superresizablediv").resizable();
$("#superresizablediv").draggable();#superresizablediv {
position: absolute;
top: 15%;
left: 5%;
min-width: 250px;
min-height: 50px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
z-index: 1
}
#thepoem {
display: flex;
display: inherit;
min-height: 50px;
min-width: 250px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
}<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<button class="btn" value="Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore— While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. “’Tis some
visitor,” I muttered, “tapping at my chamber door— Only this and nothing more.">The raven verse 1</button>
<button class="btn" value="Ah, distinctly I remember it was in the bleak December;
And each separate dying ember wrought its ghost upon the floor.
Eagerly I wished the morrow;—vainly I had sought to borrow
From my books surcease of sorrow—sorrow for the lost Lenore—
For the rare and radiant maiden whom the angels name Lenore—
Nameless here for evermore.">The raven verse 2</button>
<div id="superresizablediv" class="ui-resizable-se">
<div id="thepoem"></div>
</div>answered Nov 26 '18 at 23:04
itodditodd
2,040189
Thanks! It works. I accepted your answer! It caused a bit of another unexpected issue that the div will of course return to the original size$("#superresizablediv").height(height), now I'm trying to figure out if I resize the box height, it would set the min height to not be shorter than where I dragged it to. The width will not shrink, but the height will. Tips?
– I_Literally_Cannot
Nov 27 '18 at 7:47
I'm not sure I understand what you want to achieve. Currently the box will return the to height - even if resized - it was before the text was populated.
– itodd
Nov 28 '18 at 1:13
Yeah it's a bit complex. The idea is that the box can be resized by clicking and dragging the handle, but when the box empties, it reverts back to the min-height attribute. I'm wondering, by manually dragging the resize handle to a new height, let's say 500px, it would set the css so the box would not shrink below 500px until I drag it again
– I_Literally_Cannot
Nov 28 '18 at 6:29
add a comment |
1
You need to update the height of #superresizablediv on mouseenter and reset the height on mouseleave
var height = '';
$(".btn").mouseenter(function() {
height = $("#superresizablediv").outerHeight();
$("#thepoem").html($(this).val());
$("#superresizablediv").height($("#thepoem").outerHeight())
});
$(".btn").mouseleave(function() {
$("#thepoem").empty();
$("#superresizablediv").height(height)
});
$("#superresizablediv").resizable();
$("#superresizablediv").draggable();#superresizablediv {
position: absolute;
top: 15%;
left: 5%;
min-width: 250px;
min-height: 50px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
z-index: 1
}
#thepoem {
display: flex;
display: inherit;
min-height: 50px;
min-width: 250px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
}<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<button class="btn" value="Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore— While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. “’Tis some
visitor,” I muttered, “tapping at my chamber door— Only this and nothing more.">The raven verse 1</button>
<button class="btn" value="Ah, distinctly I remember it was in the bleak December;
And each separate dying ember wrought its ghost upon the floor.
Eagerly I wished the morrow;—vainly I had sought to borrow
From my books surcease of sorrow—sorrow for the lost Lenore—
For the rare and radiant maiden whom the angels name Lenore—
Nameless here for evermore.">The raven verse 2</button>
<div id="superresizablediv" class="ui-resizable-se">
<div id="thepoem"></div>
</div>answered Nov 26 '18 at 23:04
itodditodd
2,040189
Thanks! It works. I accepted your answer! It caused a bit of another unexpected issue that the div will of course return to the original size$("#superresizablediv").height(height), now I'm trying to figure out if I resize the box height, it would set the min height to not be shorter than where I dragged it to. The width will not shrink, but the height will. Tips?
– I_Literally_Cannot
Nov 27 '18 at 7:47
I'm not sure I understand what you want to achieve. Currently the box will return the to height - even if resized - it was before the text was populated.
– itodd
Nov 28 '18 at 1:13
Yeah it's a bit complex. The idea is that the box can be resized by clicking and dragging the handle, but when the box empties, it reverts back to the min-height attribute. I'm wondering, by manually dragging the resize handle to a new height, let's say 500px, it would set the css so the box would not shrink below 500px until I drag it again
– I_Literally_Cannot
Nov 28 '18 at 6:29
add a comment |
1
1
1
You need to update the height of #superresizablediv on mouseenter and reset the height on mouseleave
var height = '';
$(".btn").mouseenter(function() {
height = $("#superresizablediv").outerHeight();
$("#thepoem").html($(this).val());
$("#superresizablediv").height($("#thepoem").outerHeight())
});
$(".btn").mouseleave(function() {
$("#thepoem").empty();
$("#superresizablediv").height(height)
});
$("#superresizablediv").resizable();
$("#superresizablediv").draggable();#superresizablediv {
position: absolute;
top: 15%;
left: 5%;
min-width: 250px;
min-height: 50px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
z-index: 1
}
#thepoem {
display: flex;
display: inherit;
min-height: 50px;
min-width: 250px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
}<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<button class="btn" value="Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore— While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. “’Tis some
visitor,” I muttered, “tapping at my chamber door— Only this and nothing more.">The raven verse 1</button>
<button class="btn" value="Ah, distinctly I remember it was in the bleak December;
And each separate dying ember wrought its ghost upon the floor.
Eagerly I wished the morrow;—vainly I had sought to borrow
From my books surcease of sorrow—sorrow for the lost Lenore—
For the rare and radiant maiden whom the angels name Lenore—
Nameless here for evermore.">The raven verse 2</button>
<div id="superresizablediv" class="ui-resizable-se">
<div id="thepoem"></div>
</div>answered Nov 26 '18 at 23:04
itodditodd
2,040189
You need to update the height of #superresizablediv on mouseenter and reset the height on mouseleave
var height = '';
$(".btn").mouseenter(function() {
height = $("#superresizablediv").outerHeight();
$("#thepoem").html($(this).val());
$("#superresizablediv").height($("#thepoem").outerHeight())
});
$(".btn").mouseleave(function() {
$("#thepoem").empty();
$("#superresizablediv").height(height)
});
$("#superresizablediv").resizable();
$("#superresizablediv").draggable();#superresizablediv {
position: absolute;
top: 15%;
left: 5%;
min-width: 250px;
min-height: 50px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
z-index: 1
}
#thepoem {
display: flex;
display: inherit;
min-height: 50px;
min-width: 250px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
}<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<button class="btn" value="Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore— While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. “’Tis some
visitor,” I muttered, “tapping at my chamber door— Only this and nothing more.">The raven verse 1</button>
<button class="btn" value="Ah, distinctly I remember it was in the bleak December;
And each separate dying ember wrought its ghost upon the floor.
Eagerly I wished the morrow;—vainly I had sought to borrow
From my books surcease of sorrow—sorrow for the lost Lenore—
For the rare and radiant maiden whom the angels name Lenore—
Nameless here for evermore.">The raven verse 2</button>
<div id="superresizablediv" class="ui-resizable-se">
<div id="thepoem"></div>
</div>var height = '';
$(".btn").mouseenter(function() {
height = $("#superresizablediv").outerHeight();
$("#thepoem").html($(this).val());
$("#superresizablediv").height($("#thepoem").outerHeight())
});
$(".btn").mouseleave(function() {
$("#thepoem").empty();
$("#superresizablediv").height(height)
});
$("#superresizablediv").resizable();
$("#superresizablediv").draggable();#superresizablediv {
position: absolute;
top: 15%;
left: 5%;
min-width: 250px;
min-height: 50px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
z-index: 1
}
#thepoem {
display: flex;
display: inherit;
min-height: 50px;
min-width: 250px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
}<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<button class="btn" value="Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore— While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. “’Tis some
visitor,” I muttered, “tapping at my chamber door— Only this and nothing more.">The raven verse 1</button>
<button class="btn" value="Ah, distinctly I remember it was in the bleak December;
And each separate dying ember wrought its ghost upon the floor.
Eagerly I wished the morrow;—vainly I had sought to borrow
From my books surcease of sorrow—sorrow for the lost Lenore—
For the rare and radiant maiden whom the angels name Lenore—
Nameless here for evermore.">The raven verse 2</button>
<div id="superresizablediv" class="ui-resizable-se">
<div id="thepoem"></div>
</div>var height = '';
$(".btn").mouseenter(function() {
height = $("#superresizablediv").outerHeight();
$("#thepoem").html($(this).val());
$("#superresizablediv").height($("#thepoem").outerHeight())
});
$(".btn").mouseleave(function() {
$("#thepoem").empty();
$("#superresizablediv").height(height)
});
$("#superresizablediv").resizable();
$("#superresizablediv").draggable();#superresizablediv {
position: absolute;
top: 15%;
left: 5%;
min-width: 250px;
min-height: 50px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
z-index: 1
}
#thepoem {
display: flex;
display: inherit;
min-height: 50px;
min-width: 250px;
background-color: #5fc0e3;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
}<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<button class="btn" value="Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore— While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. “’Tis some
visitor,” I muttered, “tapping at my chamber door— Only this and nothing more.">The raven verse 1</button>
<button class="btn" value="Ah, distinctly I remember it was in the bleak December;
And each separate dying ember wrought its ghost upon the floor.
Eagerly I wished the morrow;—vainly I had sought to borrow
From my books surcease of sorrow—sorrow for the lost Lenore—
For the rare and radiant maiden whom the angels name Lenore—
Nameless here for evermore.">The raven verse 2</button>
<div id="superresizablediv" class="ui-resizable-se">
<div id="thepoem"></div>
</div>answered Nov 26 '18 at 23:04
itodditodd
2,040189
answered Nov 26 '18 at 23:04
itodditodd
2,040189
answered Nov 26 '18 at 23:04
itodditodd
2,040189
answered Nov 26 '18 at 23:04
itodditodd
2,040189
2,040189
Thanks! It works. I accepted your answer! It caused a bit of another unexpected issue that the div will of course return to the original size$("#superresizablediv").height(height), now I'm trying to figure out if I resize the box height, it would set the min height to not be shorter than where I dragged it to. The width will not shrink, but the height will. Tips?
– I_Literally_Cannot
Nov 27 '18 at 7:47
I'm not sure I understand what you want to achieve. Currently the box will return the to height - even if resized - it was before the text was populated.
– itodd
Nov 28 '18 at 1:13
Yeah it's a bit complex. The idea is that the box can be resized by clicking and dragging the handle, but when the box empties, it reverts back to the min-height attribute. I'm wondering, by manually dragging the resize handle to a new height, let's say 500px, it would set the css so the box would not shrink below 500px until I drag it again
– I_Literally_Cannot
Nov 28 '18 at 6:29
add a comment |
Thanks! It works. I accepted your answer! It caused a bit of another unexpected issue that the div will of course return to the original size$("#superresizablediv").height(height), now I'm trying to figure out if I resize the box height, it would set the min height to not be shorter than where I dragged it to. The width will not shrink, but the height will. Tips?
– I_Literally_Cannot
Nov 27 '18 at 7:47
I'm not sure I understand what you want to achieve. Currently the box will return the to height - even if resized - it was before the text was populated.
– itodd
Nov 28 '18 at 1:13
Yeah it's a bit complex. The idea is that the box can be resized by clicking and dragging the handle, but when the box empties, it reverts back to the min-height attribute. I'm wondering, by manually dragging the resize handle to a new height, let's say 500px, it would set the css so the box would not shrink below 500px until I drag it again
– I_Literally_Cannot
Nov 28 '18 at 6:29
Thanks! It works. I accepted your answer! It caused a bit of another unexpected issue that the div will of course return to the original size
$("#superresizablediv").height(height), now I'm trying to figure out if I resize the box height, it would set the min height to not be shorter than where I dragged it to. The width will not shrink, but the height will. Tips?– I_Literally_Cannot
Nov 27 '18 at 7:47
Thanks! It works. I accepted your answer! It caused a bit of another unexpected issue that the div will of course return to the original size
$("#superresizablediv").height(height), now I'm trying to figure out if I resize the box height, it would set the min height to not be shorter than where I dragged it to. The width will not shrink, but the height will. Tips?– I_Literally_Cannot
Nov 27 '18 at 7:47
I'm not sure I understand what you want to achieve. Currently the box will return the to height - even if resized - it was before the text was populated.
– itodd
Nov 28 '18 at 1:13
I'm not sure I understand what you want to achieve. Currently the box will return the to height - even if resized - it was before the text was populated.
– itodd
Nov 28 '18 at 1:13
Yeah it's a bit complex. The idea is that the box can be resized by clicking and dragging the handle, but when the box empties, it reverts back to the min-height attribute. I'm wondering, by manually dragging the resize handle to a new height, let's say 500px, it would set the css so the box would not shrink below 500px until I drag it again
– I_Literally_Cannot
Nov 28 '18 at 6:29
Yeah it's a bit complex. The idea is that the box can be resized by clicking and dragging the handle, but when the box empties, it reverts back to the min-height attribute. I'm wondering, by manually dragging the resize handle to a new height, let's say 500px, it would set the css so the box would not shrink below 500px until I drag it again
– I_Literally_Cannot
Nov 28 '18 at 6:29
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53490260%2fmaking-a-resizable-icon-stick-to-the-bottom-of-a-dynamically-sized-div%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
