TehNrd

<apex:page controller="popup">
    <apex:form >
        <apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="popup"/>
        <apex:pageBlock >
            Lorem ipsum ..... dummy stuff to show the popup is above content
        </apex:pageBlock>
 
        <apex:outputPanel id="popup">
            <apex:outputPanel styleClass="customPopup" layout="block" rendered="{!displayPopUp}">
                Lorem ipsum <br/><br/><br/>
                <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="popup"/>
            </apex:outputPanel>
        </apex:outputPanel>
 
    </apex:form>
 
    <style type="text/css">
       .customPopup{
            background-color: white;
            border-style: solid;
            border-width: 2px;
            left: 50%;
            padding:10px;
            position: absolute;
            z-index: 9999;
            /* These are the 3 css properties you will need to tweak so the pop 
            up displays in the center of the screen. First set the width. Then set 
            margin-left to negative half of what the width is. You can also add 
            the height property for a fixed size pop up.*/
            width: 500px;
            margin-left: -250px;
            top:100px;
        }
    </style>
</apex:page>

public class popup {
 
    public boolean displayPopup {get; set;}
 
    public void closePopup() {
        displayPopup = false;
    }
 
    public void showPopup() {
        displayPopup = true;
    }
}

<apex:component controller="advancedLookUp" >
    <apex:attribute name="object" assignTo="{!objectType}" required="true" type="string" description="The object this component will search."/>
    <apex:attribute name="value" assignTo="{!selectValue}" required="true" type="object" description="A merge feld that references the controller class variable that is associated with this feld. This must be an Id field."/>
    <apex:attribute name="maxHeight" assignTo="{!maxHeight}" required="true" type="Integer" description="Max height of selectList."/>
    <apex:attribute name="width" required="true" type="string" description="Width of the component in pixels or percent."/>
    <apex:attribute name="style" type="string" description="The style used to display the inputText component, used primarily for adding inline CSS styles."/>
    <apex:outputPanel layout="block" style="{!style}">
 
            <!-- This is our input text that we will use in a wildcard search against the names of the defined object. We refresh the results every time this field
            is clicked or a letter is entered (keyup) -->
            <apex:inputText value="{!searchValue}" style="width:{!width}" id="searchValue">
                <apex:actionSupport event="onkeyup" action="{!search}" rerender="resultsPanel"/>
                <apex:actionSupport event="onclick" action="{!search}" rerender="resultsPanel"/>
            </apex:InputText>
 
            <!-- Once we perform the query on the object we will populate this list with the returned values. When a user selects a value we will hide this list
            and auto complete the selected value -->
            <apex:outputPanel id="resultsPanel" layout="block" style="position: absolute;">
                <apex:selectList value="{!value}" size="{!height}" style="width:{!width}" rendered="{!showList}" >
                    <apex:selectOptions value="{!results}"/>
                    <apex:actionSupport event="onchange" action="{!selectvalue}" rerender="resultsPanel,searchValue"/>
                </apex:selectList>
            </apex:outputPanel>
 
    </apex:outputPanel>
 
    <!-- This component has one little piece of javascript. If a user clicks on the screen before selecting a value we want to hide the list of options similar to
    how a normal picklist behaves -->
    <apex:actionFunction name="hideResults" action="{!hideResults}" reRender="resultsPanel"/>
    <script type="text/javascript">
        document.onclick = function(){
            hideResults();
        }
    </script>
</apex:component>

public class advancedLookUp{
 
    public Object selectValue{get; set;}
    public String objectType {get; set;}
    public String searchValue {get; set;}
    public Integer maxHeight {get; set;}
    public Integer height {get; set;}
    public List<SelectOption> results {get; set;}
    public Boolean showList {get; set;}
    Map<String,String> resultsMap;
 
    //This is our seach method that is called every time a character is entered
    public void search(){
        showList = true;
        results = new List<SelectOption>();
        resultsMap = new Map<String,String>();
 
        //Using dynamic SOQL we pass the object and the search value
        if(searchValue.length() > 0){
            String entry = '%' + searchValue + '%';
            String queryString = 'Select Id, Name from ' + objectType + ' where Name like :entry order by Name limit 1000';
 
            /*Next we add the results to our list of selectOptions. We also add the values to a map so that when a value
            is selected we can auto fill the search box with the selected value */
            for(sObject o : Database.query(queryString)){
                results.add(new SelectOption((String)o.get('Id'),(String)o.get('Name')));
                resultsMap.put((String)o.get('Id'),(String)o.get('Name'));
            }
        }
 
        //Next we inspect the results to set the height and contents of the selectList
        if(searchValue.length() == 0){
            showList = false;
        }else if(results.size() == 0 && searchValue.length() != 0){
            results.add(new SelectOption('','No matches found'));
            height = 2;
        }else if(results.size() == 1){
            height = 2;
        }else if(results.size() > maxHeight){
            height = maxHeight;
        }else{
            height = results.size();
        }
    }
 
    //When a value is selected we will auto complete the searchValue
    public void selectValue(){
        showList = false;
        searchValue = resultsMap.get((string)selectValue);
    }
 
    //simply hides the list of results
    public void hideResults(){
        showList = false;
    }
}

<apex:page controller="coolLookUp">
    Try searching with 'e', 'oil', 'az', 'install', etc then click the Show button.
 
    <apex:form >
        <!-- This is only line need for the advanced lookup. The value is bound to an ID variable in this page's controller. When you click the button it 
        refreshes the detail panel and displays the selected opp -->
        <c:advancedLookup object="Opportunity" value="{!oppId}" maxHeight="20" width="250px" style="float: left"/> 
        <apex:commandButton value="Show" rerender="detail" style="float: left" status="status"/>
        <apex:actionStatus startText="elevator music...." id="status"/>      
        <apex:outputPanel id="detail">
            <apex:detail subject="{!oppId}"/>
        </apex:outputPanel>
    </apex:form>
</apex:page>

public class coolLookUp {
    public Id oppId {get; set;}
}

<apex:page controller="captcha" >
 
    Enter only the <strong>black</strong> characters.
    <apex:outputPanel styleClass="container" layout="block" id="code">
        <apex:outputText value="{!char1}" styleClass="blackChar"/>
        <apex:outputText value="{!char2}" styleClass="redChar"/>
        <apex:outputText value="{!char3}" styleClass="blackChar"/>
        <apex:outputText value="{!char4}" styleClass="redChar"/>
        <apex:outputText value="{!char5}" styleClass="blackChar"/>
        <apex:outputText value="{!char6}" styleClass="redChar"/>
    </apex:outputPanel>
 
    <apex:form >
        <apex:inputText value="{!input}"/>
        <apex:commandButton action="{!validate}" value="Validate" rerender="result"/>
        <apex:commandButton value="Reset" rerender="code"/>
    </apex:form>
 
    <apex:outputPanel id="result">
        {!result}
    </apex:outputPanel>
 
    <style>
        .redChar{
            color: #C30000;
            font-size: 24px;
            padding:5px;
        }
        .blackChar{
            color: black;
            font-weight: bold;
            font-size: 24px;
            padding:5px;
        }
        .container{
            background-color: #E8E8E8;
            border-style: solid;
            border-width:1px;
            width: 150px;
            text-align: center;
        }
    </style>
</apex:page>

public class captcha {
 
    List<String> characters;
    public String input {get; set;}
    public String result {get; set;}
    String char1;
    String char3;
    String char5;
 
    //In our contructor we will populate a list of strings with numbers and letters
    public captcha(){
        characters = new List<String>{'a','b','c','d','e','f','g','h',
            'i','j','k','l','m','n','o','p','q','r','s','t','u','v','w',
            'x','y','z','1','2','3','4','5','6','7','8','9','0'
        };
    }
 
    //This methods simply returns a random number between 0 and the size of the character list
    public Integer randomNumber(){
        Integer random = Math.Round(Math.Random() * characters.Size());
        if(random == characters.size()){
            random--;
        }
        return random;
    }
 
    /*Here we have 6 get methods that return 6 random characters to the page.
    For chars 1,3, and 5 (the black characters) we are saving the the values so 
    that we can compare them with the user's input */
    public String getChar1(){
        char1 = characters[randomNumber()];
        return char1;
    }
    public String getChar2(){
        return characters[randomNumber()];
    }
    public String getChar3(){
        char3 = characters[randomNumber()];
        return char3;
    }
    public String getChar4(){
        return characters[randomNumber()];
    }
    public String getChar5(){
        char5 = characters[randomNumber()];
        return char5;
    }
    public String getChar6(){
        return characters[randomNumber()];
    }
 
    /*In the validate method we make sure that the 3 characters entered equal the three black characters: char1, char3, char5*/
    public void validate(){
        if(input.length() == 3 && input.subString(0,1) == char1 && input.subString(1,2) == char3 && input.subString(2,3) == char5){
            result = 'Whoohoo! You got it right.';
        }else{
            result = 'Come on...the letters aren\'t even disfigured.'; 
        }
    }
}

<apex:component >
	<apex:includeScript value="{!$Resource.multiSelectButton_js}"/>
	<apex:attribute name="buttonText" description="Text displayed." type="String" required="true"/>
	<apex:attribute name="uniqueId" description="Unique Id for this componenet. Must be unique across all multiSelectButtons. This is not the component Id." type="String" required="true"/>
 
	<div name="multiButton" id="button{!uniqueId}" class="menuButton" onclick="showOptions('{!uniqueId}');" >
		<div id="CloneButton{!uniqueId}" class="menuButtonButton" onmouseover="divHover = 'CloneMenu{!uniqueId}';" onmouseout="divHover = '';">{!buttonText}</div>
		<div name="multipButtonOpts" id="CloneMenu{!uniqueId}" class="menuButtonMenu">
			<apex:componentBody/>
		</div>
	</div>
</apex:component>

var divHover = '';
 
/*When a multi select button is clicked this method executes. First it hides all options for every
multiselect button on the page the show but options for the button that was clicked. This way, if
you click one button and then click another button the options on the first will disappear. */
 
function showOptions(objId){
	var multiButtons = document.getElementsByName("multiButton");
	for(var i=0; i < multiButtons.length; i++){
		multiButtons[i].style.position = '';
	}
 
	var multiButtonOpts = document.getElementsByName("multipButtonOpts");
	for(var i=0; i < multiButtonOpts.length; i++){
		multiButtonOpts[i].style.display = 'none';
	}		
 
	document.getElementById('CloneMenu' + objId).style.display = 'block';
	document.getElementById('CloneMenu' + objId).style.top = '17px';
	document.getElementById('button' + objId).style.position = 'relative';
}
 
/*Any time the document is click and the mouse is not over a multiselect button hide 
all options */
document.onclick = function(){
	if(divHover == '' || divHover == null){
		var divs = document.getElementsByTagName('div');
		for(i=0; i < divs.length; i++){
			if(divs[i].getAttribute('name') == 'multiButton'){
				divs[i].style.position = '';
			}
			if(divs[i].getAttribute('name') == 'multipButtonOpts'){
				divs[i].style.display = 'none';
			}
		}
	}
}

<apex:page controller="multiButton">
	<apex:form >
		Normal html links:<br/>
		<c:multiSelectButton uniqueId="show1" buttonText="Links">
			<apex:outputLink value="http://www.digg.com">digg.com</apex:outputLink>
			<apex:outputLink value="http://www.engadget.com">engadget.com</apex:outputLink>
			<apex:outputLink value="http://www.gizmodo.com">gizmodo.com</apex:outputLink>
		</c:multiSelectButton><br/><br/>
 
		Links that pass params:<br/>
		<apex:inputText value="{!searchValue}"/>
		<c:multiSelectButton uniqueId="show3" buttonText="Search">
			<apex:commandLink value="Google" action="{!doSearch}">
				<apex:param assignTo="{!searchEngine}" value="www.google.com/search?q="/>
			</apex:commandLink>
			<apex:commandLink value="Yahoo" action="{!doSearch}">
				<apex:param assignTo="{!searchEngine}" value="search.yahoo.com/search?p="/>
			</apex:commandLink>
			<apex:commandLink value="Bing" action="{!doSearch}">
				<apex:param assignTo="{!searchEngine}" value="www.bing.com/search?q="/> 
			</apex:commandLink>
		</c:multiSelectButton><br/><br/>
 
 
	    These options are bound to action methods in the controller:<br />
		<apex:pageBlock id="tables">
 
			<apex:pageBlockButtons location="top">
				<c:multiSelectButton uniqueId="show2" buttonText="View:">
					<apex:commandLink value="Accounts" action="{!showAccts}" rerender="tables" />
					<apex:commandLink value="Opportunities" action="{!showOpps}" rerender="tables" />
				</c:multiSelectButton>
			</apex:pageBlockButtons>
 
			<apex:pageBlockTable value="{!opps}" var="o" rendered="{!viewList = 'opps'}">
				<apex:column value="{!o.Name}" />
				<apex:column value="{!o.StageName}" />
				<apex:column value="{!o.Amount}" />
			</apex:pageBlockTable>
 
			<apex:pageBlockTable value="{!accts}" var="a" rendered="{!viewList = 'accts'}">
				<apex:column value="{!a.Name}" />
				<apex:column value="{!a.BillingCity}" />
				<apex:column value="{!a.BillingCountry}" />
			</apex:pageBlockTable>
 
		</apex:pageBlock>
	</apex:form>
</apex:page>

public class multiButton {
 
	public List opps {get; set;}
	public List accts {get; set;}
	public String viewList {get; set;}
	public String searchValue {get; set;}
	public String searchEngine {get; set;}
 
	public multiButton(){
		//Query in the contructor for this example
		opps = [select Name, StageName, Amount from Opportunity limit 10];
		accts = [select Name, BillingCity, BillingCountry from Account limit 10];
	}
 
	public void showAccts(){
		viewList = 'accts';
	}
 
	public void showOpps(){
		viewList ='opps';
	}
 
	public pageReference doSearch(){
		PageReference searchPage = new PageReference('http://' + searchEngine + searchVAlue );
		searchPage.setRedirect(true);
		return searchPage;
	}
}