23 March 2012
Friday, March 23, 2012
saAction
<ul class="flds">
<ul class="myBanner">
<li><img alt="" src="http://www.google.com/logos/2012/republicday12-hp.jpg" /></li>
<li><img alt="" src="https://www.google.co.in/logos/2012/juan_gris-2012-hp.jpg" /></li>
</ul>
</ul>
Step 2: Apply CSS to show in one place
.myBanner{width:400px;height:144px;position:relative;}
.myBanner li{position:absolute;display:none;}
and its sub CSS LI has position:absolute to create all image in same position and display:none to hide all image
Now all image will be hide, but we need to display first image when web site load to show it as a default image, So it required to apply display:block style in first LI.
<li style="display: block;"></li>
.myBanner li:first-child{display:block!important;}
finally it is required a jQuery function and a Timer to apply Hide/Show effect.
Step 3: Create jQuery Function
<script type="text/script" language="javascript">
$(document).ready(function () {
setInterval("slideShow('.myBanner')", 5000);
});
function slideShow(ssObj) {
var obj = ssObj + " li";
var crrObj = $(obj + ':visible');
var nextObj = $(obj + ':visible').next();
if ($(obj + ':last').is(':visible')) {
nextObj = $(obj + ':first');
}
crrObj.fadeOut(2000);
nextObj.fadeIn(2000);
}
</script>
Don't forget to import jQuery.js file.
20 March 2012
Tuesday, March 20, 2012
saAction
Here is a quick sample:
Step 1: Create CSS:
<style type="text/css">
.flds{list-style:none;padding:0;margin:0}
.flds li{padding-bottom:10px;}
.flds input,.flds textarea{border:solid 1px #3d3d3d;color:#}
.waterMark{color:#c5c5c5;}
</style>
Step 2: HTML Form:
<ul class="flds">
<li>
<span>Name</span>
<input id="v1" type="text" />
</li>
<li>
<span>Address </span>
<textarea cols="20" rows="3"></textarea>
</li>
<li>
<input type="submit" value="OK" />
</li>
</ul>
/*This is the function*/
jQuery.fn.WMark = function () {
//Each loop to find all textbox and text area
$("input[type=text],textarea").each(function () {
///Hide Span Tag
$("span", this.parentNode).hide();
///Hide Show WaterMark CSS effect in Focus and Blue Event
$(this).addClass('waterMark').val($(this).prev().text()).focus(function () { if (this.value == $(this).prev().text()) { $(this).removeClass('waterMark').val(''); }; }).blur(function () { if (this.value == '') { $(this).addClass('waterMark').val($(this).prev().text()); }; });
});
};
$(document).ready(function () {
///Cell water mark function
$('.flds').WMark();
});
14 March 2012
26 January 2011
Wednesday, January 26, 2011
saAction
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
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
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
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.
- http://www.fontsquirrel.com/fontface Download hundreds of EOT, WOFF fonts.
- TTF to EOT Font converter
- Web Embedding Fonts Tool (WEFT)
This is very easy to cool. isn’t it.
