Search Code With Tag jquery | Free Online Code Editor, Edit Paste Share your Code

Simple jQuery Tooltip

$(document).ready(function(){
$('.poptip').mouseenter(function(){
	var text = $(this).attr('title');
	var posi = $(this).position();
	var top  = posi.top;
	var left = posi.left+5;
	var wid	 = $(this).width();
	$(this).attr('title','');
	$(this).parent().append('<div class="poptext">'+text.replace('|','<br />')+'</div>');
	$('.poptext').css({'left':(left+wid)+'px',
				'top':(top-$('.poptext').height())+'px',
				'background':'#fffeee',
				'border':'1px solid #f7a229',
				'display':'none',
				'position':'absolute',
				'z-index':'1000',
				'padding':'5px',
				'font-size':'0.8em'
	});
	$('.poptext').fadeIn('slow');
});
$('.poptip').mouseleave(function(){
	var title = $(this).parent().find('.poptext').html();
	$(this).attr('title',title.replace('<br />','|'));
	$(this).parent().find('.poptext').fadeOut('slow');
	$(this).parent().find('.poptext').remove();
});
});

js syntax, submitted by: takien at 2010-11-30 03:23:52

Tags: jQuery,

Javascript Auto Refresh Ajax

//jQuery autorefresh ajax aftr x seconds

setInterval( "SANAjax();", 5000 );  ///////// 10 seconds

$(function() {
SANAjax = function(){

$('#dataDisplay').prepend("Hi This is auto refresh example for you - w3cgallery.com <br><br>").fadeIn("slow");

}
 });

js syntax, submitted by: Anonymous at 2010-11-08 19:12:04

Source: w3cgallery.com

Tags: javascript, jquery,

PHP jQuery Facebook Friend Selector

<?php
define('FACEBOOK_APP_ID', 'YOUR APP ID HERE'); 	
define('FACEBOOK_SECRET', 'YOUR APP SECRET HERE'); 	

function get_facebook_cookie($app_id, $application_secret) {
  $args = array();
  parse_str(trim($_COOKIE['fbs_' . $app_id], '\\"'), $args);
  ksort($args);
  $payload = '';
  foreach ($args as $key => $value) {
    if ($key != 'sig') {
      $payload .= $key . '=' . $value;
    }
  }
  if (md5($payload . $application_secret) != $args['sig']) {
    return null;
  }
  return $args;
}
$cookie = get_facebook_cookie(FACEBOOK_APP_ID, FACEBOOK_SECRET);


function array_find($needle, $haystack) {
   foreach ($haystack as $k => $v) {
     if (stripos($v, $needle) !== FALSE){
		 $oke[] = Array($k => $v);
      }
   }
 return $oke;
}

function simply_friend($friend) {
	foreach($friend as $f) {
	foreach($f as $ff) {
		$id = $ff['id'];
		$return[$id] = $ff['name'];
	}
	}
	return $return;
}

function objectToArray($object) {
	if(!is_object($object) && !is_array($object)){
		return $object;
	}
	if(is_object($object)){
		$object = get_object_vars($object);
	}
	return array_map('objectToArray', $object);
}

//END FUNGSI-FUNGSI

if ($cookie) {
	$user = json_decode(file_get_contents(
    'https://graph.facebook.com/me/friends?access_token=' .  $cookie['access_token']));
	
	$user = objectToArray($user);
	$user = simply_friend($user);

	if(isset($_GET['text']) && (strlen($_GET['text']) >= 3)) {
		$text = $_GET['text'];
		$user = array_find($text,$user);
		echo json_encode($user);
		die();
	}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">

<title>PHP Facebook Friend Selector - by Takien.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />


<style type="text/css">
/*reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/*end reset*/

/*facebook style gitulochh */
body{background:#fff;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:11px;color:#333;margin:0;padding:0;text-align:left;direction:ltr;unicode-bidi:embed}

textarea,
.inputtext,
.inputpassword{border:1px solid #bdc7d8;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:11px;padding:3px;
margin-bottom:5px}
.inputtext,
.inputpassword{margin:0;*margin:-1px 0;padding-bottom:4px}

.inputbutton,
.inputsubmit{border-style:solid;border-width:1px;border-color:#d9dfea #0e1f5b #0e1f5b #d9dfea;background-color:#3b5998;color:#fff;padding:2px 15px 3px 15px;text-align:center;*width:1;*overflow:visible;*padding:2px 15px}

/* mak erot */
.UIMessageBox{padding:10px;border-width:1px;border-style:solid}
.UIMessageBox .sub_message{margin:4px 0 0}
.status{background-color:#fff9d7;border-color:#e2c822}
.error{background-color:#ffebe8;border-color:#dd3c10}
.error a{color:#dd3c10}

/* misc */
input#target_id {
	width:200px;
}
#wrapper {
	width:450px;
	margin:30px auto;
}
#wrapper h1 {
	font-size:150%;
	margin:20px 0;
	text-align:center
}
#wrapper form {
	margin-bottom:20px;
}
#wrapper p {
	margin:10px 0;
	line-height:1.3em
}

/* autocomplete */
input.autocomplete-loading {
	background-image:url(autocomplete.gif);
	background-position: center right;
	background-repeat:no-repeat;
}
ul.autocomplete {
    position: absolute;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #bbbbbb;
    list-style: none;
	padding:3px;
    color: #000;
	display:none;
	z-index:1000;
}
ul.autocomplete li {
  display: block; 
  padding: 0.3em; 
  overflow: hidden;
  width: 100%;
  cursor:pointer;
  margin:0;
}

ul.autocomplete li strong {
	font-weight:bold;
	background:#d8dfea
}

ul.autocomplete li.selected {
  background-color: #3b5998 ; 
  color: #fff;
}

ul.autocomplete li.selected strong {
	background:#5670a6;
}
</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1"); //load latest version of jQuery
</script>

<script type="text/javascript">
jQuery.fn.autocomplete = function(url, settings) {
	return this.each( function() { //do it for each matched element
		//this is the original input
		var textInput = $(this);
		textInput.attr('autocomplete','off');
		//create a new hidden input that will be used for holding the return value when posting the form, then swap names with the original input
		textInput.after('<input type=hidden name="' + textInput.attr("name") + '"/>').attr("name", textInput.attr("name") + "_name");
		var valueInput = $(this).next();
		//create the ul that will hold the text and values
		valueInput.after('<ul class="autocomplete"></ul>');
		var list = valueInput.next().css({top: textInput.offset().top + textInput.outerHeight(), left: textInput.offset().left, width: textInput.width()});
		var oldText = '';
		var typingTimeout;
		var size = 0;
		var selected = 0;
		settings = jQuery.extend({//provide default settings
			minChars : 1,
			timeout: 1000,
			after : null,
			before : null,
			validSelection : true,
			parameters : {'inputName' : valueInput.attr('name'), 'inputId' : textInput.attr('id')}
		} , settings);
		function getData(text) {
			window.clearInterval(typingTimeout);
			if (text != oldText && (settings.minChars != null && text.length >= settings.minChars))	{
				clear();
				if (typeof settings.before == "function") {
					settings.before(textInput,text);
				}
				textInput.addClass('autocomplete-loading');
				settings.parameters.text = text;
				$.getJSON(url,settings.parameters,function(data) {
					var items = '';
					if (data){
						size = data.length;
						for (i = 0; i < data.length; i++) {//iterate over all options
						  for ( key in data[i] ) {	//get key => value
								items += '<li value="' + key + '">' + data[i][key].replace(new RegExp("(" + text + ")","i"),"<strong>$1</strong>") + '</li>';
						  }
						  list.html(items);
						  //on mouse hover over elements set selected class and on click set the selected value and close list
						  list.show().children().
						  hover(function() { $(this).addClass("selected").siblings().removeClass("selected");}, function() { $(this).removeClass("selected") } ).
						  click(function () { valueInput.val( $(this).attr('value') );textInput.val( $(this).text() ); clear(); });
						}
						if (typeof settings.after == "function") {
							settings.after(textInput,text);
						}
					}
					textInput.removeClass('autocomplete-loading');
				});
				oldText = text;
			}
		}
		
		function clear() {
			list.hide();
			size = 0;
			selected = 0;
		}	
		
		textInput.keydown(function(e) {
			window.clearInterval(typingTimeout);
			if(e.which == 27){//escape
				clear();
			} else if (e.which == 46 || e.which == 8){//delete and backspace
				clear();
				//invalidate previous selection
				if (settings.validSelection) valueInput.val('');
			}
			else if(e.which == 13)//enter 
			{ 
				if ( list.css("display") == "none")	{ //if the list is not visible then make a new request, otherwise hide the list
					getData(textInput.val());
				} else	{
					clear();
				}
				e.preventDefault();
				return false;
			}
			else if(e.which == 40 || e.which == 38)	{//move up, down 
			  switch(e.which) {
				case 40: 
				case 9:
				  selected = selected >= size - 1 ? 0 : selected + 1; break;
				case 38:
				  selected = selected <= 0 ? size - 1 : selected - 1; break;
				default: break;
			  }
			  //set selected item and input values
			  textInput.val( list.children().removeClass('selected').eq(selected).addClass('selected').text() );	        
			  valueInput.val( list.children().eq(selected).attr('value') );
			  //if (e.which == 9) clear();
			} else { 
				//invalidate previous selection
				if (settings.validSelection) valueInput.val('');
				typingTimeout = window.setTimeout(function() { getData(textInput.val()) },settings.timeout);
			}
		});
	});
};</script>

<!-- facebook connect js -->

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</head>

<body>
<div id="wrapper">
<h1>PHP jQuery Facebook Friend Selector</h1>
<?php
if(!$cookie) { ?>
<div id="error" class="UIMessageBox error">
<p style="margin:5px 0" class="sub_message" id="standard_explanation">
Your Facebook Account does not connected to this application yet, please click the Login button below. <br />
It will request permission, please click Allow to continue using this application.
</p>
</div>

<div style="margin:5px 0"><fb:login-button></fb:login-button></div>
<?php } ?>

<form action="" method="post">
Friend: 
<input style="margin-bottom:5px" class="inputtext" name="target_id" id="target_id" type="text" title="Start typing your Friend's name here" />
<input class="inputsubmit" type="submit" name="submit" value="Submit" />
</form>

<p>Once your Facebook account is connected to this application, you can start find your friends.
Type your friend's name in the field above, wait until it complete loaded (an animated loading image appears next to the field) then select by clicking it's name.</p>
<p>Submit the form to get $_POST value here:</p>

<?php
if(isset($_POST['submit'])) { ?>
<div id="error" class="UIMessageBox error">
<p style="margin:5px 0" class="sub_message" id="standard_explanation">
<pre>
<?php print_r($_POST); ?>
</pre>
</p>
</div>
<?php } ?>


<!-- call autocomplete -->
<script type="text/javascript">
$("input#target_id").autocomplete("index.php",{minChars:3,timeout:1500,validSelection:true});
</script>

<!-- required by fb login -->
<div id="fb-root"></div>
<script>
  FB.init({appId: '<?php echo FACEBOOK_APP_ID ?>', status: true,
		   cookie: true, xfbml: true});
  FB.Event.subscribe('auth.login', function(response) {
	window.location.reload();
  });
</script>
</div>
</body>
</html>

php syntax, submitted by: takien at 2010-08-16 09:57:18

Another Facebook Friend selector, using PHP and jQuery Demo: http://cektkp.com/test/friend/

Tags: Facebook, jQuery, PHP,

DIV Centered Vertically Using jQuery

<html>
<head>
<style type="text/css">
#wrapper {
	height:300px;
	width:500px;
	background:blue;
	margin:0 auto;
}
</style>
 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 <script type="text/javascript">
$(document).ready(function () {
wheight = $(window).height();
conheight = $('#wrapper').height();
$('#wrapper').css({'margin-top':(wheight-conheight)/2});
});
</script> 
</head>
<body>
<div id="wrapper">
content here
</div>
</body>
</html>

html syntax, submitted by: takien at 2010-07-10 00:13:30

Membuat DIV berada di tengah secara vertikal. (Making DIV vertically centered using jQuery).

Tags: html, javascript, jquery,