Adding a goto URL function in a JS? Please Help!

[simplesimon10]

Hi,

Brand new to JS and this forum...

I've been struggling with this code for a few days now and almost ready to give up.

All I need to do is get the JS code to forward the user to a new page (via GoTo URL) when they click on the icon.

Any help would be most welcome!

Thx

SimpleSImon10

This is what i've got in my html:

...
<script type="text/javascript" language="javascript">var moduleBar = new ModuleBar('clipLayer');
new IconObject("Faucet",'test.png',1,false);
new IconObject("Faucet",'test.png',11,false);
new IconObject("Faucet",'test.png',22,false);
new IconObject("Faucet",'test.png',29,false);
new IconObject("Faucet",'test.png',3,false);
new IconObject("Faucet",'test.png',3,false);
new IconObject("Faucet",'test.png',3,false);
new IconObject("Faucet",'test.png',3,false);
new IconObject("Faucet",'test.png',8,false);
new IconObject("Faucet",'test.png',19,false);
new IconObject("Faucet",'test.png',85,false); _moduleBar.scrollToId(1);</script>

...

And this is the JS:

var _moduleBar = null;

function ModuleBar(parentDiv) {
// stop any other instance
if ( (_moduleBar) && (_moduleBar.modules) && (_moduleBar.haltScroll))
_moduleBar.haltScroll();

_moduleBar = this;
this.wrapperX = 0;
this.modules = new Array();
this.Ymovement = 10;
this.moduleWidth = 84;
this.moduleCount = 8;

this.speed = 110;
this.interval = 0;
this.dirMultiplier = 0;
this.currX = 0;
this.currIconIdx = 0;

this.clipTag = document.getElementById(parentDiv);
this.clipTag.style.width = this.moduleCount * this.moduleWidth;

this.contentTag = document.createElement("DIV");
this.contentTag.className = "contentLayer";
this.clipTag.appendChild(this.contentTag);

this.scroll = function(direction) {
this.maxX = this.moduleWidth * (this.modules.length - this.moduleCount);
switch (direction) {
case "left" : this.dirMultiplier = 2; break;
case "right" : this.dirMultiplier = -2; break;
}
this.lastTime = ( new Date() ).getTime();
if (!this.interval) {
this.stopping = false;
this.interval = setInterval("_moduleBar.startScroll()",1);
}
}

this.setState = function() {

this.currX <= -this.maxX ? document.getElementById("right").style.visibility = "hidden" : document.getElementById("right").style.visibility = "visible";
this.currX == 0 ? document.getElementById("left").style.visibility = "hidden" : document.getElementById("left").style.visibility = "visible";
}

this.getModuleById = function(moduleId) {
if (this.modules.length == 0) return -1;
var index = 0;
while (this.modules[index].moduleId != moduleId) index++;
return index+1;
}

this.scrollToId = function(moduleId) {
var moduleIndex = this.getModuleById(moduleId);
if (moduleIndex >= 0)
this.scrollTo(moduleIndex);
}

this.jumpTo = function(offset) {
this.currX = parseInt(offset);
this.contentTag.style.left = parseInt(offset) + "px";
this.setState();
}

this.scrollTo = function(moduleNumber) {
this.maxX = this.moduleWidth * (this.modules.length - this.moduleCount);
var inView = false;
//alert(this.maxX);
if (this.modules[moduleNumber-1].getPosition() < 0) {
var stopAt = -((moduleNumber-1) * this.moduleWidth)
this.dirMultiplier = 4
inView = true;
} else if (this.modules[moduleNumber-1].getPosition() > (this.moduleCount-1) ) {
var stopAt = (( this.moduleCount * this.moduleWidth) - (moduleNumber * this.moduleWidth));
this.dirMultiplier = -4
inView = true;
}
if (inView && !this.interval) {
this.lastTime = ( new Date() ).getTime();
this.stopping = false;
this.interval = setInterval("_moduleBar.startScroll(" + stopAt + ")",1);
}
this.modules[moduleNumber-1].setClick();
this.setState();
}

this.startScroll = function(stopAt) {
if (! (document.getElementById("right")))
{
this.haltScroll()
return;
}
if (this.delay()) this.contentTag.style.left = (this.currX += this.dirMultiplier) + "px";
this.setState();
if ((this.currX == -this.maxX) || (this.currX == 0) || ((this.currX == stopAt) || (this.stopping && -this.currX % this.moduleWidth == 0))) {
this.haltScroll()
}
}

this.delay = function() {
this.now = ( new Date() ).getTime();
var d = (this.now - this.lastTime)/100 * this.speed;
if (d > 1) {
this.lastTime = this.now;
return true;
} else return false;
}

this.stopScroll = function() {
this.stopping = true;
}

this.haltScroll = function() {
//alert("currX:" + this.currX + " | maxX: " + this.maxX);
clearInterval(this.interval);
this.interval = 0;
this.stopping = false;
}

this.goToModule = function(moduleId,noHistory) {
var moduleIndex = this.getModuleById(moduleId);
if (moduleIndex >= 0) {
this.modules[moduleIndex - 1].click(noHistory);
this.scrollTo(moduleIndex);
}
}

this.goToLastModule = function()
{
this.scrollTo(this.modules.length);
this.modules[this.modules.length-1].click();

}

this.goToFirstModule = function(noHistory)
{
this.scrollTo(1);
this.modules[0].click(noHistory);
}

this.moveNext = function()
{
for (var zm=0; zm < (this.modules.length - 1) ; zm++) {
if (this.modules[zm].currentSelected == true)
{
this.scrollTo( zm + 2 );
this.modules[zm+1].click();
return;
}
}
this.haltScroll();
tabNext();
return;
}

this.movePrev = function()
{
for (var zm=0; zm < (this.modules.length) ; zm++) {
if (this.modules[zm].currentSelected == true)
{
if (zm==0)
{
tabPrev();
return;
}
this.scrollTo( zm );
this.modules[zm-1].click();
return;
}
}
return;
}


} // End ModuleBar


function IconObject(iconTitle, iconName, moduleId, previousSelected, currentSelected, mode /* module vs bundle */) {

this.getPosition = function() {
return(_moduleBar.currX / _moduleBar.moduleWidth + this.moduleNumber);
}

this.setState = function() {
this.currentSelected ? this.txtTag.className = "scrollIconText scrollIconTextCurrent" : this.beenSelected ? this.txtTag.className = "scrollIconText scrollIconTextPrevious" : this.txtTag.className = "scrollIconText";
this.currentSelected ? this.triangleTag.style.visibility = "visible" : this.triangleTag.style.visibility = "hidden";
this.beenSelected ? this.divTag.setAttribute("src",this.iconOnName) : this.divTag.setAttribute("src",this.iconName);
this.divTag.setAttribute("alt",this.iconTitle);
}
//this.iconOnName
this.wrapperTag = document.createElement("DIV");
this.divTag = document.createElement("IMG");
this.txtTag = document.createElement("DIV");

this.divObject = this.divTag;
this.beenSelected = previousSelected ? 1 : 0;
this.currentSelected = currentSelected ? 1 : 0;

this.divTag.className = "imageElement";
this.wrapperTag.className = "wrapperElement";
// this.divTag.setAttribute("src",iconName);
this.iconTitle = iconTitle;
this.iconName = iconName.substr(0,iconName.lastIndexOf('.')) + '_off' + iconName.slice(iconName.lastIndexOf('.'));
this.iconOnName = iconName.substr(0,iconName.lastIndexOf('.')) + '_on' + iconName.slice(iconName.lastIndexOf('.'));

this.mode = mode ? mode : "module";


this.triangleTag = document.createElement("IMG");
this.triangleTag.setAttribute("src","pointer.gif");
this.triangleTag.className = "triangle";
//this.triangleTag.appendChild(document.createTextNode("<!-- -->"));




this.wrapperTag.style.left = _moduleBar.wrapperX;
this.wrapperTag.style.width = _moduleBar.moduleWidth;
_moduleBar.wrapperX += _moduleBar.moduleWidth;

this.txtTag.appendChild(document.createTextNode(iconTitle));
this.setState();

this.wrapperTag["onmouseover"] = new Function("_moduleBar.modules[" + _moduleBar.modules.length + "].raise()");
this.wrapperTag["onmouseout"] = new Function("_moduleBar.modules[" + _moduleBar.modules.length + "].lower()");
this.wrapperTag["onclick"] = new Function("_moduleBar.modules[" + _moduleBar.modules.length + "].click()");

this.wrapperTag.appendChild(this.divTag);
this.wrapperTag.appendChild(this.triangleTag);
this.wrapperTag.appendChild(this.txtTag);
_moduleBar.contentTag.appendChild(this.wrapperTag);

this.divTag.style.top = _moduleBar.Ymovement+"px";
this.currY = this.minY = this.range = _moduleBar.Ymovement;

this.moduleId = moduleId
this.interval = 0;
this.maxY = this.minY - this.range;
this.moduleNumber = _moduleBar.modules.length;
_moduleBar.modules[this.moduleNumber] = this;
if (this.currentSelected)
_moduleBar.currIconIdx = this.moduleNumber;


this.raise = function() {
this.currentSelected ? this.txtTag.className = "scrollIconText scrollIconTextCurrent" : this.txtTag.className = "scrollIconTextHover scrollIconText" ;
if (this.interval != 0) {
this.stopMotion();
}
this.direction=-1;
this.interval = setInterval("_moduleBar.modules[" + this.moduleNumber + "].startMotion()",1);
}

this.lower = function() {
this.currentSelected ? this.txtTag.className = "scrollIconText scrollIconTextCurrent" : this.beenSelected ? this.txtTag.className = "scrollIconText scrollIconTextPrevious" : this.txtTag.className = "scrollIconText";
if (this.interval != 0) {
this.stopMotion();
}
this.direction=1
this.interval = setInterval("_moduleBar.modules[" + this.moduleNumber + "].startMotion()",1);
}

this.setClick = function() {
_moduleBar.currIconIdx = this.moduleNumber;
this.beenSelected = 1;
for (i=0; i<_moduleBar.modules.length ; i++) {
(i == this.moduleNumber) ? _moduleBar.modules.currentSelected = true : _moduleBar.modules.currentSelected = false;
_moduleBar.modules.setState();
}
}

this.click = function(noHistory) {
if (this.mode == "bundle")
onBundleGroupChange(this.moduleId, noHistory); // this function in config_icon.js
else
onModuleChange(this.moduleId, noHistory); // this function in config_icon.js
showHidePreviousBtn(this.moduleNumber);
this.setClick();
}

this.startMotion = function() {
if ((this.currY + this.direction >= this.maxY ) && (this.currY + this.direction <= this.minY)) {
this.currY += this.direction;
this.divObject.style.top = this.currY + "px";
} else {
this.stopMotion();
}
}

this.stopMotion = function() {
clearInterval(this.interval);
this.interval = 0;
}

} //End IconObject

 

[vicvirk]

To redirect the user to a new url via a button click:

<input type="button" name="btn" id="btn" value="go" onclick="window.location.href='[URL unfurl="true"]http://www.newlocation...';"[/URL] />

Also, please wrap your code within CODE TGML tags so it looks like above - makes it easier to read.

http://www.tipmaster.com/includes/tgmlinfo.cfm?w=450&h=450

--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest:

http://www.google.com/webhp?complete=1&hl=en

--------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc

 

[simplesimon10]

thx for the reply vicvirk! I tried to encapsulate it but don't think I can edit it at this point. Sorry.

re. your reply, my understanding is that the URL needs to be passed from the html to the JS and then the "goto URL" executed from the JS itself.

(i.e. i'm not looking to add a button...)

I'm very much a beginner so I could be completely off on this point...

Simon

 

[Diancecht]

I think a description of the problem is better than a book of code.

Where is the URL coming from? Textbox, hidden field, user input, ...

Cheers,
Dian

 

[simplesimon10]

Each line in the html provided passes a set of values: name of object, scr of image file and 2 others (their purposes which I'm too not sure about) to the JS file.

I this point there is NO url link referenced in the code as the JS uses the 'on click' event to display information pertinent to the icon clicked right on the same page.

...
this.wrapperTag["onmouseover"] = new Function("_moduleBar.modules[" + _moduleBar.modules.length + "].raise()");
this.wrapperTag["onmouseout"] = new Function("_moduleBar.modules[" + _moduleBar.modules.length + "].lower()");
this.wrapperTag["onclick"] = new Function("_moduleBar.modules[" + _moduleBar.modules.length + "].click()");
...

Also, right now each html line has the name "faucet" in it. These would all be different.

My goal is to adjust the code to pass a new value (url) from the html to the JS and when the object is clicked, link to a new web page specific to that object.

Does this make any sense?