Saturday, 28 May 2016

bootstrap dropdown menu on hover example :: Hemant Vishwakarma

HTML

<div class="container">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Store</a>
</div>

<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Men <span class="caret"></span></a>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Men Collection</li>
<div id="menCollection" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
<h4><small>Summer dress floral prints</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div>
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a>
<h4><small>Gold sandals with shiny touch</small></h4>
<button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div>
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a>
<h4><small>Denin jacket stamped</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div>
</div>

<a class="left carousel-control" href="#menCollection" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#menCollection" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<li class="divider"></li>
<li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Features</li>
<li><a href="#">Auto Carousel</a></li>
<li><a href="#">Carousel Control</a></li>
<li><a href="#">Left & Right Navigation</a></li>
<li><a href="#">Four Columns Grid</a></li>
<li class="divider"></li>
<li class="dropdown-header">Fonts</li>
<li><a href="#">Glyphicon</a></li>
<li><a href="#">Google Fonts</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Plus</li>
<li><a href="#">Navbar Inverse</a></li>
<li><a href="#">Pull Right Elements</a></li>
<li><a href="#">Coloured Headers</a></li>
<li><a href="#">Primary Buttons & Default</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Much more</li>
<li><a href="#">Easy to Customize</a></li>
<li><a href="#">Calls to action</a></li>
<li><a href="#">Custom Fonts</a></li>
<li><a href="#">Slide down on Hover</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Women <span class="caret"></span></a>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Features</li>
<li><a href="#">Auto Carousel</a></li>
<li><a href="#">Carousel Control</a></li>
<li><a href="#">Left & Right Navigation</a></li>
<li><a href="#">Four Columns Grid</a></li>
<li class="divider"></li>
<li class="dropdown-header">Fonts</li>
<li><a href="#">Glyphicon</a></li>
<li><a href="#">Google Fonts</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Plus</li>
<li><a href="#">Navbar Inverse</a></li>
<li><a href="#">Pull Right Elements</a></li>
<li><a href="#">Coloured Headers</a></li>
<li><a href="#">Primary Buttons & Default</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Much more</li>
<li><a href="#">Easy to Customize</a></li>
<li><a href="#">Calls to action</a></li>
<li><a href="#">Custom Fonts</a></li>
<li><a href="#">Slide down on Hover</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Women Collection</li>
<div id="womenCollection" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
<h4><small>Summer dress floral prints</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div>
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a>
<h4><small>Gold sandals with shiny touch</small></h4>
<button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div>
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a>
<h4><small>Denin jacket stamped</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div>
</div>

<a class="left carousel-control" href="#womenCollection" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#womenCollection" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<li class="divider"></li>
<li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Store locator</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">My account <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li><a href="#">My cart (0) items</a></li>
</ul>
</div>
</nav>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {

font-family: 'Open Sans', 'sans-serif';

}

.mega-dropdown {

position: static !important;

}

.mega-dropdown-menu {

padding: 20px 0px;

width: 100%;

box-shadow: none;

-webkit-box-shadow: none;

}

.mega-dropdown-menu > li > ul {

padding: 0;

margin: 0;

}

.mega-dropdown-menu > li > ul > li {

list-style: none;

}

.mega-dropdown-menu > li > ul > li > a {

display: block;

color: #222;

padding: 3px 5px;

}

.mega-dropdown-menu > li ul > li > a:hover,

.mega-dropdown-menu > li ul > li > a:focus {

text-decoration: none;

}

.mega-dropdown-menu .dropdown-header {

font-size: 18px;

color: #ff3546;

padding: 5px 60px 5px 5px;

line-height: 30px;

}

.carousel-control {

width: 30px;

height: 30px;

top: -35px;

}

.left.carousel-control {

right: 30px;

left: inherit;

}

.carousel-control .glyphicon-chevron-left,

.carousel-control .glyphicon-chevron-right {

font-size: 12px;

background-color: #fff;

line-height: 30px;

text-shadow: none;

color: #333;

border: 1px solid #ddd;

}

$(document).ready(function(){

$(".dropdown").hover(

function() {

$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400");

$(this).toggleClass('open');

function() {

$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400");

$(this).toggleClass('open');

}

);

});

Monday, 23 May 2016

how to delete a specific row in codeigniter :: Hemant Vishwakarma

You are using an $id variable in your model, but your are plucking it from nowhere. You need to pass the $id variable from your controller to your model.

Controller

Lets pass the $id to the model via a parameter of the row_delete() method.

function delete_row()
{
   $this->load->model('mod1');

   // Pass the $id to the row_delete() method
   $this->mod1->row_delete($id);


   redirect($_SERVER['HTTP_REFERER']);  
}

Model

Add the $id to the Model methods parameters.

function row_delete($id)
{
   $this->db->where('id', $id);
   $this->db->delete('testimonials'); 
}

The problem now is that your passing the $id variable from your controller, but it's not declared anywhere in your controller.

Ajax delete with PHP and MySql ::: HEMANT VISHWAKARMA

Ajax delete with confirm box, here we are going to see about how to delete the data without refreshing page and with confirmation box, and this is what most of them searching, so today going to show you that, how to make this alert style box delete with ajax and php, mysql.

As we discussed in more tutorials before to this, it is very simple by using AJAX, in a usual delete tha page getting refreshed, so for here are going to do that with out refreshing the page. so we have to make database for that. let see the details about that.

DATABASE DETAILS

database name --> 2my4edge

table name --> delete

column names --> id, content

FILES

db.php
delete.php
index.php

the above files and JQuery min file in important too.

DB.PHP

<?php
$conn = mysql_connect('localhost', 'root', '') or die(mysql_error());
mysql_select_db('2my4edge', $conn) or die(mysql_error());
?>

DELETE.PHP

<?php
include('db.php');
if($_POST['id'])
{
$id=mysql_real_escape_string($_POST['id']);
$delete = "DELETE FROM `delete` WHERE id='$id'";
mysql_query( $delete);
}
?>

INDEX.PHP

<div class="container">
<?php
include('db.php');
$result = mysql_query("SELECT * FROM `delete` ORDER BY id ASC");
while($row = mysql_fetch_array($result))
{
$id1=$row['id'];
$name=$row['content'];
?>
<div class="show">
<span class="name"><?php echo $name;  ?></span>
<span class="action"><a href="#" id="<?php echo $id1; ?>" class="delete" title="Delete">X</a></span>
</div>
<?php
}
?> 
</div>

the above coding are comes in index.php page and we have and ajax script in the same page or you can add it but here i put coding on the same page

AJAX SCRIPT

<script src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".delete").click(function(){
var element = $(this);
var del_id = element.attr("id");
var info = 'id=' + del_id;
if(confirm("Are you sure you want to delete this?"))
{
 $.ajax({
   type: "POST",
   url: "delete.php",
   data: info,
   success: function(){
 }
});
  $(this).parents(".show").animate({ backgroundColor: "#003" }, "slow")
  .animate({ opacity: "hide" }, "slow");
 }
return false;
});
});
</script>

Friday, 13 May 2016

Using cd Command in Windows Command Line, Can't Navigate to D:\ :::Hemant Vishwakarma

Going back to the days of DOS, there's a separate "current directory" for each drive. cd D:\foldername changes D:'s current directory to the foldername specified, but does not change the fact that you're still working on the C: drive.

What you want is simple:

D:

Here you can see how the "separate current directory for each drive" thing works:

C:\Users\coneslayer>e:

E:\>c:

C:\Users\coneslayer>cd e:\software

C:\Users\coneslayer>e:

e:\Software>

show/hide div on html form focus and blur ::: HEMANT VISHWAKARMA

JAVASCRIPT

<script>
$(function() {
$(".infobox-profile").hide();

$(".text").focusin(function() {
$(".infobox-profile").show(800);
}).focusout(function () {
// $(".infobox-profile").hide();
});
});
</script>

HTML

<form>
<input id="text"></input>
<div class="infobox-profile">hello</div>
</form>

Tuesday, 10 May 2016

auto hide alert messsage : : HEMANT VISHWAKARMA

HTML

<div class="alert alert-success" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Success!</strong> You have been signed in successfully!
</div>

CSS

@import "compass/css3";

body{
padding: 50px;
}

JS

window.setTimeout(function() {
$(".alert").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 4000);

Sunday, 8 May 2016

Bootstrap Data Tables with pagination :: HEMANT VISHWAKARMA

Javascript

$(document).ready(function() {

$('#example').DataTable();

} );

HTML

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>

css

bootstrap inline form example ::HEMANT VISHWAKARMA

<label class="sr-only" for="exampleInputEmail3">Email address</label>

</div>

<label class="sr-only" for="exampleInputPassword3">Password</label>

</div>

<label>

<input type="checkbox"> Remember me

</label>

</div>

</form>

bootstrap inline search box :: HEMANT VISHWAKARMA

HTML

<div class="container">
<div class="row">
<h2>Slider Search box</h2>
<div class="search">
<input type="text" class="form-control input-sm" maxlength="64" placeholder="Search" />
<button type="submit" class="btn btn-primary btn-sm">Search</button>
</div>
</div>
</div>

CSS