populating angular div with children's children - json

Folks- I have a data structure of nested parent-child structure. The first level (parents) drives angular to create a row of buttons. Selecting one of these buttons populates a list with the second level (children). Now I also need that selection to drive a third level (grandchildren). That third div needs to have all the grandchildren of the children.
As I'm relatively new to angular, I'm afraid I'm looking at it too procedurally.
Code follows:
<html ng-app="KPI_Scorecard">
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<!--script src="js/controllers.js"></script-->
<script>
var $j = jQuery.noConflict();
var KPI_Scorecard = angular.module('KPI_Scorecard', []);
var listL2;
var myChildren;
var myChildrenChildren = []
KPI_Scorecard.controller('KPIListCtrl', function ($scope) {
$scope.showL2Content = function(whatChildren) {
$scope.myChildren = whatChildren;
$scope.myChildrenChildren;
for (x=0;x<$scope.myChildren.length;x++) {
myChildrenChildren = [];
for (y=0;y<$scope.myChildren[x].children.length;y++) {
myChildrenChildren.push($scope.myChildren[x].children[y]);
}
//console.log(myChildrenChildren);
};
console.log(myChildrenChildren.length);
};
$scope.showL3Content = function(whatChildren) {
//console.log(whatChildren);
};
$scope.myList = [{"id":"Jack","employeeLevel":"1","managerName":"John","l1Mgr":"none","l2Mgr":"none","goals":[{"goalName":"Margin","goalWeight":"0.5","goalColor":"11.7"},{"goalName":"Expense","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Chuck","employeeLevel":"2","managerName":"Jack","l1Mgr":"Jack","l2Mgr":"none","goals":[{"goalName":"Expense","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"David","employeeLevel":"3","managerName":"Chuck","l1Mgr":"Jack","l2Mgr":"Chuck","goals":[{"goalName":"budget","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[]},{"id":"Scott","employeeLevel":"3","managerName":"Chuck","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Investment","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Jill","employeeLevel":"4","managerName":"Scott","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Data","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}]},{"id":"Rick","employeeLevel":"4","managerName":"Scott","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"technology","goalWeight":"1","goalColor":"NULL"},{"goalName":"Data","goalWeight":"0.5","goalColor":"NULL"}],"children":[]}]}]},{"id":"Js","employeeLevel":"2","managerName":"Jack","l1Mgr":"Jack","l2Mgr":"none","goals":[{"goalName":"Cross","goalWeight":"0.2","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Alison","employeeLevel":"3","managerName":"Js","l1Mgr":"Jack","l2Mgr":"Js","goals":[{"goalName":"Research","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[]},{"id":"Peter","employeeLevel":"3","managerName":"Js","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Invest","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.33","goalColor":"NULL"}],"children":[]}]}]},{"id":"Jim","employeeLevel":"1","managerName":"John","l1Mgr":"none","l2Mgr":"none","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[{"id":"Anne","employeeLevel":"2","managerName":"Jim","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[{"id":"Marisa","employeeLevel":"3","managerName":"Anne","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Spending","goalWeight":"1","goalColor":"NULL"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[]},{"id":"Linda","employeeLevel":"3","managerName":"Anne","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[]}]},{"id":"Gene","employeeLevel":"2","managerName":"Jim","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Total","goalWeight":"0.33","goalColor":"92.96"}],"children":[{"id":"Kathleen","employeeLevel":"3","managerName":"Gene","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"% Clients","goalWeight":"1","goalColor":"NULL"},{"goalName":"Employee","goalWeight":"1","goalColor":"90"}],"children":[]},{"id":"Chris","employeeLevel":"3","managerName":"Gene","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"processes","goalWeight":"1","goalColor":"NULL"},{"goalName":"Planning","goalWeight":"1","goalColor":"NULL"}],"children":[]}]}]}];
})
</script>
</head>
<body ng-controller="KPIListCtrl">
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>SCORECARDS</h1>
HOME
</div>
<div data-role="content" style="height:400px">
<ul data-role="listview" id="list-L2" data-divider-theme="b" data-inset="true" style="width: 20%; display: inline-block;" ng-click="$event.preventDefault()">L2 Scorecards
<li ng-repeat="aName in myChildren">
{{aName.id}}
</li>
</ul>
<ul data-role="listview" id="list-L3" data-divider-theme="b" data-inset="true" style="width: 20%; display: inline-block;" ng-click="$event.preventDefault()">L3 Scorecards
<li ng-repeat="aName2 in myChildrenChildren">
{{aName2}}
</li>
</ul>
</div>
<div data-role="footer" id="list-L1" ng-click="$event.preventDefault()">
</form> <span ng-repeat="aName in myList" style="float:left">
{{user.name}}<br>
<button ng-click="showL2Content(aName.children)">{{aName.id}}</button>
</span></div>
</div>
</body>
</html>


This article talks about using recursion in directives: http://sporto.github.io/blog/2013/06/24/nested-recursive-directives-in-angular/
which sounds like it will solve your problem.


this works, but I'm feeling like I should either preprocess the JSON differently, or there might be a more 'angular' way of doing this.
<html ng-app="KPI_Scorecard">
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<!--script src="https://ribbit.fmr.com/resources/statics/379584/angular.min.js"></script-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<!--script src="js/controllers.js"></script-->
<script>
var $j = jQuery.noConflict();
var KPI_Scorecard = angular.module('KPI_Scorecard', []);
var listL2;
var myChildren;
var myL3s = []
KPI_Scorecard.controller('KPIListCtrl', function ($scope) {
$scope.showL2Content = function (whatChildren) {
var myL3s = []
$scope.myChildren = whatChildren;
for (x = 0; x < whatChildren.length; x++) {
for (y = 0; y < whatChildren[x].children.length; y++) {
myL3s.push(whatChildren[x].children[y]);
}
};
$scope.myChildrenChildren= myL3s;
console.log(myL3s);
};
//console.log(myChildrenChildren);
$scope.showL3Content = function (whatChildren) {
//console.log(whatChildren);
};
$scope.myList = [{"id":"Jack","employeeLevel":"1","managerName":"John","l1Mgr":"none","l2Mgr":"none","goals":[{"goalName":"Margin","goalWeight":"0.5","goalColor":"11.7"},{"goalName":"Expense","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Chuck","employeeLevel":"2","managerName":"Jack","l1Mgr":"Jack","l2Mgr":"none","goals":[{"goalName":"Expense","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"David","employeeLevel":"3","managerName":"Chuck","l1Mgr":"Jack","l2Mgr":"Chuck","goals":[{"goalName":"budget","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[]},{"id":"Scott","employeeLevel":"3","managerName":"Chuck","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Investment","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Jill","employeeLevel":"4","managerName":"Scott","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Data","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}]},{"id":"Rick","employeeLevel":"4","managerName":"Scott","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"technology","goalWeight":"1","goalColor":"NULL"},{"goalName":"Data","goalWeight":"0.5","goalColor":"NULL"}],"children":[]}]}]},{"id":"Js","employeeLevel":"2","managerName":"Jack","l1Mgr":"Jack","l2Mgr":"none","goals":[{"goalName":"Cross","goalWeight":"0.2","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Alison","employeeLevel":"3","managerName":"Js","l1Mgr":"Jack","l2Mgr":"Js","goals":[{"goalName":"Research","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[]},{"id":"Peter","employeeLevel":"3","managerName":"Js","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Invest","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.33","goalColor":"NULL"}],"children":[]}]}]},{"id":"Jim","employeeLevel":"1","managerName":"John","l1Mgr":"none","l2Mgr":"none","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[{"id":"Anne","employeeLevel":"2","managerName":"Jim","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[{"id":"Marisa","employeeLevel":"3","managerName":"Anne","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Spending","goalWeight":"1","goalColor":"NULL"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[]},{"id":"Linda","employeeLevel":"3","managerName":"Anne","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[]}]},{"id":"Gene","employeeLevel":"2","managerName":"Jim","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Total","goalWeight":"0.33","goalColor":"92.96"}],"children":[{"id":"Kathleen","employeeLevel":"3","managerName":"Gene","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"% Clients","goalWeight":"1","goalColor":"NULL"},{"goalName":"Employee","goalWeight":"1","goalColor":"90"}],"children":[]},{"id":"Chris","employeeLevel":"3","managerName":"Gene","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"processes","goalWeight":"1","goalColor":"NULL"},{"goalName":"Planning","goalWeight":"1","goalColor":"NULL"}],"children":[]}]}]}];
})
</script>
</head>
<body ng-controller="KPIListCtrl">
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>SCORECARDS</h1>
HOME
</div>
<div data-role="content" style="height:400px">
<ul data-role="listview" id="list-L2" data-divider-theme="b" data-inset="true" style="width: 20%; display: inline-block;" ng-click="$event.preventDefault()">L2 Scorecards
<li ng-repeat="aName in myChildren">
{{aName.id}}
</li>
</ul>
<ul data-role="listview" id="list-L3" data-divider-theme="b" data-inset="true" style="width: 20%; display: inline-block;" ng-click="$event.preventDefault()">L3 Scorecards
<li ng-repeat="aName2 in myChildrenChildren">
{{aName2.id}}
</li>
</ul>
</div>
<div data-role="footer" id="list-L1" ng-click="$event.preventDefault()">
</form> <span ng-repeat="aName in myList" style="float:left">
{{user.name}}<br>
<button ng-click="showL2Content(aName.children)">{{aName.id}}</button>
</span></div>
</div>
</body>
</html>

Related

angularjs - How to uncheck the checkboxes onclick a button

I have some checkbox which comes from loop in angularjs. Here I need to uncheck all the checkboxes on click a button.Here I have tried already but its not working,can anyone please help me on it.Here is the code below
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<ul ng-repeat="(x, y) in items.filter">
<li class="parent"><b>{{x}}</b></li>
<li class="child">
<ul>
<li ng-repeat="p in y.value"><input type="checkbox" ng-model="vehicle" name="vehicle">{{p}}</li>
</ul>
</li>
</ul>
<button ng-click="myFunct()" type="button">click</button>
</div>
SCRIPT
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope,$http) {
$scope.items = {"filter":{"Category1":{"value":["one","two","three"]},"Category2":{"value":["four","five","six"]}}}
$scope.myFunct = function() {
$scope.vehicle="";
}
});

The combination ng-checked with ng-click is the best solution to control checkboxes from controller, you could try this:
<ul ng-repeat="(x, y) in items.filter">
<li class="parent"><b>{{x}}</b></li>
<li class="child">
<ul>
<li ng-repeat="p in y.value">
<input type="checkbox"
ng-checked="v"
name="Item.selected">{{p}}</li>
</ul>
</li>
</ul>
<input type="checkbox" ng-model="v" ng-click="checkAll()" />Clear all
Example: http://next.plnkr.co/edit/a9DInByf8a6yv6wl?preview
Hope it helps!

Assign $scope.vechicle=false
Updated code
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope,$http)
{
$scope.items = {"filter":{"Category1":{"value":["one","two","three"]},"Category2":{"value":["four","five","six"]}}}
$scope.myFunct = function() {
$scope.vehicle=false; //changed to false
}
});

To get the tagname of clicked element via ng-click using angularjs

I am facing a problem with ng-click event. Below is my code. When I click on the element, it retrieves the span tag and if I call currentTarget, it gives the li element. I want to get the <a> element on ng-click.And after getting element i have to check whether it has a class named 'havesub', How can I achieve it?
<li>
<a class="havesub" ui-sref="" ng-click="openmenu($event)">
<img src="images/icon-03.png" alt="menu" />
<span>Menu item1</span>
</a>
</li>
Below is my function in controller
app.controller("con", function($scope) {
$scope.openmenu = function($event) {
var targets = $event.currentTarget;
};
});

var app = angular.module("ngClickApp", []);
app.controller('ngClickCtrl', ['$scope', function ($scope) {
$scope.click=function(event){
alert(angular.element(event.currentTarget).hasClass("havesub"));
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="ngClickApp">
<head>
<title>Validation messages</title>
</head>
<body ng-controller="ngClickCtrl">
<form name="userForm">
<li>
<a href class="havesub" ng-click="click($event)">
<img src="1.png" alt="menu" />
<span>Menu item1</span>
</a>
</li>
</form>
</body>
</html>
event.currentTarget works fine for me
<html ng-app="ngClickApp">
<head>
<title>Validation messages</title>
</head>
<body ng-controller="ngClickCtrl">
<form name="userForm">
<li>
<a href class="havesub" ng-click="click($event)">
<img src="1.png" alt="menu" />
<span>Menu item1</span>
</a>
</li>
</form>
<script type="text/javascript">
var app = angular.module("ngClickApp", []);
app.controller('ngClickCtrl', ['$scope', function ($scope) {
$scope.click=function(event){
alert(angular.element(event.currentTarget).hasClass("havesub"));
}
}]);
</script>
</body>
</html>

W3C Markup Validation gives me 3 errors on one line that seems to work

I ran my website in the W3C Validator only to be given these errors:
<a href="#header-anchor">
<img src="img/banner.png" width="169" height="54" alt="Logo">
</a>
The errors I got are:
Line 14, column 28: An a start tag seen but an element of the same type was already open.
Line 14, column 28: End tag a violates nesting rules.
Line 14, column 28: Cannot recover after last error. Any further errors will be ignored.
I am not sure what is causing this error, so any help will appreciated. Thanks.
EDIT: Apparently this piece of code is causing the error but I am not sure what it is exactly causing it:
<a href="index.html">
Edit 2: Whole code:
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- Banner -->
<a class="anchor" id="header-anchor">
<div id="header-wrapper">
<header role="banner" id="header">
<a href="index.html">
<img src="img/banner.png" width="169" height="54" alt="Logo">
</a>
<nav role="navigation">
<ul>
<li>HOME</li>
<li>SERVICES</li>
<li>OUR TEAM</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
<div id="banner-wrapper">
<section id="banner">
<h2>Title</h2>
<h3>Tagline</h3>
</section>
</div>
<!-- Services -->
<a class="anchor" id="services-anchor"></a>
<div class="wrapper">
<section id="services" class="group">
<h2>Our Services</h2>
<div class="floatleft small"> <span class="fa-stack fa-3x"> <i class="fa fa-line-chart fa-stack-1x fa-inverse"></i> </span>
<h3>Service 1</h3>
<p>Service 1</p>
</div>
<div class="floatleft small"> <span class="fa-stack fa-3x"> <i class="fa fa-money"></i> </span>
<h3>Service 1</h3>
<p>Service 1</p>
</div>
<div class="floatleft small"> <span class="fa-stack fa-3x"> <i class="fa fa-globe"></i> </span>
<h3>Service 1</h3>
<p>Service 1</p>
</div>
</section>
</div>
<!-- About us -->
<a class="anchor" id="team-anchor"></a>
<section id="team" class="group">
<h2>Our Team</h2>
<div class="floatleft mid"> <img src="img/ben.jpg" width="250" height="250" alt="Ben Fitchew">
<h3>Team 1</h3>
<p>Team 1</p>
</div>
<div class="floatleft mid"> <img src="img/jeremy.jpg" width="250" height="250" alt="Jeremy Lang">
<h3>Team 1</h3>
<p>Team 1</p>
</div>
<div class="floatright mid"> <img src="img/gianluca.jpg" width="250" height="250" alt="Gianluca Monaco">
<h3>Team 1</h3>
<p>Team 1</p>
</div>
<div class="floatright mid"> <img src="img/will.jpg" width="250" height="250" alt="William Pattisson">
<h3>Team 1</h3>
<p>Team 1</p>
</div>
</section>
<!-- About -->
<div class="wrapper"> <a class="anchor" id="about-anchor"></a>
<section id="about" class="group" role="main">
<h2>About</h2>
<h3>About</h3>
<p>About</p>
</section>
</div>
<!-- Slideshow -->
<div class="wrapper">
<h2>Slideshow</h2>
<h3>Slideshow</h3>
<p class="Slideshow"><img src='images/picture1.jpg' name='SlideShow'/></p>
</section>
</div>
<!-- Javascript code -->
<script type="text/javascript">
var slideShowSpeed = 2000;
var Pic = new Array();
Pic[0]='img/picture1.jpg';
Pic[1]='img/picture2.jpg';
Pic[2]='img/picture3.jpg';
Pic[3]='img/picture4.jpg';
Pic[4]='img/picture5.jpg';
Pic[5]='img/picture6.jpg';
var currentPicture = 1;
var pictureNo = Pic.length;
var preLoad = new Array();
for (i = 0; i < pictureNo; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration=3)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[currentPicture].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
currentPicture = currentPicture + 1;
if (currentPicture >= pictureNo)
currentPicture = 0;
setTimeout('runSlideShow()', slideShowSpeed);
}
</script>
<script>
runSlideShow();
</script>
<!-- Contact -->
<a class="anchor" id="contact-anchor"></a>
<div class="map-wrapper">
<section id="contact" class="group">
<h2>Contact Us</h2>
<div id="map-canvas" class="floatleft mid"></div>
<div class="floatright mid">
<form id="frmContact" action="mail.php" method="post" role="form">
<label for="txtName" id="lblName">Name</label>
<input type="text" name="txtName" id="txtName" aria-labelledby="lblName" required placeholder="Enter your name here" minlength="3" maxlength="70" pattern="[a-zA-Z ]+">
<span class="error_show">Name is not valid!</span>
<label for="txtEmail" id="lblEmail">Email</label>
<input type="email" name="txtEmail" id="txtEmail" aria-labelledby="lblEmail" required placeholder="Enter your email here" minlength="5" maxlength="254">
<span class="error_show">Email is not valid!.</span>
<label for="txtMessage" id="lblMessage">Message</label>
<textarea name="txtMessage" id="txtMessage" aria-labelledby="txtMessage" required placeholder="Enter your message here"></textarea>
<span class="error_show">Message is not valid!</span>
<input type="submit" name="submit" id="submit" value="Send Message">
</form>
</div>
</section>
</div>
<!-- Javascript -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
// Code for Google Map
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var myLatLng = new google.maps.LatLng(51.51463,-0.106533);
var mapOptions = {
center: myLatLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Ardevora'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {
// Form Validation Code
$('#txtName').on('input', function() {
var input=$(this);
var is_name=input.val();
if (is_name) {
input.removeClass("invalid").addClass("valid");
input.next().hide();
} else {
input.removeClass("valid").addClass("invalid");
input.next().show();
}
});
$('#txtEmail').on('input', function() {
var input=$(this);
var regex = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,6}$/i;
var is_email=regex.test(input.val());
if (is_email) {
input.removeClass("invalid").addClass("valid");
input.next().hide();
} else {
input.removeClass("valid").addClass("invalid");
input.next().show();
}
});
$('#txtMessage').keyup(function(event) {
var input=$(this);
var message=$(this).val();
if (message) {
input.removeClass("invalid").addClass("valid");
input.next().hide();
} else {
input.removeClass("valid").addClass("invalid");
input.next().show();
}
});
$("#submit").click(function(event) {
var form_data=$("#frmContact").serializeArray();
var error_free=true;
for (var input in form_data){
var element=$("#"+form_data[input]['name']);
var valid=element.hasClass("valid");
var error_element=element.next();
if (!valid) {
error_element.show();
error_free=false;
} else {
error_element.hide();
}
}
if (!error_free){
event.preventDefault();
}
});
});
</script>
<!-- Cookie Script -->
<script type="text/javascript">
(function(){
var msg = "We use cookies to enhance your web browsing experience. By continuing to browse the site you agree to our policy on cookie usage.";
var closeBtnMsg = "Ok I comply";
var privacyBtnMsg = "Privacy Policy";
var privacyLink = "http://www.google.com";
//check cookies
if(document.cookie){
var cookieString = document.cookie;
var cookieList = cookieString.split(";");
// if cookie named OKCookie is found, return
for(x = 0; x < cookieList.length; x++){
if (cookieList[x].indexOf("OKCookie") != -1){return};
}
}
var docRoot = document.body;
var okC = document.createElement("div");
okC.setAttribute("id", "okCookie");
var okCp = document.createElement("p");
var okcText = document.createTextNode(msg);
//close button
var okCclose = document.createElement("a");
var okcCloseText = document.createTextNode(closeBtnMsg);
okCclose.setAttribute("href", "#");
okCclose.setAttribute("id", "okClose");
okCclose.appendChild(okcCloseText);
okCclose.addEventListener("click", closeCookie, false);
//privacy button
var okCprivacy = document.createElement("a");
var okcPrivacyText = document.createTextNode(privacyBtnMsg);
okCprivacy.setAttribute("href", privacyLink);
okCprivacy.setAttribute("id", "okCprivacy");
okCprivacy.appendChild(okcPrivacyText);
//add to DOM
okCp.appendChild(okcText);
okC.appendChild(okCp);
okC.appendChild(okCclose);
okC.appendChild(okCprivacy);
docRoot.appendChild(okC);
okC.classList.add("okcBeginAnimate");
function closeCookie(){
var cookieExpire = new Date();
cookieExpire.setFullYear(cookieExpire.getFullYear() +2);
document.cookie="OKCookie=1; expires=" + cookieExpire.toGMTString() + ";";
docRoot.removeChild(okC);
}
})();
</script>
<!-- Footer -->
<footer role="contentinfo">
<!-- Left Footer -->
<ul class="floatleft">
<li>HOME</li>
<li>SERVICES</li>
<li>OUR TEAM</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
<!-- Right Footer -->
<ul class="floatright">
<p>Copyright 2014</p>
</ul>
</footer>
</body>
</html>

What is your declaration of page? Likely to be a bug in the non-completion of the <img /> tag.
<img src="img/banner.png" width="169" height="54" alt="Logo" />
Tag <a> should have a title="Title a" consistent with alt="Alt img" image

The tag <a class="anchor" id="header-anchor"> has no closing tag. This causes the elements after it to be taken as its content, which in turn leads to violation of element nesting rules. The simplest fix is to add the closing tag immediately after the start tag:
<a class="anchor" id="header-anchor"></a>
Such an element is not good style, though. You can probably work with just id attributes and class attributes assigned to elements with real content.
Fixing the problem causes some errors later in the document to be reported, but they are relatively easy to analyze (especially with the help of the explanations).

Weather App - Using Symbols instead of text

Ok, so I'm currently trying to create a simple weather app as part of learning how to use RSS feeds. I have the weather being displayed as text E.g. Friday: Sunny, Max Temp, Min Temp.
I want to change that text into symbols, so that instead of saying "Sunny" it displayed the image of a sun. I'll show the HTML and Javascript below. Hopefully it makes sense and I can get this problem sorted out.
HTML
<div id="home" data-role="page">
<div data-role="header" data-add-back-btn="true" >
<h1>Your Handy Little Weather App</h1>
</div>
<div data-role="content">
<img src ="./images/UWSLogo.png" width ="174" height ="116" alt ="Logo" align ="right"/>
<h2>UWS Weather</h2>
<p>Check the weather at the UWS Campuses.</p>
<p>Choose your desired location.</p>
<ul data-role="listview" data-inset="true">
<li><a id="ayrFeed" href="#ayr">Ayr</a></li>
<li><a id="dumfriesFeed" href="#dumfries">Dumfries</a></li>
<li><a id="hamiltonFeed" href="#hamilton">Hamilton</a></li>
<li><a id="paisleyFeed" href="#paisley">Paisley</a></li>
</ul>
<h2>Other Weather</h2>
<p>Find out more with our other weather options.</p>
<ul data-role="listview" data-inset="true">
<li><a id="uniFeed" href="#uni">Other Universities</a></li>
<li><a id="holidayFeed" href="#holiday">Popular Holiday Destinations</a> </li>
</ul>
</div>
</div>
</div>
<div id="ayr" data-role="page">
<div data-role="header">
<h1 id="ayrTitle"></h1>
</div>
<div data-role="content">
<ul id="ayrList" data-role="listview" data-inset="true">
<!-- Weather reports go here. -->
</ul>
</div>
</div>
<div id="dumfries" data-role="page">
<div data-role="header">
<h1 id="dumfriesTitle"></h1>
</div>
<div data-role="content">
<ul id="dumfriesList" data-role="listview" data-inset="true">
<!-- Weather reports go here. -->
</ul>
</div>
</div>
</div>
<div id="hamilton" data-role="page">
<div data-role="header">
<h1 id="hamiltonTitle"></h1>
</div>
<div data-role="content">
<ul id="hamiltonList" data-role="listview" data-inset="true">
<!-- Weather reports go here. -->
</ul>
</div>
</div>
Javscript
$(document).ready(function() {
$("#ayrFeed").bind('click', function() {
getFeed("http://open.live.bbc.co.uk/weather/feeds/en/2656708/3dayforecast.rss",
showAyrWeatherFeed);
});
$("#dumfriesFeed").bind('click', function() {
getFeed("http://open.live.bbc.co.uk/weather/feeds/en/2650798/3dayforecast.rss",
showDumfriesWeatherFeed);
});
$("#hamiltonFeed").bind('click', function() {
getFeed("http://open.live.bbc.co.uk/weather/feeds/en/2647570/3dayforecast.rss",
showHamiltonWeatherFeed);
});
function getFeed(url, success){
if(window.navigator.onLine) {
$.jGFeed(url, function(feeds) {
// Check for errors
if(!feeds){
// there was an error
return false;
} else {
localStorage.setItem(url, JSON.stringify(feeds));
success(feeds.title, feeds.entries);
}
});
} else {
// Get the fall-back...
var feed = JSON.parse(localStorage.getItem(url));
if(feed && feed.length > 0) {
success(feed.title, feed.entries);
}
}
}
function showPaisleyWeatherFeed(title, items) {
$("#paisleyTitle").text(title);
var list = $("#paisleyList");
list.empty();
for(var index = 0; index < items.length; index += 1) {
list.append(formatItem(items[index]));
}
$.mobile.changePage($("#paisley"), "flip");
list.listview("refresh");
}
function showHamiltonWeatherFeed(title, items) {
$("#hamiltonTitle").text(title);
var list = $("#hamiltonList");
list.empty();
for(var index = 0; index < items.length; index += 1) {
list.append(formatItem(items[index]));
}
$.mobile.changePage($("#hamilton"), "flip");
list.listview("refresh");
}
function formatItem(item) {
var listItem = document.createElement("li"),
anchor = document.createElement("a");
anchor.setAttribute("href", item.link);
anchor.innerText = item.title;
listItem.innerHTML = anchor.outerHTML;
return listItem.outerHTML;
}

<img src="url" alt="some_text">
Just add this to your code and include the url of the image you would like in the tag.

Here's a FIDDLE with little example if it helps you.
<div>New York Sunny 85F</div>
div {
background: #ddd;
width: 200px;
height: 80px;
line-height: 80px;
font-size: 23px;
text-align: center;
border-radius: 4px;
}
.weather-icon {
width: 38px;
height: 38px;
vertical-align: text-bottom;
}
$(function() {
$('div').html(function() {
return $(this).html().replace('Sunny','<img src="https://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Sunny.png" class="weather-icon">');
});
});

how to get a page source in html?

I'm using HTML and javaScript .. I'm trying to build a chrome extension , which will display some info from the website in the popup
I need to get the page source of http://met.guc.edu.eg in the context of my web page and use it to get some of the "li" tags and do some work on them ( RegEx )
for example display the courses taken by student in web page -- By taking them from the http://met.guc.edu.eg .. and display them in a nice way in a pop up

Since there is no true answer to this yet, I will post the method I use - I do not know if it's the best way - but it works.
The reason XHR may not be the best idea is because it's not always going to give you the exact source of a certain tab - this way will.
content.js
chrome.extension.onRequest.addListener(function(request, sender, callback)
{
if (request.action == 'getSource')
{
callback(document.documentElement.outerHTML);
}
});
background.html
chrome.tabs.sendRequest(tab.id, {action : 'getSource'}, function(source) {
console.log(source);
});

As asked for, here is the source:
<!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 id="Head1"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>
Faculty of Media Engineering and Technology (MET) - The German University in Cairo
</title>
<!--[if gte IE 7 ]>
<!-->
<link type="text/css" href="Media/ResourceHandler.ashx?v=1&fileSet=homepage_css&type=text/css" rel="Stylesheet" />
<script type="text/javascript" src="Media/ResourceHandler.ashx?v=1&fileSet=homepage_script&type=application/x-javascript"></script>
<![endif]-->
</head>
<body onload="init();">
<form name="ctl00" method="post" action="Default.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="ctl00">
<div>
<input type="hidden" name="ScriptManager1_HiddenField" id="ScriptManager1_HiddenField" 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="/wEPDwUKMTYwMjE2MTE1MA9kFgICAw9kFgICBw8WAh4LXyFJdGVtQ291bnQCAhYEZg9kFggCAg8VAgdOZXdzXzE3GFNtYXJ0U29mdCBhcmUgdGhlIGNoYW1wc2QCAw8PFgIeCEltYWdlVXJsBS1+L1JlcG9zaXRvcnkvTmV3c0NvbXBvbmVudC9TT3JpZ2luYWxGaW5hbC5qcGdkZAIEDxUB8QFBZnRlciBjb21wZXRpbmcgYWdhaW5zdCBDU0VOIGFuZCBCSSBjb21wYW5pZXMuIFNtYXJ0U29mdCBtYW5hZ2VkIHRvDQp3aW4gdGhlIFNvZnR3YXJlIEVuZ2luZWVyaW5nIENvbXBldGl0aW9uIGZvciBTcHJpbmcgMjAxMCBhZnRlciBkZXZlbG9waW5nIGFuIG91dHN0YW5kaW5nIG9ubGluZSB0b29sIGZvciBhdXRvbWF0aW5nIGFnaWxlIHNvZnR3YXJlIG1hbmFnZW1lbnQuIENvbmdyYXR1bGF0aW9ucyB0byBTbWFydFNvZnQhZAIFDxYCHgVzdHlsZQUNZGlzcGxheTpub25lOxYCZg8VAQBkAgEPZBYIAgIPFQIGTmV3c18xHE1lZGlhIEVuZ2luZWVyaW5nIGF0IHRoZSBHVUNkAgMPDxYCHwEFJn4vUmVwb3NpdG9yeS9OZXdzQ29tcG9uZW50L2xpYnJhcnkuanBnZGQCBA8VAfEBTWVkaWEgRW5naW5lZXJpbmcgYW5kIFRlY2hub2xvZ3kgYWltcyBhdCB0aGUgZXZvbHZpbmcgZmllbGQgb2YgbmVhcmx5IGFsbCBhc3BlY3RzIG9mIGluZm9ybWF0aW9uIGFuZCBtdWx0aW1lZGlhIHByb2Nlc3NpbmcuIFRoZSBzdHVkeSBwcm9ncmFtIGluICJNZWRpYSBFbmdpbmVlcmluZyBhbmQgVGVjaG5vbG9neSIgcmVzdHMgb24gdGhlIHNhbWUgZnVuZGFtZW50YWxzIGFzIGZvciBJbmZvcm1hdGlvbiBUZWNobm9sb2d5LmQCBQ9kFgJmDxUBE0Fib3V0L1Byb2dyYW1zLmFzcHhkGAMFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYCBR1Mb2dpblVzZXJDb250cm9sMSRsb2dpbkJ1dHRvbgUkTG9naW5Vc2VyQ29udHJvbDEkUmVtZW1iZXJNZUNoZWNrYm94BRxMb2dpblVzZXJDb250cm9sMSRNdWx0aVZpZXcxDw9kZmQFNkxvZ2luVXNlckNvbnRyb2wxJEhvbWVwYWdlVG9vbHNNZW51Q29udHJvbDEkTXVsdGlWaWV3MQ8PZGZk++EYs51/1WiGabXN2nlBpWq7B38=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl00'];
if (!theForm) {
theForm = document.ctl00;
}
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=hjWzicBH57aDEOAXMpQVJQ2&t=633566901938396560" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=H0761Oq7Alukyw82KELp8-Txl2kQFm7sZfTkrcnjSDzxZz0PrQZLm48rbx9Jm7dI_LMT2zH0QUfg9RJVLEsm7Q2&t=633566901938396560" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=9NKqPW-jeqHS98DhHZ6Iy5ulSdcD3uOEBYcWmPxYVzi01PBdj_S7yBr5N-59MNCSkIHANMTKEfgCCoAEWIDetGqltgG2yF0m6QP4thTRHlI1&t=633432692861214540" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=9NKqPW-jeqHS98DhHZ6Iy5ulSdcD3uOEBYcWmPxYVzi01PBdj_S7yBr5N-59MNCSkIHANMTKEfgCCoAEWIDetB9rztfIh11Bb3t4nicyu881&t=633432692861214540" type="text/javascript"></script>
<script src="/Default.aspx?_TSM_HiddenField_=ScriptManager1_HiddenField&_TSM_CombinedScripts_=%3b%3bAjaxControlToolkit%2c+Version%3d1.0.10920.32880%2c+Culture%3dneutral%2c+PublicKeyToken%3d28f01b0e84b6d53e%3aen-US%3a816bbca1-959d-46fd-928f-6347d6f2c9c3%3a9ea3f0e2%3ae2e86ef9%3a9e8e87e9%3a1df13a87%3a4c9865be%3aba594826%3a757f92c2" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('ctl00'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>
<!-- Page Container -->
<div id="container">
<!-- Header and Menu -->
<div id="headerAndMenu">
<!-- Title -->
<h1 id="logo">
<a href="http://www.guc.edu.eg" target="_blank">
<img src="Media/Images/HomePage/Logo.png.ashx" alt="The German University in Cairo" /></a></h1>
<h2 id="title">
Faculty of Media Engineering and Technology</h2>
<!-- Title -->
<!-- Menu -->
<div id="menu">
<div id="mainPart">
<div id="aboutMET" onmouseenter="opacity('aboutMETSubMenu',0,100,5)" onmouseleave="opacity('aboutMETSubMenu',100,0,5)">
<div id="aboutMETSubMenu">
<ul id="aboutMETSubMenuList">
<li id="programs"><a class="main" href="About/Programs.aspx">Programs</a> </li>
<li id="degrees"><a class="main" href="About/Degrees.aspx">Degrees</a> </li>
<li id="ourPeople"><a class="main" href="People/">OurPeople</a></li>
<li id="admission"><a class="main" href="About/Admission.aspx">Admission</a> </li>
</ul>
</div>
</div>
<div id="academics" onmouseenter="opacity('academicsSubMenu',0,100,5)" onmouseleave="opacity('academicsSubMenu',100,0,5)">
<div id="academicsSubMenu">
<ul id="academicsSubMenuList">
<li id="underGraduate"><a class="main" href="Courses/Undergrad.aspx">
Undergraduate Courses </a></li>
<li id="graduate"><a class="main" href="Courses/Grad.aspx">
Graduate Courses</a> </li>
<li id="courseCatalogue"><a class="main" href="Courses/">Course
Catalogue</a> </li>
<li id="research"><a class="main" href="Research/">Research</a> </li>
</ul>
</div>
</div>
<div id="extras" onmouseenter="opacity('extrasSubMenu',0,100,5)" onmouseleave="opacity('extrasSubMenu',100,0,5)">
<div id="extrasSubMenu">
<ul id="extrasSubMenuList">
<li id="activities"><a class="main" href="Activities/">Activities</a>
</li>
<li id="onlineTutorials"><a class="main" href="OnlineTutorials/"
>Online Tutorials</a> </li>
<li id="staffBlog"><a class="main" href="#">Staff Blog</a> </li>
<li id="showCase"><a class="main" href="#">Showcase</a> </li>
<li id="forum"><a class="main" href="Forum/">Forum</a> </li>
</ul>
</div>
</div>
<div id="agenda" onmouseenter="opacity('agendaSubMenu',0,100,5)" onmouseleave="opacity('agendaSubMenu',100,0,5)">
<div id="agendaSubMenu">
<ul id="agendaSubMenuList">
<li id="announcements"><a class="main" href="Agenda/Announcements.aspx">Announcements</a>
</li>
<li id="calendar"><a class="main" href="Agenda/">Calendar</a> </li>
<li id="policies"><a class="main" href="About/Policies.aspx">Policies</a> </li>
</ul>
</div>
</div>
</div>
</div>
<!-- /Menu -->
</div>
<!-- /Header and Menu -->
<!-- Content -->
<div id="content">
<!-- Login -->
<div id="login">
<div class="homePageLoginDiv">
<div id="Div1" style="position: relative; top: 5px;">
<div>
<div class="tools-menu-header" id="login_label">
<img style="border-style: none; vertical-align: middle; padding-right: 5px;" src="Media/Icons/key_go.png.ashx"><span
class="label">Login</span></div>
<div class="tools-menu-body" id="tools-menu-div">
<label>
GUC Email
</label>
<div class="leftTBoxSide">
</div>
<div>
<input name="LoginUserControl1$usernameTextBox" type="text" id="LoginUserControl1_usernameTextBox" class="userNameTBox" /></div>
<div class="rightTBoxSide">
</div>
<span id="LoginUserControl1_LoginEmailRequiredFieldValidator" style="color:Red;display:none;"></span>
<span id="LoginUserControl1_LoginEmailFormatValidator" style="color:Red;display:none;"></span>
<label>
Password</label>
<div class="leftTBoxSide">
</div>
<div>
<input name="LoginUserControl1$passwordTextBox" type="password" id="LoginUserControl1_passwordTextBox" class="passwordTBox" /></div>
<div class="rightTBoxSide">
</div>
<span id="LoginUserControl1_LoginPasswordRequiredFieldValidator" style="color:Red;display:none;"></span>
<input type="image" name="LoginUserControl1$loginButton" id="LoginUserControl1_loginButton" class="loginBtn" src="Media/Images/HomePage/goButton.gif.ashx" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("LoginUserControl1$loginButton", "", true, "", "", false, false))" style="border-width:0px;" />
<span class="checkbox"><input id="LoginUserControl1_RememberMeCheckbox" type="checkbox" name="LoginUserControl1$RememberMeCheckbox" /></span>
<label class="checkbox_label" for="LoginUserControl1_RememberMeCheckbox">
Remember me</label>
<a id="LoginUserControl1_forgotPasswordButton" class="forgotPasswordBtn" href="javascript:__doPostBack('LoginUserControl1$forgotPasswordButton','')">Forgot password?</a><span
style="margin-right: 3px;">Student?</span>Register</div>
</div>
</div>
</div>
</div>
<!-- /Login -->
<!-- Search -->
<div id="search">
</div>
<!-- /Search -->
<!-- News -->
<div id="news">
<!-- News Glider-->
<div id="newsGlider">
<div id="previousDiv">
<img src="Media/Images/HomePage/prev.png.ashx" id="previous" alt="Previous" onclick="my_glider.previous();return false;" /></div>
<div class="scroller">
<div class="content">
<input type="hidden" name="newsRepeater$ctl00$idHdnField" id="newsRepeater_ctl00_idHdnField" value="17" />
<div class="section" id='News_17'>
<h2 class="newsTitle">
SmartSoft are the champs
</h2>
<img id="newsRepeater_ctl00_Image1" class="newsImage" alt="MET Stories" src="Repository/NewsComponent/SOriginalFinal.jpg" style="border-width:0px;" />
<p class="newsParagraph">
After competing against CSEN and BI companies. SmartSoft managed to
win the Software Engineering Competition for Spring 2010 after developing an outstanding online tool for automating agile software management. Congratulations to SmartSoft!
</p>
<div id="newsRepeater_ctl00_morelink" style="display:none;">
<a class="newsLink" href=""
target="_blank">more</a>
</div>
</div>
<input type="hidden" name="newsRepeater$ctl01$idHdnField" id="newsRepeater_ctl01_idHdnField" value="1" />
<div class="section" id='News_1'>
<h2 class="newsTitle">
Media Engineering at the GUC
</h2>
<img id="newsRepeater_ctl01_Image1" class="newsImage" alt="MET Stories" src="Repository/NewsComponent/library.jpg" style="border-width:0px;" />
<p class="newsParagraph">
Media Engineering and Technology aims at the evolving field of nearly all aspects of information and multimedia processing. The study program in "Media Engineering and Technology" rests on the same fundamentals as for Information Technology.
</p>
<div id="newsRepeater_ctl01_morelink" style="display: block;">
<a class="newsLink" href="About/Programs.aspx"
target="_blank">more</a>
</div>
</div>
</div>
</div>
<img src="Media/Images/HomePage/next.png.ashx" id="next" alt="Next" onclick="my_glider.next();return false;" /><!--<div id="nextDiv"></div> -->
</div>
</div>
<!-- /News -->
<!-- Footer -->
<div id="footer">
<h5 class="right">
<a href="Feeds/RSS.aspx">
<img src="Media/Icons/rss.png.ashx" alt="RSS" style="border-style: none; position: relative;
top: 3px; padding-right: 2px;" /><b>RSS</b> Feeds</a> <a href="Credits/robusta.aspx">
Credits</a>
</h5>
<h5 class="left">
Copyright © 2008 GUC. All Rights Reserved.</h5>
</div>
<!-- /Footer -->
</div>
<!-- /Content -->
</div>
<!-- /Page Container -->
<!-- Extra Divs -->
<!-- /Extra Divs -->
<div id="glider_script">
<script type="text/javascript" charset="utf-8">
var my_glider = new Glider('newsGlider', {duration:1.0, autoGlide:true, frequency:15});
</script>
</div>
<script type="text/javascript">
//<![CDATA[
var Page_Validators = new Array(document.getElementById("LoginUserControl1_LoginEmailRequiredFieldValidator"), document.getElementById("LoginUserControl1_LoginEmailFormatValidator"), document.getElementById("LoginUserControl1_LoginPasswordRequiredFieldValidator"));
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var LoginUserControl1_LoginEmailRequiredFieldValidator = document.all ? document.all["LoginUserControl1_LoginEmailRequiredFieldValidator"] : document.getElementById("LoginUserControl1_LoginEmailRequiredFieldValidator");
LoginUserControl1_LoginEmailRequiredFieldValidator.controltovalidate = "LoginUserControl1_usernameTextBox";
LoginUserControl1_LoginEmailRequiredFieldValidator.errormessage = "Email required.";
LoginUserControl1_LoginEmailRequiredFieldValidator.display = "None";
LoginUserControl1_LoginEmailRequiredFieldValidator.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
LoginUserControl1_LoginEmailRequiredFieldValidator.initialvalue = "";
var LoginUserControl1_LoginEmailFormatValidator = document.all ? document.all["LoginUserControl1_LoginEmailFormatValidator"] : document.getElementById("LoginUserControl1_LoginEmailFormatValidator");
LoginUserControl1_LoginEmailFormatValidator.controltovalidate = "LoginUserControl1_usernameTextBox";
LoginUserControl1_LoginEmailFormatValidator.errormessage = "Must be in the form of user#student.guc.edu.eg OR user#guc.edu.eg";
LoginUserControl1_LoginEmailFormatValidator.display = "None";
LoginUserControl1_LoginEmailFormatValidator.evaluationfunction = "RegularExpressionValidatorEvaluateIsValid";
LoginUserControl1_LoginEmailFormatValidator.validationexpression = "\\w+([-+.\']\\w+)*#(student.)?guc.edu.eg";
var LoginUserControl1_LoginPasswordRequiredFieldValidator = document.all ? document.all["LoginUserControl1_LoginPasswordRequiredFieldValidator"] : document.getElementById("LoginUserControl1_LoginPasswordRequiredFieldValidator");
LoginUserControl1_LoginPasswordRequiredFieldValidator.controltovalidate = "LoginUserControl1_passwordTextBox";
LoginUserControl1_LoginPasswordRequiredFieldValidator.errormessage = "Password required.";
LoginUserControl1_LoginPasswordRequiredFieldValidator.display = "None";
LoginUserControl1_LoginPasswordRequiredFieldValidator.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
LoginUserControl1_LoginPasswordRequiredFieldValidator.initialvalue = "";
//]]>
</script>
<script type="text/javascript">
<!--
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
ValidatorOnLoad();
}
function ValidatorOnSubmit() {
if (Page_ValidationActive) {
return ValidatorCommonOnSubmit();
}
else {
return true;
}
}
// -->
</script>
<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
Sys.Application.add_init(function() {
$create(AjaxControlToolkit.ValidatorCalloutBehavior, {"closeImageUrl":"/WebResource.axd?d=E9XUtTpBpgn1nrqvm7JdsQNAiTSrs01kvYMfJ6_c6indZV0XUSo9nn5ewbqAXA5hefaIKnoyXSIFnFPdZX8u_dwAMV0u0RfKJgPDjFETh3g1&t=633887970297152468","highlightCssClass":"invalidInput","id":"LoginUserControl1_LoginEmailRequiredFieldValidatorExtender","warningIconImageUrl":"/WebResource.axd?d=E9XUtTpBpgn1nrqvm7JdsQNAiTSrs01kvYMfJ6_c6indZV0XUSo9nn5ewbqAXA5hpBwM9IEYB0L_JPlcVCV_StBVa8rc0SgI1L1ARCQ2e4o1&t=633887970297152468"}, null, null, $get("LoginUserControl1_LoginEmailRequiredFieldValidator"));
});
Sys.Application.add_init(function() {
$create(AjaxControlToolkit.ValidatorCalloutBehavior, {"closeImageUrl":"/WebResource.axd?d=E9XUtTpBpgn1nrqvm7JdsQNAiTSrs01kvYMfJ6_c6indZV0XUSo9nn5ewbqAXA5hefaIKnoyXSIFnFPdZX8u_dwAMV0u0RfKJgPDjFETh3g1&t=633887970297152468","highlightCssClass":"invalidInput","id":"LoginUserControl1_LoginEmailFormatValidatorExtender","warningIconImageUrl":"/WebResource.axd?d=E9XUtTpBpgn1nrqvm7JdsQNAiTSrs01kvYMfJ6_c6indZV0XUSo9nn5ewbqAXA5hpBwM9IEYB0L_JPlcVCV_StBVa8rc0SgI1L1ARCQ2e4o1&t=633887970297152468"}, null, null, $get("LoginUserControl1_LoginEmailFormatValidator"));
});
document.getElementById('LoginUserControl1_LoginEmailRequiredFieldValidator').dispose = function() {
Array.remove(Page_Validators, document.getElementById('LoginUserControl1_LoginEmailRequiredFieldValidator'));
}
document.getElementById('LoginUserControl1_LoginEmailFormatValidator').dispose = function() {
Array.remove(Page_Validators, document.getElementById('LoginUserControl1_LoginEmailFormatValidator'));
}
document.getElementById('LoginUserControl1_LoginPasswordRequiredFieldValidator').dispose = function() {
Array.remove(Page_Validators, document.getElementById('LoginUserControl1_LoginPasswordRequiredFieldValidator'));
}
//]]>
</script>
</form>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-6040050-1");
pageTracker._trackPageview();
</script>
</body>
</html>
You can usually get the source for any website by hitting ctrl+u (at least for Chrome)

You need to read up on XHR.
See here: http://code.google.com/chrome/extensions/xhr.html
This will let you load the contents of http://met.guc.edu.eg into a variable.
Then you you need to read up on regexp, which would let you extract the information that you want.
It is almost impossible to give a full answer without actually doing it.
You may find it easier to load the content in an Iframe that you control the dimensions / scroll of.