Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Vivek KidambiVivek Kidambi 

Lazyload embedded pages

I have multiple pages embedded on visualforce page as tabs and need to lazyload the embedded pages. How do i do it?

eg
<div class="u-container u-container--stretch" id="tabs"> 
          <ul class="test-class" id="mainTab" > 
            <li><a class="test-class" style="font-family: Arial;" href="#tab1" data-tabs-id="tab1" >tab1</a></li>
            <li><a class="test-class="font-family: Arial;" href="#tab2" data-tabs-id="tab2" >tab2</a></li>
           </ul>
    </div> 
    <div id="tab1"  class="test-class">
     <apex:include pageName="tab1page"/>
    </div>
    <div id="tab2" class="test-class>
        <apex:include pageName="tab2page"/>
    </div>
RohRoh
Hello Success Factor,
All by your question i understand is that, the active tab on which the user is currently working should be LIVE and the other tabs are supposed to be Inactive but become LIVE when user clicks them.

Use below type of code ,

<apex:tabPanel activeTabClass="SelectedTab"
            inactiveTabClass="UnSelectedTab" id="tabPanelId"
            contentClass="tabcolor" selectedTab="Active_page">

<!---------YOUR CODE HERE FOR THE ACTIVE TAB-------->
<apex:tab label=tab 2" name="tab 2"
                style="margin-left:-1px;" labelwidth="150px"
                ontableave="return warning_on_tab_change()"
                ontabenter="return loadtab2Page()" id="tab2" />

            <!---- end of tab2 ---->

            <apex:tab label="tab 3" name="tab 3"
                style="margin-left:-1px;" labelwidth="150px"
                ontableave="return warning_on_tab_change()"
                ontabenter="return loadtab3Page()" id="tab3" />

            <!--- end of tab3 ---->

PLEASE VOTE THIS AS THE RIGHT ANSWER, IF YOU LIKE IT.

Thanks,
Rohit Alladi