​Play with some cool JQuery features in VF page

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

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;

});

});

         

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.