Thursday, 30 August 2012

How to Expand & Rotate Image Using JQUERY



In this article, we will create an expanding image by using slider and also rotate that image by JQUERY.



So, Let's get started:


The HTML

<div id="container">
<div id="slider">
</div>
<br />
<div id="images">
<img id="img" alt="" class="img_main" src="Images/1.jpg" />
<img id="img1" alt="" class="img" src="Images/2.jpg" />
<img id="img7" alt="" class="img" src="Images/3.jpg" />
<img id="img3" alt="" class="img" src="Images/4.jpg" />
<img id="img4" alt="" class="img" src="Images/5.jpg" />
<img id="img5" alt="" class="img" src="Images/6.jpg" />
<img id="img2" alt="" class="img" src="Images/7.jpeg" />
</div>
</div>

Now, Let's look at the style

The CSS

<style type="text/css">
#container
{
padding: 50px;
margin-top: 20px;
}
#images
{
padding: 40px;
}
#images img
{
margin-left: -100px;
background: #e9e9e9;
padding: 10px;
cursor: pointer;
}
#images img:hover
{
background: #333;
}
#slider
{
width: 350px;
}
</style>

The JavaScript

<link href="js/theme/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="js/Jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.7.custom.min.js" type="text/javascript"></script>
<script src="js/Base.js" type="text/javascript"></script>
<script type="text/javascript" src="js/rotate3Di.js"></script>
<script type="text/javascript">
$(function () {
$("#slider").slider({
value: -100,
min: -100,
max: 0,
step: 1,
slide: function (event, ui) {
$(".img").css("margin-left", ui.value + "px");
}
});
$("img").rotate3Di(45);
$('img').click(function () { $(this).rotate3Di('toggle', 1000); });
});
</script>


and That's it. Hope, you enjoyed this article and like it.

Download Files:

JqueryTest

Thursday, 2 August 2012

How to Add Scripts to Header Dynamically in ASP.Net


Dynamically adding controls to header is really pretty straightforward. In order to add JavaScript to a master page’s head section. We can just go ahead and dynamically build some HtmlGenericControls to contain our JavaScript, then inject them.

So here’s the markup for your master page’s head section:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>

Note:- head is set to runat the server. That’s because, if it is not running at the server, we can’t access the master page’s Page.Header property, which we need to be able to access in order to directly add our script tags to the page.

Now,You then just add the following code to the page’s Page_Load event handler:

string strJScript = string.Empty;
strJScript = @"<script type='text/javascript'>
......// Add your script code //.......................
</script>";
LiteralControl jsScript = new LiteralControl(strJScript);
Page.Header.Controls.Add(jsScript);


That's it! Javascript, CSS files, Meta Tags and anything else can be inserted to the header dynamically!!