I have an app that is attempting to webscrape GHIN.com for golfers' handicaps. After prompting the user with a WKWebView page for login, the user opens the "followed" golfers page in order for the app to scrape the web page for handicap data. I am able to retrieve HTML from the webView using:
webView.evaluateJavaScript("document.documentElement.outerHTML.toString()", completionHandler: { (html: Any?, error: Error?) in
self.HTML = html as! String
print(self.HTML)
})
This code is called whenever the URL is detected to have changed (as the user logs in and navigates to the correct page). However, the HTML saved from that process includes JS code seen near the end of the string that is to be executed during the building of the page (entire HTML):
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<meta name="apple-itunes-app" content="app-id=491796218" />
<meta name="google-play-app" content="app-id=com.advancedmobile.android.ghin" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="/manifest.json" />
<title>GHIN - United States Golf Association Service</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
<link href="/static/css/2.c7bb94bc.chunk.css" rel="stylesheet" />
<link href="/static/css/main.6b12f9df.chunk.css" rel="stylesheet" />
<script async="" src="//www.googletagservices.com/tag/js/gpt.js"></script>
<script src="https://securepubads.g.doubleclick.net/gpt/pubads_impl_2020082401.js?21067294" async=""></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div></div>
<div class="s-navigation" id="header" style="top: 0px;">
<header>
<div class="header__container">
<div class="menu-ham__container">
<button class="menu-ham__trigger"><span></span><span></span><span></span></button>
<div class="menu-ham__content">
<div class="menu__links__wrapper">
<ul class="menu__links">
<li class="hide-on-tablet-and-above">
<a class="menu__link" href="/post-score"><span>Post Score</span></a>
</li>
<li class="hide-on-tablet-and-above">
<a class="menu__link is-active" href="/golfer-lookup" aria-current="page"><span>Golfer Lookup</span></a>
</li>
<li class="hide-on-tablet-and-above">
<a class="menu__link" href="/stats"><span>Stats</span></a>
</li>
<li class="hide-on-tablet-and-above">
<a class="menu__link" href="/handicap-calculator/select-course"><span>Handicap Calculator</span></a>
</li>
<li class="hide-on-tablet-and-above">
<a class="menu__link" href="/profile-handicap-history"><span>Handicap History</span></a>
</li>
<li class="order-1">
<a class="menu__link" href="/my-card"><span>My Card</span></a>
</li>
<li class="order-2">
<a class="menu__link" target="_blank" href="https://www.usga.org/content/usga/home-page/handicapping.html"><span>WHS Changes</span></a>
</li>
<li class="order-3">
<a class="menu__link" href="/ghin-associations"><span>GHIN Associations</span></a>
</li>
<li class="order-4">
<a class="menu__link" href="/about-us"><span>About Ghin</span></a>
</li>
<li class="order-5">
<a class="menu__link" href="/contact-us"><span>Contact Us</span></a>
</li>
<li class="order-6">
<a class="menu__link" target="_blank" href="http://www.usga.org/handicapping/ghin-faqs.html"><span>FAQs</span></a>
</li>
</ul>
<ul class="menu__links hide-on-tablet-and-above">
<li>
<a class="menu__link" href="/?logout"><span>Log Out</span></a>
</li>
</ul>
</div>
</div>
</div>
<span role="button" tabindex="0" class="usga_logo">
golf handicap <br />
information network
</span>
<div class="user-menu__container">
<button class="user-menu__trigger"><span>username</span><i class="material-icons-outlined more">expand_more</i><i class="material-icons-outlined less">expand_less</i></button>
<div class="user-menu__content">
<ul class="menu__links compact">
<li>
<a class="menu__link" href="/?logout"><span>Log Out</span></a>
</li>
</ul>
</div>
</div>
</div>
</header>
<nav class="navigation">
<div class="container">
<ul class="nav__links">
<li><a class="nav__link" href="/post-score">Post Score</a></li>
<li><a class="nav__link is-active" href="/golfer-lookup" aria-current="page">Golfer Lookup</a></li>
<li><a class="nav__link" href="/stats">Stats</a></li>
<li><a class="nav__link" href="/handicap-calculator">Handicap Calculator</a></li>
<li><a class="nav__link" href="/profile-handicap-history">Handicap History</a></li>
</ul>
</div>
</nav>
</div>
<div class="s-navigation-placeholder" style="margin-top: 0px;"></div>
<div class="container has-adds">
<section class="golfer_lookup_section">
<div id="div-gpt-ad-1539376483266-0" class="promo_google_banner"><div style="width: 728px; height: 90px;"></div></div>
<div class="section_header">
<h3>Golfer Lookup</h3>
<ul class="tabs rounded">
<li>Following</li>
<li>My Clubs</li>
<li>All Golfers</li>
</ul>
</div>
<div class="panel">
<div style="display: flex; justify-content: center; align-items: center; padding-top: 30px; padding-bottom: 15px;"><div class="loader"></div></div>
</div>
</section>
</div>
<footer>
<div class="footer__container">
<div class="information__container">
<div class="partners">
<h4 class="partners__title">Usga Partners</h4>
<div class="partners__list">
<a class="partner__item american-express" href="https://global.americanexpress.com/entertainment/home/" target="_blank" rel="noopener noreferrer">
<img alt="logo_american_express" class="partner__logo" src="/img/logos/logo_american_express.png" />
</a>
<a class="partner__item cisco" href="https://www.cisco.com/" target="_blank" rel="noopener noreferrer"><img alt="logo_cisco" class="partner__logo fit-size" src="/img/logos/logo_cisco.svg" /></a>
<a
class="partner__item delloite"
href="https://www2.deloitte.com/us/en/pages/consulting/articles/united-states-golf-association.html?id=us:2pm:3pt:lookagain:awa:cons:060116:usga"
target="_blank"
rel="noopener noreferrer"
>
<img alt="logo_delloite" class="partner__logo fit-size" src="/img/logos/logo_delloite.svg" />
</a>
<a class="partner__item lexus" href="https://www.lexus.com/" target="_blank" rel="noopener noreferrer"><img alt="logo_lexus" class="partner__logo lexus" src="/img/logos/logo_lexus.png" /></a>
<a class="partner__item rolex" href="https://www.rolex.com/world-of-rolex/golf.html" target="_blank" rel="noopener noreferrer">
<img alt="logo_rolex" class="partner__logo" src="/img/logos/logo_rolex.svg" />
</a>
</div>
</div>
<div class="mobile__app">
<h4 class="app__title">Ghin Mobile App</h4>
<div class="app__details">
<span class="app__logo"></span>
<ul class="app__stores">
<li><a class="store app-store" rel="noopener noreferrer" target="_blank" href="https://itunes.apple.com/us/app/ghin-mobile/id491796218?mt=8"> </a></li>
<li><a class="store google-play" rel="noopener noreferrer" target="_blank" href="https://play.google.com/store/apps/details?id=com.advancedmobile.android.ghin&hl=en_US"> </a></li>
</ul>
</div>
</div>
</div>
<ul class="footer__links">
<li><a class="footer__link" href="https://www.usga.org/content/usga/home-page/handicapping.html" target="_blank" rel="noopener noreferrer">WHS CHANGES</a></li>
<li><a class="footer__link" href="http://www.usga.org/handicapping/ghin-faqs.html" target="_blank" rel="noopener noreferrer">FAQs</a></li>
<li><a class="footer__link" href="/contact-us">CONTACT US</a></li>
<li><a class="footer__link" href="https://www.usga.org/content/usga/home-page/Handicap-ghin/ghin-privacy-policy.html" target="_blank" rel="noopener noreferrer">PRIVACY POLICY</a></li>
<li><a class="footer__link" href="https://www.usga.org/content/usga/home-page/Handicap-ghin/ghin-terms-of-service.html" target="_blank" rel="noopener noreferrer">TERMS OF SERVICE</a></li>
</ul>
<div class="copyright__container"><p>© 2020 United States Golf Association. All Rights Reserved.</p></div>
</div>
</footer>
<button id="back-top-button" class="hidden" title="Go to top"></button>
</div>
<script async="" src="https://www.google-analytics.com/analytics.js"></script>
<script>
!(function (e) {
function r(r) {
for (var n, i, l = r[0], f = r[1], a = r[2], c = 0, s = []; c < l.length; c++) (i = l[c]), Object.prototype.hasOwnProperty.call(o, i) && o[i] && s.push(o[i][0]), (o[i] = 0);
for (n in f) Object.prototype.hasOwnProperty.call(f, n) && (e[n] = f[n]);
for (p && p(r); s.length; ) s.shift()();
return u.push.apply(u, a || []), t();
}
function t() {
for (var e, r = 0; r < u.length; r++) {
for (var t = u[r], n = !0, l = 1; l < t.length; l++) {
var f = t[l];
0 !== o[f] && (n = !1);
}
n && (u.splice(r--, 1), (e = i((i.s = t[0]))));
}
return e;
}
var n = {},
o = { 1: 0 },
u = [];
function i(r) {
if (n[r]) return n[r].exports;
var t = (n[r] = { i: r, l: !1, exports: {} });
return e[r].call(t.exports, t, t.exports, i), (t.l = !0), t.exports;
}
(i.m = e),
(i.c = n),
(i.d = function (e, r, t) {
i.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t });
}),
(i.r = function (e) {
"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 });
}),
(i.t = function (e, r) {
if ((1 & r && (e = i(e)), 8 & r)) return e;
if (4 & r && "object" == typeof e && e && e.__esModule) return e;
var t = Object.create(null);
if ((i.r(t), Object.defineProperty(t, "default", { enumerable: !0, value: e }), 2 & r && "string" != typeof e))
for (var n in e)
i.d(
t,
n,
function (r) {
return e[r];
}.bind(null, n)
);
return t;
}),
(i.n = function (e) {
var r =
e && e.__esModule
? function () {
return e.default;
}
: function () {
return e;
};
return i.d(r, "a", r), r;
}),
(i.o = function (e, r) {
return Object.prototype.hasOwnProperty.call(e, r);
}),
(i.p = "/");
var l = (this.webpackJsonpghin = this.webpackJsonpghin || []),
f = l.push.bind(l);
(l.push = r), (l = l.slice());
for (var a = 0; a < l.length; a++) r(l[a]);
var p = f;
t();
})([]);
</script>
<script src="/static/js/2.ee61cc35.chunk.js"></script>
<script src="/static/js/main.7596f1a6.chunk.js"></script>
</body>
I need to access the HTML that is ultimately displayed by the webView (following execution of the JS code?). Is there a term for that specific part of the HTML rendering? I'm looking to pull user data from the page. It is displayed in the app (WKWebView), but is not present in the HTML saved using the above code.
Related
Please exam the snippet in full page mode. The first navbar is fine. I tried to reduce the width of the search input but when I do that I can no longer get the links to move all the way to the right as in the first example. Can someone explain what's controlling the the width of the form and how do I adjust it to achieve the desired result
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title>Bootstrap Sandbox</title>
</head>
<body>
<nav class='navbar navbar-expand-md bg-primary navbar-light mb-3'>
<div class='container'>
<a class='navbar-brand' href="#">NavBar </a>
<button class="navbar-toggler" data-toggle='collapse' data-target='#navbarNav2'>
<span class='navbar-toggler-icon'></span>
</button>
<div id='navbarNav2' class='collapse navbar-collapse '>
<ul class='navbar-nav ml-auto'>
<li class='nav-item'>
<a class='nav-link' href="#">Home</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">About</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">Services</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">Contact</a>
</li>
</ul>
<form class="form-inline justify-content-end ">
<input type="text" class="form-control " placeholder='Search'>
<button class="btn btn-outline-success">Search</button>
</form>
</div>
</div>
</nav>
<nav class='navbar navbar-expand-md bg-primary navbar-light'>
<div class='container'>
<a class='navbar-brand' href="#">NavBar </a>
<button class="navbar-toggler" data-toggle='collapse' data-target='#navbarNav3'>
<span class='navbar-toggler-icon'></span>
</button>
<div id='navbarNav3' class='collapse navbar-collapse '>
<ul class='navbar-nav ml-auto'>
<li class='nav-item'>
<a class='nav-link' href="#">Home</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">About</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">Services</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">Contact</a>
</li>
</ul>
<form class="form-inline justify-content-end ">
<input type="text" class="form-control w-50" placeholder='Search'>
<button class="btn btn-outline-success">Search</button>
</form>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
I think the width of the form is based on the combined width of the search button and the input-element(with its default width).
With w-50, the input's width is reduced to half of the form's width which in-turn is based on the default width of the input element.
So, instead of setting width:50%, if you can set the width to a fixed value like width:8em, you can achieve the expected results.
I am new to TYPO3 and worked through this tutorial: https://docs.typo3.org/m/typo3/tutorial-sitepackage/master/en-us/Index.html. So far everything worked out, except the last step, the content mapping. I'm not quite sure what to post as a diagnostic, the source code looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--
This website is powered by TYPO3 - inspiring people to share!
TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
TYPO3 is copyright 1998-2017 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
Information and contribution at https://typo3.org/
-->
<title>Page 1</title>
<meta name="generator" content="TYPO3 CMS">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" media="all">
<link rel="stylesheet" type="text/css" href="/typo3conf/ext/site_package/Resources/Public/Css/website.css?1600015994" media="all">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link"
href="/index.php?id=8"
target=""
title="Page 1"
>
Page 1
</a>
</li>
<li class="nav-item ">
<a class="nav-link"
href="/index.php?id=9"
target=""
title="Page 2"
>
Page 2
</a>
</li>
<li class="nav-item ">
<a class="nav-link"
href="/index.php?id=10"
target=""
title="Page 3"
>
Page 3
</a>
</li>
</ul>
</div>
</nav>
<main role="main">
<div class="jumbotron">
<div class="container">
<h1 class="display-3">Hello, world!</h1>
<p> ... </p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/typo3conf/ext/site_package/Resources/Public/JavaScript/website.js?1600016007" type="text/javascript"></script>
</body>
</html>
The relevant template code looks like this:
<f:layout name="Default" />
<f:section name="Main">
<main role="main">
<f:render partial="Jumbotron" />
<div class="container">
<div class="row">
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '1'}" />
</div>
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '0'}" />
</div>
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '2'}" />
</div>
</div>
</div>
</main>
</f:section>
And the TypoScript source looks like this:
lib.dynamicContent = COA
lib.dynamicContent {
10 = LOAD_REGISTER
10 {
colPos.cObject = TEXT
colPos.cObject {
field = colPos
ifEmpty.cObject = TEXT
ifEmpty.cObject {
value.current = 1
ifEmpty = 0
}
}
pageUid.cObject = TEXT
pageUid.cObject {
field = pageUid
ifEmpty.data = TSFE:id
}
contentFromPid.cObject = TEXT
contentFromPid.cObject {
data = DB:pages:{register:pageUid}:content_from_pid
data.insertData = 1
}
wrap.cObject = TEXT
wrap.cObject {
field = wrap
}
}
20 = CONTENT
20 {
table = tt_content
select {
includeRecordsWithoutDefaultTranslation = 1
orderBy = sorting
where = {#colPos}={register:colPos}
where.insertData = 1
pidInList.data = register:pageUid
pidInList.override.data = register:contentFromPid
}
stdWrap {
dataWrap = {register:wrap}
required = 1
}
}
30 = RESTORE_REGISTER
}
And it's saved in site_package/Configuration/TypoScript/Helper/DynamicContent.typoscript. The setup.typoscript file has these includes:
#import 'EXT:fluid_styled_content/Configuration/TypoScript/setup.typoscript'
#import 'EXT:site_package/Configuration/TypoScript/Helper/DynamicContent.typoscript'
Any suggestions?
I can't find how you transfer pageUid to the typoscript. So the template should be something like this:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:section name="Main">
<main role="main">
<f:render partial="Jumbotron" />
<div class="container">
<div class="row">
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}',colPos: '1'}" />
</div>
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}',colPos: '0'}" />
</div>
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}',colPos: '2'}" />
</div>
</div>
</div>
</main>
</f:section>
</html>
Please not that, I put pageUid: '{data.uid}' in the data variable
I have a project using leaflet, but I want to do a custom search through GeoJSON data but I don't know how to do it. I have a side panel with search box and button. below is my design:.
<div
id="leaflet_search"
class="leaflet-control-search leaflet-control search-exp"
>
<input
class="search-input"
type="text"
autocapitalize="off"
placeholder="Search..."
id="searchtext10"
style="display: block; max-width: 634px;"
/>
<ul class="search-tooltip" style="display: none;"></ul>
<a class="search-cancel" href="#" title="Cancel" style="display: none;">
<span>⊗</span>
</a>
<a class="search-button" id="search" href="#" title="Search..." style=""></a>
<div class="search-alert" style="display: none;"></div>
</div>
var map = new L.map("myMAP_id", {
fullscreenControl: {
pseudoFullscreen: false,
position: "topright"
}
}).setView([10.392241, 124.98], 16.5);
var layer = new L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
attribution:
'© OpenStreetMap contributors',
visible: false,
title: "OpenStreetMap"
}
);
map.addLayer(layer);
var poly = L.geoJson(slsu_bldg, {
style: function(feature) {
return bldg_style;
},
onEachFeature: function(feature, marker) {
marker.bindPopup(
"<div><b>SOUTHERN LEYTE STATE UNIVERSITY" +
"<br>" +
feature.properties.BLDG_NAME +
"<br><button id='" +
feature.properties.ID +
"' class='btn btn-xs btn-primary' style='height: 23px; font-size: 11px; padding: 3px 6px; letter-spacing: 0.02rem; margin-top: 5px;'>More Details <i class='fa fa-caret-right'></i></button></div"
);
}
});
var search_val;
$("#search").on("click", function() {
search_val = $("#searchtext10").val();
console.log(search_val);
var search = new L.Control.Search({
options: {
layer: poly,
zoom: 19,
initial: false,
filterData: search_val,
propertyName: "BLDG_NAME",
marker: {
icon: true,
animate: true,
circle: {
radius: 10,
weight: 4,
color: "#1BC500",
stroke: true,
fill: true
}
}
}
});
console.log(search);
});
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>SLSU Asset Management</title>
<link rel="shortcut icon" href="http://localhost/GIS-SLSU_AssetMgt/assets/img/slsu.png" />
<!-- offline bootstrap -->
<!-- online bootstrap -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- custom stylesheet -->
<link rel="stylesheet" href="http://localhost/GIS-SLSU_AssetMgt/assets/custom/style.css" />
<!-- leaflet offline connection -->
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.css"
/>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.label/leaflet.label.css"
/>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-search.css"
/>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-sidebar.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.label/leaflet.label.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-src.js">
integrity="sha512-eldJj3obVsCO9Tlrj/J8AFrrTFD4+sN8d9HdwKAqZuSgHloWOm6IzetLy1uQnwh9qLssrY3TAgIJQfjPfQJxHQ=="
crossorigin=""
</script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-sidebar.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-search.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/L.Conttol.Locate.min.js"></script>
<!-- leaflet full screen -->
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.fullscreen.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.fullscreen.min.js"></script>
<!-- online maptiler mapboxGL map -->
<script src="https://cdn.maptiler.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script>
<script src="https://cdn.maptiler.com/mapbox-gl-leaflet/latest/leaflet-mapbox-gl.js"></script>
<link rel="stylesheet" href="https://cdn.maptiler.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" />
<!-- offline maptiler mapboxGL map -->
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/mapbox-gl/mapbox-gl.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/mapbox-gl/leaflet-mapbox-gl.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/mapbox-gl/mapbox-gl.js"></script>
<!-- geojson coder -->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"
/>
<script src="https://unpkg.com/osmtogeojson#2.2.12/osmtogeojson.js"></script>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/osm/OSMBuildings.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/osm/OSMBuildings.js"></script>
</head>
<body>
<!--- navigation bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand image" href="#">
<img
class="img img-responsive"
src="http://localhost/GIS-SLSU_AssetMgt/assets/img/LOGO.png"
alt=""
/>
<!-- SLSU-MC GIS MAP -->
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarColor01"
aria-controls="navbarColor01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/map">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/#">Help</a>
</li>
</ul>
</div>
</nav>
<!---map section -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12 map_wrapper">
<div class="row">
<div class="col-md-4" style="padding-right: 0 !important;">
<div class="left-control">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<a class="leaflet-control-layers-toggle toggle" href="#"></a>
<button
class="btn btn-link"
type="button"
data-toggle="collapse"
data-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
BASE MAPS
</button>
</h2>
</div>
<div
id="collapseOne"
class="collapse show"
aria-labelledby="headingOne"
data-parent="#accordionExample"
>
<div class="card-body">
<div
class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded"
aria-haspopup="true"
>
<section class="leaflet-control-layers-list">
<div class="leaflet-control-layers-base">
<label>
<div>
<input
type="radio"
id="basemaps"
value="OpenStreetMap"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
checked="checked"
/>
<span> Open Street Map</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="Maptiler"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> Maptiler</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="MapBox"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> MapBox</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="Google"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> Google</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="WorldImagery"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> World Imagery</span>
</div>
</label>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<a class="leaflet-control-layers-toggle toggle" href="#"></a>
<button
class="btn btn-link collapsed"
type="button"
data-toggle="collapse"
data-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
LAYER MAPS
</button>
</h2>
</div>
<div
id="collapseTwo"
class="collapse"
aria-labelledby="headingTwo"
data-parent="#accordionExample"
>
<div class="card-body">
<div
class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded"
aria-haspopup="true"
>
<section class="leaflet-control-layers-list">
<div class="leaflet-control-layers-overlays">
<label>
<div>
<input
type="checkbox"
id="vector_layerBuilding"
value="Buildings"
class="leaflet-control-layers-selector"
checked=""
onclick="vector_layerBuilding()"
/>
<span> Buildings</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerRoads"
value="Roads"
class="leaflet-control-layers-selector"
onclick="vector_roads()"
/>
<span> Roads</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerBoundary"
value="Boundary"
class="leaflet-control-layers-selector"
onclick="vector_layerBoundary()"
/>
<span> Boundary</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerTrack"
value="Track/Oval"
class="leaflet-control-layers-selector"
onclick="vector_layerTrack()"
/>
<span> Track/Oval</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerField"
value="Field"
class="leaflet-control-layers-selector"
onclick="vector_layerField()"
/>
<span> Field</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerParking"
value="Parking Lot"
class="leaflet-control-layers-selector"
onclick="vector_layerParking()"
/>
<span> Parking Lot</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerPath"
value="Foot Path"
class="leaflet-control-layers-selector"
onclick="vector_layerPath()"
/>
<span> Foot Path</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerBleacher"
value="Bleacher"
class="leaflet-control-layers-selector"
onclick="vector_layerBleacher()"
/>
<span> Bleacher</span>
</div>
</label>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<div
id="leaflet_search"
class="leaflet-control-search leaflet-control search-exp"
>
<input
class="search-input"
type="text"
autocapitalize="off"
placeholder="Search..."
id="searchtext10"
style="display: block; max-width: 634px;"
/>
<ul class="search-tooltip" style="display: none;"></ul>
<a class="search-cancel" href="#" title="Cancel" style="display: none;">
<span>⊗</span>
</a>
<a class="search-button" id="search" href="#" title="Search..." style=""></a>
<div class="search-alert" style="display: none;"></div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
<div id="myMAP_id"></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info" style="height: 28vh">
<div align="right"><button class="btn btn-default">IMPORT</button></div>
<table class="table table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Building Name</th>
<th>Assets</th>
<th>Counts</th>
<th>Unit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>CCSIT Building</td>
<td>Computer Sets</td>
<td>100</td>
<td>PCS</td>
</tr>
<tr>
<td>2</td>
<td>CCSIT Building</td>
<td>MAC PC</td>
<td>25</td>
<td>PCS</td>
</tr>
<tr>
<td>3</td>
<td>CCSIT Building</td>
<td>Mga Gwapo</td>
<td>Gamay Ra Me!</td>
<td>Way Labot Jorton (by: Ranel)</td>
</tr>
<tr>
<td>4</td>
<td>CCSIT Building</td>
<td>Mga Panget</td>
<td>Gamay Ra Sila!</td>
<td>Labot Si Jorton (by: Ranel)</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<p>
<a href="https://leafletjs.com/" target="_blank">Leaflet ©</a
> | Developed by: darksidebug_09
</p>
</div>
</div>
</div>
<!--- scripts here -->
<!--- geojson data -->
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/new_bldg_data.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/slsu_boundary.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/road_network.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/track_oval.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/slsu_field.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/parking_lot.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/foot_path.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/bleacher.geojson"></script>
<!--- script -->
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/data_scripts.js"></script>
<!-- Bootstrap core JavaScript and JQuery-->
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/js/jquery.min.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
I am using HTML2CANVAS to capture Div as Image and save to database.
Its working fine with images of 1-2 kb and text.
but unable to capture multiple and large images suppose 200-300 kb.
Please help help me out if anyone has face this issue and has solution.
Here is my Code:
<div id="target">
<page size="A4">
<div id="wrapper" >
<div id="header">
<div class="text">
<span id="rent">This Space for rent/price</span>
<h1 id="propAdd">THIS SPACE FOR PROPERTY ADDRESS</h1>
<h1 id="Data">THIS SPACE FOR DATA</h1>
</div>
</div>
<h1 id="ad">
This Space For advert heading</h1>
<div id="content">
<div class="main">
<div id="dvPreview2">
<img src="images/main-image.jpg" width="550" height="355" />
</div>
<h1 id="DES">This Space for Property Description or FEATURES</h1>
<ul>
<li id="DES1">4 Bedrooms, 3 Bathrooms</li>
<li id="DES2">Ensuite has double shower & double vanity</li>
<li id="DES3">Massive open plan living with cathedral ceilings</li>
<li id="DES4">Resort-style pool deck area</li>
<li id="DES5">Gourmet kitchen with butlers pantry</li>
<li id="DES6">Fully ducted air-con</li>
<li id="DES7">Triple lock-up garage with remote</li>
<li id="DES8">Outside pets considered on application</li>
</ul>
</div>
<div class="sidebar">
<div id="dvPreview3">
<img src="images/sidebar-image-01.png" width="159" height="100" />
</div>
<div id="dvPreview4">
<img src="images/sidebar-image-02.png" width="159" height="100" />
</div>
<div id="dvPreview5">
<img src="images/sidebar-image-03.png" width="159" height="100" />
</div>
<p id="dvPreview1" >
<img src="images/agent-logo.png" style="width:80px;" /></p>
<p style="margin-top:0 !important;">
Phone: <span id="phone">+49 30 47373795</span><br />
E-mail: <span id="mail">Ject41#cuvox.de</span><br />
<span id="web">www.abc.in</span>
</p>
</div>
<div class="clear"></div>
<div class="slid-img">
<div id="dvPreview6" >
<img src="images/image-01.jpg" width="159" height="100" />
</div>
<div id="dvPreview7" >
<img src="images/image-02.jpg" width="159" height="100" />
</div>
<div id="dvPreview8" >
<img src="images/main-image.jpg" width="159" height="100" />
</div>
<div id="dvPreview9" >
<img src="images/sidebar-image-01.png" width="159" height="100" style="float:right; margin:0" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="affiliation-logo">
<ul>
<li><div id="dvPreview10" style="width:32px;"><img src="images/facebook-icon.png" width="32" /></div></li>
<li><div id="dvPreview11" style="width:32px;"><img src="images/twitter-icon.png" width="32" /></div></li>
<li><div id="dvPreview12" style="width:32px;"><img src="images/linkedin-icon.png" width="32" /></div></li>
<li><div id="dvPreview13" style="width:32px;"><img src="images/youtube-icon.png" width="32" /></div></li>
<li><div id="dvPreview14" style="width:32px;"><img src="images/google-plus-icon.png" width="32" /></div></li>
</ul>
</div>
<div class="clear"></div>
<div id="footer">
<div class="agent-section">
<%-- <div class="agent-name"></div>--%>
<span class="agent-name" style="float:left"> Disclaimer : </span>
<div id="DIS" style="max-width:550px; float:left; margin-left:10px; line-height:18px; font-size:14px;"></div>
</div>
<div class="clear"></div>
</div>
</div>
</page>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#add_button').click(function () {
html2canvas($('#target'), {
onrendered: function (canvas) {
var img = canvas.toDataURL()
img = img.replace('data:image/png;base64,', '');
//alert(img);
//window.open(img);
$.ajax({
type: 'POST',
url: 'Design1.aspx/UploadImage',
data: '{ "imageData" : "' + img + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
//alert('Image saved successfully !');
}
});
}
});
});
});
</script>
In file Html2Canvas.js on line 65
Change following line from
/* Highest positive signed 32-bit float value /
/maxInt = 2147483647, // aka. 0x7FFFFFFF or 2^31-1
to as Below
maxInt = Number.MAX_VALUE,
trick.
set your tag with and height is double of the output image size.
We have a ASP.Net application that we use for SmartPhone devices. One of the screens has a section that is visible in a desktop browser but not on a smartphone browser(Iphone Safari browser). I have marked the section and
Would we know why?Any pointers would be welcome.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!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><meta content="yes" name="apple-mobile-web-app-capable" /><meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /><meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" /><link href="styles/StyleSheet.css" rel="stylesheet" type="text/css" /><title>
Floor Plan Details
</title>
<script type="application/x-javascript">
if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<script type="text/javascript">
function ColapseDetails() {
var elem2 = document.getElementById('divButton');
var details = document.getElementById('divDetails');
elem2.className = 'Show';
details.style.display = 'none';
}
function ExpandDetails() {
var elem2 = document.getElementById('divButton');
var details = document.getElementById('divDetails');
elem2.className = 'Hide';
details.style.display = 'block';
}
</script>
<style type="text/css">
a, .hdrGreen, .TxtAccent2, .itemList ul li
{
color: #b5985a;
}
#HeaderBar, #ftrCopyright
{
background-color: #f8cb30 !important;
}
#FtrNav, #HdrNav, .Separate, .SeparateSR, .smSeparate, .Button
{
background-color: #0068b3 !important;
}
a:hover, .hdrBlue, .TxtAccent1
{
color: #0068b3;
}
.Links a, .contents a
{
color: #b5985a !important;
}
.TitleLink
{
color: #0068b3 !important;
}
.PropGalThumb, .LargePhoto, .PhotoFrame
{
border-color: #f8cb30 !important;
}
</style>
<link href="/WebResource.axd?d=rYllaDxVV86L8uK7fm716DHtvUx7jEZl07Ni1bAwaCFyy83QnKp58MjumhwHTm3k5DeaG8uKyMP-a7NwOtgW5HQ2pq4UHdVEXH7SniWIwg9RO4oFHQ9Ox82H1rrwkiQS3YslSA2&t=634487606568630000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" /><link href="/WebResource.axd?d=t9YDm8fMtH0CC5asMtMI4fYQLHf0MgrFPIjAybzYl__rRvUM4FsPvrIk2Je7ADAX9h_Y7xc4-kfkfmXrbForHb-JW0HpLzZPt9DexdRer9z0PQom39lb0-brKgkmrYByRaOt9nXhQsatKXhpIL2qfjQhGT81&t=634487606568630000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" /><link href="/WebResource.axd?d=HnZfSQ00Unw9sodb1ZENEb8OCaQNYLMOL7UEoEroy1WahkY5iq6Kb-y9ve7XIVzS9OaCT9LmBYi7u4NjAWkkpgeFHkBbBszYstomcGDOiKzlHBwMuZmZNFVDxXkoO5fUAN-Z_w2&t=634487606568630000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" /></head>
<body>
<form name="aspnetForm" method="post" action="FloorPlanDetails.aspx" id="aspnetForm">
<div>
<input type="hidden" name="ctl00_RadScriptManager1_TSM" id="ctl00_RadScriptManager1_TSM" value="" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPaA8FDzhjZTRiODM4M2EyMzRhNhgBBR5fX0NvbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WAgUdY3RsMDAkY3BoQ29udGVudCR0c0Zsb29ycGxhbnMFHmN0bDAwJGNwaENvbnRlbnQkbXB2Rmxvb3JwbGFuc9fXJq/1CrDWuJv8X3Ex07QdyIjs" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=UvkWM5HwgcL8L6uzzv8ClbaUMj56sSlOI0ToE3UrzfY6Jb13eC2SwwgMrrnYyKCI9Eh_8mDefDtQl4hVuuGtgtYRDWo1&t=634515435604257574" type="text/javascript"></script>
<script src="/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d3.5.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3afec40ae8-2c1f-4db6-96ca-d6c61af2dc7f%3aea597d4b%3ab25378d2%3bTelerik.Web.UI%2c+Version%3d2010.3.1109.20%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3a0b207b76-976c-4925-ba92-57c3001b0b77%3a16e4e7cd%3af7645509%3a24ee1bba%3ae330518b%3a1e771326%3a8e6f0d33%3a6a6d718d" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$RadScriptManager1', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>
<div id="HeaderBar">
<div id="ctl00_Header1_Phlogo" class="Phlogo">
<img id="ctl00_Header1_imgLogo" src="http://crossfiremedia.realpage.com/palisadesatjaguarcity/logos/lg1029_h50.png" alt="Logo" style="border-width:0px;" />
</div>
</div>
<div id="HdrNav">
<a id="ctl00_Header1_hlApartmentSearch" class="item" href="Default.aspx">Property website</a>
<a id="ctl00_Header1_hlResidentLogin" class="item" href="https://property.onesite.realpage.com/mobile/login.aspx?w=palisadesatjaguarcity">Resident Login</a>
</div>
<div class="hdrGrad">
</div>
<div id="content">
<script type="text/javascript">
function showdetails() {
if (document.getElementById) {
var elemlbl = document.getElementById('divButton');
if (elemlbl.className == 'Hide') {
ColapseDetails();
}
else if (elemlbl.className == 'Show') {
ExpandDetails();
}
}
}
</script>
<ul class="pageitem">
<li class="PropInfo Details">
<span id="ctl00_cphContent_PropDetailHeader_lblPropName" class="hdrBlue" style="font-size:12pt;font-weight:bold;">The Palisades at Jaguar City</span>
</li>
<li class="Details">
<div style="float: left;">
<span id="ctl00_cphContent_PropDetailHeader_lblPhone" class="hdrGreen" style="font-size:12pt;font-weight:bold;">(866) 936-5544 (Phone)</span>
</div>
</li>
</ul>
<!--Not visible:Start-->
<ul class="pageitem">
<li class="Details">
</li>
<li class="Details">
<div class="SeparateSR"/>
</li>
<li class="Details">
<div class="BoldText TxtAccent1">
<span id="ctl00_cphContent_lblModel"></span>
</div>
</li>
<li class="Details">
</li>
<li class="paddedBox"><span class="BoldText">Bedrooms:
<span id="ctl00_cphContent_lblBeds">1</span></span><br />
<span class="BoldText">Bathrooms:
<span id="ctl00_cphContent_lblBaths">1</span></span>
<br />
<span class="BoldText">Sq/Ft: </span>
<span id="ctl00_cphContent_lblSqft">544</span>
<br />
<span class="BoldText">Price: </span>
<span id="ctl00_cphContent_lblRent">$779 - $779</span><br />
<span class="BoldText">Deposit: </span>
<span id="ctl00_cphContent_lblDeposit">$150</span><br />
</li>
<li class="Details">
<div id="ctl00_cphContent_tsFloorplans" class="RadTabStrip RadTabStrip_Default RadTabStripTop_Default">
<!-- 2010.3.1109.20 --><div class="rtsLevel rtsLevel1">
<ul class="rtsUL"><li class="rtsLI rtsFirst"><a class="rtsLink rtsBefore" href="#"><span class="rtsOut"><span class="rtsIn"><span class="rtsTxt">Amenities</span></span></span></a></li><li class="rtsLI rtsLast"><a class="rtsLink rtsSelected" href="#"><span class="rtsOut"><span class="rtsIn"><span class="rtsTxt">2D View</span></span></span></a></li></ul>
</div><input id="ctl00_cphContent_tsFloorplans_ClientState" name="ctl00_cphContent_tsFloorplans_ClientState" type="hidden" />
</div>
</li>
<li class="Details" style="margin-top: -1px;">
<div id="ctl00_cphContent_mpvFloorplans" style="border-color:#848284;border-width:1px;border-style:Solid;">
<div id="ctl00_cphContent_pvAmenities" class="rmpHiddenView">
<div class="paddedBox itemList">
<span class="TxtAccent2 BoldText ">Features</span>
<ul> <li><span> Private Bedrooms </span></li> <li><span> Fully-equipped Kitchen with Breakfast Bar </span></li> <li><span> Full-Sized Washer / Dryer </span></li> <li><span> Spacious Living Room </span></li> <li><span> High Speed Internet Connections in Each Bedroom </span></li> </ul>
</div>
</div><div id="ctl00_cphContent_pv2d">
<img id="ctl00_cphContent_img2DFP" src="http://crossfiremedia.realpage.com/palisadesatjaguarcity/floorplans/fp1014_w240.jpg" alt="2D Floorplan" style="border-width:0px;" />
</div><input id="ctl00_cphContent_mpvFloorplans_ClientState" name="ctl00_cphContent_mpvFloorplans_ClientState" type="hidden" />
</div>
</li>
</ul>
<!--Not visible:End-->
</div>
<ul id="ctl00_ctl06_ulFooterList" class="pageitem PropFooter">
<li class="Details">Floor Plans</li>
<li class="Details">About our Community</li>
<li class="Details">Contact Us</li>
<li class="Details">Photos & Videos</li>
<li class="Details">Amenities & Pet Policies</li>
<li id="ctl00_ctl06_listNeighbor" class="Details">Local Businesses</li>
</ul>
<div id="footer">
<div class="ftrGrad">
</div>
<div id="FtrNav">
<span class="item" style=" padding-top: 0;padding-right:0;">
<img id="ctl00_Footer1_imgDisability" src="images/disa_btn.png" alt="Handicap Accessible" style="border-width:0px;" />
<img id="ctl00_Footer1_imgEHO" src="images/eoh_btn.png" alt="Equal Housing Oportunity" style="border-width:0px;" /></span>
<div class="item ">
<span>©
2011
RealPage </span>
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
Sys.Application.add_init(function() {
$create(Telerik.Web.UI.RadTabStrip, {"_selectedIndex":1,"_skin":"Default","clientStateFieldID":"ctl00_cphContent_tsFloorplans_ClientState","multiPageID":"ctl00_cphContent_mpvFloorplans","selectedIndexes":["1"],"tabData":[{"pageViewID":"ctl00_cphContent_pvAmenities"},{"pageViewID":"ctl00_cphContent_pv2d"}]}, null, null, $get("ctl00_cphContent_tsFloorplans"));
});
Sys.Application.add_init(function() {
$create(Telerik.Web.UI.RadMultiPage, {"clientStateFieldID":"ctl00_cphContent_mpvFloorplans_ClientState","pageViewData":[{"id":"ctl00_cphContent_pvAmenities"},{"id":"ctl00_cphContent_pv2d"}],"selectedIndex":1}, null, null, $get("ctl00_cphContent_mpvFloorplans"));
});
//]]>
</script>
</form>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~