@tehnrd Native Popup VF Page

<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>

source

@fractastical jQuery Dialog VF Page


      <div id="addTask" style="display: none" >  

              <apex:outputpanel id="atd">  
              
                  <h2>New Task</h2>
                                    
                    <apex:form >
                            <apex:panelGrid columns="2" width="85%">
    
                                 <apex:outputLabel value="Name"/><apex:inputText value="{!newTask.name}" size="21"   />
                                 <apex:outputLabel value="Description"/><apex:inputField value="{!newTask.Description__c}" />
                                 <apex:outputLabel value="Assign to"/>
                                 <apex:inputField value="{!newTask.Assigned_To__c}" />

                                 
                                  <apex:commandButton action="{!addNewTask}" 
                                               oncomplete="$('#addTask').dialog('close')" value="Create this Task" rerender="recordsection,msgs" /> 
                                  <apex:commandButton value="Cancel" immediate="true" 
                                               oncomplete="$('#addTask').dialog('close')"/>
                             </apex:panelGrid>
                   </apex:form>
               
               </apex:outputpanel> 

       </div> <!-- addTask -->

***

                    <script type="text/javascript">
                    
                           $(function(){      
                  
                                $("#addTask").dialog({
                                    autoOpen: false,
                                    modal: true,
                                    closeable: false,
                                    resizable: false,
                                    width: 600
                                });
                                
                            });
                            
                      </script>


source

Nice flash messages that fade out.

def show_flash(options={})
    options = {:fade => 1, :display => 2, :highlight => 3}.merge(options)
    html = content_tag(:div, flash.collect{ |key,msg| content_tag(:div, msg, :class => key, :attributes => "style = display: none;") }, :id => 'flash-message')
    html << content_tag(:script, "new Effect.Highlight('flash-message', {duration: #{options[:highlight]}});") if options[:highlight]
    html << content_tag(:script, "setTimeout("$('flash-message').fade({duration: #{options[:fade]}});", #{options[:display]*1000}); return false;")
  end

source

javascript function within a function to repeat itself js jquery jq loop looping

// animation functions
		zlpFX = {
			show1: function() {
				$('div#mainBackground2').fadeOut(3000);
				$('div#transMoving').animate({
					paddingLeft: "180px",
					paddingTop: "20px"
				},
				4000).find('h3').fadeOut(2000);
				setTimeout("zlpFX.show2()", 14000);
			},
			show2: function() {
				$('div#mainBackground2').fadeIn(4000);
				$('div#transMoving').animate({
					paddingLeft: '220px',
					paddingTop: '75px'
				},
				4500).find('h3').fadeIn(6000);
				setTimeout("zlpFX.show1()", 14000);
			}
		};




		// now start the animation functions
		setTimeout("zlpFX.show1()", 11000);

source

wrong.html

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Ridiculously Wrong HTML</title>
</head>
	<style type="text/css" media="screen">
		style1 { display:none; }
		.style2 { display:block; }
		dl { color: orange; }
		dl dt { color: green; }
		dl dt h3 { color: black; }
	</style>
	<!--[if IE 6]> 
	<style type="text/css" media="screen">
		.style2 { display: inline-block; }
		section { border: 1px solid rgb(255,255,255);}
	</style>
	<![endif]-->
	
<body>
	<header>
		<h1>Ridiculously Wrong HTML<h1>
	</header>
	<section id="main">
		<div id="container" class="style1">
			<h3>This should not show up.</h3>
		</div>
		<div id="container" class="style2">
			<h3>This should show up</h3>
			<dl>
				<dt><h3>The Internet</h3></dt>
				<dd><p>A collection of tubes.</p></dd>
			</dl>
		</div>
		<table>
			<tbody>
				<th>List of Tubes</th>
				<th>Length</th>
			</tbody>
			<td>Tube 1</td>
			<td>5 ft</td>
		</table>
	</section>
	<footer>
		
	</footer>
	<script>
	
		$(function() {			
			// write a jquery function to remove 
			// the first div from "main" and replace it
			//  with a blue box 15px X 15px
			
		});
		
		for(x=0; x<99; x++) {
			alert(x);
		}
	
	</script>
</body></html>

source

Easily creating static pages

//No Source, check comments

source

Short + Long Address Formatting From Address Information

public function __get($key) {
	if($key == 'short_address') {
		// this is tricky b/c the map is international
		// if the location is US based then we want to display an identifier similiar to: St. Joe's in Downingtown PA
		// if the location is non-USA based (and either city or providence is not available) then we want to display: St. Joe's in Downingtown USA
		
		return $this->name.' in '.$this->city.' '.$this->providence.
			(empty($this->city) || empty($this->providence) ? ' '.$this->country : '');
	} else if($key == 'full_address') {
		// target format for US based addresses:
		//	300 Road Street
		//	Town PA 19335
		// target format for non-US based addresses
		//	address1
		//	City Providence Postal Code Country
		
		// the trims handle edge cases when there is not enough information to propertly display an address
		
		if($this->country == 'US') {
			return trim(trim($this->address1."
".$this->address2)."
".$this->city)." ".$this->providence." ".$this->postal_code;
		} else {
			return $this->address1."
".$this->address2."
".$this->city." ".$this->providence." ".$this->postal_code." ".$this->country;
		}
	}
	
	return parent::__get($key);
}

source

Detect Ajax

/* AJAX check  */
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
	/* special ajax here */
	die($content);
}

source

Inline-Block crossbrowser

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

source

Array Search on Key

function array_search_key($needle, $haystack, $haystackKey, $strict = false) {
	foreach($haystack as $key => $value) {
		if(isset($value[$haystackKey])) {
			if($strict) {
				if($value[$haystackKey] === $needle) return true;
			} else {
				if($value[$haystackKey] == $needle) return true;
			}
		}
	}
	
	return false;
}

source