Technical Tutorials,Tips and tricks,Installations,Common Errors: 2015

Sunday, June 21, 2015

#deepstutorials:How do I get the value of a textbox using jQuery

The following code creates a form with a textbox

<html>

<body>
<form>
First name: <input type="text" name="FirstName" id="firstName"><br>
Last name: <input type="text" name="LastName" id="lastName"><br>
<input type="submit" value="Submit">
</form>
<body>
</html>

To access textbox using jquery ,following is the way

var firstName= $('#firstName').val();  //

$("#firstName").val("someValue")//Is used to set the value of textbox

Saturday, June 20, 2015

#deepstutorials: how to get the value of a textarea in jquery?

The following code creates a form with a textarea

<html>
<body>
<form action="demo_form.asp">
<textarea rows="4" cols="50" id= "comment" name="comment">
Enter text here...</textarea>
<input type="submit">
</form>
</body>
</html>

To access textarea using jquery ,following is the way

var message = $('comment').val();

Tuesday, May 12, 2015

#deepstutorials:Horizontal tab navigation in bootstrap

The following code creates a horizontal tab navigation using bootstrap as shown below

<html lang="en">
<head>
  <title>Bootstrap Example for horizontal tab navigation</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>horizontal Navigation Pills</h2>
<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Women</a></li>
    <li><a href="#">Men</a></li>
    <li><a href="#">kids</a></li>        
  </ul>
</div>
</body>
</html>

horizontal Navigation in bootstrap.Focus is on Home tab as we have set active to class attribute of "home" anchor

#deepstutorials:Bootstrap breadcrumb example

The following code shows example to use bootstrap "breadcrumbs" to create a wizard like workflow.

<html lang="en">
<head>
  <title>Bootstrap Example for breadcrumb</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <p>The .breadcrumb class indicates the current page's location within a navigational hierarchy:</p>                  
  <ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Clothing</a></li>
    <li><a href="#">Women</a></li>
    <li class="active">Hand bags</li>        
  </ol>
</body>
</html>

The .breadcrumb class indicates the current page's location within a navigational hierarchy.Curently,we are at "hand bags" page whose label is in "grey color".The .active class indicates that it is on the current page.

Saturday, May 9, 2015

#deepstutorials:Writing tooltips in bootstrap

The following code shows example to use bootstrap tooltip.

<html lang="en">
<head>
  <title>Bootstrap Example for tooltip</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <ul class="list-inline">
    <li><a href="#" data-toggle="tooltip" data-placement="top" title="tooltip on top!">Tooltip Top</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="tooltip on bottom!">Tooltip Bottom</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="left" title="tooltip on left!">Tooltip Left</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="right" title="tooltip on right!">Tooltip Right</a></li>
  </ul>
</body>
</html>

Bootstrap example for tooltip

Friday, April 24, 2015

deepstutorials:Creating basic menu drop down using bootstrap

The following code creates a basic drop down as shown below

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Menu
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
  </ul>
</div>
</div>
</body>
</html>

Basic Drop down in bootstrap

deepstutorials:glyphicon bootstrap usage example

The following code creates an example to illustrate glyphicons.More glyphicons can be found at glyphicon website

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Glyphicon Examples</h2>
  <p>Envelope icon: <span class="glyphicon glyphicon-heart"></span></p>    
  <p>Envelope icon as a link:
    <a href="#"><span class="glyphicon glyphicon-heart"></span></a>
  </p>
  </div>
</body>
</html>

Glyphicon Examples

Envelope icon:
Envelope icon as a link:

deepstutorials: Vertical Navigation in bootstrap

The following code creates a vertical navigation using bootstrap as shown below

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Vertical Navigation Pills</h2>
   <ul class="nav nav-pills nav-stacked" role="tablist">
    <li class="active"><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">Jquery</a></li>
    <li><a href="#">Bootstrap</a></li>        
  </ul>
</div>
</body>
</html>

Vertical Navigation in bootstrap

deepstutorials:Vertical button group bootstrap

The following code creates a button group as shown below

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Vertical Button Group</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">ButtonGroup1</button>
    <button type="button" class="btn btn-primary">ButtonGroup2</button>
    <button type="button" class="btn btn-primary">ButtonGroup3</button>
    <button type="button" class="btn btn-primary">ButtonGroup4</button>
  </div>
</div>
</body>
</html>

Vertical Button Group

Thursday, March 12, 2015

deepstutorials: Bootstrap expand/Collapse Plugin

Bootstrap plugin is used to create expandable/collapsible Panels.Below is the code

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapse1">
         Section 1 Content.Click me to expand.Click again to collapse
        </a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">
      Section 1 Content.Click me to expand.Click again to collapse.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapse2">
      Section 2 Content.Click me to expand.Click again to collapse.
      
        </a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">
       Section 2 Content.Click me to expand.Click again to collapse.
      
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapse3">
               Section 3 Content.Click me to expand.Click again to collapse.
         </a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">
        Section 3 Content.Click me to expand.Click again to collapse.
       </div>
    </div>
  </div>
</div>

 Section 1 Content.Click me to expand.Click again to collapse

Section 1 Content .Click me to expand.Click again to collapse.

Section 2 Content.Click me to expand.Click again to collapse.

Section 3 Content.Click me to expand.Click again to collapse.

Wednesday, February 18, 2015

deepstutorials:Bootstrap:Radio buttons on the same line

Inline Radio Buttons gives users ability to place all the radio buttons on the same line by using the .radio-inline class .

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Form control: inline radio</h2>
    <form role="form">
    <label class="radio-inline">
      <input type="radio" value="">Radio Button 1
    </label>
    <label class="radio-inline">
      <input type="radio" value="">Radio Button 2
    </label>
    <label class="radio-inline">
      <input type="radio" value="">Radio Button 3
    </label>
    <label class="radio-inline">
      <input type="radio" value="">Radio Button 4
    </label>
  </form>
</div>
</body>
</html>

Form control: inline radio

deepstutorials:Boostrap:Radio buttons/Disabled Radio buttons

Radio Buttons are used to limit users to select single option.By using disabled class , we can change the state of radio to disabled.

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>ac
</head>
<body>
<div class="container">
 <div class="radio">
  <label><input type="radio" value="">Radio Button 1</label>
</div>
<div class="radio disabled">
  <label><input  type="radio" value="" disabled>Radio Button 2</label>
</div>
  </div>
</div>
</body>
</html>

Radio Button 1

Radio Button 2

deepstutorials:Bootstrap:Create checkboxes on the same line using bootstrap

Inline Checkboxes gives users ability to place all the checkoxes in the same line by using the .checkbox-inline class .

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Form control: inline checkbox</h2>
    <form role="form">
    <label class="checkbox-inline">
      <input type="checkbox" value="">checkbox 1
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">checkbox 2
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">checkbox 3
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">checkbox 4
    </label>
  </form>
</div>
</body>
</html>

deepstutorials:Bootstrap Checkboxes/Disabled checkboxes

Checkboxes gives users ability to select multiple options.By using disabled class , we can change the state of checkbox to disabled.

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <div class="checkbox">
  <label><input type="checkbox" value="">CheckBox 1</label>
</div>
<div class="checkbox disabled">
  <label><input  type="checkbox" value="" disabled>CheckBox 2</label>
</div>
  </div>
</div>
</body>
</html>

CheckBox 1

CheckBox 2

Sunday, February 15, 2015

deepstutorials:Bootstrap:Different button sizes

Buttons in bootstrap have different sizes.They are

.btn-xs
.btn-sm
.btn-md
.btn-lg

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Button Group</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary  btn-lg">Large button</button>
    <button type="button" class="btn btn-primary  btn-md">Medium button</button>
    <button type="button" class="btn btn-primary  btn-sm">Small button</button>
    <button type="button" class="btn btn-primary  btn-xs">Xsmall button</button>
  </div>
</div>
</body>
</html>

Button Group

Saturday, February 14, 2015

deepstutorials:Bootstrap:Active/Disabled Buttons

Button in bootstrap can have two states
1)Active
2)Disabled/Inactive state

Active is made using .active class and .disabled makes it inactive/unclickable.

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Button Group</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Button1</button>
    <button type="button" class="btn btn-primary active ">Active button</button>
    <button type="button" class="btn btn-primary disabled">Disabled button</button>
  </div>
</div>
</body>
</html>

Button Group

Saturday, February 7, 2015

deepstutorials:Print contents of modal window only using bootstrap

Got a requirement in mvc which has a modal window .And i had to print the content of modal window only.After a lot of research i came up with the following solution.Hopefully,this code might help someone out there :).You can find the solution at my jsfiddle link.

Resharper keyboard shortcuts

Resharper shortcuts cheat-sheet available in their website . Follow the link below

Resharper keyboard shorcuts list

deepstutorials:bootstrap button groups example

The following code creates a button group as shown below

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Button Group</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">ButtonGroup1</button>
    <button type="button" class="btn btn-primary">ButtonGroup2</button>
    <button type="button" class="btn btn-primary">ButtonGroup3</button>
  </div>
</div>
</body>
</html>

Button Group

deepstutorials: Bootstrap modal popup not showing up

I tried to create a bootstrap modal wrote the following code but when i ran it on my browser and clicked the button, the popup shows only in milliseconds and then it closes again.Following is the solution.

Try this

<script src="js/bootstrap.js"></script> // This JS have all necessary files

Remove below JS from your file

<script src="js/bootstrap-modal.js"></script>

Pages

Sunday, June 21, 2015

Saturday, June 20, 2015

Tuesday, May 12, 2015

horizontal Navigation in bootstrap.Focus is on Home tab as we have set active to class attribute of "home" anchor

Saturday, May 9, 2015

Bootstrap example for tooltip

Friday, April 24, 2015

Basic Drop down in bootstrap

Glyphicon Examples

Vertical Navigation in bootstrap

Vertical Button Group

Thursday, March 12, 2015

Wednesday, February 18, 2015

Sunday, February 15, 2015

Button Group

Saturday, February 14, 2015

Button Group

Saturday, February 7, 2015

Button Group

VisitorCount