Difference between "style.visibility" and "style.display" 

Basically there are different ways for displaying and hiding data through javascript in which "style.visibility and style.display " are two ways to hide and display data.

Below are the properties used for hide and display 

visibility property

visible - The element is visible. This is default

hidden - The element is not visible, but still affects layout

display property

block - Element is rendered as a block-level element

none - Element will not be displayed

style.display:

Basic Difference between 

style.display:

1. display:none will not be available in the page and does not occupy any space. 

2. display:none doesn't preserve the space

style.visibility:

1. visibility:hidden hides an element, but it will still take up the same space as before. The element         will be hidden, but still affect the layout. 

2. visibility:hidden preserve the space

Below example will give clear view for display and visibility

In this example I have a pick-list called type and values "First" and "Second" and two more sections 

"First Section" and "Second Section". So what i am going to do is hiding sections based on the selected picklist value.

Initial screen:(before adding code for hiding )

Code for Style.visibility

<apex:page standardController="account">
    <script>
        function hidesection(x)
        {
            var typevalue = x.value;
            if(typevalue == 'First' )
            {
                 document.getElementById('firstsec').style.visibility = 'visible';
                 document.getElementById('secondsec').style.visibility = 'hidden';
            }else if(typevalue == 'Second')
            {
                 document.getElementById('firstsec').style.visibility = 'hidden';
                 document.getElementById('secondsec').style.visibility = 'visible';
            }else
            {
                 document.getElementById('firstsec').style.visibility = 'hidden';
                 document.getElementById('secondsec').style.visibility = 'hidden';
            }
        }
    </script>
    <apex:form >
        Type   <apex:inputField value="{!account.type}"   onchange="hidesection(this);"  />
       <div id="firstsec" style="visibility:hidden;">
           First Section
       </div>
       <div id="secondsec" style="visibility:hidden;">
           Second Section
       </div>
   </apex:form>
</apex:page>

Onpage Load :

When you select pickval as First then "Second section" will be hidden:

When you select pickval as Second then "First Section" will be hidden but you can see there is an empty line in the "first section" place

Code for Style.display

<apex:page standardController="account">
    <script>
        function hidesection(x)
        {
            var typevalue = x.value;
           
            if(typevalue == 'First' )
            {
                 document.getElementById('firstsec').style.display= 'block';
                 document.getElementById('secondsec').style.display= 'none';
            }else if(typevalue == 'Second')
            {
                 document.getElementById('firstsec').style.display= 'none';
                 document.getElementById('secondsec').style.display= 'block';
            }else
            {
                 document.getElementById('firstsec').style.display= 'none';
                 document.getElementById('secondsec').style.display= 'none';
            }
        }
    </script>
    <apex:form >
        Type   <apex:inputField value="{!account.type}"  onchange="hidesection(this);"  />
       <div id="firstsec" style="display:none;">
           First Section
       </div>
       <div id="secondsec" style="display:none;">
           Second Section
       </div>
   </apex:form>
</apex:page> 

Onpage Load :

When you select pickval as First then "Second section" will be hidden:

When you select pickval as Second then "First Section" will be hidden but you can see "second section" will be displayed in the First line itself and there will be no empty line in the "first section" place.

Hope this is helpful for you  :-)

Want to download and view Salesforce certificate ?

For viewing and downloading all salesforce related certificates please click below link and enter registered email id for exam or Full Name

http://certification.salesforce.com/verification

Display Section Based on selected picklist value in visualforce salesforce

if you want to display and hide section based on picklist value ? then check the below code

<apex:page standardController="lead" id="pg1">
    <script>
        function hidesection()
        {
           var a = document.getElementById('{!$Component.pg1.form1.status1}').value;
         
           if(a=='Re Scheduling')
           {
               document.getElementById('section1').style.display='none';
           }else
           {
                document.getElementById('section1').style.display='block';
           }
        }
    </script>
    <apex:form id="form1">
        <label><b>Status</b></label>
        <apex:inputField id="status1" onchange="hidesection();"  value="{!lead.status}"/><br/>
        <div id="section1">
            Section 1 will hide when status is pending
        </div><br/>
        <div id="section2">
            Section 2 will not change
        </div>
    </apex:form>
 
</apex:page>

The above will hide the div section1 when ever status is changed to "Re Scheduling"

Output(initial screen on page load)

Output(after selecting picklist value as "Re Scheduling")

Is there a way to restrict the buttons on a standard page to be displayed top or bottom only ?

Generally we will be displaying buttons on both bottom and top of the page using below code

Code

<apex:page standardController="lead" extensions="appointmentcontroller">

  <apex:form>

      <apex:pageBlock> 

          <h1>Congratulations</h1>

          This is your new Page

           <apex:pageBlockButtons>

                   <apex:commandButton action="{!saveAndCongrat}" value="Save" reRender="test"/>

                   <apex:commandButton value="Cancel" action="{!cancelredirect}" />         

           </apex:pageBlockButtons>

       </apex:pageBlock>

   </apex:form>

</apex:page>

Output

What if you want to display button only on top or only on bottom ? then change the above code to below format by adding location attribute where you can specify top, bottom, or both - it defaults to both in pageBlockButtons

Code

<apex:page standardController="lead" extensions="appointmentcontroller">

  <apex:form>

      <apex:pageBlock> 

          <h1>Congratulations</h1>

          This is your new Page

           <apex:pageBlockButtons location="bottom">

                   <apex:commandButton action="{!saveAndCongrat}" value="Save" reRender="test"/>

                   <apex:commandButton value="Cancel" action="{!cancelredirect}" />         

           </apex:pageBlockButtons>

       </apex:pageBlock>

   </apex:form>

</apex:page>

Output

Want to avoid standard validation rules(like required fields)  in Visualforce page when cancel button is clicked ?

By adding attribute "immediate = true " in apex:commandbutton you can avoid standard validation rules in visualforce page.

Please find below sample code 

<apex:commandButton value="Click Me" immediate="true" action="{!selectedval}" rerender="table1" />

Having a problem with hiding Div while body onloading ? It shows for few seconds before being hidden ?

For solving above problem use below style code in the Div tag

<div style="display:none">

 ----Your Code---- 

</div>

StyleClass does not work with apex:commandButton Salesforce ?

Below is the code for CSS to change button styles

<apex:page >
        <style type="text/css">
                    .myClass {
                             color:white;
                             background-color:#00CC00;
                     }
         </style>
          <apex:commandButton styleClass="myClass" value="Save" action="{!someAction}">
</apex:page>

If above CSS is not reflecting to your button then change the CSS by adding Important to CSS
like below

<style type="text/css">

        .myClass{

                    color:white !important;

                    background:#00CC00 !important;

         }


</style>

Steps of Creating Domain in Salesforce

Below steps need to be followed in order to create domain in salesforce.

Step 1. Click on Setup

Step 2. Select My Domain under Domain Management 

Step 3. Enter Domain name ( should be unique ) like below

and Click Check Availability button 

If Domain Name is available then it shows Available message like below

                          

Step 4 . Now click on Register Domain button.

Wait for Some time while Registering process is done you will receive mail once it is completed it will show like below

                          


Step 5 :  Click on Login to test it .

Step 6: Click on Deploy to users to assign.

Unable to view lightning component tab in Salesforce ?

For viewing lighting component tab in salesforce first we need to create domain in salesforce org.

Steps for Creating Domain 

Now go and check you will be able to view lighting component section under tab section