To view the Demo Click here
Installing :
First, you'll need to import the script after importing jQuery. You'll need to place this between the <head> and </head> section of your HTML page.
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jslickmenu.js"></script>
Right after importing the Javascript files, you'll need to import the CSS for jSlickmenu. This needs to be placed in the head-section too.
<link rel="stylesheet" type="text/css" href="css/slickmenu.css"/>
Now, the menu HTML needs to be as follows:
<div id="menu">
<ul>
<li><a href="[LINK]">
<img src="[IMG]" alt="[TITLE]" />
</a></li>
<!-- more menu items -->
</ul>
</div>
The id from the surrounding division can be of your choice, as long as you follow it up with an ul. The unorded list contains list items, which contains links and the images. Note The alt attribute of the image will be used as title when the user hovers the image.When that's all set, you can execute the following JavaScript statement to enable the plugin on the just created menu:
$("#menu").jSlickmenu();
That's it! Your menu should be fully capable of showing some amazing effects.
Options :
You want to change some of the slick default effects? Of course you can! Make sure you check out the advanced demonstration too. You can change the following settings:
* speed - Any of the jQuery speed values. Speed for the animation when hovering.
* fadeopacity - Any of the jQuery opacity values. Opacity of the siblings when hovering.
* infomargin - Integer. Margin (in px) for the infobox to appear above the image.
* leftmargin - Integer. Margin (in px) for the menu items seperated from each other.
* css3rotate - Boolean. Whether the menu items should be rotated using CSS3.
* css3shadow - String. The CSS3 box-shadow property.
* css3borderradius - Integer. The size of the border radius property.
* borderneutral - Integer. Width of the border size in px when the user is not hovering.
* borderhover - Integer. Width of the border size in px when the user is hovering.
Here's an example of how the jSlickmenu can be changed with options:
$("#menu").jSlickmenu({
speed : 100,
fadeopacity : 0.1,
infomargin : 15,
leftmargin : 150,
css3rotate : false,
css3shadow : '#999 5px 10px 10px',
css3borderradius : 3,
borderneutral : 5,
borderhover : 20
});
To view the Demo Click here
Thursday, March 25, 2010
Stunning Sliding Door Effect with jQuery
To view the Demo Click here
HTML :
<div class="qitem">
<a href="http://www.google.com"><img src="1.gif" alt="Test 1" title="" width="126" height="126"/></a>
<span class="caption"><h4>Night Club</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</div>
CSS :
body {
font-family:arial;
}
.qitem {
/* width and height must be even number */
width:126px;
height:126px;
/* some styling for the item */
border:4px solid #222;
margin:5px 5px 5px 0;
background: url('bg.gif') no-repeat;
/* make sure the four divs are hidden after changing the position */
overflow:hidden;
/* absolute position enabled for children elements*/
position:relative;
/* display item in single row */
float:left;
/* hand symbol for ie and other browser */
cursor:hand; cursor:pointer;
}
.qitem img {
border:0;
}
/* styling for caption, position absolute is a must to set the z-index */
.qitem .caption {
position:absolute;
z-index:0;
color:#ccc;
display:block;
}
.qitem .caption h4 {
font-size:12px;
padding:10px 5px 0 8px;
margin:0;
color:#369ead;
}
.qitem .caption p {
font-size:10px;
padding:3px 5px 0 8px;
margin:0;
}
/* Generic setting for corners */
.topLeft, .topRight, .bottomLeft, .bottomRight {
/* allow javascript to move the corners */
position:absolute;
background-repeat: no-repeat;
z-index:200;
}
/* set the background position for different corners */
.topLeft {
background-position: top left;
}
.topRight {
background-position: top right;
}
.bottomLeft {
background-position: bottom left;
}
.bottomRight {
background-position: bottom right;
}
.clear {
clear:both;
}
JAVASCRIPT :
$(document).ready(function() {
//Custom settings
var style_in = 'easeOutBounce';
var style_out = 'jswing';
var speed_in = 1000;
var speed_out = 300;
//Calculation for corners
var neg = Math.round($('.qitem').width() / 2) * (-1);
var pos = neg * (-1);
var out = pos * 2;
$('.qitem').each(function () {
//grab the anchor and image path
url = $(this).find('a').attr('href');
img = $(this).find('img').attr('src');
//remove the image
$('img', this).remove();
//append four corners/divs into it
$(this).append('');
//set the background image to all the corners
$(this).children('div').css('background-image','url('+ img + ')');
//set the position of corners
$(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos});
$(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos});
$(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos});
$(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos});
}).hover(function () {
//animate the position
$(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out});
$(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});
$(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});
$(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out});
},
function () {
//put corners back to the original position
$(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});
$(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});
$(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});
$(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});
}).click (function () {
//go to the url
window.location = $(this).find('a').attr('href');
});
});
To view the Demo Click here
HTML :
<div class="qitem">
<a href="http://www.google.com"><img src="1.gif" alt="Test 1" title="" width="126" height="126"/></a>
<span class="caption"><h4>Night Club</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</div>
CSS :
body {
font-family:arial;
}
.qitem {
/* width and height must be even number */
width:126px;
height:126px;
/* some styling for the item */
border:4px solid #222;
margin:5px 5px 5px 0;
background: url('bg.gif') no-repeat;
/* make sure the four divs are hidden after changing the position */
overflow:hidden;
/* absolute position enabled for children elements*/
position:relative;
/* display item in single row */
float:left;
/* hand symbol for ie and other browser */
cursor:hand; cursor:pointer;
}
.qitem img {
border:0;
}
/* styling for caption, position absolute is a must to set the z-index */
.qitem .caption {
position:absolute;
z-index:0;
color:#ccc;
display:block;
}
.qitem .caption h4 {
font-size:12px;
padding:10px 5px 0 8px;
margin:0;
color:#369ead;
}
.qitem .caption p {
font-size:10px;
padding:3px 5px 0 8px;
margin:0;
}
/* Generic setting for corners */
.topLeft, .topRight, .bottomLeft, .bottomRight {
/* allow javascript to move the corners */
position:absolute;
background-repeat: no-repeat;
z-index:200;
}
/* set the background position for different corners */
.topLeft {
background-position: top left;
}
.topRight {
background-position: top right;
}
.bottomLeft {
background-position: bottom left;
}
.bottomRight {
background-position: bottom right;
}
.clear {
clear:both;
}
JAVASCRIPT :
$(document).ready(function() {
//Custom settings
var style_in = 'easeOutBounce';
var style_out = 'jswing';
var speed_in = 1000;
var speed_out = 300;
//Calculation for corners
var neg = Math.round($('.qitem').width() / 2) * (-1);
var pos = neg * (-1);
var out = pos * 2;
$('.qitem').each(function () {
//grab the anchor and image path
url = $(this).find('a').attr('href');
img = $(this).find('img').attr('src');
//remove the image
$('img', this).remove();
//append four corners/divs into it
$(this).append('');
//set the background image to all the corners
$(this).children('div').css('background-image','url('+ img + ')');
//set the position of corners
$(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos});
$(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos});
$(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos});
$(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos});
}).hover(function () {
//animate the position
$(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out});
$(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});
$(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});
$(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out});
},
function () {
//put corners back to the original position
$(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});
$(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});
$(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});
$(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});
}).click (function () {
//go to the url
window.location = $(this).find('a').attr('href');
});
});
To view the Demo Click here
Saturday, March 20, 2010
Javascript Vertical Scroll Bar For Asp.net
The Script :
<script type="text/javascript">
var delayb4scroll = 2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed = 1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit = 1 //Pause marquee onMousever (0=no. 1=yes)?
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed = marqueespeed
var pausespeed = (pauseit == 0) ? copyspeed : 0
var actualheight = ''
function scrollmarquee() {
if (parseInt(cross_marquee.style.top) > (actualheight * (-1) + 8)) //if scroller hasn't reached the end of its height
cross_marquee.style.top = parseInt(cross_marquee.style.top) - copyspeed + "px" //move scroller upwards
else //else, reset to original position
cross_marquee.style.top = parseInt(marqueeheight) + 8 + "px"
}
function initializemarquee() {
cross_marquee = document.getElementById("vmarquee")
cross_marquee.style.top = 0
marqueeheight = document.getElementById("marqueecontainer").offsetHeight
actualheight = cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
if (window.opera || navigator.userAgent.indexOf("Netscape/7") != -1) { //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height = marqueeheight + "px"
cross_marquee.style.overflow = "scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload = initializemarquee
</script>
The Css:
<style type="text/css">
#marqueecontainer
{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color: white;
overflow: hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}
</style>
The HTML :
<body>
<form id="form1" runat="server">
<div id="marqueecontainer" onmouseover="copyspeed=pausespeed" onmouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">
<!--YOUR SCROLL CONTENT HERE-->
</div>
</div>
</form>
</body>
<script type="text/javascript">
var delayb4scroll = 2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed = 1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit = 1 //Pause marquee onMousever (0=no. 1=yes)?
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed = marqueespeed
var pausespeed = (pauseit == 0) ? copyspeed : 0
var actualheight = ''
function scrollmarquee() {
if (parseInt(cross_marquee.style.top) > (actualheight * (-1) + 8)) //if scroller hasn't reached the end of its height
cross_marquee.style.top = parseInt(cross_marquee.style.top) - copyspeed + "px" //move scroller upwards
else //else, reset to original position
cross_marquee.style.top = parseInt(marqueeheight) + 8 + "px"
}
function initializemarquee() {
cross_marquee = document.getElementById("vmarquee")
cross_marquee.style.top = 0
marqueeheight = document.getElementById("marqueecontainer").offsetHeight
actualheight = cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
if (window.opera || navigator.userAgent.indexOf("Netscape/7") != -1) { //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height = marqueeheight + "px"
cross_marquee.style.overflow = "scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload = initializemarquee
</script>
The Css:
<style type="text/css">
#marqueecontainer
{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color: white;
overflow: hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}
</style>
The HTML :
<body>
<form id="form1" runat="server">
<div id="marqueecontainer" onmouseover="copyspeed=pausespeed" onmouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">
<!--YOUR SCROLL CONTENT HERE-->
</div>
</div>
</form>
</body>
Friday, March 19, 2010
IIS (Internet Information Service) 7 Features
· ASP.NET and PHP Support
· Modular and Extensible Web Server
· Integrated Media Platform
· Centralized Web Farm Management
· Delegated Remote Management
· Powerful Admin Tools
· Scalable Web Infrastructure
· Dynamic Caching and Compression
· Rich Diagnostic Tools
· Enhanced Server Protection
· Secure Content Publishing
· Access Protection
Tuesday, March 9, 2010
Web standards and why should we use them?
>> What is the W3C?
The World Wide Web Consortium (W3C) is an international industry consortium dedicated to "leading the Web to its full potential". It's led by Tim Berners-Lee, the inventor of the Web. Founded in 1994, the W3C has more than 330 member organizations - including Microsoft, America Online (parent company of Netscape Communications), Apple Computer, Adobe, Macromedia, Sun Microsystems, and a variety of other hardware and software manufacturers, content providers, academic institutions, and telecommunications companies. The Consortium is hosted by three universities - MIT in the US, INRIA in Europe, and Keio University in Japan.
>> What does it do?
The W3C develops open specifications (de facto standards) to enhance the interoperability of Web-related products. W3C Recommendations are developed by working groups consisting of Consortium members and invited experts. Working groups obtain general consensus from companies and other organizations involved in creating applications for the Web, and create Working Drafts and Proposed Recommendations. These are then submitted to the W3C membership and director, for formal approval as W3C Recommendations. More information regarding this process and the review stages can be obtained from the W3C Web site.
>> What are the W3C standards?
1. HTML 4.0 - HyperText Markup Language
HyperText Markup Language (HTML) is widely used on the Web for adding structure to text documents. Browsers interpret these documents, representing the structure in media-specific ways to the user. For example, visual browsers typically display the
strong element (With the help of Cascading Style Sheets (CSS) the author may define how structural elements are to be represented, overriding the browser defaults.
2. XML 1.0 - Extensible Markup Language
Extensible Markup Language (XML) is a markup language like HTML, but instead of having a single, fixed set of elements, it allows you to define your own - or use a set made by someone else. It even allows using multiple sets within a single document - by using XML namespaces.
Some applications of XML, such as XHTML and MathML, have already become W3C Recommendations. Others are currently W3C Working Drafts.
Style sheet standards, such as CSS and (in the future) XSL, can be used to specify how XML elements are to be rendered. CSS and XSL both allow you to specify different styles for different media, so that you can have separate sets of styles for visual, voice, braille and other media.
XML is more flexible than HTML, primarily because of the ability to add your own elements and make your own structural systems. This makes it an ideal format for the organization of large quantities of data - it is already in use in many databases and search engines.
3. CSS - Cascading Style Sheets
Cascading Style Sheets (CSS) is a mechanism for changing the appearance of HTML or XML elements, by assigning styles to element types, self-defined classes of elements or individual instances.
Stylesheets can be used to consistently define the appearance of an entire site. Following the introduction of CSS, the W3C recommended that layout-specific features in HTML be phased out and replaced by stylesheets, creating a simpler and more structural World Wide Web.
4. DOM 1 - Document Object Model Level 1
The DOM allows the full power and interactivity of a scripting language (such as ECMAScript, the standardized version of JavaScript) to be exerted on a Web page. (In programming terms, the Document Object Model (DOM) Level 1 is an Application Programming Interface (API) for interacting with Web pages.) It gives the scripting language easy access to the structure, content, and presentation of a document which is written in such languages as HTML and CSS.
The DOM is compatible with future improvements in technology; it will allow any scripting language to interact with whatever languages are being used in the document. This standard will not only make it easier to program dynamic HTML, but will also make adapting to future Internet technology much less painful.
5. Emerging Standards
The W3C is constantly at work on creating new standards; the most important of these right now are are XHTML and XSL. XHTML, Extensible Hypertext Markup Language, is a reformulation of HTML 4.0 in XML; XSL, the Extensible Stylesheet Language, is a language for transforming and displaying XML documents, using an XML vocabulary.
Because use of Web standards makes it easier for server-side as well as client-side software to understand the structure of your document, adding a search engine to your own site becomes easier and gives better results.
Standards are written so that old browsers will still understand the basic structure of your documents. Even if they can't understand the newest and coolest additions to the standards, they'll be able to display the content of your site. The same, of course, applies to robots - systems that collect information from your site on behalf of search engines and other indexers.
Compliant code gives you the opportunity of validating your page with a validation service.Validation process your documents and present you with a list of errors. This makes finding and correcting errors a lot easier, and can save you a lot of time.
Compliant documents can easily be converted to other formats, such as databases or Word documents. This allows for more versatile use of the information within documents on the World Wide Web, and simplified migration to new systems - hardware as well as software - including devices such as TVs and PD-As.
As the variety of Web access methods increases, adjusting or duplicating Web sites to satisfy all needs will become increasingly difficult (indeed, some say it's impossible even today). Following standards is a major step towards solving this problem. Making your sites standards-compliant will help ensure not only that traditional browsers, old and new, will all be able to present sites properly, but also that they will work with unusual browsers and media.
Some consequences of ignoring standards are obvious: the most basic consequence is that you will restrict access to your site. How much business sense does it make to limit your audience to only a fraction of those who wish be a part of it? For a business site, denying access to even small portions of a target audience can make a big difference to your profit margin. For an educational site, it makes sense to allow access not only to affluent, able-bodied school-children with graphical browsers, but also to children in Third-World countries who only have text-based browsers access, or disabled students using specialized browsers.
The same principle applies to all types of Web site - while straying from the standards and taking advantage of browser-specific features may be tempting, the increased accessibility which comes from standards-compliance will lead to far greater rewards in the long run.
>> Advantages of W3C standards?
1. For software/machines
Complying with Web standards can give your Web pages greater visibility in Web searches. The structural information present in compliant documents makes it easy for search engines to access and evaluate the information in those documents, and they get indexed more accurately.Because use of Web standards makes it easier for server-side as well as client-side software to understand the structure of your document, adding a search engine to your own site becomes easier and gives better results.
Standards are written so that old browsers will still understand the basic structure of your documents. Even if they can't understand the newest and coolest additions to the standards, they'll be able to display the content of your site. The same, of course, applies to robots - systems that collect information from your site on behalf of search engines and other indexers.
Compliant code gives you the opportunity of validating your page with a validation service.Validation process your documents and present you with a list of errors. This makes finding and correcting errors a lot easier, and can save you a lot of time.
Compliant documents can easily be converted to other formats, such as databases or Word documents. This allows for more versatile use of the information within documents on the World Wide Web, and simplified migration to new systems - hardware as well as software - including devices such as TVs and PD-As.
2. For Users
Accessibility is an important idea behind many Web standards, especially HTML.Not only does this mean allowing the Web to be used by people with disabilities, but also allowing Web pages to be understood by people using browsers other than the usual ones - including voice browsers that read Web pages aloud to people with sight impairments, Braille browsers that translate text into Braille, hand-held browsers with very little monitor space, teletext displays, and other unusual output devices.As the variety of Web access methods increases, adjusting or duplicating Web sites to satisfy all needs will become increasingly difficult (indeed, some say it's impossible even today). Following standards is a major step towards solving this problem. Making your sites standards-compliant will help ensure not only that traditional browsers, old and new, will all be able to present sites properly, but also that they will work with unusual browsers and media.
Some consequences of ignoring standards are obvious: the most basic consequence is that you will restrict access to your site. How much business sense does it make to limit your audience to only a fraction of those who wish be a part of it? For a business site, denying access to even small portions of a target audience can make a big difference to your profit margin. For an educational site, it makes sense to allow access not only to affluent, able-bodied school-children with graphical browsers, but also to children in Third-World countries who only have text-based browsers access, or disabled students using specialized browsers.
The same principle applies to all types of Web site - while straying from the standards and taking advantage of browser-specific features may be tempting, the increased accessibility which comes from standards-compliance will lead to far greater rewards in the long run.
Monday, March 8, 2010
JQuery Magnifier
Installation :
Add first the last jQuery release, then the jQZoom script(don't forget this),the correct order is important.Look at the installation code below.
<script type='text/javascript' src='js/jquery-1.2.6.js'></script>
<script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'></script>
Add jqzoom.css to your header.
<link rel="stylesheet" type="text/css" href="css/jqzoom.css" />
How To Use :
Using jQZoom is easy,but you need to specify the HTML anchor element,that is going to generate the zoom revealing a portion of the enlarged image.
<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE">
<img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE" >
</a>
The anchor element wraps the small image you would like to zoom.Following this schema the necessary and base elements are:
SMALLIMAGE.JPG: Represents the small image you would like to zoom.
BIGIMAGE.JPG: Represents the big image that jQZoom will reveal.
MYCLASS: Represents the anchor class,that would be used to instantiate the jQZoom script to all the elements matching this class(you can use an ID as well).
MYTITLE/IMAGE TITLE: Anchor title and/or image title that will be used to show the zoom title close to the jQZoom Window.
Now load the plugin at window load.
$(document).ready(function(){
$('.MYCLASS).jqzoom();
});
This would instantiate jQzoom in default(standard) mode.You can pass more options(Documentation section),to create special or custom effects as in the example below.
$(document).ready(function(){
var options = {
zoomWidth: 300,
zoomHeight: 250,
xOffset: 10,
yOffset: 0,
position: "right" //and MORE OPTIONS
};
$('.MYCLASS).jqzoom(options);
});
Add first the last jQuery release, then the jQZoom script(don't forget this),the correct order is important.Look at the installation code below.
<script type='text/javascript' src='js/jquery-1.2.6.js'></script>
<script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'></script>
Add jqzoom.css to your header.
<link rel="stylesheet" type="text/css" href="css/jqzoom.css" />
How To Use :
Using jQZoom is easy,but you need to specify the HTML anchor element,that is going to generate the zoom revealing a portion of the enlarged image.
<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE">
<img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE" >
</a>
The anchor element wraps the small image you would like to zoom.Following this schema the necessary and base elements are:
SMALLIMAGE.JPG: Represents the small image you would like to zoom.
BIGIMAGE.JPG: Represents the big image that jQZoom will reveal.
MYCLASS: Represents the anchor class,that would be used to instantiate the jQZoom script to all the elements matching this class(you can use an ID as well).
MYTITLE/IMAGE TITLE: Anchor title and/or image title that will be used to show the zoom title close to the jQZoom Window.
Now load the plugin at window load.
$(document).ready(function(){
$('.MYCLASS).jqzoom();
});
This would instantiate jQzoom in default(standard) mode.You can pass more options(Documentation section),to create special or custom effects as in the example below.
$(document).ready(function(){
var options = {
zoomWidth: 300,
zoomHeight: 250,
xOffset: 10,
yOffset: 0,
position: "right" //and MORE OPTIONS
};
$('.MYCLASS).jqzoom(options);
});
Multiple sitemaps in one masterpage in Asp.net
<siteMap defaultProvider="MainMapProvider" enabled="true" >
<providers>
<clear /> <!-- get rid of the inherited standard provider -->
<add name="MainMapProvider" description="The Main Map"
type="System.Web.XmlSiteMapProvider"
siteMapFile="mainmap.sitemap" />
<add name="FooterMapProvider" description="The Main Map"
type="System.Web.XmlSiteMapProvider"
siteMapFile="footer.sitemap" />
</siteMap>
<providers>
<clear /> <!-- get rid of the inherited standard provider -->
<add name="MainMapProvider" description="The Main Map"
type="System.Web.XmlSiteMapProvider"
siteMapFile="mainmap.sitemap" />
<add name="FooterMapProvider" description="The Main Map"
type="System.Web.XmlSiteMapProvider"
siteMapFile="footer.sitemap" />
</siteMap>
Visitor's Browser Type, IP address and more in ASP
Here is a small code that can help you getting the ip address, browser type, request type and many more things..
You are browsing this site with:
<% Response.Write(Request.ServerVariables("http_user_agent"))%>
Your IP address is:
<%Response.Write(Request.ServerVariables("remote_addr"))%>
The DNS lookup of the IP address is:
<%Response.Write(Request.ServerVariables("remote_host"))%>
Local IP address is:
<%Response.Write(Request.ServerVariables("local_addr"))%>
The method used to call the page:
<%Response.Write(Request.ServerVariables("request_method"))%>
The server's domain name:
<%Response.Write(Request.ServerVariables("server_name"))%>
The server's port:
<%Response.Write(Request.ServerVariables("server_port"))%>
The server's software:
<%Response.Write(Request.ServerVariables("server_software"))%>
You are browsing this site with:
<% Response.Write(Request.ServerVariables("http_user_agent"))%>
Your IP address is:
<%Response.Write(Request.ServerVariables("remote_addr"))%>
The DNS lookup of the IP address is:
<%Response.Write(Request.ServerVariables("remote_host"))%>
Local IP address is:
<%Response.Write(Request.ServerVariables("local_addr"))%>
The method used to call the page:
<%Response.Write(Request.ServerVariables("request_method"))%>
The server's domain name:
<%Response.Write(Request.ServerVariables("server_name"))%>
The server's port:
<%Response.Write(Request.ServerVariables("server_port"))%>
The server's software:
<%Response.Write(Request.ServerVariables("server_software"))%>
Subscribe to:
Posts (Atom)