[SOLVED] HTML button to JS Function

mark110384 · September 16, 2008

Would anyone know how to write the following html link as a JS function. I'm hoping to reference in a flash button. Thanks.

<a href="#" id="contentlink" rel="subcontent2">Search Box</a>

KevinM1 · September 16, 2008

Would anyone know how to write the following html link as a JS function. I'm hoping to reference in a flash button. Thanks.
<a href="#" id="contentlink" rel="subcontent2">Search Box</a>

That's a bit vague. Do you mean something like the following?

<script type="text/javascript">
   window.onload = function()
   {
      var contentLink = document.getElementById('contentlink');

      contentLink.onclick = function()
      {
         //do button-y stuff here
      }
   }
</script>

.
.
.

<a href="#" id="contentlink" rel="subcontent2">Search Box</a>

mark110384 · September 16, 2008

Sorry but what do you mean by button-y? It essentially opens up a dropdown DIV, I just need to make a function that can be refrenced via a Flash button. Thanks.

KevinM1 · September 16, 2008

Sorry but what do you mean by button-y? It essentially opens up a dropdown DIV, I just need to make a function that can be refrenced via a Flash button. Thanks.

'Button-y' would be whatever it is you want this function to do when the button/link is clicked. Is this dropdown div supposed to open/close when the button is clicked?

mark110384 · September 16, 2008

It opens the the Dropdown, on the orginal button I had this in body

dropdowncontent.init("contentlink", "left-bottom", 300, "click")

I have this now, but it still doesn't seem to work.

function openlink() {

   window.onload = function()
   {
      var contentLink = document.getElementById('contentlink');

      contentLink.onclick = function()
      {
      
  dropdowncontent.init("contentlink", "left-bottom", 300, "click");

      }
   }


</script>

KevinM1 · September 16, 2008

It opens the the Dropdown, on the orginal button I had this in body

dropdowncontent.init("contentlink", "left-bottom", 300, "click")

I have this now, but it still doesn't seem to work.

function openlink() {

   window.onload = function()
   {
      var contentLink = document.getElementById('contentlink');

      contentLink.onclick = function()
      {
      
  dropdowncontent.init("contentlink", "left-bottom", 300, "click");

      }
   }


</script>

It doesn't work because you're blindly cutting and pasting what I wrote into your code in the hopes that shoehorning it in will work.

You should post all of the relevant code pertaining to your problem. My original answer was based on a vague question, not on a particular, concrete problem, which is why it doesn't work out of the box.

So, I'll need to see the markup of this button/link, the markup of this div, what 'dropdowncontent' is supposed to represent (I'm assuming the div in question), and anything else remotely relevant to the problem.

mark110384 · September 16, 2008

Ok this what I've got, this it the main bulk of the coding. I have placed the actionscript on the button at the bottom.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="dropdowncontent.js"></script>


<script type="text/javascript">
function tabview_aux(TabViewId, id)
{
  var TabView = document.getElementById(TabViewId);

  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

  var Tab = Tabs.firstChild;
  var i   = 0;

  do
  {
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
  }
  while (Tab = Tab.nextSibling);

  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;

  var Page = Pages.firstChild;
  var i    = 0;

  do
  {
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Page = Page.nextSibling);
}

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
</script>

<script type="text/javascript">

function openlink() {

   //window.onload = function()
   //{
      //var contentLink = document.getElementById('contentlink');

     // contentLink.onclick = function()
     // {
      
  dropdowncontent.init("contentlink", "left-bottom", 300, "click")

      }
  //}


</script>



<style type="text/css">
div.TabView div.Tabs
{
    height: 24px;
    overflow: hidden;
}

div.TabView div.Tabs a
{
    float: left;
    display: block;
    width:  110px;
    text-align: center;
    height: 24px;
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid black;
    border-bottom-width: 0;
    text-decoration: none;
    font-family: Lucida Sans, Arial;
    font-weight: 900;
    color: #999999;
background-color: #cccccc;
}

div.TabView div.Tabs a:hover, 

{
    background-color: #63A5E1;
color: white;
}


div.TabView div.Tabs a.Active
{
    background-color: #ffffff;
color: black;
}

div.TabView div.Pages
{
    clear: both;
    border: 1px solid #404040;
    overflow: hidden;
}

div.TabView div.Pages div.Page
{
    height: 100%;
    padding: 0px;
    overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad
{
    padding: 3px 5px;
}
</style>


</head>

<body>



<p align="right" style="margin-top: 400px">


<object>
      <param name='wmode' value='transparent'/>
      <embed src="testbutton1.swf"wmode='transparent' width='800' height='105' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?p1_prod_version=shockwaveflash'> 
      </embed> </object></p>




<!--Original Button
<!--p align="right" style="margin-top: 200px"><a href="#" id="contentlink" rel="subcontent2">Search Box</a> </p>-->


<DIV id="subcontent2" style="position:absolute; visibility: hidden; border: 2px solid black; background-color: lightyellow; width: 25%; height: 120px; padding: 4px;">

<div class="TabView" id="TabView">
    <div class="Tabs" style="width: 100%;"> <a>Charts</a> <a>Publications</a> </div>
    <div class="Pages" style="width: 100%; height: 120px;">
      <div class="Page">
        <div class="Pad"><form action="chart_search.php" method="post">
          <table border="0">
<tr>
<td width = "80%"><input type="text" name="chart_search" size="25"/></td>
<td><input type="submit" name="search" value="Search"/></td>
</tr>
<tr>
<td><a href="browserpage.html">Browse</a></td>
<td> </td></table></form>
<div align="right"><a href="javascript:dropdowncontent.hidediv('subcontent2')">Close</a></div>
        </div>
      </div>
      <div class="Page">
        <div class="Pad">
          <form action="publication_search.php" method="post">
          <table border="0">
<tr>
<td width = "80%"><input type="text" name="publication_search" size="25"/></td>
<td><input type="submit" name="search" value="Search"/></td>
</tr>
<tr>
<td>Browse</td>
<td> </td></tr></table></form>
<div align="right"><a href="javascript:dropdowncontent.hidediv('subcontent2')">Close</a></div>
        </div>
      </div>


      </div>
    </div>
  </div>



</DIV>

<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:
dropdowncontent.init("contentlink", "left-bottom", 300, "click")

</script>



<script type="text/javascript">
    tabview_initialize('TabView');
</script>

</body>
</html>

ActionScript

on (release) 
{

getURL("javascript:openlink({ href: '#', rel: 'subcontent2'});");

}

Thanks again

KevinM1 · September 16, 2008

Hmm...I'm not sure if JavaScript will be able to get a hold of the flash button, as there's no markup within the HTML that represents that button. I could link the function to the entire embedded object, but that's most certainly not what you're looking for.

I've never played around with Actionscript, but I hear it's based on ECMAScript, just like JavaScript. Is there a way for Actionscript to write JavaScript dynamically? Or to interact with already existing HTML markup? Because in order for what you want to work, either the guts of the .swf - in particular, the button - need to be exposed to JavaScript, or Actionscript must do the heavy lifting and toggle the div itself.

mark110384 · September 16, 2008

To be honest I don't know an awful lot about actionscript, just enough to get me by at the moment. How would you link the function to the entire embedded object?

KevinM1 · September 16, 2008

To be honest I don't know an awful lot about actionscript, just enough to get me by at the moment. How would you link the function to the entire embedded object?

Well, first you need to get a hold of the object:

var myEmbeddedObject = document.getElementsByTagName('embed')[0]; //may need to replace embed with object

Then you attach a callback function to its onclick event handler. I tend to use anonymous (read: nameless) functions to do this as it's quick and easy:

myEmbeddedObject.onclick = function() // <-- see?  no name for the function
{
   dropdowncontent.init("contentlink", "left-bottom", 300, "click")
}

As an aside, do you know if any of your JavaScript is working? I ask because I think it may not work as is. As you noticed in my first response, I had something along the lines of:

<script type="text/javascript">
   window.onload = function()
   {
      //stuff
   }
</script>

I do this because JavaScript has a tendency to attempt creating/linking functions before the elements they reference are rendered by the browser. It's a common error that virtually every JavaScript beginner makes, and is the cause of many headaches ("What do you mean my div has no properties?? It's right there!").

Also, as a general tip, you should strive for a completely unobtrusive style. This means completely separating your JavaScript from your markup. You're almost there right now, but you should replace things like:

<div align="right"><a href="javascript:dropdowncontent.hidediv('subcontent2')">Close</a></div>

With:

var rightDiv = document.getElementById('rightDiv');

rightDiv.onclick = function()
{
   dropdownconent.hidediv('subcontent2');
}
.
.
.
<div align="right"><a id="rightDiv" href="#">Close</a></div>

It's a bit more work up front, but it makes it far easier to edit, modify, and maintain code as everything is centralized (all script code in one place, all markup in another). This centralization would allow you to put the script in an external file, usable by other pages, too. Just an idea if you continue down the JavaScript path. Unobtrusive JavaScript is widely considered best practice, and is the 'professional' way of doing things.

mark110384 · September 17, 2008

Ahh too much of a headache I've just put in a HTML link instead of going down the Flash route. Thanks anyway Nightslyr.

Sign In

[SOLVED] HTML button to JS Function

Recommended Posts

mark110384

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

mark110384

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

mark110384

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

mark110384

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

mark110384

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

mark110384

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information