ferry_2020 Posted April 2, 2015 Share Posted April 2, 2015 Hi everybody Will you please help me to write the code for the image that I attached to this topic with JavaScript? Link to comment Share on other sites More sharing options...
thescientist Posted April 2, 2015 Share Posted April 2, 2015 what do you have so far? what are you stuck with? How well do you know HTML and CSS? Link to comment Share on other sites More sharing options...
ferry_2020 Posted April 2, 2015 Author Share Posted April 2, 2015 what do you have so far? what are you stuck with? How well do you know HTML and CSS? I know HTML & CSS, but I wanna write the code with JavaScript Please help me if you can Link to comment Share on other sites More sharing options...
justsomeguy Posted April 2, 2015 Share Posted April 2, 2015 If you know HTML and CSS then first create a static page using those which shows what you want. After that it should be easy to write the Javascript code to build the same structure. Link to comment Share on other sites More sharing options...
ferry_2020 Posted April 2, 2015 Author Share Posted April 2, 2015 If you know HTML and CSS then first create a static page using those which shows what you want. After that it should be easy to write the Javascript code to build the same structure. How? This is HTML code for the image <!DOCTYPE html><html lang="en"><head><style media="screen">html,body { display:table; width:100%; height:100%; margin:0; background-color:#f0f0f0; }body { display:table-cell; vertical-align:middle; }#container { max-width:57%; padding:1.75vw 0; border:0.1vw solid #000; margin:auto; background-color:#fff; box-shadow:0.5vw 0.5vw 0.5vw #999; }#container div { height:2.94vw; background-color:#fec81d; border:0.1vw solid #000;}#container #left25 { margin-right:75%; }#container #left50 { margin-right:50%;}#container #left75 { margin-right:25%; }#container #left100 { border-right:0; border-left:0; }#container #right75 { margin-left:25%; }#container #right50 { margin-left:50%; }#container #right25 { margin-left:75%; }#container .bot { border-bottom:0; border-left:0; } #container .top { border-top:0; border-right:0; }</style></head><body><div id="container"><div id="left25" class="bot"></div><div id="left50" class="bot"></div><div id="left75" class="bot"></div><div id="left100"></div><div id="right75" class="top"></div><div id="right50" class="top"></div><div id="right25" class="top"></div></div></body></html> But I don't know how to change it to JavaScript!!! Link to comment Share on other sites More sharing options...
justsomeguy Posted April 2, 2015 Share Posted April 2, 2015 Look into creating and appending elements using Javascript. You can use document.createElement to create a new div, set the ID, set the class, and append them to your container div. You can create the container if you want also and append it to the body. Link to comment Share on other sites More sharing options...
ferry_2020 Posted April 2, 2015 Author Share Posted April 2, 2015 Look into creating and appending elements using Javascript. You can use document.createElement to create a new div, set the ID, set the class, and append them to your container div. You can create the container if you want also and append it to the body. Sorry,I didn't underestand how I can do that.Can you help me please? When I write document.CreateElement( ),it creat div by compelete width screen.How can I say that the first div should be for example 200px and then each time,the div should be wider Link to comment Share on other sites More sharing options...
Ingolme Posted April 3, 2015 Share Posted April 3, 2015 You can create an element and change its style with the style property: http://www.w3schools.com/jsref/dom_obj_style.asp See this example: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_create_elmnt Link to comment Share on other sites More sharing options...
ferry_2020 Posted April 3, 2015 Author Share Posted April 3, 2015 Sorry,I didn't underestand how I can do that.Can you help me please? When I write document.CreateElement( ),it creat div by compelete width screen.How can I say that the first div should be for example 200px and then each time,the div should be wider You can create an element and change its style with the style property: http://www.w3schools.com/jsref/dom_obj_style.asp See this example: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_create_elmnt Thank you I wrote this code,just for one div.I know I have to use loop But the problem is thet nothing show in the browser!!! Will you please tell me what is the problem?!! This is the code what I wrote : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script>function Div(){ document.getElementById("myDiv").style.backgroundColor="orange"; document.getElementById("myDiv").style.width="200px"; }</script></head><body onload="Div()"><div id="myDiv"></div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted April 3, 2015 Share Posted April 3, 2015 Its empty so height is 0 and you won't see anything until you add height, or add content in target div. 1 Link to comment Share on other sites More sharing options...
ferry_2020 Posted April 3, 2015 Author Share Posted April 3, 2015 Its empty so height is 0 and you won't see anything until you add height, or add content in target div. Thank you very much Link to comment Share on other sites More sharing options...
ferry_2020 Posted April 3, 2015 Author Share Posted April 3, 2015 (edited) Its empty so height is 0 and you won't see anything until you add height, or add content in target div. I wrote this and first div created <script>var d=1000;function Div(){ document.getElementById("myDiv").style.backgroundColor="orange"; document.getElementById("myDiv").style.width="200px"; document.getElementById("myDiv").style.height="100px";}</script></head><body onload="Div()"><div id="myDiv">1</div></body> Then I put it in the loop,but again I found another problem! This is the code by loop : <script>var d=1000;function Div(){ for(var i=200;i<=d;) { document.getElementById("myDiv").style.backgroundColor="orange"; document.getElementById("myDiv").style.width=i; document.getElementById("myDiv").style.height="100px"; document.write("<br>"); i+=(2*i); }}</script></head><body onload="Div()"><div id="myDiv">1</div></body> Will you please help me again and tell me what is the problem? Edited April 3, 2015 by ferry_2020 Link to comment Share on other sites More sharing options...
Ingolme Posted April 3, 2015 Share Posted April 3, 2015 What you need to do is create new elements, using document.createElement(), and then append them to the page using document.appendChild(). Link to comment Share on other sites More sharing options...
ferry_2020 Posted April 4, 2015 Author Share Posted April 4, 2015 What you need to do is create new elements, using document.createElement(), and then append them to the page using document.appendChild(). Sorry,I didn't underestand what you mean.It means that I shouldn't use loop for creating div?!! Link to comment Share on other sites More sharing options...
Ingolme Posted April 4, 2015 Share Posted April 4, 2015 No, what I mean is that you should use the loop to create a div, not just to change its style. You use createElement() and appendChild() to add new elements to the page. 1 Link to comment Share on other sites More sharing options...
ferry_2020 Posted April 4, 2015 Author Share Posted April 4, 2015 No, what I mean is that you should use the loop to create a div, not just to change its style. You use createElement() and appendChild() to add new elements to the page. OK,Thank for your advise but can you tell me what should I write in loop? i.e for( ? ; ? ; ? ) I wanna create div with specific width.I can't write number with px(pixel) in loop! Please help me Link to comment Share on other sites More sharing options...
dsonesuk Posted April 4, 2015 Share Posted April 4, 2015 I can't write number with px(pixel) in loop! Yes! you can, you just have to join it as text string to the i variable i+"px"; Link to comment Share on other sites More sharing options...
ferry_2020 Posted April 5, 2015 Author Share Posted April 5, 2015 No, what I mean is that you should use the loop to create a div, not just to change its style. You use createElement() and appendChild() to add new elements to the page. Thanks, I wrote code in this way : <script>var d;function Div(){ document.getElementById("myDiv").style.backgroundColor="orange"; d= document.getElementById("myDiv").style.width="200px"; document.getElementById("myDiv").style.height="100px"; for(var d=200+"px";d<=1000+"px";d*2) {document.createElement("br"); var D= document.createElement("div"); document.body.appendChild(D); }}</script></head><body onload="Div()"><div id="myDiv"></div></body> But it has problem yet!!! Please tell me what should I do? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 5, 2015 Share Posted April 5, 2015 Remove ALL text string from for loop, it only uses number varible values, you only use +"px" when applying a style like width or height when a unit is required.As you create a div element, you use the variable d to apply id ref and className ref then append this created div along with id and class values to container div. You don't even need to use width/height styling with +"px" as you have css to apply these to the id/class ref added to the 7 created divs.Use for loop which goes from 1 to 7, create variable that will hold incrementing value and times that by 25i will equal 1, i *25 = 25i incremented will equal 2, i * 25 = 50And so on you add this variable value to id ref for created div, after 4th loop it become tricky as you have reverse the count down.Use if condition to check loop value and apply appropriate className.That is what you are basically looking for. Link to comment Share on other sites More sharing options...
ferry_2020 Posted April 7, 2015 Author Share Posted April 7, 2015 Remove ALL text string from for loop, it only uses number varible values, you only use +"px" when applying a style like width or height when a unit is required.As you create a div element, you use the variable d to apply id ref and className ref then append this created div along with id and class values to container div.You don't even need to use width/height styling with +"px" as you have css to apply these to the id/class ref added to the 7 created divs.Use for loop which goes from 1 to 7, create variable that will hold incrementing value and times that by 25i will equal 1, i *25 = 25i incremented will equal 2, i * 25 = 50And so on you add this variable value to id ref for created div, after 4th loop it become tricky as you have reverse the count down.Use if condition to check loop value and apply appropriate className.That is what you are basically looking for. I'm so sorry,I couldn't underestand what you mean.I did what you told me,but nothing happened. please help me more. Thank you Link to comment Share on other sites More sharing options...
justsomeguy Posted April 7, 2015 Share Posted April 7, 2015 What code are you using now? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now