You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

​Play with some cool JQuery features in VF page


Introduction 

This article gives some examples of JQuery to use in VF page. Study this code and play with it in your Dev Salesforce organization.  

SLDS Sections 

Expandable/Collapsable Section Content  

Tag 

<div class=”slds-section slds-is-open”>

<h3 class=”slds-section__title”>

<div class=”slds-button slds-section__title-action” onclick=”toggleArrow(‘room-arrow’);”>

<span class=”arrow-down” id=”room-arrow”></span>Account</div>

</h3>

<div class=”slds-section__content”>

<!— your content– >

</div>

</div>

Script 

/*SLDS Sections*/

j$(‘.slds-section__content’).show();

j$(‘.slds-section__title’).find(‘button’).find(‘svg’).css(‘transition’, ‘0.3s’);

j$(‘.slds-section__title’).click(function(){

if(j$(this).parent().parent().hasClass(‘Minerva18SectionGroupSingle’)){

if(j$(this).parent().hasClass(‘slds-is-open’)){

j$(this).parent().removeClass(‘slds-is-open’);

j$(this).parent().find(‘.slds-section__content’).hide();

}

else{

j$(this).parent().parent().find(‘.slds-section’).removeClass(‘slds-is-open’);

j$(this).parent().parent().find(‘.slds-section__content’).hide();

j$(this).parent().toggleClass(‘slds-is-open’);

j$(this).parent().find(‘.slds-section__content’).show();

}

}

else{

j$(this).parent().toggleClass(‘slds-is-open’);

if(j$(this).parent().hasClass(‘slds-is-open’)){

j$(this).parent().find(‘.slds-section__content’).show();

}else{

j$(this).parent().find(‘.slds-section__content’).hide();

}

}

});

/*SLDS Sections*/

Fadeout pageMessages 

To make slow fadeout on page messages in VF page   

Tag 

<div class=”msgAlert”>

<apex:pageMessages ></apex:pageMessages>

</div>

Script 

j$(document).ready(function(){

setTimeout(function() {

j$(‘.msgAlert’).fadeOut(8000);  // 8 second

}, xSeconds);

});

Style file upload using jQuery and css 

We have lot of restrictions to style file upload input, as most browsers will not change the appearance of the button. Also styling the apex:inputFile button is notoriously difficult but this code will show the solution to achieve it easily in your VF page  

Tag 

<apex:inputFile value=”{!contentFile}” filename=”{!nameFile}”  id=”file” styleClass=”fileUploadApex” onchange=”showName()”/>

<input id=”CustomChooseFileButton”  type=”text”  size=”23″ name=”CustomChooseFileButton” value=”Browse” class=”OverlayButton slds-button” />

 Script 

j$(function(){

j$(‘#CustomChooseFileButton’).click(

function(e) {

j$(‘input[type=”file”]’).click();

});

j$(‘input[type=”text”]’).mousedown(

function(e) {

e.preventDefault();

j$(this).blur();

return false;

});

});