Develop Reference

Javascript that changes HTML code

Is it possible to make javascript to when you enter variables to add code to html..? I don't know English too good, so..I'm going to draw it!
Also, I don't want it to change everything, but I want it just to add that
info to the list..I have premade HTML page with linked CSS.
If you have any questions, please ask me, just help me.. :(
I know HTML and CSS, java..Not even a little bit.. :/
If you are here reading this, THANK YOU! <3

You have many options to add html to your page through JavaScript.
1) Simply create a div with an id
<div id="enterTextHere"></div>
2) Inside of your custom.js file or inside of <script></script>, you can use many different methods
Method 1 : Using innerHTML
var desiredElement = document.getElementById("enterTextHere");
desiredElement.innerHTML = "<p>I added text!</p>";
Method 2 : Using JQuery.append
$("#enterTextHere").append("I added text!");
I'm sure there are many more but without your specific code to reference this is the best I can do. Please use this link for your reference. It also has a lot of good information for the rest of your HTML journey. Enjoy! w3schools

Maybe something like this can help:
HTML:
<table class="table"><tr id="update-table"></tr></table>
<script>
(function(){
var updater = (function(){
function updater( options ){
this.table = options.table;
this.cells = this.table.querySelectorAll('.cell');
this.num_cells = this.cells ? this.cells.length : 0;
}
updater.prototype.update_element = function( index, value ){
this.cells[index].innerHTML = value;
};
updater.prototype.add_element = function(){
var td = document.createElement('td');
td.setAttribute('class','cell');
this.table.appendChild(td);
this.cells.push(td);
this.num_cells++;
};
return updater;
})();
window.updater = updater;
})();
var table, a, count = 0;
table = document.getElementById('update-table');
a = new updater({table:table});
for(var i = 0; i < 5; ++i){
a.add_element();
a.update_element(i,'info'+i);
}
</script>

make fade in/out image flipper with javascript

so guys, i'm starting to learn javascript a while ago.
i have this image flipper block code, can anyone help me how to make the transition more smooth, like fade in/out?
var d = document,
smiles = d.querySelectorAll('#text-5 .home-port-widget img');
for (var i = 0; i < smiles.length; i++){
smiles[i].alt = smiles[i].getAttribute('src');
smiles[i].onmouseenter = function(){
var hoverImg = this.getAttribute('src'),
target = d.querySelectorAll('#text-5 .home-port-widget img:not([src="'+ hoverImg +'"])');
target[0].src = hoverImg.split('-e')[0]+'_a.jpg';
target[1].src = hoverImg.split('-e')[0]+'_b.jpg';
}
smiles[i].onmouseleave = function(){
var hoverImg = this.getAttribute('src'),
target = d.querySelectorAll('#text-5 .home-port-widget img:not([src="'+ hoverImg +'"])');
target[0].src = target[0].getAttribute('alt');
target[1].src = target[1].getAttribute('alt');
}
}

If you don't want to deal with coding the animations yourself, consider using a CSS animation library such as Animate.css. However, if you still want to make your own I would suggest adding a JSFiddle so that we can easily take a look at what is happening with your current code.

Retrieving Info from Text Box

I have been able to make some progress on a program but am running into a problem that I can't quite figure out. In the script, when the text box loses focus it is supposed to update the total cost. At this point it retrieves the number from the html code, but it is not retrieving the number that is input.
function productCosts()
{
var totalMap = document.getElementById('qty1');
var quantity1 = parseFloat($("qty1").value);
var price1 = parseFloat($('price1').value);
var totalMapBlur = function()
{
var totalMapCost = $('cost1');
totalMapCost = (quantity1) * (price1);
alert(price1);
alert(quantity1);
alert(totalMapCost);
}
qty1.onblur = (totalMapBlur);
}
I have created a fiddle so that you can see all of the code. http://jsfiddle.net/KRFjd/1/
Any help is greatly appreciated.
P.S. If you feel my question is not written well enough, please let me know how to improve, don't just review the question negatively. I am trying.

The problem is that you only set quantity1when you call productCosts() when the document is first loaded. You don't update it when the user edits the input field. And if you want the Cost column to be updated, you have to assign to its value.
var totalMapBlur = function()
{
var quantity1 = $('qty1').value;
var totalMapCost = (quantity1) * (price1);
alert(price1);
alert(quantity1);
alert(totalMapCost);
$('cost1').value = totalMapCost;
}
FIDDLE

Div Wrapper childern setArribute offset

I am adding a wrapper to a division and trying to set offset right as follow:
var wrapper_div = document.getElementById('container1');
var kinetic_div = wrapper_div.children[0];
canvaso = kinetic_div.children[0];
canvaso.setAttribute('id', "panel1");
canvaso.setAttribute('offset', '100px');
Unfortunately it does not work! Would appreciate your suggestions.

Do this:
canvaso.style.offset = '100px;'
or
canvaso.setAttribute('style','offset:100px;');
I presume that you are trying to change the style.

Inserting content into iframe javascript

How can we insert the content of 1 iframe into another. Is this possible?

if I understood your question correctly.
Something like this. But you should optimize this part of code before use it.
var oIFrame1 = document.getElementById("myframe1"),
oIFrame2 = document.getElementById("myframe2");
var oDoc1 = (oIFrame1.contentWindow || oIFrame1.contentDocument);
if (oDoc1.document) oDoc1 = oDoc1.document;
var oDoc2 = (oIFrame2.contentWindow || oIFrame2.contentDocument);
if (oDoc2.document) oDoc2 = oDoc2.document;
oDoc1.body.innerHTML = oDoc2.body.innerHTML;