alignment issue of div tag - javascript

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.

Related

Move CSS out of JavaScript file and into CSS class

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");

Get div's margin value?

I'm trying to figure out if it's possible to read a div's margins with JavaScript if those margins are set in external css file.
So far I am able to read div's margin data when it is written as an inline style (not in CSS file but inside HTML):
(function() {
var banner = document.getElementById('banner');
var move = document.getElementById('box');
banner.onclick = function() {
alert(move.style.marginLeft);
};
})();
Here is JSFiddle:
https://jsfiddle.net/b0kaLk1f/
It works well but just remove style="margin-left: 500px" and it will stop working. I'd like to read CSS data from style.css file rather than from inline styles.
The Window.getComputedStyle() method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.
(function() {
var banner = document.getElementById('banner');
var move = document.getElementById('box');
banner.onclick = function() {
var style = window.getComputedStyle(move, null);
alert(style.marginLeft);
};
})();
#box {
margin-left: 500px;
-webkit-transition: 0.5s;
transition: 0.5s;
background: #af0000;
width: 500px;
height: 300px;
}
#banner {
border: solid 1px #000;
overflow: hidden;
width: 500px;
height: 300px;
}
<div id="banner">
<div id="box"></div>
</div>
Essentially you are trying to maintain state in the form of style properties, which is not a good idea. You will have to retrieve them and set them. Instead, use a class to move the extended banner back and forth. The code is shorter and simpler:
banner.onclick = function () {
ext.classList.toggle('hide_extended_banner');
};
See https://jsfiddle.net/b0kaLk1f/2/.

Dynamically Created HTML object not having CSS applied to it

Final product: Web page that is filled in by data on a word document which is fed into a recurring HTML structure.
Problem: When ran, the HTML elements are created, but the CSS classes are not applied until the window is resized.
Javascrip:
for (i=0; i<=timeline_data.length; i++){
var newParent = document.getElementById('wgt-timeline-bdy-wrap-id');
var newItem = document.createElement('div');
newParent.appendChild(newItem);
newItem.setAttribute('class','wgt-timeline-bdy-item');
var newText = document.createElement('p');
newItem.appendChild(newText);
newText.setAttribute('class','timeline-new-text');
newText.id="timeline-" + timeline_data[i].id + "-text";
}
CSS:
.wgt-timeline-bdy-item {
display: inline-block;
font-size: 20px;
position: relative;
text-align: center;
vertical-align: middle;
width: 100%;
}
.timeline-new-text{
font-size: 30px;
position: relative;
top:40px;
}
Nothing unexpected in the HTML, wgt-timeline-bdy-wrap-id is a div.
Thank you in advance for your help
try appending to the DOM as the last thing you do in the loop (i.e after you have set the class). Also, most places I've done this through element.className = 'xxx' rather than using the setAttribute() function; not sure that matters, though.
Try writing a jQuery function to apply the CSS styles once the for loop is done executing. Something like this:
for{...}
styleelements();
function styleelements(){
$(".wgt-timeline-bdy-item").css({...});
$(".timeline-new-text").css({...});
}

How to add a div over another div with JavaScript?

First, I have this:
Now, what I want to do is, to make "zoom" of some nodes. Once I double click on some of the nodes, I want to see the whole node on the page:
Now, because every time I zoom a node - I see the same thing (a big circle), I want to make this: once I double-click on a node - only a new div to be added which will have the circle and it will overlap its container. I am working with Raphael, so the circle should be drawn with Raphael.
How should I do this with JavaScript? (adding new div with the circle which will overlap the container, and drawing the circle with Raphael, which shouldn't be hard, but the creation of the div is the part where I am stuck)
What I did so far is:
zoomDiv = document.createElement('div');
zoomDiv.id = 'graph-zoom';
zoomDiv.style.position = 'absolute';
zoomDiv.style.zIndex = 2000;
this.container.appendChild(zoomDiv);
When I go to the HTML, I can see that the div is added to the container:
But it is too low. I don't know if this is the problem why I can't see the empty div so far or is it something else?
This example demonstrates the creation of a div in javascript, how to append and remove it to and from the document.body, the use of CSS position: absolute; and CSS z-index to place elements on top of one another.
CSS
#parent {
position: absolute;
top: 0px;
left: 0px;
height: 100px;
width: 300px;
z-index: 0;
background-color: yellow;
}
#child {
position: absolute;
top: 0px;
left: 0px;
height: 100px;
width: 300px;
z-index: 1;
background-color: green;
}
HTML
<div id="parent">
<button id="open">Open</button>
</div>
Javascript
var parent = document.getElementById("parent");
var open = document.getElementById("open");
function addChild() {
var div = document.createElement("div");
var close = document.createElement("button");
div.id = "child";
close.id = "close";
close.textContent = "Close";
close.addEventListener("click", function closeSelf() {
document.body.removeChild(div);
}, false);
div.appendChild(close);
document.body.appendChild(div);
}
open.addEventListener("click", addChild, false);
On jsfiddle
Creation is easy:
var new_div = document.createElement("div");
Insertion is little more difficult:
var your_raphael_container_parent = your_raphael_container.parentNode;
if (your_raphael_container.nextSibling) {
your_raphael_container_parent.insertBefore(new_div, your_raphael_container.nextSibling);
}
else {
your_raphael_container_parent.appendChild(new_div);
}

How to show/hide a div from on mouseover/mouseout on a TR?

Is it possible to attach a popup (div) dynamically to a row in a table such that the popup is rendered by a mouseover, and hidden by a mouseout action?
The code I put together ( see below ) refuses to render the popups, albeit the event handlers are called.
Is what I'm trying to do really possible? From [mouseover() mouseout() jQuery add/removeClass problem, I'm guessing the problem is probably with the CSS
Thought's people?
EDIT:
The class attached to the selected div elements is updated as expected for both, mouseover and mouseout.
<link rel="stylesheet" type="text/css" href='mine.css' />
<html>
<head>
</head>
<body onload="doStuff();">
<table id="myTable">
<tr id="r1">
<td>R1C1</td>
<td>R1C2</td>
<td>R1C3</td>
</tr>
<tr id="r2">
<td>R2C1</td>
<td>R2C2</td>
<td>R2C3</td>
</tr>
<tr id="r3">
<td>R3C1</td>
<td>R3C2</td>
<td>R3C3</td>
</tr>
</table>
</body>
<script type="text/javascript">
function doStuff(){
var lRowCount = document.getElementById("myTable").rows.length;
for(lIter = 0; lIter < lRowCount; lIter += 1){
var lDynamicColumn = document.createElement("td");
var lmyDiv = document.createElement( "div" );
var lId = document.getElementById("myTable").rows[lIter].id;
// div content to be displayed as Text content;
var lText = document.createTextNode( "balderdash!" );
lmyDiv.id= lId + "_popup";
lmyDiv.style.display="none" ;
lmyDiv.appendChild( lText );
/*lDynamicColumn.appendChild(lmyDiv);
document.getElementById("myTable").rows[lIter].appendChild(lDynamicColumn);*/
document.getElementById("myTable").rows[lIter].appendChild(lmyDiv);
document.getElementById("myTable").rows[lIter].onmouseover = function(){
showPopup( lmyDiv.id );
}
document.getElementById("myTable").rows[lIter].onmouseout = function(){
hidePopup( lmyDiv.id );
};
}
alert(document.getElementById("myTable").innerHTML);
}
function showPopup( myId ){
document.getElementById(myId).className="show";
}
function hidePopup( myId ){
document.getElementById(myId).className="hide";
}
</script>
</html>
mine.css
.show{
background-color: #ffffc0;
overflow: auto;
z-index: 100;
border: .1em solid rgb(200, 128, 0);
float: right;
top: -10px;
margin: 5px;
height: inherit;
width: inherit;
position: absolute;
white-space: no-wrap;
}
.hide{
z-index: -1;
}
Add display: block to .show style. Also, your css selectors in the example are wrong, replace show with .show and hide with .hide (if that's not a typo).
On mouse over try document.getElementById('yourcontrolID').style['display']='none';
Hope this works.
I am not sure if this is the problem, but it could be that the lmyDiv is not accessible inside the inline function.
document.getElementById("myTable").rows[lIter].onmouseover = function(){
showPopup( lmyDiv.id );
}
EDIT:
I tested it, and setting the style class dynamically like this did not work in Firefox, IE, Chrome or Safari.
But it did actually work in Opera!
EDIT 2:
I was thinking about something else that could be the issue here:
When the tooltip is shown, is it positioned so that the mouse is inside the tooltip area? In that case, it might be that the onmouseout event on the row is triggered, because the row in question does not longer have "direct contact" with the mouse...
If this is the case, you should add:
lmyDiv.onmouseover = document.getElementById("myTable").rows[lIter].onmouseover;
lmyDiv.onmouseout = document.getElementById("myTable").rows[lIter].onmouseout;
function hide(obj)
{
document.getElementById(obj.id).style.display ='none';
}
onMouseover='hide(this) call this function on div u want to hide.
If you are willing to risk browser incompatibility (and I mean some fairly older browsers we would all like to forget yet always show up when they shouldn't), you should consider simply dropping the javascript all together and simply use pseudo-classes, like so:
.trMessage {
background-color: #ffffc0;
overflow: auto;
z-index: 100;
border: .1em solid #c88000;
float: right;
top: -10px;
margin: 5px;
height: inherit;
width: inherit;
position: absolute;
white-space: no-wrap;
display: none;
}
.trMessage:hover {
display: block;
}
Now you have the option of adding the div to each row in the actual html or keeping the javascript that adds the message box, but without the need for event handlers to adjust for style or class switching. You simply create the boxes the way you already do but use the class "messageBox" for each one. Then the css takes it from there.
Give a try at jQuery!

Categories