Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Simple JavaScript Salesforce Validation - jSFValidation

Thursday, September 12, 2013 by Aslam - The Alexendra
Hi All,
Today I am going to give a demo for JS validation for VF pages which works mostly like native SFDC field validation. Here you can find the working demo.

http://labsprojects-developer-edition.ap1.force.com/jSFValidationDemo




Right now i have implemented the validation for "Required" type. If any text box values are empty , i am adding the error. You simply need to add the jSFValidation component and then you need to add the class "jSF_Required" on the fields you want to add validation for. In given demo, only "Mailing Country" is not required. Rest of the fields are marked for required.

You can download the code from here.
http://www.aslambari.com/downloads/jSFValidation.zip


Provide your suggestions to improve this :)

Thanks
Aslam Bari
Posted in Labels: , , , , , , , , , | 12 Comments »

Rounded corner box using easy JS

Sunday, March 6, 2011 by Aslam - The Alexendra
Hi All,
I think most of us many times faced the situation when they need to make some rounded corner boxes (div) on their web page. Generally most of us go for two ways:
1) Use of -moz-border-radius , but this works in Mozilla browsers only not in IE
2) If one want to do that for support all browsers then he needs to achieve that using combination of 3-4 divs , setting some border images which already rounded. It means extra divs in your existing logic. So far i also follow that.

But recently i found a useful library which make any div available in your webpage to rounded corner with single line of code. So you just need to focus on your web design and just need to call one method to make rounded corner for whichever div you need. The library is DD_roundies. This gives same output in all browsers so you no need to take any extra actions. Here is the sample code and working demo i used.

The single line of code which you need to call is:
DD_roundies.addRule('#yet_another', '10px', true);

Here "#yet_another" is the id for the div which you need to make round, '10px' is the radius for border for roundness, and 'true' is a flag for support all browser.

Complete Code:
<style>
#yet_another{
  border:1px solid #000;
  background-color:#ccc;
  padding:5px;
  height:100px;
  width:400px;
  text-align:center;
}
#up_another{
  border:1px solid #000;
  background-color:#ccc;
  padding:5px;
  height:100px;
  width:400px;;
  text-align:center;
}

#capsule_round {
width:100px; height:100px; background:#FA0;
padding:10px;
text-align:center;
padding-top:100px;
}
#totally_round {
width:100px; height:100px; background:#FA0;
padding:10px;
text-align:center;

}
</style>
<script src="DD_roundies_0.0.2a-min.js"></script>
<script>
/* EXAMPLES */
/* varying radii, "all" browsers */
DD_roundies.addRule('#yet_another', '10px', true);
DD_roundies.addRule('#up_another', '10px 10px 0px 0px', true);
DD_roundies.addRule('#capsule_round', '10000px', true);
DD_roundies.addRule('#totally_round', '10000px', true);
</script>

<body>

<div id="yet_another">
Rounding box with 10px radius
</div>
<br/>
<br/>
<div id="up_another">
Rounding box with upper round 10px radius
</div>
<br/>
<br/>
<div id="capsule_round">
Capsule Round
</div>
<br/>
<br/>
<div id="totally_round">
Total Round
</div>

Here is the link for working demo. You can check it in Firefox as well as in IE.
https://labsprojects-developer-edition.ap1.force.com/RoundCorners


Hope it will be useful for somebody who searching for that support :)

Thanks
Aslam Bari
Posted in Labels: , , , , , | 3 Comments »
Subscribe to: Posts (Atom)