Posts

Showing posts with the label Bootstrap

How to Change Cursor on Hover in CSS

 <!DOCTYPE html> <html> <head> <style> .alias {cursor: alias;} .all-scroll {cursor: all-scroll;} .auto {cursor: auto;} .cell {cursor: cell;} .context-menu {cursor: context-menu;} .col-resize {cursor: col-resize;} .copy {cursor: copy;} .crosshair {cursor: crosshair;} .default {cursor: default;} .e-resize {cursor: e-resize;} .ew-resize {cursor: ew-resize;} .grab {cursor: -webkit-grab; cursor: grab;} .grabbing {cursor: -webkit-grabbing; cursor: grabbing;} .help {cursor: help;} .move {cursor: move;} .n-resize {cursor: n-resize;} .ne-resize {cursor: ne-resize;} .nesw-resize {cursor: nesw-resize;} .ns-resize {cursor: ns-resize;} .nw-resize {cursor: nw-resize;} .nwse-resize {cursor: nwse-resize;} .no-drop {cursor: no-drop;} .none {cursor: none;} .not-allowed {cursor: not-allowed;} .pointer {cursor: pointer;} .progress {cursor: progress;} .row-resize {cursor: row-resize;} .s-resize {cursor: s-resize;} .se-resize {cursor: se-resize;} .sw-resize {cursor: sw-resize;} .text

how to add page load animation

first add jquery.min.js cdn in head after add style on head file <style type="text/css">   .loader {     position: fixed;     left: 0px;     top: 0px;     width: 100%;     height: 100%;     z-index: 9999;     background: url('assent/dist/img/loading.gif') 50% 50% no-repeat rgb(249,249,249);     opacity: .8; } </style> after add javascript before body tag: <script>$(window).on('load', function(){      $(".loader").fadeOut("slow"); });</script> after add this code after body tag:   <div class="loader"></div>

Displaying a flash message after redirect in Codeigniter

To set flashdata you need to redirect controller function $this->session->set_flashdata('message_name', 'This is test message'); //redirect to some function redirect("controller/function_name"); //echo in view or controller $this->session->flashdata('message_name'); E.X in model file if($query){ $this->session->set_flashdata('xyzsuccess', 'Added Sucessfully '); redirect('/xyz, 'refresh'); }else{ $this->session->set_flashdata('xyzerror', 'Added error'); redirect('/xyz', 'refresh'); } in view file:  if($this->session->flashdata('xyzsuccess')){echo "<div class='alert alert-success'><strong>Success!</strong> ".$this->session->flashdata('xyzsuccess')."</div>";}elseif($this->session->flashdata('xyzerror')){echo "<div class='alert alert-dan

Codeigniter Fullcalendar Example

A fullcalendar is a open source jquery library and that provide to create event in calendar and you can easily customize library event. fullcalendar also provide drag and drop event calendar with responsive. In this example, we will create "events" table with title, start_date and end_date. We will store data manually on that table and then display all events form database dynamically. So you have to just follow few step and get layout like as bellow screen shot. Step 1: Create events Table In first table we must have one table with some dummy records. For this example i will create "events" table and dummy records as like bellow query: events table CREATE TABLE IF NOT EXISTS `events` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(255) NOT NULL, `start_date` date NOT NULL, `end_date` date NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ; Step 2: Make database configurat

how to export html data to pdf in angularjs and javascript

HTML : <button onclick="pdfdownload()" class="btn btn-success"><i class="fa fa-download" ></i> Download PDf</button> <div class="table-responsive" id="exportthis"> this is demo text </div> Javascript: <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <script type="text/javascript"> function pdfdownload () { html2canvas(document.getElementById('exportthis'), {             onrendered: function (canvas) {                 var data = canvas.toDataURL();                 var docDefinition = {                     content: [{                         image: data,                         width: 500,                     }]                 };                 pdfMake.createPdf