Javascript - how to position image in a table - javascript

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.

Related

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

How to add a HTML table on to canvas along with other images

<canvas width="1050" height="1200" id="canvas1">Sorry, no canvas available</canvas>//
<table id="qwerty">
<tr>
<td>Apple</td>
<td>Mango</td>
</tr>
<tr>
<td>Orange</td>
<td>Grape</td>
</tr>
</table>
<script>
var canvas = document.getElementById("canvas1")
var ctx = canvas.getContext("2d");
ctx.drawImage(img1,0,0);
</script>
I have a HTML table and a canvas with an image drawn on it. Now I need to add that table on to the same canvas Please help me with this
How about make a container with position = relative and put those canvas and table into the container with position = absolute so we could have 2 layers.
I don't think it is possible to have table in canvas unless graphically draw it.

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.

Duplicate Inner div inside of the Outer div

I am trying to duplicate some divs. I am able to do this, however, when my div is duplicated it is being duplicated on top of my other content. I would like for it to be duplicated in the same div but it seems to be doing it outside of the div. Below is my code, any suggestions?
I think the problem lies within the last line of the javascript function with the parent node append child but I am not sure.
JS
<script>
document.getElementById('button').onclick = duplicate;
var i = 0;
var original = document.getElementById('duplicator');
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "gamesdiv" + ++i;
original.parentNode.appendChild(clone);
}
</script>
HTML/MARKUP
<div id="gamesdiv">
<div id="duplicator">
<table>
<tr>
<td>type</td>
<td><asp:TextBox ID="gamestype" runat="server" Height="16px" Width="92px"></asp:TextBox></td>
<td>name of game: </td>
<td><asp:TextBox ID="namegame" runat="server" Height="17px" Width="118px"></asp:TextBox></td>
</tr>
</table>
</div>
</div>
<button id="button" onclick="duplicate()">Add new game</button>
The gamesdiv is the div I would like for it to be duplicated in and the 'duplicator' div is the div I am duplicating. If you would like to view my html code please ask
It seems like you have two issues:
The first is the gamesdiv height is set to 85, which limits it.
Next, some of the markup has an invalid close (you have a div that looks like <div/> instead of </div>
I have fixed both of these issues here and tweaked your styles slightly:
http://jsfiddle.net/xDaevax/7LLXZ/
Please check this js fiddle: http://jsfiddle.net/Gb69f/
It is solved your problem or not? If not then please tell me what is the problem?
JavaScript
document.getElementById('button').onclick = duplicate;
var i = 0;
var original = document.getElementById('duplicator');
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "gamesdiv" + ++i;
original.parentNode.parentNode.appendChild(clone);
}

Using a Javascript function to Return a value in a table element

I need to display this result as a background image of my table. I have added a function to the bottom of the javascript, but am unable to get it to pass thru. I removed the function it since it did not work.
This works as it is now, but does not put the image in the background.
Thanks.
<HTML>
<head><base href="http://localhost:85/shop/" target="_blank"></head>
<!--.<style>
divcurve
{
border:1px solid;
border-radius:5px;
}
</style>
-->
<style>
IMG {BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none}
</style>
<script type="text/javascript">
//Javascript Created by Computerhope http://www.computerhope.com
//store the quotations in arrays
var images = [],
index = 0;
images[0] = "<a href = '/shop/category.aspx/about/711/'><img src='/images/opc.png' alt='Tech Support' height='140' width='165'></a>";
images[1] = "<a href = '/shop/category.aspx/about/711/'><img src='/images/opd.png' alt='Barcode Help' height='140' width='165'></a>";
images[2] = "<a href = '/shop/category.aspx/about/711/'><img src='/images/opj.png' alt='Barcode Help' height='140' width='165'></a>";
images[3] = "<a href = '/shop/category.aspx/about/711/'><img src='/images/opg.png' alt='Barcode Help' height='140' width='165'></a>";
images[4] = "<a href = '/shop/category.aspx/about/711/'><img src='/images/opjb.png' alt='Barcode Help' height='140' width='165'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
//done
</script>
<body>
<table>
<tr><td width="20%>
<img src="/images/phone.gif">
</td>
<td width="70%">
</td>
</tr>
</table>
</body>
</html>
I think I know what you mean, I may be wrong.
You want to select an image from an array containing strings of HTML which also happens to contain an image tag, you want to use the src attribute value for the background image of your table.
You would use a regular expression to do that in a for loop or join the array to a string first, could be used, but as Adam Botley mentioned, store each URL in the array, it will make your life a whole lot easier.
It looks like your code is from a tutorial, so if all you really want to do is randomly select a background image for the table that's even easier.
Here is what you can do. Create an array of URLs.
var urls = ['http://lorempixel.com/200/200', 'http://lorempixel.com/200/200'];
Then you need to calculate a random number to use for the key.
var index = Math.floor(Math.random() * urls.length);
A random number in Javascript is floating point number between 0 and 1, so you multiply this by the amount of URLs in the array. The Math.floor() returns the integer of the argument.
Then you'll need a reference to the table element.
var theTableElement = document.getElementById('theTableElement');
For that to actually work you must add an id to the table in the HTML.
<table id="theTableElement">
<tr>
<td>hello</td>
<td>there</td>
</tr>
<tr>
<td>you</td>
<td>person :)</td>
</tr>
</table>
Now, to set the background image, you can just.
theTableElement.style.background = 'url(' + urls[index] + ')';
Now It should work, let me know!

Categories