I have the following JavaScript code with inline CSS.
var container = display.getContainer();
container.style.cssText = 'width:100%;height:100%;z-index:100;object-fit: contain;';
document.body.appendChild(container);
I would like to move the inline CSS to the following class in style.css
.containerClass {
width:100%;
height:100%;
z-index:100;
object-fit: contain;
}
I have tried the following:
container.addClass('containerClass');
I've been unable to articulate my problem correctly, thus am having trouble finding the precise solution I am after.
Further -how would I go about telling the JavaScript file about the location of .containerClass?
Note: The classList property is not supported in Internet Explorer 9.
The following code will work in all browsers -
function addClass() {
var element, name, arr;
element = document.getElementById("container");
name = "mystyle";
arr = element.className.split(" ");
if (arr.indexOf(name) == -1) {
element.className += " " + name;
}
}
.mystyle {
background-color: black;
color: white;
}
div {
margin-top: 20px;
width: 100%;
padding: 25px;
font-size: 25px;
box-sizing: border-box;
border: 1px solid #000;
}
<p>Click the "Add Class" button to add the "mystyle" class to the container element:</p>
<button onclick="addClass()">Add Class</button>
<div id="container">This is a DIV element.</div>
In you style.css, define the properties for .containerClass.
style.css :
.containerClass {
width:100%;
height:100%;
z-index:100;
object-fit: contain;
}
When you want to add this styling, just add that class to the element you want to using javascript.
Javascript:
var container = document.getElementById("elementId");
container.classList.add("containerClass");
Related
I have several HTML elements that I need to display a tooltip on hover. These are not conventional HTML elements and come from a generated script on the backend, which I do not have permissions to alter. What I want to know, from a front end perspective, is how I can display a tooltip without declaring this in the HTML.
I tried using Bootstrap tooltips, but you need to declare this in the HTML tag as a title, so it's not useful. So, as the example shows below, I need some text saying 'Action' to appear in a tooltip when you hover over the 'Action' element that contains 'should'. Same will be applied when you hover over the text 'approximate number of' contained in the 'Quantifier' element - the word 'Quantifier' should be displayed. Hope this makes sense.
<body>
One string that <Action>should</Action> work is
<Quantifier>approximate number of</Quantifier> other things.
<script>
$(document).ready(function(){
$("Action").hover(function(){
});
$("Quantifier").hover(function(){
});
});
</script>
<body>
So far non-conclusive, as I can only change CSS values and not tooltip text.
You can try updating the title property on those elements. One thing to note is that HTML tags will appear in lowercase when compiled.
$(document).ready(function() {
var style = document.createElement('style');
style.type = 'text/css';
$('head')[0].appendChild(style);
style.innerHTML =
`action, quantifier {
position: relative;
display: inline-block;
margin-top: 20px;
}
action[title]:hover:after, quantifier[title]:hover:after {
content: attr(title);
position: absolute;
top: -100%;
left: 0;
}
action[title]:hover:after {
color: red;
border: solid 1px black;
}
quantifier[title]:hover:after {
color: blue;
border: solid 1px black;
}`;
$('action')[0].title = 'Action';
$('quantifier')[0].title = 'Quantifier';
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
One string that <Action>should</Action> work is
<Quantifier>approximate number of</Quantifier> other things.
</body>
add a tooltip for an tag with JS/jQuery without change the html structure. You can modify the css based on requirement.
jQuery(function($){
//If you are able to add class then use $('.add_tooltip').hover
// use $('Quantifier, Action').hover
$('Quantifier, Action').hover(
function () {
//let text = $(this).html(); //this is for html content of hover element
let text = $(this).prop("tagName");
//Add the tag name of hover element to tooltip div
$(this).append('<div class = "tooltip">'+text+'</div>');
//display the tooltip with animation.
$(this).find('.tooltip').hide().fadeIn('slow');
},
//On hover out remove the tooltip.
function () {
$(this).find('.tooltip').remove();
}
);
});
Quantifier, Action{
cursor: pointer;
position:relative;
}
.tooltip{
display: inherit;
background: black;
margin: auto;
padding: 10px;
position: absolute;
z-index: 1000;
width: 200px;
height: 40px;
color: #fff;
top: 18px;
left:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
One string that <Action>should</Action> work is
<Quantifier>approximate number of</Quantifier> other things.
I want to just change the background when clicking the button. However, I cannot get the variable change to fetch the background of div test2 and store it as a variable. I know this because alerting the value of test2 shows undefined.
I know this seems like a simple fix but I cannot actually find a solution. Is this just a simple syntax error or am I missing something?
An explanation of why this happens would be much appreciated, thanks.
var el = document.getElementById('test');
function changeBG() {
var change = document.getElementById('test2').background;
el.style.background = change;
}
#test {
background: url('http://i.dailymail.co.uk/i/pix/2017/08/15/19/434758D400000578-4793442-image-a-5_1502822599189.jpg');
width: 200px;
height: 200px;
background-size: cover;
background-position: center;
}
#test2 {
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Lioness_and_cub.jpg/240px-Lioness_and_cub.jpg');
}
<div id="test"></div>
<button onclick="changeBG();">hi</button>
There are a couple reasons for the error/undefined variable. First, there isn't an element with the id 'test2' in your html. You have only assigned css style to the id 'test2'. There is only a div with the id 'test'. The other problem is HTML elements do not have the property 'background'. To change the background you would need to use the 'style' property as in document.getElementById('test2').style.background = "url(...)";
There are several ways to resolve this, below is one approach using classes.
Remove the background attribute from the div id and create two
classes, background and background2.
In the html, add the background to the test div as the default
class (background image).
Use the toggle() method to alternate assignment of the class to the
div.
Since the original class background was already assigned it will be removed and background2 is added. If you are only trying to change the background once, then you can just simply reassign the class (see commented lines).
toggle
style property
Note: The reason you can't keep the background attribute as part of the original div's id css and add the class with the new background is because the id takes precedent and will override any class attributes with the same name unless !important is added to the end of the class attribute value (background: url(..) !important;) though that method should be avoided if possible. Also, The classList property is not supported in Internet Explorer 9 if that matters.
var el = document.getElementById('test');
function changeBG() {
//to change the background once
//el.className = "background2";
el.classList.toggle('background');
el.classList.toggle('background2');
}
#test {
width: 200px;
height: 200px;
background-size: cover;
background-position: center;
}
.background{
background: url('http://i.dailymail.co.uk/i/pix/2017/08/15/19/434758D400000578-4793442-image-a-5_1502822599189.jpg');
}
.background2 {
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Lioness_and_cub.jpg/240px-Lioness_and_cub.jpg');
}
<div id="test" class ="background"></div>
<button onclick="changeBG();">hi</button>
If all you're looking to do is change style properties, you can simply toggle classes. Its totally unnecessary to create variables to do this unless you're just trying to learn something.
var el = document.getElementById('test');
function changeBG() {
el.classList.toggle('test1');
el.classList.toggle('test2');
}
#test {
width: 200px;
height: 200px;
background-size: cover;
background-position: center;
}
.test1 {
background: url('http://i.dailymail.co.uk/i/pix/2017/08/15/19/434758D400000578-4793442-image-a-5_1502822599189.jpg');
}
.test2 {
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Lioness_and_cub.jpg/240px-Lioness_and_cub.jpg');
}
<div id="test" class="test1"></div>
<button onclick="changeBG();">change background</button>
If you are looking for an old-school solution.
function changeBG() {
var el = document.getElementById('test');
var value = null;
for (let i = 0; i < document.styleSheets.length; i++) {
const mysheet = document.styleSheets[i];
const myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
if(myrules){
for (let j = 0; j < myrules.length; j++) {
if (myrules[j].selectorText &&
myrules[j].selectorText.toLowerCase() === '#test2') {
value = myrules[j].style['background'];
}
}
}
}
if(value){
el.style.background = value;
}else{
alert("test2 not found");
}
}
#test {
background: url('http://i.dailymail.co.uk/i/pix/2017/08/15/19/434758D400000578-4793442-image-a-5_1502822599189.jpg');
width: 200px;
height: 200px;
background-size: cover;
background-position: center;
}
#test2 {
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Lioness_and_cub.jpg/240px-Lioness_and_cub.jpg');
width: 200px;
height: 200px;
background-size: cover;
background-position: center;
}
<h4> if you are looking for an old-school solution</h4>
<div id="test"></div>
<button onclick="javascript:changeBG();">hi</button>
<div id="test2"></div>
I am trying to create a drop-down menu for a site that i am working on, and I am having problems with hiding and showing the drop down with the code that I have been using.
Basically, I need this:
The Collections
to read in the browser like:
The Collections
or display
The Collections
Code:
<html>
<head>
<title>Menu Test</title>
<!-- Begin css library -->
<style type="text/css">
html {
overflow-y: scroll;
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
background-color: #fff;
color: #444;
margin: 0px;
padding: 0px;
}
/* Begin top bar
*************************/
#top-bar {
-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
font-family: GillSansMTStd-Book;
}
#top-bar-content {
position: relative;
height: 94px;
margin: 0 auto;
width: 1025px;
text-align: "right";
}
#top-bar .wrap {
padding-left: 33px;
padding-right: 33px;
}
#top-bar .links {
float: right;
line-height: 94px;
}
#top-bar a {
outline:0;
}
#top-bar .links a {
display: inline-block;
color: #b9afa3;
font-size: 14px;
font-weight: normal;
letter-spacing: .8px;
text-decoration: none;
margin-left: 30px;
text-transform: uppercase;
}
#top-bar .links a:hover,
#top-bar .links a.active {
color: #746758;
background: url(/HalstedDesigns/catalog/view/theme/margaretha/image/nav-rule.gif) top center no-repeat;
}
#top-bar .collections {
display: none;
background-color: #695d4f;
color: #fff;
position: absolute;
top: 94px;
width: 340px;
text-align: center;
margin-left: 80px;
padding-top: 10px;
-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
z-index: 5;
}
#top-bar .collections a{
color:#fff;
display:block;
line-height:26px;
padding:10px 20px;
margin:0;
background-image:none;
text-transform:capitalize;
font-size:16px;
}
#top-bar .collections a.the-ardmore-collection {
font-size:14px;
}
#top-bar .collections a:hover,
#top-bar .collections a.active {
background-color:#fff;
color:#695d4f;
background-image:none;
}
</style>
<!-- End css library -->
<!-- Begin jquery library -->
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'block';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
<!-- End jquery library -->
</head>
<body>
<div id="top-bar">
<div id="top-bar-content">
<div class="wrap">
<img src="image/halsted-logo.png"; alt="Halsted Logo">
<div class="links">
<div class="collections">
THE ARDMORE COLLECTION
Qalakabusha Sofa
Qalakabusha Fabric Collection
Hand bags
Scatter Cushions
Batonka Stools
Tablecloths
Place Mats
Napkins
Table Runners
</div>
Art Into Design
The Collections
Contact Us
Newsletter
</div>
</div>
</div>
<div>
</body>
</html>
I personally think it is better to use the :hover CSS property for menus. It is a lot easier to implement but you might have problems on mobile devices. https://developer.mozilla.org/fr/docs/Web/CSS/:hover
However, if you really want it on the onclick event, you will need to add or bind your event. Here is the jQuery documentation for it: http://api.jquery.com/bind/
once you will have bind the event, you will have to use your function's "event" parameter to get which element you clicked on and then show the right menu.
The problem:
You have no handle on the element you are trying to change inside your function. This is because you are using getElementById(), but the collections div has no id attribute defined.
You are referencing the element whose display you wish to toggle inconsistently. Sometimes you are using document.getElementById(shID+"-show"), and other times you are simply using document.getElementById(shID).
There is a logic error in your if statement; the condition in if (document.getElementById(shID+'-show').style.display != 'none') should check whether the style IS set to none, if so we want to change the style to block, and vice versa.
The Solution
Add an id attribute to the collections div like so:
<div id = "collections" class = "collections">
Inside your showID function replace all instances of document.getElementById(shID+"-show") with document.getElementById(shID). In fact, an even cleaner way to do this would be to only call the function once and assign the result to a variable.
Change the condition in your second if statement to check if the display IS equal to none.
With all the changes mentioned, your final function will look something like this:
function showHide(shID) {
var el = document.getElementById(shID);
if (el) {
if (el.style.display === 'none' || el.style.display =='') {
el.style.display = 'block';
}
else {
el.style.display = 'none';
}
}
}
You may notice I added an or in the if statement. This is because for some reason the initial value of el.style.display (before it is set using javascript in the function) is ''. Without this or condition it would take two clicks to display the menu the first time around.
The Multiple menu solution:
Multiple menus expands the showHide from one to two lines of code.
Note: The basics are documented in another Answer to this post that was posted prior to this one.
This time vs. the previous single method we save the divs to an array of variables. It is important this array is defined globally outside of any function.
This code is test and works well.
The initialization code:
Create the arrays
var toggle = new Array;
toggle['none'] = 'block';
toggle['block'] = 'none';
var div = new Array;
The initialization in now in an init function. Not required but is more reliable. This way it will never execute before page load.
window.onload = init;
The init just get the showHide divs for the first time.
Then hides them all.
function init(){
div[1] = document.getElementById('d1');
div[2] = document.getElementById('d2');
div[3] = document.getElementById('d3');
div[4] = document.getElementById('d4');
hideAll();
}
I have added a hide all function. It is easier and quicker to hide all menus when another is displayed. You do not want two menus open at the same time. You could track the open menu and specifically close that one, but why bother?
function hideAll(){
div[1].style.display='none';
div[2].style.display='none';
div[3].style.display='none';
div[4].style.display='none';
}
Wrapping it up:
I altered some of your HTML for test and demo purposes.
HTML
Art Into Design
The Collections
Contact Us
Newsletter
<div id="d2"class="collections" >
THE ARDMORE COLLECTION
Qalakabusha Sofa
Qalakabusha Fabric Collection
</div>
<div id="d3"class="collections">
Hand bags
Scatter Cushions
Batonka Stools
</div>
<div id="d4"class="collections">
Tablecloths
Place Mats
Napkins
Table Runners
</div>
</div>
</div>
</div><div>
JavaScript
<script language="javascript" type="text/javascript">
function showHide(id) {
hideAll();
div[id].style.display=toggle[div[id].style.display];
}
var toggle = new Array;
toggle['none'] = 'block';
toggle['block'] = 'none';
var div = new Array;
function hideAll(){
div[1].style.display='none';
div[2].style.display='none';
div[3].style.display='none';
div[4].style.display='none';
}
function init(){
div[1] = document.getElementById('d1');
div[2] = document.getElementById('d2');
div[3] = document.getElementById('d3');
div[4] = document.getElementById('d4');
hideAll();
}
window.onload = init;
</script></body></html>
Very simple one line of code to execute to show hide. Just a few lines to set up.
This code is tested and works well. This is for just one menu but can easily to expand to multiple. See my other Answer for multiple menus (added after this one)
Setup code is run one time when the page loads.
The setup:
Create an array to do the toggle. This eliminates the if else.
var toggle = new Array;
toggle['none'] = 'block';
toggle['block'] = 'none';
Read the "collections div into a variable. Read once, never again.
var div = document.getElementById('d1');
The initialize the div so the DOM holds the display:none. Otherwise the first read will be null.
div.style.display='none';
Then the showHide function
function showHide(id) {div.style.display=toggle[div.style.display];}
The div.style.display within the toggle array toggle[div.style.display] wil either be block or none. Which ever, toggle will return the opposite. The sames as if it were toggle['block'] which returns 'none' which get assigned to the collections div.
Note:
The JS code should be located just before the closing body tag </body>. This way it will not be parsed until the HTML is all loaded.
Also it is very important to use a valid DOC Type. If not the Browser has to guess and may guess wrong. Slows own page load time.
<!DOCTYPE html>
<html lang="en">
The JavaScript code:
</div><div>
<script language="javascript" type="text/javascript">//<![CDATA[
function showHide(id) {div.style.display=toggle[div.style.display];}
var toggle = new Array;
toggle['none'] = 'block';
toggle['block'] = 'none';
var div = document.getElementById('d1');
div.style.display='none';
//]]>
</script></body></html>
Also way too much white space. This could significantly increase your transmission time. Most should be compressed as your pages should be gzipped.
<!DOCTYPE html>
<html lang="en"><head><title>Menu Test</title><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
html {overflow-y: scroll;margin: 0; : 0;font-family: sans-serif;}
body {background-color: #fff;color: #444;margin: 0px; : 0px;}
/* Begin top bar *************************/
#top-bar {-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);font-family: GillSansMTStd-Book;}
#top-bar-content {position: relative;height: 94px;margin: 0 auto;width: 1025px;text-align: "right";}
#top-bar .wrap { -left: 33px; -right: 33px;}
#top-bar .links {float: right;line-height: 94px;}
#top-bar a {outline:0; }
#top-bar .links a {display: inline-block;color: #b9afa3;font-size: 14px;font-weight: normal;letter-spacing: .8px;text-decoration: none;margin-left: 30px;text-transform: uppercase;}
#top-bar .links a:hover,#top-bar .links a.active {color: #746758;background: url(/HalstedDesigns/catalog/view/theme/margaretha/image/nav-rule.gif) top center no-repeat;}
#top-bar .collections {display: none;background-color: #695d4f;color: #fff;position: absolute;top: 94px;width: 340px;text-align: center;margin-left: 80px; -top: 10px;-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);z-index: 5;}
#top-bar .collections a{ color:#fff; display:block; line-height:26px; :10px 20px; margin:0; background-image:none; text-transform:capitalize; font-size:16px;}
#top-bar .collections a.the-ardmore-collection { font-size:14px;}
#top-bar .collections a:hover,#top-bar .collections a.active { background-color:#fff; color:#695d4f; background-image:none;}
</style></head><body>
<div id="top-bar">
<div id="top-bar-content"><div class="wrap">
<img src="image/halsted-logo.png"; alt="Halsted Logo">
<div class="links">
<div id="d1"class="collections">
THE ARDMORE COLLECTION
Qalakabusha Sofa
Qalakabusha Fabric Collection
Hand bags
Scatter Cushions
Batonka Stools
Tablecloths
Place Mats
Napkins
Table Runners
</div>
Art Into Design
The Collections
Contact Us
Newsletter
</div>
</div>
</div><div>
<script language="javascript" type="text/javascript">//<![CDATA[
function showHide(id) {div.style.display=toggle[div.style.display];}
var toggle = new Array;
toggle['none'] = 'block';
toggle['block'] = 'none';
var div = document.getElementById('d1');
div.style.display='none';
//]]>
</script></body></html>
Note: The CDATA is to isolate the JS from HTML. Without the CDATA the JS will sometimes cause HTML errors when running the W3C HTML Markup Validator. It is a recommended best practice.
The CDATA tells the Browser it is not HTML. The format is
<![CDATA[ data goes here ]]>
The reason it has the two slashes is comment out the CDATA tags from the JS parser but still recognized by the HTML parser.
I am using JavaScript and CSS to try and make a masic messagebox using an iframe. What I would like to happen is the document to have an opacity of 0.4, and the message box to show. However, none of that happens. What should I do?
My JavaScript
function messageBox(text)
{
document.style.opacity = 0.4;
document.style.filter = 'alpha(opacity=40);';
var box = document.createElement('iframe');
box.setAttribute('id', 'msgBox');
}
My CSS
#msgBox
{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
height: 250px;
width: 350px;
background-color: #CCC;
margin: auto;
z-index:9999;
color:white;
box-shadow:1px 1px 1px 1px #444;
}
http://jsfiddle.net/a4m9d/
function messageBox(text){
document.body.style.opacity = 0.4;
document.body.style.filter = 'alpha(opacity="40");';
var box = document.createElement('iframe');
box.id='msgBox';
document.body.appendChild(box);
}
although I would recommend using a div instead of an iframe, for performance and flexibility
The document doesn't have a style property. Only elements have a style, and document is not an element.
You want to target the <body>, so try document.body instead.
function messageBox(text) {
document.body.style.opacity = 0.4;
document.body.style.filter = 'alpha(opacity="40");';
var box = document.createElement('iframe');
box.setAttribute('id', 'msgBox');
}
DEMO: http://jsfiddle.net/a4m9d/3/
I am trying to create a web page where on click of a button I can add div tags. What I thought to do was that I'll create two div tags within a single div so that over all presentation will be uniform and similar to a table having two columns and multiple rows and the first column contains only label's and second column will contain textbox.
Here is the JS file:
var counter = 0;
function create_div(type){
var dynDiv = document.createElement("div");
dynDiv.id = "divid_"+counter;
dynDiv.class="main";
document.body.appendChild(dynDiv);
question();
if(type == 'ADDTEXTBOX'){
ADDTEXTBOX();
}
counter=counter+1;
}
function question(){
var question_div = document.createElement("div");
question_div.class="question";
question_div.id = "question_div_"+counter;
var Question = prompt("Enter The Question here:", "");
var node=document.createTextNode(Question);
question_div.appendChild(node);
var element=document.getElementById("divid_"+counter);
element.appendChild(question_div);
}
function ADDTEXTBOX(){
var answer_div = document.createElement("div");
answer_div.class="answer";
answer_div.id = "answer_div_"+counter;
var answer_tag = document.createElement("input");
answer_tag.id = "answer_tag_"+counter;
answer_tag.setAttribute("type", "text");
answer_tag.setAttribute("name", "textbox");
answer_div.appendChild(answer_tag);
var element=document.getElementById("divid_"+counter);
element.appendChild(answer_div);
}
Here is the css file:
.question
{
width: 40%;
height: auto;
float: left;
display: inline-block;
text-align: justify;
word-wrap:break-word;
}
.answer
{
padding-left:10%;
width: 40%;
height: auto;
float: left;
overflow: auto;
word-wrap:break-word;
}
.main
{
width: auto;
background-color:gray;
height: auto;
overflow: auto;
word-wrap:break-word;
}
My problem is that the code is working properly but both the divisions are not coming in a straight line. after the first div prints on the screen the second divisions comes in another line. How can I make both the div's come in the same line?
PS: should I stick with the current idea of using div or should I try some other approach? like tables?
The reason its in diffrent lines lies in your JS code, try setting your class like following:
//question_div.class="question";
question_div.setAttribute("class", "question") ;
and
//answer_div.class="answer";
answer_div.setAttribute("class", "answer");
and also this:
//dynDiv.class="main";
dynDiv.setAttribute("class", "main");
Your divs have not class attribute set properly. I recommend chrome in-built tools for developers or FireBug add-on if you use Firefox to check whether elements you built are like you design them to be.
You may check code here: http://jsfiddle.net/Nnwbs/2/
var counter = 0;
function create_div(type){
var dynDiv = document.createElement("div");
dynDiv.id = "divid_"+counter;
//dynDiv.class="main";
dynDiv.setAttribute("class", "main");
document.body.appendChild(dynDiv);
question();
if(type == 'ADDTEXTBOX'){
ADDTEXTBOX();
}
counter=counter+1;
}
function question(){
var question_div = document.createElement("div");
//question_div.class="question";
question_div.setAttribute("class", "question") ;
question_div.id = "question_div_"+counter;
var Question = prompt("Enter The Question here:", "");
var node=document.createTextNode(Question);
question_div.appendChild(node);
var element=document.getElementById("divid_"+counter);
element.appendChild(question_div);
}
function ADDTEXTBOX(){
var answer_div = document.createElement("div");
//answer_div.class="answer";
answer_div.setAttribute("class", "answer");
answer_div.id = "answer_div_"+counter;
var answer_tag = document.createElement("input");
answer_tag.id = "answer_tag_"+counter;
answer_tag.setAttribute("type", "text");
answer_tag.setAttribute("name", "textbox");
answer_div.appendChild(answer_tag);
var element=document.getElementById("divid_"+counter);
element.appendChild(answer_div);
}
create_div("ADDTEXTBOX");
And about that aproach I mean div or tables, you are correct to use div, its generaly recommended to do so.
Also after you correct your JS code fix also a bit your css styles as you like.
If you are using chrome using inspect element and find the corresponding 'div' tag and try to adjust the style(position)
Try to position both Divs with absolute inside a main div that could be relative. something like
#mainDiv {
position:absolute; /* or relative depends how you have it*/
width:80%;
height:100%;
left:10%;
}
#div1 {
position:absolute;
width: 40%;
height:100%;
left:0px;
top:0px;
}
#div2 {
position:absolute;
width: 40%;
height:100%;
right:0px;
top:0px;
}
It's simple. To line up both div's, give the position of of the two div's as display:inline-block;
display:inline-block;
Note: BOTH div's have to have this property for them to appear in a line.