Making the div follow autoresize textarea? [closed] - javascript
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
PROBLEM
I have a comment textarea which i made text responsive thanks to Jack Moores npm package https://www.jacklmoore.com/autosize/. Now this all works fine but i have a div which is usually bottom:75px; and when textarea autoresizes it updates the hight of textarea. This is where the problem occurs i would like to update also bottom of that div for example to keep it from going over textarea.
HTML
<form action="#">
<textarea
type="text"
id="text"
spellcheck="false"
placeholder="Type message..."
maxlength="50"
></textarea>
</form>
<div class="three_dots_messages" onclick="toggleMessagesSettings()"></div>
<div class="three_dots_messages_menu">
<div class="three_dots_messages_menu_buttons">
<div class="send_tip_button all_message_buttons" >
<span>Send tip</span>
<svg xmlns="http://www.w3.org/2000/svg" width="7.886" height="15" viewBox="0 0 7.886 15" style="margin: 2px 0 0 2px ;">
<path id="Icon_awesome-dollar-sign" data-name="Icon awesome-dollar-sign" class="cls-1" d="M5.731,6.838,2.773,5.912a.861.861,0,0,1-.581-.829A.837.837,0,0,1,3,4.219H4.817a1.6,1.6,0,0,1,.937.308.406.406,0,0,0,.534-.059l.953-1a.5.5,0,0,0-.049-.718,3.716,3.716,0,0,0-2.369-.879V.469A.456.456,0,0,0,4.384,0H3.507a.456.456,0,0,0-.438.469V1.875H3a3.133,3.133,0,0,0-2.985,3.5,3.293,3.293,0,0,0,2.3,2.83l2.807.879a.864.864,0,0,1,.581.829.837.837,0,0,1-.808.864H3.075a1.6,1.6,0,0,1-.937-.308.406.406,0,0,0-.534.059l-.953,1a.5.5,0,0,0,.049.718,3.716,3.716,0,0,0,2.369.879v1.406A.456.456,0,0,0,3.507,15h.876a.456.456,0,0,0,.438-.469V13.119a3.108,3.108,0,0,0,2.9-2.13A3.264,3.264,0,0,0,5.731,6.838Z" transform="translate(-0.003)"/>
</svg>
</div>
<div class="chat_rules_button all_message_buttons" >
<span>Chat rules</span>
<svg xmlns="http://www.w3.org/2000/svg" width="13.125" height="15" viewBox="0 0 13.125 15">
<path id="Icon_awesome-book-dead" data-name="Icon awesome-book-dead" class="cls-1" d="M7.969,3.984A.469.469,0,1,0,7.5,3.516.47.47,0,0,0,7.969,3.984ZM13.125,10.5V.75a.69.69,0,0,0-.75-.75H2.813A2.762,2.762,0,0,0,0,2.813v9.375A2.762,2.762,0,0,0,2.813,15h9.563a.739.739,0,0,0,.75-.75v-.469a.81.81,0,0,0-.281-.562,8.292,8.292,0,0,1,0-2.156.567.567,0,0,0,.281-.562ZM7.031,1.641A2.15,2.15,0,0,1,9.375,3.516a1.778,1.778,0,0,1-.937,1.491v.384a.47.47,0,0,1-.469.469H6.094a.47.47,0,0,1-.469-.469V5.007a1.778,1.778,0,0,1-.937-1.491A2.15,2.15,0,0,1,7.031,1.641Zm-3.375,4.9.185-.431a.233.233,0,0,1,.308-.123l2.88,1.233L9.911,5.988a.233.233,0,0,1,.308.123l.185.431a.233.233,0,0,1-.123.308l-2.06.885,2.06.882a.233.233,0,0,1,.123.308l-.185.431a.233.233,0,0,1-.308.123L7.031,8.244,4.151,9.48a.233.233,0,0,1-.308-.123l-.185-.431a.233.233,0,0,1,.123-.308l2.063-.882L3.779,6.85a.233.233,0,0,1-.123-.308Zm7.5,6.583H2.813a.886.886,0,0,1-.937-.937.939.939,0,0,1,.938-.937h8.344ZM6.094,3.984a.469.469,0,1,0-.469-.469A.47.47,0,0,0,6.094,3.984Z"/>
</svg>
</div>
<div class="muted_users all_message_buttons" >
<span>Muted users</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16.071" height="15" viewBox="0 0 16.071 15">
<path id="Icon_metro-volume-mute2" data-name="Icon metro-volume-mute2" class="cls-1" d="M18.642,13.15V14.57H17.222l-1.794-1.794L13.634,14.57H12.214V13.15l1.794-1.794L12.214,9.562V8.142h1.421l1.794,1.794,1.794-1.794h1.421V9.562l-1.794,1.794ZM9.535,18.856a.535.535,0,0,1-.379-.157L5.027,14.57H3.106a.536.536,0,0,1-.536-.536V8.677a.536.536,0,0,1,.536-.536H5.027L9.156,4.013a.536.536,0,0,1,.915.379V18.32a.536.536,0,0,1-.536.536Z" transform="translate(-2.571 -3.856)"/>
</svg>
</div>
<div class="close_chat_button all_message_buttons" onclick="toggleMessagesSettings(), toggleMessages() ">
<span>Close chat</span>
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
<path id="Icon_material-close" data-name="Icon material-close" class="cls-1" d="M22.5,9.011,20.989,7.5,15,13.489,9.011,7.5,7.5,9.011,13.489,15,7.5,20.989,9.011,22.5,15,16.511,20.989,22.5,22.5,20.989,16.511,15Z" transform="translate(-7.5 -7.5)"/>
</svg>
</div>
</div>
</div>
CSS
.three_dots_messages_menu {
position: fixed;
width: 15%;
height: 130px;
min-width: 232px;
bottom: -250px;
background-color: #363636;
border-radius: 5px;
opacity: 0;
transition: 0.3s;
}
#text {
border: 1px solid #d4af37;
background-color: #343333;
position: fixed;
bottom: 15px;
margin: 0 auto;
font-size: 17px;
width: 13%;
padding: 12px 30px 5px 10px;
color: white;
border-radius: 5px;
min-width: 190px;
min-height: 33px;
height: 33px;
max-height: 100px;
outline: none;
resize: none;
}
SOME INFORMATION AND QUESTIONS
I need to keep it position absolute not just fix this with margins.
I know i can do this modifying the js of autosize but i am honestly
not skilled enough to completely understand everything that is going
on.
Is there a way to maybe manipulate the DOM so i can make div children of that textarea ?
Do you know maybe easy js fix ?
JS for autoresize is too big you can view it from the website
It's best if you simply move the menu to a point before the textarea and remove its fixed positioning, so that it automatically remains in place.
If you want to adapt it dynamically, Autosize triggers an event where you can hook some code to update its position.
var $text = jQuery('#text'),
$menu = jQuery('.three_dots_messages_menu'),
baseDistance = 75;
$text.on( 'autosize:resized', function() {
$menu.css( 'bottom', $text.height() + baseDistance + 'px' );
})
Related
Scrolling with multiple SVGs
I am trying to create 4 svg based charts one below another.
After charts are loaded, I can see only 2 and half charts which get occupied on web browser without scrolling.
I can see scroll bars enabled in left and at the bottom but they don't scroll much.
<div overflow="auto">
<svg id="chart1" style="overflow-y:scroll"></svg>
<svg id="chart2" style="overflow-y:scroll"></svg>
<svg id="chart3" style="overflow-y:scroll"></svg>
<svg id="chart4" style="overflow-y:scroll"></svg>
</div>
Above are 4 svg and below is the css for each of them.
#chart1 {
width: 100%;
height: 100%;
position: absolute;
}
When I minimize the webpage, I can see 4 charts otherwise 2 and half only.
What all I have tried:
1. enabling auto-scroll for html, body
2. enabling scroll in svg (similar to above code).
3. increasing html and body height and width.
html, body {
width: 100%;
height: 200%;
margin: 0px;
padding: 0px;
}
Here is a example on jsfiddle, each svg has a data-no, and one common class. It is more easy with this example for you to explain what you expect exactly...
https://jsfiddle.net/ericsm/ondtxmp2/
and here the code too :
each svg take 100% of body.
<HTML>
<HEAD>
<style type="text/css">
.container-charts {
border:solid 8px blue;
div : 100%;
}
.chart {
width: 100%;
height: 100%;
border:dashed 2px green;
}
html, body {
margin: 0px;
padding: 0px;
}
</style>
</HEAD>
<BODY>
<div class="container-charts" overflow="auto">
<svg class="chart" data-no="1">
<ellipse cx="100" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
<svg class="chart" data-no="2">
<ellipse cx="100" cy="80" rx="100" ry="50" style="fill:blue;stroke-width:2" />
</svg>
<svg class="chart" data-no="3">
<ellipse cx="100" cy="80" rx="100" ry="50" style="fill:gray;stroke-width:2" />
</svg>
<svg class="chart" data-no="3">
<ellipse cx="100" cy="80" rx="100" ry="50" style="fill:black;stroke-width:2" />
</svg>
</div>
</BODY>
</HTML>
IE & Firefox rendering incorrectly but not in Chrome, Safari & Chromium browsers
All, There is a double walled circle and a text. Ideally the text should be rendered within the circle but in IE & Firefox , the circle is coming down and the text on the top. The issue can be seen using the below code. Any help or advice on how to get it fixed in IE & firefox is much appreciated. <div class="col-xs-4 col-sm-2"> <div style="margin-top: 20px; position: relative; display: inline-block; max-width: 116px; max-height: 116px;"> <svg width="100%" height="100%" viewBox="0 0 418 418" tabindex="-1"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-31.000000, -31.000000)" stroke="#9B9B9B" stroke-width="2" fill="#FFFFFF"> <g transform="translate(32, 32)"> <path d="M208,416 C322.875228,416 416,322.875228 416,208 C416,93.124772 322.875228,0 208,0 C93.124772,0 -9.09494702e-13,93.124772 -9.09494702e-13,208 C-9.09494702e-13,322.875228 93.124772,416 208,416 Z"></path> <path d="M208,398.666667 C313.302292,398.666667 398.666667,313.302292 398.666667,208 C398.666667,102.697708 313.302292,17.3333333 208,17.3333333 C102.697708,17.3333333 17.3333333,102.697708 17.3333333,208 C17.3333333,313.302292 102.697708,398.666667 208,398.666667 Z"></path> </g></g></g> </svg> <span style="font-size: 24px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">400</span> </div> </div>
The styling you have added to the divs pushes the number outside of the SVG. I would just avoid the problem in the first place by using an SVG <text> element that you can position inside the svg. You might have to fiddle with the x and y values a bit. ps: There's also a <circle> element you could use instead of a <path>. <svg width="100%" height="100%" viewBox="0 0 418 418" tabindex="-1"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-31.000000, -31.000000)" stroke="#9B9B9B" stroke-width="2" fill="#FFFFFF"> <g transform="translate(32, 32)"> <path d="M208,416 C322.875228,416 416,322.875228 416,208 C416,93.124772 322.875228,0 208,0 C93.124772,0 -9.09494702e-13,93.124772 -9.09494702e-13,208 C-9.09494702e-13,322.875228 93.124772,416 208,416 Z"></path> <path d="M208,398.666667 C313.302292,398.666667 398.666667,313.302292 398.666667,208 C398.666667,102.697708 313.302292,17.3333333 208,17.3333333 C102.697708,17.3333333 17.3333333,102.697708 17.3333333,208 C17.3333333,313.302292 102.697708,398.666667 208,398.666667 Z"></path> </g> </g> </g> <text x="47%" y="49%" style="font-size: 32px;">400</text> </svg>
I don't know what are your constraints, but to render these circles in particular I'd play with border-radius: 50% and display: flex:
.circle {
border: 2px solid #888;
border-radius: 50%; /* make the border a circle */
display: flex; /* align the content vertically and horizontally */
align-items: center; /* same */
justify-content: space-around; /* same */
}
<div class="circle" style="width: 100px; height: 100px;">
<div class="circle" style="width: 90px; height: 90px;">
400
</div>
</div>
WordPress - Onclick functions not working in <a> tag
I am creating a sliding sidebar menu for my WordPress site using only HTML/CSS/JavaScript. This is from a tutorial from YouTube and followed everything exactly. The issue is that when I click on the buttons, the error reads "Uncaught ReferenceError: openSlideMenu is not defined
at HTMLAnchorElement.onclick". I get the same error for the other button. See code below.
HTML (blog.php)
<nav class="navbar">
<div class="side-menu">
<span class="open-slide">
<a href="#" onclick="openSlideMenu()">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="5" />
<path d="M0,14 30,14" stroke="#000" stroke-width="5" />
<path d="M0,23 30,23" stroke="#000" stroke-width="5" />
</svg>
</a>
</span>
</div>
</nav>
<div id="side-menu" class="side-nav">
×
<?php get_sidebar() ?>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
function openSlideMenu() {
document.getElementById('side-menu').style.width = '250px';
}
function closeSlideMenu() {
document.getElementById('side-menu').style.width = '0';
}
});
</script>
CSS
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top:0;
left:0;
background-color: #111;
opacity: 0.9;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.side-nav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
font-size:22px;
color: #ccc;
display: block;
transition: 0.3s;
}
.side-nav a:hover {
color: #fff;
}
.side-nav .btn-close {
position: absolute;
top: 0;
right: 22px;
font-size: 36px;
margin-left: 50px;
}
The tutorial seemed easy and simple, it should have worked without issues. I wonder could it be something WordPress related? I did all I could.
Since you are using jQuery, why don't you utilize it completely?
For more information on what could be the issue, I suggest you take a look at MarsAndBlack's comment
Meanwhile, I made some changes to your code to make use of jQuery fully.
Here I have added ids to both buttons. (Not necessary, but used for easy detection).
<nav class="navbar">
<div class="side-menu">
<span class="open-slide">
<a href="#" id="openmenu">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="5" />
<path d="M0,14 30,14" stroke="#000" stroke-width="5" />
<path d="M0,23 30,23" stroke="#000" stroke-width="5" />
</svg>
</a>
</span>
</div>
</nav>
<div id="side-menu" class="side-nav">
×
</div>
Also changed JS to use jQuery for click function instead of vanilla JS,
jQuery(document).ready(function(){
jQuery('#openmenu').click(function() {
jQuery('#side-menu').css('width','250px');
});
jQuery('#closemenu').click(function() {
jQuery('#side-menu').css('width','0px');
});
});
Here is a working example
JS draw an arrow pointing from one div to another
I have the following code:
<div id="parent">
<div class="child" id="air1">Medium 1</div>
<div class="child" id="glass">Medium 2</div>
<div class="child" id="air2">Medium 1</div>
</div>
<style>
#parent {
background: #999;
padding: 0px;
}
#glass {
background: #666;
}
.child {
background: #ccc;
height: 200px;
margin: 0px;
}
</style>
I want to draw an arrow from #air1 into #glass using an svg. I added the following code into the div to draw an example arrow:
<svg width="300" height="100">
<defs>
<marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2" style="fill:red;" />
</marker>
</defs>
<path d="M30,150 L100,50"
style="stroke:red; stroke-width: 1.25px; fill: none;
marker-end: url(#arrow);"
/>
</svg>
I don't want the arrow pointed in a random direction though, I want it to point into #glass like this:
Also, how would I go about drawing a less steep arrow like this as well:
How can I do this?
You can achieve that by using positioning (inserting the svg into the first section and set it to position: absolute;) and adjusting the offset of the path element. To make the arrow pointing down, just use a negative value for the second value of the path description attribute.
For more information see w3schools about path.
#parent {
background: #999;
padding: 0px;
}
#glass {
background: #666;
}
.child {
background: #ccc;
height: 200px;
margin: 0px;
position: relative;
}
svg {
position: absolute;
left: 0;
}
<div id="parent">
<div class="child" id="air1">Medium 1
<svg width="400" height="200">
<defs>
<marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2" style="fill:red;" />
</marker>
</defs>
<path d="M-600,-10 L300,195" style="stroke:red; stroke-width: 1.25px; fill: none; marker-end: url(#arrow);" />
</svg>
</div>
<div class="child" id="glass">Medium 2</div>
<div class="child" id="air2">Medium 1</div>
</div>
render one div and it's interactive content by clicking on another div
<div id="1" class="aaa" style="position: relative; left: 50px; top: 50px; width: 300px; height: 200px; border: solid 1px; background: #dddddd; overflow: hidden;">
<div style="position: relative; left: 30px; top: 25px; width: 100px; height: 50px; background: blue;" onmouseenter="this.style.background='red';"></div>
<div style="position: relative; left: 160px; top: 70px; width: 100px; height: 50px; background: blue;" onmouseenter="this.style.background='orange';"></div>
</div>
<div id="2" class="bbb" style="position: relative; left: 250px; top: 100px; width: 50px; height: 20px; border: solid 1px; background: #cccccc; text-align: center; overflow: hidden;">click</div>
http://jsfiddle.net/FWyBQ/
I have one div (id="1" class="aaa") which contains multiple interactive divs. State of this interactive content should be able to be rendered as image (gif?) with the click on the other div (id="2" class="bbb").
That image should preferably be opened in a new tab or window. Or maybe just right click > save as in place.
p.s. I am aware of scripts like html2canvas and phantomjs, but I have no idea how to implement them in my case.
edit:
Now I'm trying to implement this solution, which with a little tweaking should work with processing.js (http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js).
I guess I just need the right jquery code with processing.js in order to achieve the functionality I need. I've tried this and it doesn't work:
$('.bbb').click(function (e) {
var canvas = document.getElementById("1"),
img = canvas.toDataURL("image/png");
$('.aaa').document.write('<img src="'+img+'"/>');
});
You could use html2canvas for this; include the html2canvas library in your page and try something like this:
//element would be your aaa div
html2canvas(element, {
onrendered: function(canvas) {
// canvas is the resulting canvas generated from the element
var url = canvas.toDataURL("image/png");
}
});
You would then need to post the value of 'url' to a PHP script like in one of the answers to this question.
EDIT
The reason your new code doesn't work is because the element with an id of "1" is not a canvas element. Its a div.
Canvas methods like toDataUrl() can only be called on Canvas elements (which is why I suggested using html2canvas to change your div into a Canvas.)
I've forked your jsfiddle to show how the code could work if the element with id "1" was a canvas:
http://jsfiddle.net/_Pez/cksGt/1/
_Pez
If I was in your pants, I'd start by switching the first div to SVG notation. It's not that different and there are a ton of ways to export an svg object to png. This should get you started <svg id="1" class="aaa" width="400" height="250"> <g> <rect id="svg_0" height="200" width="300" y="50" x="50" stroke-width="1" stroke="#000000" fill="#dddddd"/> <rect id="svg_1" height="50" width="100" y="75" x="80" stroke-width="5" fill="blue"/> <rect id="svg_2" height="50" width="100" y="120" x="210" stroke-width="5" fill="blue"/> </g> </svg> <div id="2" class="bbb" style="position: relative; left: 250px; top: 100px; width: 50px; height: 20px; border: solid 1px; background: #cccccc; text-align: center; overflow: hidden;">click</div>