Showing posts with label java script. Show all posts
Showing posts with label java script. Show all posts

Friday 26 July 2013

Get label value, Hidden field value using java script / jquery

var lat = document.getElementById("<%= hflat.ClientID %>").value;

           alert(lat);



            var mytit = document.getElementById("<%= lbltitle.ClientID %>").innerHTML;

           alert(mytit);

Friday 5 July 2013

add multple locations in google map using asp.net c#.net/ vb.net

here shows multiple locations adding in google map using java script / jquery in Asp.net, c#.net, vb.net

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    var markers = [
    <asp:Repeater ID="rptMarkers" runat="server">
    <ItemTemplate>
             {
                "title": '<%# Eval("title") %>',
                "lat": '<%# Eval("lat") %>',
                "lng": '<%# Eval("lng") %>',
                "description": '<b><%# Eval("title") %></b> <br><%# Eval("address") %>'
            }
    </ItemTemplate>
    <SeparatorTemplate>
        ,
    </SeparatorTemplate>
    </asp:Repeater>
    ];
    </script>

 <script type="text/javascript">

        window.onload = function () {
            Dataload();
        }
        function Dataload() {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 13,
                disableDefaultUI: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
                });
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent(data.description);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
            }
        }
    </script>


Gridview row hover alert rowindex

on hover Gridview row, show row index as alert message

write onmouseover on rowdatabound

protected void mygridview_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowIndex != -1)
{
e.Row.Attributes["onmouseover"] = "showContents('" + (e.Row.RowIndex + 1) + "')";
}

}

 <script type="text/javascript">
        function showContents(rowIndex) {

            var gv = <%= mygridview.ClientID %>;
            var rowElement = gv.rows[rowIndex];
            var title = rowElement.cells[0].innerHTML;
            alert(rowIndex + ',' + title);

}

Friday 21 June 2013

string split using jquery / java script

var a = "one,two,three".split(",") // Delimiter is a string
for (var i = 0; i < a.length; i++)
{
alert(a[i])
}

var b = "1+2=3".split(/[+=]/) // Delimiter is a regular expression
for (var i = 0; i < b.length; i++)
{
alert(b[i])
}

Friday 15 February 2013

Highlight Asp.net Gridview Rows on MouseOver in jQuery


<script type="text/javascript">
$(document).ready(function() {
$('#gvrecords tr:has(td)').mouseover(function() {
$(this).addClass('highlightRow');
});
$('#gvrecords tr').mouseout(function() {
$(this).removeClass('highlightRow');
})
})
</script>

<style type="text/css">
.highlightRow
{
background-color:#FFCC00;
text-decoration:underline;
cursor:pointer;
}
</style>

$('#gvrecords tr:has(td)').mouseover(function() {
By using this we are identifying row tr with td and applying css style for gridview. Instead of this we can write the code like this
$('#gvrecords tr').mouseover(function() {
But above code will apply css style for gridview header also for that reason we written above code to identity and apply css style for row tr with td

Monday 11 February 2013

Random Color Generator in JavaScript



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Generate Random Colors using javascript</title>
<script type="text/javascript">
// Run function for every second of timer
setInterval(rgbcolors, 1000);
function rgbcolors() {
// rgb string generation
var col = "rgb("
+ Math.floor(Math.random() * 255) + ","
+ Math.floor(Math.random() * 255) + ","
+ Math.floor(Math.random() * 255) + ")";
//change the text color with the new random color
document.getElementById("divstyle").style.color = col;
}
</script>
</head>s
<body>
<form id="form1" runat="server" >
<div id="divstyle" style="font:bold 24px verdana">http://dotnetdatastuff.blogspot.in/</div>
</form>
</body>
</html>

Monday 4 February 2013

jQuery Get Current Page URL

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Get Curent Page Url using jQuery in Asp.net</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
var url = $(location).attr('href');
var title= $(this).attr('title');
$('#spn_title').html('<strong>' + title + '</strong>');
$('#spn_url').html('<strong>' + url + '</strong>');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>Current page URL: <span id="spn_url"></span>.</p>
<p>Current page title: <span id="spn_title"></span>.</p>
</div>
</form>
</body>
</html>

Tuesday 22 January 2013

Difference between JavaScript and jQuery



S.No
JavaScript
jQuery
1
Meaning:

JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari.
Meaning:

JQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
2
Composed of:

JavaScript is a combination of ECMA Script and Document Object Model (DOM).
Composed of:

jQuery has Document Object Model (DOM).
3
Web-based application creation:

JavaScript has many processes in creating web based applications.

Example:
Two JavaScript function to change the background color with the onload function that would need to placed into the body tag

function changeBackground(color) {
document.body.style.background = color;
}
onload="changeBackground('red');"

Note:
If we use this unstructured code then there is many problems to validate the html source of web page. So JQuery is best to use and easy to understand.
Web-based application creation:

Creating a web based application using jQuery becomes easier.

Example:
One JQuery changing the background color of a body tag

$('body').css('background', '#ccc');

This is the clean code JQuery provides.
4
Animation Creation:

Animations are not possible using JavaScript.
Animation Creation:

Animations can be easily created using jQuery.

Monday 29 October 2012

Disable browser back button functionality using JavaScript in asp.net




<script type="text/javascript" language="javascript">
function DisableBackButton() {
window.history.forward()
}
DisableBackButton();
window.onload = DisableBackButton;
window.onpageshow = function(evt) { if (evt.persisted) DisableBackButton() }
window.onunload = function() { void (0) }
</script>

Convert SVG to PNG using svg.dll

      <div id="divsvg">        <svg width="350" height="300"><defs></defs> ............