We Keep Coding

HTML/JS open new url in half the page

I'm using HTML, CSS and Javascript. My page is divided into two vertical columns. On the right side, I have buttons that, when clicked, do add a sentence on the left side. What I want to do is, when I click a button, the sentence on the left side is printed AND the content on the right side changes. I tried just making a new url, but it changes de content of the whole page.
EDIT: what I want to do is like the software (point of sales) that restaurants use. One side is the receipt, the other is where the waitress clicks on the food and beverages and they appear on the receipt.
This is what I have, but none of it is about the new change in the column content:
function artfato() {
var x = document.getElementById("myDIV");
x.innerHTML = "1 Fato"
}
<div class="row">
<div class="column" style="background-color:#bbb;">
<h3>Ticket nº1</h3>
<p id="myDIV"></p>
</div>
<div class="column">
<table id="table">
<tr>
<td>
<input type="button" value="Fatos" class="ixbt" onclick="artfato();">
</td>
<td>
<input type="button" value="Calças" class="ixbt" onclick="artfato();">
</td>
</tr>
</table>
</div>
</div>

It seems your code currently is changing the contents of id="myDiv". Not sure exactly what you're looking for, but you most likely want to append something to each or one of your columns instead of overwriting it.

I am not sure if you looking for that, but here we go.
First of all, change the "myDiv" from paragraph to div.
<div id=myDiv></div>
After this you can change the event function (artfato) to something as below:
var x = document.getElementById("myDIV");
var makeIframe = document.createElement("iframe");
makeIframe.setAttribute("src", "http://aol.com");
makeIframe.setAttribute("scrolling", "no");
makeIframe.style.border = "none";
makeIframe.style.left = "-453px";
makeIframe.style.top = "-70px";
makeIframe.style.position = "absolute";
makeIframe.style.width = "1440px";
makeIframe.style.height = "775px";
x.appendChild(makeIframe);
style.position = "relative";
makediv.style.overflow = "hidden";
Do not forget to set the position attribute relative and absolute, to maintain the iframe inside div.
If you want to get content from your own origin (domain/application), try this:
<iframe sandbox="allow-forms allow-same-origin allow-scripts" src="https://yoururl.com/"></iframe>
font: stackoverflow answer

Javascript - how to position image in a table

I am trying to position a 'random' image into a table column. Basically, I select the image based on the second that the the page is loaded - so 60 images available. The image selects and displays but locates itself at the page edge rather then the table edge.
I am going round in circles. Any hints on how to achieve this please? I am writing in HTML4 - I know very little about HTML5. The image width size is 480px, the column width in the table is 615px.
Here is my code.. with some debugs commented out.
Thanks
Martyn
Introduction
<script>
var d = new Date();
var n = d.getSeconds();
var n = "hdrimages/"+n+".jpg"
var img = document.createElement("img");
img.src = n
//document.getElementById("hdrimage").innerHTML = img.src;
//document.getElementById("hdrimage").style.cssFloat = "right";
//hdrimage.style.float = “right”;
document.body.appendChild(img);
</script>
</td>
<td width="40%" align="left" valign="top">
<h2>Upcoming Events</h2>
<hr>
<h2>News</h2></td>

you can do something like following
<table>
<tr>
<td id="img-cell"></td>
</tr>
</table>
and on JS part you can do
document.getElementById('img-cell').appendChild(img);

This is because you are appending the image to the body and not the table element

Your current code only adds the image to the end of the body tag.
You need to add your image to the table data cell tag.
To do this, give your table data cell an id so you can find it then it,s easy to add:
<td id="myawesometabledatacell" width="40%" align="left" valign="top">
<h2>Upcoming Events</h2>
<hr>
<h2>News</h2>
</td>
<script>
var d=new Date();
var n=d.getSeconds();
var n='hdrimages/'+n+'.jpg'
var img=document.createElement('img');
img.src=n
document.getElementById('myawesometabledatacell').appendChild(img);
</script>
I hope this helps.

Javascript Function that changes Text Color, Hyperlink Color, and Image

Hi,
I need help with a class assignment. We were given an HTML file for a pretend business, "Castaway Vacations LLC". The first step in the assignment is to create a javascript function that changes the Text Color, Hyperlink Color, and Image when a particular link is clicked. So when the "Romantic" link is clicked, for example, the text that reads "Select Mood" will change to red, along with all other text on the page (including the other hyperlinks). Clicking this link will also change the image. One thing that's tricky about the file that our teacher sent is that there isn't a matching CSS file - I created one myself that contains the class colors, but besides that, all the other styles are inline, which I'm not used to. Here is the JSfiddle link to my code:
UPDATE!
I've gotten the code down for changing text color and image, but the hyperlink colors still aren't changing. You can see my attempt at changing them with the function named colorLinks in the updated javascript. Unfortunately, not only does this function not work, it's also causing the previous (good) functions to not work as well. Thanks for your help.
http://jsfiddle.net/HappyHands31/twkm12r2/1/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Castaway Vacations, LLC</title>
</head>
<body leftmargin=0 rightmargin=0 bgcolor=#ffcc99
text=#993300 link=#993300 vlink=#996633>
<br>
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=95% align="right" bgcolor=#ffffff>
<img src="castaway_logo.jpg">
<br>
<font face=arial>Vacations, LLC</font></td>
<td bgcolor=#ffffff> </td>
</tr>
</table>
<br><br>
<div align="center">
<table width=600>
<tr>
<td width=300 valign="top">
<font face=arial size=3><b><i>Select Mood...</i></b></font><br><br>
<font face=arial>
<a id="one" href="#">Romantic</a><br><br>
<a id="two" href="#">Adventure</a><br><br>
<a id="three" href="#">Relaxation</a><br><br>
<a id="four" href="#">Family</a><br><br><br>
<br>
Request A Brochure...
</font>
</td>
<td align="center"><img id="original.jpg" src="orig_main.jpg">
<br> <i>Your Vacation Awaits!
</tr>
</center>
<script src="castaway.js"></script>
</body>
</html>
</DOCTYPE>
Javascript:
document.getElementById('one').addEventListener
('click', change_color);
document.getElementById('two').addEventListener
('click', change_color2);
document.getElementById('three').addEventListener
('click', change_color3);
document.getElementById('four').addEventListener
('click', change_color4);
function change_color(){
document.body.style.color = "red";
document.getElementById("original.jpg").src = "rom_main.jpg";
}
function change_color2(){
document.body.style.color = "blue";
document.getElementById("original.jpg").src = "adv_main.jpg";
}
function change_color3(){
document.body.style.color = "green";
document.getElementById("original.jpg").src = "rel_main.jpg";
}
function change_color4(){
document.body.style.color = "orange";
document.getElementById("original.jpg").src = "fam_main.jgp";
}
colorLinks ("#00FF00");
function colorLinks (hex)
var links = document.getElementsByTagName("a");
for(var i=0;i<links.length;i++)
{
if(links[i].href)
{
links[i].style.color = "red";
}
}
Thank you!

ok, for starters to change color of something you just need to do something like this
function change_color(){
document.body.style.color = "red"; // this will change the color of the text to RED
document.getElementById("image_to_change").src = "something.jpg"; // change img src
}
to use the function just add the call to the function where you want it, for example
<a onClick="change_color();" href="#">Romantic</a><br><br>
well, its already accepted answer, but just wanted to complete it, to change the img src of, first you need to add an id for that img, for example
<td align="center"><img id="image_to_change"src="orig_main.jpg"><br><i>Your Vacation Awaits!
after you added the id, you can see how i added this line to the "change_color" function
document.getElementById("image_to_change").src = "***SOURCE_TO_YOUR_IMAGE***";
* Working Code *
OK, here is the working fiddle http://jsfiddle.net/8ntdbek3/1/
i changed a few things to make it work, first, you need to understand that when you give an "ID" to something, in this case to the img (you gave the id "rom_main.jpg") the ID is what you need to use to call that element, so when you are using
document.getElementById("orig_main.jpg").src = "rom_main.jpg";
it should go
document.getElementById("rom_main.jpg").src = "rom_main.jpg";
since you gave it the id "rom_main.jpg" in this line, and the id "orig_main.jpg" does not exist!
<td align="center"><img id=**"rom_main.jpg**" src="orig_main.jpg"><br><i>Your Vacation Awaits!
also its important to note that you can put ANY id that you want, so repeating the name of the jpg file its something that i would not recommend, since it leads to confusion.
I changed the ID to something more readable and thats it. if you still need help comment below and i'll do my best to help you.
* EDIT to change color *
ok, finally i added a few lines of code to change the color of EVERY element in your page, for each onclick i adde these lines:
var list = document.getElementsByTagName("a");
for (i = 0; i < list.length; i++) {
list[i].style.color = "red";
}
as you can see, i get in a list every element with the tag "a", then every element i turn it into "red" (or the color you want).
here is the working fiddle http://jsfiddle.net/8ntdbek3/3/
regards.

Navigate in divs with table Jquery

I try to navigate in a table. Without the table it works, but with nope!
here's the code :
<table>
<th><div class="section selected">E1</div></th>
<th><div class="section">E2</div></th>
<th><div class="section">E3</div></th>
</table>
<br />
CLICK
then
$('#button').click(function(){
$('.selected + .section, .section:eq(0)')
.last().addClass('selected')
.siblings('.selected').removeClass('selected');
});
CSS
.selected{background:red}
And How to triggered the link with Enter Key?
Thanks!

this might want you want to do:
$('#button').click(function () {
var selected = $('.section.selected');
selected.removeClass('selected');
var tbl = selected.closest("table");
var th = tbl.find("th");
var index = selected.closest("th").index();
if(index < th.length-1) index++;
else index=0;
tbl.find(".section:eq(" + index + ")").addClass('selected');
});
this is the working DEMO.
The problem in your code was using jQuery siblings function, which goes through the all node siblings at the same DOM level, for instance if you had:
<table>
<th>
<div class="section selected">E1
</div>
<div class="section">E1 Sibling
</div>
</th>
</table>
then sibling function would select the E1 Sibling node, but non of .section nodes in your html are siblings.

Duplicate Div - Remove option prevents additional Div Duplication

I'm new to using javascript and have come up against a bit of a wall where I was looking for code to duplicate a DIV. I found the following code:
<html>
<body>
<form name="myform">
<input type="button" value="Click here" onclick="duplicate()">
<div id="original">
duplicate EVERYTHING INSIDE THIS DIV
</div>
<div id="duplicater">
duplicate EVERYTHING INSIDE THIS DIV
<input type="button" value="Remove Div" onclick="this.parentNode.style.display = 'none'">
</div>
<script>
var i = 0;
var original = document.getElementById('duplicater');
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplicater" + ++i;
// or clone.id = ""; if the divs don't need an ID
original.parentNode.appendChild(clone);
}
</script>
</body>
</html>
This works quite well. I added a Remove Div button so if the user decided they added one Div too many they would have the option to remove it. However, in testing I found if the user Remove Div all the way back to the first Div, any further Duplicate Div does not display. So the user would have to restart the page. To resolve this I tried to include an IF...ELSE.
<html>
<body>
<form name="myform">
<input type="button" value="Click here" onclick="duplicate()">
<div id="original">
duplicate EVERYTHING INSIDE THIS DIV
</div>
<div id="duplicater">
duplicate EVERYTHING INSIDE THIS DIV
<input type="button" value="Remove Div" onclick="this.parentNode.style.display = 'none'">
</div>
<script>
var i = 0;
var original = document.getElementById('duplicater');
function duplicate() {
if (document.getElementById("duplicater")=="none")
{
document.getElementById("duplicater")="";
}
else
{
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplicater" + ++i;
// or clone.id = ""; if the divs don't need an ID
original.parentNode.appendChild(clone);
}
}
</script>
</body>
</html>
However, this does not work. I fully admit to being no coding guru and wouldn't be surprised if it is a simply syntax issue, but any points with this would be greatfully accepted.

Your problem is here:
this.parentNode.style.display = 'none'
This is setting the parent node (the form) to not display (which isn't the same as removing it). What you want to do is find the lastChild to the of the parent node and remove it.

Matt has your answer, I got distracted so here's a late response. In your code:
> <input type="button" value="Remove Div" onclick="this.parentNode.style.display = 'none'">
does not "remove" the node, it just hides it. To remove the node:
<input type="button" value="Remove Div" onclick="this.parentNode.parentNode.removeChild(this.parentNode)">
Also:
> if (document.getElementById("duplicater")=="none")
getElementById returns either a DOM node with a matching ID, or null if there isn't one. Neither will ever be equivalent to the string "none", therefore the above will always return false. Which is a good thing because in the line:
> document.getElementById("duplicater")=""
You will be trying to assign to null or a DOM element, both of which are not permitted. In the case that the left hand side evaluates to null , an error will result. Where it resolves to a DOM element, anything can happen (since host objects can do what they like) but likely an error will result.