Apex Code Development You need to sign in to do that
Don't have an account?
nagalakshmi how to scroll and how to display the related date after click on command link
Hi,
i placed 5 command links in visual force page and i placed the related data of 5 command links line by line in the same visual force page. Now my requirement is,
if am click on the 4th command link, want to scroll the visual force page up and display the data of 4th command link..
and if am click on the 2nd command link the page would scroll and display the data of 2nd command link.. please any one help me how to solve these. Actually i got the code in html as
<html>
<body>
<p>
<a href="#C4">See also Chapter 4.</a>
</p>
<p>
<a href="#C5">See also Chapter 5.</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C5">Chapter 5</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
Lakshmi,
Please check below sample controller and visualforce page code.
Before this create a custom entity Book__c with following fields -
ChapterBody__c
Sample Apex Class:
public class ChapterDetails
{
public List<Numbering> chapterno {get; set;}
public List<Book__c> chapter {get; set;}
public ChapterDetails() {
load();
}
public void load()
{
System.debug('Inside load method');
chapter=[select Name,ChapterBody__c from Book__c];
chapterno = new List<Numbering>();
for(Integer i=1; i<chapter.size(); i++)
{
Numbering objNum = new Numbering(chapter[i],i);
chapterno.add(objNum);
}
}
public class Numbering
{
public String chapterno {get; set;}
public String chaptercontents {get; set;}
public Numbering(Book__c em,Integer i)
{
chaptercontents = em.ChapterBody__c;
chapterno= 'Chapter ' + i;
}
}
}
and visualforce page like
<apex:page controller="ChapterDetails" tabStyle="Book__c" >
<apex:pageBlock >
<apex:message />
<apex:pageBlockSection title="Books Detail page" >
<table>
<apex:pageBlockTable value="{!chapterno}" var="item" >
<apex:column><a href="#{!item.chapterno}">{!item.chapterno}</a></apex:column>
</apex:pageBlockTable>
</table>
<table>
<apex:pageBlockTable value="{!chapterno}" var="item" >
<apex:column><a name="{!item.chapterno}"></a><p>{!item.chaptercontents}</p></apex:column>
</apex:pageBlockTable>
</table>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>
You may have to make minor tweaks with look and feel. But overall output will be list of chapter and clicking on them will take you to position of contents using anchoring. Hope this helps.
Please don't hesitate to contact me again. Thank you!
Regards
Lakshman
All Answers
Laxmi,
HTML Source you have provided seems to working well in visualforce page.
Would you like to develop visualforce page for this?
You can achieve this using visualforce page and controller.
Your controller will return necessary list which hold, chapter number and contents. In visualforce + html combination display list of chapters.
Let me know if you need additional help on this.
Hi,
Yes i want visual force page for that functionality.. can u please send the code?
Thanks,
lakshmi
Lakshmi,
Please check below sample controller and visualforce page code.
Before this create a custom entity Book__c with following fields -
ChapterBody__c
Sample Apex Class:
public class ChapterDetails
{
public List<Numbering> chapterno {get; set;}
public List<Book__c> chapter {get; set;}
public ChapterDetails() {
load();
}
public void load()
{
System.debug('Inside load method');
chapter=[select Name,ChapterBody__c from Book__c];
chapterno = new List<Numbering>();
for(Integer i=1; i<chapter.size(); i++)
{
Numbering objNum = new Numbering(chapter[i],i);
chapterno.add(objNum);
}
}
public class Numbering
{
public String chapterno {get; set;}
public String chaptercontents {get; set;}
public Numbering(Book__c em,Integer i)
{
chaptercontents = em.ChapterBody__c;
chapterno= 'Chapter ' + i;
}
}
}
and visualforce page like
<apex:page controller="ChapterDetails" tabStyle="Book__c" >
<apex:pageBlock >
<apex:message />
<apex:pageBlockSection title="Books Detail page" >
<table>
<apex:pageBlockTable value="{!chapterno}" var="item" >
<apex:column><a href="#{!item.chapterno}">{!item.chapterno}</a></apex:column>
</apex:pageBlockTable>
</table>
<table>
<apex:pageBlockTable value="{!chapterno}" var="item" >
<apex:column><a name="{!item.chapterno}"></a><p>{!item.chaptercontents}</p></apex:column>
</apex:pageBlockTable>
</table>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>
You may have to make minor tweaks with look and feel. But overall output will be list of chapter and clicking on them will take you to position of contents using anchoring. Hope this helps.
Please don't hesitate to contact me again. Thank you!
Regards
Lakshman
Hi lakshman,
The code which you have sent is working.. Thanks a lot.
If you dont mine can i have your email address.So, that i can ask doubts directly through email.
Thanks and regards,
Lakshmi
Sure Lakshmi, No problem at all.
Hi lakshman,
The code which u have sent is working. The first page block contains the chapter command links are in vertical manner, But i want it to be display in horizontal manner?
So,please can you help me out.....
I tried alot for it but not getting..
Thanks & Regards
Lakshmi
Nagalakshmi,
Please check modified code.
<apex:page controller="ChapterDetails" tabStyle="Book__c" >
<style>
li {
float: left;
width: 60px;
}
</style>
<apex:pageBlock >
<apex:pageBlockSection title="Books Detail page" >
<table width="700px">
<apex:dataList value="{!chapterno}" var="item" >
<a href="#{!item.chapterno}">{!item.chapterno}</a>
</apex:dataList>
</table>
<table width="700px">
<apex:pageBlockTable value="{!chapterno}" var="item" >
<apex:column ><a name="{!item.chapterno}"></a><p>{!item.chaptercontents}</p></apex:column>
</apex:pageBlockTable>
</table>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>
Here dataList i.e. unordered List are coneverted into horizontal manner using CSS. Hope this will help you.
Regards
Lakshman
Hi lakshmi,
use this code. i think this is help ful to u.
controller:
public class scrolling
{
list<scroll__c> qlist=new list<scroll__c>();
public scrolling()
{
questions();
}
public void questions()
{
for(scroll__c s:[select ChapterBody__c,quesno__c from scroll__c])
qlist.add(s);
}
public list<scroll__c> getque()
{
return qlist;
}
}
visual force page:
thanks,
Yamini
Hi lakshmi,
use this code. i think this is help ful to u.
controller:
public class scrolling
{
list<scroll__c> qlist=new list<scroll__c>();
public scrolling()
{
questions();
}
public void questions()
{
for(scroll__c s:[select ChapterBody__c,quesno__c from scroll__c])
qlist.add(s);
}
public list<scroll__c> getque()
{
return qlist;
}
}
visual force page:
thanks,
Yamini