Solved

Insert Anchor link into Javascript function.

Posted on 2011-03-23
11
469 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
[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: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
Industry Leaders: 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: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
 
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

Suggested Solutions

Title # Comments Views Activity
Jquery if else not working ... WHY? 5 26
HTML question 2 28
Calculating percentage 2 35
center navbar (navigation menu) on web page 3 27
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

696 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