Interesting Javascript Challenge

smartydebater · 02-27-2006, 05:41 PM

I need some help with some javascript programming. Here's the challenge:

I need a site that will allow you to check a box and then immediately (not instantly but on the same page) update a scrolling div of coding. Here's an example:
I'd have an image with a check box next to it. If the visitor checked the box, then in the coding text box it would have text pop-up sayying <img src"..."> and so on. And I would need the script to be able to do mulitple things like that. Basically I want the visitor to check a box and then on the same page generate the coding. I don't need it to make a whole site, just a few snippets of coding. Any ideas on how I could do this?

I'm okay at javascript programming, but I'm a bit lost as to where I should start with this one. Is what I want possible?

smartydebater · 02-27-2006, 05:53 PM

Also, if the person checked muiltiple items, I think I could use an array that would tell the browser how many
's to add if any. I'm I on the right track?"

SkyHi · 02-28-2006, 03:59 PM

Have you done anything with mouseover? (Where you put your mouse over some text or a picture and it changes?) It would be something of the same type.

-Steve

office politics · 02-28-2006, 05:23 PM

add all the imgs checkboxes and divs. based on which checkbox is selected set their visibility to hidden or visibile

the following code has divs with report names inside them. based on which report the user selects, it either shows or hides the User textbox

Code:

// SHOW / HIDE USER INPUTS
function select() {
//alert(document.values.description.selectedIndex);
var desc = "<%= Request.querystring("description") %>";
if (desc == "faxes_sent")
{
document.getElementById("userid1").style.visibility = "visible";
document.getElementById("userid2").style.visibility = "visible";
}
else if (desc == "md_nb_count")
{
document.getElementById("userid1").style.visibility = "hidden";
document.getElementById("userid2").style.visibility = "hidden";
}
}

Code:

<tr>
  <td rowspan=5>
<div id=faxes_sent onmouseover=highlight("faxes_sent") onmouseout=highlight("faxes_sent") style="background-color:#ffffcc"
                onclick=window.location="<%= request.servervariables("URL") %>?description=faxes_sent">Faxes Sent</div>

                <div id=md_nb_count onmouseover=highlight("md_nb_count") onmouseout=highlight("md_nb_count") style="background-color:#ffffcc"
                onclick=window.location="<%= request.servervariables("URL") %>?description=md_nb_count">MD NB Count</div>

  </td>
</tr>

<tr>
  <td rowspan=5>&nbsp&nbsp</td>
</tr>

<tr>
  <td><div id="start1" STYLE="visibility:visible">Start Date</div></td>
  <td><div id="start2" STYLE="visibility:visible"><input type="text" size=10 maxlength=8 name=start value=
  <%= request.querystring("start") %>></div></td>
  <td><div id="start3" STYLE="visibility:visible">YYYYMMDD</div></td>
</tr></div>

<tr>
  <td><div id="end1" STYLE="visibility:visible">End Date</div></td>
  <td><div id="end2" STYLE="visibility:visible"><input type="text" size=10 maxlength=8 name=end value=
  <%= request.querystring("end") %>></div></td>
  <td><div id="end3" STYLE="visibility:visible">YYYYMMDD</div></td>
</tr></div>


<tr>
  <td><div id="userid1" STYLE="visibility:visible">Userid</div></td>
  <td><div id="userid2" STYLE="visibility:visible">
      <% query = "select loginname from irsysusers where isgroup = 0 and status = 12 order by loginname"
         srs.open query, sconn
         if srs.eof then 
           response.write "NO USERS FOUND IN DATABASE, CONTACT SYSTEMS DEPT"
         else 
           response.write "<select name=user><OPTION VALUE=PICK>PICK USER</OPTION><option value=NULL>UNASSIGNED</OPTION>"
           do until srs.eof 
             response.write "<option>" & srs.fields("loginname") & "</option>" 
             srs.movenext 
           loop
           response.write "</select>" 
         end if %>
  </td></div>
</tr>

edit - hmmm, this example is a asp script. the select function is run onload. clicking the div redirects the page to ?description=*whatever*. based on which description is found, the select function shows/hides the divs.

Code:

<body onload="WindowLoad();document.values.start.focus();select();">

Member Login