anjalig.github.io/index.html at master · anjalig/anjalig.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324

<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>DECRYPTING IDEAS</title>
  <meta name="author" content="Anjali">


  <meta name="description" content="How to make Bootstrap Modals Responsive Bootstrap Modals are not responsive by default, to make them responsive follow the steps below which includes &hellip;">


  <!-- http://t.co/dKP3o1e -->
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <link rel="canonical" href="http://anjalig.github.io/">
  <link href="/favicon.png" rel="icon">
  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
  <script src="/javascripts/modernizr-2.0.js"></script>
  <script src="/javascripts/ender.js"></script>
  <script src="/javascripts/octopress.js" type="text/javascript"></script>
  <link href="/atom.xml" rel="alternate" title="DECRYPTING IDEAS" type="application/atom+xml">
  <!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">


</head>

<body   >
  <header role="banner"><hgroup>
  <h1><a href="/">DECRYPTING IDEAS</a></h1>

    <h2>Hacking Ideas.</h2>

</hgroup>

</header>
  <nav role="navigation"><ul class="subscription" data-subscription="rss">
  <li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>

</ul>

<form action="http://google.com/search" method="get">
  <fieldset role="search">
    <input type="hidden" name="q" value="site:anjalig.github.io" />
    <input class="search" type="text" name="q" results="0" placeholder="Search"/>
  </fieldset>
</form>

<ul class="main-navigation">
  <li><a href="/">Blog</a></li>
  <li><a href="/blog/archives">Archives</a></li>
</ul>

</nav>
  <div id="main">
    <div id="content">
      <div class="blog-index">


    <article>

  <header>

      <h1 class="entry-title"><a href="/blog/2013/07/23/bootstrap-responsive-modals-fix/">Bootstrap Responsive Modals Fix</a></h1>


      <p class="meta">


<time datetime="2013-07-23T21:51:00+05:30" pubdate data-updated="true">Jul 23<span>rd</span>, 2013</time>

      </p>

  </header>


  <div class="entry-content"><blockquote><p></p><footer><strong>How to make Bootstrap Modals Responsive</strong></footer></blockquote>


<p>Bootstrap Modals are not responsive by default, to make them responsive follow the steps below which includes changing the CSS files in the bootstrap library:</p>

<ol>
<li><p>In the file bootstrap-responsive.css change/add the following:
 Changed the positioning from absolute to fixed (or really, deleted the positioning variable altogether, as the main CSS file already        specifies the positioning as fixed).</p>

<p> Changed the top, left and right positions from pixels to percentages.</p>

<p> Added a bottom position. This is required to keep the modal-footer from expanding beyond the screen on modals with long blocks of       text. Because of the fixed positioning, it will never be visible in those instances.</p>

<p> Added a body height of 60%. This also prevents the modal-footer from being pushed out of view on longer blocks of text, and enables         overflow-y scrolling.</p></li>
</ol>


<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>.modal {
</span><span class='line'>position: fixed;
</span><span class='line'>top: 3%;
</span><span class='line'>right: 3%;
</span><span class='line'>left: 3%;
</span><span class='line'>bottom: 3%;
</span><span class='line'>width: auto;
</span><span class='line'>margin: 0;
</span><span class='line'>}
</span><span class='line'>.modal-body {
</span><span class='line'>height: 60%;
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>


<ol>
<li>In the file bootstrap.css change/add the following:
 Added -webkit-overflow-scrolling: touch to the modal-body.</li>
</ol>


<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>.modal-body {
</span><span class='line'>max-height: 350px;
</span><span class='line'>padding: 15px;
</span><span class='line'>overflow-y: auto;
</span><span class='line'>-webkit-overflow-scrolling: touch;
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>


<ol>
<li>Include the above two files in the <head> tag of the code.</li>
</ol>


<p>DONE!!!! enjoy Responsive Bootstrap Modals.</p>
</div>


    </article>


    <article>

  <header>

      <h1 class="entry-title"><a href="/blog/2013/06/19/steganography/">Steganography</a></h1>


      <p class="meta">


<time datetime="2013-06-19T21:42:00+05:30" pubdate data-updated="true">Jun 19<span>th</span>, 2013</time>

      </p>

  </header>


  <div class="entry-content"><blockquote><p></p><footer><strong>Hidding Folder Behind an Image</strong></footer></blockquote>


<p><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQkZlLGh1eMQTQwZ9dvr0zGRtOk6pMYhxmuuy11TkK_y9EwryBN"></p>

<p>Steganography is the art and science of writing hiden messages in such a way that no one,
apart from the sender and intended recipient suspects the existence of the message.
Example of Steganography we are going to try is &lsquo;Hidding a folder behind an image&rsquo;.
Follow the steps below and you will learn a technique of steganography:</p>

<ol>
<li>Create a folder containing all your secret files in it.</li>
<li>Here, the following things are needed :&ndash;
 -A folder containing all your secret files: here, &lsquo;hide&rsquo; is the folder .
 -An image to hide the folder: here, image.jpg is the image used.</li>
<li>Create a zip archive of the folder. In linux use the following to zip a folder :</li>
</ol>


<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>zip -r hide.zip hide</span></code></pre></td></tr></table></div></figure>


<ol>
<li>Now we will use the linux command &lsquo;cat&rsquo; which is used to for different purposes
 -displaying contents of file. <br/>
 -creating new files.
 -combining copies of files.</li>
<li>The &lsquo;cat&rsquo; command will read the image file first, then &lsquo;hide.zip&rsquo; and will concatenate them together, and redirect the output in a file &lsquo;final.jpg&rsquo;.</li>
</ol>


<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>cat image.jpg hide.zip > final.jpg</span></code></pre></td></tr></table></div></figure>


<ol>
<li>Now, the file &lsquo;final.jpg&rsquo; will contain your secret folder but it would appear as an image to anyone unknown to this technique.</li>
<li>To see the hidden folder behind the image:</li>
</ol>


<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>unzip final.jpg</span></code></pre></td></tr></table></div></figure>


<p>The advantage of steganography over cryptography alone is that messages do not attract attention to themselves. Plainly visible encrypted messages—no matter how unbreakable—will arouse suspicion, and may in themselves be incriminating in countries where encryption is illegal. Therefore, whereas cryptography protects the contents of a message, steganography can be said to protect both messages and communicating parties.</p>
</div>


    </article>

  <div class="pagination">

    <a href="/blog/archives">Blog Archives</a>

  </div>
</div>
<aside class="sidebar">

    <section>
  <h1>Recent Posts</h1>
  <ul id="recent_posts">

      <li class="post">
        <a href="/blog/2013/07/23/bootstrap-responsive-modals-fix/">Bootstrap Responsive Modals Fix</a>
      </li>

      <li class="post">
        <a href="/blog/2013/06/19/steganography/">Steganography</a>
      </li>

  </ul>
</section>


</aside>

    </div>
  </div>
  <footer role="contentinfo"><p>
  Copyright &copy; 2013 - Anjali -
  <span class="credit">Powered by <a href="http://octopress.org">Octopress</a>. Design by <a href="http://octopressthemes.com">Octopress Themes</a>.</span>
</p>

</footer>


<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#appId=212934732101925&xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


  <script type="text/javascript">
    (function(){
      var twitterWidgets = document.createElement('script');
      twitterWidgets.type = 'text/javascript';
      twitterWidgets.async = true;
      twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
      document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
    })();
  </script>


</body>
</html>