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:


<div id="container">
<div id="slider">
<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" />

Now, Let's look at the style


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

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 () {
value: -100,
min: -100,
max: 0,
step: 1,
slide: function (event, ui) {
$(".img").css("margin-left", ui.value + "px");
$('img').click(function () { $(this).rotate3Di('toggle', 1000); });

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

Download Files:


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" "">

<html xmlns="">
<head runat="server">

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 //.......................
LiteralControl jsScript = new LiteralControl(strJScript);

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