Extract Internal and External CSS into a string using Javascript
While looking to generate HTML to PDF, i came across how to create PDF exactly as HTML using its stylesheet.
After working out for nearly 4 hrs I found something from Stackoverflow which extract inline and external css beautifully.
limitation: Right now this function extracts from current page...I need a dynamic rul where defining the url we can create PDF according to the stytle-sheet... Code is given below..
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ExtractStyleSheet.aspx.cs" Inherits="Common_UserControls_Lab_HtmltoPDF_ExtractStyleSheet" %>
<!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>
<link href="../../../_assets/css/addressbook.css" rel="stylesheet" type="text/css" />
<link href="../../../_assets/css/CleanForm.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.grid
{
font-family:Arial;
font-size:12px;
width:800px;
}
/* gridview styles */
.grid .gridview
{
width:100%;
border:solid 2px #5E8CC6;
empty-cells:show;
border-top-width:1px;
}
</style>
<script type="text/javascript" >
function getStyles() {
if (!document.styleSheets) return false; // return false if browser sucks
var rules = new Array();
for (var i = 0; i < document.styleSheets.length; i++) {
var x = 0;
styleSheet = document.styleSheets[i];
if (styleSheet.cssText) { // if this is IE, get the rules directly
rules.push(styleSheet.cssText);
} else {
// otherwise get them individually
do {
cssRule = styleSheet.cssRules[x];
if (cssRule) rules.push(cssRule.cssText);
x++;
} while (cssRule);
}
}
var compositeCSS = '';
debugger;
for (i = 0; i < rules.length ; i++) {
compositeCSS += rules[i];
}
return compositeCSS;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" OnClientClick="getStyles()" Text="Button" />
</div>
</form>
</body>
</html>
Simple Asp.net -Google map by address without Geocode
Simple Asp.net -Google map by address without Geocode using Jquery
Using google map in Asp.net is not a new stuff to rise your eye brow.
But yes a simple way of coding, understandable code and dynamic google map will definetly attract attention of a developer.
Here we go...
Parent page (any page, html or aspx)
Let us assume we have an anchor, which will have href directed to a google map page ,
so we better send address by query string. like below
<a href="javascript: window.open('http://localhost/Test/common/usercontrols/Generalmap.aspx?address=Banagalore,INDIA&id=4','Window1','menubar=no,width=550,height=550,toolbar=no');" title="pageSlide Demo">Click for a pageSlide demo.</a>
where address=Banagalore,INDIA is a dynamic address.
on clicking this anchor it will open a pop-up screen. so in our pop-up screen we must have..
1. a Jquery ref script
2. Google map api reference.... For this we need google api key.
For localhost you can use the same api key which i have used.
for other domain you can get api key here :
Now back to code, on ready func() we need to read the querystring (address).
Follow this code you will understand.
<div id="map" style="width:550px;height:550px;"></div>
<script src="../Scripts/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAIKI1RJamIEvP7_Du5ZGi6xS4M_PhMYp3D1A5cqeLLIOnkUYWYhS8jdwSdUjZxBwswqHipWYzfju7fA"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var originaladdress = null; // global variable to store address
qs();
var qsParm = new Array();
function qs() {
var query = window.location.search.substring(1);
var parms = query.split('&');
for (var i = 0; i < parms.length; i++) {
var pos = parms[i].indexOf('=');
if (pos > 0) {
var key = parms[i].substring(0, pos);
var val = parms[i].substring(pos + 1);
if (key == 'address') { // fill only the adddress
originaladdress = val;
}
}
}
}
var geocoder;
var map;
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(34, 0), 1);
geocoder = new GClientGeocoder();
var location = originaladdress; //$("#location").val();
var address = location;
geocoder.getLocations(address, addAddressToMap);
// addAddressToMap() is called when the geocoder returns an
// answer. It adds a marker to the map with an open info window
// showing the nicely formatted version of the address and the country code.
function addAddressToMap(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("Sorry, we were unable to geocode that address");
}
else {
place = response.Placemark[0]; // marking a label on the address.
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker((point), 8);
map.addOverlay(marker);
marker.openInfoWindowHtml(place.address);
// optional for zooming purpose
ne = new GLatLng(place.Point.coordinates[1] + 0.05, place.Point.coordinates[0] + 0.05); // zooming the location
bound = new GLatLngBounds(point, ne);
map.setZoom(map.getBoundsZoomLevel(bound));
map.panTo(bound.getCenter());
}
}
return false;
});
</script>
Thats it, you got ur simple google map in your Asp.net application.
Happy coding