Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
MyGodItsColdMyGodItsCold 

Anchor links as VF inlines on standard Account page

I have a large Account detail page. I'm putting a snap shot section on the top, which duplicates data seen elsewhere (via formula fields mostly). I want to put a link to the part of the page where the source data is, and a return link to get back to the snap shot section.

 

Here are the two VF pages I'm placing as inline VF pages:

 

 

<apex:page standardController="Account" >
    <a name="Snap"></a>
</apex:page>


<apex:page standardController="Account">
    <a href="#Snap"> Back to Snapshot </a>
</apex:page>

 The "Back to Snapshot" link shows up, but it doesn't do what I'd hope ... reposition the viewer to where I've place the anchor.

 

What am I doing wrong?

 

If this isn't possible, what other HTML is not allowed inbetween VF page tags?

 

Thanks in advance,

 

 

 

Best Answer chosen by Admin (Salesforce Developers) 
MyGodItsColdMyGodItsCold

This goes in the right direction...

 

<apex:page standardController="Account" >
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
     <script type="text/javascript">
         var j$ = jQuery.noConflict();

        j$(document).ready(function(){
            j$("#ninjaLink").click(function() {
                alert("NINJA STAR TO FACE!!!!!");
            });
            addAnchors();
        });
         
  function addAnchors(){
    //loop through all your headers
        
        alert('i will run');
    
    j$.each(j$('h3'),function(index,value){
    
        alert('i am running');
    
        //append the text of your header to a list item in a div, linking to an anchor we will create on the next line
        j$('#box-anchors').append('<li><a href="#anchor-'+index+'">'+j$(this).html()+'</a></li>');
        //add an a tag to the header with a sequential name
        j$(this).html('<a name="anchor-'+index+'">'+j$(this).html()+'</a>');
    });
    
        alert ('i should have run');
  }       


         
         
     </script> 

<a id="ninjaLink" href="">NINJA ATTACK!</a>    

<div id="box-anchors">
here we go
</div>

<br/>
<h3>Hi Mom!</h3>
<br/>
<br/>
<br/>
<br/>
<br/>
    
    <apex:detail />
</apex:page>

 

All Answers

joshbirkjoshbirk

This is one of those rare things that will be much trickier than it seems it should be.  Here's why - each embedded VF component actually gets its own iframe.  They're all pointing to the same record, but basically you have three windows.

 

So when you click on your href, that particular page has no anchor on the DOM.  So it doesn't go anywhere.

 

In order to resolve this, you'd need to try to jump frames back up to the parent, force a window.scroll() (in a browser friendly way).  However, VF might complain about jumping domains, since it is served differently than the standard page layouts.

 

The most straightforward path is a VF override with the apex:detail component, and then using something like jQuery to add an anchor link / link where desired.
MyGodItsColdMyGodItsCold

Thanks.

 

Does anyone have a code snippet which illustrates this (the latter approach)? I found this Stackoverflow Comment which suggests something like:

 

function addAnchors(){
    //loop through all your headers
    $.each($('h1'),function(index,value){
        //append the text of your header to a list item in a div, linking to an anchor we will create on the next line
        $('#box-anchors').append('<li><a href="#anchor-'+index+'">'+$(this).html()+'</a></li>');
        //add an a tag to the header with a sequential name
        $(this).html('<a name="anchor-'+index+'">'+$(this).html()+'</a>');
    });
}

 and I looked in the source of my detail page and noticed block headers are of the 'h3' flavor.

 

But my jQuery skills aren't as strong as I'd like. Could someone offer some pointers?

 

Tia,

 

 
MyGodItsColdMyGodItsCold

This goes in the right direction...

 

<apex:page standardController="Account" >
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
     <script type="text/javascript">
         var j$ = jQuery.noConflict();

        j$(document).ready(function(){
            j$("#ninjaLink").click(function() {
                alert("NINJA STAR TO FACE!!!!!");
            });
            addAnchors();
        });
         
  function addAnchors(){
    //loop through all your headers
        
        alert('i will run');
    
    j$.each(j$('h3'),function(index,value){
    
        alert('i am running');
    
        //append the text of your header to a list item in a div, linking to an anchor we will create on the next line
        j$('#box-anchors').append('<li><a href="#anchor-'+index+'">'+j$(this).html()+'</a></li>');
        //add an a tag to the header with a sequential name
        j$(this).html('<a name="anchor-'+index+'">'+j$(this).html()+'</a>');
    });
    
        alert ('i should have run');
  }       


         
         
     </script> 

<a id="ninjaLink" href="">NINJA ATTACK!</a>    

<div id="box-anchors">
here we go
</div>

<br/>
<h3>Hi Mom!</h3>
<br/>
<br/>
<br/>
<br/>
<br/>
    
    <apex:detail />
</apex:page>

 

This was selected as the best answer
MyGodItsColdMyGodItsCold

If Josh Birk hadn't jumped in and told us what to do, we'd still be floundering. Thanks, Josh, you continue to exceed our expectations by leaps and bounds.

 

I hope this code snippet helps out other users.