Random of Me: JQUERY

Showing posts with label JQUERY. Show all posts

Thursday, 21 January 2016

Validations Input Type File Using Jquery

well honestly this is my simple demo about validations in modal bootsrap, but this very bassic for validations input type file in modal bootsrap using jquery.

You can adapot this style to yours !

I give value in input type file by giving id
Then check it using if then execute every condition

Here is simple demo made for you out there

See the Pen Check input type file empty por not by Freddy Sidauruk (@sidaurukfreddy) on CodePen.

Thanks for visiting Me !

Tuesday, 19 January 2016

Change date MySQL to indonesia date using moment.js

as long as you develop cms you need to modif everything you need based on your requirements, locale and languange to make your users know why and how it came be,

Last posting about change date from database to view using codeignter, now i'm going to give tutorial about change date from database to view using moment.js

Here is simple demo

See the Pen OMOGXg by Freddy Sidauruk (@sidaurukfreddy) on CodePen.

Thanks for visiting me, please feel free to comment !

Wednesday, 6 January 2016

Get current time using jquery event onclick

Hello qucik tutorial get current time using jquery by event on click, here is demo

See the Pen OMpgEr by Freddy Sidauruk (@sidaurukfreddy) on CodePen.

Thanks for visiting me

Tuesday, 24 November 2015

Resize and Crop Before Upload to Server Using Codeignter

Developers always create CRUD i guess, today i will give short and quick tutorial about upload image with resize and crop to database using codeignter, the inspiration came from here

So i override all based on my needed, here is screen shot ignore the images

Well in that form i add up one input type box just for train my self if in the future will have alot of field, actually i just insert data image and name to table

Controller

View

<!DOCTYPE html>
<html lang="en" class="no-js">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>Crop Codepen</title>
  <meta name="description" content="Learn how to resize images using JavaScript and the HTML5 Canvas element using controls, commonly seen in photo editing applications." />
  <meta name="keywords" content="canvas, javascript, HTML5, resizing, images" />
  <meta name="author" content="Codrops" />
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>asset/css/crop.css" />
  <script type='text/javascript'>
   var site = "<?php echo site_url();?>";
  </script> 
 
 
 
 </head>
 <body>
   
   
  <input type="file" class="btn js-loadfile" value="Upload" />
  <button class="btn js-reset">Reset</button>
  <button class="btn js-crop">Crop</button>
  <button class="btn" id="simpan">Simpan</button>
  
  
  <input type="text" name="test" id="test" placeholder="Put your name to see">
  
<div class="crop-wrapper">
   <div class="top-overlay">
   </div>
<div class="bottom-overlay">
   </div>
<div class="left-overlay">
   </div>
<div class="right-overlay">
   </div>
<div class="overlay">
    <div class="overlay-inner">
    </div>
</div>
<img class="resize-image" src="<?php echo base_url() ?>asset/img/image.jpg" alt="image for resizing">
  </div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="<?php echo base_url() ?>asset/js/jquery-2.1.1.min.js"></script>
  <script src="<?php echo base_url() ?>asset/js/crop.js"></script>
 </body>
</html>
</tetextarea>

Thanks for reading my blog hope this help you, sorry for uncomfortable

Database can download at here
Project can download here

Friday, 13 November 2015

Show Detail in Modal Bootsrap which Came From Database Using Codeignter

As developers we just Create, Read, Edit, Delete for me now on, but will be more than that cause i'm still newbie, so let me give short tutorial about show data in modal bootsrap using framework codeigniter, check this out

First create database blog and also table list_student

 -- phpMyAdmin SQL Dump  
 -- version 4.2.11  
 -- http://www.phpmyadmin.net  
 --  
 -- Host: 127.0.0.1  
 -- Generation Time: 13 Nov 2015 pada 11.15  
 -- Versi Server: 5.6.21  
 -- PHP Version: 5.6.3  
 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";  
 SET time_zone = "+00:00";  
 /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;  
 /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;  
 /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;  
 /*!40101 SET NAMES utf8 */;  
 --  
 -- Database: `blog`  
 --  
 -- --------------------------------------------------------  
 --  
 -- Struktur dari tabel `list_student`  
 --  
 CREATE TABLE IF NOT EXISTS `list_student` (  
 `id` int(11) NOT NULL,  
  `title` varchar(250) NOT NULL,  
  `desc` text NOT NULL  
 ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;  
 --  
 -- Dumping data untuk tabel `list_student`  
 --  
 INSERT INTO `list_student` (`id`, `title`, `desc`) VALUES  
 (1, 'This is Student Title 1', 'Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.'),  
 (2, 'This is Student Title 2', 'Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.');  
 --  
 -- Indexes for dumped tables  
 --  
 --  
 -- Indexes for table `list_student`  
 --  
 ALTER TABLE `list_student`  
  ADD PRIMARY KEY (`id`);  
 --  
 -- AUTO_INCREMENT for dumped tables  
 --  
 --  
 -- AUTO_INCREMENT for table `list_student`  
 --  
 ALTER TABLE `list_student`  
 MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=3;  
 /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;  
 /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;  
 /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Then create controller like this

 <?php  
 defined('BASEPATH') OR exit('No direct script access allowed');  
 class Modal extends CI_Controller  
 {  
   public function index()  
   {  
     $data['modal'] = $this->modal_bootsrap->modal();  
     $this->load->view('modal', $data);  
   }  
   public function detail()  
   {  
     $id       = $this->input->post('id');  
     $data['detail'] = $this->modal_bootsrap->detail($id);  
     $this->load->view('detail', $data);  
   }  
 }

Here is view came function index

 <html>       
      <head>  
 <title>CRUD DROPZONE</title>  
 <link href="<?php echo base_url() ?>asset/css/bootstrap.min.css" rel="stylesheet">  
  <script type='text/javascript'>  
      //auto complete depan  
      var site = "<?php echo site_url();?>";   
      var  base_url = '<?=base_url()?>';  
 </script>  
 <script src="<?php echo base_url() ?>asset/js/jquery.min.js"></script>  
 <script src="<?php echo base_url() ?>asset/js/bootstrap.min.js"></script>  
 <script src="<?php echo base_url() ?>asset/js/dropzone.js"></script>  
 <script src="<?php echo base_url() ?>asset/js/ajax.js"></script>  
 <script src="<?php echo base_url() ?>asset/js/ajaxdropzone.js"></script>  
 <link href="<?php echo base_url()?>asset/css/bootstrap.min.css" rel="stylesheet">  
 <link href='<?php echo base_url();?>asset/css/dropzone.css' rel='stylesheet' />  
 </head>  
      <body>  
       <?php   
                 foreach ($modal->result() as $row) { ?>  
 <a href="" class="btn btn-lg btn-success"  data-toggle="modal" href="#basicModal" data-whatever="<?php echo $row->id ?>"><?php echo $row->title ?></a>  
 <br>  
                <br>  
           <?php   
            } ?>  
 <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">  
   <div class="modal-dialog">  
     <div class="modal-content">  
       <div class="modal-header">  
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>  
       <h4 class="modal-title" id="myModalLabel">  
 Modal title</h4>  
 </div>  
 <div class="modal-body" >  
                     <div id="detailstudent">  
                     </div>  
 </div>  
 <div class="modal-footer">  
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
     </div>  
 </div>  
 </div>  
 </div>  
 </body>  
 </html>

Model is here

 <?php  
 if (!defined('BASEPATH'))  
   exit('No direct script access allowed');  
 class modal_bootsrap extends CI_Model  
 {  
   function modal()  
   {  
     return $this->db->get('list_student'); // Produces: SELECT * FROM mytable  
   }  
   public function detail()  
   {  
     $id = $this->input->post('id');  
     return $this->db->query("SELECT * FROM list_student where id='$id'");  
   }  
 }

Then don't forget making ajax cause it will handle data in modal bootsrap which we load file inside modal with tag id="detailstudent"

 $(function() {   
  $('#basicModal').on('shown.bs.modal', function(event) {  
      var button = $(event.relatedTarget)   
      var id = button.data('whatever')   
      var modal = $(this);  
      var dataString = 'id=' + id;  
   $.ajax({  
         type:"POST",  
         url: base_url + "modal/detail",  
         data: dataString,    
         success: function(data) {  
    //console.log(data);  
          $("#detailstudent").html(data);  
         },  
         error: function(jqXHR, exception) {  
           alert('error ajax');  
         }  
     })  
 });  
 });

This tutorial came from here , oh yea almost forget to configuration autoload.php

 <?php  
 defined('BASEPATH') OR exit('No direct script access allowed');  
 /*  
 | -------------------------------------------------------------------  
 | AUTO-LOADER  
 | -------------------------------------------------------------------  
 | This file specifies which systems should be loaded by default.  
 |  
 | In order to keep the framework as light-weight as possible only the  
 | absolute minimal resources are loaded by default. For example,  
 | the database is not connected to automatically since no assumption  
 | is made regarding whether you intend to use it. This file lets  
 | you globally define which systems you would like loaded with every  
 | request.  
 |  
 | -------------------------------------------------------------------  
 | Instructions  
 | -------------------------------------------------------------------  
 |  
 | These are the things you can load automatically:  
 |  
 | 1. Packages  
 | 2. Libraries  
 | 3. Drivers  
 | 4. Helper files  
 | 5. Custom config files  
 | 6. Language files  
 | 7. Models  
 |  
 */  
 /*  
 | -------------------------------------------------------------------  
 | Auto-load Packages  
 | -------------------------------------------------------------------  
 | Prototype:  
 |  
 | $autoload['packages'] = array(APPPATH.'third_party', '/usr/local/shared');  
 |  
 */  
 $autoload['packages'] = array();  
 /*  
 | -------------------------------------------------------------------  
 | Auto-load Libraries  
 | -------------------------------------------------------------------  
 | These are the classes located in the system/libraries folder  
 | or in your application/libraries folder.  
 |  
 | Prototype:  
 |  
 |     $autoload['libraries'] = array('database', 'email', 'session');  
 |  
 | You can also supply an alternative library name to be assigned  
 | in the controller:  
 |  
 |     $autoload['libraries'] = array('user_agent' => 'ua');  
 */  
 $autoload['libraries'] = array('database', 'email', 'session');  
 /*  
 | -------------------------------------------------------------------  
 | Auto-load Drivers  
 | -------------------------------------------------------------------  
 | These classes are located in the system/libraries folder or in your  
 | application/libraries folder within their own subdirectory. They  
 | offer multiple interchangeable driver options.  
 |  
 | Prototype:  
 |  
 |     $autoload['drivers'] = array('cache');  
 */  
 $autoload['drivers'] = array();  
 /*  
 | -------------------------------------------------------------------  
 | Auto-load Helper Files  
 | -------------------------------------------------------------------  
 | Prototype:  
 |  
 |     $autoload['helper'] = array('url', 'file');  
 */  
 $autoload['helper'] = array('url', 'file');  
 /*  
 | -------------------------------------------------------------------  
 | Auto-load Config files  
 | -------------------------------------------------------------------  
 | Prototype:  
 |  
 |     $autoload['config'] = array('config1', 'config2');  
 |  
 | NOTE: This item is intended for use ONLY if you have created custom  
 | config files. Otherwise, leave it blank.  
 |  
 */  
 $autoload['config'] = array();  
 /*  
 | -------------------------------------------------------------------  
 | Auto-load Language files  
 | -------------------------------------------------------------------  
 | Prototype:  
 |  
 |     $autoload['language'] = array('lang1', 'lang2');  
 |  
 | NOTE: Do not include the "_lang" part of your file. For example  
 | "codeigniter_lang.php" would be referenced as array('codeigniter');  
 |  
 */  
 $autoload['language'] = array();  
 /*  
 | -------------------------------------------------------------------  
 | Auto-load Models  
 | -------------------------------------------------------------------  
 | Prototype:  
 |  
 |     $autoload['model'] = array('first_model', 'second_model');  
 |  
 | You can also supply an alternative model name to be assigned  
 | in the controller:  
 |  
 |     $autoload['model'] = array('first_model' => 'first');  
 */  
 $autoload['model'] = array('dropzone_model','modal_bootsrap');

Note

I use codeignter without index.php so you need to remove index.php first to make all working fine
You can download database at here
File is here

The way you download, please wait the click arrow in the top right then you can get file,

If you have something to disscuss feel free to drop comment here,

Thanks for visiting me

Monday, 2 November 2015

Change parent div background color by click href Using jquery

As developer we need to guide user or giving user has experience in our projects. today i have been learning something new for me lah that give user know where is the data already click in it, so i use jquery i create demo in codepen, enjoy lah

See the Pen LpGzjW by Freddy Sidauruk (@sidaurukfreddy) on CodePen.

Wednesday, 28 October 2015

how detect modal bootsrap will open or close by clicking href

Hello guys, now i will give short tutorial about detect modal open or not, cause sometime programmers need this way to thorw variable inside modal or anything else based on your need it,

Here is my demo Chech This out

Here js detect modal open

  $('#myModal').on('shown.bs.modal', function(event) {  
  alert('modal open baby');  
 });

Here href to open modal

 <button class="btn btn-info btn-lg" data-target="#myModal" data-toggle="modal" type="button">Open Modal</button>

Here cancel button in the top

  <button aria-hidden="true" class="close" data-dismiss="modal" id="cancel" type="button">×</button>  
 Here cancel button in the bottom  
  <div class="modal-footer">  
 <button class="btn btn-primary" id="btnsubmit" type="button">Save</button>  
         <button class="btn btn-danger" data-dismiss="modal" id="btncancel" type="button">Cancel</button>  
       </div>  

Here js detect when users close or cancel modal

 //detect user close or cancel modal  
  $('#cancel,#btncancel').on("click", function(e) {  
     console.log('modal cancel or close');  
   });

Wednesday, 1 July 2015

Click Scroll to Specification Div With Fixed Navbar in Bootsrap has Header

Hi how are you guys ! hope you fine especially for my friend muslim cause fasting already finish (Maksdunya Buka :v)

Well this afternoon i will give short tutorial about title above, Hope you understand what title does mean!

when you have dummy html has effect scroll to div then you searching in googling found many plugin match after that you feel it's not good one cause every plugin when you customize with your dummy is not easy !

http://www.jozefbutko.com/stickynavbar/
I thought link above the best way for me but tested 3 times make me heck the documentation is not complete then i leave it.

Then i googling and i think i'm lucky i found this link http://jquery-plugins.net/tag/sticky-scroll but after 5 minutes it kill me slowly to much plugin testing and tested one by one so i leave them

so i feel lucky i found this plugin http://www.outyear.co.uk/smint/ Easy to setting you only need make simple template has header, navbar and content div so here is give simple template i used
bootsrap

<div class="container">
 <div class="row">
   <div class="col-md-12">
     
   </div>
</div>
<div class="subMenu">
  <div class="container-fluid" style="float: none;">
   <nav class="navbar navbar-default">
   <ul class="nav navbar-nav ">
<li><a id="s1" href="#s1">Home</a></li>
<li><a id="s2" href="#s2">Page 1</a></li>
<li><a id="s3" href="#s3">Page 2</a></li>
<li><a id="s4" href="#s4">Page 3</a></li>
</ul>
</nav>
      </div>
</div>
<div class="row section s1">
    
   </div>
<div class="row section s2">
    
   </div>
<div class="row section s3">
    
   </div>
</div>
</form>
Look navbar and eery div, i give simple explanation href="#s1" it direct you to div with class to div class section s1 for detail please go to link  http://www.outyear.co.uk/smint/

But this plugin has bugs if there is href which is not scroll it will not working for example

Code above not working becase there is active link which is not scroll some one have already make issue to author in github but not answering https://github.com/rabmyself/smint/issues/7 then after chat in twitter with the author the solutions is put external links in the end !

So this is my simple demo to make sense http://codepen.io/anon/pen/doJEBr Hope this tutorial help you, Please be free to disscuss another issue about it !

You can download file at here

Thans for visiting me !

Monday, 29 June 2015

Tutorial Show and Hide Div by Click Radio Button Using Jquery

Based on experience build simple form till complex form you need to engaged jquery stuff, somet type but sometime youtime you need only fill in some input should fill all input type, so here is simple form i created for you Form detect by event click in jquery so this is the code
To make you understand here is i make tutorial in jsfiddle Feel free to comments below, Happy COding !