Here, I have created a jQuery plugin. It takes as its parameter the elements containing navigation items from a Twitter Bootstrap page. The plugin then matches the page URL with a navigation item and makes it active.
Find the code here.
Wednesday 23 March 2016
Dynamically make items active in Twitter Bootstrap navigation using jQuery
Tuesday 22 March 2016
Search multiple database tables using PDO
I have created a PHP class based on PDO. It searches multiple database tables. It handles boolean and normal string queries. Results are displayed as Twitter Bootstrap tables. Find it here.
Monday 21 March 2016
H1 shows window width
I'm often trying understand which media queries to add to my CSS in order to control changes in the display of content. For this I need to see the window width as it resizes. There are other ways, but I find it more convenient if the page title show the window width.
To enable this, I add the following jQuery code, which is also available as a public gist here.
$(window).resize(function()
{
$('h1').text($(window).width());
});
To enable this, I add the following jQuery code, which is also available as a public gist here.
$(window).resize(function()
{
$('h1').text($(window).width());
});
Golden ratio
I've been reading this article recently on use of the golden ratio within web design.
As a result I've developed a jQuery plugin to help in its implementation within my pages. You can find it here on my github page. It also include an index.html and custom.css to help demonstrate its use.
There are 2 implementations:
As a result I've developed a jQuery plugin to help in its implementation within my pages. You can find it here on my github page. It also include an index.html and custom.css to help demonstrate its use.
There are 2 implementations:
- Creating a rectangle where the golden ratio width is derived from the height
- Creating 2 rectangles based on their container height
Tuesday 16 June 2015
Change content using select menu in a Bootstrap page with the help of jQuery
I recently delivered the solution to a stackoverflow question. The question was around using a select menu to display different content contained in divs using jQuery.
Below is the solution, but the only difference is that I've contained it in a Bootstrap page. The important bit are highlighted in red.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap select content</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
body
{
padding-top:2em;
}
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="container">
<div class="col-md-12">
<select name="type" id="type" class="form-control">
<option>Select some content</option>
<option value="bar">Bar</option>
<option value="restaurant">Restaurant</option>
<option value="hotel">Hotel</option>
</select>
<hr />
<div id="bar" class="type well">Bar</div>
<div id="restaurant" class="type well">Restaurant</div>
<div id="hotel" class="type well">Hotel</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
(function()
{
$('div.type').hide();
$('#type').change(function()
{
$('div.type').hide();
$('#'+$(this).val()).toggle();
});
})();
</script>
</body>
</html>
Below is the solution, but the only difference is that I've contained it in a Bootstrap page. The important bit are highlighted in red.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap select content</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
body
{
padding-top:2em;
}
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="container">
<div class="col-md-12">
<select name="type" id="type" class="form-control">
<option>Select some content</option>
<option value="bar">Bar</option>
<option value="restaurant">Restaurant</option>
<option value="hotel">Hotel</option>
</select>
<hr />
<div id="bar" class="type well">Bar</div>
<div id="restaurant" class="type well">Restaurant</div>
<div id="hotel" class="type well">Hotel</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
(function()
{
$('div.type').hide();
$('#type').change(function()
{
$('div.type').hide();
$('#'+$(this).val()).toggle();
});
})();
</script>
</body>
</html>
Wednesday 10 June 2015
Bootstrap formhandler calling class methods with JSON returned and processed
This entry offers a number of techniques through 4 files.
$myclass->mymethod;
This approach is a quick way of utilising many classes. It does not require a .htaccess file to simplify form actions and is flexible in its handling of returned data through JSON.
Have fun.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form handler for many PHP classes using jQuery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
body
{
margin-top:2em;
}
#message, #data-table
{
display:none;
}
</style>
</head>
<body>
<div class="row">
<div class="container">
<div class="col-md-12">
<div id="message" class="alert alert-success" role="alert"></div>
<!-- <form action="myclassname/myclassmethod_string" method="POST"> -->
<!-- <form action="myclassname/myclassmethod_array" method="POST"> -->
<form action="myclassname/myclassmethod_object" method="POST">
<div class="form-group">
<label for="name"></label>
<input type="text" name="name" class="form-control" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<table id="data-table" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="custom.js"></script>
</body>
</html>
{
$('form').on('submit', function(event)
{
$.post('formhandler.php?action='+$(this).attr('action'), $(this).serialize(), function(data)
{
var json_obj = JSON.parse(data);
if(json_obj.hasOwnProperty('message'))
{
$('#message').text(json_obj.message);
$('#message').show();
$('#message').fadeOut(3000);
}
else
{
$.each(json_obj, function(name,age)
{
$('#data-table > tbody').appendRow(name,age);
});
$('#data-table').show();
}
});
event.preventDefault();
});
})();
$.fn.appendRow = function()
{
var s = '<tr>';
for (var i = 0; i < arguments.length; i++)
{
s += '<td>'+arguments[i]+'</td>';
}
s += '</tr>';
return $(this).append(s);
}
if(isset($_GET['action']))
{
$arr = split('/', $_GET['action']);
$class = $arr[0];
$method = $arr[1];
require_once $class.'.class.php';
if(class_exists($class))
{
$evalStr = '$'.$class.' = new '.$class.'($_POST);';
eval($evalStr);
if(method_exists($class, $method))
{
$evalStr = '$returnValue = $'.$class.'->'.$method.'();';
eval($evalStr);
}
else
{
$returnValue = 'Method does not exist';
}
}
else
{
$returnValue = 'Class does not exist';
}
}
else
{
$returnValue = 'No action given';
}
if(is_object($returnValue) || is_array($returnValue))
{
echo json_encode($returnValue);
}
else
{
$returnArr = array('message'=>$returnValue);
echo json_encode($returnArr);
}
?>
class myclassname
{
private $pa;
function __construct($postArray = array())
{
$this->pa = $postArray;
}
function myclassmethod_string()
{
return 'Your name is '.$this->pa['name'];
}
function myclassmethod_array()
{
$myArr = array('Peter'=>'35', 'Ben'=>'37', 'Joe'=>'43');
return $myArr;
}
function myclassmethod_object()
{
$myObj = (object) array('Peter'=>'35', 'Ben'=>'37', 'Joe'=>'43');
return $myObj;
}
function __destruct()
{
}
}
?>
- index.php contains a message alert which will only be displayed when there is a message to put in it. The forms use an action which contains the name of a class and method which will be used to process the results. There is also a call to custom.js
- custom.js handles the form submissions and delivers the data returned to the page. It passes the form action and field content to formhandler.php. It receives JSON which then is either passed to a message alert or a data table.
- formhandler.php receives the call from custom.js. This contains the form action and field content. It takes the form action and uses them to create calls to classes and methods named in the form action. For example and action of myclass/mymethod would be used to create calls similar to those below. The inclusion of the $_POST array allows the form field content to be passed to the class. The data returned is then passed back to custom.js for processing.
$myclass->mymethod;
- myclassname.class.php contains the example class and methods. The class receives the $_POST array and processes its content. There are 3 methods which demonstrate how to return a string, an array and an object.
This approach is a quick way of utilising many classes. It does not require a .htaccess file to simplify form actions and is flexible in its handling of returned data through JSON.
Have fun.
index.php
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form handler for many PHP classes using jQuery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
body
{
margin-top:2em;
}
#message, #data-table
{
display:none;
}
</style>
</head>
<body>
<div class="row">
<div class="container">
<div class="col-md-12">
<div id="message" class="alert alert-success" role="alert"></div>
<!-- <form action="myclassname/myclassmethod_string" method="POST"> -->
<!-- <form action="myclassname/myclassmethod_array" method="POST"> -->
<form action="myclassname/myclassmethod_object" method="POST">
<div class="form-group">
<label for="name"></label>
<input type="text" name="name" class="form-control" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<table id="data-table" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="custom.js"></script>
</body>
</html>
custom.js
(function(){
$('form').on('submit', function(event)
{
$.post('formhandler.php?action='+$(this).attr('action'), $(this).serialize(), function(data)
{
var json_obj = JSON.parse(data);
if(json_obj.hasOwnProperty('message'))
{
$('#message').text(json_obj.message);
$('#message').show();
$('#message').fadeOut(3000);
}
else
{
$.each(json_obj, function(name,age)
{
$('#data-table > tbody').appendRow(name,age);
});
$('#data-table').show();
}
});
event.preventDefault();
});
})();
$.fn.appendRow = function()
{
var s = '<tr>';
for (var i = 0; i < arguments.length; i++)
{
s += '<td>'+arguments[i]+'</td>';
}
s += '</tr>';
return $(this).append(s);
}
formhandler.php
<?phpif(isset($_GET['action']))
{
$arr = split('/', $_GET['action']);
$class = $arr[0];
$method = $arr[1];
require_once $class.'.class.php';
if(class_exists($class))
{
$evalStr = '$'.$class.' = new '.$class.'($_POST);';
eval($evalStr);
if(method_exists($class, $method))
{
$evalStr = '$returnValue = $'.$class.'->'.$method.'();';
eval($evalStr);
}
else
{
$returnValue = 'Method does not exist';
}
}
else
{
$returnValue = 'Class does not exist';
}
}
else
{
$returnValue = 'No action given';
}
if(is_object($returnValue) || is_array($returnValue))
{
echo json_encode($returnValue);
}
else
{
$returnArr = array('message'=>$returnValue);
echo json_encode($returnArr);
}
?>
myclassname.class.php
<?phpclass myclassname
{
private $pa;
function __construct($postArray = array())
{
$this->pa = $postArray;
}
function myclassmethod_string()
{
return 'Your name is '.$this->pa['name'];
}
function myclassmethod_array()
{
$myArr = array('Peter'=>'35', 'Ben'=>'37', 'Joe'=>'43');
return $myArr;
}
function myclassmethod_object()
{
$myObj = (object) array('Peter'=>'35', 'Ben'=>'37', 'Joe'=>'43');
return $myObj;
}
function __destruct()
{
}
}
?>
Wednesday 22 April 2015
Display PHP code in the browser
There are 2 ways to do this I've recently discovered:
First, use the highlight_file command thus,
highlight_file('hello.php');
Second, allow .phps files. To do this (I'm using an Ubuntu Apache on local host here), go to the file /etc/apache2/mods-available/php5.conf
Change the line highlighted in red to the one highlighted in blue
<FilesMatch ".+\.phps$">
SetHandler application/x-httpd-php-source
# Deny access to raw php sources by default
# To re-enable it's recommended to enable access to the files
# only in specific virtual host or directory
Order Deny,Allow
Deny from all
Allow from all
</FilesMatch>
Now, if you rename hello.php to hello.phps and display it in your browser, it will show as PHP code.
Hope this helps.
First, use the highlight_file command thus,
highlight_file('hello.php');
Second, allow .phps files. To do this (I'm using an Ubuntu Apache on local host here), go to the file /etc/apache2/mods-available/php5.conf
Change the line highlighted in red to the one highlighted in blue
<FilesMatch ".+\.phps$">
SetHandler application/x-httpd-php-source
# Deny access to raw php sources by default
# To re-enable it's recommended to enable access to the files
# only in specific virtual host or directory
Order Deny,Allow
Deny from all
Allow from all
</FilesMatch>
Now, if you rename hello.php to hello.phps and display it in your browser, it will show as PHP code.
Hope this helps.
Subscribe to:
Posts (Atom)