Solved

Insert Anchor link into Javascript function.

Posted on 2011-03-23
11
466 Views
Last Modified: 2012-05-11
I am busy creating a page that has a javascript function that when you click order-now, a hidden div with a form in drops down.  website

I have that working now, but i want to place an anchor link in this aswell. When you click order-now, i want the page to jump down to the start of the form, as on many screens we are using, you cannot see the form has dropped down once you have clicked order now, until you scroll down. I want to solve that by jumping down the page once it is clicked.  How would i do this?  I have tried putting <a href"form"></a>   <a href"#form"></a> in various parts of the code, but does not seem to work.
0
Comment
Question by:jonathan1978
  • 5
  • 4
  • 2
11 Comments
 
LVL 35

Expert Comment

by:mrichmon
ID: 35201624
You need to make sure that you have an id at the top of the form and that you have correct syntax in the links you use...
<a href="#formStart">Click Here for start of form</a>


Then at top of form
<a id="formStart"></a>

Open in new window

0
 
LVL 35

Expert Comment

by:mrichmon
ID: 35201629
Also don't use reserved words for your ids (i.e. don't use "form" since that is a tag name - that is why I did "formStart")
0
 

Author Comment

by:jonathan1978
ID: 35202023
I cannot seem to get it to work.  This is the code i am using.

<center><a href="#formStart">
<div id="headerDivImg"><a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="/wp-content/themes/drughelp/images/order-now-rollover.png" alt="" /></a></a></div>
<div id="contentDivImg" style="display: none;">
<center><table style="width: 60%;" border="0" cellspacing="10" cellpadding="10" align="center">
<tbody>
<tr>
<td><img src="/wp-content/themes/drughelp/images/step1_large.png" alt="step-1" /></td>
<td><img src="/wp-content/themes/drughelp/images/step2_small.png" alt="step-2" /></td>
<td><img src="/wp-content/themes/drughelp/images/step3_small.png" alt="step-3" /></td>
</tr>
</tbody>
</table></center><a id="formStart"></a>
[gravityform id=5 name=10Panel Drug Testing Kit With Lab Confirmation title=false ajax=false]</div><center>

Open in new window

0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 35202143
You can use ANY ID tag and link to it like an anchor point:

....
<p>Here is some content.</p>
<p><a href="#orderForm" title="Order Now">Order Now</a></p>
<p>Here is some more content</p>
...
<p>This is further down the page</p>
<div id="orderForm">
  <form>
    ...
  </form>
</div>

Open in new window

0
 

Author Comment

by:jonathan1978
ID: 35202319
Everywhere i put the anchor link, it does not work.
I thought by using the image as a link that it would work.

I'm using a javascript function that shows a div containing my gravity form when you click on it. The form is appearing down the screen though, and you have to scroll down to see it. I wanted it so you click on the button, and then it scrolls down automatically to the start of the form.

 
<center><a href="#formStart">
<div id="headerDivImg"><a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="/wp-content/themes/drughelp/images/order-now-rollover.png" alt="" /></a></a></div>
<div id="contentDivImg" style="display: none;">
<center><table style="width: 60%;" border="0" cellspacing="10" cellpadding="10" align="center">
<tbody>
<tr>
<td><img src="/wp-content/themes/drughelp/images/step1_large.png" alt="step-1" /></td>
<td><img src="/wp-content/themes/drughelp/images/step2_small.png" alt="step-2" /></td>
<td><img src="/wp-content/themes/drughelp/images/step3_small.png" alt="step-3" /></td>
</tr>
</tbody>
</table></center><a id="formStart"></a>
[gravityform id=5 name=10Panel Drug Testing Kit With Lab Confirmation title=false ajax=false]</div><center>

Open in new window

function toggle5(showHideDiv, switchImgTag) {
        var ele = document.getElementById(showHideDiv);
        var imageEle = document.getElementById(switchImgTag);
        if(ele.style.display == "block") {
                ele.style.display = "none";
		imageEle.innerHTML = '<img src="http://drughelpdesk.com/wp-content/themes/drughelpdesk/images/order-now-rollover.png">';
        }
        else {
     ele.style.display = "block";
     imageEle.innerHTML = '<img src="http://drughelpdesk.com/wp-content/themes/drughelpdesk/images/order-now-rollover.png">';
        }
}

Open in new window

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 14

Expert Comment

by:Designbyonyx
ID: 35202652
You cannot put a DIV inside of an A tag.  Right now you have:

<a href="#formStart">
<div id="headerDivImg" .... >

Which is invalid.  You are also closing tags in the wrong order:

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

Which is invalid.  You would benefit from code indenting.  See if this is what you are looking for:

<center>
  <a href="#formStart">Order Now</a>
  <div id="headerDivImg"><a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="/wp-content/themes/drughelp/images/order-now-rollover.png" alt="" /></a></div>
  <div id="contentDivImg" style="display: none;">
    <center>
      <table style="width: 60%;" border="0" cellspacing="10" cellpadding="10" align="center">
        <tbody>
          <tr>
            <td><img src="/wp-content/themes/drughelp/images/step1_large.png" alt="step-1" /></td>
            <td><img src="/wp-content/themes/drughelp/images/step2_small.png" alt="step-2" /></td>
            <td><img src="/wp-content/themes/drughelp/images/step3_small.png" alt="step-3" /></td>
          </tr>
        </tbody>
      </table>
      <a id="formStart"></a> [gravityform id=5 name=10Panel Drug Testing Kit With Lab Confirmation title=false ajax=false]
    </center>
  </div>
</center>

Open in new window

0
 

Author Comment

by:jonathan1978
ID: 35202723
That won't work because i don't want the text "Order-Now".

I want people to click the button order now (which drops down the form) and be scrolled down so the start of the form is near the top of the page.

At the moment,  My boss is testing it the process, and he is clicking the ordernow button, but does not see the form dropping down as you have to scroll down to see it. He want's it dummy proof if you get what i mean,  does not want people to have to scroll down the page with their mouse/keyboard. When the button is clicked you should be taken to the top of the form.  

0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 35203033
Try this.  Notice the HREF points to the anchor point, and I added an ONCLICK event

IMPORTANT: In order for this to work, your "toggle5" function must return true:

<center>
  <div id="headerDivImg"><a id="imageDivLink" href="#formStart" onclick="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="/wp-content/themes/drughelp/images/order-now-rollover.png" alt="" /></a></div>
  <div id="contentDivImg" style="display: none;">
    <center>
      <table style="width: 60%;" border="0" cellspacing="10" cellpadding="10" align="center">
        <tbody>
          <tr>
            <td><img src="/wp-content/themes/drughelp/images/step1_large.png" alt="step-1" /></td>
            <td><img src="/wp-content/themes/drughelp/images/step2_small.png" alt="step-2" /></td>
            <td><img src="/wp-content/themes/drughelp/images/step3_small.png" alt="step-3" /></td>
          </tr>
        </tbody>
      </table>
      
    </center>
  </div>
</center>

Open in new window

0
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 500 total points
ID: 35203042
Sorry sorry sorry, I left out the actual form start part.  Use this instead:


<center>
  <div id="headerDivImg"><a id="imageDivLink" href="#formStart" onclick="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="/wp-content/themes/drughelp/images/order-now-rollover.png" alt="" /></a></div>
  <div id="contentDivImg" style="display: none;">
    <center>
      <table style="width: 60%;" border="0" cellspacing="10" cellpadding="10" align="center">
        <tbody>
          <tr>
            <td><img src="/wp-content/themes/drughelp/images/step1_large.png" alt="step-1" /></td>
            <td><img src="/wp-content/themes/drughelp/images/step2_small.png" alt="step-2" /></td>
            <td><img src="/wp-content/themes/drughelp/images/step3_small.png" alt="step-3" /></td>
          </tr>
        </tbody>
      </table>
	  <div id="formStart">[gravityform id=5 name=10Panel Drug Testing Kit With Lab Confirmation title=false ajax=false]</div>
    </center>
  </div>
</center>

Open in new window

0
 

Author Comment

by:jonathan1978
ID: 35203096
Almost right,  Clicking the OrderNow button jumps to the anchor point,  but the form already appears on the page, it is not hidden to start with. I want it hidden until the button is clicked, then it shows and jumps to the anchor point.
0
 

Author Comment

by:jonathan1978
ID: 35203143
Working :)  Sorry did not see your second posting.  Yes that works now. Thank You so much
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now