I have read a lot of articles about how to check if the device can hover for making a good responsive design, but still no solution. I tried with media(hover:not) but it works only on Google Chrome on mobile. Can you help me? Thank you in advance.
The following demo utilizes MediaQueryList API to control the Drawer plugin at the breakpoint of 1025px (just a guess since you didn't provide any info in regards to your iPad). Details of what to remove, add, and change are commented in demo.
Basically after page loads, if the screen is > 1025px then the Drawer plugin is removed and the side menu is hidden. If it's < 1025px, then plugin is loaded and side-menu is visible. This will occur should there ever be a resizing of the screen as well.
For the touch issue I have added jQuery UI Touch Punch. You have jQuery UI loaded (although I haven't noticed it being used on your site). jQuery UI does not recognize touch events so this plugin will translate touch events into equivalent versions of the mouse events so that jQuery UI will react to touch events. Not really sure it matters if you only have mouse events registered on desktop and touch events only on mobile. If you decide that you aren't going to use jQuery UI, then use this polyfill Pointer Events jQuery which allows you to use touch, mouse, etc. pointer type events.
Demo
<!DOCTYPE html>
<html lang="bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--|SWAP| positions of <link>s~~~~~~~~~~~~~~|BEGIN|-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
<link rel="stylesheet" href="style.css">
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|END|-->
<!--|ADD| media query here or in style.css|BEGIN|~~~-->
<style>
#media (min-width: 1025px) {
.drawer-toggle.drawer-hamburger { display: none !important }
}
</style>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|END|-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-touch-punch#0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
<!--|REMOVE| this <script> tag~~~~~~~~~~~~~~~~|BEGIN|->
<script>$(document).ready(() => $('.drawer').drawer())</script>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|END|-->
<title>Счетоводна къща Елина</title>
</head>
<body class="drawer drawer--left">
<div id="wrapper" role="main">
<!--|ADD| an #id to this <div>~~~~~~~~~~~~|BEGIN|-->
<div id='mobNav' role="banner">
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|END|-->
<button type="button" class="drawer-toggle drawer-hamburger"> <span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>
<nav class="drawer-nav" role="navigation">
<ul class="drawer-menu">
<li><a class="drawer-brand" href="#">Начало</a></li>
<li><a class="drawer-brand" href="./services.html">Услуги</a></li>
<li><a class="drawer-menu-item" href="./accounting-services.html">Счетоводни услуги</a></li>
<li><a class="drawer-menu-item" href="./taxing-services.html">Данъчни услуги</a></li>
<li><a class="drawer-menu-item" href="./administration-of-remuneration.html">Администриране на възнаграждения</a></li>
<li><a class="drawer-menu-item" href="./others.html">Други</a></li>
<li><a class="drawer-brand" href="./prices.html">Цени</a></li>
<li><a class="drawer-brand" href="./about-us.html">За нас</a></li>
<li><a class="drawer-brand" href="./contacts.php">Контакти</a></li>
</ul>
</nav>
</div>
<!-- header -->
<header>
<img src="./images/logo.png" alt="Лого">
<nav>
<ul>
<li>Начало</li>
<li>Услуги
<ul class="dropdown">
<li>Счетоводни услуги</li>
<li>Данъчни услуги</li>
<li>Администриране на възнаграждения</li>
<li>Други</li>
</ul>
</li>
<li>Цени</li>
<li>За нас</li>
<li>Контакти</li>
</ul>
</nav>
<hr>
</header>
<!-- slider -->
<div id="slider">
<img id="left-arrow" src="./images/arrow.png" alt="left-arrow" class="controllers">
<img id="right-arrow" src="./images/arrow.png" alt="right-arrow" class="controllers">
<div id="circle-controllers-section">
<div id="0" class="circle-controllers"></div>
<div id="1" class="circle-controllers"></div>
<div id="2" class="circle-controllers"></div>
</div>
</div>
<script src="./scripts/get-content.js"></script>
<script src="./scripts/slider.js"></script>
<!-- email form -->
<form id="email-form" method="GET">
<div id="email-container">
<h2>Пишете ни</h2>
<label for="myEmail">Имейл:</label>
<input id="myEmail" type="email" name="myEmail" placeholder="Въведете имейл" required>
<label for="myName">Имена:</label>
<input id="myName" type="text" name="myName" placeholder="Въведете име и фамилия" required>
<label for="subject">Предмет:</label>
<select name="subject" required>
<option value="" disabled selected hidden>Изберете предмет</option>
<option value="Счетоводни услуги">Счетоводни услуги</option>
<option value="Данъчни услуги">Данъчни услуги</option>
<option value="Администриране на възнаграждения">Администриране на възнаграждения</option>
<option value="Друго">Друго</option>
</select>
<label for="message">Съобщение:</label>
<textarea id="message" rows="4" cols="40" name="message" placeholder="Въведете съобщение" required></textarea>
<div id="mistake-field"> </div>
<input type="submit" name="button" value="Изпрати"/>
</div>
</form>
<!-- footer -->
<footer>
<hr>
<div id="footer">
<div>
<img id="logo" src="./images/logo.png" alt="Лого">
<a target="_blank" href="https://www.facebook.com/%D0%A1%D1%87%D0%B5%D1%82%D0%BE%D0%B2%D0%BE%D0%B4%D0%BD%D0%B8-%D1%83%D1%81%D0%BB%D1%83%D0%B3%D0%B8-%D0%95%D0%BB%D0%B8%D0%BD%D0%B0-%D0%95%D0%9E%D0%9E%D0%94-368462670244655/?modal=admin_todo_tour">
<img id="facebook" src="./images/facebook-logo.png" alt="Фейсбук">
Посетете и харесайте нашата страница във Фейсбук.</a> </div>
<p>Copyright © 2017 All Rights Reserved</p>
</div>
</footer>
</div>
<!--|ADD| <script> here or on external file |BEGIN|-->
<script>
/* Create a mediaQueryList (mql) with the breakpoint
|| matching your iPad width when in landscape mode
*/
var mql = window.matchMedia('(min-width: 1025px)');
// The callback function passing the Event Object
function modDrawer(e) {
// if change media event matches the mql...
if (e.matches) {
// ...close .drawer...
$('.drawer').drawer('close');
//...remove the plugin...
$('.drawer').drawer('destroy');
//...and hide the menu.
document.querySelector('#mobNav').style.display = 'none';
// Otherwise...
} else {
//...start the plugin...
$('.drawer').drawer();
//...make the menu...
document.querySelector('#mobNav').style.display = 'block';
//...and the button visisble.
document.querySelector('.drawer-toggle.drawer-hamburger').style.cssText = 'block !important';
}
}
/* Register the mql to listen for a media change
|| modDrawer() is the callback
*/
mql.addListener(modDrawer);
</script>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|END|-->
</body>
</html>
Related
I want to select a tab on clicking a link. I tried using different online available solutions (including $('ul.tabs').tabs('select_tab', 'tab_id');) but none seems to be work with current materialize version. The official documentation for materialize states to do the initialization using var instance = M.Tabs.init(el, options); instance.select('tab_id'); but none of the methods seem to work correctly with current version or has been clearly specified w.r.t Materialize Tabs.
Any help is greatly appreciated. Below is the code snippet along with jsfiddle link,
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<!--
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
-->
<script>
$(document).ready(function() {
$('ul.tabs').tabs();
$("#btnContinue").click(function() {
$('ul.tabs').tabs('select_tab', 'test2');
});
});
/* var instance = new M.Tabs.init(el, options);
function check_active(){
var instance = M.Tabs.getInstance(elem);
instance.select('test2');
} */
</script>
</head>
<body>
<div class="col s12">
<ul class="tabs">
<li class="tab col s4">tab1
</li>
<li class="tab col s4">tab2
</li>
<li class="tab col s4">tab3
</li>
</ul>
</div>
<div id='test1' class="col s12">
<!--<a id="btnContinue" href='#test2' onclick="check_active();">continue</a>-->
<a id="btnContinue" href='#test2'>continue</a>
</div>
<div id='test2' class="col s12"></div>
</body>
</html>
JSFiddle Link for the same: https://jsfiddle.net/chirag_cyber/6evpqcfb/6/
You should change
$('ul.tabs').tabs('select_tab', 'test2');
to :
$('ul.tabs').tabs('select', 'test2');
select shows tab content that corresponds to the tab with the id. JSFiddle
I can not seem to style my website... for example the <pre> tags.
Nothing I do works. I am trying to style the whois results, I've tried wrapping it in a div and styling that, styling the pre tags only, styling everything. I just can't seem to get it working. I am hoping I am missing something stupid. You can see from the CSS I have tried numerous combinations (tried deleting them all just having pre ect)
Nav bar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>CWCS Domain Checker Tool</title>
</head>
<body>
<!--- This Keeps the navbar from staying right near top -->
<div class="header">
</div>
<!---- Nav bar, Using bootstrap ----->
<nav class="navbar navbar">
<div class="container-fluid">
<div class="navbar-header">
<div class="nav-bar-logo">
<img src="images/cwcs-logo.png">
</div>
</div>
<div class="nav-list-container">
<ul class="nav navbar-nav">
<li>Domain Diagnostics</li>
<li><a id="sd" href="#">Server Diagnostics</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="dc" href="#">Daily Checklist</a></li>
<li><a id="bt" href="#">Backup Tracker</a></li>
<li><a id="tl" href="#">Task List</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!------- End of nav bar ---->
Main page -
<?php
## Includes nav bar
include('navbar.php');
include('phpfiles/domainclass.php');
if (isset($_GET['userInput']))
{
$domainName = $_GET['userInput'];
}
?>
<!---- The input form ---->
<form class="form">
<div class="domainquery">
<div class="input-group">
<input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="<?php if (isset($domainName)) echo $domainName ?>" autocomplete="off" autofocus>
<div class="input-group-btn">
<button type="submit" class="btn btn-primary btn-md">Query Domain</button>
</div>
</div>
</div>
</form>
<!---- End of input form --->
<!---- start of content --->
<div class ="container-fluid">
<!----- Check of the variable has been set before showing --->
<?php
##checks if the variable name $domainName is set, before loading everything below
if (isset($domainName)):
?>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>DNS Records </h3>
<div class="dnscontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".dnscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'dns'
});
</script>
</div>
<h3>SSL Result</h3>
<h3>NMAP Result</h3>
<div class="nmapcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".nmapcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'nmap'
});
</script>
</div>
<h3>PING Result</h3>
<div class="pingcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".pingcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'ping'
});
</script>
</div>
<!--- Closing div tag for left column -->
</div>
<!--- starting right column -->
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>WHOIS Result</h3>
<div class="whoiscontain">
<script>
// Loads the return vaue of the call into the "whoiscontain" div.
$(".whoiscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'whois'
});
</script>
<!--Whoiscontain div end -->
</div>
<!--- right column div end -->
</div>
<!--- closing div tag for 1st row --->
</div>
</div>
<!---- ends the check on if the variable is set -->
<?php
###End the "IF" check
endif
?>
<!---- Closing div tag for container-fluid --->
</div>
</body>
</html>
Ajax return page --
<?php
include 'domainclass.php';
$result = domain::getWhois($domainName);
?>
<pre class="whois"> <?php echo $result ?> </pre>;
Style sheet
.header
{
margin:1%;
}
.domainquery
{
margin-bottom:3%;
padding:40px 50px;
}
.nav-bar-logo
{
margin-right:20px;
padding-right:20px;
}
.table
{
font-size:5px;
}
pre .whois
{
white-space:pre-wrap;
background-color:black;
color:white;
word-wrap: break-word;
}
.whoiscontain
{
white-space:pre-wrap;
background-color:black;
width:100%;
color:white;
word-wrap: break-word;
}
pre
{
white-space:pre-wrap;
background-color:black;
color:white;
word-wrap: break-word;
}
HTML output of page as requested (ignore style sheeting being above the bootstrap stylesheet, was trying something.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>CWCS Domain Checker Tool</title>
</head>
<body>
<!--- This Keeps the navbar from staying right near top -->
<div class="header">
</div>
<!---- Nav bar, Using bootstrap ----->
<nav class="navbar navbar">
<div class="container-fluid">
<div class="navbar-header">
<div class="nav-bar-logo">
<img src="images/cwcs-logo.png">
</div>
</div>
<div class="nav-list-container">
<ul class="nav navbar-nav">
<li>Domain Diagnostics</li>
<li><a id="sd" href="#">Server Diagnostics</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="dc" href="#">Daily Checklist</a></li>
<li><a id="bt" href="#">Backup Tracker</a></li>
<li><a id="tl" href="#">Task List</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!------- End of nav bar ---->
<!---- The input form ---->
<form class="form">
<div class="domainquery">
<div class="input-group">
<input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="lomcn.org" autocomplete="off" autofocus>
<div class="input-group-btn">
<button type="submit" class="btn btn-primary btn-md">Query Domain</button>
</div>
</div>
</div>
</form>
<!---- End of input form --->
<!---- start of content --->
<div class ="container-fluid">
<!----- Check of the variable has been set before showing --->
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>DNS Records </h3>
<div class="dnscontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".dnscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'dns'
});
</script>
</div>
<h3>SSL Result</h3>
<h3>NMAP Result</h3>
<div class="nmapcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".nmapcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'nmap'
});
</script>
</div>
<h3>PING Result</h3>
<div class="pingcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".pingcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'ping'
});
</script>
</div>
<h3>Tracert Result</h3>
<div class="tracecontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".tracecontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'trace'
});
</script>
</div>
<!--- Closing div tag for left column -->
</div>
<!--- starting right column -->
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>WHOIS Result</h3>
<div class="whoiscontain">
<script>
// Loads the return vaue of the call into the "whoiscontain" div.
$(".whoiscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'whois'
});
</script>
<!--Whoiscontain div end -->
</div>
<!--- right column div end -->
</div>
<!--- closing div tag for 1st row --->
</div>
</div>
<!---- ends the check on if the variable is set -->
<!---- Closing div tag for container-fluid --->
</div>
</body>
</html>
to style bootstrap you can over ride bootstrap styles or make your own new styles.
They recommend not editing the bootstrap .CSS directly so updates to bootstrap will not change your design.
You are correct to place your own style sheet call below the bootstrap call, so yours will override.
Even though your styles will over ride you might not be able to over ride a bootstrap rule that has the !important tag. You can either use the bootstrap classes and ID's in your stylesheet and make new rules, using your own !Important to force them through if necessary, or add additional classes for your styles:
a bit of code
was `<div class="col-md-12">`
make `<div class="col-md-12 myCol">`
and then make rules on your stylesheet for
.myCol{
these styles should persist
}
Here's my url http://bloomh.com/
If you look down in the "testimonial" section you'll see a bunch of weird characters being displayed. Strange thing is that it seems to "grow" over time and the code is inside my html. Obviously I did not add this to my original html.
How and why is this happening. Very strange. Any help and direction would be greatly appreciated.
Ok here's the html and php. The weird characters are inside the html however I did not add that at all. Also another small caveat is I used the frontend creator Webflow.com and then exported the html and transferred over to my hosting. Webflow is pretty legit and I've already spoken with them and they've assured me that their code is clean. Once again this happened after I published the page and used the php form a couple of times then those weird characters started to "grow" over time.
HTML
<!DOCTYPE html>
<!-- This site was created in Webflow. http://www.webflow.com-->
<!-- Last Published: Tue Aug 19 2014 18:12:20 GMT+0000 (UTC) -->
<html data-wf-site="5359ea800548c9ed4700023a" data-wf-page="53dbf829e673629c186afc3f">
<head>
<meta charset="utf-8">
<title>Bloomh</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Webflow">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/webflow.css">
<link rel="stylesheet" type="text/css" href="css/bloomhmvp.webflow.css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ["Carme:regular","Roboto Slab:300,regular,700","Nixie One:regular","Pontano Sans:regular","Quicksand:300,regular,700","Muli:300,300italic,regular,italic","Raleway:300,regular,500,600,700,800,900","Arimo:regular,italic,700,700italic","Oxygen:300,regular,700","Cabin:regular,italic,500,500italic,600,600italic,700,700italic","Roboto:300,300italic,regular,italic,500,500italic,700,700italic,900,900italic"]
}
});
</script>
<script type="text/javascript" src="js/modernizr.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="images/fontawesome-webfont.svg">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="w-nav navbar vl" data-collapse="medium" data-animation="default" data-duration="400">
<div class="w-clearfix navbar-section">
<div class="logo-container vl">
<a class="w-nav-brand logo vl" href="#"></a><a class="brand vl" href="#">Bloomh</a>
</div>
</div>
</div>
<div class="hero-background home2 vl">
<div class="w-container hero-container">
<div class="coming-soon">COMING SOON!</div>
<div class="centering-container _95">
<h1 class="hero-tagline home2 vendor-landing vl">Brides set the price<br>Vendors come to them</h1>
</div>
<div class="centering-container _85 tablet">
<h2 class="secondary-tagline home2 vendor-landing vl">A new way to hire photographers & videographers</h2>
</div>
<div class="vendor-question-box">
<div class="w-row">
<div class="w-col w-col-4">
<div class="w-form">
<form id="wf-form-vl2-signup" action="php/vl2_submit.php" method="post" name="wf-form-vl2-signup" data-name="vl2 signup" data-redirect="http://www.bloomh.com">
<div class="centering-container">
<input class="w-input post-page-input-fields input-fields vendor-landing vl" id="vl2-email" type="email" placeholder="Valid Email" name="vl2_email" data-name="vl2 email" required="required">
<input class="w-input post-page-input-fields input-fields vendor-landing vl" id="vl2-address" type="text" placeholder="Website address?" name="vl2_address" data-name="vl2 address" required="required">
<input class="w-button button join-button vendor-join vl" type="submit" value="Vendor Join!" data-wait="Joining..." wait="Joining...">
</div>
</form>
<div class="w-form-done">
<p>Thank you! Your submission has been received!</p>
</div>
<div class="w-form-fail">
<p>Oops! Something went wrong while submitting the form :(</p>
</div>
</div>
</div>
<div class="w-col w-col-8">
<div class="centering-container _85 vl">
<div class="vendor-question vl">Are you a Photographer or Videographer?</div>
<div class="w-hidden-main w-hidden-medium w-hidden-small how-to-wrap vl">
<div class="centering-container vendor-sale mobile">
<div class="vendor-sale-text vl">Sign Up</div>
</div>
<div class="centering-container">
<div class="fa fa-chevron-down vendor-welcome vl"></div>
</div>
<div class="centering-container mobile">
<div class="vendor-sale-text vl get-clients">Get clients via email</div>
</div>
<div class="centering-container">
<div class="fa fa-chevron-down mobile"></div>
</div>
<div class="centering-container mobile">
<div class="vendor-sale-text vl">Free and Easy!</div>
</div>
</div>
<div class="w-hidden-tiny vendor-question-subtext phone">
<div class="vendor-how-to vendor-landing vl">Sign Up</div>
<div class="fa fa-chevron-right vendor-landing vl"></div>
<div class="vendor-how-to vendor-landing vl">Get clients in your inbox</div>
<div class="fa fa-chevron-right vendor-landing vl"></div>
<div class="vendor-how-to vendor-landing vl">Free and Easy!</div>
</div>
<div class="more-categories vendor-landing vl">Birthdays / Portraits / Parties / Bat Mitzvahs / Engagements</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vl-testimonials">
<div class="centering-container vl testimonials">
<div class="testimonial vl">Testimonials</div>
<div class="testimonial-text vl">“I use Bloomh to get most of my new wedding clients. It plays a big part in growing my business.â€ÂÂÂÂÂÂ</div>
<div class="testimonial-user main vl">- Lance Capshaw, Huntington Beach CA
<br>(Vendor)</div>
<div class="testimonial-text vl">“I can't believe this service is free! I use it to get my wedding clients. They just come into my inbox!â€ÂÂÂÂÂÂ</div>
<div class="testimonial-user main vl">- Trish Carpenter, Hermosa Beach, CA
<br>(Vendor)</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/webflow.js"></script>
<!--[if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
</body>
</html>
**** PHP ****
<?php
$email = htmlspecialchars($_POST['vl2_email']);
$website_address = htmlspecialchars($_POST['vl2_address']);
mail("bpark#bloomh.com", "New Vendor vl2", "From: $email", "Website Address: $website_address");
header("Location:../vl2-confirm.html");
?>
1) Search the whole code with the class name "testimonial-text" and see the code, try to replace the content after typing from notepad.
2) add a <p>Your content content</p> for your paragraphs.
3) you can paste the server side code for us.
4) You need to tell to MySQL that the connection must be made in UTF-8.
I have called 2nd page <div id=child> on button click of 1st page <div id = home> and used jquery theme in both pages but the problem is in 2nd page there is no theme effect as in 1st page. I have put the css file in same folder and it is giving effect in 1st page and not in 2nd ?
Can any one solve the problem, so that the theme have effect in 2nd page also? Below is my code
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="jquerybasic/jquerymobilecss.css" />
<style>
/* App custom styles */
</style>
<script src="jquerybasic/jquery.min.js" type="text/javascript">
</script>
<script src="jquerybasic/jquery.mobile-1.1.0.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#buttonid').click(function() {
$('#child').toggle();
$('#home').toggle();
});
$('#buttonchild').click(function() {
$('#child').toggle();
$('#home').toggle();
});
$('#next').click(function() {
$('#home').show();
$('#child').hide();
});
$('#prev').click(function() {
$('#home').hide();
$('#child').show();
});
$('#nextchild').click(function() {
$('#home').show();
$('#child').hide();
});
$('#prevchild').click(function() {
$('#home').hide();
$('#child').show();
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-theme="d" data-role="header">
<h3>
The Grand Bhagavati
</h3>
<a data-role="button" id="next" data-inline="true" data-transition="slide" >
<<
</a>
<a data-role="button" id="prev" data-inline="true" data-transition="fade" >
>>
</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput1">
User:
</label>
<input id="textinput1" type="text" />
</fieldset>
</div>
<input id="buttonid" data-theme="d" value="Login" type="button" />
</div>
<div data-theme="d" data-role="footer" data-position="fixed" >
<h3>
Page 1
</h3>
</div>
</div>
<div data-role="page" id="child">
<div data-theme="d" data-role="header">
<h3>
The Grand Bhagavati
</h3>
<a data-role="button" id="nextchild" data-inline="true" data-direction="reverse" data-transition="slide" >
<<
</a>
<a data-role="button" id="prevchild" data-inline="true" data-direction="reverse" data-transition="fade" >
>>
</a>
</div>
<div data-role="content">
<label>
hi khushbu. welcome...!
</label>
<input id="buttonchild" data-theme="d" value="Login" type="button" class="ui-btn-hidden" aria-disabled="false" />
</div>
<div data-theme="d" data-role="footer" data-position="fixed" >
<h3>
Page 2
</h3>
</div>
</div>
<script>
//App custom javascript
</script>
</body>
Ok boy :)
It seems you've skipped a rather important part of using a new piece of software, reading the documentation.
To navigate between pages you would just place this in the href attribute for the link:
<a data-role="button" href="#child">...</a>
And jQuery Mobile will handle the transition to the next pseudo-page. Here is the documentation for Linking Pages: http://jquerymobile.com/demos/1.1.0/docs/pages/page-links.html
If you want to do this programatically then you can use $.mobile.changePage() which is what gets used internally. The advantage to manually calling this function (say in a click event handler for a button) is that you can specify non-default options for the transition:
$('#next').on('click', function () {
$.mobile.changePage($('#child'), { transition : 'slide', reverse : true });
});
Here is the documentation for $.mobile.changePage(): http://jquerymobile.com/demos/1.1.0/docs/api/methods.html
If you wanted to roll your own transitions it's quite a bit more complex than showing one div and hiding another. You've got to setup some CSS classes that animate the transition using CSS3 (transform, transition, keyframes, etc.).
And finally, here is a demo of your code where I replaced the links in the header with a single link that works: http://jsfiddle.net/MmKK4/
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.