Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Insert Anchor link into Javascript function.

Posted on 2011-03-23
11
Medium Priority
?
475 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
This article shows the steps required to install WordPress on Azure. Web Apps, Mobile Apps, API Apps, or Functions, in Azure all these run in an App Service plan. WordPress is no exception and requires an App Service Plan and Database to install
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

636 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