DotNet-Jitendra(Asp.Net, C#, Sql Server, Linq, Ajax, Javascript, jQuery, Xml, MVC)

Sunday, 27 October 2013

jQuery stylish dropdown menu example like Facebook,Linkedin in asp.net

In this article i will explain how to create stylish drop down menu like Facebook,Twitter and Linked in etc using jQuery and CSS in asp.net.

Designer Source Page

<style>

body {

}

.dropdown

{

color: #555;

margin: 3px -22px 0 0;

width: 143px;

position: relative;

height: 17px;

text-align:left;

}

.submenu

{

background: #fff;

position: absolute;

top: -12px;

left: -20px;

z-index: 100;

width: 135px;

display: none;

margin-left: 10px;

padding: 40px 0 5px;

border-radius: 6px;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);

}

.dropdown li a

{

color: #555555;

display: block;

font-family: Georgia;

padding: 6px 15px;

cursor: pointer;

text-decoration:none;

}

.dropdown li a:hover

{

background:#3B5998;

color: #FFFFFF;

text-decoration: none;

}

a.mainmenu

{

font-size: 14px;

line-height: 16px;

color: #555;

position: absolute;

z-index: 110;

display: block;

padding: 11px 0 0 20px;

height: 28px;

width: 121px;

margin: -11px 0 0 -10px;

text-decoration: none;

background: url(icons/arrow.png) 116px 17px no-repeat;

cursor:pointer;

}

.menuitems

{

list-style:none;

margin:0px;

padding:0px;

font-size: 11px;

padding: 11px 0 0 0px;

border-top:1px solid #dedede;

}

.icon{

color: #0099FF;

}

.toggle-login

{

display: inline-block;

*display: inline;

*zoom: 1;

height: 25px;

line-height: 25px;

font-weight: bold;

padding: 0 8px;

text-decoration: none;

text-shadow: 0 1px 0 #fff;

}

</style>

<%--Toggles the icon ▼--%>

$(document).ready(function () {

$('.toggle-login').click(function () {

$(this).next('#login-content').slideToggle();

$(this).toggleClass('active');

if ($(this).hasClass('active')) $(this).find('span').html('▲')

else $(this).find('span').html('▼')

})

});

</script>

<%--Handling Menu and items--%>

$(document).ready(function () {

$(".mainmenu").click(function () {

var X = $(this).attr('id');

if (X == 1) {

$(".submenu").hide();

$(this).attr('id', '0');

}

else {

$(".submenu").show();

$(this).attr('id', '1');

}

});

//Mouse click on sub menus

$(".submenu").mouseup(function () {

return false

});

//Mouse click on my account link

$(".mainmenu").mouseup(function () {

return false

});

//On Document Click

$(document).mouseup(function () {

$(".submenu").hide();

$(".mainmenu").attr('id', '');

});

</script>

</head>

<body>

<div>

<legend>jQuery Dropdown</legend>

<a class="mainmenu toggle-login">My Account <span class="icon">▼</span></a>

<li ><a href="#">Account setting</a></li>

<li ><a href="#">Privacy setting</a></li>

<li ><a href="#">Logout</a></li>

</ul>

</div>

</fieldset>

</div>

</form>

</body>

</html>

Friday, 25 October 2013

String contains multiple values

Here I explain, string contain multiple values

Designer Source Code

<title>c# example - string contains multiple values</title>

</head>

<body>

<div>

c# example - string contains multiple values

</h2>

<asp:Label

ID="Label1"

runat="server"

Font-Size="Large"

</asp:Label>

<asp:Button ID="Button1" runat="server" Text="string contains multiple values"

OnClick="Button1_Click"

Height="40"

Font-Bold="true"

</div>

</form>

</body>

</html>

C# Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class string_contains_multiple_values : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void Button1_Click(object sender, System.EventArgs e)

{

//this section create string variables.

string stringVal = "this is a sample string without number";

string stringWithNumber = "this is a sample 3 string 7 with number 5";

Label1.Text = "string..................<br />";

Label1.Text += "stringVal: " + stringVal;

Label1.Text += "<br />stringWithNumber: " + stringWithNumber;

//this line check string contains any digit/numeric value/number.

Boolean result = stringVal.Any(char.IsDigit);

//this line check string contains any digit/numeric value/number.

Boolean result2 = stringWithNumber.Any(char.IsDigit);

Label1.Text += "<br /><br />stringVal contains any number (digit, numeric value)?.........";

Label1.Text += result.ToString();

Label1.Text += "<br /><br />stringWithNumber contains any number (digit, numeric value)?...........";

Label1.Text += result2.ToString();

}

Thursday, 24 October 2013

jQuery Show Hidden Content on MouseOver on Top of Element

Here I will explain how to show hide content on mouseover using jQuery content hover plugin or Show hidden content on top of element when mouse hovers over it using jQuery content hover plugin in

Designer Source Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

<head>

<title>jQuery ContentHover Plugin Examples</title>

$(function () {

$('#d1').contenthover({

overlay_background: '#000',

overlay_opacity: 0.8

});

$('#d2').contenthover({

effect: 'slide',

slide_speed: 300,

overlay_background: '#000',

overlay_opacity: 0.8

});

$('#d3').contenthover({

overlay_width: 270,

overlay_height: 180,

effect: 'slide',

slide_direction: 'right',

overlay_x_position: 'right',

overlay_y_position: 'center',

overlay_background: '#000',

overlay_opacity: 0.8

});

$('#d4').contenthover({

hover_class: 'mybackground'

});

})

</script>

body{ font-family:Verdana; font-size:10pt}

.mybackground { background:url(Images/transparent_bg.png); }

.contenthover { padding:20px 20px 10px 20px; }

.contenthover, .contenthover h3, contenthover a { color:#fff; }

.contenthover h3, .contenthover p { margin:0 0 10px 0; line-height:1.4em; padding:0; }

.contenthover a.mybutton { display:block; float:left; padding:5px 10px; background:#3c9632; color:#fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }

.contenthover a.mybutton:hover { background:#34742d }

</style>

</head>

<body>

<table>

<tr>

<td>

<h3>jitendragangwar007.blogspot.in</h3>

<p>It offers many articles relating to Asp.net, C#, SQL Server, AJAX, XML, JavaScript, JQuery, Gridview articles.</p>

<p><a href="#" class="mybutton">Lorem ipsum</a></p>

</div>

</td>

<td>

<h3>jitendragangwar007.blogspot.in</h3>

<p>It offers many articles relating to Asp.net, C#, SQL Server, AJAX, XML, JavaScript, JQuery, Gridview articles.</p>

<p><a href="#" class="mybutton">Lorem ipsum</a></p>

</div>

</td>

</tr>

<tr>

<td>

<h3>jitendragangwar007.blogspot.in</h3>

<p>It offers many articles relating to Asp.net, C#, SQL Server, jQuery, JavaScript, XML, html, css. </p>

<p><a href="#" class="mybutton">Lorem ipsum</a></p>

</div>

</td>

<td>

<h3>jitendragangwar007.blogspot.in</h3>

<p>It offers many articles relating to Asp.net, C#, SQL Server, AJAX, XML, JavaScript, JQuery, Gridview articles.</p>

<p><a href="#" class="mybutton">Lorem ipsum</a></p>

</div>

</td>

</tr>

</table>

</form>

</body>

</html>

Download Source Code