Salesforce Helptext like Custom Tooltip using JQuery

Author posted by Jitendra on Posted on under category Categories HTML, Salesforce and tagged as Tags , , , with 1 Comment on Salesforce Helptext like Custom Tooltip using JQuery

Welcome back Readers. This is my first blog entry for year 2013, i know its too late. However i can ensure that i have lots of unique post which will come this year. I am starting this year with very light post , mimic the help-text style of Salesforce.

Salesforce like Helptext - Tooltip using JQuery
Salesforce like Helptext – Tooltip using JQuery

Download Salesforce Helptext like Tooltip using JQuery – Source Code

Most of the time when i override Visualforce page, customers many time demand for same Standard page layout.

apex:inputField and apex:outputField shows their help bubble (if applicable) when nested within a pageBlockSection component automatically.

If you want to provide your own text instead you can by utilizing the helpText attribute on pageBlockSectionItem. Also you can access the help text within an expression by using the respective $ObjectType global as such: Continue reading “Salesforce Helptext like Custom Tooltip using JQuery”

Create Pure CSS based Menu – Step by Step Tutorial

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , with 2 Comments on Create Pure CSS based Menu – Step by Step Tutorial

Tutorial on creating step by step pure CSS based Menu without any javaScript and Why CSS Hover property is not working in Internet explorer

After a long time i am going to write the article on CSS and HTML.  In this tutorial i am going to create a pure CSS based Menu with description of lots of CSS property and problems faced by the web developer. One advantage of having CSS based Menu rather than  JavaScript based Menu is that it is very light weight and cross browse compatible. I have used CSS based Menu in my website http://www.JitendraZaa.com

Live Demo – Pure CSS based Menu

Lets consider below HTML code on which we want to create a Menu.

Continue reading “Create Pure CSS based Menu – Step by Step Tutorial”

Complete CSS Selector Tutorial for the beginners

Author posted by Jitendra on Posted on under category Categories Web Technology and tagged as Tags , with 1 Comment on Complete CSS Selector Tutorial for the beginners

Complete CSS Selector Tutorial for the beginners

Below table displays that in how many ways we can select any element in CSS to style them.

Selector
Description
*Any Element
AElement of Type "A"
A.redColorElement "A" whose class is "redColor"
A#IndiaElement "A" which have id as "India"
A[bar]Element "A" with attribute "bar"
A[bar="Mum"]Element "A" which have attribute as "bar" whose value is exactly equal to "Mum"
A[bar~="Mum"]Element "A" whose "bar" attribute value is a list of whitespace-separated values, one of which is exactly equal to "Mum"
A[bar^="Mum"]Element "A" whose "bar" attribute value begins exactly with the string "Mum"
A[bar$="Mum"]Element "A" whose "bar" attribute value ends exactly with the string "Mum"
A[bar*="Mum"]Element "A" whose "bar" attribute value contains the substring "Mum"
A:link, A:visitedElement "A" being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
A:active, A:hover, A:focusElement "A" during certain user actions
A::first-linethe first formatted line of an "A" element
A:targetElement "A" being the target of the referring URI
A::first-letterthe first formatted letter of an Element "A"
A::beforegenerated content before an Element "A"
A::aftergenerated content after Element "A"
A:nth-child(n)Element "A", the n-th child of its parent
A:nth-last-child(n)Element "A", the n-th child of its parent, counting from the last one
A:nth-of-type(n)Element "A", the n-th sibling of its type
A:nth-last-of-type(n)Element "A", the n-th sibling of its type, counting from the last one
A:first-childElement "A", first child of its parent
A:last-childElement "A", last child of its parent
A:first-of-typeElement "A", first sibling of its type
A:last-of-typeElement "A", last sibling of its type
A:only-childElement "A", only child of its parent
A:only-of-typeElement "A", only sibling of its type
A:emptyElement "A" that has no children
A:rootElement "A", root of the document
A:enabled, A:disableda user interface element "A" which is enabled or disabled
A:checkeda user interface element "A" which is checked (for example a radio-button or checkbox)
A:not(s)Element "A" that does not match simple selector s
A BElement "B" descendant of Element "A"
A > BElement "B" child of Element "A"
A + BElement "B" immediately preceded by Element "A"
A~BElement "B" preceded by an Element "A"

Read more from w3 org.

Drop a line if you have any feedback or question.

JavaScript Error “˜expected identifier, string or number’ in Internet Explorer (IE)

Solution of expected identifier, string or number’ in Internet Explorer (IE) – javascript

Yesterday my friend come across a javascript error “expected identifier, string or number” in internet explorer (IE). The same code was running great in Mozilla and chrome. here the snap of code causing an error:

Continue reading “JavaScript Error “˜expected identifier, string or number’ in Internet Explorer (IE)”

Vertically middle align the DIV tag using CSS

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , with Leave a comment on Vertically middle align the DIV tag using CSS

Source code and Methods to Middle align the text in DIV tag in HTML

In this article, i will emphasize on the way of vertically align the text in DIV tag of HTML.

First note i want to share is that, DIV tag is not for the purpose to contain the texts. It is utilized mainly for the placing controls and components.

Below is two methods which will work on all browsers to vertically align the text in DIV  tag.

Steps for Method 1:

  1. Specify the parent container as position:relative or position:absolute.
  2. Specify a fixed height on the child container.
  3. Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.
  4. Set margin-top:-yy where yy is half the height of the child container to offset the item up.

Continue reading “Vertically middle align the DIV tag using CSS”

Why Style.left does not work in Firefox, chrome and safari ?

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , with 3 Comments on Why Style.left does not work in Firefox, chrome and safari ?

During working on one of my project, i found that style.left does not work with Mozilla, chrome and safari but nicely works on internet explorer.

The code was :

var docStyle = document.getElementById("divAddPartnerAndProjectEntities").style;
docStyle.top = e.clientY;
docStyle.left = e.clientX-5;
docStyle .style.display = "";
And the simple solution is, append “px” at the end to work with other browsers.
and final code is:
var docStyle = document.getElementById("divAddPartnerAndProjectEntities").style;
docStyle.top = e.clientY+"px";
docStyle.left = e.clientX-5+"px";
docStyle .style.display = "";

Very Simple right ? 🙂

ClearType in IE

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , , with Leave a comment on ClearType in IE

Recently, during development i encountered in interesting issue related to internet explorer.

There is one property in IE known as cleartype, which results in different display of font.

you can see in below snap :

clear type font style in IE
clear type font style in IE

The Browse button at left side has shadow effect in font or we can say Cleart type is enable for that control.

the control at right side is normal Button control of HTML. you can see difference very clearly.

Remove ClearType property from IE:

To remove clearType property, we just need below trick in CSS.


<style type="text/css">
body {
filter:none
}
</style>

By using property filter:none we can remove the cleart type behavior of IE.

Text without clear type
Text without clear type

Style File upload control in ASP / HTML

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , , , with 2 Comments on Style File upload control in ASP / HTML

As most of us know that we cannot style the file upload control to much level, still we can give it a stunning effect with the help of CSS.

There is nothing in code to explain.

I took three upload control and one button to give effect.

Lets say upload control is in ASP.net or in HTML.

<asp:FileUpload ID="FileUpload1" CssClass="Cntrl1" runat="server" />
Or
html file upload
<input id="readFile" type="file" runat="server" class="Cntrl1" />

Then create a simple CSS class of name “Cntrl1”.

  <style id="cssStyle" type="text/css" media="all">
       .Cntrl1
      {
       background-color:#abcdef;
       color: Yellow;
       border: 1px solid #AB00CC;
       font: Verdana 10px;
       padding: 1px 4px;
       font-family: Palatino Linotype, Arial, Helvetica, sans-serif;
      }
</style>

Out put in different browsers will look like :

Output in Chrom
Output in Chrom
Output in Mozilla
Output in Mozilla
Output in Internet explorer
Output in Internet explorer

View Demo of FileUpload

Highlight Current field using JQuery

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , , , with 1 Comment on Highlight Current field using JQuery

Write below HTML code :

This will create two text boxes.

<form>
	<div>
		<label for="Name">Name:</label>
		<input name="Name" type="text"></input>
	</div>
	<div>
		<label for="Email">Email:</label>
		<input name="Email" type="text"></input>
	</div>
</form>

Using jQuery, we can watch for an event where an input form comes into focus:

Add link to JQuery file in script tag as shown in below line:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" />

Now, add below CSS in document.

div.curFocus {
background: #fdecb2;
}

Then at last write JQuery / javascript code on focus event and blur event (opposite of focus event in javascript ) .

$(document).ready(function(){

$("input").focus(function() {

$(this).parent().addClass("curFocus")

});

$("input").blur(function() {

$(this).parent().removeClass("curFocus")

});

});

We are using the advantage of jquery of adding and removing the CSS class. we cannot left blank to CSS class, as it may remove the existing other class from the tag.

$(document).ready(function(){

This line causes the execution of jquery after complete loading of page.

Output:

Selecting field using jquery
Selecting field using jquery

View Demo