How to highlight the current page number in MVC WebGrid
This is my webgrid control
#{
var grid = new WebGrid(canPage: true, rowsPerPage: #Model.PageSize, canSort: true, ajaxUpdateCallback: "getStars", ajaxUpdateContainerId: "suppListGrid");
grid.Bind(#Model.SearchResultSupplierViewModels, rowCount: #Model.TotalPageRows, autoSortAndPage: false);
grid.Pager(WebGridPagerModes.All);
#grid.GetHtml(tableStyle: "webGrid",
footerStyle:"pp-pagenumber",
htmlAttributes: new {id="suppListGrid"},
columns: grid.Columns(
grid.Column(format: (item) => #Html.Raw("<div class='row panelLawfirmresultbox'><div class='col-md-2 panelsupplierlogo'><img src='../Content/images/profile-logo.png' class='img-responsive' /></div><div class='col-md-7'><h4><a href='#'>"+item.SupplierName+"</a><sup class='pps-type'>Premium</sup></h4> <div class='panelPracticeAreaDetails'><div class='content'> <span class='blue'>Services Offered: </span><a style='text-decoration: none;color: #000;' href='#' title='"+item.KeyPracticeAreaName+"'>"+item.KeyPracticeAreaNames+"</a></div></div><div class='panelLocationDetails'><div class='content'> <span class='blue'>Location(s): </span><a style='text-decoration: none;color: #000;' href='#' title='"+item.SupplierLocation+"'>"+item.SupplierLocations+"</a> </div><div class='more'>…</div></div><span class='blue'>Client Rating ("+item.ClientRating+"): </span><span class='clientStars'>"+item.ClientRating+"</span><br /><span class='blue'>Panel Partnership Rating ("+item.PanelRating+"): </span><span class='panelStars'>"+item.PanelRating+"</span></div> <div class='col-md-3'> <a href='lawfirm-profile.html' class='ppbutton-reachout'>Reach Out</a> <a href='#addtopanel' class='ppbutton-addpanel inline2'>Add to Panel</a> <a href='#' class='ppbutton-addwatch'>Add to Watchlist</a> </div></div>"))
))
}
using footerStyle:"pp-pagenumber" i was able to set styles for not selected page numbers, but how to set style for the currently selected page?
Finally i came in to this solution. I think this is the only easy fix to the problem.
<style>
span.clientStars span {
background-position: 0 0;
}
</style>
$(document).ready(function () {
//Area for providing page number style
$('tr.pp-pagenumber td').contents().filter(function () {
return this.nodeType === 3;
}).wrap('<a class="currentPage" style="color: #fff;background: #438a16;"></a>');
$(".currentPage").each(function () {
if ($(this).html().trim() == "")
$(this).remove();
});
//END
});
Related
Help me please with this question.
Did not see the context menu after executing this code.
file: Grid.js
export default class Grid{
btnAddClick(){
browser.wait(async()=>{
await browser.executeScript('document.querySelector(".Grid--Head--leftButton-plus").click();');
return EC.presenceOf(element(by.css('.item-invoice_form_add_simple_position a')))
&& EC.presenceOf(element(by.css('.contextmenus')));
},
browser.params.timeWaitSelEl,
'Element "menu point Add position" too long in the DOM.');
}
}
test file: test.js
it('test', ()=>{
let grid = new Grid();
grid.btnAddClick();
expect(element(by.css('.contextmenus')).isDisplayed())
.toBeTruthy('contextmenu');
expect(element(by.css('.contextmenus')).isPresent())
.toBeTruthy('cont');
});
html templates:
HTML
<div class="contextmenus"><ul style="z-index: 1000000;">
<li class=" tab-elem item-invoice_form_add_rate_expense_type"><a cid="c855">Добавить</a></li>
<li class=" tab-elem item-invoice_form_add_simple_position"><a cid="c857">Добавить позицию</a></li>
</ul></div>
HTML
<div class="Grid--Head--leftButton theme-color--before Grid--Head--leftButton-plus" style="width: 23px;">
<div class="Grid--Head--leftButton--helper theme-color"></div>
<div class="Grid--Head--leftButton--helper theme-color"></div>
<div class="Grid--Head--leftButton--helper theme-color"></div>
</div>
This must be fairly simple, but I'm puzzled.
The content divs disappear on sorting.
And I missing the correct data-filter? Or a display:none or display:block?
Codepen: http://codepen.io/anon/pen/oYXXPq (You can clone it to make changes.)
HTML:
<ul id="filters">
<li>Everything</li>
<li>Blog</li>
<li>CISO</li>
<li>LABS</li>
</ul>
<div class="container-fluid">
<div id="isotope-blog">
<div class="grid">
<div class="grid-sizer col-xs-12 col-md-6"></div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content blog">Blog Blog Blog</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content blog">Blog Blog Blog</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content ciso">CISO CISO CISO</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content labs">LABS LABS LABS</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content labs">LABS LABS LABS</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content labs">LABS LABS LABS</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content ciso">CISO CISO CISO</div>
</div><div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content security-blog">BLOG BLOG BLOG</div>
</div>
</div>
</div>
</div>
CSS:
.grid-item-content {
max-height: 120px;
background: #0D8;
border: 2px solid #000;
overflow:hidden;
}
.container-fluid {
max-width:1200px;
}
jQuery:
jQuery(function ($) {
var $container = $('#isotope-blog'); //The ID for the list with all the blog posts
$container.isotope({ //Isotope options, 'item' matches the class in the PHP
itemSelector : '.item',
layoutMode : 'masonry'
});
//Add the class selected to the item that is clicked, and remove from the others
var $optionSets = $('#filters'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('#filters');
$optionSets.find('.selected').removeClass('selected');
$this.addClass('selected');
//When an item is clicked, sort the items.
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
});
This now works: http://codepen.io/anon/pen/oYXXPq
It is a two column Masonry and Bootstrap layout sortable by a filter class in the grid-item div element. The filter class can be multiple, different classes.
Problems were:
My HTML markup was too complex and wrong; it needs to be in the format:
<div class="container">
<div class="isotope-list">
<div class="row">
<div class="grid-item blog">OneOneOneOne Blog Blog Blog</div>
<div class="grid-item blog">TwoTwoToTwoTwoTwo Blog Blog Blog </div>
and on and on...
</div>
</div>
There were small changes needed to the CSS.
And my Javascript needed to make and clear updates to the selected categories:
var selectedCategory;
var $grid = $('.isotope-list').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 160,
gutter: 20
},
getSortData: {
selectedCategory: function( itemElem ) {
return $( itemElem ).hasClass( selectedCategory ) ? 0 : 1;
}
}
});
var $items = $('.row').find('.grid-item');
$('.sort-button-group').on( 'click', '.button', function() {
// set selectedCategory
selectedCategory = $( this ).attr('data-category');
if ( selectedCategory == 'all' ) {
$grid.isotope({
sortBy: 'original-order'
});
}
// update sort data now that selectedCategory has changed
$grid.isotope('updateSortData');
$grid.isotope({ sortBy: 'selectedCategory' });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
I am using ui bootstrap in my Angularjs application.
I want to customize the modals header by changing the backgroud color.
But if I zoom on the header of a modal, I see that the header where I can apply the color changes is not round as it should be.
So the result is not nice in the end.
How can I change the header background color in a "nice" way?
Thank you.
[UPDATE]
onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
$uibModal.open({
templateUrl: 'app/entities/consultant/consultant-dialog.html',
controller: 'ConsultantDialogController',
controllerAs: 'vm',
backdrop: 'static',
windowClass: 'consultant-dialog-modal-window',
HTML CODE OF MODAL :
<form name="editForm" class="form-horizontal" role="form" novalidate ng-submit="vm.save()" show-validation>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"
ng-click="vm.clear()">×</button>
<h4 class="modal-title" id="myConsultantLabel">modal header</h4>
</div>
<div class="modal-body">
Just set the CSS overflow property on modal-content to hidden:
.modal-content {
overflow: hidden;
}
See snippet for details.
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
.modal-content {
overflow: hidden;
}
.modal-header {
background: lightblue;
}
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
{{ item }}
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
<button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
If your build process lets you run less, then this is how I solved it:
// path to your bootstrap source
#import (reference) "../../../bower_components/bootstrap/less/mixins.less";
// remove the background color from the container
.modal-default .modal-content,
.modal-primary .modal-content,
.modal-success .modal-content,
.modal-info .modal-content,
.modal-warning .modal-content,
.modal-danger .modal-content {
background-color: transparent;
}
// apply the border radius to the top and bottom
.modal-default .modal-header,
.modal-primary .modal-header,
.modal-success .modal-header,
.modal-info .modal-header,
.modal-warning .modal-header,
.modal-danger .modal-header {
.border-top-radius(#border-radius-large);
}
.modal-default .modal-footer,
.modal-primary .modal-footer,
.modal-success .modal-footer,
.modal-info .modal-footer,
.modal-warning .modal-footer,
.modal-danger .modal-footer {
.border-bottom-radius(#border-radius-large);
}
.modal-default .modal-body,
.modal-primary .modal-body,
.modal-success .modal-body,
.modal-info .modal-body,
.modal-warning .modal-body,
.modal-danger .modal-body {
background-color: #modal-content-bg;
}
.modal-variant(#color; #background; #border) {
.modal-header {
color: #color;
background-color: #background;
border-color: #border;
}
.modal-footer {
color: #color;
background-color: #background;
border-color: #border;
}
}
// build modals based on button defaults
.modal-default {
.modal-variant(#btn-default-color; #btn-default-bg; #btn-default-border);
}
.modal-primary {
.modal-variant(#btn-primary-color; #btn-primary-bg; #btn-primary-border);
}
// Success appears as green
.modal-success {
.modal-variant(#btn-success-color; #btn-success-bg; #btn-success-border);
}
// Info appears as blue-green
.modal-info {
.modal-variant(#btn-info-color; #btn-info-bg; #btn-info-border);
}
// Warning appears as orange
.modal-warning {
.modal-variant(#btn-warning-color; #btn-warning-bg; #btn-warning-border);
}
// Danger and error appear as red
.modal-danger {
.modal-variant(#btn-danger-color; #btn-danger-bg; #btn-danger-border);
}
(I believe I'm also #importing the base bootstrap.less file)
Then, you can use the usual $uibModal.open(...), or add a property such as windowClass: 'modal-danger'. This adds the class to the underlying container and cascades the change without altering how "normal" modals are styled.
This will color both the modal-header and modal-footer with the standard bootstrap button colors. You can drop the footer declaration in the variant method (and copy the modal-body block) if you'd like to have the footer remain white.
I am running one jquery kendo grid row template where i am showing some content with images.Below is the code :
<table id="grid" style="width:100%">
<colgroup>
<col class="photo" />
<col class="details" />
<col />
</colgroup>
<thead style="display:none">
<tr>
<th>
Details
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3"></td>
</tr>
</tbody>
</table>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td style="width:30%">
div class="row">
<div id="dvImage" class="col-sm-4" style="width:118px">
#= imagelink #
</div>
<div class="col-sm-8" style="width:400px">
<span class="name" style="font-size:14px; color:green">#: Link #</span>
</div>
</div>
</td>
</tr>
</script>
<style>
.name {
display: block;
font-size: 1.3em;
}
.k-grid-header .k-header {
padding: 0px 20px;
}
.k-grid-content {
overflow-y: auto;
}
.k-grid tr td {
background: white !important;
border: 0 !important;
border-color: transparent;
}
.k pager-wrap {
border-width: 1px !important;
border-color: #ccc;
}
.k-block, .k-widget, .k-input, .k-textbox, .k-group, .k-content, .k-header, .k-filter-row > th, .k-editable-area, .k-separator, .k-colorpicker .k-i-arrow-s, .k-textbox > input, .k-autocomplete, .k-dropdown-wrap, .k-toolbar, .k-group-footer td, .k-grid-footer, .k-footer-template td, .k-state-default, .k-state-default .k-select, .k-state-disabled, .k-grid-header, .k-grid-header-wrap, .k-grid-header-locked, .k-grid-footer-locked, .k-grid-content-locked, .k-grid td, .k-grid td.k-state-selected, .k-grid-footer-wrap, .k-pager-wrap, .k-pager-wrap .k-link, .k-pager-refresh, .k-grouping-header, .k-grouping-header .k-group-indicator, .k-panelbar > .k-item > .k-link, .k-panel > .k-item > .k-link, .k-panelbar .k-panel, .k-panelbar .k-content, .k-treemap-tile, .k-calendar th, .k-slider-track, .k-splitbar, .k-dropzone-active, .k-tiles, .k-toolbar, .k-tooltip, .k-button-group .k-tool, .k-upload-files {
border-color: transparent;
}
.col-md-2 {
width:118px
}
.col-md-3 {
width:25%
}
</style>
In the above code i have Image and description which i am showing but for some of the rows i don't have image but still it's containing the space. So here i need that if image is null for particular row then it should hide that image column. I tried like this but did not get any luck.
Below is the code:
$("#grid").kendoGrid({
autoBind: false,
dataSource: {
transport: {
read: {
url: "/Home/GetSearchData",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: { searchTerm: $('[id*=hdnHomeSearch]').val() }
},
parameterMap: function (data, operation) {
return kendo.stringify(data);
}
},
pageSize: 10,
schema: {
parse: function (data) {
debugger;
var items = [];
var chkCorrectVal = 0;
var context = $('#dvImage');
for (var i = 0; i < data.data.length; i++) {
if (data.data[i].CorrectValue != null && data.data[i].SearchValue != null) {
$("#spnSR")[i].innerHTML = "<b>" + "Get results for this text: " + "</b>" + data.data[i].CorrectValue;
$("#spnSV")[i].innerHTML = "<b>" + "Searched for this text: " + "</b>" + data.data[i].SearchValue;
chkCorrectVal = 1;
}
else {
if (chkCorrectVal == 0) {
$("#spnSR").hide();
$("#spnSV").hide();
}
}
if (!data.data[i].imagelink) {
var getContext = $(context[i]);
data.data[i].imagelink = "";
$(context[i]).addClass('hidden');
}
}
var product = {
data: data.data,
total: data.total
};
items.push(product);
return (items[0].data);
},
}
},
dataBound: function () {
DisplayNoResultFound($("#grid"));
},
serverPaging: true,
pageable: {
refresh: true,
pageSizes: true
},
rowTemplate: kendo.template($("#rowTemplate").html()),
});
});
One more example i am pasting here where i am trying to get the same results and that is working fine for me.
Below is the code:
<input type="submit" id="soltitle" value="#1"/>
<div class="row">
<div class="col-md-2" id="hell1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"></h4>
</div>
<div id="timeline1" class="panel-collapse collapse">
<div class="panel-body">
<a href="#" class="thumbnail">
<img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb11" />
</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"></h4>
</div>
<div id="timeline1" class="panel-collapse collapse">
<div class="panel-body">
<a href="#" class="thumbnail">
<img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb11" />
</a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#soltitle').click(function () {
$('#hell1')
// Find parent with the class that starts with "col-md"
// Change class to "col-md-3"
.closest('[class^="col-md"]')
.toggleClass('col-md-2 col-md-2 hidden')
// Find siblings of parent with similar class criteria
// - if all siblings are the same, you can use ".siblings()"
// Change class to "col-md-2"
//.siblings('[class^="col-md"]')
// .removeClass('col-md-3')
// .addClass('col-md-2');
});
});
</script>
in this example i am hiding first column in button click event and that is working fine.
The problem is that you toggle the class for all rows where the image does not exist. Each time you toggle those and toggle again, the second toggle negates the first one. If the rows where the if is evaluated to true is pair, then the last toggle was a negation.
It is not clear whether you need to hide the whole column if you find one such row, or you need to hide the column only for the affected row specifically. Also, your if is incorrect.
If you want to hide the whole column if at least such a row exists, then this might be the solution:
var shouldShow = true;
for (var i = 0; shouldShow && (i < data.data.length); i++) {
if (!data.data[i].imagelink) {
$(".imageClass").addClass('hidden');
shouldShow = false;
}
}
If you want to do it only for the affected row, then something like this might help you:
var context = $(".imageClass");
for (var i = 0; i < data.data.length; i++) {
if (!data.data[i].imagelink) {
$(context[i]).addClass('hidden');
}
}
The code assumes you have a single column having imageClass.
EDIT
It turned out that the .hidden class was not defined. There are two possible solutions, you can choose either of them.
Solution1: replace .addClass("hidden") with .hide()
Solution2: Add the following rule to the CSS code: .hidden {display: none;}
My goal is create a map with multiple locations with a map that jumps from marker to marker when a html tag was click elsewhere on the page
i made the jumps work but, i can't seem to get the mouseover info boxes to work...i have search but can't find this specific problem
www.humphrey-ray.com/qp/locations-new27a.html
working example..
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.4key=AIzaSyCjceQVdlfYNqKfDcrAl50VIXrzBXMhDbo&sensor=false">
</script> <script type="text/javascript">
var map;
var marker2;
var marker3;
var marker4;
var marker5;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var latlng = new google.maps.LatLng(39.94718, -75.14323);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker2 = new google.maps.Marker({
position: new google.maps.LatLng(39.94718, -75.14323),
map: map,
title: "my 2nd title"
});
new google.maps.event.addListener( marker2, 'mouseover', function() {
infowindow.setContent("my 2nd title");
infowindow.open(map,this);
});
marker3 = new google.maps.Marker({
position: new google.maps.LatLng(39.94924, -75.14268),
map: map,
title: "my 2nd title"
});
new google.maps.event.addListener( marker3, 'mouseover', function() {
infowindow.setContent("my 3nd title");
infowindow.open(map,this);
});
marker4 = new google.maps.Marker({
position: new google.maps.LatLng(39.96146, -75.14325),
map: map,
title: "my 2nd title"
});
new google.maps.event.addListener( marker4, 'mouseover', function() {
infowindow.setContent("my 4nd title");
infowindow.open(map,this);
});
marker5 = new google.maps.Marker({
position: new google.maps.LatLng(39.95098, -75.14558),
map: map,
title: "my 5nd title"
});
new google.maps.event.addListener( marker5, 'mouseover', function() {
infowindow.setContent("my 5nd title");
infowindow.open(map,this);
});
}
function goToLoc(id){
if(id== 2)
map.setCenter(marker2.getPosition());
if(id == 3)
map.setCenter(marker3.getPosition());
if(id == 4)
map.setCenter(marker4.getPosition());
if(id == 5)
map.setCenter(marker5.getPosition());
}
</script> <style type="text/css">
body,td,th { font-family: Arial, Helvetica, sans-serif; }
</style>
</head>
<body onload="initialize()">
<div id="container">
<!-- /header -->
<!-- /nav -->
<div class="mapwrapper">
<div class="mapwrapper" id="map_canvas" style="width:720px; height:400px">
</div>
<div class="mapwrapper">
<div class="right-top-column">
<div class="right-top-column-inner">
<br>
<img src="img/comin_soon.jpg" width="180" height="186" />
</p>
</div>
</div>
<div class="right-top-column-noshaw">
<h1>
Click Location to show on map
</h1>
<ul class="side-list">
<li>
<a href="#" id="marker2" onclick="goToLoc(2)">
Old City</a>
</li>
<li>
<a href="#" id="marker3" onclick="goToLoc(3)">
South Street/Society Hill</a>
</li>
<li>
<a href="#" id="marker4" onclick="goToLoc(4)">
Northern Liberties</a>
</li>
<li>
<a href="#" id="marker5" onclick="goToLoc(5)">
Old City</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>