[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 261
  • Last Modified:

Trying to add a FW MX created button to an ASP.NET created user control....

Hey all!  I need to add a search button that is next to an input box that when clicked, will search for whatever the user entered.  I am trying to get the button so it isnt static but rather will have a subtle glow when the user hovers over it and then has a down state when the user clicks on it.  The search works fine for now with the button that is there buti have been trying to modify it so that the button performs as i would like.  So far no luck.

I have tried taking the code from the html page FW generates for you when you export it and adding it to the .ascx page where (i think) it should be but it hasnt worked thus far.  I dont want it to screw up the form event either...  Thanks!

also the button looks kinda crappy when i export it.  what is causing this?  cheers!
0
TheRookie32
Asked:
TheRookie32
  • 6
  • 5
1 Solution
 
Havin_itCommented:
Hi,

There are a couple of approaches to the problem you've described. Some of this is guesswork, because you're describing it in quite visual terms when what would help us more is if you show us the code you currently have.

Regular form buttons can be given some of the behaviour you want through CSS, using the <classname>:hover and <classname>:active pseudo-classes to equate to the 'Over' and 'Down' states of buttons created in Fireworks. Bear in mind though that browser support of these is patchy.

Can you tell us about what actually happens when the search button is clicked? Are the results rendered dynamically within a frame or other element on the existing page, or does it take you to a whole new page? (If so, then there's not much point in a Down state...)

It would be best if you can show us some code.
0
 
TheRookie32Author Commented:
When the search button is clicked, it makes a search of the database and if there are any matches it will show them on a new page.  (goes from the home page or whatever page the user is on as the search bar is in a user control (header) and goes to the search results page.)

Heres some code from the header page where id like the image to be:

(this is at the top)
--%><script type="text/javascript" src="SearchButton.js"></script>
<linkhref="TelevantageWeb.css" rel="stylesheet" type="text/css">
<body onLoad="MM_preloadImages('images/arrowbutton_r2_c2_f2.gif','images/arrowbutton_r2_c2_f4.gif','images/arrowbutton_r2_c2_f3.gif');">

(and this is the code from in the td where the search code is going on...)

<td background="images/h_SearchBar.jpg" height="35"><table width="300" border="0" align="right" cellpadding="0" cellspacing="0">
                                                <form method="post" action="SearchResults.aspx" id="frmSearch" name="frmSearch">
                                                      <TBODY>
                                                            <tr>
                                                                  <td width="208" valign="middle">Search:
                                                              <input type="text" name="txtSearch" ID="txtSearch" SIZE="20"><td width="92"><a href="#" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','arrowbutton_r2_c2','images/arrowbutton_r2_c2_f2.gif','images/arrowbutton_r2_c2_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','arrowbutton_r2_c2','images/arrowbutton_r2_c2_f3.gif',1);"><INPUT id="image1" type="image" src="images/arrowbutton.jpg" align="bottom" border="0"
                                                                              name="image1"></a>
                                                              </td>
                                                            </tr>
                                                </form>
                                          </table>
                                    </td>

I got a lot of it from the code fireworks generates for you when you export a button item.  Just dont know if i put it in there properly...

And how do you do this with CSS?
0
 
Havin_itCommented:
Did you actually insert the button manually, by cutting and pasting code, or did you use Dreamweaver's Insert Fireworks Doc option? I certainly have not seen a construction like that come directly out of Fireworks.

With this code, is the search working as it should?
Which parts of the button behaviour as (previewed in Fireworks) are not working properly?
And, if the search takes you to a new page, is there much point in a Down state for the button?

Strange behaviour here may be attributed to a bad combination of elements. On the inside, you have an <input type="image"> which by itself acts the same way as a Submit button when clicked (ie it submits the form). Surrounding that is a link, which has both a behaviour to swap the image onClick, and the href attribute '#'. It may be causing some confusion.

I don't know if this will solve it, but you could try moving all the attributes from the <a> tag into the <input> tag, then deleting the <a> tag. Also, change the onClick to onMouseDown.
0
NEW Veeam Backup for Microsoft Office 365 1.5

With Office 365, it’s your data and your responsibility to protect it. NEW Veeam Backup for Microsoft Office 365 eliminates the risk of losing access to your Office 365 data.

 
TheRookie32Author Commented:
No it doesnt.  Causes the search to not work.  Basically i just want it to have a bit of a highlight around the button when the mouse hovers over it and and have it have a down state when the user clicks on it.  (Just get "pressed" down, not stay down when the next page comes up)

cheers!
0
 
Havin_itCommented:
Can you answer my other questions (mainly the one about how you inserted the code)?

If you don't follow them, please ask me for help. Or if you prefer, just post the whole page.
0
 
TheRookie32Author Commented:
I got the code from the html page that FW created when i exported it.  I tried to take it out of there and put it in my .ascx page (this is a Visual studio user control header page) lke it was in the html and get it to work.  No dice...  anyways, heres the whole page code.  Also, am i makign this too hard, there has to be a simpler way to do it.  Basicaly i would just like the button to perform like the search button on www.ebay.com...

<%@ Control CodeBehind="_Header.ascx.vb" Language="vb" AutoEventWireup="false" Inherits="Website.C_Header" %>
<%--

    This user control form the header for each page in the Store.
   
--%><script type="text/javascript" src="SearchButton.js"></script>
<linkhref="styles.css" rel="stylesheet" type="text/css">
<body onLoad="MM_preloadImages('images/arrowbutton_r2_c2_f2.gif','images/arrowbutton_r2_c2_f4.gif','images/arrowbutton_r2_c2_f3.gif');">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                  <td>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                    <td height="61" background="images/h_Background.jpg"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                      <td><a href="Default.aspx"><img src="images/h_Logo.jpg" width="148" height="61" border="0"></a></td>
                                                      <td><table width="200" border="0" cellspacing="0" cellpadding="0" align="right">
                                                                  <tr align="center">
                                                                        <td width="57"><div align="center"><a href="Login.aspx"><img src="images/h_pencil.jpg" border="0"></a><br>
                                                                              </div>
                                                                        </td>
                                                                        <td width="51"><div align="center"><a href="OrderList.aspx"><img src="images/h_Account.jpg" border="0"></a><br>
                                                                              </div>
                                                                        </td>
                                                                        <td width="42"><div align="center"><a href="ShoppingCart.aspx"><img src="images/h_Cart.jpg" border="0"></a></div>
                                                                        </td>
                                                                  </tr>
                                                            </table>
                                                      </td>
                                                </tr>
                                          </table>
                                    </td>
                              </tr>
                              <tr>
                                    <td background="images/h_SearchBar.jpg" height="35"><table width="300" border="0" align="right" cellpadding="0" cellspacing="0">
                                                <form method="post" action="SearchResults.aspx" id="frmSearch" name="frmSearch">
                                                      <TBODY>
                                                            <tr>
                                                                  <td width="208" valign="middle">Search:
                                                              <input type="text" name="txtSearch" ID="txtSearch" SIZE="20"><td width="92"><a href="#" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','arrowbutton_r2_c2','images/arrowbutton_r2_c2_f2.gif','images/arrowbutton_r2_c2_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','arrowbutton_r2_c2','images/arrowbutton_r2_c2_f3.gif',1);"><INPUT id="image1" type="image" src="images/arrowbutton.jpg" align="bottom" border="0"
                                                                              name="image1"></a>
                                                              </td>
                                                            </tr>
                                                </form>
                                          </table>
                                    </td>
                              </tr>
                        </table>
                  </td>
            </tr>
            </TBODY>
      </table>
      </body>
0
 
Havin_itCommented:
As I suspected - you have copied event-handling code that calls JavaScript Functions, but those functions are not defined on the page because you haven't copied them.

If you are unable to insert the Fireworks code natively in Dreamweaver (due to it being spread across two files, I presume) then you'll need to add the code manually to the page that contains this control.

In the Fireworks HTML, you need to copy the <script> tag in the head, and all its contents, and paste it into the head of the page that contains the control.
0
 
TheRookie32Author Commented:
I was linking the js to an outside js file like we did for centering my page...  

heres the text from that...

// JavaScript Document

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])?args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}

function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}


Do you have an alternate way for me to get the same effect?  This shouldnt be that complicated... Ive done this before but just been out of the game for awhile....
0
 
Havin_itCommented:
Yeah, okay then... rather than trying to hack an existing Macromedia script, let's start over. Take this section:

<a href="#" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','arrowbutton_r2_c2','images/arrowbutton_r2_c2_f2.gif','images/arrowbutton_r2_c2_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','arrowbutton_r2_c2','images/arrowbutton_r2_c2_f3.gif',1);"><INPUT id="image1" type="image" src="images/arrowbutton.jpg" align="bottom" border="0"
                                                                 name="image1"></a>

... and replace with ...

<img src="images/arrowbutton.jpg" align="bottom" border="0" id="image1" onMouseUp="document.forms.frmSearch.submit();"
onMouseOver="this.src='images/arrowbutton_r2_c2_f2.gif';"
onMouseOut="this.src='images/arrowbutton.jpg';"
onMouseDown="this.src='images/arrowbutton_r2_c2_f3.gif';">

I've taken guesses at which are the right image names, but if it works, I'm sure you'll be able to correct them as necessary.

Let me know how it goes.
0
 
TheRookie32Author Commented:
That worked!  that isnt even using JS is it...  i knew i was making it more difficult than it was!  (sorry so long in posting reply, i was away)
0
 
Havin_itCommented:
No probs, glad it worked out for you.

It is still JavaScript, but since it's quite a small chunk of behavior and isn't re-used anywhere else on the page, I figured you might as well just have it all right there in the tag. Macromedia's (god rest their soul) built-in fuctions are very well composed, but sometimes it's just over-egging the pudding somewhat.
0

Featured Post

Get your Conversational Ransomware Defense e‑book

This e-book gives you an insight into the ransomware threat and reviews the fundamentals of top-notch ransomware preparedness and recovery. To help you protect yourself and your organization. The initial infection may be inevitable, so the best protection is to be fully prepared.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now