JavaScript - Attribute Manipulation In Pure Js

I have created a simple webpage that allows users to search multiple comparison shopping sites at once. This is just a side project that I am working on. At the current time, the webpage has the sites listed with checkboxes. The user can put in a search term in the box and then select which sites they want to search. The sites then open in a new window or on different tabs depending on which browser they are using.

What I would like to do is find out if there is a way to have the same thing, but the sites open in the same window below the search box, like in tabbed frames. I tried doing something with the tabbed viewer script from dynamic drive: http://www.dynamicdrive.com/dynamici...bdocviewer.htm, but was unable to figure out how to get the search parameter into the url. My page can be found at http://www.imarkinteractive.com/tools/onesearch.html and all of the javascript is on the page.

Does anyone know if this can be accomplished and if so, how would I go about doing it. I can run a php script on my server if that would be easier, but I would really appreciate the assistance. Thanks.

Hi,

I'm looking for some help, or perhaps an explaination in regards to "click & rotate" an image using your cursor with Javascript. I've seen this a couple of times on various websites and I'm wondering how difficult/expensive it is to develop such an image.

I own a clothing company and what I'm looking to do is to create images on my website of a product in which the customer can click on and "rotate" to see a 360 degree view of the product. Think autocad to a degree...

Is Javascript the best language to pursue for this function? I'm quite new to this department, so any help/advice is greatly appreciated.

I code through Greasemonkey using Firebug on Firefox. I'm trying to write my first script using a simple function to change the appearance of my email address in Gmail.

My current email address is formatted like this example: Code:

firstlast@gmail.com

I want the script to manipulate the text to resemble this: Code:

first.last@gmail.com

I've posted my script below. The Mozilla error console shows no syntax errors or warnings. JavaScript IS allowed to run and there are no restrictions of any kind that should hinder this script's ability to run. What am I doing wrong in the code? Any help would be greatly appreciated!

Code:

(function () {

	var loadOldName = window.document.body.getElementById('loading').getElementsByClassName('msg').textContent('\nLoading+ firstlast@gmail.com…\n');
	var topLeftName = window.document.getElementsByClassName('cP').getElementsByClassName('bB').getElementsByTag('u').innerHTML('<b>firstlast@gmail.com</b>');
	var topLeftDrop = window.document.getElementsByClassName('cP').getElementsByClassName('J-N-Jz').innerHTML('<span class="Qu L4">firstlast@gmail.com (default)</span>');

	function changeName() {
		
		if(loadOldName) {
			window.document.body.getElementById('loading').getElementsByClassName('msg').removeChild(textContent('\nLoading+ firstlast@gmail.com…\n')).appendChild(textContent('\nLoading+ first.last@gmail.com…\n'));
		};

		if(topLeftName) {
			window.document.getElementsByClassName('cP').getElementsByClassName('bB').getElementsByTag('u').removeChild(innerHTML('<b>firstlast@gmail.com</b>')).appendChild(innerHTML('<b>first.last@gmail.com</b>'));
		};

		if(topLeftDrop) {
			window.document.getElementsByClassName('cP').getElementsByClassName('J-N-Jz').removeChild(innerHTML('<span class="Qu L4">firstlast@gmail.com (default)</span>')).appendChild(innerHTML('<span class="Qu L4">first.last@gmail.com (default)</span>'));
		};

	};

	changeName();

});

Hello guys,

I was wondering if someone could help me out. I am trying to create an image gallery in javascript without the use of jquery, mootools or any other library. The tutorials out there and even the javascript books I own all use jquery or other library.

I currently have some thumbnails and when clicked, they should display a bigger image in a selected space.

The image gallery is to be looped and to start automatically while being controlled by buttons or thumbnails. What is the best way to go about this, please bear in mind that I am quite new javascript itself.

Thanks
Vou

Hello everyone,

I am trying to make a canvas element display an image with some text on using canvas.drawImage and canvas.fillText. Only problem is my code is generating a very odd and hard to debug error.

Thanks in advance,

Alex

Code(JS):
Code:

function runstuff() {
	canvasthing = document.getElementById('1');
	context = canvasthing.getContext('2d');
	purple = new Image();
	purple.src = 'img/buttonpurple.png';
	purple.onload = function() {
    context.drawImage('purple', 0, 0);
	};
	context.font = '16px Vani';
	context.textBaseline = 'top';
	context.fillText('Test', 26, 24);
}

Code(html):
Code:

<!doctype html>
<html lang="en">
	<head>
		<title>POB.G</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css">
		<script type="text/javascript" src="script.js">
		</script>
	</head>
	<body onload="runstuff()">
	<canvas id="1" width="127" height="128"></canvas>
	</body>
</html>

Error:
Code:

Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]"  nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"  location: "JS frame :: file:///C:/Users/*BlahBlahBlah/script.js :: <TOP_LEVEL> :: line 7"  data: no]

I have made a code which is for a 9 tile picture puzzle.And i have done it for click event.now i want to make it possible to drag and drop to swap divs rather than clicking.So how do i swap divs with only javascript.[p.s my divs are dynamically created]

Ok, first off I would like to say hi to everyone as this is my first post! Now that we have been introduced, here is my problem. I am trying to create a billing system in which you generate invoices. The way I am going about this is using a table with rows for each item the user is placing on the invoice. I have a script that adds new rows to the table when the user wants to place more than one item on the invoice, thats all fine and dandy. The problem is that I also want to be able to delete any row of the table at any time so that the user can remove items as well. When the user presses the attached "delete" button on the row they wish to remove the delete script gets the table length and changes the id and name of every item in the rows below the one being deleted so that when I submit the data as a form it will have a predictable pattern for getting the post variables. At the moment the script runs fine the first time and does exactly what it is supposed to. The issue is that the second time you run it after it has changed the id and name values for the delete button elements on the lower rows it only makes it to the first alert() call! I have been pulling my hair out for days!!!!!

Here is the Code:

Code:

	function getEl(element)
		{
			var object = null;
			if (document.layers)
				{
					object = document.layers[element];
				}
			else if (document.all)
				{
					object = document.all[element];
				}
			else if (document.getElementById)
				{
					object = document.getElementById(element);
				}
			return object;
		}
		
function addRow()
{
  var tbl = getEl('invTbl');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);
  
  var cellqty = row.insertCell(0);
  var qty = document.createElement("<input type='text' name='qty_"+iteration+"' id='qty_"+iteration+"' size='4' value='1' onChange='javascript:updatePrice();' />");
  cellqty.appendChild(qty);
  
  var cellitm = row.insertCell(1);
  var itm = document.createElement('input');
  itm.type = 'text';
  itm.name = 'itm_' + iteration;
  itm.id = 'itm_' + iteration;
  itm.size = 30;
  cellitm.appendChild(itm);
  
  var celldsc = row.insertCell(2);
  var dsc = document.createElement('input');
  dsc.type = 'text';
  dsc.name = 'dsc_' + iteration;
  dsc.id = 'dsc_' + iteration;
  dsc.size = 50;
  dsc.value = iteration;
  celldsc.appendChild(dsc);
  
  var cellprc = row.insertCell(3);
  var prc = document.createElement("<input type='text' name='prc_"+iteration+"' id='prc_"+iteration+"' size='9' value='1.00' onChange='javascript:updatePrice();' />");
  cellprc.appendChild(prc);
  
  var celldel = row.insertCell(4);
  var del = document.createElement("<input type='button' name='"+iteration+"' id='"+iteration+"' value='Delete' onClick='javascript:removeRow(this.id);' />");
  celldel.appendChild(del);

}

function removeRow(row)
{

	alert("you are deleting row " + parseInt(row));
	tbl = getEl('invTbl');
	rowTotal = tbl.rows.length;
	alert("there are " + rowTotal + " rows!");
	tbl.deleteRow(parseInt(row));	
	for ( i = 1; i < rowTotal; i++ )
		{
		if ( i > parseInt(row) )
			{
			place = i - 1;
			alert(i + " becomes " + place);
			qtycontainer = "qty_" + i;
			itmcontainer = "itm_" + i;
			dsccontainer = "dsc_" + i;
			prccontainer = "prc_" + i;
			delcontainer = i.toString();
			buttonchange = place.toString();
			
			getEl(qtycontainer).name = 'qty_' + place;
			getEl(qtycontainer).id = 'qty_' + place;
	
			getEl(itmcontainer).name = 'itm_' + place;
			getEl(itmcontainer).id = 'itm_' + place;
			
			getEl(dsccontainer).name = 'dsc_' + place;
			getEl(dsccontainer).id = 'dsc_' + place;
			getEl('dsc_'+place).value = getEl('dsc_'+place).id;
			
			getEl(prccontainer).name = 'prc_' + place;
			getEl(prccontainer).id = 'prc_' + place;
			
			getEl(delcontainer).name = buttonchange;
			getEl(delcontainer).id = buttonchange;
			alert("del button changed to " + getEl(i).id);
			}
		}
//	updatePrice();
}

The button element for each row calls javascript:removeRow(this.id);

Please help me figure out what I am doing wrong!

ok guys, i am not very saavy with javascript and I dont know if this is an easy fix or something difficult, but here is my plan. I would like to have 4 divs with content in each and set each to occupy the same web space through absolute positioning.

The .js would be for me to have three divs with a display:none and one to have display:block. and then at a set interval, have the divs switch role so that one that was display none is then block and the others are hidden.

I dont want to have a page reload and I dont want to work in flash or anything like that, I just need an example of a script that will alternate through a set array of div ids (i.e. "<<div id="ad1"></div> div id="ad2"></div> <div id="ad3"></div> <div id="ad4"></div>, and change the display attribute every 10 seconds or so.

Any help would be greatly appreciated thanks so much

I am aiming to change a couple of items on a CSS definition using JavaScript, so the servicer only needs to update one JS variable. I am so a novice at this...

I would like to be able to set the "top" and "height" attributes of my graphbar ID element after the percent in the JS script is changed.

Here's the js and CSS that is pertinent:

Code:

var btmrtx= 380;
var btmrty= 280;
var tplftx= 40;
var tplfty= 20;
var totalheight= (btmrty)-(tplfty);

<!----  Here is the number or percentage of surveys done as a decimal. This you enter into this script for every update! -->
var pctdone= .34;

var barpixels= totalheight*pctdone;
var newtoplfty = btmrty - barpixels;

Code:

#graphbar {
	background:#dd6000;
	position:relative;
	float:left;
	width: 20px;
	height: 36px;
	left: 40px;
	top: 244px;
	
}

I don't even know where to begin on a function.
Thanks for help!

Hi,

The following doesn't work:

Code:

<!DOCTYPE HTML>
<title>Sample flash</title>
<embed id="foo" src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash" />

<script type="text/javascript">
document.getElementById("foo").setAttribute("bgcolor", "#00FF00");
</script>

But if you change setAttribute to ("width", "800"), it works with no problem! What am I missing?

Any help is appreciated!
Mike

Hi,

I'm using JavaScript to check (or leave empty) a checkbox based on stored data.

Code:

 for (var q=0;q<document.Simple.Subject.length;q++) {
if (document.Simple.Subject[q].value == document.Restored.Subject.value) {
document.Simple.Subject[q].checked = true; break; }

It works perfectly, but I've discovered that it adds a simple "checked" to the form:
Code:

<input type="checkbox" name="Subject" value="Math" checked />

... I thought I read that checked is not proper... it the attribute should really be checked="checked" .

Is there a way to tweak this with JavaScript?

Thanks.

~Wayne

When overlay(url) is fired theAgree.href is not being updated with theURL. theURL is being passed correctly, but in IE8 and below it never updates the ID "agree" with the URL. So when you click the "agree" link it just opens a new window using what's in the href which is #.

In all other browsers the JS below will rewrite the "agree" URL with the URL that's sent to overlay(). But of course, not in IE8 and below.

Code:

function overlay(url) {
	var theURL = url;
	var theAgree = document.getElementById('agree');
	theAgree.href = theURL;
	var theOverlay = document.getElementById('overlay');
	theOverlay.style.visibility = (theOverlay.style.visibility == "visible") ? "hidden" : "visible";
}
function overlay_close() {
	var theOverlayClose = document.getElementById("overlay");
	theOverlayClose.style.visibility = "hidden";
	theOverlayClose.style.display = "none";
}

Code:

<map name="Map" id="Map">
	<area shape="rect" coords="382,1,573,237" onclick="overlay('http://site3.com'); return false;" href="#" />
	<area shape="rect" coords="192,0,383,236" onclick="overlay('http://site3.com'); return false;" href="#" />
	area shape="rect" coords="2,1,193,237" onclick="overlay('http://site3.com); return false;" href="#" />
</map>

Code:

<a name="agree" id="agree" href="#" onclick="overlay_close()" target="_blank" class="button">

Page: http://www.libertyvillesavingsbank.c...c-studio-card/

Hello, I believe this is something simple that I'm missing. I'm still fairly new to both js and php (and this may be a better question for the php forum - hopefully it makes sense though).

What I have is a js function which uses the date/time to generate a 'unique' number onLoad, and places this number in the HTML as text in a <td></td>. This works fine. I'm also doing the same thing with the value attribute of a <input type="hidden"> element, which also works fine. The problem is, when I submit my form, php refuses to echo the value (but reports no errors). Here is all the relevant code:
The HTML:
Code:

<td class='dandt' id='iquotenum' colspan='2'></td>

The Javascript:
Code:

 function loaded()
	{
	var d = new Date();
	var vqtnum = document.getElementById("quotenumber");
	var iqtnum2 = document.getElementById("iquotenum");
	var vqtdat = document.getElementById("quotedate");
	
	vqtnum.innerHTML = "" + (d.getMonth()+1) + d.getDate() + d.getFullYear() + "-" + d.getSeconds();
	iqtnum2.innerHTML = "<input type='text' name='iqtnum' id='iqtnum' value='" + (d.getMonth()+1) + d.getDate() + d.getFullYear() + "-" + d.getSeconds() + "'></input>";
	vqtdat.innerHTML = "" + (d.getMonth()+1) + "/" + d.getDate() + "/" + d.getFullYear();
	}

The PHP:
Code:

<?php
$iqtnum = $_GET['iqtnum'];
		echo "<tr><td>Quote Number: </td><td>" . $iqtnum . "</td></tr>";
?>

I've verified by using Chrome's inspect element tool that the value attribute is being set correctly by my script, and I've got a few other php echos that get the user's input from other text boxes which use the same method*, and which work fine. Also while debugging I changed the type from hidden to text so I can see it easier.

*Except that the value in this case is typed into the box, rather than generated by js.

Thanks in advance.

edit: I forgot to mention that I also have in the body tag of the HTML onLoad="loaded()".