Pages

Ads 468x60px

For New Update Use this Link http://dotnethubs.blogspot.in/ Offer for you

.

Showing posts with label Jquery. Show all posts
Showing posts with label Jquery. Show all posts

Sunday 13 April 2014

jQuery Menu

jQuery Menu
Categories :- Drop down menu using jquery,JQuery Mneu,JQuery Restrict to Allow Only Numbers in Textbox in Asp.net

Introduction :-  In this article i am explain how i can design header using jquery in asp.net.

Description :-  In my previous article i have explained  how we can create  jquery lightbox in asp.net .Now i have explained how we can make a stylish menu using jquery in asp.net as shown below.

Friday 4 April 2014

Jquery Menu Animation in Asp.net

c# .net interview question answers
Categories :-What is JQuery  , Different between Jquery and javascript , JQuery get user ip address , Jquery example using asp.net

Introduction :- In this article i am explained how to create a animated menu in asp.net. This is very nice and easy article for design a animation in menu.

Thursday 20 March 2014

jquery lightbox in asp.net

jquery lightbox in asp.net
In this article i am explained  how we can implement the jQuery lightbox in our site.This is very easy to implement follow the instruction below step by step 

 jQuery scripts used in your projects. Simple show(), hide() will make this ready to use jQuery Lightbox. It’s simple and free download and easy to integrate in your projects. Below code will explain you how to make this simple jquery lightbox.

Friday 26 April 2013

create simple drop down menu using jquery

create simple drop down menu using jquery
Introduction : -

While creating menus, the most preferred method is to use some sort of lists which will ease in standardization of the thing. This way styling with CSS become more easier and powerful. For a complete reference of how lists work check this link for reference.

You can see a demo of resultant menu here


Tuesday 16 April 2013

simple Menu using Jquery Beginners Tutorial

simple Menu using Jquery Beginners Tutorial in html from
This  article is to teach how to create drop down menu  in html.I am not going to design a
graphical pull down menu.  Instead I am trying to reveal the basic construction of pull down
menu.

  When creating menus using jquery only the hiding and pop up of menu is handled by jquery. The
actual layout is created using  css. Creating drop down menus in css means align a <ul> and
it's child <ul> using css,because the pull down menu is constructed using a <ul>.So code for
creating menu in html includes css and jquery.

You can see a demo of resultant menu here
Code is Here



<html>
<head>

<style type="text/css">

*{    margin: 0;
    padding: 0}
    #menu{
        z-index:5;
    }
a{
text-decoration:none;
}
    #menu li
    {    float: left;
        list-style: none;
   
        }

    #menu li a
    {    display: block;
        }



        #menu li ul
        {
            position: absolute;
            display: none;

            }

        #menu li ul li
        {    float: none;
            display: inline
            }

</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu > li").mouseenter(function(){
$(this).find('ul').css('display', 'inline');
});

$("#menu > li").mouseleave(function(){
$(this).find('ul').css('display', 'none');
});
});
</script>
</head>


<body>
<ul id="menu">
<li><a>Menu1</a>
<ul>
<li><a href="http://www.facebook.com">Facebook</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://newprograminglogics.blogspot.com">My Blog</a></li>
</ul>
</li>
<li>
<a href="#">Menu2</a>
<ul>
<li><a href="http://www.gmail.com">GMail</a></li>
<li><a href="http://www.twitter.com">Twitter</a></li>
</ul>
</li>
</ul><br>

</body>
</html>


Code description
                      The pull down menu is actually a  <ul>  that is unordered list. Here in the <body>
section I have placed a <ul>   with id="menu".    As seen in the demo above in this page,
here have two menus namely Menu1 and Menu2.

      This Menu1 and Menu2 are  links(<a>) placed in  <li> of <ul> with id="menu".  Besides this link
there have another <ul> in each <li>.  The  menu items are placed in the <li> of this child <ul>.

        This <ul> without applying  css  is displayed just like a list.   But using some simple css
commands we can convert it into a menu form.

*{    margin: 0;
    padding: 0}
This code is for remove margin and padding from all elements.



#menu{
        z-index:5;
    }

Is used to place the menu above all elements in page.   




a{
text-decoration:none;
}
Is use to remove the under line from links.



In the code segment :-
#menu li
    {    float: left;
        list-style: none;
   
        }
       
        float : left   place the li of ul side by side.In default it is from top to bottom,  that is vertically.       
        list-style: none removes the dots (.) from the front of each item.
       
       
       
        #menu li a
    {    display: block;
        }
       
        Is for display each item as a block.

       
       
        #menu li ul
        {
            position: absolute;
            display: none;

            }
            Here position: absolute is for place the menu items exactly  below  menu heading
            irrespect  of other elements in the page.
            display: none is for hide this contents initially.The menu items will be displayed only
            after mouse entered in menu heading.
           
           
       
        #menu li ul li
        {    float: none;
            display: inline
            }
           
            Here float: none is for remove the float to left property of child <ul>'s <li>, which is
            set in #menu li   by{    float: left}


Because here that does not require because the menu items should be displayed in  vertical manner.
display: inline set the menu items vertically.
   
   
   
                The alignment of menu is over.Now we go through the jquery  section which displays and hide
    the menu items.
   
    $("#menu > li").mouseenter(function(){
$(this).find('ul').css('display', 'inline');
});

      This code will display the child ul,that is our menu items.The parent <ul>s <li>s
mouseenter event is defined with setting child <ul>'s display property to inline.Note
that this is set to display:none initially in the css section.$(this).find(ul)
will get the child element.  .css() is a jquery library function used to change css
property of certain elements.
   
     One more thing  remain is  that we need to hide the menu item again when mouse   is come out from the menu items.        That is done by this code
     
$("#menu > li").mouseleave(function(){
$(this).find('ul').css('display', 'none');
});
});
     This is just like above code. mouseleave   event is used to detect the disappearence of mouse
pointer.      $(this).find('ul')    will give the child <ul> then display : none is used
to hide the menu items.

Download sample code attached






create simple drop down menu using jquery

Saturday 16 March 2013

jquery and javascript


What is jQuery ?

jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto: Write less, do more.
jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
jQuery is a JavaScript toolkit designed to simplify various tasks by writing less code. Here is the list of important core features supported by jQuery:
  • DOM manipulation: The jQuery made it easy to select DOM elements, traverse them and modifying their content by using cross-browser open source selector engine called Sizzle.
  • Event handling: The jQuery offers an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.
  • AJAX Support: The jQuery helps you a lot to develop a responsive and feature-rich site using AJAX technology.
  • Animations: The jQuery comes with plenty of built-in animation effects which you can use in your websites.
  • Lightweight: The jQuery is very lightweight library - about 19KB in size ( Minified and gzipped ).
  • Cross Browser Support: The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+
  • Latest Technology: The jQuery supports CSS3 selectors and basic XPath syntax.

Wednesday 13 March 2013

difference-between-java-script-and-jquery

difference-between java script and jquery
Categories - Jquery Basic
 

jquery in asp.net

jquery in asp.net

What is jQuery?

jQuery is a fast, lightweight JavaScript library that is CSS3 compliant and supports many browsers. The jQuery framework is extensible and very nicely handles DOM manipulations, CSS, AJAX, Events and Animations.

What is the difference between JavaScript and jQuery?

JavaScript is a language whereas jQuery is a library written using JavaScript. More Difference Click Here 

Advantages of using JQuery in web application?

1. It Improve the performance of the web application
2. It is light weight
3. Its language independent - It can be use with many different language, eg: Asp.Net, PHP, HTML, JSP,etc
4. It is browser compatible - Runs in most browser.
5. It is easy to learn - it uses javascript syntax.
6. You can do complex UI functionality with few lines of code.
7. You can implement ajax within your web application.  It can be used to avoid round trip (avoid page post back) yet able to perform database operation.
8. It is open source library, which is also officially integrated in visual studio 2010.
9. You will find lot of JQuery functionality shared other developers, which helps you to avoid in reinventing the wheel.
And much more...

1) How to use JQuery in Asp.net Web Application? 

Creating your first Hello World application in JQuery

Step 1: Open Visual Studio

Step 2: Create a new web application project (Web site...)

Step 3: Open master page of your web application.
Put this line of code, above </head>
<script type="text/javascript" language="Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Above line adds JQuery library reference to your web application, in simple terms with above line you web application understands JQuery syntax and work accordingly.

Step 4: Put following line of code in you content page inside <asp:Content>.  Below line will display "Hello World" alert when page loads.
<script language="javascript" type="text/javascript">
        $(document).ready(function () {
            alert("Hello World");             
        });
    </script>

Understanding  $(document).ready(function ()

If you want an JQuery event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

$(document) - means page on which JQuery code lies.
.ready() - means page is loaded and your JQuery code is ready to be executed.

And for that reason you may find that most of JQuery code lies within

<script language="javascript" type="text/javascript">
        $(document).ready(function () {

         JQUERY CODE GOES HERE

});
</script>



So finally you will be able to display alert on page load in your asp.net web application with JQuery.



May be this question might comes to your mind, I can show "Hello World" alert without using JQuery then what is fun of using JQuery?
Well its too early to judge, since this article is for beginners i have explained with simple example there is lot more coming.

Where can I download jQuery?

You can Directlly download the jquery from this link
If you are using visual stdio 2010 then you will not required fro download any type of  jquery
because in scripts folder all jquery is available  .
Most Probably we use only  jquery-1.4.1.js  this jquery library

2)  Simple Example for using a jquery


Open Visual Studio 2010 > File > New > Website > Choose ‘ASP.NET website ' from the templates > Choose your language (C# or VB) > Enter the location > Ok.
if scripts folder not available then perform this task
In the Solution Explorer,right click your project > New Folder > rename the folder as ‘Scripts’. Right click the Scripts folder > Add Existing Item > Browse to the path where you downloaded the jQuery library (jquery-1.4.1.js) and the intellisense documentation (jquery-1.4.1-vsdoc.js) > Select the files and click Add. The structure will look similar to the following:

Now drag and drop the jquery file from the Solution Explorer on to your page to create a reference as shown below
Note: Since you have applied the hotfix, you do not have to manually add a reference to the jquery-1.4.1.js file in your page. Once the reference to the runtime library has been added, Visual Studio automatically searches for the ‘vsdoc’ file and loads it. You just need to keep both the runtime library and the documentation file next to each other.
To test intellisense, add a < script > block and key in ‘$(‘. You will get an intellisense similar to the one shown below:

examples

Example 1 – Display an alert on asp:Button click using jQuery Add a Button element to the page as shown below:
 <asp:Button ID="Button1" runat="server" Text="Button" />
Drag and drop a button control on the form
Now in order to tell the browser to perform some action using jQuery as soon as the document is ready or loaded, use this block:
<script type="text/javascript">
        $(document).ready(function() {
        // add code here
        });
    </script> 
Add your code in the function block
    <script type="text/javascript">
        $(document).ready(function() {
        $("#Button1").click(function() {
            alert("Hello How Are You");
        });
        });
    </script>
Ouptup 

jquery basics

jquery basics
Abstract: This article is a guide for getting started with jQuery using ASP.NET and Visual Studio 2008/2010. The article also shows you how to use Visual Studio intellisense feature to develop jQuery and ASP.NET applications. 
Jquery is an awesome javascipt library, it’s help you for developing dazing web projects.
In this tutorial I want to discuss very basic level jquery and working with Click() event.

How to add jQuery to your website

Installing
You can download jquery.js file form jquery.com.

<script type="text/javascript" src="jquery.js"></script>
OR
Recommended
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js
"></script>

Jquery Code
Generally used script run this when the HTML is all ready.  Live Demo
<script type="text/javascript">
$(document).ready(function()
{
alert('Welcome dotnetnukes Jquery Basic Series');
});
</script>

Similar as previous script. Take a look at Live Demo
<script type="text/javascript">
$(function()
{
alert('Welcome dotnetnukes Jquery Basic Series');
});
</script>

Run this when the whole page has been downloaded. Take a look at Live Demo
<script type="text/javascript">
$(window).load(function()
{
alert('Loaded Whole Page including images)');
});
</script>



jQuery Stucture
Here $ = jquery, selector is a DOM element and function execute a jquery fuction.
$(selector).function(parameters);

DOM - Document Object Model Wiki

Selectors

-> Select DOM elements eg: $('h1') ,$('div'), $('li')..
-> Select ID : $('#id_name')
-> Select Class : $('.class_name')

Working with Click() Event
Structure $(selector).click(). Take a look at Live Demo
<script type="text/javascript">
$(function()
{

$('#button_action').click(function()
{
alert('Hey Button');
});

$('.link_action').click(function()
{
alert('Hey Link');
});

});
</script>
<body>
<include type='button' value='BUTTON' id='button_action'/>
<a href='#' class='link_action'>LINK</a>
</body>

Hide and Show With Click Event
Hiding and Showing the div tag. Take a look at Live Demo
<script type="text/javascript">
$(function()
{

$('.hide_box').click(function()
{
$('#box').hide();
});

$('.show_box').click(function()
{
$('#box').show();
});

});
</script>
<body>
<a href="#" class="hide_box">HIDE</a>
<a href="#" class="show_box">SHOW</a>
<div id="box"></div>
</body>

Monday 11 March 2013

jQuery Get Number of Facebook likes, Shares, Comments using asp.net

jQuery Get Number of Facebook likes, Shares, Comments using asp.net

jQuery Get Number of Facebook likes, Shares, Comments using asp.net



Introduction

Here I will explain how to get number of
facebook likes count for url, get number of facebook shares count for url, get number of facebook comments count for url and number of facebook click count for url or website using json jQuery in asp.net using C# and VB.NET.
Description:
  
Now I will explain how to get number facebook likes for url, number of facebook shares count, number of facebook comments count and number of facebook clicks count for url using json jQuery in asp.net.

To implement this functionality we need to write the code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Get facebook shares, comments, likes count of urls</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btnurl').click(function() {
var url = $('#txturl').val();
document.getElementById('tbDetails').style.display = 'block';
$.ajax({
type: "POST",
url: "WebService.asmx/BindDatatable",
data: "{urltxt:'" + url + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
for (var i = 0; i < data.d.length; i++) {
$("#tbDetails").append("<tr><td>" + data.d[i].Url + "</td><td>" + data.d[i].SharedCount + "</td><td>" + data.d[i].LikeCount + "</td><td>" + data.d[i].CommentCount + "</td><td>" + data.d[i].ClickCount + "</td><td>" + data.d[i].TotalCount + "</td></tr>");
}
},
error: function(result) {
alert("Error");
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td><b>Enter Url:</b></td>
<td><input type="text" id="txturl" /> </td>
</tr>
<tr>
<td></td>
<td><input type="button" id="btnurl" value="Get Url Count" /> </td>
</tr>
</table>
</div>
<div>
<table id="tbDetails" cellpadding="1" cellspacing="1" style="border:solid 1px #000000; display:none">
<thead style="background-color:#DC5807; color:White; font-weight:bold">
<tr>
<td>URL</td>
<td>Shared Count</td>
<td>Likes Count</td>
<td>Comments Count</td>
<td>Clicks Count</td>
<td>Total Count</td>
</tr>
</thead>
</table>
</div>
</form>
</body>
</html>
If you observe above code in header section I mentioned url field as “WebService.asmx/BindDatatable” this mean we are calling BindDatatable method from WebService.asmx webservice.
To creat this webservice right click on your application >> Select Add New Item >> select Web Service >> click OK
Once webservice created open code behind file and write the following code
C# Code
using System.Collections.Generic;
using System.Data;
using System.IO;
using System.Net;
using System.Web.Services;
/// <summary>
/// Summary description for AutoCompleteService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
[WebMethod]
public UrlDetails[] BindDatatable(string urltxt)
{
List<UrlDetails> details = new List<UrlDetails>();
WebClient web = new WebClient();
string url = string.Format("https://api.facebook.com/method/fql.query?query=SELECT url, share_count, like_count, comment_count, total_count, click_count FROM link_stat where url='" + urltxt + "'");
string response = web.DownloadString(url);
DataSet ds = new DataSet();
using (StringReader stringReader = new StringReader(response))
{
ds=new DataSet();
ds.ReadXml(stringReader);
}
DataTable dt = ds.Tables["link_stat"];
foreach (DataRow dtrow in dt.Rows)
{
UrlDetails website = new UrlDetails();
website.Url = dtrow["url"].ToString();
website.LikeCount = dtrow["like_count"].ToString();
website.SharedCount = dtrow["share_count"].ToString();
website.CommentCount = dtrow["comment_count"].ToString();
website.ClickCount = dtrow["click_count"].ToString();
website.TotalCount = dtrow["total_count"].ToString();
details.Add(website);
}
return details.ToArray();
}
public class UrlDetails
{
public string Url { get; set; }
public string SharedCount { get; set; }
public string LikeCount { get; set; }
public string CommentCount { get; set; }
public string ClickCount { get; set; }
public string TotalCount { get; set; }
}
}
VB.NET Code:
Imports System.Collections.Generic
Imports System.Data
Imports System.IO
Imports System.Net
Imports System.Web.Services
''' <summary>
''' Summary description for AutoCompleteService
''' </summary>
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<WebService([Namespace]:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<System.Web.Script.Services.ScriptService()> _
Public Class WebService2
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function BindDatatable(ByVal urltxt As String) As UrlDetails()
Dim details As New List(Of UrlDetails)()
Dim web As New WebClient()
Dim url As String = String.Format("https://api.facebook.com/method/fql.query?query=SELECT url, share_count, like_count, comment_count, total_count, click_count FROM link_stat where url='" & urltxt & "'")
Dim response As String = web.DownloadString(url)
Dim ds As New DataSet()
Using stringReader As New StringReader(response)
ds = New DataSet()
ds.ReadXml(stringReader)
End Using
Dim dt As DataTable = ds.Tables("link_stat")
For Each dtrow As DataRow In dt.Rows
Dim website As New UrlDetails()
website.Url = dtrow("url").ToString()
website.LikeCount = dtrow("like_count").ToString()
website.SharedCount = dtrow("share_count").ToString()
website.CommentCount = dtrow("comment_count").ToString()
website.ClickCount = dtrow("click_count").ToString()
website.TotalCount = dtrow("total_count").ToString()
details.Add(website)
Next
Return details.ToArray()
End Function
Public Class UrlDetails
Public Property Url() As String
Get
Return m_Url
End Get
Set(ByVal value As String)
m_Url = value
End Set
End Property
Private m_Url As String
Public Property SharedCount() As String
Get
Return m_SharedCount
End Get
Set(ByVal value As String)
m_SharedCount = value
End Set
End Property
Private m_SharedCount As String
Public Property LikeCount() As String
Get
Return m_LikeCount
End Get
Set(ByVal value As String)
m_LikeCount = value
End Set
End Property
Private m_LikeCount As String
Public Property CommentCount() As String
Get
Return m_CommentCount
End Get
Set(ByVal value As String)
m_CommentCount = value
End Set
End Property
Private m_CommentCount As String
Public Property ClickCount() As String
Get
Return m_ClickCount
End Get
Set(ByVal value As String)
m_ClickCount = value
End Set
End Property
Private m_ClickCount As String
Public Property TotalCount() As String
Get
Return m_TotalCount
End Get
Set(ByVal value As String)
m_TotalCount = value
End Set
End Property
Private m_TotalCount As String
End Class
End Class
Demo



In case if you want to use this to count of multiple urls you need to replace url in webservice like as shown below

Download sample code attached


 

..




New Updates

Related Posts Plugin for WordPress, Blogger...

Related Result