Monday, December 05, 2011

Rocking Horse – Gumeracha South Australia

When you come to South Australia another good place you should visit is the Rocking Horse at Gumeracha. There you will find a huge wooden rocking horse to which you can climb after paying few dollars. You can also watch the birds kept there and do not forget the Toy Factory nearby to do some shopping which has a good collection of gifts.

If any one interested visiting below are the contact details. But do not try to rock the horse.

Address
The Toy Factory,
Adelaide-Mannum Road,
Gumeracha, SA 5233,
South Australia,
Australia.

Telephone
(08) 8389 1085

Map


View Larger Map

Developing iPhone and Android Applications using C# .Net

Being a .Net developer did you think how great if you could develop applications for most popular mobile device platforms like iPhone and Android with the .Net skills you already have. If you were thinking like me then the wait is over.

Now with Mono you can create cross platform applications using your .Net framework skills. Mono is a software platform using which you can develop applications which runs on iPhones, Android devices, iPads and iPod Touches.

As per the Mono site, “The Mono Project is an open development initiative sponsored by Novell to develop an open source, UNIX version of the Microsoft .NET development platform.” If you are wondering about the name Mono, it is 'monkey' in Spanish.

You can try Mono for free by downloading the trial by going to the trial link. The good thing is after installing Mono you can use the more familiar Visual Studio to do the development using the available Mono templates.

Wednesday, November 30, 2011

Whispering Wall – Williamstown South Australia

Barossa Dam or whispering wall in Williamstown is not a place you should miss in your visit to South Australia. From the outer look it is just a dam created in Barossa Reservoir. But the magic starts after you send a friend to the other side of the dam and speak.

You and your friend will be able to talk as you two are near each other. The sound is very clear hence the name you can whisper and that will be heard by a person who is in the other side of the dam.

I was said that when the dam was built the lead engineer used to listen to the workers using this amazing facility to get to know what they are talking about him. Also it seems a later attempt to build a similar dam following the same design and material failed to demonstrate the whisper ability. So this is a unique dam you will not find elsewhere.

Map


View Larger Map

Adelaide – South Australia

Thought to share some nice photos captured in the city I live in. Even though the city is small there are many thing that you can enjoy in this city so I recommend Adelaide for travelers. If you are in Australia don’t forget to visit Adelaide for few days.

Album contain photos of Adelaide city and few of the many gardens Adelaide.

Cathedral shown is the famous St. Peters Cathedral located in 27, King William Road, Adelaide, SA 5000, Australia. Which is located in the following map.


View Larger Map

Expandable Regions using HTML

You can create nice looking expandable regions using just HTML and some Java scripting. This is specially useful if you are to create a site without any major programming languages. Today I thought to share an expandable region that I created to give you an idea to get it done.

When the code works it will look like the following.

imageimage

You should be excited by now, to get it working you need the following code inserted into a body section of a HTML file. Please note I have added the CSS also in to the page body, but if you have a separate CSS file please separate the CSS .

  1. <style type="text/css">
  2.     a.headingStyle
  3.     {
  4.         text-decoration: none;
  5.         margin-left: 0.5em;            
  6.     }
  7.     a.headingStyle:hover
  8.     {
  9.         text-decoration: underline;
  10.     }
  11.     a.headingStyle span.charStyle
  12.     {
  13.         font-family: monospace;
  14.         font-weight: normal;
  15.     }
  16.     .contentStyle
  17.     {
  18.         display: none;
  19.         margin-left: 1.5em;
  20.         margin-right: 0.5em;
  21.         margin-bottom: 0.5em;
  22.         border-width: thin;
  23.         border-style: outset;
  24.         background-color:#D2E3FF;
  25.     }
  26.     .upArrowStyle
  27.     {
  28.         height:32px;
  29.         background-image: url('Up_Arrow_32x32.png');
  30.         background-repeat:no-repeat;
  31.     }
  32.     .downArrowStyle
  33.     {
  34.         height:32px;
  35.         background-image: url('Down_Arrow_32x32.png');
  36.         background-repeat:no-repeat;
  37.     }
  38. </style>
  39.  
  40. <script type="text/javascript">
  41.     function display(item) {
  42.         if (document.getElementById) {
  43.             // Retrieving the first child item.
  44.             var firstChildItem = item.firstChild;
  45.             // Getting the correct child item with inner HTML text.
  46.             firstChildItem = item.firstChild.innerHTML ? item.firstChild : item.firstChild.nextSibling;
  47.             // Toggling the + or - according to the state after click.
  48.             firstChildItem.innerHTML = firstChildItem.innerHTML == '+' ? '-' : '+';
  49.             // Toggling the display image after click.
  50.             item.className = item.className == "downArrowStyle" ? "upArrowStyle" : "downArrowStyle";
  51.             // Get the sub item to toggle visibility.
  52.            var nextSubItem = item.parentNode.nextSibling.style ? item.parentNode.nextSibling : item.parentNode.nextSibling.nextSibling;
  53.             // Toggle visibility of the sub item.
  54.             nextSubItem.style.display = nextSubItem.style.display == 'block' ? 'none' : 'block';
  55.         }
  56.     }
  57.  
  58.     // Displaying everything if item could not be found.
  59.     if (!document.getElementById)
  60.         document.write('<style type="text/css"><!--\n .dspcont{display:block;}\n //--></style>');
  61. </script>
  62.  
  63. <!-- If Java scripts are blocked, display everything expanded. -->
  64. <noscript>
  65.     <style type="text/css">
  66.         .dspcont
  67.         {
  68.             display: block;
  69.         }
  70.     </style>
  71. </noscript>
  72. <div>
  73.     <!-- If + or - is required to be displayed besides the image simply change display:none; to display:block; in following sections. -->
  74.     <h1>
  75.         <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
  76.             <span style="display:none;">+</span><span style="margin-left:34px;">Main Title 1</span>
  77.         </a>
  78.     </h1>
  79.     <div class="contentStyle">Title 1 content goes here.</div>
  80.     <h1>
  81.         <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
  82.             <span style="display:none;">+</span><span style="margin-left:34px;">Main Title 2</span>
  83.         </a>
  84.     </h1>
  85.     <div class="contentStyle">
  86.         <h2>
  87.             <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
  88.             <span style="display:none;">+</span><span style="margin-left:34px;">Sub Title 1</span></a></h2>
  89.         <div class="contentStyle">
  90.             Sub title 1 content goes here.</div>
  91.         <h2>
  92.             <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
  93.             <span style="display:none;">+</span><span style="margin-left:34px;">Sub Title 2</span></a></h2>
  94.         <div class="contentStyle">
  95.             Sub title 2 content goes here.</div>
  96.     </div>
  97.     <h1>
  98.         <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
  99.         <span style="display:none;">+</span><span style="margin-left:34px;">Main Title 3</span></a></h1>
  100.     <div class="contentStyle">Title 3 content goes here.</div>
  101. </div>

 

Remember to correct the image URLs, otherwise they will go missing.

I need to thank M. C. Matti for his great article which gave me this idea. Also you can use this method to create expandable regions in other sites which use different technologies. For example if you need to add this to a SharePoint site, just use a Content Editor web part and paste the code using Source Editor in web part properties.

Hope this helps.

Tuesday, November 15, 2011

HTML Menu

Today I thought to share with you, how to create menus using HTML only. These menus will be very useful if you need to create web sites using only HTML.

image

Above menu is created using basic unordered list (UL), list items (LI), links and some CSS.

Below is the HTML code for the menu. In the code I have created the full menu using HTML lists and used CSS to format the list to work as a menu.

  1. <ul class="mainMenu">
  2.     <li class="mainMenuItem"><a href="Home.html" class="mainMenuLink">Home</a>
  3.         <ul class="subMenu">
  4.             <li class="subMenuItem"><a href="Page1.html" class="subMenuItemLink">e</a></li>
  5.             <li class="subMenuItem"><a href="Page2.html" class="subMenuItemLink">ee</a></li>
  6.         </ul>
  7.     </li>
  8.     <li class="mainMenuItem"><a href="Module1.html" class="mainMenuLink">Module 1</a>
  9.         <ul class="subMenu">
  10.             <li class="subMenuItem"><a href="Module1_Page1.html" class="subMenuItemLink">dd</a></li>
  11.             <li class="subMenuItem"><a href="Module1_Page2.html" class="subMenuItemLink">ddd</a></li>
  12.             <li class="subMenuItem"><a href="Module1_Page3.html" class="subMenuItemLink">dddd</a></li>
  13.         </ul>
  14.     </li>
  15.     <li class="mainMenuItem"><a href="Module2.html" class="mainMenuLink">Module 2</a>
  16.         <ul class="subMenu">
  17.             <li class="subMenuItem"><a href="Module2_Page1.html" class="subMenuItemLink">c</a></li>
  18.             <li class="subMenuItem"><a href="Module2_Page2.html" class="subMenuItemLink">cc</a></li>
  19.             <li class="subMenuItem"><a href="Module2_Page3.html" class="subMenuItemLink">ccc</a></li>
  20.         </ul>
  21.     </li>
  22.     <li class="mainMenuItem"><a href="Module3.html" class="mainMenuLink">Module 3</a>
  23.         <ul class="subMenu">
  24.             <li class="subMenuItem"><a href="Module3_Page1.html" class="subMenuItemLink">bb</a></li>
  25.             <li class="subMenuItem"><a href="Module3_Page2.html" class="subMenuItemLink">bbb</a></li>
  26.             <li class="subMenuItem"><a href="Module3_Page3.html" class="subMenuItemLink">bbbb</a></li>
  27.         </ul>
  28.     </li>
  29.     <li class="mainMenuItem"><a href="Module4.html" class="mainMenuLink">Module 4</a>
  30.         <ul class="subMenu">
  31.             <li class="subMenuItem"><a href="Module4_Page1.html" class="subMenuItemLink">aa</a></li>
  32.             <li class="subMenuItem"><a href="Module4_Page2.html" class="subMenuItemLink">aaa</a></li>
  33.             <li class="subMenuItem"><a href="Module4_Page3.html" class="subMenuItemLink">aaaa</a></li>
  34.         </ul>
  35.     </li>
  36. </ul>

 

Below is the CSS that you need to make the above HTML work as a menu.

  1. .subMenu
  2. {
  3.     padding: 1px;
  4.     position: absolute;
  5.     visibility: hidden;
  6. }
  7. .subMenuItem
  8. {
  9.     list-style: none;
  10.     float: left;
  11.     position: relative;
  12.     margin: 0px;
  13.     display: block;
  14.     width: 92px;
  15. }
  16. .subMenuItemLink
  17. {
  18.     color: White;
  19.     text-align: left;
  20.     text-decoration: none;
  21.     padding-left: 5px;
  22.     display: block;
  23.     height: 32px;
  24.     width: 92px;
  25.     background-image: url('./Images/menuButtonSelected.jpg');
  26. }
  27. <!-- Changing the menu when mouse is over the menu. -->
  28. .mainMenuItem:hover .mainMenuLink
  29. {
  30.     color: White;
  31.     background-color: Blue;
  32.     background-image: url('./Images/menuButtonSelected.jpg');
  33. }
  34. <!-- Changing the menu when it is selected. -->
  35. .mainMenuItem:active .mainMenuLink
  36. {
  37.     background-image: url('./Images/menuButtonSelected.jpg');
  38. }
  39. <!-- Showing the sub menu items when mouse is over the main menu. -->
  40. .mainMenuItem:hover .subMenu
  41. {
  42.     visibility: visible;
  43.     z-index: 100;
  44. }

 

Do not forget to import the CSS into the HTML page by using a link as shown below.

  1. <link rel="stylesheet" type="text/css" href="DefaultStyles.css" />

 

I used the following images as the background images of the links.

menuButton11  menuButtonSelected11

I think the code is not that complex, so hope this helps, let me know if you need any help on this, I will try to help you out.

Microsoft Flight

In early 2009 I got shocked when I heard that Microsoft Aces game studio was closed down by Microsoft which was responsible for developing well known PC simulation software's and games such as Flight Simulator, Combat Flight Simulator and Train Simulator.

But recently after getting to know that Microsoft is now developing the Flight Simulator internal at Microsoft I am more than happy. After seeing the new visuals of the renamed product Microsoft Flight, I am extremely exited and waiting until they release the next version.

See for your selves by visiting Microsoft Flight site which is the next version of Microsoft Flight Simulator X.