tags:

views:

85

answers:

1
Q: 

How to remove stored values from a function in Javascript?

Unfortunately I can't provide a link, but I can provide the majority of the code. I understand I am not particularly performing these functions the proper way, but that is my question. This code is simply to dynamically add divs that highlight a section of an image as a reference to a select box they hover. Furthermore, on page load, based on a certain id declared in the url, hash or get method, is how I place those divs on select box hover.

The confusing part, is on certain select box values, the positions of the hover divs needs to change from the values declared at page load. Currently, every click on the select box, adds another highlight div that shows up on hover (1st click shows 1, second shows 2 of the exact same div, etc.). Is there a way to clear the divs and only show the one that is current based on the select box selection? Or, do I need to rewrite these functions to better accomodate what I'm trying to do? If so, any suggestions?

I'm new to the whole js language, hence the jquery :)

HTML:

    <div id="sidebar">
      <div>
        <h3>CAPACITY (lbs)</h3>
        <select name="00N70000002N5wF" id="icapacity" alt="capacity">
          <option value="">Select Capacity</option>
        </select>
        <div class="tooltip"></div>
        <div class="clear"></div>
      </div>
      <div>
        <h3>HEIGHT UNDER BOOM (feet)</h3>
        <select name="00N70000002N5wi" id="ihub" alt="hub" disabled="true">
          <option value="">&nbsp;</option>
        </select>
        <div class="tooltip"></div>
      </div>
      <div>
        <h3>SPAN (feet)</h3>
        <select name="00N70000002N5wO" id="ispan" alt="span" disabled="true">
          <option value="">&nbsp;</option>
        </select>
        <div class="tooltip"></div>
      </div>
      <div>
        <h3>CEILING HEIGHT (feet)</h3>
        <input id="ich" class="optional" type="text" name="00N70000002N5wn" alt="ch" />
      </div>
    </div> <!-- div#sidebar -->

    <div id="jib">
      <img src="img/rfq/jib<?php echo $product->id; ?>L.png" alt="<?php echo $product->name; ?>" />
      <img id="jibhoist" src="img/rfq/jib<?php echo $product->id; ?>LH.png" alt="<?php echo $product->name; ?>" />
      <div id="capacity" class="text"></div>
      <div id="span" class="text"></div>
      <div id="hub" class="text"></div>
      <div id="ch" class="text"><table><tr><td></td></tr></table></div>
    </div> <!-- div#jib -->

JAVASCRIPT:

// Function for keyup text placement

function textPlacement(ttop, tleft, item) {
  switch (item) {
  case "capacity":
 var iitem = $('#icapacity');
 var jitem = $('#jib #capacity');
 jitem.css({top: ttop, left: tleft});
 break;
  case "span":
 var iitem = $('#ispan');
 var jitem = $('#jib #span');
 jitem.css({top: ttop, left: tleft});
 break;
  case "hub":
 var iitem = $('#ihub');
 var jitem = $('#jib #hub');
 jitem.css({top: ttop, left: tleft});
 break;
  case "ch":
 var iitem = $('#ich');
 var jitem = $('#jib #ch');
 jitem.css({top: ttop, left: tleft});
 break;
  }

// Configuration input onchange values

iitem.click(function() {
var w = $(this).val();

if($(this).attr('id') == "icapacity") {
 jitem.html(addCommas(w));
} else if($(this).attr('id') == "ich") {

} else {
 jitem.html(w+" feet");
}

//Insert AJAX SPAN selection here
if($(this).attr('id') == "icapacity") {
$.get("rfqprocess.php?capacity="+$(this).val()+"&id="+getURLVar("id"), function(data) {
 $('#ihub option').remove();
 $('#ispan option').remove();
 $('#ch td').html("Overall <br />Height");
 $('#ihub').prepend(data);
});
}

$('#icapacity').change(function() {
if($('#icapacity').val() != "") {
 $('#ihub').removeAttr('disabled');
} else {
 $('#ihub').attr('disabled', true);
 $('#ispan').attr('disabled', true);
}
});

if($(this).attr('id') == "ihub") {
$.get("rfqprocess.php?capacity="+$('#icapacity').val()+"&hub="+$(this).val()+"&id="+getURLVar("id"), function(data) {
 $('#ispan option').remove();
 $('#ch td').html("Overall <br />Height");
 $('#ispan').prepend(data);
 if($("#ihub").val() > 15) {
  $("#jib img").hide();
  $("#jib").prepend("<img alt=\"Foundationless Jib Crane\" src=\"img/rfq/jib1L.png\" />");
  parent.location.hash = "1";
 } else {
  $("#jib img").hide();
  $("#jib").prepend("<img alt=\"Foundationless Jib Crane\" src=\"img/rfq/jib12L.png\" />");
  parent.location.hash = "12";
 }
});
}


$('#ihub').change(function() {
if($('#ihub').val() != "") {
 $('#ispan').removeAttr('disabled');
} else {
 $('#ispan').attr('disabled', true);
}
});

if($(this).attr('id') == "ispan") {
$.get("rfqprocess.php?capacity="+$('#icapacity').val()+"&hub="+$('#ihub').val()+"&span="+$(this).val()+"&id="+getURLVar("id"), function(data) {
 $('#ch td').html("Overall <br />Height");
 $('#ch td').html(data);
 if(data == "") {
   $('#ch td').html("N/A");
 }
});
}

}); 

}

// Highlight Function

function highlight(iwidth, iheight, itop, ileft, iimage, item) {    
  switch (item) {
case "capacity":
 hitem = $('#icapacity');
 break;
case "span":
 hitem = $('#ispan');
 break;
case "hub":
 hitem = $('#ihub');
 break;
case "ch":
 hitem = $('#ich');
 break;
}

hitem.hover(function() {



if(item == "capacity") {
$('#jib').append("<div class='highlight'></div>");

$('.highlight').css({
 backgroundImage: 'url('+iimage+')',
 width: iwidth,
 height: iheight,
 top: itop,
 left: ileft
});
} else {
  $('#jib').append("<div class='highlight'><div></div><span></span></div>");

  $('.highlight').css({
 width: iwidth,
 height: iheight,
 top: itop,
 left: ileft
  });

  $('.highlight div').css({
 width: iwidth,
 height: iheight
  });

  $('.highlight span').css({
 width: iwidth,
 height: iheight,
 backgroundImage: 'url('+iimage+')'
  });
}

if(isIE6) {
var i = $($(this).attr('alt').val());
alert(i);
} else {
var i = $(this).attr("alt");
}

$('#'+i+'').css("display", "none");
}, function() {
var i = $(this).attr("id").substring(1);
$('div.highlight').remove();
$('#'+i+'').css("display", "block");
}); // End hover function

} // End highlight function

// Text Placement Declarations

var sstring = getURLVar("id");
$('#sidebar select').click(function() {
if(parent.location.hash) {
 var sstring = parent.location.hash;
 sstring = sstring.substr(1);
}

if(sstring == "12") {
highlight('96px', '97px', '335px', '373px', 'img/rfq/highlight_capacity.png', 'capacity');
highlight('336px', '27px', '15px', '125px', 'img/rfq/highlight_span.png', 'span');
highlight('27px', '331px', '92px', '271px', 'img/rfq/highlight_hub.png', 'hub');
//highlight('27px', '403px', '18px', '46px', 'img/rfq/highlight_ch.png', 'ch');
textPlacement('397px', '321px', 'capacity');
textPlacement('22px', '193px', 'span');
textPlacement('251px', '186px', 'hub');
textPlacement('167px', '-39px', 'ch');
} else if(sstring == "1") {
console.log(sstring);
highlight('96px', '97px', '335px', '374px', 'img/rfq/highlight_capacity.png', 'capacity');
highlight('325px', '27px', '16px', '137px', 'img/rfq/highlight_span.png', 'span');
highlight('27px', '318px', '103px', '278px', 'img/rfq/highlight_hub.png', 'hub');
//highlight('27px', '403px', '18px', '46px', 'img/rfq/highlight_ch.png', 'ch');
textPlacement('397px', '321px', 'capacity');
textPlacement('23px', '200px', 'span');
textPlacement('257px', '192px', 'hub');
textPlacement('183px', '-39px', 'ch');
}
});

switch (sstring) {
case "1":
highlight('96px', '97px', '335px', '374px', 'img/rfq/highlight_capacity.png', 'capacity');
highlight('325px', '27px', '16px', '137px', 'img/rfq/highlight_span.png', 'span');
highlight('27px', '318px', '103px', '278px', 'img/rfq/highlight_hub.png', 'hub');
//highlight('27px', '403px', '18px', '46px', 'img/rfq/highlight_ch.png', 'ch');
textPlacement('397px', '321px', 'capacity');
textPlacement('23px', '200px', 'span');
textPlacement('257px', '192px', 'hub');
textPlacement('183px', '-39px', 'ch');
break;
case "2":
highlight('96px', '97px', '335px', '373px', 'img/rfq/highlight_capacity.png', 'capacity');
highlight('336px', '27px', '15px', '125px', 'img/rfq/highlight_span.png', 'span');
highlight('27px', '331px', '92px', '271px', 'img/rfq/highlight_hub.png', 'hub');
//highlight('27px', '403px', '18px', '46px', 'img/rfq/highlight_ch.png', 'ch');
textPlacement('397px', '321px', 'capacity');
textPlacement('22px', '193px', 'span');
textPlacement('251px', '186px', 'hub');
textPlacement('168px', '-39px', 'ch');
break;
case "3":
highlight('96px', '97px', '335px', '373px', 'img/rfq/highlight_capacity.png', 'capacity');
highlight('280px', '27px', '20px', '129px', 'img/rfq/highlight_span.png', 'span');
highlight('27px', '318px', '105px', '320px', 'img/rfq/highlight_hub.png', 'hub');
highlight('27px', '403px', '18px', '46px', 'img/rfq/highlight_ch.png', 'ch');
textPlacement('397px', '321px', 'capacity');
textPlacement('26px', '170px', 'span');
textPlacement('251px', '233px', 'hub');
textPlacement('209px', '-39px', 'ch');
break;
case "4":
highlight('96px', '97px', '335px', '373px', 'img/rfq/highlight_capacity.png', 'capacity');
highlight('336px', '27px', '205px', '124px', 'img/rfq/highlight_span.png', 'span');
highlight('27px', '339px', '84px', '195px', 'img/rfq/highlight_hub.png', 'hub');
highlight('27px', '403px', '18px', '46px', 'img/rfq/highlight_ch.png', 'ch');
textPlacement('397px', '321px', 'capacity');
textPlacement('211px', '199px', 'span');
textPlacement('247px', '111px', 'hub');
textPlacement('209px', '-39px', 'ch');
break;
case "5":
highlight('96px', '97px', '335px', '373px', 'img/rfq/highlight_capacity.png', 'capacity');
highlight('406px', '27px', '16px', '35px', 'img/rfq/highlight_span.png', 'span');
highlight('27px', '204px', '216px', '135px', 'img/rfq/highlight_hub.png', 'hub');
textPlacement('397px', '321px', 'capacity');
textPlacement('22px', '139px', 'span');
textPlacement('310px', '49px', 'hub');
$('#ich').parent().remove();
$('#rotation').parent().remove();
$('#motorized').parent().remove();
$('#tab').parent().remove();
$('#ch').remove();
break;
case "6":
highlight('96px', '97px', '335px', '373px', 'img/rfq/highlight_capacity.png', 'capacity');
highlight('431px', '27px', '27px', '21px', 'img/rfq/highlight_span.png', 'span');
highlight('27px', '252px', '169px', '135px', 'img/rfq/highlight_hub.png', 'hub');
textPlacement('397px', '321px', 'capacity');
textPlacement('34px', '138px', 'span');
textPlacement('288px', '50px', 'hub');
$('#ich').parent().remove();
$('#rfq_con').prev('div').remove();
$('#rfq_con').prev('h2').remove();
$('#rfq_con').remove();
$('#ch').remove();
break;
case "7":
highlight('96px', '97px', '335px', '373px', 'img/rfq/highlight_capacity.png', 'capacity');
highlight('358px', '27px', '25px', '33px', 'img/rfq/highlight_span.png', 'span');
highlight('27px', '300px', '121px', '210px', 'img/rfq/highlight_hub.png', 'hub');
textPlacement('397px', '321px', 'capacity');
textPlacement('31px', '112px', 'span');
textPlacement('264px', '124px', 'hub');
$('#ich').parent().remove();
$('#motorized').parent().remove();
$('#tab').parent().remove();
$('#ch').remove();
break;
case "8":
highlight('96px', '97px', '335px', '373px', 'img/rfq/highlight_capacity.png', 'capacity');
highlight('392px', '27px', '24px', '22px', 'img/rfq/highlight_span.png', 'span');
highlight('27px', '304px', '117px', '212px', 'img/rfq/highlight_hub.png', 'hub');
textPlacement('397px', '321px', 'capacity');
textPlacement('30px', '122px', 'span');
textPlacement('262px', '127px', 'hub');
$('#ich').parent().remove();
$('#motorized').parent().remove();
$('#tab').parent().remove();
$('#ch').remove();
break;
case "9":
highlight('96px', '97px', '335px', '373px', 'img/rfq/highlight_capacity.png', 'capacity');
highlight('333px', '27px', '24px', '26px', 'img/rfq/highlight_span.png', 'span');
highlight('27px', '298px', '121px', '253px', 'img/rfq/highlight_hub.png', 'hub');
textPlacement('397px', '321px', 'capacity');
textPlacement('30px', '94px', 'span');
textPlacement('262px', '166px', 'hub');
$('#ich').parent().remove();
$('#tagline').parent().remove();
$('#motorized').parent().remove();
$('#tab').parent().remove();
$('#ch').remove();
break;
case "10":
highlight('96px', '97px', '335px', '373px', 'img/rfq/highlight_capacity.png', 'capacity');
highlight('297px', '27px', '20px', '82px', 'img/rfq/highlight_span.png', 'span');
highlight('27px', '309px', '110px', '280px', 'img/rfq/highlight_hub.png', 'hub');
textPlacement('397px', '321px', 'capacity');
textPlacement('27px', '130px', 'span');
textPlacement('257px', '194px', 'hub');
$('#ich').parent().remove();
$('#rfq_con').prev('div').remove();
$('#rfq_con').prev('h2').remove();
$('#rfq_con').remove();
$('#ch').remove();
break;
case "11":
highlight('96px', '97px', '335px', '374px', 'img/rfq/highlight_capacity.png', 'capacity');
highlight('286px', '27px', '14px', '176px', 'img/rfq/highlight_span.png', 'span');
highlight('27px', '315px', '104px', '329px', 'img/rfq/highlight_hub.png', 'hub');
highlight('27px', '403px', '18px', '46px', 'img/rfq/highlight_ch.png', 'ch');
textPlacement('397px', '321px', 'capacity');
textPlacement('22px', '218px', 'span');
textPlacement('253px', '243px', 'hub');
textPlacement('209px', '-39px', 'ch');
break;
case "12":
highlight('96px', '97px', '335px', '373px', 'img/rfq/highlight_capacity.png', 'capacity');
highlight('336px', '27px', '15px', '125px', 'img/rfq/highlight_span.png', 'span');
highlight('27px', '331px', '92px', '271px', 'img/rfq/highlight_hub.png', 'hub');
//highlight('27px', '403px', '18px', '46px', 'img/rfq/highlight_ch.png', 'ch');
textPlacement('397px', '321px', 'capacity');
textPlacement('22px', '193px', 'span');
textPlacement('251px', '186px', 'hub');
textPlacement('167px', '-39px', 'ch');
break;
}
A: 

In your highlight code:

hitem.hover(function() {
  // add this line
  $(".highlight").remove();
Andy Gaskell  2009-08-17 16:44:46
That works somewhat, but it appears the functions run as many times as you have clicked. For example, 1st click it runs once, 2nd click it runs 2 more times, 3rd click it runs 3 more times...etc. Which, in turn creates a flashing screen prob and lag the more you click. I'm gussing I need to restructure my functions and calls. Any other suggestions?
john  2009-08-17 17:51:21

related questions

What JavaScript patterns do you use most?
Javascript events
What style do you use for creating an "class" in JavaScript?
Graphing JavaScript Library
What's the difference in closure style
Getting the text from a drop-down box
How to specify javascript to run when ModalPopupExtender is shown
Length of Javascript Associative Array
How Do I Post and then redirect to an external URL from ASP.Net?
How to set up a CSS switcher in ASP.NET
Wrapping lists into columns
Javascript keyboard events primer? (or rather: help me with my custom dropdown)
Http Auth in a Firefox 3 bookmarklet
Best Debugging Tools for JavaScript/xulrunner Development
How can I turn a string of HTML into a DOM object in a Firefox extension?
Call ASP.NET Function From Javascript?
Javascript troubleshooting tools in IE
MAC addresses in JavaScript
Capturing TAB key in text box
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?
ASP .Net Custom Client-Side Validation
What JavaScript library would you choose for a new project and why?
Detecting font in JavaScript