Solved

Insert Anchor link into Javascript function.

Posted on 2011-03-23
11
462 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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Phone Dialer 5 36
Cordova Camera plugin fails 2 21
After moving to webstite page stopped working 7 52
Gradient CSS 4 14
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

760 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