?
Solved

Insert Anchor link into Javascript function.

Posted on 2011-03-23
11
Medium Priority
?
473 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:Jon Imms
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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:Jon Imms
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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:Jon Imms
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
 
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:Jon Imms
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 2000 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:Jon Imms
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:Jon Imms
ID: 35203143
Working :)  Sorry did not see your second posting.  Yes that works now. Thank You so much
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
Suggested Courses

771 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