I'm extremely new to HTML, CSS and jQuery and I'm trying to make a simple table which accepts user input, stores it in rows of my table in HTML and therefore generates a delete button in each row. Problem is that I cannot get it to work even though I follow the tutorials of my class as well as the YT tutorials step by step. So far my code is:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="">
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="js/index.js"></script>
<title>Welcome to our library!</title>
</head>
<body>
<div class="container">
<h1>Input your Favourite Book's Information</h1>
<p Make sure that all information is valid></p>
</div>
<div class="row">
<div class="indic">
<input type="text" class="ourForm" placeholder="Book Title" id="bookTitle">
</div>
<div class="indic">
<input type="text" class="ourForm" placeholder="Year of Publication" id="bookYear">
</div>
</div>
<div class="row1">
<div class="colName">
<table id="myTable" class="tableStruc table-bordered">
<thead>
<tr>
<th scope="col">Book Title</th>
<th scope="col">Year of Publication</th>
</tr>
</thead>
<tbody>
<!--Table data will be input here-->
</tbody>
</table>
</div>
<button type="button" id="regbtn" class="btn btn-success">Register Book</button>
</body>
</html>
jquery #.js:
$document.ready(function(){
var blankRow = "<tr><td>Nothing to display</td></tr>";
$("#myTable tbody").append(blankRow); //will add an ampty row every time the page reloads
$("#regbtn").click(function(){
var btitle = $("#bookTitle").val().trim();
var byear = $("#bookYear").val().trim();
if(btitle!="" && byear!=""){
if($("#myTable tbody").children().children().length==1){
$("#myTable tbody").html("");
}
var addRow = "<tr><td>"+btitle+"</td><td>"+byear+"</td><td><button class='rembtn'>Delete Row</button></td></tr>";
$("#myTable tbody").append(addRow);
$("#btitle").val("");
$("#byear").val("");
//rembtn function to remove the row and its contents
$("rembtn").click(function(){
$(this).parent().parent().remove();
if($("#myTable tbody").children().children().length==0){
$("#myTable tbody").append(blankRow);
}
});
}
else{
alert("Error: Please provide input for all fields")
}
});
});
I'd greatly appreciate any help on this matter.
I got it working.
The problem you have is you used $document instead of $(document)
Also for your delete function, you can use an inline onclick function.
$(document).ready(function(){
var blankRow = "<tr><td>Nothing to display</td></tr>";
$("#myTable tbody").append(blankRow); //will add an ampty row every time the page reloads
$("#regbtn").click(function(){
var btitle = $("#bookTitle").val().trim();
var byear = $("#bookYear").val().trim();
if(btitle!="" && byear!=""){
if($("#myTable tbody").children().children().length==1){
$("#myTable tbody").html("");
}
var addRow = "<tr><td>"+btitle+"</td><td>"+byear+"</td><td><button class='rembtn' onclick='remove(this)'>Delete Row</button></td></tr>";
$("#myTable tbody").append(addRow);
$("#btitle").val("");
$("#byear").val("");
//rembtn function to remove the row and its contents
}
else{
alert("Error: Please provide input for all fields")
}
});
});
function remove(elem){
$(elem).parent().parent().remove();
if($("#myTable tbody").children().children().length==0){
var blankRow = "<tr><td>Nothing to display</td></tr>";
$("#myTable tbody").append(blankRow);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="">
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="js/index.js"></script>
<title>Welcome to our library!</title>
</head>
<body>
<div class="container">
<h1>Input your Favourite Book's Information</h1>
<p Make sure that all information is valid></p>
</div>
<div class="row">
<div class="indic">
<input type="text" class="ourForm" placeholder="Book Title" id="bookTitle">
</div>
<div class="indic">
<input type="text" class="ourForm" placeholder="Year of Publication" id="bookYear">
</div>
</div>
<div class="row1">
<div class="colName">
<table id="myTable" class="tableStruc table-bordered">
<thead>
<tr>
<th scope="col">Book Title</th>
<th scope="col">Year of Publication</th>
</tr>
</thead>
<tbody>
<!--Table data will be input here-->
</tbody>
</table>
</div>
<button type="button" id="regbtn" class="btn btn-success">Register Book</button>
</body>
</html>
See the Image Section commented below
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>ORDER CONFIRMATION</title>
</head>
<body>
<h3>www.HobbyShop.com</h3>
<h3>Thank You for your purchase, <span th:utext="${purchase.getCustomer().getFirstName()}"></span></h3>
<h3>Order summary</h3>
<div>
<table>
<tr>
<th width="20%">Product Image</th>
<th width="50%">Product Detail</th>
<th width="30%"></th>
</tr>
<tr th:each="orderItem : ${purchase.getOrderItems()}">
<!-- Image section -->
<td>
<p> <span th:utext="${orderItem.imageUrl}"></span> </p>
<img th:src="#{orderItem.imageUrl}" width="150px"/>
</td>
<!-- end of image section -->
<td>
<p> <span th:utext="${ orderItem.name }"></span> </p>
<p>Unit Price: <span th:utext="${ orderItem.unitPrice}"></span> </p>
<p>Quantity: <span th:utext="${ orderItem.quantity}"></span> </p>
</td>
<td>
<p>Subtotal: <span th:utext="${ orderItem.quantity * orderItem.unitPrice }"></span> </p>
</td>
</tr>
</table>
</div>
<h5>Total Quantity: <span th:utext="${purchase.getOrder().getTotalQuantity()}"></span></h5>
<h5>Total Price: <span th:utext="${purchase.getOrder().getTotalPrice()}"></span></h5>
<h3>Order Details</h3>
<h5>Your order will ship to:</h5>
<h5 style="margin: 0" > <span th:utext="${purchase.getCustomer().getFirstName()}"></span> <span th:utext="${purchase.getCustomer().getLastName()}" ></span> </h5>
<h5 style="margin: 0"> <span th:utext="${purchase.getShippingAddress().getStreet()}" ></span> </h5>
<h5 style="margin: 0"> <span th:utext="${purchase.getShippingAddress().getCity()}"></span>, <span th:utext="${purchase.getShippingAddress().getState()}"></span>, <span th:utext="${purchase.getShippingAddress().getZipCode()}" ></span> </h5>
<h5 style="margin: 0"> <span th:utext="${purchase.getShippingAddress().getCountry()}" ></span> </h5>
<h5>Your order Tracking Number: <span th:utext="${purchaseResponse.getOrderTrackingNumber()}"></span> </h5>
</body>
</html>
In <p> <span th:utext="${orderItem.imageUrl}"></span> </p> I can see the image url which is AWS s3 object url where image is stored.
Image URL: https://elasticbeanstalk-us-east-2-157391262832.s3.us-east-2.amazonaws.com/Books/Rafi12534#Gmail.com/ArtOfComputerProgramming.jpg
But In <img th:src="#{orderItem.imageUrl}" width="150px"/> image url is not found.
If i hardcode the image url like this:
<img th:src="#{https://elasticbeanstalk-us-east-2-157391262832.s3.us-east-2.amazonaws.com/Books/Rafi12534#Gmail.com/ArtOfComputerProgramming.jpg}" width="150px"/>
it works.
To me it seems like in img tag we are not getting the img url. but in th:utext image url is shown
The correct syntax for using a ${...} expression inside of a #{...} expression is:
<img th:src="#{${orderItem.imageUrl}}" width="150px" />
(See the standard URL syntax documentation.) In this case, however, there really is no reason to use the standard URL syntax at all. You can simply use the variable directly.
<img th:src="${orderItem.imageUrl}" width="150px" />
The reason #{orderItem.imageUrl} fails is because Thymeleaf is treating orderItem.imageUrl as a string, and not a variable (equivalent to #{'orderItem.imageUrl'} which will resolve to <img src="/context/orderItem.imageUrl" width="150px" /> -- you can see this by simply viewing the source and noticing that your variable wasn't parsed).
I have a table with 2 columns and 2 rows like this
I would like to make the elements of the first column clickable and when one clicks on it, it appears another table under that row.
I thought of adding an href but this doesnt work:
<font face="Arial, Helvetica, Geneva">
<table id="tableInfo" data-role=table class="ui-responsive" width="100%">
<tbody>
<tr>
<a href=#info1 >
<table id="tableInfoNested1" data-role=table class="ui-responsive" width="100%">
<tbody>
<tr>Address</tr>
<tr>City</tr>
</tbody>
</table>
Name
</a>
</tr>
<tr>
<a href=#info2 >
<table id="tableInfoNested2" data-role=table class="ui-responsive" width="100%">
<tbody>
<tr>Test</tr>
<tr>Test</tr>
</tbody>
</table>
Code
</a>
</tr>
</tbody>
</table>
</font>
Try this...
<a id="LogicLink" onclick="Table1();" href="#">Name</a>
<table id="TableNested1" style="display:none">
<tr><td>Adresss<td/><tr/>
<tr><td>City<td/><tr/>
<table/>
<br/>
<a id="Link" onclick="Table2();" href="#">Code</a>
<table id="TableNested2" style="display:none">
<tr><td>Test<td/><tr/>
<tr><td>Test<td/><tr/>
</table>
function Table1()
{
var elem=document.getElementById("TableNested1");
var hide = elem.style.display =="none";
if (hide) {
elem.style.display="table";
}
else {
elem.style.display="none";
}
}
function Table2()
{
var elem=document.getElementById("TableNested2");
var hide = elem.style.display =="none";
if (hide) {
elem.style.display="table";
}
else {
elem.style.display="none";
}
}
http://jsfiddle.net/Wfxpu/180/
Have a look at this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Collapsible Lists</h1>
</div>
<div data-role="main" class="ui-content">
<h2>My Phonebook</h2>
<div data-role="collapsible">
<h4>A</h4>
<ul data-role="listview">
<li>Adele</li>
<li>Agnes</li>
</ul>
</div>
<div data-role="collapsible">
<h4>B</h4>
<ul data-role="listview">
<li>Billy</li>
<li>Bob</li>
</ul>
</div>
<div data-role="collapsible">
<h4>C</h4>
<ul data-role="listview">
<li>Calvin</li>
<li>Cameron</li>
<li>Chloe</li>
<li>Christina</li>
</ul>
</div>
</div>
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
</body>
</html>
http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_lists_collapsible
OR
http://jasalguero.com/ledld/development/web/expandable-list/
You will have to apply the same principle to your table
i'm trying to replicate what you can see in the image here in jquery to make a touch enabled version of an existing application:
I'm using jquery-ui sliders and i'd like to keep using them because i have a lot of business logic tied to them, actually they have this look:
I need help for the css and html part, i don't know how to make the effect where the "slider" gets filled when the user click on the "plus" button and on how i should organize my HTML to achieve that look.
My markup is as follows:
<table>
<tr>
<td>
<div id="timeName">
Tempo a disposizione
</div>
<div id="travelTime">
<div class="selectedHandler"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class='paramName'>
Architecture and Heritage
</div>
<div id="Architecture_and_Heritage" class="param" data-id="3">
<div class="selectedHandler"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class='paramName'>
Culture
</div>
<div id="Culture" class="param" data-id="5">
<div class="selectedHandler"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class='paramName'>
Fairs Performances and Special Events
</div>
<div id="Fairs_Performances_and_Special_Events" class="param" data-id="6">
<div class="selectedHandler"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class='paramName'>
Food and Drink
</div>
<div id="Food_and_Drink" class="param" data-id="1">
<div class="selectedHandler"></div>
</div>
</td>
</tr>
</table>
Is this any help? It's not really styled but sort of gives the idea: http://jsfiddle.net/TU95t/
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<script>
$(function() {
var select = $( "#demo" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
min: 1,
max: 6,
value: 1,
range: "min",
change: function(event, ui) {
var sliderValue = $( "#slider" ).slider( "option", "value" );
$('#sliderPosition').html(sliderValue);
}
});
$('#increase').click(function() {
var sliderCurrentValue = $( "#slider" ).slider( "option", "value" );
slider.slider( "value", sliderCurrentValue + 1 );
});
$('#decrease').click(function() {
var sliderCurrentValue = $( "#slider" ).slider( "option", "value" );
slider.slider( "value", sliderCurrentValue - 1 );
});
});
</script>
<div id="demo">
<div id="sliderPosition">1</div>
</div><!-- End demo -->
<div id="increase" style="width:200px; height:30px; border: 1px solid #ccc;">
+ Increase Slider Value
</div>
<div id="decrease" style="width:200px; height:30px; border: 1px solid #ccc;">
- Decrease Slider Value
</div>
</body>
</html>
<!-- End demo -->
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.