I'm designing mobile webpage using HTML5+Javascript. I added a image dynamically thro' javascript. But when i tried to set a text over that image dynamically, it doesn't work.
I want the text to be appear over the image.
My code is;
<script>
for(var i=0;i<5;i++) {
var ele = document.getElementById('container');
var table = document.createElement('table');
table.className = 'c1';
var tr = document.createElement('tr');
var td = document.createElement('td');
/* image added dynamically */
var img = new Image();
img.src = "Images/car.jpeg";
img.className = 'c3';
var txt = document.createTextNode('IE8');
td.appendChild(img);
img.appendChild(txt);
tr.appendChild(td);
table.appendChild(tr);
ele.appendChild(table);
}
<style> .img{height:50px;width:50px;}
.c1 {height:60px; width:100px;}
</style>
<body id='container'></body>
I have tried by adding a div component & then adding text + background-image to it. It's also not working.
Better choice whould be to set the image as CSS image-background property of the text container.
<td style="background-image: url('path_to_image');">
A not so good technique would be putting the text on a container floating, with an absolute position (this whould require JS) and z-index greater than the image element.
Try this as #Edorka suggests
td.backgroundImage="url('Images/car.jpeg')";
don't create img element.
Related
i am working on this example of appendChild() method.but the difference is here i am trying to add more text to a div dynamically.that was all right.but the hard part is the text i want to add will be red in color.how can i do that?
i tried
text.setAttributes('color',"red");
But it didn't work.so,how this task can be done??please help,thanks!!!!
the full code is given below............
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function create_text(){
var mydiv = document.getElementById("mydiv");
var text = document.createTextNode(" New text to add.");
mydiv.appendChild(text);
}
</script>
</head>
<body>
<button onclick="create_text();">Create Text Node</button>
<div id="mydiv">Welcome, here is some text.</div>
</body>
</html>
You would normally have to use CSS properties, however, text nodes cannot have CSS properties applied to them. You therefore need another container element:
You can choose any container element you wish, e.g. div, span, etc. It just needs to be capable of containing a text node. Having an element then allows us to access the styles property and set various styles (the color attribute in your case).
→ jsFiddle
function create_text(){
var mydiv = document.getElementById("mydiv");
var container = document.createElement("span");
var text = document.createTextNode(" New text to add.");
container.appendChild(text);
container.style.color = "red";
mydiv.appendChild(container);
}
Further note:
the order of the color assignments and calls of appendChild is arbitrary. The following would also be possible:
function create_text(){
var mydiv = document.getElementById("mydiv");
var container = document.createElement("span");
var text = document.createTextNode(" New text to add.");
container.appendChild(text);
mydiv.appendChild(container);
container.style.color = "red";
}
mydiv.style.color = 'red';
or just in css
#mydiv { color: red; }
if you have other elements inside the div that you don't want to be red, you'd need to wrap the new text in a span or div or another element before appending.
with jquery this would be super easy:
$('#mydiv').append('<span style="color:red">this is new text</span>');
If that's everything in your div, you could try
document.getElementById("mydiv").style.color="#ff0000";
I have created table through DOM, now want to add style to that table but its not working.
code :
<script>
var nrCols=4;
var maxRows=10;
var nrRows=maxRows+1;
while(nrRows>maxRows)
{
nrRows=Number(prompt('How many rows? Maximum '+maxRows+' allowed.',''));
}
var root=document.getElementById('mydiv');
var tab=document.createElement('table');
var style=document.createElement('style');
style.setAttribute('background-color','red');
tab.appendChild(style);
tab.setAttribute('Border','1');
tab.className="mytable";
var tbo=document.createElement('tbody');
var tr1= document.createElement('tr');
var th1= document.createElement('th');
th1.appendChild(document.createTextNode('No.'));
var th2= document.createElement('th');
th2.appendChild(document.createTextNode('Surah.'));
tr1.appendChild(th1);
tr1.appendChild(th2);
tbo.appendChild(tr1);
var row, cell;
for(var i=0;i<nrRows;i++){
row=document.createElement('tr');
for(var j=0;j<nrCols;j++){
cell=document.createElement('td');
cell.appendChild(document.createTextNode('Allah'+' '+j))
row.appendChild(cell);
}
tbo.appendChild(row);
}
tab.appendChild(tbo);
root.appendChild(tab);
</script>
i have used style.setAttribute('background-color','red'); but no difference. how to fix it ?
Replace
var style=document.createElement('style');
style.setAttribute('background-color','red');
tab.appendChild(style);
with :
tab.style.backgroundColor = 'red';
All elements have a style attribute to which you can add the appropriate style values.
try to change the name of var style it might be causing the css style confusion, try this way
var menu = document.createElement("menu");
menu.style.backgroundColor = "#555";
Well, style is a HTML tag, when you create a element with that name it expects CSS info inside it. You maybe want this:
If you want to target the <th> element you should use this instead:
var th1 = document.createElement('th');
th1.style.backgroundColor = 'red';
Demo
it should be something like this
document.body.style.backgroundColor="#333333";
in your case
tab.style.backgroundColor="#333333"
Below code will create style tag
var css = 'table { background: red; }'
var style = document.createElement('style');
style.styleSheet.cssText = css;
I am trying to create a div that can be attached to an element whenever user hover to the link
I have many links and my codes look like the following.
for loops to create many links
codes....
link.href='#';
link.innerHTML = 'test'
link.onmouseover = OnHover;
codes....
function OnHover(){
var position;
var div = document.createElement('div');
div.className='testdiv';
div.innerHTML = 'test';
position=$(div).position();
div.style.top = position['top'] + 15 + 'px';
$(this).prepend(div);
}
link element1
link element2
----
| | //add new div when hover link element2
----
link element2
link element3
my css
.testdiv{
position:absolute;
}
I want to add a new div everytime the user hover to my link and position on the left top of the element.
My code would position all the div on top instead of every element.
Are there anyway to do this? Thanks so much!
Without seeing your other JavaScript/markup I can make the following observations:
You need to set position:absolute on your new div before top will do anything.
You need to make sure link is non-position:static.
Non-dynamic styles like the above should be in your CSS, not JS.
Positioning absolutely means you shouldn't need to use $(div).position()
You're using a mix of jQuery and pure JavaScript which looks a little odd :)
JS
function OnHover() {
var position;
var div = $('<div></div>');
div.addClass('testdiv');
div.html('test');
div.css('top', 15);
$(this).prepend(div);
}
CSS
.testdiv {
position:absolute;
}
a.testanchor {
position:relative;
}
I have a table that adds rows dynamically as new users become active. The function will add a new row that displays the user's name and a button that activates a lightbox to show more information. The name and button are put in a single cell, but I'd like to right align the button and left align the name within the cell. I found this post Right align and left align text in same HTML table cell that shows how to do it with divs in HTML, but I need to do this dynamically. Anyone have a guess? I tried the following code, it works, but doesn't justify the name and button how I'd like. It just centers them within the cell. I'd appreciate any help.
function addRow(tableID, user, phone, age, city, zipCode) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
tabbody=document.getElementsByTagName("tbody").item(2);
cell1 = document.createElement("TD"); //Create New Row
leftDiv = document.createElement("div"); //Create left div
leftDiv.id = "left"; //Assign div id
leftDiv.setAttribute("style", "float:left;width:50%;"); //Set div attributes
rightDiv = document.createElement("div"); //Create right div
rightDiv.id = "right"; //Assign div id
rightDiv.setAttribute("style", "float:right;width:50%;"); //Set div attributes
user_name = document.createTextNode(user + ' '); //Set user name
details_btn = document.createElement("button"); //Create details button
btn_txt = document.createTextNode("Details"); //Create button text
details_btn.appendChild(btn_txt); //Add "Details" to button text
details_btn.onclick = function(){moreInfo(user, phone, age, city, zipCode);}; //Assign button function
cell1.appendChild(leftDiv);
cell1.appendChild(user_name); //Add name to row
cell1.appendChild(rightDiv);
cell1.appendChild(details_btn); //Add button to row
row.appendChild(cell1); //Add row to table
tabbody.appendChild(row);
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}
Try this:
function creatediv() {
var newdiv = document.createElement('div');
newdiv.setAttribute('id', id);
newdiv.style.width = 300;
newdiv.style.height = 300;
newdiv.style.position = "absolute";
newdiv.style.background = "#C0C0C0";
newdiv.innerHTML = "Dynamic Div";
document.body.appendChild(newdiv);
}
The problem is that you need to place the username and button inside the floating divs you have created, whereas you have placed them in the same cell as the div, but at the same level as the divs.
So try changing this section:
cell1.appendChild(leftDiv);
cell1.appendChild(user_name); //Add name to row
cell1.appendChild(rightDiv);
cell1.appendChild(details_btn); //Add button to row
row.appendChild(cell1); //Add row to table
tabbody.appendChild(row);
to this:
leftDiv.appendChild(user_name); // Add name to left div
rightDiv.appendChild(details_btn); // Add button to right div
cell1.appendChild(leftDiv);
cell1.appendChild(rightDiv);
row.appendChild(cell1); //Add row to table
tabbody.appendChild(row);
Also, if more than 1 row is going to be added, the divs will get duplicate IDs of "left" and "right". Use a class instead.
Finally, you shouldn't need to set the width of the rightDiv to 50%. It should automatically right-align itself, if that is what you are after.
Instead of giving css rules individually, use css rule set directly like this :
div.className = "div_class_right/left"; //for creating right/left div respectively.
And create rule set div_class like this in your css :
.div_class_right/left{
float : right/left;
width : 50%;
}
I'm trying to append the title of each image of an array to each individual image who's height and width are greater than x
*Couldn't figure out how to format this correctly with the editor
var curHeight;
var curWidth;
var hr;
function imgHr(){
var allImages = document.images;
for (var i=0; allImages.length > i; i++) {
var imgSrc = allImages[i].src;
var newImg = new Image();
newImg.src = imgSrc;
curHeight = newImg.height;
curWidth = newImg.width;
if(curWidth>='80' && curHeight>='80'){
var imgGet=allImages[i];
var hrT=allImages[i].title;
var hr= document.createElement("hr");
hr.style.border-bottom="1px solid skyblue";
hr.innerHTML=hrT;
//appendChild isn't working
imgGet.appendChild(hr);
//but everthing else works: example
imgGet.style.border="1px solid red";
} else {
//maybe add something later
}
}
}
OK this solved my case
function insertafter(newChild, refChild){
refChild.parentNode.insertBefore(newChild,refChild.nextSibling);
}
Your error is in hr.style.border-bottom="1px solid skyblue". In javascript you need to use camelCase properties: hr.style.borderBottom="1px solid skyblue". See this SO-question.
Furthermore, you can't use appendChild on an img element. You'll have to wrap the image in a div (so: create a div element, append the img to that, remove the img from it's original position, create a hr element, append it to the div).
Last but not least: you can't use innerHTML with a h(orizontal)r(uler). So what remains is: create a div element, append the img to that 1, remove the img from it's original position, create a textNode (or a span) containing the img title, and append that to the div.
1 another idea may be to use the image as a background image for the newly created div.