<?php
if (!defined('BASEPATH'))
exit('No direct script access allowed');
//webmaster email
$config['noreply_email_setting'] = Array(
'protocol' => 'smtp',
'mailpath' => '/usr/sbin/sendmail',
'smtp_crypto' => 'tls',//tls or ssl
'smtp_host' => 'smtp.gmail.com',//'ssl://smtp.googlemail.com'//ssl://smtp.gmail.com
'smtp_port' => 587,//465//25
'smtp_timeout' => 5,
'smtp_user' => 'boroog@gmail.com',
'smtp_pass' => '******',
'mailtype' => 'html',
'charset' => 'utf-8',
'newline' => "\r\n",
'wordwrap' => TRUE,
'validation' => TRUE // bool whether to validate email or not
);
Friday, November 15, 2013
Tuesday, November 5, 2013
jquery file upload plugin with php method with custom progress bar
var url = window.location.hostname === 'blueimp.github.io' ?
'//jquery-file-upload.appspot.com/' : '<?php echo
admin_url('media/upload'); ?>';
кодыг сайн анхаар "window.location.hostname" ;
server side php
private function initialize() {
if ($this->_server_var('REQUEST_METHOD') == 'GET') {
$seleted_dir_id = $this->session->userdata(self::$SELECTED_DIR_ID);
if (empty($seleted_dir_id)) {
$seleted_dir_id = 0;
}
if ($seleted_dir_id === TRUE) {
$seleted_dir_id = 0;
}
try {
$files = $this->media_model->get_list(array('folder_id' => $seleted_dir_id));
echo json_encode($files);
} catch (Exception $ex) {
log_message('error', $ex->getMessage());
}
}
}
public function upload() {
$this->initialize();
$upload = isset($_FILES['files']) ? $_FILES['files'] : null;
// Parse the Content-Disposition header, if available:
$file_name = $this->_server_var('HTTP_CONTENT_DISPOSITION') ? rawurldecode(preg_replace('/(^[^"]+")|("$)/', '', $this->_server_var('HTTP_CONTENT_DISPOSITION'))) : null;
// Parse the Content-Range header, which has the following form:
// Content-Range: bytes 0-524287/2000000
$content_range = $this->_server_var('HTTP_CONTENT_RANGE') ? preg_split('/[^0-9]+/', $this->_server_var('HTTP_CONTENT_RANGE')) : null;
$size = $content_range ? $content_range[3] : null;
$files = array();
if ($upload && is_array($upload['tmp_name'])) {
// param_name is an array identifier like "files[]",
// $_FILES is a multi-dimensional array:
foreach ($upload['tmp_name'] as $index => $value) {
$files[] = $this->_handle_file_upload(
$upload['tmp_name'][$index], $file_name ? $file_name : $upload['name'][$index], $size ? $size : $upload['size'][$index], $upload['type'][$index], $upload['error'][$index], $index, $content_range
);
}
} else {
// param_name is a single object identifier like "file",
// $_FILES is a one-dimensional array:
$files[] = $this->_handle_file_upload(
isset($upload['tmp_name']) ? $upload['tmp_name'] : null, $file_name ? $file_name : (isset($upload['name']) ? $upload['name'] : null), $size ? $size : (isset($upload['size']) ? $upload['size'] : $this->_server_var('CONTENT_LENGTH')), isset($upload['type']) ? $upload['type'] : $this->_server_var('CONTENT_TYPE'), isset($upload['error']) ? $upload['error'] : null, null, $content_range
);
}
echo json_encode($files);
}
// -----------------------------------------------------------------------
private function _handle_file_upload($uploaded_file, $name, $size, $type, $error, $index = null, $content_range = null) {
$file = new stdClass();
$file->name = $this->_file_name($name, $type, $index, $content_range);
$file->size = $this->_fix_integer_overflow(intval($size));
$file->type = $type;
$seleted_dir_id = $this->session->userdata(self::$SELECTED_DIR_ID);
$seleted_dir_path = $this->session->userdata(self::$SELECTED_DIR_PATH);
if (!empty($seleted_dir_path)) {
$seleted_dir_path = $seleted_dir_path . '/';
}
$validate = $this->_validate_file($uploaded_file, $file, $error, $index);
if ($seleted_dir_id && $validate) {
if ($seleted_dir_id === TRUE) {
$seleted_dir_id = 0;
}
//path generate
$upload_dir = UPLOADPATH . $seleted_dir_path;
if (!is_dir($upload_dir)) {
mkdir($upload_dir, $this->config->item('mkdir_mode'), true);
}
$file_path = $upload_dir . $file->name;
//check is uploaded file
$append_file = $content_range && is_file($file_path) && $file->size > $this->_file_size($file_path);
if ($uploaded_file && is_uploaded_file($uploaded_file)) {
// multipart/formdata uploads (POST method uploads)
if ($append_file) {
file_put_contents(
$file_path, fopen($uploaded_file, 'r'), FILE_APPEND
);
} else {
move_uploaded_file($uploaded_file, $file_path);
}
} else {
// Non-multipart uploads (PUT method support)
file_put_contents(
$file_path, fopen('php://input', 'r'), $append_file ? FILE_APPEND : 0
);
}
//check is upload success
$file_size = $this->_file_size($file_path, $append_file);
if ($file_size === $file->size) {
$fext = strtolower(strrchr($file->name, '.'));
$fname = empty($fext) ? $file->name : stristr($file->name, $fext, true);
$fret = $this->thumbmanager->get_mimetype_groupname($fext);
if ($fret === FALSE) {
$file->error = 'Зөвшөөрөгдсөн файлын төрөл биш байна!';
} else {
$mimetype = (is_array($fret[1]) ? $fret[1][0] : $fret[1]);
$media = array();
$media['typecode'] = $fret[0];
$media['folder_id'] = $seleted_dir_id;
$media['filename'] = $fname;
$media['extension'] = substr($fext, 1);
$media['mimetype'] = $mimetype;
$media['size'] = $file_size;
$media['createddate'] = utc_datetime();
$media['user_id'] = User()->get_user_id();
if ($this->media_model->insert($media) > 0) {
$file->url = $this->thumbmanager->thumb_url($media);
}
}
} else {
$file->size = $file_size;
if (!$content_range && $this->config->item('discard_aborted_uploads')) {
unlink($file_path);
$file->error = 'abort';
}
}
}
return $file;
}
CSS
/*
Document : file
Created on : Nov 5, 2013, 10:12:17 PM
Author : boroo
Description:
Purpose of the stylesheet follows.
*/
.process {
display: block;
position: relative;
height: 20px;
width: 100%;
}
.progress-bar {
background: url(images/progressbar.gif) repeat-x scroll left top #333;
}
.progress-bar-success {
float: left;
height: 20px;
position: relative;
}
.fileinput-button {
position: relative;
overflow: hidden;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
font-size: 200px;
direction: ltr;
cursor: pointer;
}
/* Fixes for IE < 8 */
@media screen\9 {
.fileinput-button input {
filter: alpha(opacity=0);
font-size: 100%;
height: 100%;
}
}
HTML
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="<?php echo theme_url('jQuery-File-Upload-9.0.1/js/vendor/jquery.ui.widget.js', 'shared'); ?>"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="<?php echo theme_url('jQuery-File-Upload-9.0.1/js/jquery.iframe-transport.js', 'shared'); ?>"></script>
<!-- The basic File Upload plugin -->
<script src="<?php echo theme_url('jQuery-File-Upload-9.0.1/js/jquery.fileupload.js', 'shared'); ?>"></script>
<script>
/*jslint unparam: true */
/*global window, $ */
$(function() {
'use strict';
// Change this to the location of your server-side upload handler:
var url = window.location.hostname === 'blueimp.github.io' ? '//jquery-file-upload.appspot.com/' : '<?php echo admin_url('media/upload'); ?>';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
process: [
{
action: 'load',
fileTypes: /^image\/(gif|jpeg|png)$/,
maxFileSize: 5000000 // 5MB
},
{
action: 'resize',
maxWidth: 1440,
maxHeight: 900
},
{
action: 'save'
}
],
done: function(e, data) {
if (data && typeof data.result !== 'undefined') {
try {
for (var key in data.result) {
var item = data.result[key];
$('<img/>').attr('src', '<?php echo site_url(); ?>' + item.url)
.appendTo('#files');
}
} catch (ex) {
alert(ex);
}
}
},
error: function(e, data) {
var a = 1;
},
progressall: function(e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css('width', progress + '%');
}
}).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
кодыг сайн анхаар "window.location.hostname" ;
server side php
private function initialize() {
if ($this->_server_var('REQUEST_METHOD') == 'GET') {
$seleted_dir_id = $this->session->userdata(self::$SELECTED_DIR_ID);
if (empty($seleted_dir_id)) {
$seleted_dir_id = 0;
}
if ($seleted_dir_id === TRUE) {
$seleted_dir_id = 0;
}
try {
$files = $this->media_model->get_list(array('folder_id' => $seleted_dir_id));
echo json_encode($files);
} catch (Exception $ex) {
log_message('error', $ex->getMessage());
}
}
}
public function upload() {
$this->initialize();
$upload = isset($_FILES['files']) ? $_FILES['files'] : null;
// Parse the Content-Disposition header, if available:
$file_name = $this->_server_var('HTTP_CONTENT_DISPOSITION') ? rawurldecode(preg_replace('/(^[^"]+")|("$)/', '', $this->_server_var('HTTP_CONTENT_DISPOSITION'))) : null;
// Parse the Content-Range header, which has the following form:
// Content-Range: bytes 0-524287/2000000
$content_range = $this->_server_var('HTTP_CONTENT_RANGE') ? preg_split('/[^0-9]+/', $this->_server_var('HTTP_CONTENT_RANGE')) : null;
$size = $content_range ? $content_range[3] : null;
$files = array();
if ($upload && is_array($upload['tmp_name'])) {
// param_name is an array identifier like "files[]",
// $_FILES is a multi-dimensional array:
foreach ($upload['tmp_name'] as $index => $value) {
$files[] = $this->_handle_file_upload(
$upload['tmp_name'][$index], $file_name ? $file_name : $upload['name'][$index], $size ? $size : $upload['size'][$index], $upload['type'][$index], $upload['error'][$index], $index, $content_range
);
}
} else {
// param_name is a single object identifier like "file",
// $_FILES is a one-dimensional array:
$files[] = $this->_handle_file_upload(
isset($upload['tmp_name']) ? $upload['tmp_name'] : null, $file_name ? $file_name : (isset($upload['name']) ? $upload['name'] : null), $size ? $size : (isset($upload['size']) ? $upload['size'] : $this->_server_var('CONTENT_LENGTH')), isset($upload['type']) ? $upload['type'] : $this->_server_var('CONTENT_TYPE'), isset($upload['error']) ? $upload['error'] : null, null, $content_range
);
}
echo json_encode($files);
}
// -----------------------------------------------------------------------
private function _handle_file_upload($uploaded_file, $name, $size, $type, $error, $index = null, $content_range = null) {
$file = new stdClass();
$file->name = $this->_file_name($name, $type, $index, $content_range);
$file->size = $this->_fix_integer_overflow(intval($size));
$file->type = $type;
$seleted_dir_id = $this->session->userdata(self::$SELECTED_DIR_ID);
$seleted_dir_path = $this->session->userdata(self::$SELECTED_DIR_PATH);
if (!empty($seleted_dir_path)) {
$seleted_dir_path = $seleted_dir_path . '/';
}
$validate = $this->_validate_file($uploaded_file, $file, $error, $index);
if ($seleted_dir_id && $validate) {
if ($seleted_dir_id === TRUE) {
$seleted_dir_id = 0;
}
//path generate
$upload_dir = UPLOADPATH . $seleted_dir_path;
if (!is_dir($upload_dir)) {
mkdir($upload_dir, $this->config->item('mkdir_mode'), true);
}
$file_path = $upload_dir . $file->name;
//check is uploaded file
$append_file = $content_range && is_file($file_path) && $file->size > $this->_file_size($file_path);
if ($uploaded_file && is_uploaded_file($uploaded_file)) {
// multipart/formdata uploads (POST method uploads)
if ($append_file) {
file_put_contents(
$file_path, fopen($uploaded_file, 'r'), FILE_APPEND
);
} else {
move_uploaded_file($uploaded_file, $file_path);
}
} else {
// Non-multipart uploads (PUT method support)
file_put_contents(
$file_path, fopen('php://input', 'r'), $append_file ? FILE_APPEND : 0
);
}
//check is upload success
$file_size = $this->_file_size($file_path, $append_file);
if ($file_size === $file->size) {
$fext = strtolower(strrchr($file->name, '.'));
$fname = empty($fext) ? $file->name : stristr($file->name, $fext, true);
$fret = $this->thumbmanager->get_mimetype_groupname($fext);
if ($fret === FALSE) {
$file->error = 'Зөвшөөрөгдсөн файлын төрөл биш байна!';
} else {
$mimetype = (is_array($fret[1]) ? $fret[1][0] : $fret[1]);
$media = array();
$media['typecode'] = $fret[0];
$media['folder_id'] = $seleted_dir_id;
$media['filename'] = $fname;
$media['extension'] = substr($fext, 1);
$media['mimetype'] = $mimetype;
$media['size'] = $file_size;
$media['createddate'] = utc_datetime();
$media['user_id'] = User()->get_user_id();
if ($this->media_model->insert($media) > 0) {
$file->url = $this->thumbmanager->thumb_url($media);
}
}
} else {
$file->size = $file_size;
if (!$content_range && $this->config->item('discard_aborted_uploads')) {
unlink($file_path);
$file->error = 'abort';
}
}
}
return $file;
}
CSS
/*
Document : file
Created on : Nov 5, 2013, 10:12:17 PM
Author : boroo
Description:
Purpose of the stylesheet follows.
*/
.process {
display: block;
position: relative;
height: 20px;
width: 100%;
}
.progress-bar {
background: url(images/progressbar.gif) repeat-x scroll left top #333;
}
.progress-bar-success {
float: left;
height: 20px;
position: relative;
}
.fileinput-button {
position: relative;
overflow: hidden;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
font-size: 200px;
direction: ltr;
cursor: pointer;
}
/* Fixes for IE < 8 */
@media screen\9 {
.fileinput-button input {
filter: alpha(opacity=0);
font-size: 100%;
height: 100%;
}
}
HTML
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="<?php echo theme_url('jQuery-File-Upload-9.0.1/js/vendor/jquery.ui.widget.js', 'shared'); ?>"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="<?php echo theme_url('jQuery-File-Upload-9.0.1/js/jquery.iframe-transport.js', 'shared'); ?>"></script>
<!-- The basic File Upload plugin -->
<script src="<?php echo theme_url('jQuery-File-Upload-9.0.1/js/jquery.fileupload.js', 'shared'); ?>"></script>
<script>
/*jslint unparam: true */
/*global window, $ */
$(function() {
'use strict';
// Change this to the location of your server-side upload handler:
var url = window.location.hostname === 'blueimp.github.io' ? '//jquery-file-upload.appspot.com/' : '<?php echo admin_url('media/upload'); ?>';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
process: [
{
action: 'load',
fileTypes: /^image\/(gif|jpeg|png)$/,
maxFileSize: 5000000 // 5MB
},
{
action: 'resize',
maxWidth: 1440,
maxHeight: 900
},
{
action: 'save'
}
],
done: function(e, data) {
if (data && typeof data.result !== 'undefined') {
try {
for (var key in data.result) {
var item = data.result[key];
$('<img/>').attr('src', '<?php echo site_url(); ?>' + item.url)
.appendTo('#files');
}
} catch (ex) {
alert(ex);
}
}
},
error: function(e, data) {
var a = 1;
},
progressall: function(e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css('width', progress + '%');
}
}).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
Sunday, November 3, 2013
codeigniter media file manager example , php , json
<?php
if (!defined('BASEPATH'))
exit('No direct script access allowed');
class media extends HO_Admin {
public function __construct() {
parent::__construct();
$this->load->config('uploader');
$this->load->model(array('media_model', 'mediafolder_model'));
$this->load->library('NetAdvDirectoryService', NULL, '_directoryService');
$this->load->library('NetAdvImageService', NULL, '_imageService');
$this->AllowedFileTypes = $this->config->item('AllowedFileTypes');
$this->load->helper('file');
}
public function index() {
$this->view();
}
public function browser($dir = 0) {
if (empty($dir)) {
$dir = 0;
}
$selected_dir = $this->mediafolder_model->get($dir);
if(!empty($selected_dir)) {
$selected_dir['selected_dir_breadcrumbs'] = $this->mediafolder_model->collect_parent_folders($selected_dir, NULL, TRUE);
}
$child_folders = $this->mediafolder_model->get_list(array('parent_id' => $dir));
$child_medias = $this->media_model->get_list(array('folder_id' => $dir));
$data = array();
$data['selected_dir'] = $selected_dir;
$data['dir_list'] = $child_folders;
$data['file_list'] = $child_medias;
// $files = scandir($dir);
// foreach ($files as $file) {
// if ($file != '.' && $file != '..') {
// if (is_file($dir . $file)) {
// $info = pathinfo($dir . $file);
// $file_ext = strtolower($info['extension']);
// if (in_array($file_ext, $this->AllowedFileTypes)) {
// $data['file_list'][] = array(
// 'basename' => $info['basename'],
// 'extension' => $file_ext,
// 'filename' => $info['filename']);
// }
// } elseif (is_dir($dir . $file)) {
// $data['dir_list'][] = $file;
// }
// }
// }
$this->view('media/partial/filemanager-browser', $data);
}
public function delete() {
$command = $this->input->get('file');
if (!empty($command)) {
try {
if (is_dir($command)) {
if (is_dir_empty($command)) {
$this->success($command . ' санг устгачихлаа!');
} else {
$this->error($command . ' санд файл байгаа тул устгах боломжгүй');
}
} elseif (is_file($command)) {
// $this->load->model('article_media_model');
// if ($this->article_media_model->media_in_article($command)) {
// $this->error($command . ' файл ашиглагдаж байгаа тул устгах боломжгүй');
// }
unlink($command);
$this->success($command . ' файлыг устгачихлаа!');
}
} catch (Exception $ex) {
$this->error($ex->getMessage());
}
}
}
public function rename() {
$command = $this->input->get('filename');
if (!empty($command)) {
try {
if (is_dir($command)) {
if (is_dir_empty($command)) {
$this->success($command . ' санг устгачихлаа!');
} else {
$this->error($command . ' санд файл байгаа тул устгах боломжгүй');
}
} elseif (is_file($command)) {
// $this->load->model('article_media_model');
// if ($this->article_media_model->media_in_article($command)) {
// $this->error($command . ' файл ашиглагдаж байгаа тул устгах боломжгүй');
// }
unlink($command);
$this->success($command . ' файлыг устгачихлаа!');
}
} catch (Exception $ex) {
$this->error($ex->getMessage());
}
}
}
public function fileNameDialog() {
$data = array();
$data['command'] = $this->input->get('command');
$data['filename'] = $this->input->get('filename');
$this->view('media/partial/filename-dialog', $data);
}
public function qqupload($path = '') {
if (empty($path)) {
$this->view();
} else {
$path = trim($path) . '/';
try {
$inputHandler = false;
$qqfile = $this->input->post('qqfile');
if (empty($qqfile)) {
foreach ($_FILES as $file) {
$qqfile = $file["name"];
$ftype = $file["type"];
$fsize = $file["size"] / 1024;
$ftmp = $file["tmp_name"];
$inputHandler = fopen($ftmp, "rb");
}
} else {
$inputHandler = fopen('php://input', "r");
}
// create a temp file where to save data from the input stream
$fileHandler = fopen($path . $qqfile, "w+");
// save data from the input stream
while (true) {
$buffer = fgets($inputHandler, 4096);
if (strlen($buffer) == 0) {
fclose($inputHandler);
fclose($fileHandler);
return true;
}
fwrite($fileHandler, $buffer);
}
// done
} catch (Exception $ex) {
echo json_encode(array('success' => false, 'message' => $ex->getMessage()));
}
echo json_encode(array('success' => true));
}
}
public function upload() {
$this->load->library('UploadHandler');
}
}
if (!defined('BASEPATH'))
exit('No direct script access allowed');
class media extends HO_Admin {
public function __construct() {
parent::__construct();
$this->load->config('uploader');
$this->load->model(array('media_model', 'mediafolder_model'));
$this->load->library('NetAdvDirectoryService', NULL, '_directoryService');
$this->load->library('NetAdvImageService', NULL, '_imageService');
$this->AllowedFileTypes = $this->config->item('AllowedFileTypes');
$this->load->helper('file');
}
public function index() {
$this->view();
}
public function browser($dir = 0) {
if (empty($dir)) {
$dir = 0;
}
$selected_dir = $this->mediafolder_model->get($dir);
if(!empty($selected_dir)) {
$selected_dir['selected_dir_breadcrumbs'] = $this->mediafolder_model->collect_parent_folders($selected_dir, NULL, TRUE);
}
$child_folders = $this->mediafolder_model->get_list(array('parent_id' => $dir));
$child_medias = $this->media_model->get_list(array('folder_id' => $dir));
$data = array();
$data['selected_dir'] = $selected_dir;
$data['dir_list'] = $child_folders;
$data['file_list'] = $child_medias;
// $files = scandir($dir);
// foreach ($files as $file) {
// if ($file != '.' && $file != '..') {
// if (is_file($dir . $file)) {
// $info = pathinfo($dir . $file);
// $file_ext = strtolower($info['extension']);
// if (in_array($file_ext, $this->AllowedFileTypes)) {
// $data['file_list'][] = array(
// 'basename' => $info['basename'],
// 'extension' => $file_ext,
// 'filename' => $info['filename']);
// }
// } elseif (is_dir($dir . $file)) {
// $data['dir_list'][] = $file;
// }
// }
// }
$this->view('media/partial/filemanager-browser', $data);
}
public function delete() {
$command = $this->input->get('file');
if (!empty($command)) {
try {
if (is_dir($command)) {
if (is_dir_empty($command)) {
$this->success($command . ' санг устгачихлаа!');
} else {
$this->error($command . ' санд файл байгаа тул устгах боломжгүй');
}
} elseif (is_file($command)) {
// $this->load->model('article_media_model');
// if ($this->article_media_model->media_in_article($command)) {
// $this->error($command . ' файл ашиглагдаж байгаа тул устгах боломжгүй');
// }
unlink($command);
$this->success($command . ' файлыг устгачихлаа!');
}
} catch (Exception $ex) {
$this->error($ex->getMessage());
}
}
}
public function rename() {
$command = $this->input->get('filename');
if (!empty($command)) {
try {
if (is_dir($command)) {
if (is_dir_empty($command)) {
$this->success($command . ' санг устгачихлаа!');
} else {
$this->error($command . ' санд файл байгаа тул устгах боломжгүй');
}
} elseif (is_file($command)) {
// $this->load->model('article_media_model');
// if ($this->article_media_model->media_in_article($command)) {
// $this->error($command . ' файл ашиглагдаж байгаа тул устгах боломжгүй');
// }
unlink($command);
$this->success($command . ' файлыг устгачихлаа!');
}
} catch (Exception $ex) {
$this->error($ex->getMessage());
}
}
}
public function fileNameDialog() {
$data = array();
$data['command'] = $this->input->get('command');
$data['filename'] = $this->input->get('filename');
$this->view('media/partial/filename-dialog', $data);
}
public function qqupload($path = '') {
if (empty($path)) {
$this->view();
} else {
$path = trim($path) . '/';
try {
$inputHandler = false;
$qqfile = $this->input->post('qqfile');
if (empty($qqfile)) {
foreach ($_FILES as $file) {
$qqfile = $file["name"];
$ftype = $file["type"];
$fsize = $file["size"] / 1024;
$ftmp = $file["tmp_name"];
$inputHandler = fopen($ftmp, "rb");
}
} else {
$inputHandler = fopen('php://input', "r");
}
// create a temp file where to save data from the input stream
$fileHandler = fopen($path . $qqfile, "w+");
// save data from the input stream
while (true) {
$buffer = fgets($inputHandler, 4096);
if (strlen($buffer) == 0) {
fclose($inputHandler);
fclose($fileHandler);
return true;
}
fwrite($fileHandler, $buffer);
}
// done
} catch (Exception $ex) {
echo json_encode(array('success' => false, 'message' => $ex->getMessage()));
}
echo json_encode(array('success' => true));
}
}
public function upload() {
$this->load->library('UploadHandler');
}
}
Friday, November 1, 2013
javascript html 5 FileReader example for php input stream
html
<input name="upload_files" id="upload_files" multiple="multiple" type="file">
javascript
function upload(fileInputId, fileIndex)
{
// take the file from the input
var file = document.getElementById(fileInputId).files[fileIndex];
var reader = new FileReader();
reader.readAsBinaryString(file); // alternatively you can use readAsDataURL
reader.onloadend = function(evt)
{
// create XHR instance
xhr = new XMLHttpRequest();
// send the file through POST
xhr.open("POST", 'upload.php', true);
// make sure we have the sendAsBinary method on all browsers
XMLHttpRequest.prototype.mySendAsBinary = function(text){
var data = new ArrayBuffer(text.length);
var ui8a = new Uint8Array(data, 0);
for (var i = 0; i < text.length; i++) ui8a[i] = (text.charCodeAt(i) & 0xff);
if(typeof window.Blob == "function")
{
var blob = new Blob([data]);
}else{
var bb = new (window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder)();
bb.append(data);
var blob = bb.getBlob();
}
this.send(blob);
}
// let's track upload progress
var eventSource = xhr.upload || xhr;
eventSource.addEventListener("progress", function(e) {
// get percentage of how much of the current file has been sent
var position = e.position || e.loaded;
var total = e.totalSize || e.total;
var percentage = Math.round((position/total)*100);
// here you should write your own code how you wish to proces this
});
// state change observer - we need to know when and if the file was successfully uploaded
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
if(xhr.status == 200)
{
// process success
}else{
// process error
}
}
};
// start sending
xhr.mySendAsBinary(evt.target.result);
};
}
server side(php)
// read contents from the input stream
$inputHandler = fopen('php://input', "r");
// create a temp file where to save data from the input stream
$fileHandler = fopen('/tmp/myfile.tmp', "w+");
// save data from the input stream
while(true) {
$buffer = fgets($inputHandler, 4096);
if (strlen($buffer) == 0) {
fclose($inputHandler);
fclose($fileHandler);
return true;
}
fwrite($fileHandler, $buffer);
}
- See more at:
http://www.webiny.com/blog/2012/05/07/webiny-file-upload-with-html5-and-ajax-using-php-streams/#sthash.aIgHd8zw.dpuf
- See more at:
http://www.webiny.com/blog/2012/05/07/webiny-file-upload-with-html5-and-ajax-using-php-streams/#sthash.aIgHd8zw.dpuf
<input name="upload_files" id="upload_files" multiple="multiple" type="file">
javascript
function upload(fileInputId, fileIndex)
{
// take the file from the input
var file = document.getElementById(fileInputId).files[fileIndex];
var reader = new FileReader();
reader.readAsBinaryString(file); // alternatively you can use readAsDataURL
reader.onloadend = function(evt)
{
// create XHR instance
xhr = new XMLHttpRequest();
// send the file through POST
xhr.open("POST", 'upload.php', true);
// make sure we have the sendAsBinary method on all browsers
XMLHttpRequest.prototype.mySendAsBinary = function(text){
var data = new ArrayBuffer(text.length);
var ui8a = new Uint8Array(data, 0);
for (var i = 0; i < text.length; i++) ui8a[i] = (text.charCodeAt(i) & 0xff);
if(typeof window.Blob == "function")
{
var blob = new Blob([data]);
}else{
var bb = new (window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder)();
bb.append(data);
var blob = bb.getBlob();
}
this.send(blob);
}
// let's track upload progress
var eventSource = xhr.upload || xhr;
eventSource.addEventListener("progress", function(e) {
// get percentage of how much of the current file has been sent
var position = e.position || e.loaded;
var total = e.totalSize || e.total;
var percentage = Math.round((position/total)*100);
// here you should write your own code how you wish to proces this
});
// state change observer - we need to know when and if the file was successfully uploaded
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
if(xhr.status == 200)
{
// process success
}else{
// process error
}
}
};
// start sending
xhr.mySendAsBinary(evt.target.result);
};
}
server side(php)
// read contents from the input stream
$inputHandler = fopen('php://input', "r");
// create a temp file where to save data from the input stream
$fileHandler = fopen('/tmp/myfile.tmp', "w+");
// save data from the input stream
while(true) {
$buffer = fgets($inputHandler, 4096);
if (strlen($buffer) == 0) {
fclose($inputHandler);
fclose($fileHandler);
return true;
}
fwrite($fileHandler, $buffer);
}
// read contents from the input stream// create a temp file where to save data from the input stream$fileHandler = fopen('/tmp/myfile.tmp', "w+");// save data from the input streamwhile(true) { $buffer = fgets($inputHandler, 4096); if (strlen($buffer) == 0) { fclose($inputHandler); fclose($fileHandler); return true; } fwrite($fileHandler, $buffer);}// read contents from the input stream// create a temp file where to save data from the input stream$fileHandler = fopen('/tmp/myfile.tmp', "w+");// save data from the input streamwhile(true) { $buffer = fgets($inputHandler, 4096); if (strlen($buffer) == 0) { fclose($inputHandler); fclose($fileHandler); return true; } fwrite($fileHandler, $buffer);}
- See more at:
http://www.webiny.com/blog/2012/05/07/webiny-file-upload-with-html5-and-ajax-using-php-streams/#sthash.aIgHd8zw.dpuf
Thursday, October 31, 2013
jquery html css dropdown menu part not use any extern package
//author: boroo_c@yahoo.com
<header id="desktopHeader">
<section id="desktopNav" class="desktopNav">
<div id="nav-panel">
<ul class="topnav">
<li><a class="navlink" href="<?php echo admin_url(); ?>"><?php echo 'H<sub>2</sub>O ( ' . $this->web->host() . ' )'; ?></a></li>
<li class="parnav">
<a href="#">Бүтэц<span></span></a>
<ul class="subul">
<li><a class="navlink" href="<?php echo admin_url('menu'); ?>">Цэс ...</a></li>
<li class="sepline"><a class="navlink" href="<?php echo admin_url('category/create'); ?>">Хэсэг үүсгэх</a></li>
<li><a class="navlink" href="<?php echo admin_url('category'); ?>">Хэсгүүд ...</a></li>
</ul>
</li>
<li class="parnav">
<a href="#">Бүрэлдэхүүн<span></span></a>
<ul class="subul">
<li><a class="navlink" href="<?php echo admin_url('article'); ?>">Агуулга ...</a></li>
<li><a class="navlink" href="<?php echo admin_url('article/create'); ?>">Агуулга Үүсгэх</a></li>
<li><a class="navlink" href="<?php echo admin_url('articletype'); ?>">Агуулгын Төрлүүд ...</a></li>
<li class="sepline"><a class="navlink" href="<?php echo admin_url('media'); ?>">Медиа ...</a></li>
<li class="sepline"><a class="navlink" href="<?php echo admin_url('tag'); ?>">Түлхүүр үгс ...</a></li>
<li class="sepline"><a class="navlink" href="<?php echo admin_url('extendfield'); ?>">Нэмэлт мэдээлэл ...</a></li>
</ul>
</li>
<li class="parnav">
<a href="#">Тохиргоо<span></span></a>
<ul class="subul">
<li class="subnav">
<a href="#">Лавлах мэдээлэл<span></span></a>
<ul class="subul">
<li><a class="navlink" href="<?php echo admin_url('country'); ?>">- Улс -</a></li>
<li><a class="navlink" href="<?php echo admin_url('language'); ?>">- Хэл -</a></li>
<li><a class="navlink" href="<?php echo admin_url('currency'); ?>">- Валют -</a></li>
</ul>
</li>
<li><a class="navlink" href="<?php echo admin_url('setting'); ?>">Тохируулгууд ...</a></li>
<li class="sepline"><a class="navlink" href="<?php echo admin_url('user'); ?>">Хэрэглэгч ба эрх ...</a></li>
</ul>
</li>
<li><a href="#">Тусламж</a></li>
</ul>
<ul class="rightnav">
<li>
<div>Хэрэглэгч : <?php echo $this->context->user(); ?> (<?php echo $this->context->role(); ?>)</div>
</li>
<li><div><a href="<?php echo site_url(); ?>" target="_blank">Веб</a></div></li>
<li><div><a href="<?php echo admin_url('auth/logout'); ?>">Гарах</a></div></li>
<li>
<div class="time">
<?php echo '<i>MGL: '.local_datetime().'</i>'; ?>
<?php echo '<i>UTC: '.utc_datetime().'</i>'; ?>
<!-- <a href="<?php echo admin_url(); ?>">
<img src="<?php echo theme_url('images/world_flags/flag_mn.gif'); ?>" alt="en">
</a>-->
</div>
</li>
<li>
<div id="test0">
...
</div>
</li>
</ul>
</div>
</section>
</header>
<script>
$(function() {
$('#nav-panel ul.topnav li > a').hover(function() {
var a = $(this).addClass('hover');
var li = $(a).parent();
var ul = $(a).next().show();
if ($(li).hasClass('subnav')) {
$(ul).css('top', '0').css('left', $(li).width());
}
$(li).hover(function() {
}, function() {
$(a).removeClass('hover');
$(ul).hide();
//When the mouse hovers out of the subnav, move it back up
});
});
});
</script>
CSS
#nav-panel {
display: block;
position: relative;
width: 100%;
height: 34px;
background: url(images/bg-nav.png) repeat-x scroll 0 bottom #1B1B1B;
}
#nav-panel ul.rightnav{
position: fixed;
list-style: none;
padding: 0 10px;
top: 0;
right: 0;
height: 34px;
background: url(images/bg-nav.png) repeat-x scroll 0 bottom #1B1B1B;
font-size: 1.2em;
}
ul.rightnav li {
border-left: 1px solid #444;
border-right: 1px solid #333;
display: inline-block;
float: left;
font: bold 13px/17px "Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
position: relative;
text-shadow: 0 0 2px #000000;
}
ul.rightnav li div{
color: #E6E6E6;
display: block;
font-style: normal;
font-weight: normal;
padding: 8px 12px;
vertical-align: middle;
text-decoration: none;
}
ul.rightnav li div a:hover{
text-decoration: underline;
}
ul.rightnav li div.time {
position: relative;
line-height: 11px;
width: 140px;
padding: 6px 2px;
text-align: right;
font-size: 11px;
}
ul.rightnav li div.time i {
position: relative;
font-style: normal;
white-space: nowrap;
top: -2px;
}
ul.rightnav li div#test {
padding: 0;
margin: 0;
}
#nav-panel ul.topnav {
list-style: none;
padding: 0 10px;
margin: 0;
float: left;
display: block;
height: 34px;
background: url(images/bg-nav.png) repeat-x scroll 0 bottom #1B1B1B;
font-size: 1.2em;
}
ul.topnav li {
border-left: 1px solid #444;
border-right: 1px solid #333;
cursor: pointer;
display: inline-block;
float: left;
font: bold 13px/17px "Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
position: relative;
text-shadow: 0 0 2px #000000;
}
ul.topnav li a{
color: #E6E6E6;
display: block;
font-style: normal;
font-weight: normal;
padding: 8px 12px;
vertical-align: middle;
text-decoration: none;
}
ul.topnav li a.hover{
background: url(images/bg-noise.jpg) repeat-x scroll 0 0 #1B1B1B;
}
ul.topnav li.parnav a{
padding-right: 30px;
}
ul.topnav li.parnav a span { /*--Drop down trigger styles--*/
position: absolute;
right: 10px;
top: 0;
width: 10px;
height: 34px;
background: url(images/subnav10.gif) no-repeat center top;
}
ul.topnav li.subnav a{
padding-right: 30px;
}
ul.topnav li.subnav a span {
position: absolute;
right: 10px;
top: 0;
width: 10px;
height: 34px;
background: url(images/dropdo10.gif) no-repeat center center;
}
ul.topnav li ul.subul {
list-style: none;
position: absolute;
left: -2px; top: 32px;
margin: 0; padding: 0;
display: none;
float: left;
border: 1px solid #111;
border-top: none;
background: url(images/bg-noise.jpg) repeat scroll 0 0 #1B1B1B;
z-index: 10000;
}
ul.topnav li.subnav ul.subul {
border: 1px solid #111;
}
ul.topnav li ul.subul li{
margin: 0; padding: 0;
color: #E6E6E6;
display: block;
float: none;
clear: both;
}
ul.topnav li ul.subul li a {
white-space: nowrap;
padding-left: 15px;
}
ul.topnav li ul.subul li a:hover {
background: #111;
}
ul.topnav li ul.subul li.sepline{
border-top: 1px solid #444;
}
<header id="desktopHeader">
<section id="desktopNav" class="desktopNav">
<div id="nav-panel">
<ul class="topnav">
<li><a class="navlink" href="<?php echo admin_url(); ?>"><?php echo 'H<sub>2</sub>O ( ' . $this->web->host() . ' )'; ?></a></li>
<li class="parnav">
<a href="#">Бүтэц<span></span></a>
<ul class="subul">
<li><a class="navlink" href="<?php echo admin_url('menu'); ?>">Цэс ...</a></li>
<li class="sepline"><a class="navlink" href="<?php echo admin_url('category/create'); ?>">Хэсэг үүсгэх</a></li>
<li><a class="navlink" href="<?php echo admin_url('category'); ?>">Хэсгүүд ...</a></li>
</ul>
</li>
<li class="parnav">
<a href="#">Бүрэлдэхүүн<span></span></a>
<ul class="subul">
<li><a class="navlink" href="<?php echo admin_url('article'); ?>">Агуулга ...</a></li>
<li><a class="navlink" href="<?php echo admin_url('article/create'); ?>">Агуулга Үүсгэх</a></li>
<li><a class="navlink" href="<?php echo admin_url('articletype'); ?>">Агуулгын Төрлүүд ...</a></li>
<li class="sepline"><a class="navlink" href="<?php echo admin_url('media'); ?>">Медиа ...</a></li>
<li class="sepline"><a class="navlink" href="<?php echo admin_url('tag'); ?>">Түлхүүр үгс ...</a></li>
<li class="sepline"><a class="navlink" href="<?php echo admin_url('extendfield'); ?>">Нэмэлт мэдээлэл ...</a></li>
</ul>
</li>
<li class="parnav">
<a href="#">Тохиргоо<span></span></a>
<ul class="subul">
<li class="subnav">
<a href="#">Лавлах мэдээлэл<span></span></a>
<ul class="subul">
<li><a class="navlink" href="<?php echo admin_url('country'); ?>">- Улс -</a></li>
<li><a class="navlink" href="<?php echo admin_url('language'); ?>">- Хэл -</a></li>
<li><a class="navlink" href="<?php echo admin_url('currency'); ?>">- Валют -</a></li>
</ul>
</li>
<li><a class="navlink" href="<?php echo admin_url('setting'); ?>">Тохируулгууд ...</a></li>
<li class="sepline"><a class="navlink" href="<?php echo admin_url('user'); ?>">Хэрэглэгч ба эрх ...</a></li>
</ul>
</li>
<li><a href="#">Тусламж</a></li>
</ul>
<ul class="rightnav">
<li>
<div>Хэрэглэгч : <?php echo $this->context->user(); ?> (<?php echo $this->context->role(); ?>)</div>
</li>
<li><div><a href="<?php echo site_url(); ?>" target="_blank">Веб</a></div></li>
<li><div><a href="<?php echo admin_url('auth/logout'); ?>">Гарах</a></div></li>
<li>
<div class="time">
<?php echo '<i>MGL: '.local_datetime().'</i>'; ?>
<?php echo '<i>UTC: '.utc_datetime().'</i>'; ?>
<!-- <a href="<?php echo admin_url(); ?>">
<img src="<?php echo theme_url('images/world_flags/flag_mn.gif'); ?>" alt="en">
</a>-->
</div>
</li>
<li>
<div id="test0">
...
</div>
</li>
</ul>
</div>
</section>
</header>
<script>
$(function() {
$('#nav-panel ul.topnav li > a').hover(function() {
var a = $(this).addClass('hover');
var li = $(a).parent();
var ul = $(a).next().show();
if ($(li).hasClass('subnav')) {
$(ul).css('top', '0').css('left', $(li).width());
}
$(li).hover(function() {
}, function() {
$(a).removeClass('hover');
$(ul).hide();
//When the mouse hovers out of the subnav, move it back up
});
});
});
</script>
CSS
#nav-panel {
display: block;
position: relative;
width: 100%;
height: 34px;
background: url(images/bg-nav.png) repeat-x scroll 0 bottom #1B1B1B;
}
#nav-panel ul.rightnav{
position: fixed;
list-style: none;
padding: 0 10px;
top: 0;
right: 0;
height: 34px;
background: url(images/bg-nav.png) repeat-x scroll 0 bottom #1B1B1B;
font-size: 1.2em;
}
ul.rightnav li {
border-left: 1px solid #444;
border-right: 1px solid #333;
display: inline-block;
float: left;
font: bold 13px/17px "Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
position: relative;
text-shadow: 0 0 2px #000000;
}
ul.rightnav li div{
color: #E6E6E6;
display: block;
font-style: normal;
font-weight: normal;
padding: 8px 12px;
vertical-align: middle;
text-decoration: none;
}
ul.rightnav li div a:hover{
text-decoration: underline;
}
ul.rightnav li div.time {
position: relative;
line-height: 11px;
width: 140px;
padding: 6px 2px;
text-align: right;
font-size: 11px;
}
ul.rightnav li div.time i {
position: relative;
font-style: normal;
white-space: nowrap;
top: -2px;
}
ul.rightnav li div#test {
padding: 0;
margin: 0;
}
#nav-panel ul.topnav {
list-style: none;
padding: 0 10px;
margin: 0;
float: left;
display: block;
height: 34px;
background: url(images/bg-nav.png) repeat-x scroll 0 bottom #1B1B1B;
font-size: 1.2em;
}
ul.topnav li {
border-left: 1px solid #444;
border-right: 1px solid #333;
cursor: pointer;
display: inline-block;
float: left;
font: bold 13px/17px "Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
position: relative;
text-shadow: 0 0 2px #000000;
}
ul.topnav li a{
color: #E6E6E6;
display: block;
font-style: normal;
font-weight: normal;
padding: 8px 12px;
vertical-align: middle;
text-decoration: none;
}
ul.topnav li a.hover{
background: url(images/bg-noise.jpg) repeat-x scroll 0 0 #1B1B1B;
}
ul.topnav li.parnav a{
padding-right: 30px;
}
ul.topnav li.parnav a span { /*--Drop down trigger styles--*/
position: absolute;
right: 10px;
top: 0;
width: 10px;
height: 34px;
background: url(images/subnav10.gif) no-repeat center top;
}
ul.topnav li.subnav a{
padding-right: 30px;
}
ul.topnav li.subnav a span {
position: absolute;
right: 10px;
top: 0;
width: 10px;
height: 34px;
background: url(images/dropdo10.gif) no-repeat center center;
}
ul.topnav li ul.subul {
list-style: none;
position: absolute;
left: -2px; top: 32px;
margin: 0; padding: 0;
display: none;
float: left;
border: 1px solid #111;
border-top: none;
background: url(images/bg-noise.jpg) repeat scroll 0 0 #1B1B1B;
z-index: 10000;
}
ul.topnav li.subnav ul.subul {
border: 1px solid #111;
}
ul.topnav li ul.subul li{
margin: 0; padding: 0;
color: #E6E6E6;
display: block;
float: none;
clear: both;
}
ul.topnav li ul.subul li a {
white-space: nowrap;
padding-left: 15px;
}
ul.topnav li ul.subul li a:hover {
background: #111;
}
ul.topnav li ul.subul li.sepline{
border-top: 1px solid #444;
}
Tuesday, October 29, 2013
mysql group_concat,concat with join
select
a.id,
a.name,
group_concat(b.id) ids,
group_concat(b.title) titles,
group_concat(concat("<a href='index.php?id=", b.id, "'>", b.title, "</a>")) titlelist
from participants a
inner join
posts b on b.parentid = a.id
group by a.id,a.name sample id Name Value
1 A 4
1 A 5
1 B 8
2 C 9 result id Column
1 A:4,5,B:8
2 C:9 select id, group_concat(`Name` separator ',') as `Column`
from
(
select id, concat(`Name`, ':',
group_concat(`Value` separator ',')) as `Name`
from mytbl
group by id, `Name`
) tbl
group by id; jquery my extended panel splitter version
(function($, undefined) {
var splitter_count = 0;
var splitter_id = null;
var splitters = [];
var current_splitter = null;
$.fn.split = function(options) {
var data = this.data('splitter');
if (data) {
return data;
}
var panel_1;
var panel_2;
var settings = $.extend({
rightIsFixed: false, //BOROO added this line
limit: 100,
orientation: 'horizontal',
position: '25%',
onDragStart: $.noop,
onDragEnd: $.noop,
onDrag: $.noop,
onRefresh: $.noop,
onShowing: $.noop,
onHidding: $.noop
}, options || {});
var cls;
var children = this.children();
if (settings.orientation == 'vertical') {
panel_1 = children.first().addClass('left_panel');
panel_2 = panel_1.next().addClass('right_panel');
cls = 'vsplitter';
} else if (settings.orientation == 'horizontal') {
panel_1 = children.first().addClass('top_panel')
panel_2 = panel_1.next().addClass('bottom_panel');
cls = 'hsplitter';
}
var width = this.width();
var height = this.height();
var id = splitter_count;
splitter_count++;
this.addClass('splitter_panel');
var splitter = $('<div/>').addClass(cls).data('splitter-id', id).mouseenter(function() {
splitter_id = $(this).data('splitter-id');
}).mouseleave(function() {
splitter_id = null;
}).insertAfter(panel_1);
var position;
function get_position(position) {
if (typeof position === 'number') {
return position;
} else if (typeof position === 'string') {
var match = position.match(/^([0-9]+)(px|%)$/);
if (match) {
if (match[2] == 'px') {
return +match[1];
} else {
if (settings.orientation == 'vertical') {
return (width * +match[1]) / 100;
} else if (settings.orientation == 'horizontal') {
return (height * +match[1]) / 100;
}
}
} else {
//throw position + ' is invalid value';
}
} else {
//throw 'position have invalid type';
}
}
var self = $.extend(this, {
splitControl: splitter,
onRefresh: settings.onRefresh,
onShowing: settings.onShowing,
onHidding: settings.onHidding
});
self = $.extend(self, {
refresh: function() {
var new_width = this.width();
var new_height = this.height();
if (width != new_width || height != new_height) {
width = this.width();
height = this.height();
self.position(position);
} else {
//BOROO added this code [start]
var p1_none = $(splitter).prev().css('display') === 'none';
if (p1_none) {
splitter.css('cursor', 'pointer');
} else {
var n1_none = $(splitter).next().css('display') === 'none';
if (n1_none) {
splitter.css('cursor', 'pointer');
} else {
splitter.css('cursor', 'col-resize');
}
}
self.position(position);
//BOROO added this code [end]
}
//BOROO added this code [start]
self.find('.splitter_panel').trigger('splitter.refresh');
//BOROO added this code [end]
},
position: (function() {
if (settings.orientation == 'vertical') {
return function(n, silent) {
if (n === undefined) {
return position;
} else {
position = get_position(n);
var sw = splitter.width() / 2;
//BOROO edited this code [start]
var p1_none = $(splitter).prev().css('display') === 'none';
if (p1_none) {
self.find('.splitter_panel').trigger('splitter.hidding');
splitter.css('left', 0);
panel_2.width(self.width() - splitter.width());
} else {
var n1_none = $(splitter).next().css('display') === 'none';
if (n1_none) {
self.find('.splitter_panel').trigger('splitter.hidding');
splitter.css('left', self.width() - splitter.width());
panel_1.width(self.width() - splitter.width());
} else {
splitter.css('left', position - sw);
panel_1.width(position - sw);
panel_2.width(self.width() - position - sw);
}
}
//BOROO edited this code [end]
}
if (!silent) {
self.find('.splitter_panel').trigger('splitter.resize');
}
return self;
};
} else if (settings.orientation == 'horizontal') {
return function(n, silent) {
if (n === undefined) {
return position;
} else {
position = get_position(n);
var sw = splitter.height() / 2;
splitter.css('top', position - sw);
panel_1.height(position - sw);
panel_2.height(self.height() - position - sw);
}
if (!silent) {
self.find('.splitter_panel').trigger('splitter.resize');
}
return self;
};
} else {
return $.noop;
}
})(),
orientation: settings.orientation,
limit: settings.limit,
rightIsFixed: settings.rightIsFixed, //BOROO added this line
isActive: function() {
return splitter_id === id;
},
destroy: function() {
self.removeClass('splitter_panel');
splitter.unbind('mouseenter');
splitter.unbind('mouseleave');
if (settings.orientation == 'vertical') {
panel_1.removeClass('left_panel');
panel_2.removeClass('right_panel');
} else if (settings.orientation == 'horizontal') {
panel_1.removeClass('top_panel');
panel_2.removeClass('bottom_panel');
}
self.unbind('splitter.resize');
self.find('.splitter_panel').trigger('splitter.resize');
splitters[id] = null;
splitter.remove();
var not_null = false;
for (var i = splitters.length; i--; ) {
if (splitters[i] !== null) {
not_null = true;
break;
}
}
//remove document events when no splitters
if (!not_null) {
$(document.documentElement).unbind('.splitter');
$(window).unbind('resize.splitter');
splitters = [];
}
//BOROO added this code [start]
var data = self.data('splitter');
if (data) {
self.removeData('splitter');
}
return self;
//BOROO added this code [end]
}
});
self.bind('splitter.refresh', function() {
//call refresh method
self.onRefresh();
});
self.bind('splitter.showing', function() {
//call refresh method
self.onShowing();
});
self.bind('splitter.hidding', function() {
//call refresh method
self.onHidding();
});
self.bind('splitter.resize', function(e) {
var pos = self.position();
//BOROO added this code [start]
if (self.orientation === 'vertical') {
if (self.rightIsFixed) {
var oldw = self.data('old-width');
if (typeof oldw !== 'undefined' && oldw !== self.width()) {
pos = pos + (self.width() - oldw);
//self.width() - panel_2.width() - sw;
}
}
}
//BOROO added this code [end]
if (self.orientation == 'vertical' && pos > self.width()) {
pos = self.width() - self.limit - 1;
} else if (self.orientation == 'horizontal' && pos > self.height()) {
pos = self.height() - self.limit - 1;
}
if (pos < self.limit) {
pos = self.limit + 1;
}
self.data('old-width', self.width());
self.position(pos, true);
});
//inital position of splitter
var pos;
if (settings.orientation == 'vertical') {
if (pos > width - settings.limit) {
pos = width - settings.limit;
} else {
pos = get_position(settings.position);
}
} else if (settings.orientation == 'horizontal') {
//position = height/2;
if (pos > height - settings.limit) {
pos = height - settings.limit;
} else {
pos = get_position(settings.position);
}
}
if (pos < settings.limit) {
pos = settings.limit;
}
self.position(pos, true);
if (splitters.length == 0) { // first time bind events to document
$(window).bind('resize.splitter', function() {
$.each(splitters, function(i, splitter) {
splitter.refresh();
});
});
$(document.documentElement).bind('mousedown.splitter', function(e) {
if (splitter_id !== null) {
current_splitter = splitters[splitter_id];
//BOROO added this code [start]
if ($(current_splitter.splitControl).attr('class') === 'vsplitter') {
var p1_none = $(current_splitter.splitControl).prev().css('display') === 'none';
if (p1_none) {
$(current_splitter.splitControl)
.css('cursor', 'col-resize')
.prev().show();
$(current_splitter).trigger('splitter.showing');
current_splitter.refresh();
} else {
var n1_none = $(current_splitter.splitControl).next().css('display') === 'none';
if (n1_none) {
$(current_splitter.splitControl)
.css('cursor', 'col-resize')
.next().show();
$(current_splitter).trigger('splitter.showing');
current_splitter.refresh();
}
}
}
//BOROO added this code [end]
$('<div class="splitterMask"></div>').insertAfter(current_splitter);
if (current_splitter.orientation == 'horizontal') {
$('body').css('cursor', 'row-resize');
} else if (current_splitter.orientation == 'vertical') {
$('body').css('cursor', 'col-resize');
}
settings.onDragStart(e);
return false;
}
}).bind('mouseup.splitter', function(e) {
$('.splitterMask').remove();
current_splitter = null;
$('body').css('cursor', 'auto');
settings.onDragEnd(e);
}).bind('mousemove.splitter', function(e) {
if (current_splitter !== null) {
var limit = current_splitter.limit;
var offset = current_splitter.offset();
if (current_splitter.orientation == 'vertical') {
var x = e.pageX - offset.left;
if (x <= current_splitter.limit) {
x = current_splitter.limit + 1;
}
else if (x >= current_splitter.width() - limit) {
x = current_splitter.width() - limit - 1;
}
if (x > current_splitter.limit &&
x < current_splitter.width() - limit) {
current_splitter.position(x, true);
current_splitter.find('.splitter_panel').trigger('splitter.resize');
return false;
}
} else if (current_splitter.orientation == 'horizontal') {
var y = e.pageY - offset.top;
if (y <= current_splitter.limit) {
y = current_splitter.limit + 1;
}
else if (y >= current_splitter.height() - limit) {
y = current_splitter.height() - limit - 1;
}
if (y > current_splitter.limit &&
y < current_splitter.height() - limit) {
current_splitter.position(y, true);
current_splitter.trigger('splitter.resize');
return false;
}
}
settings.onDrag(e);
}
});
}
splitters.push(self);
self.data('splitter', self);
return self;
};
})(jQuery);
CSS
#nav-panel {
display: block;
position: relative;
width: 100%;
height: 34px;
background: url(images/bg-nav.png) repeat-x scroll 0 bottom #1B1B1B;
}
#nav-panel ul.rightnav{
position: fixed;
list-style: none;
padding: 0 10px;
top: 0;
right: 0;
height: 34px;
background: url(images/bg-nav.png) repeat-x scroll 0 bottom #1B1B1B;
font-size: 1.2em;
}
ul.rightnav li {
border-left: 1px solid #444;
border-right: 1px solid #333;
display: inline-block;
float: left;
font: bold 13px/17px "Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
position: relative;
text-shadow: 0 0 2px #000000;
}
ul.rightnav li div{
color: #E6E6E6;
display: block;
font-style: normal;
font-weight: normal;
padding: 8px 12px;
vertical-align: middle;
text-decoration: none;
}
ul.rightnav li div a:hover{
text-decoration: underline;
}
ul.rightnav li div.time {
position: relative;
line-height: 11px;
width: 140px;
padding: 6px 2px;
text-align: right;
font-size: 11px;
}
ul.rightnav li div.time i {
position: relative;
font-style: normal;
white-space: nowrap;
top: -2px;
}
ul.rightnav li div#test {
padding: 0;
margin: 0;
}
#nav-panel ul.topnav {
list-style: none;
padding: 0 10px;
margin: 0;
float: left;
display: block;
height: 34px;
background: url(images/bg-nav.png) repeat-x scroll 0 bottom #1B1B1B;
font-size: 1.2em;
}
ul.topnav li {
border-left: 1px solid #444;
border-right: 1px solid #333;
cursor: pointer;
display: inline-block;
float: left;
font: bold 13px/17px "Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
position: relative;
text-shadow: 0 0 2px #000000;
}
ul.topnav li a{
color: #E6E6E6;
display: block;
font-style: normal;
font-weight: normal;
padding: 8px 12px;
vertical-align: middle;
text-decoration: none;
}
ul.topnav li a.hover{
background: url(images/bg-noise.jpg) repeat-x scroll 0 0 #1B1B1B;
}
ul.topnav li.parnav a{
padding-right: 30px;
}
ul.topnav li.parnav a span { /*--Drop down trigger styles--*/
position: absolute;
right: 10px;
top: 0;
width: 10px;
height: 34px;
background: url(images/subnav10.gif) no-repeat center top;
}
ul.topnav li.subnav a{
padding-right: 30px;
}
ul.topnav li.subnav a span {
position: absolute;
right: 10px;
top: 0;
width: 10px;
height: 34px;
background: url(images/dropdo10.gif) no-repeat center center;
}
ul.topnav li ul.subul {
list-style: none;
position: absolute;
left: -2px; top: 32px;
margin: 0; padding: 0;
display: none;
float: left;
border: 1px solid #111;
border-top: none;
background: url(images/bg-noise.jpg) repeat scroll 0 0 #1B1B1B;
z-index: 10000;
}
ul.topnav li.subnav ul.subul {
border: 1px solid #111;
}
ul.topnav li ul.subul li{
margin: 0; padding: 0;
color: #E6E6E6;
display: block;
float: none;
clear: both;
}
ul.topnav li ul.subul li a {
white-space: nowrap;
padding-left: 15px;
}
ul.topnav li ul.subul li a:hover {
background: #111;
}
ul.topnav li ul.subul li.sepline{
border-top: 1px solid #444;
}
var splitter_count = 0;
var splitter_id = null;
var splitters = [];
var current_splitter = null;
$.fn.split = function(options) {
var data = this.data('splitter');
if (data) {
return data;
}
var panel_1;
var panel_2;
var settings = $.extend({
rightIsFixed: false, //BOROO added this line
limit: 100,
orientation: 'horizontal',
position: '25%',
onDragStart: $.noop,
onDragEnd: $.noop,
onDrag: $.noop,
onRefresh: $.noop,
onShowing: $.noop,
onHidding: $.noop
}, options || {});
var cls;
var children = this.children();
if (settings.orientation == 'vertical') {
panel_1 = children.first().addClass('left_panel');
panel_2 = panel_1.next().addClass('right_panel');
cls = 'vsplitter';
} else if (settings.orientation == 'horizontal') {
panel_1 = children.first().addClass('top_panel')
panel_2 = panel_1.next().addClass('bottom_panel');
cls = 'hsplitter';
}
var width = this.width();
var height = this.height();
var id = splitter_count;
splitter_count++;
this.addClass('splitter_panel');
var splitter = $('<div/>').addClass(cls).data('splitter-id', id).mouseenter(function() {
splitter_id = $(this).data('splitter-id');
}).mouseleave(function() {
splitter_id = null;
}).insertAfter(panel_1);
var position;
function get_position(position) {
if (typeof position === 'number') {
return position;
} else if (typeof position === 'string') {
var match = position.match(/^([0-9]+)(px|%)$/);
if (match) {
if (match[2] == 'px') {
return +match[1];
} else {
if (settings.orientation == 'vertical') {
return (width * +match[1]) / 100;
} else if (settings.orientation == 'horizontal') {
return (height * +match[1]) / 100;
}
}
} else {
//throw position + ' is invalid value';
}
} else {
//throw 'position have invalid type';
}
}
var self = $.extend(this, {
splitControl: splitter,
onRefresh: settings.onRefresh,
onShowing: settings.onShowing,
onHidding: settings.onHidding
});
self = $.extend(self, {
refresh: function() {
var new_width = this.width();
var new_height = this.height();
if (width != new_width || height != new_height) {
width = this.width();
height = this.height();
self.position(position);
} else {
//BOROO added this code [start]
var p1_none = $(splitter).prev().css('display') === 'none';
if (p1_none) {
splitter.css('cursor', 'pointer');
} else {
var n1_none = $(splitter).next().css('display') === 'none';
if (n1_none) {
splitter.css('cursor', 'pointer');
} else {
splitter.css('cursor', 'col-resize');
}
}
self.position(position);
//BOROO added this code [end]
}
//BOROO added this code [start]
self.find('.splitter_panel').trigger('splitter.refresh');
//BOROO added this code [end]
},
position: (function() {
if (settings.orientation == 'vertical') {
return function(n, silent) {
if (n === undefined) {
return position;
} else {
position = get_position(n);
var sw = splitter.width() / 2;
//BOROO edited this code [start]
var p1_none = $(splitter).prev().css('display') === 'none';
if (p1_none) {
self.find('.splitter_panel').trigger('splitter.hidding');
splitter.css('left', 0);
panel_2.width(self.width() - splitter.width());
} else {
var n1_none = $(splitter).next().css('display') === 'none';
if (n1_none) {
self.find('.splitter_panel').trigger('splitter.hidding');
splitter.css('left', self.width() - splitter.width());
panel_1.width(self.width() - splitter.width());
} else {
splitter.css('left', position - sw);
panel_1.width(position - sw);
panel_2.width(self.width() - position - sw);
}
}
//BOROO edited this code [end]
}
if (!silent) {
self.find('.splitter_panel').trigger('splitter.resize');
}
return self;
};
} else if (settings.orientation == 'horizontal') {
return function(n, silent) {
if (n === undefined) {
return position;
} else {
position = get_position(n);
var sw = splitter.height() / 2;
splitter.css('top', position - sw);
panel_1.height(position - sw);
panel_2.height(self.height() - position - sw);
}
if (!silent) {
self.find('.splitter_panel').trigger('splitter.resize');
}
return self;
};
} else {
return $.noop;
}
})(),
orientation: settings.orientation,
limit: settings.limit,
rightIsFixed: settings.rightIsFixed, //BOROO added this line
isActive: function() {
return splitter_id === id;
},
destroy: function() {
self.removeClass('splitter_panel');
splitter.unbind('mouseenter');
splitter.unbind('mouseleave');
if (settings.orientation == 'vertical') {
panel_1.removeClass('left_panel');
panel_2.removeClass('right_panel');
} else if (settings.orientation == 'horizontal') {
panel_1.removeClass('top_panel');
panel_2.removeClass('bottom_panel');
}
self.unbind('splitter.resize');
self.find('.splitter_panel').trigger('splitter.resize');
splitters[id] = null;
splitter.remove();
var not_null = false;
for (var i = splitters.length; i--; ) {
if (splitters[i] !== null) {
not_null = true;
break;
}
}
//remove document events when no splitters
if (!not_null) {
$(document.documentElement).unbind('.splitter');
$(window).unbind('resize.splitter');
splitters = [];
}
//BOROO added this code [start]
var data = self.data('splitter');
if (data) {
self.removeData('splitter');
}
return self;
//BOROO added this code [end]
}
});
self.bind('splitter.refresh', function() {
//call refresh method
self.onRefresh();
});
self.bind('splitter.showing', function() {
//call refresh method
self.onShowing();
});
self.bind('splitter.hidding', function() {
//call refresh method
self.onHidding();
});
self.bind('splitter.resize', function(e) {
var pos = self.position();
//BOROO added this code [start]
if (self.orientation === 'vertical') {
if (self.rightIsFixed) {
var oldw = self.data('old-width');
if (typeof oldw !== 'undefined' && oldw !== self.width()) {
pos = pos + (self.width() - oldw);
//self.width() - panel_2.width() - sw;
}
}
}
//BOROO added this code [end]
if (self.orientation == 'vertical' && pos > self.width()) {
pos = self.width() - self.limit - 1;
} else if (self.orientation == 'horizontal' && pos > self.height()) {
pos = self.height() - self.limit - 1;
}
if (pos < self.limit) {
pos = self.limit + 1;
}
self.data('old-width', self.width());
self.position(pos, true);
});
//inital position of splitter
var pos;
if (settings.orientation == 'vertical') {
if (pos > width - settings.limit) {
pos = width - settings.limit;
} else {
pos = get_position(settings.position);
}
} else if (settings.orientation == 'horizontal') {
//position = height/2;
if (pos > height - settings.limit) {
pos = height - settings.limit;
} else {
pos = get_position(settings.position);
}
}
if (pos < settings.limit) {
pos = settings.limit;
}
self.position(pos, true);
if (splitters.length == 0) { // first time bind events to document
$(window).bind('resize.splitter', function() {
$.each(splitters, function(i, splitter) {
splitter.refresh();
});
});
$(document.documentElement).bind('mousedown.splitter', function(e) {
if (splitter_id !== null) {
current_splitter = splitters[splitter_id];
//BOROO added this code [start]
if ($(current_splitter.splitControl).attr('class') === 'vsplitter') {
var p1_none = $(current_splitter.splitControl).prev().css('display') === 'none';
if (p1_none) {
$(current_splitter.splitControl)
.css('cursor', 'col-resize')
.prev().show();
$(current_splitter).trigger('splitter.showing');
current_splitter.refresh();
} else {
var n1_none = $(current_splitter.splitControl).next().css('display') === 'none';
if (n1_none) {
$(current_splitter.splitControl)
.css('cursor', 'col-resize')
.next().show();
$(current_splitter).trigger('splitter.showing');
current_splitter.refresh();
}
}
}
//BOROO added this code [end]
$('<div class="splitterMask"></div>').insertAfter(current_splitter);
if (current_splitter.orientation == 'horizontal') {
$('body').css('cursor', 'row-resize');
} else if (current_splitter.orientation == 'vertical') {
$('body').css('cursor', 'col-resize');
}
settings.onDragStart(e);
return false;
}
}).bind('mouseup.splitter', function(e) {
$('.splitterMask').remove();
current_splitter = null;
$('body').css('cursor', 'auto');
settings.onDragEnd(e);
}).bind('mousemove.splitter', function(e) {
if (current_splitter !== null) {
var limit = current_splitter.limit;
var offset = current_splitter.offset();
if (current_splitter.orientation == 'vertical') {
var x = e.pageX - offset.left;
if (x <= current_splitter.limit) {
x = current_splitter.limit + 1;
}
else if (x >= current_splitter.width() - limit) {
x = current_splitter.width() - limit - 1;
}
if (x > current_splitter.limit &&
x < current_splitter.width() - limit) {
current_splitter.position(x, true);
current_splitter.find('.splitter_panel').trigger('splitter.resize');
return false;
}
} else if (current_splitter.orientation == 'horizontal') {
var y = e.pageY - offset.top;
if (y <= current_splitter.limit) {
y = current_splitter.limit + 1;
}
else if (y >= current_splitter.height() - limit) {
y = current_splitter.height() - limit - 1;
}
if (y > current_splitter.limit &&
y < current_splitter.height() - limit) {
current_splitter.position(y, true);
current_splitter.trigger('splitter.resize');
return false;
}
}
settings.onDrag(e);
}
});
}
splitters.push(self);
self.data('splitter', self);
return self;
};
})(jQuery);
CSS
#nav-panel {
display: block;
position: relative;
width: 100%;
height: 34px;
background: url(images/bg-nav.png) repeat-x scroll 0 bottom #1B1B1B;
}
#nav-panel ul.rightnav{
position: fixed;
list-style: none;
padding: 0 10px;
top: 0;
right: 0;
height: 34px;
background: url(images/bg-nav.png) repeat-x scroll 0 bottom #1B1B1B;
font-size: 1.2em;
}
ul.rightnav li {
border-left: 1px solid #444;
border-right: 1px solid #333;
display: inline-block;
float: left;
font: bold 13px/17px "Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
position: relative;
text-shadow: 0 0 2px #000000;
}
ul.rightnav li div{
color: #E6E6E6;
display: block;
font-style: normal;
font-weight: normal;
padding: 8px 12px;
vertical-align: middle;
text-decoration: none;
}
ul.rightnav li div a:hover{
text-decoration: underline;
}
ul.rightnav li div.time {
position: relative;
line-height: 11px;
width: 140px;
padding: 6px 2px;
text-align: right;
font-size: 11px;
}
ul.rightnav li div.time i {
position: relative;
font-style: normal;
white-space: nowrap;
top: -2px;
}
ul.rightnav li div#test {
padding: 0;
margin: 0;
}
#nav-panel ul.topnav {
list-style: none;
padding: 0 10px;
margin: 0;
float: left;
display: block;
height: 34px;
background: url(images/bg-nav.png) repeat-x scroll 0 bottom #1B1B1B;
font-size: 1.2em;
}
ul.topnav li {
border-left: 1px solid #444;
border-right: 1px solid #333;
cursor: pointer;
display: inline-block;
float: left;
font: bold 13px/17px "Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
position: relative;
text-shadow: 0 0 2px #000000;
}
ul.topnav li a{
color: #E6E6E6;
display: block;
font-style: normal;
font-weight: normal;
padding: 8px 12px;
vertical-align: middle;
text-decoration: none;
}
ul.topnav li a.hover{
background: url(images/bg-noise.jpg) repeat-x scroll 0 0 #1B1B1B;
}
ul.topnav li.parnav a{
padding-right: 30px;
}
ul.topnav li.parnav a span { /*--Drop down trigger styles--*/
position: absolute;
right: 10px;
top: 0;
width: 10px;
height: 34px;
background: url(images/subnav10.gif) no-repeat center top;
}
ul.topnav li.subnav a{
padding-right: 30px;
}
ul.topnav li.subnav a span {
position: absolute;
right: 10px;
top: 0;
width: 10px;
height: 34px;
background: url(images/dropdo10.gif) no-repeat center center;
}
ul.topnav li ul.subul {
list-style: none;
position: absolute;
left: -2px; top: 32px;
margin: 0; padding: 0;
display: none;
float: left;
border: 1px solid #111;
border-top: none;
background: url(images/bg-noise.jpg) repeat scroll 0 0 #1B1B1B;
z-index: 10000;
}
ul.topnav li.subnav ul.subul {
border: 1px solid #111;
}
ul.topnav li ul.subul li{
margin: 0; padding: 0;
color: #E6E6E6;
display: block;
float: none;
clear: both;
}
ul.topnav li ul.subul li a {
white-space: nowrap;
padding-left: 15px;
}
ul.topnav li ul.subul li a:hover {
background: #111;
}
ul.topnav li ul.subul li.sepline{
border-top: 1px solid #444;
}
Subscribe to:
Posts (Atom)