geeksprogrammings

Be The Geek

How To Create Printable Bootstrap Page



Every Day Is a New Learning Day . Today, I learnt a new thing with bootstrap When We use the page becomes responsive it will adapt its width and height and change it accordingly to the screen on which we are viewing that webpage that's the magic of Bootstrap .

 BUT there is one thing need to be noticed that is When we print that page . Like i needed to give one functionality in my web application to the client . Client wants a button when client click on that button a print preview of current page is given to client and page will be downloaded as .PDF file 
But Now you may face some problem as below :-

Bootstrap - Print layout and breaks after each grid column

Grid stacks when printing Bootstrap page

you may search How to Create Printable bootstrap page So solution is below


when you see in your print preview or .PDF file you can see bootstrap  layout will be not there . This is because bootstrap make the columns and rows by using some inbuilt classes these classes are by default included in bootstrap.min.css file but you have to set them to be allowed in all media As bydefault it is set to screen only


When you try code below in your html page you can see it is not printing your page with bootstrap enabled 

<!DOCTYPE html>
<html lang="en">
  <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>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <div class="container">
  <div class="row">
  <div class="col-md-6">Column1</div>
    <div class="col-md-6">Column2</div>
  </div>
</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Steps To Create your Bootstrap Webpage Printable


1. Replace every col-md- with col-xs-
 e.g. :- replace every col-md-6 to col-xs-6 This is the thing that worked for me to get me rid of this problem you can see what you have to replace

Replace following code

   <div class="container">
  <div class="row">
    <div class="col-md-6">Column1</div>
    <div class="col-md-6">Column2</div>
  </div>
</div>

With this code in our given example

<div class="container"> <div class="row"> <div class="col-xs-6">Column1</div> <div class="col-xs-6">Column2</div> </div> </div>

\adt-bundle-windows-x86_64-20130219\sdk\platform-tools\aapt.exe" is invalid

When your are using Android with Csharp or when you are using Monoandroid you will be facing some some error related to aapt.exe missing or aapt.exe invalid . These are common error to Monoandroid developer that almost every one that uses Monoandroid will face .

So Today I decided to get the actual reason of this problem and I sit on my chair to find out the reason and possible solution to this error that may work for everyone . I suffered from this error number of times before but i tried the ways to get rid of it But not today this is the day to get solution of this error .

What are Possible Errors :



  • Error MSB6004: The specified task executable location "C:\Program


  • Files\adt-bundle-windows-x86_64-20130219\sdk\platform-tools\aapt.exe" is 


invalid. (MSB6004) (TaskyAndroid)

The specified task executable location "D:\android-sdk\platform-tools

\aapt.exe" is invalid.


Reason of Above Errors 




This issue is caused by Google changing around the directory structure of the Android SDK with their latest updates and due to these updates old directory structures are creating problem Most probably these error comes after you update your android So when you update your android-sdk then it update the directory structure of android-sdk to new structure of google that allows
aapt.exe to be must present in android-sdk/platform-tools/ but that will be not there because in old directory structure that monoandroid is using aapt.exe is in android-sdk/build-tools/ that's why this error is coming and MonoAndroid Team is applying these changes so  before that we need to figure out this issue to continue our development

Error Solution aapt.exe Invalid


Steps :-

1.  Copy the aapt.exe file from folder \android-sdk\build-tools\17.0.0 to \android-sdk\platform-tools . Here 17.0.0 is your android api you have installed in your sdk it will be what version you installed like :- 8.0.0, 18.0.0

2. Now Also Copy \android-sdk\build-tools\17.0.0\lib folder to \android-sdk\platform-tools\ As there is a file in that directory dx.jar which is also Needed by xamarin

3. Now Everything will be fine ........Cheers!


There is one more error which can let you suffer it is :-

java exited with code 1


Reason of Error java exited with code 1

The reason of this error is in our previous error solution When you copy the aapt.exe file from  \android-sdk\build-tools\17.0.0 to \android-sdk\platform-tools .  and forger to copy or don't copy folder  \android-sdk\build-tools\17.0.0\lib folder to \android-sdk\platform-tools\ then this error comes this is main reason of this error

Error Solution java exited with code 1



 Also Copy \android-sdk\build-tools\17.0.0\lib folder to \android-sdk\platform-tools\ As there is a file in that directory dx.jar which is also Needed by xamarin after copying aapt.exe file

Error : Failed To Update Android SDK

Every Android update contains some tools and advance features . Today I need To update my Andorid SDK to include Google Glass Services in it and enable it to use Google Maps in Andorid Application . In android to use google maps you must have google glass services in your android sdk

Some times it may be possible you sdk not having google glass services . Generally google glass services are available under Extras folder in android sdk Check that folder and click on Install update

But when we update Android SDK we may have an error while updating android sdk . You may have following like error :-

Failed to rename directory 
C:\Media\adt-bundle-windows-x86_64-20130522\sdk\platforms\android-19 to 
C:\Media\adt-bundle-windows-x86_64-20130522\sdk\temp\PlatformPackage.old01.
[find_lock] Directory locked by javaw.exe
And then, a window appears with this message:

-=Warning!=-
The following processes:
- javaw.exe
are locking the following directory:
C:\Media\adt-bundle-windows-x86_64-20130522\sdk\platforms\android-19
Please close these aplications so that the installation can continue.

The main cause of these errors are while we are updating android sdk on one side and on other side our android tools are running or hold by some other background process and we cannot kill that process at it will be automatically started so don't try to do that so the solution to this problem is :-

Follow these simple steps: There are two possible solutions to this problem that may definately solve your problem these both worked for me

Solution1

1. Open your android sdk folder

2. Under that folder you will find temp folder if you are using android studio then path is: C:\Users\<username>\AppData\Local\Android\android-studio\sdk\temp
3. Cut everything and paste it in some other new folder
4. Rerun the sdk and now and update

Solution2

1. First Make a copy of the \tools folder, name it something like \copy. So you should have c:\android-sdk-windows\copy.
2. Now run android.bat from the \copy folder with Admin privileges.
3. This should prevent the issue with items currently being open in the \tools folder.
4. Now cheers..

BootStrap Technology For Responsive Websites

Bootstrap is very good  and simple to use technology for making your website Mobile Compatible . It helps to make your website compatible with every you open it . Regardless of the screen size where we opens the website it provides full Responsiveness

Bootstrap File Structure

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff


BootStrap Online File Links

 For Making your website Responsive using Bootstrap Technology You require some css , js coded files you can then use classes defined in these files to make your website responsive  you can either download these files from links below or you can directly provide these links in <head > </head> Tag of your Html or jsp or aspx file .
 For using Offline files :- 
 Go to links below one by one and this will open css code save the files with their respective names and then reference them in your page <head></head> Tag
For using Online Files :- 
Just include the following code lines in your page's <head></head> Tag
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

A Simple Sample of Bootstrap Html Page Below :-


<!DOCTYPE html>
<html lang="en">
  <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>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Grid System In Bootstrap

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Bootstrap's Grid system has done a lot of ease for developers Instead of doing calculations for div's like they do before bootstrap technology they can easily divide the page into columns and rows and design the page according to it .

Here's how the Bootstrap grid system works:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding. A container will contain all your divs
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  • The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.
Reference Links

1. http://getbootstrap.com/
2. http://getbootstrap.com/css/

How To Create Re-sizable Popup Windows using Jquery

CODE FOR HOW TO CREATE RE-SIZABLE POPUPS USING JQUERY


Try the code written below to create resizable popups for your websites you must have internet connection to use jquery files in the code below other wise you can download these files and give them static paths according to your directory structure

CODE

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Modal confirmation</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });
  </script>
</head>
<body>

<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>


</body>
</html>