2014

Bootstrap: Modal Dialog Box

Sep 12, 2014

I had a post before about how to create a modal dialog box using native CSS and Javascript (no libraries).

This time, I will make one using Bootstrap.

Required:

You may download the files or just place the following code inside your <head> tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Next, we create our modal dialog box.

<div class="modal fade" id="modalDialog" role="dialog">
  <div class="modal-dialog">
 <div class="modal-content">
   <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  <h4 class="modal-title">[Modal title]</h4>
   </div>
   <div class="modal-body">
  <h1>[Modal Body]</h1>
  <p>Lorem ipsum dolor</p>
  <a href="">Lorem ipsum dolor</a>
  <ul>
   <li>Lorem ipsum dolor</li>
   <li>Lorem ipsum dolor</li>
  </ul>
  <ol>
   <li>Lorem ipsum dolor</li>
   <li>Lorem ipsum dolor</li>
  </ol>
   </div>
   <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Save</button>
   </div>
 </div>
  </div>
</div>

We then create the button that would allow the modal to appear.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalDialog">
 Show Modal
</button>

FIDDLE

Did this work for you?
Any better solutions?

Please feel free to drop a message on the comments section.

Next Line in Instagram Bio (iOS)

Sep 4, 2014

I've been an Instagram user for more than two (2) years now and I've just recently learned how to skip lines on the Bio field.

I have maintained a few ~~un-official~~ accounts in Instagram such as insta_colorsplash and ol.shopper. However, it has always been a problem for me on how to make the bio so presentable and readable.

Whenever I tap on the next key, it will always move me on the next input field.
So I just had to cope up with seeing the words on my bio field placed next to each other. ~~*sucks*~~

But hey!
I finally knew how to skip lines in Instagram! ~~*yeah, finally!*~~
The steps are actually very simple and it makes me feel stupid now of why I haven't tried or thought of it before.

Type your bio on the Notes app of your device.
Copy.
Paste it to the bio field of your Instagram profile.

And voila!

Any alternate solutions?

Feel free to leave a message on the comments section.

Note: This is only applicable for iOS devices.

Javascript: Check if Input is Palindrome

Sep 4, 2014

I had a past post about how to check if input is palindrome in C#.

This one is another Javascript exercise with the same goal.

Instructions:

-create a function that determines the string input as palindrome
-use arrays and loops to check if the string is a palindrome (try reading .split and join function, DO NOT USE REVERSE FUNCTION in javascript)
-use text box to for string input
-use button to determine output
-insert text "is a palindrome" below the text box if string is a palindrome else "not a palindrome" --> use ternary operator for this

Here is my solution.

index.html

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" src="palindrome.js">
  </script>
 </head>
 <body>
  <input type="text" id="input_text"></input>
  <button onClick="isPalindrome()">Check</button>
  <br />
  <label id="output_text"></label>
 </body>
</html>

palindrome.js

function isPalindrome(){
 var inputString = document.getElementById("input_text").value.toLowerCase();
 var revString = [];
 
 inputString = inputString.replace(/[^a-zA-Z-]/g, ''); //removes all non-alphabet letters, including white space;
  
 for(var indx = inputString.length-1; indx >= 0; indx--){
  revString.push(inputString[indx]);
 }
 
 revString = revString.join('');
 
 document.getElementById("output_text").innerHTML = ""; //set to empty; to 'delete' any value already existing in the node;
 document.getElementById("output_text").innerHTML += (inputString === revString) ? "is a palindrome" : "not a palindrome";
 
}

FIDDLE

For clarifications and/or better solutions, please feel free to leave a message on the comments section.

Javascript: Bubble Sort and Math.Random

Sep 3, 2014

We are given an exercise that needs to be solved using Javascript.

*Bubble sort
-ceate a function that returns a sorted array in ascending order
-within the function, create an array with a size of 10 with random unique numbers (1-100) in it (to generate random numbers try using Math.random() function)
-sort the random values then return the array

*displaying the array
-in respect to problem 1, display the returned array into an ordered list element (<ol>)

Here is my solution to the problem.

Code snippets to help with output tracing is also available as comments.

var num = [];

num = assignValToArray();
bubbleSort(num);
displayOrderedList(num);

// ***** FUNCTIONS *****

//assign n random unique numbers to array;
function assignValToArray(){
 var arr = [];
 var val;
 var maxNum = 100;
 var minNum = 1;
 var n = 10; //size;
 
 while(arr.length < n){
  val = Math.floor(Math.random() * ((maxNum + 1) - minNum) + minNum);
  //check generated value if exists in the array;
  var exist = false;
  for(var x = 0; x < arr.length; x++){
   if(val === arr[x]){
    exist = true;
    break;
   }
  }
  
  //push to array if generated value does not exist;
  if(!exist){
   arr.push(val);
  }
 } 
 //document.write("Original list: " + arr); //original list;
 return arr; 
}

// bubble sort;
function bubbleSort(arr){
 //var count = 0; //count for every iteration;
 do{
  var tmp; //hold temporary value;
  var swap = false;
  for(var i = 0; i < arr.length-1; i++){
   if(arr[i] > arr[i+1]){
    swap = true;
    tmp = arr[i];
    arr[i] = arr[i+1];
    arr[i+1] = tmp;
   }
  }
  //count++;
  //document.write("<br>" + count + "th Iteration: " + num); //list every iteration;
 }while(swap);
}

//display output;
function displayOrderedList(arr){
 document.write("<ol>");
 for(var i = 0; i < arr.length; i++){
  document.write("<li>" + arr[i] + "</li>");
 }
 document.write("</ol>");
}

For questions or for better solutions, feel free to leave a message on the comments section.

Show-Hide Submenu using CSS and HTML Only

Aug 28, 2014

It is common for websites to have submenus under menus.

A common behavior for submenus is that it shall only be visible when the main menu is hovered.

Below are simple code snippets of doing this with HTML and CSS only (no Javascript).

First we'll have the HTML structure.

<ul class="menu">
 <li><a href="">Menu</a></li>
 <li><a href="">A very long Menu</a>  
  <ul class="submenu">
   <li><a href="">Menu</a></li>
   <li><a href="">Menu</a></li>
  </ul>
 </li>
 <li><a href="">Menu</a></li>
 <li><a href="">Menu</a></li>
 <li><a href="">Menu</a>
  <ul class="submenu">
   <li><a href="">A long submenu</a></li>
   <li><a href="">Menu</a></li>
  </ul>
 </li>
 <li><a href="">Menu</a></li>
 <li><a href="">Menu</a></li>
</ul>

We'll include some default styling.

*{padding:0;margin:0;}
body{font:16px Tahoma;padding:10px;}
a{text-decoration:none;}
ul{list-style-type:none;}

So far, our menu would look like this:

Let's add style to our main menu.

.menu{
 position:relative;
}
.menu li{
 float:left;
}
.menu>li>a{
 background:red;
 padding:15px;
 display:block;
 border:1px solid black;
}
.menu>li>a:hover{
 background:orange;
}

We can now distinguish the main and the submenu.

Please do not mind the arrow left on the lower right. That's from a plugin on my browser.

Let us now style the submenu.

.submenu li{
 clear:left;
}
.submenu>li>a{
 background:yellow;
 padding:10px;
 display:block;
 border:1px solid black;
}

Notice that the fifth menu's width is increased because of its submenu. Let's make our submenu absolute so it will not affect the main menu.

.submenu{
 position:absolute;
}

We've already fixed the width for the main menu.
But the submenu seems a little awkward.
This is when we give a fixed width for the submenu so that everything will have the same width.

Add width:120px to .submenu>li>a.

Looking nice so far.
But we need to hide the submenu.
So let's add display:none; to our .submenu class.

Our submenu is now hidden from view.
But this should appear when we hover on its main menu.
So we add the following rule:

.menu>li:hover>.submenu{
 display:block;
}

Tadaan!

Sample Result

We have created a menu with submenu using only HTML and CSS.

Any better ideas? Please leave a message on the comments section.

CSS & JavaScript: Modal Dialog

Aug 25, 2014

Hi!
These are just simple snippets of codes that will allow us to create a modal dialog box.

HTML

<div id="overlay">
    <div>
        <p>I am a hidden div and will be displayed as a modal!</p>
        <p>Charlungs!</p>
    </div>
</div>
<button onclick='overlay()'>Click</button>

CSS

#overlay {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    text-align:center;
    z-index: 1000;
    background:url('http://jasongraphix.com/static/uploads/googlebg-dadada.png');
    /** replace background image with a transparent gray image **/
}
#overlay>div {
    width:300px;
    margin: 100px auto;
    background-color: fff;
    border:3px solid #000;
    padding:15px;
    text-align:center;
}

Javascript

function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

FIDDLE

Better ideas? Leave a message on the comments section.

Credits to:

RAVEN Blog

Enable Auto-Complete in Notepad++

Aug 25, 2014

I have been using Notepad++ ever since I started working but I have no idea it has an auto-complete feature just like other IDE's. *silly me*

So here's how to enable it:

Go to Settings.
Click on Preferences.
Go to Backup/Auto-Completion.
Check Enable auto-completion on each input.

That's it.

jQuery: Start Date and End Date

Aug 21, 2014

We commonly see on websites some input fields that would require us to enter a date range.

This means we should be able to select a start date and end date.

Of course, start date should always be before the end date and the end date should always be later than the start date.

Being a Tech Noob, I have no idea how to do this, especially since web programming isn't really my forte.

Fortunately, a lot of helpful tips can be found online!

Here's one.

We need the following:

HTML

<input type="text" id="start_date">
<input type="text" id="end_date">

Javascript

$(function() {
 $("#start_date").datepicker({
  onSelect: function(selected){
   $("#end_date").datepicker("option","minDate", selected)
        }

 });
 $("#end_date").datepicker({
  onSelect: function(selected) {
   $("#start_date").datepicker("option","maxDate", selected)
        }

 });
});

FIDDLE

Let me know if you have other better ways in mind. (:

jQuery: Simple Click Game with Interval

Mar 12, 2014

Here's another simple game using HTML5 and Javascript.

The following are the requirements of the game:

The game starts when the "ENTER" key is pressed.
A "monster" will be displayed in random location of the canvas per set milliseconds.
Hit - when the monster is clicked.
Miss - when the monster is missed - only during click
Monster turns yellow when hit.
Monster turns red when hit.
The game is over when there are already five (5) misses.
The top score is recorded - this will reset on every page load, though.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
 
 <canvas id="canvas" width="450" height="450"></canvas>
 <script src="pop.js" type="text/javascript"></script>
</body>
</html>

pop.js

$(document).ready(function()
{
 // canvas
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var w = canvas.width;
 var h = canvas.height;
 
 // monster
 var locX;
 var locY;
 var monsterSize = 50;
 var monSpaceX; // space occupied by monster in X
 var monSpaceY; // space occupied by monster in Y
 
 // colors
 var bgColor = "white";
 var strokeColor = "black";
 var monsterColor = "blue";
 var monsterHitColor;
 
 // other variables
 var text; // label on canvas
 var topScore = 0;
 var topText;
 var hitScore; // number of hits
 var isHit;
 var missLimit;
 var interval;
 var msec = 700;
 var play; // game is ongoing
 
 init();
 
 // ** ----- FUNCTIONS ----- **
 
 // initialize
 function init()
 {
  // initialize variables
  hitScore = 0;
  missScore = 0;
  missLimit = 5;
  text = "Click ENTER key to play.";
  topText = "Top Score: " + topScore;
  play = false;
  window.clearInterval(interval);
  
  // draw canvas
        paintCanvas();
 }
 
 // draw canvas
 function paintCanvas()
 {
  // format canvas by setting BG color and border
  ctx.fillStyle = bgColor;
  ctx.fillRect(0, 0, w, h);
  ctx.strokeStyle = strokeColor;
  ctx.strokeRect(0, 0, w, h); 
  
  setLabel();
 }
 
 // draw monster
 function placeMonster()
 {
  // set score label
  text = "Score: " + hitScore + "; Chance left: " + missLimit;
  
  setLocation(); // random location
  paintCanvas(); // draw canvas to cover past monsters
    
  // monster
  ctx.fillStyle = monsterColor;
  ctx.fillRect(locX, locY, monsterSize, monsterSize);
  
 }
 
 // paint monster to indicate it is hit or not
 function paintMonsterHit()
 {
  ctx.fillStyle = monsterHitColor;
        ctx.fillRect(locX, locY, monsterSize, monsterSize); 
 }
 
 // place label on canvas
 function setLabel()
 {
  // set top score label above
  ctx.fillStyle = strokeColor;
  ctx.fillText(topText, 5, 10);
  
  // set label below
  ctx.fillStyle = strokeColor;
  ctx.fillText(text, 5, h - 5);
 }
 
 // randomly generate location to where monster will be placed
 function setLocation()
 {
  locX = Math.floor((Math.random() * (w - monsterSize)) + 0);
  locY = Math.floor((Math.random() * (h -monsterSize)) + 0);
  
  getMonsterSpace();
 }
 
 // get the coordinates of the space occupied by monster
 function getMonsterSpace()
 {
  monSpaceX = locX + monsterSize;
  monSpaceY = locY + monsterSize;
 }
 
 // check if monster is hit or missed
 function isMonsterHit()
 {
  if(isHit)
   hitScore++;
  else
   missLimit--;
 }
 
 // check if game is over or not
 function checkGameOver()
 {
  if(missLimit == 0)
  {
   alert('Game Over. Score: ' + hitScore);
   if(hitScore > topScore)
   {
    alert('Congratulations! New Top Score!');
    topScore = hitScore;
   }
   init();
  }
 }
 
 // ** ----- EVENTS ----- **
 
 $(document).click(function()
 {
  if(play)
  {
   if(event.x >= locX && event.x <= monSpaceX && event.y >= locY && event.y <= monSpaceY)
   {
    monsterHitColor = "yellow";
    isHit = true;
   }
   else
   {
    monsterHitColor = "red";
    isHit = false;
   }
   
   paintMonsterHit();
   isMonsterHit();
   checkGameOver(); // check if game is over
  }
 });
 
 $(document).keydown(function(e)
 {
  if(!play)
  {
   var key = e.which;
   
   if(key == '13')
   {
    interval = window.setInterval(placeMonster, msec);
    play = true;
   }
  }
 });
 
});

Improvements in the future:

A miss should also be counted when user fails to do a click every time a monster appears.
Use image for monster.

NOTE: Only works for Google Chrome. :/

Click here for the result.

jQuery: Simple Colored Cell Game

Mar 7, 2014

So I decided to learn new stuffs ~~*since I am not a web-person or anything*~~.

The goal would be to create a simple game that does the following:

At the start of the game, there is a blue-colored cell in the middle of the canvas.
On every left-click, the cell increases in size.
If an arrow key is pressed, the cell changes color and moves to that direction.
If the enter key is pressed, the game is reset.

Though it's just a really simple game, I find this a challenge. *I'm the Tech Noob after all. ;)

I've shared the codes below. Hopefully this helps beginners like myself. ;)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
 
 <canvas id="canvas" width="450" height="450"></canvas>
 <script src="cell.js" type="text/javascript"></script>
</body>
</html>

cell.js

$(document).ready(function(){
 
 // canvas stuff
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var w = canvas.width;
 var h = canvas.height;
 var locX; // location in X
 var locY; // location in Y
 var pxX; // pixel size in X
 var pxY; // pixel size in Y
 var cellColor;
 var BGColor;
 var strokeColor;
 
 function init()
 {
  // set default color
  BGColor = "white";
  cellColor = "blue";
  strokeColor = "black";
  
  // set default pixel size
  pxX = 10;
  pxY = 10;
   
  // set default location (center of canvas)
  locX = (w - pxX) / 2;
  locY = (h - pxY) / 2;
  
  paint();  
 }
 
 init();

 function paint()
 {
  // paint background
  ctx.fillStyle = BGColor;
  ctx.fillRect(0, 0, w, h);
  ctx.strokeStyle = strokeColor;
  ctx.strokeRect(0, 0, w, h);
  
  // paint cell
  ctx.fillStyle = cellColor;
  ctx.fillRect(locX, locY, pxX, pxY);
  ctx.strokeStyle = strokeColor;
  ctx.strokeRect(locX, locY, pxX, pxY);
 }
 
 $(document).click(function()
 { 
  // add one pixel for x and y on every click
  pxX++;
  pxY++;
    
  paint();
 })
 
 $(document).keydown(function(e)
 {
  var key = e.which;
  
  if(key == "37") // left
  {
   locX--;
   cellColor = "red";
  }
  else if(key == "38") // up
  {
   locY--;
   cellColor = "blue";
  }
  else if(key == "39") // right
  {
   locX++;
   cellColor = "yellow";
  }
  else if(key == "40") // down
  {
   locY++;
   cellColor = "green";
  }
  else if(key == "13") // enter
   init();
  
  paint();
 })
 
})

Click here for the result.

Shortcut Virus

Mar 6, 2014

I was asked to fix someone's flash disk a few years back because all of the files inside it turned into shortcut icons. You cannot view the files even if you choose to show hidden files.
I was able to find the solution on the internet.

Now another someone encountered the same problem. I was searching for the solution on the internet but it seems everything that shows up are those that require users to download something. ~~*sucks*~~

So I did the best I could to look over my files and see if I have saved the solution I did back then.

And FORTUNATELY, I did.

I would just like to share this one FOR FREE without you having to download anything. (:

Run Command Prompt.
Type this:
attrib F:\*.* /d /s -h -r -s

Remember to change F: with the correct target drive.

The files are now visible. Just delete all the shortcut icons.

PS:
** Make sure you have an anti-virus installed and that it is updated.
** Next time, be careful on where to insert your flash disks. (:

C#: Check if Input is Palindrome

Mar 5, 2014

Here is one algorithm I find a challenge back on my student days.

* Check if string value entered by user is a palindrome or not.

/// <summary>
/// Checks if entered string value is a palindrome or not.
/// </summary>
/// <param name="p_word">Value entered by user</param>
/// <returns>If palindrome, returns true; otherwise, returns false</returns>
public bool IsPalindrome(string p_word)
{
 string revWord = string.Empty;
 char[] wordChar = p_word.ToCharArray();

 for (int index = p_word.Length - 1; index >= 0; index--)
 {
  revWord += wordChar[index];
 }

 if (revWord.Equals(p_word))
  return true;
 else
  return false;
}

If you have any better solution, please don't hesitate to share them on the comments section. (:

::EDIT::

Here's another solution by .NET GENE.

using System.Linq;

public bool IsPalindromeEnum(string p_word)
{
 string revWord = new string(p_word.Reverse().ToArray());

 if (revWord.Equals(p_word))
  return true;
 return false;
}

Thanks! :D

Free Domain Names

Mar 5, 2014

I have tried using .TK for free domain once on my other blog and it worked just fine. (:

.TK logo
Image credits: PPD Tips

Actually this is just a site that would register your URL and give you a shortened one.
The shortened URL would just redirect your user to your site.

So instead of having to type the whole ".blogspot.com" thing, you may just let your users type "blogname.tk".
Pretty handy, right? (:

If you have any thoughts about this, please share on the comments section.

Transfer Videos from Computer to iPhone Device

Mar 1, 2014

I have been having trouble with video transfers over iPhone devices.
Bluetooth feature of these devices doesn't seem to support file transfers. But please correct me on the comments section if I'm wrong.

What I usually do is ask someone to send the files via Viber.
If the files are on a desktop computer, I would use Dropbox. However, I could only download image files from Dropbox. NO VIDEOS.

That's just my problem right now.

I have a copy of a video on a DVD and I want it transferred to my iPod Touch so that I could upload it on Instagram. (lol)

I placed the video on Dropbox. I can view it but I CAN'T download it.
I searched for some solutions and found this one. Though I did successfully transferred the video to my iPod device, it cannot be uploaded since it's not stored in my Gallery.

I'm starting to get frustrated.

Luckily, I just kind of remembered this "wifi transfer" thing so I decided to go to App Store and searched for it.

Icon
Image credits: iTunes

I decided to install this Simple Transfer - Wireless Photo & Video Backup, Sync and Share app and see if this would help me solve my problem.

I followed its instructions and TADAAN!!

With only less a minute, I finally have my video on my gallery! :D

But being a Tech Noob, I'm not too sure if this is the best solution.
So guys, if this one is too risky for you, or you could recommend a much better solution, please feel free to drop a message on the comment box.

Thanks!

Recursion Examples

Feb 28, 2014

During my college days, we simply refer to recursion as a method that calls itself.

Here's a simple program.
Our goal is to compute the factorial of positive integer N.
A non-recursive definition would look like this:

int val = 1;
for(int x=1; x <= N; x++)
{
 val = val * x;
}

But when we define a recursive method, it would be something like this:

int factorial(int N)
{
 if(N == 1)
  return 1;
 else
  return N * factorial(N-1);
}

Here are other examples of recursive methods.

/** Getting the product of two integer values **/

int product (int x, int y)
{
 if (y == 1)
  return x;
 else
  return x + product(x, y-1);
}

/** Displaying digits of a given number in a separate line **/

void display(int x)
{
 if (x >= 10)
  display(x/10);

 System.out.println(x%10);
}

/** Getting the sum of the square from 1 to n **/

int sumofsquare(int n)
{
 if(n == 1)
  return 1;
 else
  return (n*n) + sumofsquare(n-1);
}

/** Prints odd numbers between 1 to N **/

void printodd(int N)
{
 if (N!=1)
 {
  printodd(N-1);
  if(N%2 != 0)
   System.out.println(N);
 }
}

/** Calculates the length of a linked list **/

int length(NodeOp p)
{
 if(p == tail)
  return 1;
 else
  return 1 + length(p.next);
}

How to Add Syntax Highlighter in Blogger

Feb 27, 2014

Follow these very simple steps on how to add syntax highlighter for your Blogger blog.

Go to Dashboard > Template.
Click on Edit HTML.

Copy the following code before the </head> tag.

<!-- Syntax Highlighter Additions START -->
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript" />
 
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript" />
  
<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter Additions END -->

You may change the theme on this line. Click here for the list of themes.

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

You may prefer to include only the brushes that you will be using to save load time.

Save template.
On creating a new post, when a code snippet is to be added, go to HTML mode.
Place your code snippet in between the following tags:
```
<pre class="brush:csharp;">
// code here
</pre>
```

Click here for the list of brushes.
Make sure your code is escaped. This site will help you convert raw HTML to escaped HTML.

Click Publish.

Reference(s):

One Q, One A

Sample Post with Syntax Highlighter

Feb 27, 2014

This is just a sample post using syntax highlighter.
Will discuss how to install the highlighter in a different post.

/// <summary>
/// Fetches number of scripts
/// </summary>
/// <param name="rowIndex">Row index where number of scripts would be placed</param>
private void DisplayNoOfScripts(int rowIndex)
{
 int totalScripts = 0;

 string filterScript = string.Format(@"{0} NOT LIKE NULL"
  , Admin_Script.script_name.ToString(),);

 DataRow[] dr = dtScripts.Select(filterScript);

 totalScripts = dr.Length;

 dgvCategoryCountry.Rows[rowIndex].Cells[COL_DETAIL_SCRIPTS].Value = totalScripts;
}

"There are no games." in PSP

Feb 26, 2014

Not sure if this glitch still occurs but please allow me to share.

My PSP shows this message "There are no games." but I am pretty sure there are.
This happened when I added the game Rock Band Unplugged.

Well, it seems that installing this game deletes the GAME folder, but not the games.

To fix this, follow the steps below:

Tech Newbie

Pages

Bootstrap: Modal Dialog Box

Next Line in Instagram Bio (iOS)

Javascript: Check if Input is Palindrome

Javascript: Bubble Sort and Math.Random

Show-Hide Submenu using CSS and HTML Only

CSS & JavaScript: Modal Dialog

Enable Auto-Complete in Notepad++

jQuery: Start Date and End Date

jQuery: Simple Click Game with Interval

jQuery: Simple Colored Cell Game

Shortcut Virus

C#: Check if Input is Palindrome

Free Domain Names

Recent Comments Section on Blogger

Transfer Videos from Computer to iPhone Device

Recursion Examples

How to Add Syntax Highlighter in Blogger

Sample Post with Syntax Highlighter

"There are no games." in PSP