Mega Menu css

Demo : https://bootsnipp.com/snippets/orE6Z


Css:
/* menu css*/
 /* adds some margin below the link sets  */
.navbar .dropdown-menu div[class*="col"] {
   margin-bottom:1rem;
}

.navbar .dropdown-menu {
  border:none;
  background-color:#fff!important;
}

.nav .readmore{ color: #546DFD!important; }
/* breakpoint and up - mega dropdown styles */
@media screen and (min-width: 992px) {
 
  /* remove the padding from the navbar so the dropdown hover state is not broken */
.navbar {
  padding-top:0px;
  padding-bottom:0px;
}

/* remove the padding from the nav-item and add some margin to give some breathing room on hovers */
.navbar .nav-item {
  padding:1px;
  margin:0 .25rem;
}
.navbar .nav-item a:hover {
color: #546DFD!important;
}
.nav .readmore{ color: #546DFD!important; }
/* makes the dropdown full width  */
.navbar .dropdown {position:static;}

.navbar .dropdown-menu {
  width:100%;
  left:0;
  right:0;
/*  height of nav-item  */
  top:45px;
}
 
  /* shows the dropdown menu on hover */
.navbar .dropdown:hover .dropdown-menu, .navbar .dropdown .dropdown-menu:hover {
  display:block!important;
}
 
  .navbar .dropdown-menu {
    border: 1px solid rgba(0,0,0,.15);
    background-color: #fff;
  }

}

.navbar-dark .navbar-nav .nav-link {
    color: #000!important;
}
.navbar-dark .navbar-nav .nav-link : hover{
    color: #5672F9!important;
    font-weight: normal;
}

.navbar-dark .navbar-nav .readmore {
    color: #546DFD!important;
}
/******************************Drop-down menu work on hover**********************************/
.mainmenu{background: none;border: 0 solid;margin: 0;padding: 0;min-height:20px;width: 100%;}
@media only screen and (min-width: 767px) {
.mainmenu .collapse ul li:hover> ul{display:block}
.mainmenu .collapse ul ul{position:absolute;top:100%;left:0;min-width:250px;display:none}
/*******/
.mainmenu .collapse ul ul li{position:relative}
.mainmenu .collapse ul ul li:hover> ul{display:block}
.mainmenu .collapse ul ul ul{position:absolute;top:0;left:100%;min-width:250px;display:none}
/*******/
.mainmenu .collapse ul ul ul li{position:relative}
.mainmenu .collapse ul ul ul li:hover ul{display:block}
.mainmenu .collapse ul ul ul ul{position:absolute;top:0; left:100%; min-width:250px; display:none; z-index:1}

}
@media only screen and (max-width: 767px) {
.navbar-nav .show .dropdown-menu .dropdown-menu > li > a{padding:16px 15px 16px 35px}
.navbar-nav .show .dropdown-menu .dropdown-menu .dropdown-menu > li > a{padding:16px 15px 16px 45px}
}




/* menu css*/
Js :

<script type="text/javascript">
  $(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready

// breakpoint and up 
$(window).resize(function(){
  if ($(window).width() >= 980){ 

      // when you hover a toggle show its dropdown menu
      $(".navbar .dropdown-toggle").hover(function () {
         $(this).parent().toggleClass("show");
         $(this).parent().find(".dropdown-menu").toggleClass("show");
       });

        // hide the menu when the mouse leaves the dropdown
      $( ".navbar .dropdown-menu" ).mouseleave(function() {
        $(this).removeClass("show"); 
      });
 
    // do something here
  }
}); 
 
 

// document ready 
});

</script>

Html : 
<nav class="navbar navbar-expand-lg navbar-dark  ">
  <a class="navbar-brand" href="{{ url('/') }}">
            <img src="{{ asset('public/front/images/logo.png') }} " alt="">
          </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/') }}">Home</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Category
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">

         
          <div class="container">
            <div class="row">
              <div class="col-md-2">
               
                <ul class="nav flex-column">
                <li class="nav-item">
                  <a class="nav-link active" href="#"><b> Category 1</b></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link readmore" href="#"  >Read more...</a>
                </li>
              </ul>
              </div>
               <!-- /.col-md-4  -->
               <div class="col-md-2">
               
                <ul class="nav flex-column">
                <li class="nav-item">
                  <a class="nav-link active" href="#"><b> Category 2</b></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link readmore" href="#">Read more...</a>
                </li>
              </ul>
              </div>
               <!-- /.col-md-4  -->
              <div class="col-md-2">
               
                <ul class="nav flex-column">
                <li class="nav-item">
                  <a class="nav-link active" href="#"><b> Category 2</b></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link readmore" href="#">Read more...</a>
                </li>
              </ul>
              </div>
               <!-- /.col-md-4  -->
              <div class="col-md-2">
                <ul class="nav flex-column">
                <li class="nav-item">
                  <a class="nav-link active" href="#"><b> Category 3</b></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link " href="#">Link item</a>
                </li>
              </ul>
              </div>
              <!-- /.col-md-4  -->
               <!-- /.col-md-4  -->
              <div class="col-md-2">
                <ul class="nav flex-column">
                <li class="nav-item">
                  <a class="nav-link active" href="#"><b> Category 4</b></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
              </ul>
              </div>
              <!-- /.col-md-4  -->
               <!-- /.col-md-4  -->
              <div class="col-md-2">
                <ul class="nav flex-column">
                <li class="nav-item">
                  <a class="nav-link active" href="#"><b> Category 5</b></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
              </ul>
              </div>
              <!-- /.col-md-4  -->
               <!-- /.col-md-4  -->
              <div class="col-md-2">
                <ul class="nav flex-column">
                <li class="nav-item">
                  <a class="nav-link active" href="#"><b> Category 6</b></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
              </ul>
              </div>
              <!-- /.col-md-4  -->
             
              <div class="col-md-2">
                <a href="#">
                  <img src="http://apnasanpur.in.net/classified/public/front/images/products-2.jpg" alt="" class="img-fluid">
                </a>
              </div>
              <!-- /.col-md-4  -->
            </div>
          </div>
          <!--  /.container  -->


        </div>
      </li>


              <li class="nav-item">
                  <a  class="nav-link" href="{{ route('plan.membership') }}">Membership</a>
                </li>
              <li class="nav-item">
                <a  class="nav-link" href="{{ route('cmspage','privacy-policy') }}">Privacy Policy</a>
              </li>
              <li class="nav-item">
                <a  class="nav-link" href="{{ route('cmspage','area-of-services') }}">Area of services</a>
              </li>

    </ul>

    <ul class="navbar-nav ml-auto mt-10">

            @if (Route::has('login'))
               
                    @auth
                      <li class="nav-item">
                        <a class="nav-link login-button" href="{{ route('dashboard') }}">Dashboard</a>
                      </li>
                      <li class="nav-item">
                        <a  title="Logout" class="nav-link logout-button" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-formicon').submit();">
                                       
                                        Logout
                                    </a>
                                    <form id="logout-formicon" action="{{ route('logout') }}" method="POST" style="display: none;">
                                        @csrf
                                    </form>
                      </li>
                    @else
                    <li class="nav-item">
                      <a class="nav-link login-button" href="{{ route('login') }}">Login</a>
                    </li>

                        @if (Route::has('register'))
                           
                            <li class="nav-item">
                                <a class="nav-link add-button" href="{{ route('register') }}"> Register</a>
                            </li>
                        @endif

                       
                    @endauth
               
            @endif
            <!-- <li class="nav-item">
                          <a class="nav-link add-button" href="#"><i class="fa fa-plus-circle"></i> Add Listing</a>
                        </li> -->

             
             
            </ul>
   
  </div>



</nav>

Rating star script

Demo : https://www.jqueryscript.net/other/rating-star-icons.html

HTML : 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible"  >

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
            integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
            crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
            crossorigin="anonymous"></script>

    <script src="./dist/rating.js"></script>
</head>
<body>


       

 
   
                    <div id="review"></div>
                    <input type="text"   id="starsInput" class="form-control form-control-sm">
               
 



<script>
    $("#review").rating({
        "value": 2,
        "click": function (e) {
            console.log(e);
            $("#starsInput").val(e.stars);
              $("#review").css("color", "red");
        }
    });

     
</script>
</body>
</html>

Multilevel Dropdown Menu Bootstrap 4

Demo Url : https://bootsnipp.com/snippets/35p8X

Css :
<style type="text/css">
.menu-area{background: #fff}
.dropdown-menu{padding:0;margin:0;border:0 solid transition!important;border:0 solid rgba(0,0,0,.15);border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important}
.mainmenu a, .navbar-default .navbar-nav > li > a, .mainmenu ul li a , .navbar-expand-lg .navbar-nav .nav-link{color:#000; font-size:16px;text-transform:capitalize;padding:16px 15px;font-family:'Roboto',sans-serif;display: block !important;}
.mainmenu .active a,.mainmenu .active a:focus,.mainmenu .active a:hover,.mainmenu li a:hover,.mainmenu li a:focus ,.navbar-default .navbar-nav>.show>a, .navbar-default .navbar-nav>.show>a:focus, .navbar-default .navbar-nav>.show>a:hover{color: #000; background: #fff; outline: 0;}


/*==========Sub Menu=v==========*/
.mainmenu .collapse ul > li:hover > a{ background: #fff; color: #ccc; border-radius: 30px; } /* 1 li hover bg */
.mainmenu .collapse ul ul > li:hover > a, .navbar-default .navbar-nav .show .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .show .dropdown-menu > li > a:hover{background: #fff; border-radius: 30px;} /* 2 hover li */
.mainmenu .collapse ul ul ul > li:hover > a{ background: #fff; color: #ccc; border-radius: 30px; }  /* 3 li hover bg */

/*Box BG */
.mainmenu .collapse ul ul, .mainmenu .collapse ul ul.dropdown-menu{background:#fff; border:1px #ddd solid; border-radius: 20px; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);}  /* 2 box ul */
.mainmenu .collapse ul ul ul, .mainmenu .collapse ul ul ul.dropdown-menu{background:#fff; border:1px #ddd solid; border-radius: 20px; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);}  /* 3 box ul */
.mainmenu .collapse ul ul ul ul, .mainmenu .collapse ul ul ul ul.dropdown-menu{background:#fff; border:1px #ddd solid; border-radius: 20px; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);}  /* 4 box ul */

/******************************Drop-down menu work on hover**********************************/
.mainmenu{background: none;border: 0 solid;margin: 0;padding: 0;min-height:20px;width: 100%;}
@media only screen and (min-width: 767px) {
.mainmenu .collapse ul li:hover> ul{display:block}
.mainmenu .collapse ul ul{position:absolute;top:100%;left:0;min-width:250px;display:none}
/*******/
.mainmenu .collapse ul ul li{position:relative}
.mainmenu .collapse ul ul li:hover> ul{display:block}
.mainmenu .collapse ul ul ul{position:absolute;top:0;left:100%;min-width:250px;display:none}
/*******/
.mainmenu .collapse ul ul ul li{position:relative}
.mainmenu .collapse ul ul ul li:hover ul{display:block}
.mainmenu .collapse ul ul ul ul{position:absolute;top:0;left:-100%;min-width:250px;display:none;z-index:1}

}
@media only screen and (max-width: 767px) {
.navbar-nav .show .dropdown-menu .dropdown-menu > li > a{padding:16px 15px 16px 35px}
.navbar-nav .show .dropdown-menu .dropdown-menu .dropdown-menu > li > a{padding:16px 15px 16px 45px}
}
</style>


Js : 
<script type="text/javascript">
(function($){
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
  }
  var $subMenu = $(this).next(".dropdown-menu");
  $subMenu.toggleClass('show');

  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
  });

  return false;
});
})(jQuery)
</script>

HTML : 
<nav class="navbar navbar-light navbar-expand-lg mainmenu">
<a class="navbar-brand" href="{{ url('/') }}">
<img src="{{ asset('public/front/images/logo.png') }} " alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">

                       
                            <li class="active">
<a  href="{{ url('/') }}">Home</a>
</li>
<li>
<a   href="{{ route('plan.membership') }}">Membership</a>
</li>
<li>
<a   href="{{ route('cmspage','privacy-policy') }}">Privacy Policy</a>
</li>
<li>
<a   href="{{ route('cmspage','area-of-services') }}">Area of services</a>
</li>
                       
<!-- Multi menu code  start -->
                        <li class="dropdown">
                            <a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown2</a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="dropdown">
                                    <a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown3</a>
                                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                    </ul>
                                </li>
                                </ul>
                            </li>
                            </ul>
                        </li>
<!-- Multi menu code  start -->

                       
                    </ul>
<ul class="navbar-nav ml-auto mt-10">

            @if (Route::has('login'))
               
                    @auth
                      <li class="nav-item">
                        <a class="nav-link login-button" href="{{ route('dashboard') }}">Dashboard</a>
                      </li>
                      <li class="nav-item">
                        <a  title="Logout" class="nav-link logout-button" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-formicon').submit();">
                                       
                                        Logout
                                    </a>
                                    <form id="logout-formicon" action="{{ route('logout') }}" method="POST" style="display: none;">
                                        @csrf
                                    </form>
                      </li>
                    @else
                    <li class="nav-item">
      <a class="nav-link login-button" href="{{ route('login') }}">Login</a>
      </li>

                        @if (Route::has('register'))
                           
                            <li class="nav-item">
                <a class="nav-link add-button" href="{{ route('register') }}"> Register</a>
              </li>
                        @endif

                       
                    @endauth
               
            @endif
            <!-- <li class="nav-item">
          <a class="nav-link add-button" href="#"><i class="fa fa-plus-circle"></i> Add Listing</a>
          </li> -->



</ul>
</div>
</nav>

facebook chat php code

Facebook chat php code


https://codecanyon.net/item/facebook-style-php-ajax-chat-zechat/16491266

New Line add in whatsapp web share link

How do I add a line break in my SMS message?

To add a new line in the message body of outgoing SMS messages, there are a few options below if sending via the API.

\n Character

• If you're using a JSON request body, you can use "\n" e.g. "body" : "Here is my first line\nhere is my second line",
• If that doesn't work, try "\r\n" e.g. "body" : "Here is my first line\r\nhere is my second line",

<br> HTML Tag

Use "<br>" in the message body e.g. "Here is my first line<br>here is my second line"

%0a New Line Character

Encode a new line as %0a. For example, you could send a message like the following:
"Body=Here+is+my+first+line%0aHere+is+my+second+line"

Line Break Character

Use a new line in your body string e.g.
"Body=Here+is+my+first+line

Here+is+my+second+line"

Calling vibrate effect css

Demo2 :  https://bootsnipp.com/snippets/Vg6bN

<style type="text/css">

body {
  background: #71AFFF;
  padding: 100px;
}
.call-animation {
    background: #fff;
    width: 135px;
    height: 135px;
    position: relative;
    margin: 0 auto;
    border-radius: 100%;
    border: solid 5px #fff;
    animation: play 2s ease infinite;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

}
 img {
        width: 135px;
        height: 135px;
        border-radius: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
    }
@keyframes play {

    0% {
        transform: scale(1);
    }
    15% {
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.4);
    }
    25% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4), 0 0 0 20px rgba(255, 255, 255, 0.2);
    }
    25% {
        box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.4), 0 0 0 30px rgba(255, 255, 255, 0.2);
    }

}

</style>



<div class="call-animation">
<img class="img-circle" src="https://placeimg.com/400/400/people" alt="" width="135"/>
</div>

Date & Time different different format

Table for Date Formats

<?php
date_default_timezone_set("Asia/Calcutta");   //India time (GMT+5:30)
echo date('d-m-Y H:i:s');
?>

<?php
echo "Current Date : ".date("d/m/y")."<br />"; 
echo "Current Time : ".date("H:i:sa")."<br />";
echo "Current Day : ".date("l")."<br />";
echo "Current Month : ".date("M")."<br />";  
?>

Output :

Current Date : 19/02/17
Current Time : 15:54:08pm
Current Day : Sunday
Current Month : Feb

Format	Description	Example
a	'am' या 'pm' lowercase	am
A	'AM' या 'PM' uppercase	AM
d	शुरुआत में 0 के साथ 2 digits के month का day 01 से 31 तक	15
D	3 letters week का day	Mon
F	month का full name	March
g	शुरुआत से 0 के बिना hour के लिए 12hour का format 1 से 12 तक	5
G	शुरुआत से 0 के बिना hour के लिए 24hour का format 0 से 23 तक	3
h	शुरुआत से 0 के साथ 12hour के format में hour 01 से 12 तक	05
H	शुरुआत से 0 के साथ 24hour के format में hour 00 से 24 तक	00
i	शुरुआत से 0 के साथ minutes 00 से 59 तक	58
I	अगर Daylight Savings Time है तो 1 नहीं तो 0	1
j	शुरुआत से 0 के बिना month का day 1 से 31 तक	27
l	Week का day full name	Friday
L	Leap year है तो 1 नहीं तो 0	0
m	शुरुआत से 0 के साथ year का month 01 से 12 तक	02
M	3 letters year का month	Jun
n	शुरुआत से 0 के बिना year का month 1 से 12 तक	10
r	RFC 822 formatted date	Sun, 19 Feb 2017 19:07:40 +0100
s	seconds 00 से 59 तक	58
t	check month के days 28 से 31 तक	31
U	timestamp	1487527863
y	2 digits year	17
Y	4 digits year	2017
z	year का day 0 से 365 तक	106
Z	timezone offset seconds में	3600

url routing in codeigniter

Url Routing in Codeigniter : 


$title = "Here's a string!";
$url_title = url_title($title);


$route['default_controller'] = 'web';

$route['logout']='web/logout';

$route['videos'] = 'web/videos';

$route['videos'] = 'web/videos';

$route['news'] = 'Web/newsAll/';

$route['news-list/(:num)'] = 'Web/news/9'; // news List 

$route['news/(:any)/(:num)'] = 'web/newsDetail/$1/$2';  // new detail 

$route['(:any)/(:num)'] = 'web/page/$1/$2';  //page

time function after 5 second open div

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <script>
      $(document).ready(function () {
          // Hide the div
          $("#myModal").hide();
          // Show the div after 5s
          $("#myModal").delay(5000).fadeIn(100); 
      });   
  </script>

<div id="myModal">  test div </div>

image resize function in php

Photo Resize in one line :

<img src="<?php echo MEDIA_URL.'resizer.php?file=news/'.$result->path; ?>&width=20&height=20&action=resize&quality=100"   class="img-responsive" alt="">

Codeigniter : 
<meta property="og:image" itemprop="image" content="<?php echo base_url('upload/resizer.php?file=news/'); ?><?php echo $result->path; ?>&width=200&height=200&action=resize&quality=100">


Note : ye file media folder me set kar de is name se : resizer.php


<?php
if(isset($_GET['file']) && !empty($_GET['file']))
{
/**
 * Image processing class
 *
 * @package framework.components
 * @since 1.0.0
 */
class pjImage
{
/**
 * RGB color
 *
 * @var array
 * @access private
 *///242, 217, 230
private $color = array(242, 242, 242);
/**
 * Font path
 *
 * @var string
 * @access private
 */
private $font;
/**
 * Font size
 *
 * @var int
 * @access private
 */
private $fontSize;
/**
 * Image resource identifier
 *
 * @var resource
 * @access private
 */
private $image;
/**
 * One of the IMAGETYPE_* constants indicating the type of the image.
 *
 * @var int
 * @access private
 */
private $imageType;
/**
 * Image width
 *
 * @var int
 * @access private
 */
private $width;
/**
 * Image height
 *
 * @var int
 * @access private
 */
private $height;


private $file;
/**
 * Constructor - automatically called when you create a new instance of a class with new
 *
 * @access public
 * @return self
 */
public function __construct()
{
if (!extension_loaded('gd') || !function_exists('gd_info'))
{
$this->error = "GD extension is not loaded";
$this->errorCode = 200;
}
}
/**
 * Get color
 *
 * @access public
 * @return array
 */
public function getColor()
{
return $this->color;
}
/**
 * Get font
 *
 * @access public
 * @return string
 */
public function getFont()
{
return $this->font;
}
/**
 * Get font size
 *
 * @access public
 * @return number
 */
public function getFontSize()
{
return $this->fontSize;
}
/**
 * Get image height
 *
 * @access public
 * @return int|false Return the height of the image or FALSE on errors.
 */
public function getHeight()
{
return imagesy($this->getImage());
}
/**
 * Get image resource
 *
 * @access public
 * @return resource
 */
public function getImage()
{
return $this->image;
}
/**
 * Get the size of an image
 *
 * @access public
 * @return Returns an array with 7 elements.
 */
public function getImageSize()
    {
    return getimagesize($this->file['tmp_name']);
    }
/**
 * Get the type of image resource
 *
 * @access public
 * @return number
 */
    public function getImageType()
    {
    return $this->imageType;
    }
/**
 * Get image width
 *
 * @access public
 * @return int|false Return the width of the image or FALSE on errors.
 */
public function getWidth()
{
return imagesx($this->getImage());
}
/**
 * Check if system memory is enough for image processing
 *
 * @access public
 * @return array
 */
public function isConvertPossible()
{
$status = true;
if (function_exists('memory_get_usage') && ini_get('memory_limit'))
{
$info = $this->getImageSize();
$MB = 1024 * 1024;
$K64 = 64 * 1024;
$tweak_factor = 1.6;
$channels = isset($info['channels']) ? $info['channels'] : 3;
$memory_needed = round(($info[0] * $info[1] * $info['bits'] * $channels / 8 + $K64) * $tweak_factor);
$memory_needed = memory_get_usage() + $memory_needed;
$memory_limit = ini_get('memory_limit');
if ($memory_limit != '')
{
$memory_limit = substr($memory_limit, 0, -1) * $MB;
}
if ($memory_needed > $memory_limit)
{
$status = false;
}
}
return compact('status', 'memory_needed', 'memory_limit');
}
/**
 * Load locale image file for later processing
 *
 * @param string $path The path to image
 * @access public
 * @return self
 */
public function loadImage($path=NULL)
{
if (!is_null($path))
{
$this->file = array(
'tmp_name' => $path,
'name' => basename($path)
);
}
$info = $this->getImageSize();

$this->width = $info[0];
$this->height = $info[1];
$this->setImageType($info[2]);
$file = $path;

switch ($this->imageType)
{
case IMAGETYPE_JPEG:
$this->setImage(@imagecreatefromjpeg($file));
break;
case IMAGETYPE_GIF:
$this->setImage(@imagecreatefromgif($file));
break;
case IMAGETYPE_PNG:
$this->setImage(@imagecreatefrompng($file));
break;
}
return $this;
}

/**
 * Write text to the image
 *
 * @param string $text The text string in UTF-8 encoding.
 * @param string $position Accept: 'tl', 'tr', 'tc', 'bl', 'br', 'bc', 'cl', 'cr', 'cc'. <b>t</b> stands for Top, <b>b</b> stands for Bottom, <b>l</b> stands for Left, <b>r</b> stands for Right, <b>c</b> stands for Center.
 * @access public
 * @return self
 */
public function setWatermark($text, $position)
{
$rgb = $this->getColor();

$color = imagecolorallocate($this->getImage(), $rgb[0], $rgb[1], $rgb[2]);

$tb = imagettfbbox($this->getFontSize(), 0, $this->getFont(), $text);

switch ($position)
{
case 'tl':
$x = $tb[0];
$y = $this->getFontSize();
break;
case 'tr':
$x = floor($this->getWidth() - $tb[2]);
$y = $this->getFontSize();
break;
case 'tc':
$x = ceil(($this->getWidth() - $tb[2]) / 2);
$y = $this->getFontSize();
break;
case 'bl':
$x = $tb[0];
$y = floor($this->getHeight() - $this->getFontSize());
break;
case 'br':
$x = floor($this->getWidth() - $tb[2]);
$y = floor($this->getHeight() - $this->getFontSize());
break;
case 'bc':
$x = ceil(($this->getWidth() - $tb[2]) / 2);
$y = floor($this->getHeight() - $this->getFontSize());
break;
case 'cl':
$x = $tb[0];
$y = ceil($this->getHeight() / 2);
break;
case 'cr':
$x = floor($this->getWidth() - $tb[2]);
$y = ceil($this->getHeight() / 2);
break;
case 'cc':
default:
$x = ceil(($this->getWidth() - $tb[2]) / 2);
$y = ceil($this->getHeight() / 2);
break;
}

imagettftext($this->getImage(), $this->getFontSize(), 0, $x, $y, $color, $this->getFont(), $text);
return $this;
}
/**
 * Set font path
 *
 * @param string $path The path to font file
 * @access public
 * @return self
 */
public function setFont($path)
{
$this->font = $path;
return $this;
}
/**
 * Set font size
 *
 * @param int $size
 * @access public
 * @return self
 */
public function setFontSize($size)
{
$this->fontSize = $size;
return $this;
}
/**
 * Set RGB color
 *
 * @param array $color Expect numeric array, eg. array(255, 255, 255)
 * @access public
 * @return self
 */
public function setColor($color)
{
if (is_array($color) && count($color) === 3)
{
$this->color = $color;
}
return $this;
}
/**
 * Set image resource
 *
 * @param resource $resource
 * @access public
 * @return self
 */
public function setImage($resource)
{
if (is_resource($resource))
{
$this->image = $resource;
}
return $this;
}
/**
 * Set the type of image resource
 *
 * @param int $value
 * @return self
 */
public function setImageType($value)
{
if (is_int($value))
{
$this->imageType = $value;
}
return $this;
}
/**
 * Outputs image without saving
 *
 * @param string $image_type
 * @param number $compression
 */
public function output($compression=100)
{
switch ($this->imageType)
{
case IMAGETYPE_JPEG:
header("Content-Type: image/jpeg");
imageinterlace($this->getImage(), true);
imagejpeg($this->getImage(), NULL, $compression);
imagedestroy($this->getImage());
break;
case IMAGETYPE_GIF:
header("Content-Type: image/gif");
imagegif($this->getImage());
imagedestroy($this->getImage());
break;
case IMAGETYPE_PNG:
header("Content-Type: image/png");
imagepng($this->getImage());
imagedestroy($this->getImage());
break;
}

exit;
}
/**
* Image resize to fixed size
*
* @param int $width
* @param int $height
* @access public
* @return self
*/
public function resize($width, $height)
{
$new_image = imagecreatetruecolor($width, $height);
switch ($this->imageType)
{
case IMAGETYPE_PNG:
imagealphablending($new_image, false);
imagesavealpha($new_image, true);
$transparent = imagecolorallocatealpha($new_image, 255, 255, 255, 127);
imagefilledrectangle($new_image, 0, 0, $width, $height, $transparent);
break;
case IMAGETYPE_JPEG:
case IMAGETYPE_GIF:
$transparent_index = imagecolortransparent($this->getImage());
if ($transparent_index >= 0)
{
$transparent_color = imagecolorsforindex($this->getImage(), $transparent_index);
$transparent_index = imagecolorallocate($new_image, $transparent_color['red'], $transparent_color['green'], $transparent_color['blue']);
imagefill($new_image, 0, 0, $transparent_index);
imagecolortransparent($new_image, $transparent_index);
}
break;
}
imagecopyresampled($new_image, $this->getImage(), 0, 0, 0, 0, $width, $height, $this->width, $this->height);
$this->width = $width;
$this->height = $height;
$this->setImage($new_image);

return $this;
}

public function crop($src_x, $src_y, $dst_w, $dst_h, $src_w, $src_h, $dst_x = 0, $dst_y = 0)
{
$new_image = imagecreatetruecolor($dst_w, $dst_h);

switch ($this->imageType)
{
case IMAGETYPE_PNG:
imagealphablending($new_image, false);
imagesavealpha($new_image, true);
$transparent = imagecolorallocatealpha($new_image, 255, 255, 255, 127);
imagefilledrectangle($new_image, 0, 0, $dst_w, $dst_h, $transparent);
break;
case IMAGETYPE_JPEG:
case IMAGETYPE_GIF:
$transparent_index = imagecolortransparent($this->getImage());
if ($transparent_index >= 0)
{
$transparent_color = imagecolorsforindex($this->getImage(), $transparent_index);
$transparent_index = imagecolorallocate($new_image, $transparent_color['red'], $transparent_color['green'], $transparent_color['blue']);
imagefill($new_image, 0, 0, $transparent_index);
imagecolortransparent($new_image, $transparent_index);
}
break;
}

imagecopyresampled($new_image, $this->getImage(), $dst_x, $dst_y, $src_x, $src_y, $dst_w, $dst_h, $src_w, $src_h);

$this->width = $dst_w;
$this->height = $dst_h;
$this->setImage($new_image);
return $this;
}
}

$image_path = $_GET['file'];

if(file_exists($image_path))
{
$Image = new pjImage();

$size = @getimagesize($image_path);
$src_width = $size[0];
$src_height = $size[1];

if(isset($_GET['action']) && $_GET['action'] == 'resize')
{
if(isset($_GET['width']) && (int) $_GET['width'] > 0 && isset($_GET['height']) && (int) $_GET['height'] > 0)
{
$Image->loadImage($image_path);
$resp = $Image->isConvertPossible();
if ($resp['status'] === true)
{
$Image->resize($_GET['width'], $_GET['height']);
}
}
}else if(isset($_GET['action']) && $_GET['action'] == 'crop'){

if(isset($_GET['width']) && (int) $_GET['width'] > 0 & (int) $_GET['width'] < $src_width && isset($_GET['height']) && (int) $_GET['height'] > 0 && (int) $_GET['height'] < $src_height)
{
if(isset($_GET['crop_pos']) && !empty($_GET['crop_pos']))
{
$crop_position = $_GET['crop_pos'];
$x = 0;
$y = 0;
$w = (int) $_GET['width'];
$h  = (int) $_GET['height'];
switch ($crop_position) {
case 'center':
$x = round($src_width / 2) - round((int) $_GET['width'] / 2);
$y = round($src_height / 2) - round((int) $_GET['height'] / 2);
;
break;

case 'top':
$x = round($src_width / 2) - round((int) $_GET['width'] / 2);
;
break;
case 'bottom':
$x = round($src_width / 2) - round((int) $_GET['width'] / 2);
$y = $src_height - (int) $_GET['height'];
;
break;
case 'left':
$y = round($src_height / 2) - round((int) $_GET['height'] / 2);
;
break;
case 'right':
$x = $src_width - (int) $_GET['width'];
$y = round($src_height / 2) - round((int) $_GET['height'] / 2);
;
break;
}
$Image->loadImage($image_path);
$Image->crop($x, $y, $w, $h, $w, $h);
}
}
}
if(isset($_GET['watermark']) && !empty($_GET['watermark']))
{
$watermarkPosition = isset($_GET['watermark_pos']) ? $_GET['watermark_pos'] : 'cc';

if(isset($_GET['color']))
{
$color_arr = explode(",", $_GET['color']);
$valid_color = true;
if(count($color_arr) == 3)
{
if((int)$color_arr[0] < 0 || (int)$color_arr[0] > 255 || (int)$color_arr[1] < 0 || (int)$color_arr[1] > 255 || (int)$color_arr[2] < 0 || (int)$color_arr[2] > 255)
{
$valid_color = false;
}
}else{
$valid_color = false;
}
if($valid_color == true)
{
$Image->setColor($color_arr);
}
}

$Image->setFontSize(20)->setFont('fonts/arialbd.ttf');
$Image->setWatermark($_GET['watermark'], $watermarkPosition);
}
$quality = 100;
if(isset($_GET['quality']) && (int) $_GET['quality'] > 0 && (int) $_GET['quality'] <= 100)
{
$quality = $_GET['quality'];
}

$Image->output($quality);
}
}
?>

random step data in codeigniter

Random step data in codeigniter

View : 

<?php 
if($c%10==0){
if(!empty($AdsRandomStep)){ 
$total_array = count($AdsRandomStep);
$random_keys=rand(0,$total_array-1); 
echo '<div class="col-sm-12"><img src="'.base_url('upload/advertisement/').$AdsRandomStep[$random_keys]->path.'" class="adsStep" width="100%" /></div>';


 }} $c++; } } ?>

Sesssion Message display in codeigniter

<div class="clearfix"></div>

<?php echo ($this->session->flashdata('msg')?$this->session->flashdata('msg'):'')?>


Alert Message HTML  :  https://getbootstrap.com/docs/4.0/components/alerts/

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert—check it out!
</div>

Form tag in codeigniter

<?php echo form_open('administration/Home/addSettingCode',array("id"=>"myform","class"=>"form-horizontal form-label-left","enctype"=>"multipart/form-data"));?>
 <input type="hidden" name="id" value="<?php echo (isset($settingData->id) && $settingData->id!=''?$settingData->id:'')?>">
 <input type="hidden" name="old_path" value="<?php echo (isset($settingData->logo) && $settingData->logo!=''?$settingData->logo:'')?>">



<div class="col-md-12">
                                                <div class="position-relative form-group">
                                                  <label for="examplePassword" class=""><span class="text-danger">*</span> About Us </label>
 <script src="//cdn.ckeditor.com/4.4.7/full/ckeditor.js"></script>
                                                                  <textarea rows="5" name="s8" id="s8" class="form-control" placeholder="Enter About Us" required><?php echo (isset($settingData->s8) && $settingData->s8!=''?$settingData->s8:'')?></textarea>
                                             <script>
                                                CKEDITOR.replace('s8', {
                                                  // Define the toolbar groups as it is a more accessible solution.
                                                  toolbarGroups: [{
                                                      "name": "basicstyles",
                                                      "groups": ["basicstyles"]
                                                    },
                                                    {
                                                      "name": "links",
                                                      "groups": ["links"]
                                                    },
                                                    {
                                                      "name": "paragraph",
                                                      "groups": ["list", "blocks"]
                                                    },
                                                    {
                                                      "name": "styles",
                                                      "groups": ["styles"]
                                                    }
                                                 
                                                  ],
                                                  // Remove the redundant buttons from toolbar groups defined above.
                                                  removeButtons: 'Underline,Strike,Subscript,Superscript,Anchor,Styles,Specialchar'
                                                });
                                              </script>

                                                </div>
                                            </div>



  <?php echo form_close();?>