I had taken and found the following code for a navigation menu that I was interested in using however just had a quick question if anyone can help. What I am wanting to take and see if it was possible, was to take and make the color stretch to the top of the screen to fill the gap in the following code. Any help would be appreciated thanks in advance. Any questions let me know. Area in question is in the header area where it says "Some Text Here" wanting to go to the top of screen if possible for the color.
Here is the code
<!doctype html>
<html lang="en-US" prefix="og: http://ogp.me/ns#" class="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://w3bits.com/wp-content/themes/bits-v2/labs.css">
<title>Site Title Here</title>
<script>
var script = function(src) {
var e = document.createElement('script');
e.async = true;
e.src = src;
document.getElementsByTagName('head')[0].appendChild(e);
};
var style = function(css) {
var e = document.createElement('style');
if (e.styleSheet) {
e.styleSheet.cssText = css;
} else {
e.appendChild(document.createTextNode(css));
}
document.getElementsByTagName('head')[0].appendChild(e);
}
var toggleDisplay = function(el, display, class_el) {
var EL = document.querySelector(el);
if (EL.style.display == display) {
EL.style.display = "none";
if (class_el) EL.classList.add(class_el);
} else {
EL.style.display = display;
if (class_el) EL.classList.add(class_el);
}
};
if (!showAds) {
setTimeout(function() {
var w = document.querySelector('.wrapper');
if (typeof ga !== 'undefined') {
ga('send', 'event', 'Adblock', 'Yes', {
'nonInteraction': 1
});
} else if (typeof _gaq !== 'undefined') {
_gaq.push(['_trackEvent', 'Adblock', 'Yes', undefined, undefined, true]);
}
var ab_a = document.createElement("div"),
w_p = w.parentNode;
w_p.classList.add("ab-active");
ab_a.setAttribute("class", "ab-alert");
w_p.parentNode.insertBefore(ab_a, w_p);
ab_a.innerHTML = '<p>I never intend to spoil your experience here, but this is important. I want to share with you that this website exists totally because of adverts money.</p><p>If you whitelist my website in your adblocker software, I won\'t show you more than two Google ads per page, and no popups. It\'s a promise.</p><p>Thanks for your patience :-)</p><p class="small" style="opacity: .75">This message disappears by itself in 15 seconds.</p>';
var ab = document.querySelector(".ab-alert");
document.documentElement.setAttribute("oncontextmenu", "return false");
style('.ab-alert{box-sizing:border-box;line-height:1.75}.site-wrapper{transition: opacity .5s ease-in-out;}.ab-active{ opacity: .0125; pointer-events: none;position:fixed;width:100%;}.ab-alert,.ab-active{user-select:none;}.ab-alert{opacity: 1;transition: opacity .5s ease-in-out;font-size: 15px;position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%;max-width: 450px; background-color: white; padding: 2.5em}');
setInterval(function() {
ab.style.opacity = "0";
ab.remove();
w_p.classList.remove("ab-active");
document.documentElement.removeAttribute("oncontextmenu");
}, 15000);
}, 1000);
}
script("//s3.buysellads.com/ac/bsa.js");
</script>
<!-- This site is optimized with the Yoast SEO plugin v5.9.1 - https://yoast.com/wordpress/plugins/seo/ -->
<link rel="canonical" href="http://w3bits.com/labs/css-responsive-nav/" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="A CSS-only Touch-friendly Navigation Menu - W3Bits" />
<meta property="og:description" content="Navigation ▾ Sample Dropdown ▾ ▾ Item 1.1 Item 1.2 Item 1.3 Item 1.4 2-level DD ▾ ▾ Item 2.1 Item 2.2 ▸ ▾ Item 2.2.1 Item 2.2.2 Item 2.2.3 Item 2.3 Multiple Levels ▾ ▾ 3.1 ▸ ▾ 3.1.1 3.1.2 3.1.3 3.1.4 3.2 ▸ ▾ 3.2.1 3.2.2 3.2.3 3.3 ▸ ▾ 3.3.1 3.3.2 3.2.2 …" />
<meta property="og:url" content="http://w3bits.com/labs/css-responsive-nav/" />
<meta property="og:site_name" content="W3Bits" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="Navigation ▾ Sample Dropdown ▾ ▾ Item 1.1 Item 1.2 Item 1.3 Item 1.4 2-level DD ▾ ▾ Item 2.1 Item 2.2 ▸ ▾ Item 2.2.1 Item 2.2.2 Item 2.2.3 Item 2.3 Multiple Levels ▾ ▾ 3.1 ▸ ▾ 3.1.1 3.1.2 3.1.3 3.1.4 3.2 ▸ ▾ 3.2.1 3.2.2 3.2.3 3.3 ▸ ▾ 3.3.1 3.3.2 3.2.2 […]" />
<meta name="twitter:title" content="A CSS-only Touch-friendly Navigation Menu - W3Bits" />
<meta name="twitter:site" content="#w3bits_" />
<meta name="twitter:creator" content="#w3bits_" />
<script type='application/ld+json'>
{
"#context": "http:\/\/schema.org",
"#type": "WebSite",
"#id": "#website",
"url": "http:\/\/w3bits.com\/",
"name": "W3Bits",
"potentialAction": {
"#type": "SearchAction",
"target": "http:\/\/w3bits.com\/?s={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<!-- / Yoast SEO plugin. -->
<link rel='dns-prefetch' href='//s.w.org' />
<link rel='https://api.w.org/' href='http://w3bits.com/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://w3bits.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://w3bits.com/wp-includes/wlwmanifest.xml" />
<link rel='shortlink' href='http://w3bits.com/?p=2474' />
<link rel="alternate" type="application/json+oembed" href="http://w3bits.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fw3bits.com%2Flabs%2Fcss-responsive-nav%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://w3bits.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fw3bits.com%2Flabs%2Fcss-responsive-nav%2F&format=xml" />
<link rel="stylesheet" href="http://w3bits.com/files/css/css-responsive-nav.css">
</head>
<body class="labs-template-default single single-labs postid-2474">
<div class="container">
<div class="wrapper">
<div class="bup" id="bup">
<style>
.w3bits-labs {
width: 468px;
height: 60px;
margin: 1.5em 0 0
}
#media(min-width: 728px) {
.w3bits-labs {
width: 728px !important;
height: 90px !important;
}
}
#media(max-width:727px) and (min-width: 468px) {
.w3bits-labs {
width: 468px !important;
height: 60px !important;
}
}
#media(max-width: 467px) and (min-width: 234px) {
.w3bits-labs {
width: 234px !important;
height: 60px !important;
}
}
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- W3Bits Labs -->
<ins class="adsbygoogle w3bits-labs" style="display:block" data-ad-client="ca-pub-1581655830066906" data-ad-slot="9749450056" data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div style="background:#0099cc; font-size:22px; text-align:center; color:#000; font-weight:bold; height:auto; padding-top:50px;">Some Text Here !!</div>
<div id="wrap">
<nav id="menu">
<label for="tm" id="toggle-menu">Navigation Menu <span class="drop-icon">▾</span></label>
<input type="checkbox" id="tm">
<ul class="main-menu cf">
<li>Home</li>
<li><a href="#">Dropdown
<span class="drop-icon">▾</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm0">▾</label>
</a>
<input type="checkbox" id="sm0">
<ul class="sub-menu">
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
<li>Item 1.4</li>
</ul>
</li>
<li><a href="#">2-level DD
<span class="drop-icon">▾</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm1">▾</label>
</a>
<input type="checkbox" id="sm1">
<ul class="sub-menu">
<li>Item 2.1</li>
<li><a href="#">Item 2.2
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm2">▾</label>
</a>
<input type="checkbox" id="sm2">
<ul class="sub-menu">
<li>Item 2.2.1</li>
<li>Item 2.2.2</li>
<li>Item 2.2.3</li>
</ul>
</li>
<li>Item 2.3</li>
</ul>
</li>
<li><a href="#">Multiple Levels
<span class="drop-icon">▾</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm3">▾</label>
</a>
<input type="checkbox" id="sm3">
<ul class="sub-menu">
<li><a href="">3.1
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm4">▾</label>
</a>
<input type="checkbox" id="sm4">
<ul class="sub-menu">
<li>3.1.1</li>
<li>3.1.2</li>
<li>3.1.3</li>
<li>3.1.4</li>
</ul>
</li>
<li><a href="">3.2
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm5">▾</label>
</a>
<input type="checkbox" id="sm5">
</a>
<ul class="sub-menu">
<li>3.2.1</li>
<li>3.2.2</li>
<li>3.2.3</li>
</ul>
</li>
<li><a href="">3.3
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm6">▾</label>
</a>
<input type="checkbox" id="sm6">
</a>
<ul class="sub-menu">
<li>3.3.1</li>
<li>3.3.2</li>
<li>3.2.2</li>
<li>3.3.4</li>
<li>3.3.5</li>
</ul>
</li>
</ul>
</li>
<li>Sample #2</li>
<li><a href="#">Another DD
<span class="drop-icon">▾</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm8">▾</label>
</a>
<input type="checkbox" id="sm8">
</a>
<ul class="sub-menu">
<li>4.1</li>
<li>4.2</li>
<li>4.2</li>
<li>4.4</li>
</ul>
</li>
</ul>
</nav>
</div>
<nav class="cf lab-nav lab-nav--fixed lab-nav--bottom lab-nav--light">
<a href="http://w3bits.com/css-responsive-nav-menu/" title="Back to the article" class="lab-article-link">
<svg class="icon icon-right-open icon-reverse">
<use xlink:href="http://w3bits.com/wp-content/themes/bits-v2/assets/img/icons.svg#icon-right-open"></use>
</svg><span> Article</span></a>
<ul class="lab-share">
<li>
<a href="http://www.facebook.com/sharer/sharer.php?u=http://w3bits.com/css-responsive-nav-menu/" title="Share on Facebook">
<svg class="icon icon-facebook">
<use xlink:href="http://w3bits.com/wp-content/themes/bits-v2/assets/img/icons.svg#icon-facebook"></use>
</svg>
</a>
</li>
<!--
-->
<li>
<a href="https://twitter.com/intent/tweet?original_referer=http://w3bits.com/css-responsive-nav-menu/&text=$article_title&url=http://w3bits.com/css-responsive-nav-menu/&via=w3bits_" title="Tweet">
<svg class="icon icon-twitter">
<use xlink:href="http://w3bits.com/wp-content/themes/bits-v2/assets/img/icons.svg#icon-twitter"></use>
</svg>
</a>
</li>
<!--
-->
<li>
<a href="https://plus.google.com/share?url=http://w3bits.com/css-responsive-nav-menu/" title="Share on Google+">
<svg class="icon icon-gplus">
<use xlink:href="http://w3bits.com/wp-content/themes/bits-v2/assets/img/icons.svg#icon-gplus"></use>
</svg>
</a>
</li>
<!--
-->
<li>
<a href="javascript:void((function(d){var%20e=d.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','//assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);d.body.appendChild(e)})(document));" title="Pin-it on Pinterest">
<svg class="icon icon-pinterest">
<use xlink:href="http://w3bits.com/wp-content/themes/bits-v2/assets/img/icons.svg#icon-pinterest"></use>
</svg>
</a>
</li>
<!--
-->
<li>
<a href="http://www.addthis.com/bookmark.php?url=http://w3bits.com/css-responsive-nav-menu/" class="share-link" rel="external nofollow" title="Share the love" target="_blank">
<svg class="icon icon-share">
<use xlink:href="http://w3bits.com/wp-content/themes/bits-v2/assets/img/icons.svg#icon-share"></use>
</svg><span></span></a>
</li>
</ul>
</nav>
<svg class="icon icon-plus"><use xlink:href="http://w3bits.com/wp-content/themes/bits-v2/assets/img/icons.svg#icon-plus"></use></svg> Follow
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-10703354-8', 'w3bits.com');
ga('require', 'displayfeatures');
ga('send', 'pageview');
var toggle_menu = document.querySelector("#toggle_menu"),
toggle_search = document.querySelector("#toggle_search");
if (toggle_menu) {
toggle_menu.addEventListener("click", function() {
toggleDisplay("#main-nav", "block", false);
toggle_menu.classList.toggle("active");
toggle_menu.children[0].classList.toggle("icon-close");
}, false);
}
if (toggle_search) {
toggle_search.addEventListener("click", function() {
toggleDisplay("#search", "block", false);
toggle_search.classList.toggle("active");
toggle_search.children[0].classList.toggle("icon-close");
}, false);
}
</script>
<script type='text/javascript' src='http://w3bits.com/wp-content/themes/bits-v2/assets/js/prettify.js'></script>
<script type='text/javascript'>
prettyPrint()
</script>
</div>
</body>
</html>
There is google ads thats not loading at the very top and a div has a margin.
Do the following to get rid of the space above the site/page
1.Look for and delete the following:
<ins class="adsbygoogle w3bits-labs" style="display:block" data-ad-client="ca-pub-1581655830066906" data-ad-slot="9749450056" data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
2.Next your div with bup class and id has a margin. Remove the margin and you are good to go:
.bup {
margin: 0 auto 2.5em;
position: relative;
z-index: 9999;
display: flex;
justify-content: center;
}
.bup can found in labs.css
Try
<div style="background:#0099cc; font-size:22px; text-align:center; color:#000; font-weight:bold; height:auto; padding-top:50px;width:100%;overflow:hidden;">Some Text Here !!</div>
Let me know how it goes.
See it here:
https://jsfiddle.net/duqrqLpg/1/
Related
im doing a website for videogames news and updates.I have to add a translation option, so i decided to add google translate button, but it disables the links in the menu on the right side.Please help!
HTML:
<!DOCTYPE html>
<head>
<title> GameDog | Video games info </title>
<meta charset = "UTF-8">
<link rel="stylesheet" type = "text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<section class="page">
<nav>
<div class="logo">
<img src = "gamedoglogo.png">
<p> <b> GameDog </b> </p>
</div>
<div>
<ul>
<li>
<div class="toggle"></div>
</li>
<li id="aboutme">About me</li>
<li id="news">
News about ↓
<ul>
<li> Fortnite</li>
<li> Rocket League</li>
<li> League of Legends</li>
<li> CS:GO</li>
</ul>
</li>
<li id="main">Home</li>
</ul>
</div>
</nav>
<h1 class="topic"> Home Page </h1>
<div class = "card-info">
<h3> Hey Gamers, </h3>
<br>
<h4> welcome to the site. Here you can find the latest news about your favourite games. We provide information about the current updates, changes and improvements. Here, in the site, you can also find the patch notes for the last update of your favourite games. Explore by clicking the button below or the News section above.</h4>
</div>
<div class = "button">
Explore
</div>
<div class="social">
<ul>
<li> <img src="facebook%20white.png", id="facebook-main"></li>
<li> <img src="Black-icon-Instagram-logo-transparent-PNG.png", id="instagram-main"></li>
<li> <img src="Black-icon-Twitter-logo-transparent-PNG.png", id="twitter-main"></li>
</ul>
</div>
<div class="translate-1">
<div id="google_translate_element"></div>
<span>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en', includedLanguages: 'de,it,fr,ru,tr,bg', autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</span>
</div>
</section>
<div class="menu">
<ul>
<li> Home </li>
<li> News </li>
<li> About me </li>
</ul>
<div class="social-menu">
<ul>
<li> <img src="toppng.com-facebook-black-white-icon-facebook-face-book-png-facebook-icon-for-footer-473x473.png", id="facebook-menu"></li>
<li> <img src="Black-icon-Instagram-logo-transparent-PNG.png", id = "instagram-menu"></li>
<li> <img src="Black-icon-Twitter-logo-transparent-PNG.png", id="twitter-menu"></li>
</ul>
</div>
</div>
<script>
const menuToggle = document.querySelector('.toggle')
const page = document.querySelector('.page')
menuToggle.addEventListener('click', function() {
menuToggle.classList.toggle('active')
page.classList.toggle('active')
})
</script>
<script>
window.addEventListener("scroll", function(){
var navbar = document.querySelector("nav");
var menu = document.querySelector(".menu");
navbar.classList.toggle("sticky", window.scrollY > 0);
menu.classList.toggle("sticky", window.scrollY > 0);
})
</script>
</body>
CSS:
.menu{
position:absolute;
background-color:#ffd700;
top:0;
right:0;
width:15.62vw;
min-height:100vh;
display:flex;
justify-content: center;
align-items:center;
z-index:-5;
}
.menu.sticky{
position:fixed;
}
.menu ul{
position:relative;
list-style:none;
}
.menu ul li{
padding:1.04vh 1.04vw;
}
.menu ul li a{
text-decoration: none;
color:black;
font-size:4.5ch;
}
.menu ul li a:hover{
color:dimgray;
}
.translate-1{
position:absolute;
left:3vw;
top:16vh;
display:flex;
justify-content: center;
align-items:center;
}
.translate-2{
position:absolute;
left:3vw;
top:76vh;
display:flex;
justify-content: center;
align-items:center;
}
Here are some photos:
this is the page with the translate button
this is the menu on the right, when opened
The links in the menu, should become gray when u hover on them, but due to the google translate button, they don't. When i remove the google translate button, it works, so the problem is there.
JS for the menu is included in the html
And also, im really sorry for my bad formatting, im new to this :(
Your menu has a negative z-index value, so it's just falling behind everything. Make it a positive value or remove it altogether and you're set. If you have a specific reason for using the z-index on the menu, then you'll need to add it to the other elements as well so they're layering correctly and the menu items are accessible.
SO's snippet doesn't seem to like the Google translate script so here's a fiddle that shows that it still works with the z-index property modified:
https://jsfiddle.net/astombaugh/hwo73b64/8/
.menu {
position: absolute;
background-color: #ffd700;
top: 0;
right: 0;
width: 15.62vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.menu.sticky {
position: fixed;
}
.menu ul {
position: relative;
list-style: none;
}
.menu ul li {
padding: 1.04vh 1.04vw;
}
.menu ul li a {
text-decoration: none;
color: black;
font-size: 4.5ch;
}
.menu ul li a:hover {
color: dimgray;
}
.translate-1 {
position: absolute;
left: 3vw;
top: 16vh;
display: flex;
justify-content: center;
align-items: center;
}
.translate-2 {
position: absolute;
left: 3vw;
top: 76vh;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<head>
<title> GameDog | Video games info </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<section class="page">
<nav>
<div class="logo">
<img src="gamedoglogo.png">
<p> <b> GameDog </b> </p>
</div>
<div>
<ul>
<li>
<div class="toggle"></div>
</li>
<li id="aboutme">About me</li>
<li id="news">
News about ↓
<ul>
<li> Fortnite</li>
<li> Rocket League</li>
<li> League of Legends</li>
<li> CS:GO</li>
</ul>
</li>
<li id="main">Home</li>
</ul>
</div>
</nav>
<h1 class="topic"> Home Page </h1>
<div class="card-info">
<h3> Hey Gamers, </h3>
<br>
<h4> welcome to the site. Here you can find the latest news about your favourite games. We provide information about the current updates, changes and improvements. Here, in the site, you can also find the patch notes for the last update of your favourite
games. Explore by clicking the button below or the News section above.</h4>
</div>
<div class="button">
Explore
</div>
<div class="social">
<ul>
<li>
<img src="facebook%20white.png" , id="facebook-main">
</li>
<li>
<img src="Black-icon-Instagram-logo-transparent-PNG.png" , id="instagram-main">
</li>
<li>
<img src="Black-icon-Twitter-logo-transparent-PNG.png" , id="twitter-main">
</li>
</ul>
</div>
<div class="translate-1">
<div id="google_translate_element"></div>
<span>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en', includedLanguages: 'de,it,fr,ru,tr,bg', autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</span>
</div>
</section>
<div class="menu">
<ul>
<li> Home </li>
<li> News </li>
<li> About me </li>
</ul>
<div class="social-menu">
<ul>
<li>
<img src="toppng.com-facebook-black-white-icon-facebook-face-book-png-facebook-icon-for-footer-473x473.png" , id="facebook-menu">
</li>
<li>
<img src="Black-icon-Instagram-logo-transparent-PNG.png" , id="instagram-menu">
</li>
<li>
<img src="Black-icon-Twitter-logo-transparent-PNG.png" , id="twitter-menu">
</li>
</ul>
</div>
</div>
<script>
const menuToggle = document.querySelector('.toggle')
const page = document.querySelector('.page')
menuToggle.addEventListener('click', function() {
menuToggle.classList.toggle('active')
page.classList.toggle('active')
})
</script>
<script>
window.addEventListener("scroll", function() {
var navbar = document.querySelector("nav");
var menu = document.querySelector(".menu");
navbar.classList.toggle("sticky", window.scrollY > 0);
menu.classList.toggle("sticky", window.scrollY > 0);
})
</script>
</body>
The treeview example of the WAI-ARIA Authoring Practices shows how to have a tree with some items being expandable parent nodes, and some being hyperlinks:
<ul role="tree" aria-label="Foods">
<li role="treeitem" aria-expanded="true">
<span> Fruits </span>
<ul role="group">
<li role="none"> <a role="treeitem" href="/orange"> Oranges </a> </li>
<li role="none"> <a role="treeitem" href="/pineapple"> Pineapple </a> </li>
</ul>
</li>
</ul>
However, what if I want to have a "Fruits" page too, and have a treeitem that is both a parent node and a hyperlink?
(For keyboard navigation, the pattern of Right Arrow/Left Arrow opening/closing the parent node, and Enter following the hyperlink would be used. This resembles the interaction of a combobox with a tree popup.
For mouse interaction, the current pattern would be kept: having a clickable icon (aria-hidden) indicating expanded state, which opens/closes the node, and the text of the link itself, which follows the link.)
For example:
<ul role="tree" aria-label="Foods">
<li role="none">
<a role="treeitem" aria-expanded="true" href="/fruits">
<span> Fruits </span>
<ul role="group">
<li role="none"> <a role="treeitem" href="/orange"> Oranges </a> </li>
<li role="none"> <a role="treeitem" href="/pineapple"> Pineapple </a> </li>
</ul>
</a>
</li>
</ul>
This, while technically correct, violates the HTML spec, which disallows <a> tags being nested within other <a> tags.
After much searching, I found this answer, which is about a different topic and only hints at my solution.
To have the <a> element be the treeitem, while simultaneously "containing" other <a> elements nested within groups, the aria-owns attribute can be used.
Like this, the requirement that
Each parent node contains or owns an element with role group.
is satisfied, while at the same time following the HTML spec.
<ul role="tree" aria-label="Foods">
<li role="none">
<a role="treeitem" aria-expanded="true" aria-owns="fruit-group" href="/fruits">
<span> Fruits </span>
</a>
<ul role="group" id="fruit-group">
<li role="none"> <a role="treeitem" href="/orange"> Oranges </a> </li>
<li role="none"> <a role="treeitem" href="/pineapple"> Pineapple </a> </li>
</ul>
</li>
</ul>
This is not exactly what you are looking for but I thought I would share it for anyone that is looking for something similar that accomplishes the same thing at least from the end user's perspective.
The following code has been modified from w3school's Tree View Example to have clickable arrows and parent link items besides them.
Original code: https://www.w3schools.com/howto/howto_js_treeview.asp
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul, #myUL {
list-style-type: none;
}
#myUL {
margin: 0;
padding: 0;
}
.caret {
cursor: pointer;
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none;
}
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
.caret-down::before {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari */'
transform: rotate(90deg);
}
.nested {
display: none;
}
.active {
display: block;
}
</style>
</head>
<body>
<h2>Tree View</h2>
<p>A tree view represents a hierarchical view of information, where each item can have a number of subitems.</p>
<p>Click on the arrow(s) to open or close the tree branches.</p>
<ul id="myUL">
<li><span class="caret">Beverages</span>
<ul class="nested">
<li>Water</li>
<li><span class="caret">Juice</span>
<ul class="nested">
<li>Orange Juice</li>
<li>Apple Juice</li>
</ul>
</li> <!-- End of caret Tea -->
<li><span class="caret">Tea</span>
<ul class="nested">
<li>Black Tea</li>
<li>White Tea</li>
<li><span class="caret"></span>Green Tea
<ul class="nested">
<li>Sencha</li>
<li>Gyokuro</li>
<li>Matcha</li>
<li>Pi Lo Chun</li>
</ul>
</li>
</ul>
</li> <!-- End of caret Tea -->
</ul> <!-- End of nested -->
</li> <!-- End of caret Beverage -->
</ul> <!-- End of myUL -->
<script>
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
});
}
</script>
</body>
</html>
I using a library for datalist/autocomplate. But I want to change the width and shape of the data container. How do I remove arrow in red box and make the width is dynamic according to content? No css used.
Link for the library(awesomplete)
<div class="awesomplete">
<input id="sellerId" name="sellerId" autocomplete="off" aria- expanded="false" aria-owns="awesomplete_list_1">
<ul role="listbox" id="awesomplete_list_1" hidden="">
<li role="option" aria-selected="false" id="awesomplete_list_1_item_0"><mark>anush</mark>a - harsha</li>
<li role="option" aria-selected="false" id="awesomplete_list_1_item_1">SRIKAN874 - <mark>anush</mark>
</li>
</ul>
</div>
to remove the arrow just add this css
.awesomplete > ul:before {
display: none !important;
}
Working Sample
.awesomplete > ul:before {
display: none !important;
}
<link rel="stylesheet" type="text/css" href="https://leaverou.github.io/awesomplete/awesomplete.css" />
<script src="https://cdn.jsdelivr.net/npm/awesomplete#1.1.5/awesomplete.min.js"></script>
<input class="awesomplete" data-list="#mylist" />
<ul id="mylist" style="display:none;">
<li>Ada</li>
<li>Java</li>
<li>JavaScript</li>
<li>Brainfuck</li>
<li>LOLCODE</li>
<li>Node.js</li>
<li>Ruby on Rails</li>
</ul>
Screenshot
Pls refer to my jsfiddle
https://jsfiddle.net/sash2507/9g5c3f49/1/
I need a way to take the user input (filename) from the input box - and add it as a list item to the <ul>. I thought a .push directive would work and an ng-bind on the <ul> of that empty array variable? It isn't working. Any help is greatly appreciated, thanks.
///////////HTML/////////////
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="CSS/style.css">
<script `enter code here`src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="JS/main.js"></script>
</head>
<body ng-app="MyModule">
<div ng-controller="MyController as ctrl">
<h2>Folders</h2>
<input type="checkbox" ng-model="ctrl.isBoxChecked">Expand All
<div ng-show="ctrl.isBoxChecked">
<h2>Folder 1</h2>
<ul>
<li>File 1.1</li>
<li>File 1.2</li>
<li>File 1.3</li>
</ul>
<h2>Folder 2</h2>
<ul>
<li>File 2.1</li>
<li>File 2.2</li>
<li>File 2.3</li>
</ul>
<h2>Folder 3</h2>
<ul>
<li>File 3.1</li>
<li>File 3.2</li>
<li>File 3.3</li>
</ul>
</div>
<div>
<span id="fileInputBox">File Name:
<input type="text" ng-model="someFileName" `enter code here`placeholder="enter a file name" >
<button ng-click="ctrl.onUserClick">Add to list</button>
</span>
</div>
</body>
</html>
//////////////JS////////////
var myMod = angular.module("MyModule", []);
myMod.controller("MyController", function() {
var self = this;
// Makes checkbox unchecked upon page load
self.isBoxChecked = false;
// onUserClick fn makes value true for ng-show
self.onUserClick = function() {
self.isBoxChecked = !self.isBoxChecked;
self.someFileName = self.fileNamesInList;
self.fileNamesInList.push({
self.someFileName
})
};
// Empty array for file names
self.fileNamesInList = [];
});
///////CSS//////////////
#fileInputBox {
margin-left: 300px;
position: fixed;
}
You have a syntax error in:
self.fileNamesInList.push({
self.someFileName
})
You are pushing a object but you did not specify the name of the property
#Saloni Sharma First of all make it correct
<script `enter code here`src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> to
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
by this your angular js is not defining. and then use $scope in your controller and new array to push the names,try the below code it is working
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="CSS/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script type="text/javascript">
var myMod = angular.module("MyModule", []);
myMod.controller("MyController", function($scope) {
var self = this;
// Makes checkbox unchecked upon page load
self.isBoxChecked = false;
// onUserClick fn makes value true for ng-show
$scope.pusharr=[]; //new array to push names
$scope.someFileName="";
$scope.pushme = function(name) {
$scope.pusharr.push(name);
$scope.someFileName="";
};
// Empty array for file names
self.fileNamesInList = [];
});
</script>
</head>
<body ng-app="MyModule">
<div ng-controller="MyController as ctrl">
<h2>Folders</h2>
<input type="checkbox" ng-model="ctrl.isBoxChecked">Expand All
<div ng-show="ctrl.isBoxChecked">
<h2>Folder 1</h2>
<ul>
<li>File 1.1</li>
<li>File 1.2</li>
<li>File 1.3</li>
</ul>
<h2>Folder 2</h2>
<ul>
<li>File 2.1</li>
<li>File 2.2</li>
<li>File 2.3</li>
</ul>
<h2>Folder 3</h2>
<ul>
<li>File 3.1</li>
<li>File 3.2</li>
<li>File 3.3</li>
</ul>
</div>
<div>
<span id="fileInputBox">File Name:
<input type="text" ng-model="someFileName" `enter code here`placeholder="enter a file name" >
<button ng-click="pushme(someFileName)">Add to list</button>
</span>
<ul>
<li ng-repeat="name in pusharr">{{name}}</li>
</ul>
</div>
</body>
</html>
I focused to push concept only in that try this.
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.