<select id="my_val"> <option value="1">Red</option> <option value="2">Green</option> <option value="3">Blue</option> </select> $(document).on('change', '#my_val', function(e) { e.preventDefault(); var option_val = $("#my_val").val(); //store the dynamic value of select option $( "#my_val" ).find( 'option[value="' + option_val + '"]' ).prop( "selected", true ); //Set select option 'Selected' });
article
Monday, March 24, 2014
How To Dynamically Set Select Option Selected Using Jquery?
How To Dynamically Set Select Option Selected Using Jquery?
How To Send Email With An Attachment In Codeigniter?
$this->load->library('email'); $this->load->helper('path'); $this->email->from('your@example.com', 'Your Name'); $this->email->to('someone@example.com'); $this->email->cc('another@another-example.com'); $this->email->bcc('them@their-example.com'); $this->email->subject('Email Test'); $this->email->message('Testing the email class.'); /* This function will return a server path without symbolic links or relative directory structures. */ $path = set_realpath('uploads/pdf/'); $this->email->attach($path . 'yourfile.pdf'); /* Enables you to send an attachment */ $this->email->send(); echo $this->email->print_debugger();
How To Send Email To Multiple Recipients With Attachments Using Codeigniter
//loading necessary helper classes $this->load->library('email'); $this->load->helper('path'); $this->load->helper('directory'); //setting path to attach files $path = set_realpath('assets/your_folder/'); $file_names = directory_map($path); foreach ($list as $name => $address) { //if you set the parameter to TRUE any attachments will be cleared as well $this->email->clear(TRUE); $this->email->to($address); $this->email->from('your@example.com'); $this->email->subject('Here is your info '.$name); $this->email->message('Hi '.$name.' Here is the info you requested.'); foreach($file_names as $file_name) { $this->email->attach($path.$file_name); } $this->email->send(); }
Sunday, March 23, 2014
How To Integrate Codeigniter Form Validation Library and jQuery AJAX
/* controller/example.php*/ <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Example extends CI_Controller{ function index() { $data['include'] = 'jquery_ci_form'; $this->load->view('template', $data); } function jquery_save() { $this->load->library('form_validation'); $this->form_validation->set_rules('username', 'Username', 'required|min_length[5]|max_length[12]'); $this->form_validation->set_rules('password', 'Password', 'required|matches[passconf]'); $this->form_validation->set_rules('passconf', 'Password Confirmation', 'required'); $this->form_validation->set_rules('email', 'Email', 'required|valid_email'); if ($this->form_validation->run() == FALSE) { echo json_encode(array('st'=>0, 'msg' => validation_errors())); } else { $username = $this->input->post('username'); $password = $this->input->post('password'); $email = $this->input->post('email'); //...save values to database echo json_encode(array('st'=>0, 'msg' => 'Successfully Submiited')); } } }
View
/* view/template.php */ <?php $this->load->view('includes/header'); ?> <?php //$this->load->view('includes/sidebar'); ?> <?php $this->load->view($include); ?> <?php $this->load->view('includes/footer'); ?>
/* view/jquery_ci_form.php */ <?php echo form_open('example/jquery_save', array('id'=>'frm')); ?> <div id="validation-error"></div> <h5>Username</h5> <input type="text" name="username" value="<?php echo set_value('username'); ?>" size="50" /> <h5>Password</h5> <input type="text" name="password" value="<?php echo set_value('password'); ?>" size="50" /> <h5>Password Confirm</h5> <input type="text" name="passconf" value="<?php echo set_value('passconf'); ?>" size="50" /> <h5>Email Address</h5> <input type="text" name="email" value="<?php echo set_value('email'); ?>" size="50" /> <div><input type="submit" value="Submit" /></div> </form>
jQuery
/* assets/js/custom.js*/ $(document).ready(function() { $('#frm').submit(function(){ $.post($('#frm').attr('action'), $('#frm').serialize(), function( data ) { if(data.st == 0) { $('#validation-error').html(data.msg); } if(data.st == 1) { $('#validation-error').html(data.msg); } }, 'json'); return false; }); });
Making AJAX request with JSON
testjson.js
$.post("http://localhost/demo/controller/function", {'name1' : value1, 'name2' : value2}, //name1 is the name of the parameter that send, something similar to name1=val1&name2=val2 function(data) { $.each(data.items, function(i,item){ alert("value: "+item.value+" name: "+item.name); //item.value e item.name because in the data object the information is set in this way: [{value:name},{value:name}...] }); }, "json" );
Controller
function funcion() { $data["my_data"] = $this->example_model->get_examples($this->input->post('name1'),$this->input->post('name2')); //$data["my_data"] will contain an array like Array("0" => Array("value" => value1, "name" => name1), "1" => Array("value" => value2, "name" => name2)...) $this->load->view('json/json_example_view',$data); }
View
<?php echo json_encode($datos); ?>
PHPMailer in CodeIgniter
The first thing download the library
http://sourceforge.net/projects/phpmailer/files/phpmailer%20for%20php5_6/
move folder /system/application/libraries
create a new PHP file in the CodeIgniter’s library directory called my_phpmailer.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class My_PHPMailer { public function My_PHPMailer() { require_once('PHPMailer/class.phpmailer.php'); } }Controller
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Phpmailer extends CI_Controller { public function My_Controller(){ parent::Controller(); $this->load->library('My_PHPMailer'); $this->load->library('session'); } function index($msg = NULL) { $data['message'] = $msg; $this->load->view('contactus',$data); } public function send_mail() { $mail = new PHPMailer; //From email address and name $mail->From = "from@yourdomain.com"; $mail->FromName = "Full Name"; //To address and name $mail->addAddress("recepient1@example.com", "Recepient Name"); $mail->addAddress("recepient1@example.com"); //Recipient name is optional //Address to which recipient will reply $mail->addReplyTo("reply@yourdomain.com", "Reply"); //CC and BCC $mail->addCC("cc@example.com"); $mail->addBCC("bcc@example.com"); //Send HTML or Plain Text email $mail->isHTML(true); $mail->Subject = "Subject Text"; $mail->Body = "<i>Mail body in HTML</i>"; $mail->AltBody = "This is the plain text version of the email content"; if(!$mail->send()) { $data["message"] = "Error: " . $mail->ErrorInfo; } else { $data["message"] = "<p><h3>Message sent correctly!</h3></p>"; } $this->load->view('contactus',$data); } }View
<!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"> <meta name="description" content=""> <meta name="author" content=""> <title>Codeigniter 3.1.10 Dev - Phpmailer </title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Oleo+Script:400,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Teko:400,700" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> </head> <body id="page-top" class="index"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Oleo+Script:400,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Teko:400,700" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <section id="contact"> <div class="section-content"> <h1 class="section-header">Get in <span class="content-header wow fadeIn " data-wow-delay="0.2s" data-wow-duration="2s"> Touch with us</span></h1> <h3>PHPMailer in CodeIgniter with bootstrap contact form</h3> </div> <div class="contact-section"> <div class="container"><?php if(! is_null($message)) echo $message;?> <form action="send_mail" method="post"> <div class="col-md-6 form-line"> <div class="form-group"> <label for="exampleInputUsername">Your name</label> <input type="text" class="form-control" id="" placeholder=" Enter Name"> </div> <div class="form-group"> <label for="exampleInputEmail">Email Address</label> <input type="email" class="form-control" id="exampleInputEmail" placeholder=" Enter Email id"> </div> <div class="form-group"> <label for="telephone">Mobile No.</label> <input type="tel" class="form-control" id="telephone" placeholder=" Enter 10-digit mobile no."> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for ="description"> Message</label> <textarea class="form-control" id="description" placeholder="Enter Your Message"></textarea> </div> <div> <button type="submit" class="btn btn-default submit"><i class="fa fa-paper-plane" aria-hidden="true"></i> Send Message</button> </div> </div> </form> </div> </section> <style> /*Contact sectiom*/ .content-header{ font-family: 'Oleo Script', cursive; color:#fcc500; font-size: 45px; } .section-content{ text-align: center; } #contact{ font-family: 'Teko', sans-serif; padding-top: 60px; width: 100%; width: 100vw; height: 550px; background: #3a6186; /* fallback for old browsers */ background: -webkit-linear-gradient(to left, #3a6186 , #89253e); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, #3a6186 , #89253e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ color : #fff; } .contact-section{ padding-top: 40px; } .contact-section .col-md-6{ width: 50%; } .form-line{ border-right: 1px solid #B29999; } .form-group{ margin-top: 10px; } label{ font-size: 1.3em; line-height: 1em; font-weight: normal; } .form-control{ font-size: 1.3em; color: #080808; } textarea.form-control { height: 135px; /* margin-top: px;*/ } .submit{ font-size: 1.1em; float: right; width: 150px; background-color: transparent; color: #fff; } </style> </body> </html>
Saturday, March 22, 2014
SWFUpload in CodeIgniter
SWFUpload in CodeIgniter
First we need to integrate the library
https://code.google.com/p/swfupload/downloads/list
create a folder in the root directory of your CodeIgniter application /swf/swfupload/
View Form
The controller
First we need to integrate the library
https://code.google.com/p/swfupload/downloads/list
create a folder in the root directory of your CodeIgniter application /swf/swfupload/
View Form
<?php echo form_open('process_form/process'); // Here we put the controller's URL and the function which will process the form?> <div> <?php echo form_label('File:','file'); $data = array( 'id' => 'txtFileName', 'value' => '', 'size' => 50, 'disabled' => 'disabled', 'style' => 'border: solid 1px; background-color: #FFFFFF;'); echo form_input($data); //Insert the text field which will hold the file anem once it is uploaded ?> <span id="spanButtonPlaceholder"></span> (20 MB max) </div> <div id="fsUploadProgress"></div> <input type="hidden" name="hidFileID" id="hidFileID" value="" /> <br /> <?php $extra = 'id="btnSubmit"'; echo form_submit('upload','Send',$extra); echo form_close(); ?> <!-- Add JavaScript files for SWFUpload --> <script type="text/javascript" src="<?php echo base_url();?>js/swfupload/swfupload.js"></script> <script type="text/javascript" src="<?php echo base_url();?>js/swfupload/handlers.js"></script> <script type="text/javascript" src="<?php echo base_url();?>js/swfupload/fileprogress.js"></script> <script type="text/javascript"> var swfu; window.onload = function () { swfu = new SWFUpload({ // Backend settings upload_url: "<?php echo base_url();?>process_form/upload", file_post_name: "resume_file", // Flash file settings file_size_limit : "20 MB", //File size limit file_types : "*.jpg", // or you could use something like: "*.doc;*.wpd;*.pdf", file_types_description : "Image Files", file_upload_limit : 0, file_queue_limit : 1, // Event handler settings swfupload_loaded_handler : swfUploadLoaded,file_dialog_start_handler: fileDialogStart, file_queued_handler : fileQueued, file_queue_error_handler : fileQueueError, file_dialog_complete_handler : fileDialogComplete, //upload_start_handler : uploadStart, // I could do some client/JavaScript validation here, but I don't need to. swfupload_preload_handler : preLoad, swfupload_load_failed_handler : loadFailed, upload_progress_handler : uploadProgress, upload_error_handler : uploadError, upload_success_handler : uploadSuccess, upload_complete_handler : uploadComplete, // Button Settings button_image_url : "<?php echo base_url();?>img/upload_flash_button_61x22.png", button_placeholder_id : "spanButtonPlaceholder", button_width: 61, button_height: 22, // Flash Settings flash_url : "<?php echo base_url();?>swf/swfupload/swfupload.swf", flash9_url : "<?php echo base_url();?>swf/swfupload/swfupload_fp9.swf", custom_settings : { progress_target : "fsUploadProgress", upload_successful : false }, // Debug settings debug: false }); }; </script>
The controller
<?php class process_form extends Controller { public function process() { ... //Here we take the file's name $file_name = $this->input->post('hidFileID'); //Once we have the file's name, we could insert into the database //or whatever is needed ... } public function upload() { $config['upload_path'] = "path/to/the/folder/for/the/file/"; $config['allowed_types'] = 'jpg'; $size_mb = 20; //Max file size allowed in MB $config['max_size'] = $size_mb * 1024; // $this->load->library('upload'); $this->upload->initialize($config); if (!$this->upload->do_upload('resume_file')) { $this->data["params"]["error"] = array('error_upload' => $this->upload->display_errors()); echo $this->upload->display_errors(); } else { $uploaded_file = $this->upload->data(); //Return to the form the final name of the file once it was uploaded echo $uploaded_file["file_name"]; } } }
Upload file in yiiframework
Upload file in yiiframework
Create table t_users
id_user varchar(30)
profile_picture varchar(100)
name varchar(50)
Create table t_users
id_user varchar(30)
profile_picture varchar(100)
name varchar(50)
Form <div class="form"> <?php $form=$this->beginWidget('CActiveForm', array( 'id'=>'tuser-form', 'enableAjaxValidation'=>false, 'htmlOptions'=>array('enctype'=>'multipart/form-data'), )); ?> <p class="note"> Fields with <span class="required">*</span> are required. </p> <?php echo $form->errorSummary($model); ?> <div class="row"> <?php echo $form->labelEx($model,'profile_picture'); ?> <?php echo $form->fileField($model,'profile_picture',array('size'=>60,'maxlength'=>200)); ?> <?php echo $form->error($model,'title'); ?> </div> Controller $model->attributes=$_POST['TUser']; $model->profile_picture=CUploadedFile::getInstance($model, 'profile_picture'); if($model->save()){ if(strlen($model->profile_picture)>0) $model->profile_picture->saveAs(Yii::app()->basePath.'/../upload/'.$model->profile_picture); $this->redirect(array('view','id'=>$model->id_user)); } filter files use the rules in your model public function rules() { return array( array('picture_profile', 'file', 'types'=>'jpg, gif, png'), ... ); }
Make dropdownlist in yii framework
Make dropdownlist in yii framework
Create table tbl_country
country_name | id
Philippines | 1
USA | 2
Create table tbl_country
country_name | id
Philippines | 1
USA | 2
<div class="row"> <?php echo $form->dropDownList($model,'country_id', CHtml::listData(Country::model()->findAll(), 'id', 'country_name'), array('empty'=>'Select Country'))?> </div>
Make checkbox using ajax load in yiiframework
Make checkbox using ajax load in yiiframework
<?php echo CHtml::checkBox("load_ajax",false,array('id'=>'load_risk_all'));echo "Load All Risk Child"; $url=CController::createUrl('project/vieweach',array('project_id'=>$model->project_id)); Yii::app()->clientScript->registerScript("check", '$("#load_risk_all").change(function(){ if($(this).is(":checked")){ $("#load_risk").load("'.$url.'"); $("#load_risk").fadeIn(); }else{ $("#load_risk").html(""); } }) ', CClientScript::POS_READY); ?> <div id="load_risk"> </div> load() function in jQuery for loading the ajax content using $.ajax functions $this->renderPartial('/risk/view_each',array('provider'=>$provider),false,true); onChange event in checkbox htmlOption for supporting your own javascript model <?php echo CHtml::checkbox("load risk",false,array("onChange"=>"js:yourcustomfunction()")); ?>
Using CMaskField in your yii framework
Using CMaskField in your yii framework
<?php $this->widget('CMaskedTextField', array( 'model' => $model, 'attribute' => 'aluguel', 'mask' => '(999) 999-9999? x99999', 'htmlOptions' => array('size' => 6) )); ?> <?php $this->widget('CMaskedTextField', array( 'model' => $model, 'attribute' => 'aluguel', 'mask' => '9.999,99', 'charMap' => array('.'=>'[\.]' , ','=>'[,]'), 'htmlOptions' => array('size' => 6))); ?>
How to make CGridview with dropdown filter
How to make CGridview with dropdown filter
$this-<widget('zii.widgets.grid.CGridView',array( 'dataProvider'=<$model-<search(), 'id'=<'risk-id', 'filter'=<$model, 'columns'=<array( array( 'name'=<'No', 'type'=<'raw', 'value'=<'$this-<grid-<dataProvider-<pagination-<currentPage*$this-<grid-<dataProvider-<pagination-<pageSize + $row+1',//this for the auto page number of cgridview 'filter'=<''//without filtering ), array( 'name'=<'name', 'type'=<'raw', 'value'=<'Chtml::link(Chtml::encode($data["name"]),array("risk/view","id"=<$data["risk_id"]))', 'filter'=<CHtml::listData(Risk::model()-<findAll( array( 'select'=<array('name'), 'distinct'=<true )),"name","name")//this is the focus of your code ), array( 'name'=<'date_identified', 'type'=<'raw', 'value'=<'Chtml::encode($data-<date_identified)' ), array( 'name'=<'description', 'type'=<'raw', 'value'=<'Chtml::encode($data-<description)' ), array( 'name'=<'type', 'type'=<'raw', 'value'=<'Chtml::encode($data-<type)', ), array( 'name'=<'link', 'type'=<'raw', 'value'=<'$data-<link' ), ) ));
Alternative Way to make Dropdown menu in yii
Alternative Way to make Dropdown menu in yii
<div class="row"> <?php echo $form->dropDownList($model,'country_id', CHtml::listData(Country::model()->findAll(), 'id', 'country_name'), array('empty'=>'Select Country'))?> </div> Or other option <div class="row"> <?php echo CHtml::dropDownList('Users[country_id'],'', CHtml::listData(Country::model()->findAll(), 'id', 'country_name'), array('empty'=>'Select Country'))?> </div>
Friday, March 21, 2014
Select random data from table in yiiframework
Select random data from table in yiiframework
$models=User::model()->findAll(array( 'select'=>'*, rand() as rand', 'limit'=>24, 'order'=>'rand', ) );
Jquery Auto Refresh Div Content
Jquery Auto Refresh Div Content
jQuery and AJAX Call Code
jQuery and AJAX Call Code
<script src="http://code.jquery.com/jquery-latest.js"></script> (function($) { $(document).ready(function() { $.ajaxSetup( { cache: false, beforeSend: function() { $('#content').hide(); $('#loading').show(); }, complete: function() { $('#loading').hide(); $('#content').show(); }, success: function() { $('#loading').hide(); $('#content').show(); } }); var $container = $("#content"); $container.load("rss-feed-data.php"); var refreshId = setInterval(function() { $container.load('rss-feed.php'); }, 9000); }); })(jQuery);PHP Data Script Code
<?php $feed_url = 'http://tutorial101.com/blog/feed/'; $content = file_get_contents($feed_url); $x = new SimpleXmlElement($content); $feedData = ''; $date = date("Y-m-d H:i:s"); //output $feedData .= "<ul>"; foreach($x->channel->item as $entry) { $feedData .= "<li><a href='$entry->link' title='$entry->title'>" . $entry->title . "</a></li>"; } $feedData .= "</ul>"; $feedData .= "<p>Data current as at: ".$date."</p>"; echo $feedData; ?>View
<div id="wrapper"> <div id="content"></div> <img src="loading.gif" id="loading" alt="loading" style="display:none;" /> </div>
Saturday, March 15, 2014
Remove index.php in Jii Framework
Remove index.php in Jii Framework
Modify url protected/config/main.php find 'urlManager'=>array( and change to this code
Add .htaccess file in root directory
RewriteEngine on # if a directory or a file exists, use it directly RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d # otherwise forward it to index.php RewriteRule . index.php
Modify url protected/config/main.php find 'urlManager'=>array( and change to this code
'urlManager'=>array( 'urlFormat'=>'path', 'showScriptName'=>false, 'caseSensitive'=>false, ),Run, index.php remove
Wednesday, March 5, 2014
Jquey event mouse click
Jquey event mouse click
<script> $(document).ready(function(){ $('.rightclick').bind('contextmenu', function(e) { e.preventDefault(); alert('The eventhandler will make sure, that the contextmenu dosnt appear.'); }); }); </script> <p><a href="#" class="rightclick"><h1>Jquey event mouse click</h1></a></p>
Friday, October 25, 2013
Ajax Load More Pagination Results
Ajax Load More Pagination Results
Create table
CREATE TABLE IF NOT EXISTS `paginate` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(60) NOT NULL,
`message` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=51 ;
Create table
CREATE TABLE IF NOT EXISTS `paginate` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(60) NOT NULL,
`message` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=51 ;
//index.php <?php include("config.inc.php"); $results = mysqli_query($connecDB,"SELECT COUNT(*) FROM paginate"); $get_total_rows = mysqli_fetch_array($results); //total records //break total records into pages $total_pages = ceil($get_total_rows[0]/$item_per_page); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax Load More Pagination Results</title> <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var track_click = 0; //track user click on "load more" button, righ now it is 0 click var total_pages = <?php echo $total_pages; ?>; $("#results").load("fetch_pages.php", {'page':track_click} ); //initial data to load $(".load_more").click(function (e) { //user clicks on button $(this).hide(); //hide load more button on click $('.animation_image').show(); //show loading image if(track_click <= total_pages) //make sure user clicks are still less than total pages { //post page number and load returned data into result element $.post('fetch_pages.php',{'page': track_click}, function(data) { $(".load_more").show(); //bring back load more button $("#results").append(data); //append data received from server //scroll page to button element $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500); //hide loading image $('.animation_image').hide(); //hide loading image once data is received track_click++; //user click increment on load button }).fail(function(xhr, ajaxOptions, thrownError) { alert(thrownError); //alert any HTTP error $(".load_more").show(); //bring back load more button $('.animation_image').hide(); //hide loading image once data is received }); if(track_click >= total_pages-1) { //reached end of the page yet? disable load button $(".load_more").attr("disabled", "disabled"); } } }); }); </script> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="results"></div> <div align="center"> <button class="load_more" id="load_more_button">load More</button> <div class="animation_image" style="display:none;"><img src="ajax-loader.gif"> Loading...</div> </div> </body> </html>
//config.inc.php <?php $db_username = 'root'; $db_password = ''; $db_name = 'dbpagenation'; $db_host = 'localhost'; $item_per_page = 5; $connecDB = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database'); ?>
//fetch_pages.php <?php include("config.inc.php"); //include config file //sanitize post value $page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH); //throw HTTP error if page number is not valid if(!is_numeric($page_number)){ header('HTTP/1.1 500 Invalid page number!'); exit(); } //get current starting point of records $position = ($page_number * $item_per_page); //Limit our results within a specified range. $results = mysqli_query($connecDB,"SELECT id,name,message FROM paginate ORDER BY id DESC LIMIT $position, $item_per_page"); //output results from database echo '<ul class="page_result">'; while($row = mysqli_fetch_array($results)) { echo '<li id="item_'.$row["id"].'"><span class="page_name">'.$row["id"].') '.$row["name"].'</span><span class="page_message">'.$row["message"].'</span></li>'; } echo '</ul>'; ?>
//style.css #results{ font: 12px Arial, Helvetica, sans-serif; width: 400px; margin-left: auto; margin-right: auto; } #results .loading-indication{ background:#FFFFFF; padding:10px; position: absolute; } .paginate { padding: 0px; margin: 0px; height: 30px; display: block; text-align: center; } .paginate li { display: inline-block; list-style: none; padding: 0px; margin-right: 1px; width: 30px; text-align: center; background: #4CC2AF; line-height: 25px; } .paginate .active { display: inline-block; list-style: none; padding: 0px; margin-right: 1px; width: 30px; text-align: center; line-height: 25px; background-color: #666666; } .paginate li a{ color:#FFFFFF; text-decoration:none; } .page_result{ padding: 0px; } .page_result li{ background: #E4E4E4; margin-bottom: 5px; padding: 10px; font-size: 12px; list-style: none; } .page_result .page_name { font-size: 14px; font-weight: bold; margin-right: 5px; }
CSS3 Dropdown Navigation menu
CSS3 Dropdown Navigation menu
//index.html <html lang="en"> <head> <link href="stylesheet.css" type="text/css" rel="stylesheet"> <title> CSS3 Dropdown Navigation menu</title> <!-- IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body > <nav> <ul id="navMain"> <li><a href="#"> Home</a></li> <li><a href="#"> About</a> <ul> <li><a href="#"> Staff Members</a></li> <li><a href="#"> Qualifications</a></li> <li><a href="#"> Our Services</a></li> <li><a href="#"> Location details</a></li> <li><a href="#"> Pricing details</a></li> </ul> </li> <li><a href="#"> Contact</a></li> <li><a href="#"> Newsletter</a></li> </ul> </nav> </body> </html>
//style.css html{ padding:10px; } #navMain{ list-style:none; font-family:tahoma; font-size:14px; border:1px #a81b2f solid; float:left; width:940px; margin:0; padding:0; background:url('images/nav-bg.jpg'); border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } #navMain > li{ float:left; position:relative; border-right:1px solid #9b2838; } #navMain > li > a{ color:#f4e4e6; float:left; text-decoration:none; padding:11px 18px; border-right:1px solid #bf3549; } #navMain > li > a:hover{ background: rgba(99, 20, 32, 0.25); } #navMain .currentPage a{ background: rgb(99, 20, 32); /* RGBa with 0.6 opacity */ background: rgba(99, 20, 32, 0.25); } #navMain ul { display:none; position:absolute; list-style:none; left:0; padding:0; margin:0; border-top:1px #a81b2f solid; background:#e8edee; } #navMain ul li a{ color:#5d6364; text-decoration:none; display:block; padding:6px 7px; border-bottom:1px solid #d3d9da; border-left:1px solid #d3d9da; border-right:1px solid #d3d9da; font-size:13px; } #navMain li:hover ul { display:block; top:39px; min-width:200px; }
Wednesday, October 9, 2013
Uploading using jquery ajax
Uploading using jquery ajax
//index.html <html lang="en"> <head> <meta charset="UTF-8" /> <title>Uploading using jquery ajax</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="main"> <h1>Upload Your Images</h1> <form method="post" enctype="multipart/form-data" action="upload.php"> <input type="file" name="images" id="images" multiple /> <button type="submit" id="btn">Upload Files!</button> </form> <div id="response"></div> <ul id="image-list"> </ul> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="upload.js"></script> </body> </html>
//upload.js (function () { var input = document.getElementById("images"), formdata = false; function showUploadedItem (source) { var list = document.getElementById("image-list"), li = document.createElement("li"), img = document.createElement("img"); img.src = source; li.appendChild(img); list.appendChild(li); } if (window.FormData) { formdata = new FormData(); document.getElementById("btn").style.display = "none"; } input.addEventListener("change", function (evt) { document.getElementById("response").innerHTML = "Uploading . . ." var i = 0, len = this.files.length, img, reader, file; for ( ; i < len; i++ ) { file = this.files[i]; if (!!file.type.match(/image.*/)) { if ( window.FileReader ) { reader = new FileReader(); reader.onloadend = function (e) { showUploadedItem(e.target.result, file.fileName); }; reader.readAsDataURL(file); } if (formdata) { formdata.append("images[]", file); } } } if (formdata) { $.ajax({ url: "upload.php", type: "POST", data: formdata, processData: false, contentType: false, success: function (res) { document.getElementById("response").innerHTML = res; } }); } }, false); }());
//upload.php //create uploads folder root directory <?php foreach ($_FILES["images"]["error"] as $key => $error) { if ($error == UPLOAD_ERR_OK) { $name = $_FILES["images"]["name"][$key]; move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]); } } echo "<h2>Successfully Uploaded Images</h2>";
//style.css body { font: 14px/1.5 helvetica-neue, helvetica, arial, san-serif; padding:10px; } h1 { margin-top:0; } #main { width: 300px; margin:auto; background: #ececec; padding: 20px; border: 1px solid #ccc; } #image-list { list-style:none; margin:0; padding:0; } #image-list li { background: #fff; border: 1px solid #ccc; text-align:center; padding:20px; margin-bottom:19px; } #image-list li img { width: 258px; vertical-align: middle; border:1px solid #474747; }
Subscribe to:
Posts (Atom)