Message from JavaScript discussions

March 2019

ā€” Width and height in percent? (With meta viewport)


As iAmXen said you can use <meta name="viewport" content="width=device-width, initial-scale=1.0"> to make it responsive. But I guess you need to be careful with height and width. You need to set a minimum vlaue to the width and height (or else the iframe keeps on decreasing on decreasing the size of the window). You can use width and height alike `width: calc(250px + 10vw); height: calc(250px + 10vw);

ā€” šŸ‘zā›µ

ā€” I was mistaken about question number four, just do the three questions only...

ā€” You can also use the max values (to preven increasing the sie after ceritan width and height of screen

Message permanent page

ā€” Vanilla is other way to say plain JavaScript

ā€” I am currently facing an error with react. The problem is I am using the setstate method after componentdidunmount. This is because in my login page I am using some type text (i.e each letter will be displayed one by one with the timeout). Hence I have to update state again and again till the entire text is rendered. But if I go to another component (before the complete text is rendered, then my state is getting updated) and it is raising an error Warning: Can't perform a React state update on an unmounted component. . I can't understand how to fix it because I am calling a function recursively till all the text is displayed. Is there any way to break call to recursive function ? This is the sample code how I did it

Message permanent page

ā€” Are you using componentdidunmount?

ā€” Yep, I want the text to get triggered after component has completely mounted. hence I am triggering the the start of the text with componentdidmount and calling another function called handleTypeText this function calls itself recusively till entire text is rendered. This method update("typeText", typeText); is passed as a argument, updates the state using setstate.

Message permanent page

ā€” Sir I am Not getting I am a Beginner Can YOu please tell me

ā€” <!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
body {
background-color: #D0E4FE;

<p><b><center> You can</center></b></p>

<center><button onclick="myFunction()">Try it</button></center>

<p id="demo"></p>

function myFunction() {
var person = prompt("Please enter your name", "shodkk");
if (person != null) {
var ifrm = document.createElement("iframe");

ifrm.setAttribute("src", ""+person); document.body.appendChild(ifrm);

>> this is the Code

Message permanent page

ā€” It's confusing because everything seems fine