January 2011 ~ saAction - things i like about C#, SQL Server, ASP.NET, MVC

Home

26 January 2011

Creating jQuery menu with Animated background effect.

Wednesday, January 26, 2011

saAction

This is 26January2011, Republic day of India.

I was try to apply some new style in Menu style, I found that many web sites are using smooth animated background in menu. So I study it and found the logic behind the code.
Let understand here…

Here when user will mouse over to second menu, gray background will come over on second menu from the first one, with sooth scroll effect.
Here is its trick,

  <ul id="mnu">  
      <li><a href="#">saAction</a></li>  
      <li><a href="#">Web Technologies</a></li>  
      <li><a href="#">jQuery</a></li>  
      <li><a href="#">Visual Studio</a></li>  
      <li><a href="#">C#</a></li>  
      <li style="width: 100px; height: 60px; top: -5px;" id="mnuEffect">  
      </li>  
 </ul>

Now CSS Part

 <style type="text/css">.csharpcode, .csharpcode pre<br />{<br />     font-size: small;<br />     color: black;<br />     font-family: consolas, "Courier New", courier, monospace;<br />     background-color: #ffffff;<br />     /*white-space: pre;*/<br />}<br />.csharpcode pre { margin: 0em; }<br />.csharpcode .rem { color: #008000; }<br />.csharpcode .kwrd { color: #0000ff; }<br />.csharpcode .str { color: #006080; }<br />.csharpcode .op { color: #0000c0; }<br />.csharpcode .preproc { color: #cc6633; }<br />.csharpcode .asp { background-color: #ffff00; }<br />.csharpcode .html { color: #800000; }<br />.csharpcode .attr { color: #ff0000; }<br />.csharpcode .alt <br />{<br />     background-color: #f4f4f4;<br />     width: 100%;<br />     margin: 0em;<br />}<br />.csharpcode .lnum { color: #606060; }<br /></style>

There will be an extra LI tag after all menu and it will animate its left position. and its height will be little bit bigger then other menu has.

and after it there will be a function to animate the position to the selected LI tag:

 $('li:not(#mnuEffect)').mouseover(function ()   
 {       
      $('#mnuEffect').stop().animate({left: $(this).position().left,width: $(this).width() }, 'slow');       
 });

This is very simple trick, So here I created function to apply this effect to any kind of menu, and here we can apply any CSS effect for good GUI.
Happy Programming, जय-हिंद!

25 January 2011

SQL Server Database Publishing Wizard

Tuesday, January 25, 2011

saAction

Data Transfer is one kind of headache for some time in various hosting environment, SQL Server Database Publishing Wizard enables the deployment of SQL Server databases into different hosting environment or in development server to production server on either a SQL Server 2000, 2005 server.

It generates a all required fields SQL script in a single file which can be used to recreate a database there are three best option to generate script.

Schema Only
Data Only
Schema And Data

This wizard can also directly upload databases to servers located at the shared hosting provider, but I would like to upload by generating script, It also helps as backup file of database.

You can start this wizard from SQL Server Folder:

C:\Program Files\Microsoft SQL Server\90\Tools\Publishing\sqlpubwiz.exe

Now, using with Visual Studio 2010, we can directly start Publishing Wizard from Server Explorer:

Just right click on database name and your will get “Publish to Provider…” menu.

So, have a nice stuff in Visual Studio 2010 Ultimate

24 January 2011

Tab Control in one line of jQuery

Monday, January 24, 2011

saAction

How to create a Tab Control, people ask me this question so many times. So finally I have decided to post its simple solution here. This is very easy task. Lets understand.

We need tabs Title in <UL>, <LI> title. something like below:

 <!--This is Tab Control UL-->  
 <ul class="tab">  
      <li>Tab1</li>  
      <li>Tab2</li>  
      <li>Tab3</li>  
 </ul>

Below is Tab Content UL, we have to strore data here

 <!--this is Tab Content UL, we have to strore data here-->  
 <ul class="tabContent">  
   <li style="display: block;">This text for Tab 1,<br />111 111 111</li>  
   <li>This text for Tab 2,<br />222 222 222</li>  
   <li>This text for Tab 3,<br />333 333 333</li>  
 </ul>

Now add Below CSS: to give proper alignment.

 <style type="text/css">  
      .tab{position: relative;}  
      .tab li{list-style: none;float: left;border: solid 1px blue;padding: 10px;cursor: pointer;}  
      .tab li:hover{background-color: #c5c5c5;}  
      .tabContent{position: relative;clear: both;float: none;}  
      .tabContent li{list-style: none;position: absolute;height: 100px;width: 300px;display: none;border: solid 1px blue;}  
 </style>

Now it will look properly as TAB control, but still we need to add jQuery to give activate the TAB controls.

 <script language="javascript" type="text/javascript">  
 $(document).ready(function () {  
      $('.tab li').click(function () {  
           ///Hide Old content  
           $('.tabContent li').fadeOut();  
           ///Show related content   
           $('.tabContent li:eq(' + $('li', $(this).parent()).index(this) + ')').fadeIn();  
      });  
 });  
 </script>

How easy tab controls is!

Peace

21 January 2011

How to use @font-face in CSS3?

Friday, January 21, 2011

saAction

I have already posted before about sIFR technology but now its time to use CSS3. No more requirement for SIFR.

Now in web technology CSS3 is a have many exciting new functions and features available.
And almost @font-face font comes with :

TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT (OpenType) fonts for Internet Explorer 4+
WOFF (Web Open Font Format) fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+

@font-face is able to download Font typography in client's browser from the server its "Web Embedding Fonts". and its extance will be EOT that means OpenType for Internet Explorer's embedded font support. All other browser support embedded font via "TTF" TrueType file format.

Here is the syntax to embedded font in CSS3

@font-face
{
/*Give a tempeorary Name*/
font-family: "MyFontName";

/* Below line is for IE Only */
src: url( /location_of_font_Folder/FontFileName.eot );

/* Below line is for other browser (non-IE) */
src: local("Correct Font Name in Real File"), url( /location_of_font_Folder/FontFileName.ttf ) format("truetype");
}
/* Now we can us that Font name jsut linke any other font name */
.customTitle { font-family:"MyFontName", verdana, helvetica, sans-serif; }

And in HTML it will same as existing code…

<p class="customTitle">Welcome CSS3</p>

This is very easy think, just remember that you have to write down IE syntax first in @font-face style. and you need to convert TTF to EOT for IE support. here are some online tool which are doing this.