Add HTML Code to a Stretch Button or Text

[marlis]

Hi,

I need to add HTML Code that searches a database with certain values to be triggered by clicking on a stretch button or clicking on a text hyperlink. How is this done?

[covoxer]

That depends on the code itself. It may be Java Script or link to PHP for example. Show us your code and we'll try to help you with it.

[marlis]

Well - I was able to figure out part of it. I added a stretch button with my desired text and then selected the WebProperties->Placeholder->ReplacewithHTMLcode->HTMLcodeBody to add the code. Upon preview, the button, when clicked, went to the default Xara link until I changed WebProperties->Link to "Do Nothing". This, I guess allowed the html code to do its thing.

The problem I need help with now is this: As you can see below, the html code inserts some text with style H3. This is not the style used by by Fusion Template. How do I make it consistent? Also, the html code overwrites my stretch button. My stretch button is of the style of the Fusion Template. I would like to retain it instead of the button inserted by the html code. Of course, the database search performed by the html code is what I want to keep as is. Here is the results of what I have done: www.vitreouscom.com/resources.htm . And here is the code that I was given and inserted in the placeholder:

<H3>JewishGen Lithuania Database (for Anyksciai)</H3>

<P>Click the button to show all entries for Anyksckiai
in the JewishGen Lithuania Database.
<A HREF="http://www.jewishgen.org/databases/Lithuania">(About
the JewishGen Lithuania Database)</A>.
</P>

<FORM Method="POST"
Action="http://data.jewishgen.org/wconnect/wc.dll?jg~jgsys~allcountry2">
<input TYPE="hidden" name="allcountry" VALUE="ALLLITHJG">
<input TYPE="hidden" name="srch1" VALUE="Anyksciai">
<input TYPE="hidden" name="srch1v" VALUE="T">
<input TYPE="hidden" name="srch1t" VALUE="E">
<input TYPE="submit" VALUE="Search the JewishGen Lithuania Database for Anyksciai">
</FORM>

[marlis]

Yikes! I just noticed another problem/side-effect. When I select the "Resources" page from my navbar, afterwards, any other button on the navbar that I mouseover, shows an additional "Search the JewishGen Lithuania Database for Anyksciai" button on mouseover (located where my original stretch button was?). If I select another page, the problem goes away. What have I done wrong? How do I fix this?

[covoxer]

On your page, create a code placeholder object. This may be a rectangle of any size and color. Just make sure it is placed within the page boundaries. Don't worry about it's outlook, you will not see it on the exported page. With this object selected, go to the Placeholder tab of the Web properties dialog and insert following code in the body code field:

<form Method="POST" id="my_form1" Action="http://data.jewishgen.org/wconnect/wc.dll?jg~jgsys~allcountry2">
<input type="hidden" name="allcountry" value="ALLLITHJG">
<input type="hidden" name="srch1" value="Anyksciai">
<input type="hidden" name="srch1v" value="T">
<input type="hidden" name="srch1t" value="E">
<input type="submit" value="Search the JewishGen Lithuania Database for Anyksciai">
</form>

Do not do this to your button as you did before. Now, that you have your placeholder set and exporting this code, you can add a link to any button or menu item that will execute this code. To do so, place following in the url field on the Link tab of the Web properties dialog, for your button object:

javascript:document.getElementById("my_form1").submit();

[marlis]

Thank you. This helps somewhat. I see where you modified the html to remove the text within the H3 and p tags. I see that you also gave this code an id name so it could be referenced from my button as a url. I applied the changes as you suggested. However, something is still creating a button in addition to my stretch button. I have reuploaded the page so you can see it www.vitreouscom.com/resources.htm . Where is this being created? And how do I remove it?

Thank you for your help so far. I am getting closer!

[covoxer]

Sorry, I forgot to remove the button from the code.
Use following in the placeholder:

<form Method="POST" id="my_form1" Action="http://data.jewishgen.org/wconnect/wc.dll?jg~jgsys~allcountry2">
<input type="hidden" name="allcountry" value="ALLLITHJG">
<input type="hidden" name="srch1" value="Anyksciai">
<input type="hidden" name="srch1v" value="T">
<input type="hidden" name="srch1t" value="E">
</form>

[marlis]

Thank you. That makes a lot of sense. I have one more question about this that will help me the next time I need to add html code... What is the effect of checking the box WebsiteProperties->Placeholder->"re-generate placeholder image automatically"? When do you want to select it and/or when do you not want to select it?

[covoxer]

When it is checked, WD will try to generate the outlook of your code in the placeholder, and use it for the placeholder image. So if you have some code that is actually visible in the browser (some widget or just a plain text), your placeholder will look like it. Your code does not produce anything visible in the browser, so there's no point of using this checkbox in this particular case.

[marlis]

Thank you so much. You have been very helpful!