Activate jQuery ui in WordPress

If you use Worpdress and that you whish to use jQuery ui, you must to active jQuery ui on your WordPress.
Check this link : https://developer.wordpress.org/reference/functions/wp_enqueue_script/

jQuery and jQuery-ui are already registered with WordPress. You need enqueue them to load them on the page. But you are using ‘wp_register_script()’ instead of ‘wp_enqueue_script()’ within your ‘my_scripts_method()’ function.

function my_scripts_method() 
{
  wp_enqueue_script('jquery');
  wp_enqueue_script('jquery-ui-core');
  wp_enqueue_script('jquery-ui-tabs');
}
add_action('wp_enqueue_scripts', 'my_scripts_method'); 

Note: you may want to load them conditionally by using ‘wp_script_is()’. Example:

if( !wp_script_is('jquery-ui-tabs') ) 
{     
  wp_enqueue_script('jquery-ui-tabs');
}

Create a Centered Popup and a Black Background with jQuery

You can use the free following code to create a centered popup with a transparent black background.

CSS

<style>
div.black-background-popup {
    position: fixed;
    width: 100%;
    height: 100%;
    display: none;
    top: 0px;
    left: 0px;
    background: rgba(0,0,0,0.75);
    z-index: 998;
}
</style>

HTML

<button id="" class="btnClickMe ui-button ui-widget ui-corner-all" onmouseover="this.style.color='rgb(51, 199, 255)';" onmouseout="this.style.color='gray';" style="color: gray; font-size: .8em !important; margin: 0 0 0 10px; letter-spacing: 1px;" title="Click here to add an user">Add - Change</button>

<div id="add-user" title="Creation of a new user" style="display: none; overflow: hidden; margin: 0; padding: 0;">
	CONTENT PAGE
        Add user form
</div>

jQuery

<script>
//Size
var viewportWidth = window.innerWidth-20;
var viewportHeight = window.innerHeight-20;
if (viewportWidth > 450) viewportWidth = 450;
if (viewportHeight > 416) viewportHeight = 416;

//Position and Centering
$("#add-user").dialog
({
dialogClass: "dialog",
height: viewportHeight,
width: viewportWidth,
autoOpen: false,
modal: false,
resizable: true, 
position: 		
	{
		my: "center",
		at: "center",
		of: window,
		collision: "none"
	}, 
create: function (event, ui) 
	{
		$(event.target).parent().css('position', 'fixed');
	}
});

//Hidden the black background on closure
$( "#add-user" ).on( "dialogclose", function( event, ui ) 
	{
		$(".black-background-popup").css("display", "none");
	} 
);

//Display on click
$( ".btnClickMe" ).click(function() 
{
	$( "#add-user" ).dialog( "open" );
	$(".black-background-popup").css("display", "block");
});
</script>

WordPress option

If you use Worpdress, check this:
You must to active jQuery on your WordPress. Check this link : http://quicknews.fr/activate-jquery-ui-in-wordpress/

Create an Accordion with jQuery ui

You can create simply an accordion thanks to jQuery ui code.
Check this page to see the options’accordion: http://api.jqueryui.com/accordion/

wp_enqueue_script(‘jquery-ui’, ‘http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js’, array(‘jquery’), ‘1.12.1’);

Section 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer

Section 2

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet

Section 3

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.

Section 4

Cras dictum. Pellentesque habitant morbi tristique senectus et netus

<script>
  $( function() {
    $( "#accordion" ).accordion();
  } );
  </script>
 
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    </p>
  </div>
  
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    </p>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    </p>
  </div>
</div>
French social security number format

Social Security Number Format PHP

PHP function to format a French social security number such as # ## ## ## ### ### ###.

$social_id = 16808092002039;

function format_social_security_number($social_id)
{
	$string_social_id = '';
	
	for($i=0; $i<15; $i++)
	{
		if($i=='1' OR $i=='3' OR $i=='5' OR $i=='7' OR $i=='10' OR $i=='13')
		{ 
			$string_social_id .= ' '.$social_id[$i]; 
		}
		else 
		{
			$string_social_id .= $social_id[$i];
		}
	}
	return $string_social_id;
	echo format_social_security_number($social_id);
}

Result

1 68 08 92 002 039

French Money Format with PHP

To format a currency, you can use number_format PHP function. There are also other functions such as money_format(), sprintf(), printf(), sscanf().


$number = 1234567891.23;

// French Money Format
$french_money_format = number_format($number, 2, ',', ' '); 

// The result is 1 234 567 891,23 
echo number_format($number, 2, ',', ' ') . ' ' .'€';
Result

1 234 567 891,23 €

Phone Number Format Using Points

With wordwrap PHP function, you can format a phone number using points between blocks of characters
When an user types his phone number in a form and if you need to shown it, the display is more readable

//Code
$phonenumber = '0123456789';
$phonenumber_formate = wordwrap ($phonenumber, 2, '.', 1); 

//Overview 01.23.45.67.89
echo $phonenumber_formate;

List Files from a Folder with PHP

Opendir Function

(PHP 4, PHP 5, PHP 7) opendir — Open directory handle

Readdir Function

(PHP 4, PHP 5, PHP 7) readdir — Read entry from directory handle

		//Files list
		$nb_files = 0;
		echo '<ul>';
		if ($folder = opendir('./myfolder'))
		{
			while (false !== ($files = readdir(folder)))
			{
				if($files != '.' && $files != '..' && $files != 'index.php')
				{
					$nb_files++; // Incrementation of the repeat counter +1 
					echo '<li  style="list-style-type:none;"><a href="./myfolder/' . $files . '">' . $files . '</a></li>';
				} // The end of 'if' allows do not show index.php
					
			} // End of loop
			
		echo '</ul><br/>';
		echo 'There are <strong>' . $nb_files .'</strong> file(s) in the folder';
			
		closedir($folder);
			
		}
			
		else
			echo 'There are not file in the folder';
	echo '</div>';

First Character Capital with jQuery

Input test



HTML code
<input type='text' id='name' name='name'/>
jQuery code
								<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
								<script>
									$(document).ready(function() {
										$('#prenom').on('keydown', function(e) {
											if (this.value == '') {
											var char = String.fromCharCode(e.which);
												if (char.match(/^\w$/)) {
													this.value = char.toUpperCase();
													return false;
												}
											}
										});
									});
								</script>

Bootstrap Form Code


<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8"/>
		<title>Bootstrap</title>
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
		<!-- Optional theme -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"/>		
		<!-- Latest compiled and minified JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		<style>
			.class01 {
				padding:2vw;
			}
		</style>
	</head>
	<body>
		<div class="container class01">
			<form class="well col-xs-6 col-sm-6 col-md-4 col-lg-4 center-block">
			  <div class="form-group">
			    <label for="email">Email address</label>
			    <input type="email" class="form-control" id="email"/>
			  </div>
			  <div class="form-group">
			    <label for="pwd">Password</label>
			    <input type="password" class="form-control" id="pwd"/>
			  </div>
			  <div class="checkbox">
			    <label><input type="checkbox"/>Remember me</label>
			  </div>
			  <button type="submit" class="btn btn-large btn-primary">Submit</button>
			</form>
		</div>
	</body>
</html>
Election Worpdress plugin

Election WordPress plugin

Elections Plugin is an essential WordPress plugin and the simply way if you whish to create and run your own election campaign for your company or association.
You can create, manage and run your own election campaign.
Click on this link for more information:
http://www.wp-elections.com/