how to get a page source in html? - html
I'm using HTML and javaScript .. I'm trying to build a chrome extension , which will display some info from the website in the popup
I need to get the page source of http://met.guc.edu.eg in the context of my web page and use it to get some of the "li" tags and do some work on them ( RegEx )
for example display the courses taken by student in web page -- By taking them from the http://met.guc.edu.eg .. and display them in a nice way in a pop up
Since there is no true answer to this yet, I will post the method I use - I do not know if it's the best way - but it works.
The reason XHR may not be the best idea is because it's not always going to give you the exact source of a certain tab - this way will.
content.js
chrome.extension.onRequest.addListener(function(request, sender, callback)
{
if (request.action == 'getSource')
{
callback(document.documentElement.outerHTML);
}
});
background.html
chrome.tabs.sendRequest(tab.id, {action : 'getSource'}, function(source) {
console.log(source);
});
As asked for, here is the source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>
Faculty of Media Engineering and Technology (MET) - The German University in Cairo
</title>
<!--[if gte IE 7 ]>
<!-->
<link type="text/css" href="Media/ResourceHandler.ashx?v=1&fileSet=homepage_css&type=text/css" rel="Stylesheet" />
<script type="text/javascript" src="Media/ResourceHandler.ashx?v=1&fileSet=homepage_script&type=application/x-javascript"></script>
<![endif]-->
</head>
<body onload="init();">
<form name="ctl00" method="post" action="Default.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="ctl00">
<div>
<input type="hidden" name="ScriptManager1_HiddenField" id="ScriptManager1_HiddenField" value="" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTYwMjE2MTE1MA9kFgICAw9kFgICBw8WAh4LXyFJdGVtQ291bnQCAhYEZg9kFggCAg8VAgdOZXdzXzE3GFNtYXJ0U29mdCBhcmUgdGhlIGNoYW1wc2QCAw8PFgIeCEltYWdlVXJsBS1+L1JlcG9zaXRvcnkvTmV3c0NvbXBvbmVudC9TT3JpZ2luYWxGaW5hbC5qcGdkZAIEDxUB8QFBZnRlciBjb21wZXRpbmcgYWdhaW5zdCBDU0VOIGFuZCBCSSBjb21wYW5pZXMuIFNtYXJ0U29mdCBtYW5hZ2VkIHRvDQp3aW4gdGhlIFNvZnR3YXJlIEVuZ2luZWVyaW5nIENvbXBldGl0aW9uIGZvciBTcHJpbmcgMjAxMCBhZnRlciBkZXZlbG9waW5nIGFuIG91dHN0YW5kaW5nIG9ubGluZSB0b29sIGZvciBhdXRvbWF0aW5nIGFnaWxlIHNvZnR3YXJlIG1hbmFnZW1lbnQuIENvbmdyYXR1bGF0aW9ucyB0byBTbWFydFNvZnQhZAIFDxYCHgVzdHlsZQUNZGlzcGxheTpub25lOxYCZg8VAQBkAgEPZBYIAgIPFQIGTmV3c18xHE1lZGlhIEVuZ2luZWVyaW5nIGF0IHRoZSBHVUNkAgMPDxYCHwEFJn4vUmVwb3NpdG9yeS9OZXdzQ29tcG9uZW50L2xpYnJhcnkuanBnZGQCBA8VAfEBTWVkaWEgRW5naW5lZXJpbmcgYW5kIFRlY2hub2xvZ3kgYWltcyBhdCB0aGUgZXZvbHZpbmcgZmllbGQgb2YgbmVhcmx5IGFsbCBhc3BlY3RzIG9mIGluZm9ybWF0aW9uIGFuZCBtdWx0aW1lZGlhIHByb2Nlc3NpbmcuIFRoZSBzdHVkeSBwcm9ncmFtIGluICJNZWRpYSBFbmdpbmVlcmluZyBhbmQgVGVjaG5vbG9neSIgcmVzdHMgb24gdGhlIHNhbWUgZnVuZGFtZW50YWxzIGFzIGZvciBJbmZvcm1hdGlvbiBUZWNobm9sb2d5LmQCBQ9kFgJmDxUBE0Fib3V0L1Byb2dyYW1zLmFzcHhkGAMFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYCBR1Mb2dpblVzZXJDb250cm9sMSRsb2dpbkJ1dHRvbgUkTG9naW5Vc2VyQ29udHJvbDEkUmVtZW1iZXJNZUNoZWNrYm94BRxMb2dpblVzZXJDb250cm9sMSRNdWx0aVZpZXcxDw9kZmQFNkxvZ2luVXNlckNvbnRyb2wxJEhvbWVwYWdlVG9vbHNNZW51Q29udHJvbDEkTXVsdGlWaWV3MQ8PZGZk++EYs51/1WiGabXN2nlBpWq7B38=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl00'];
if (!theForm) {
theForm = document.ctl00;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=hjWzicBH57aDEOAXMpQVJQ2&t=633566901938396560" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=H0761Oq7Alukyw82KELp8-Txl2kQFm7sZfTkrcnjSDzxZz0PrQZLm48rbx9Jm7dI_LMT2zH0QUfg9RJVLEsm7Q2&t=633566901938396560" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=9NKqPW-jeqHS98DhHZ6Iy5ulSdcD3uOEBYcWmPxYVzi01PBdj_S7yBr5N-59MNCSkIHANMTKEfgCCoAEWIDetGqltgG2yF0m6QP4thTRHlI1&t=633432692861214540" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=9NKqPW-jeqHS98DhHZ6Iy5ulSdcD3uOEBYcWmPxYVzi01PBdj_S7yBr5N-59MNCSkIHANMTKEfgCCoAEWIDetB9rztfIh11Bb3t4nicyu881&t=633432692861214540" type="text/javascript"></script>
<script src="/Default.aspx?_TSM_HiddenField_=ScriptManager1_HiddenField&_TSM_CombinedScripts_=%3b%3bAjaxControlToolkit%2c+Version%3d1.0.10920.32880%2c+Culture%3dneutral%2c+PublicKeyToken%3d28f01b0e84b6d53e%3aen-US%3a816bbca1-959d-46fd-928f-6347d6f2c9c3%3a9ea3f0e2%3ae2e86ef9%3a9e8e87e9%3a1df13a87%3a4c9865be%3aba594826%3a757f92c2" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('ctl00'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>
<!-- Page Container -->
<div id="container">
<!-- Header and Menu -->
<div id="headerAndMenu">
<!-- Title -->
<h1 id="logo">
<a href="http://www.guc.edu.eg" target="_blank">
<img src="Media/Images/HomePage/Logo.png.ashx" alt="The German University in Cairo" /></a></h1>
<h2 id="title">
Faculty of Media Engineering and Technology</h2>
<!-- Title -->
<!-- Menu -->
<div id="menu">
<div id="mainPart">
<div id="aboutMET" onmouseenter="opacity('aboutMETSubMenu',0,100,5)" onmouseleave="opacity('aboutMETSubMenu',100,0,5)">
<div id="aboutMETSubMenu">
<ul id="aboutMETSubMenuList">
<li id="programs"><a class="main" href="About/Programs.aspx">Programs</a> </li>
<li id="degrees"><a class="main" href="About/Degrees.aspx">Degrees</a> </li>
<li id="ourPeople"><a class="main" href="People/">OurPeople</a></li>
<li id="admission"><a class="main" href="About/Admission.aspx">Admission</a> </li>
</ul>
</div>
</div>
<div id="academics" onmouseenter="opacity('academicsSubMenu',0,100,5)" onmouseleave="opacity('academicsSubMenu',100,0,5)">
<div id="academicsSubMenu">
<ul id="academicsSubMenuList">
<li id="underGraduate"><a class="main" href="Courses/Undergrad.aspx">
Undergraduate Courses </a></li>
<li id="graduate"><a class="main" href="Courses/Grad.aspx">
Graduate Courses</a> </li>
<li id="courseCatalogue"><a class="main" href="Courses/">Course
Catalogue</a> </li>
<li id="research"><a class="main" href="Research/">Research</a> </li>
</ul>
</div>
</div>
<div id="extras" onmouseenter="opacity('extrasSubMenu',0,100,5)" onmouseleave="opacity('extrasSubMenu',100,0,5)">
<div id="extrasSubMenu">
<ul id="extrasSubMenuList">
<li id="activities"><a class="main" href="Activities/">Activities</a>
</li>
<li id="onlineTutorials"><a class="main" href="OnlineTutorials/"
>Online Tutorials</a> </li>
<li id="staffBlog"><a class="main" href="#">Staff Blog</a> </li>
<li id="showCase"><a class="main" href="#">Showcase</a> </li>
<li id="forum"><a class="main" href="Forum/">Forum</a> </li>
</ul>
</div>
</div>
<div id="agenda" onmouseenter="opacity('agendaSubMenu',0,100,5)" onmouseleave="opacity('agendaSubMenu',100,0,5)">
<div id="agendaSubMenu">
<ul id="agendaSubMenuList">
<li id="announcements"><a class="main" href="Agenda/Announcements.aspx">Announcements</a>
</li>
<li id="calendar"><a class="main" href="Agenda/">Calendar</a> </li>
<li id="policies"><a class="main" href="About/Policies.aspx">Policies</a> </li>
</ul>
</div>
</div>
</div>
</div>
<!-- /Menu -->
</div>
<!-- /Header and Menu -->
<!-- Content -->
<div id="content">
<!-- Login -->
<div id="login">
<div class="homePageLoginDiv">
<div id="Div1" style="position: relative; top: 5px;">
<div>
<div class="tools-menu-header" id="login_label">
<img style="border-style: none; vertical-align: middle; padding-right: 5px;" src="Media/Icons/key_go.png.ashx"><span
class="label">Login</span></div>
<div class="tools-menu-body" id="tools-menu-div">
<label>
GUC Email
</label>
<div class="leftTBoxSide">
</div>
<div>
<input name="LoginUserControl1$usernameTextBox" type="text" id="LoginUserControl1_usernameTextBox" class="userNameTBox" /></div>
<div class="rightTBoxSide">
</div>
<span id="LoginUserControl1_LoginEmailRequiredFieldValidator" style="color:Red;display:none;"></span>
<span id="LoginUserControl1_LoginEmailFormatValidator" style="color:Red;display:none;"></span>
<label>
Password</label>
<div class="leftTBoxSide">
</div>
<div>
<input name="LoginUserControl1$passwordTextBox" type="password" id="LoginUserControl1_passwordTextBox" class="passwordTBox" /></div>
<div class="rightTBoxSide">
</div>
<span id="LoginUserControl1_LoginPasswordRequiredFieldValidator" style="color:Red;display:none;"></span>
<input type="image" name="LoginUserControl1$loginButton" id="LoginUserControl1_loginButton" class="loginBtn" src="Media/Images/HomePage/goButton.gif.ashx" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("LoginUserControl1$loginButton", "", true, "", "", false, false))" style="border-width:0px;" />
<span class="checkbox"><input id="LoginUserControl1_RememberMeCheckbox" type="checkbox" name="LoginUserControl1$RememberMeCheckbox" /></span>
<label class="checkbox_label" for="LoginUserControl1_RememberMeCheckbox">
Remember me</label>
<a id="LoginUserControl1_forgotPasswordButton" class="forgotPasswordBtn" href="javascript:__doPostBack('LoginUserControl1$forgotPasswordButton','')">Forgot password?</a><span
style="margin-right: 3px;">Student?</span>Register</div>
</div>
</div>
</div>
</div>
<!-- /Login -->
<!-- Search -->
<div id="search">
</div>
<!-- /Search -->
<!-- News -->
<div id="news">
<!-- News Glider-->
<div id="newsGlider">
<div id="previousDiv">
<img src="Media/Images/HomePage/prev.png.ashx" id="previous" alt="Previous" onclick="my_glider.previous();return false;" /></div>
<div class="scroller">
<div class="content">
<input type="hidden" name="newsRepeater$ctl00$idHdnField" id="newsRepeater_ctl00_idHdnField" value="17" />
<div class="section" id='News_17'>
<h2 class="newsTitle">
SmartSoft are the champs
</h2>
<img id="newsRepeater_ctl00_Image1" class="newsImage" alt="MET Stories" src="Repository/NewsComponent/SOriginalFinal.jpg" style="border-width:0px;" />
<p class="newsParagraph">
After competing against CSEN and BI companies. SmartSoft managed to
win the Software Engineering Competition for Spring 2010 after developing an outstanding online tool for automating agile software management. Congratulations to SmartSoft!
</p>
<div id="newsRepeater_ctl00_morelink" style="display:none;">
<a class="newsLink" href=""
target="_blank">more</a>
</div>
</div>
<input type="hidden" name="newsRepeater$ctl01$idHdnField" id="newsRepeater_ctl01_idHdnField" value="1" />
<div class="section" id='News_1'>
<h2 class="newsTitle">
Media Engineering at the GUC
</h2>
<img id="newsRepeater_ctl01_Image1" class="newsImage" alt="MET Stories" src="Repository/NewsComponent/library.jpg" style="border-width:0px;" />
<p class="newsParagraph">
Media Engineering and Technology aims at the evolving field of nearly all aspects of information and multimedia processing. The study program in "Media Engineering and Technology" rests on the same fundamentals as for Information Technology.
</p>
<div id="newsRepeater_ctl01_morelink" style="display: block;">
<a class="newsLink" href="About/Programs.aspx"
target="_blank">more</a>
</div>
</div>
</div>
</div>
<img src="Media/Images/HomePage/next.png.ashx" id="next" alt="Next" onclick="my_glider.next();return false;" /><!--<div id="nextDiv"></div> -->
</div>
</div>
<!-- /News -->
<!-- Footer -->
<div id="footer">
<h5 class="right">
<a href="Feeds/RSS.aspx">
<img src="Media/Icons/rss.png.ashx" alt="RSS" style="border-style: none; position: relative;
top: 3px; padding-right: 2px;" /><b>RSS</b> Feeds</a> <a href="Credits/robusta.aspx">
Credits</a>
</h5>
<h5 class="left">
Copyright © 2008 GUC. All Rights Reserved.</h5>
</div>
<!-- /Footer -->
</div>
<!-- /Content -->
</div>
<!-- /Page Container -->
<!-- Extra Divs -->
<!-- /Extra Divs -->
<div id="glider_script">
<script type="text/javascript" charset="utf-8">
var my_glider = new Glider('newsGlider', {duration:1.0, autoGlide:true, frequency:15});
</script>
</div>
<script type="text/javascript">
//<![CDATA[
var Page_Validators = new Array(document.getElementById("LoginUserControl1_LoginEmailRequiredFieldValidator"), document.getElementById("LoginUserControl1_LoginEmailFormatValidator"), document.getElementById("LoginUserControl1_LoginPasswordRequiredFieldValidator"));
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var LoginUserControl1_LoginEmailRequiredFieldValidator = document.all ? document.all["LoginUserControl1_LoginEmailRequiredFieldValidator"] : document.getElementById("LoginUserControl1_LoginEmailRequiredFieldValidator");
LoginUserControl1_LoginEmailRequiredFieldValidator.controltovalidate = "LoginUserControl1_usernameTextBox";
LoginUserControl1_LoginEmailRequiredFieldValidator.errormessage = "Email required.";
LoginUserControl1_LoginEmailRequiredFieldValidator.display = "None";
LoginUserControl1_LoginEmailRequiredFieldValidator.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
LoginUserControl1_LoginEmailRequiredFieldValidator.initialvalue = "";
var LoginUserControl1_LoginEmailFormatValidator = document.all ? document.all["LoginUserControl1_LoginEmailFormatValidator"] : document.getElementById("LoginUserControl1_LoginEmailFormatValidator");
LoginUserControl1_LoginEmailFormatValidator.controltovalidate = "LoginUserControl1_usernameTextBox";
LoginUserControl1_LoginEmailFormatValidator.errormessage = "Must be in the form of user#student.guc.edu.eg OR user#guc.edu.eg";
LoginUserControl1_LoginEmailFormatValidator.display = "None";
LoginUserControl1_LoginEmailFormatValidator.evaluationfunction = "RegularExpressionValidatorEvaluateIsValid";
LoginUserControl1_LoginEmailFormatValidator.validationexpression = "\\w+([-+.\']\\w+)*#(student.)?guc.edu.eg";
var LoginUserControl1_LoginPasswordRequiredFieldValidator = document.all ? document.all["LoginUserControl1_LoginPasswordRequiredFieldValidator"] : document.getElementById("LoginUserControl1_LoginPasswordRequiredFieldValidator");
LoginUserControl1_LoginPasswordRequiredFieldValidator.controltovalidate = "LoginUserControl1_passwordTextBox";
LoginUserControl1_LoginPasswordRequiredFieldValidator.errormessage = "Password required.";
LoginUserControl1_LoginPasswordRequiredFieldValidator.display = "None";
LoginUserControl1_LoginPasswordRequiredFieldValidator.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
LoginUserControl1_LoginPasswordRequiredFieldValidator.initialvalue = "";
//]]>
</script>
<script type="text/javascript">
<!--
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
ValidatorOnLoad();
}
function ValidatorOnSubmit() {
if (Page_ValidationActive) {
return ValidatorCommonOnSubmit();
}
else {
return true;
}
}
// -->
</script>
<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
Sys.Application.add_init(function() {
$create(AjaxControlToolkit.ValidatorCalloutBehavior, {"closeImageUrl":"/WebResource.axd?d=E9XUtTpBpgn1nrqvm7JdsQNAiTSrs01kvYMfJ6_c6indZV0XUSo9nn5ewbqAXA5hefaIKnoyXSIFnFPdZX8u_dwAMV0u0RfKJgPDjFETh3g1&t=633887970297152468","highlightCssClass":"invalidInput","id":"LoginUserControl1_LoginEmailRequiredFieldValidatorExtender","warningIconImageUrl":"/WebResource.axd?d=E9XUtTpBpgn1nrqvm7JdsQNAiTSrs01kvYMfJ6_c6indZV0XUSo9nn5ewbqAXA5hpBwM9IEYB0L_JPlcVCV_StBVa8rc0SgI1L1ARCQ2e4o1&t=633887970297152468"}, null, null, $get("LoginUserControl1_LoginEmailRequiredFieldValidator"));
});
Sys.Application.add_init(function() {
$create(AjaxControlToolkit.ValidatorCalloutBehavior, {"closeImageUrl":"/WebResource.axd?d=E9XUtTpBpgn1nrqvm7JdsQNAiTSrs01kvYMfJ6_c6indZV0XUSo9nn5ewbqAXA5hefaIKnoyXSIFnFPdZX8u_dwAMV0u0RfKJgPDjFETh3g1&t=633887970297152468","highlightCssClass":"invalidInput","id":"LoginUserControl1_LoginEmailFormatValidatorExtender","warningIconImageUrl":"/WebResource.axd?d=E9XUtTpBpgn1nrqvm7JdsQNAiTSrs01kvYMfJ6_c6indZV0XUSo9nn5ewbqAXA5hpBwM9IEYB0L_JPlcVCV_StBVa8rc0SgI1L1ARCQ2e4o1&t=633887970297152468"}, null, null, $get("LoginUserControl1_LoginEmailFormatValidator"));
});
document.getElementById('LoginUserControl1_LoginEmailRequiredFieldValidator').dispose = function() {
Array.remove(Page_Validators, document.getElementById('LoginUserControl1_LoginEmailRequiredFieldValidator'));
}
document.getElementById('LoginUserControl1_LoginEmailFormatValidator').dispose = function() {
Array.remove(Page_Validators, document.getElementById('LoginUserControl1_LoginEmailFormatValidator'));
}
document.getElementById('LoginUserControl1_LoginPasswordRequiredFieldValidator').dispose = function() {
Array.remove(Page_Validators, document.getElementById('LoginUserControl1_LoginPasswordRequiredFieldValidator'));
}
//]]>
</script>
</form>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-6040050-1");
pageTracker._trackPageview();
</script>
</body>
</html>
You can usually get the source for any website by hitting ctrl+u (at least for Chrome)
You need to read up on XHR.
See here: http://code.google.com/chrome/extensions/xhr.html
This will let you load the contents of http://met.guc.edu.eg into a variable.
Then you you need to read up on regexp, which would let you extract the information that you want.
It is almost impossible to give a full answer without actually doing it.
You may find it easier to load the content in an Iframe that you control the dimensions / scroll of.
Related
Check if the device can hover
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>
W3C Markup Validation gives me 3 errors on one line that seems to work
I ran my website in the W3C Validator only to be given these errors:
<a href="#header-anchor">
<img src="img/banner.png" width="169" height="54" alt="Logo">
</a>
The errors I got are:
Line 14, column 28: An a start tag seen but an element of the same type was already open.
Line 14, column 28: End tag a violates nesting rules.
Line 14, column 28: Cannot recover after last error. Any further errors will be ignored.
I am not sure what is causing this error, so any help will appreciated. Thanks.
EDIT: Apparently this piece of code is causing the error but I am not sure what it is exactly causing it:
<a href="index.html">
Edit 2: Whole code:
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- Banner -->
<a class="anchor" id="header-anchor">
<div id="header-wrapper">
<header role="banner" id="header">
<a href="index.html">
<img src="img/banner.png" width="169" height="54" alt="Logo">
</a>
<nav role="navigation">
<ul>
<li>HOME</li>
<li>SERVICES</li>
<li>OUR TEAM</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
<div id="banner-wrapper">
<section id="banner">
<h2>Title</h2>
<h3>Tagline</h3>
</section>
</div>
<!-- Services -->
<a class="anchor" id="services-anchor"></a>
<div class="wrapper">
<section id="services" class="group">
<h2>Our Services</h2>
<div class="floatleft small"> <span class="fa-stack fa-3x"> <i class="fa fa-line-chart fa-stack-1x fa-inverse"></i> </span>
<h3>Service 1</h3>
<p>Service 1</p>
</div>
<div class="floatleft small"> <span class="fa-stack fa-3x"> <i class="fa fa-money"></i> </span>
<h3>Service 1</h3>
<p>Service 1</p>
</div>
<div class="floatleft small"> <span class="fa-stack fa-3x"> <i class="fa fa-globe"></i> </span>
<h3>Service 1</h3>
<p>Service 1</p>
</div>
</section>
</div>
<!-- About us -->
<a class="anchor" id="team-anchor"></a>
<section id="team" class="group">
<h2>Our Team</h2>
<div class="floatleft mid"> <img src="img/ben.jpg" width="250" height="250" alt="Ben Fitchew">
<h3>Team 1</h3>
<p>Team 1</p>
</div>
<div class="floatleft mid"> <img src="img/jeremy.jpg" width="250" height="250" alt="Jeremy Lang">
<h3>Team 1</h3>
<p>Team 1</p>
</div>
<div class="floatright mid"> <img src="img/gianluca.jpg" width="250" height="250" alt="Gianluca Monaco">
<h3>Team 1</h3>
<p>Team 1</p>
</div>
<div class="floatright mid"> <img src="img/will.jpg" width="250" height="250" alt="William Pattisson">
<h3>Team 1</h3>
<p>Team 1</p>
</div>
</section>
<!-- About -->
<div class="wrapper"> <a class="anchor" id="about-anchor"></a>
<section id="about" class="group" role="main">
<h2>About</h2>
<h3>About</h3>
<p>About</p>
</section>
</div>
<!-- Slideshow -->
<div class="wrapper">
<h2>Slideshow</h2>
<h3>Slideshow</h3>
<p class="Slideshow"><img src='images/picture1.jpg' name='SlideShow'/></p>
</section>
</div>
<!-- Javascript code -->
<script type="text/javascript">
var slideShowSpeed = 2000;
var Pic = new Array();
Pic[0]='img/picture1.jpg';
Pic[1]='img/picture2.jpg';
Pic[2]='img/picture3.jpg';
Pic[3]='img/picture4.jpg';
Pic[4]='img/picture5.jpg';
Pic[5]='img/picture6.jpg';
var currentPicture = 1;
var pictureNo = Pic.length;
var preLoad = new Array();
for (i = 0; i < pictureNo; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration=3)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[currentPicture].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
currentPicture = currentPicture + 1;
if (currentPicture >= pictureNo)
currentPicture = 0;
setTimeout('runSlideShow()', slideShowSpeed);
}
</script>
<script>
runSlideShow();
</script>
<!-- Contact -->
<a class="anchor" id="contact-anchor"></a>
<div class="map-wrapper">
<section id="contact" class="group">
<h2>Contact Us</h2>
<div id="map-canvas" class="floatleft mid"></div>
<div class="floatright mid">
<form id="frmContact" action="mail.php" method="post" role="form">
<label for="txtName" id="lblName">Name</label>
<input type="text" name="txtName" id="txtName" aria-labelledby="lblName" required placeholder="Enter your name here" minlength="3" maxlength="70" pattern="[a-zA-Z ]+">
<span class="error_show">Name is not valid!</span>
<label for="txtEmail" id="lblEmail">Email</label>
<input type="email" name="txtEmail" id="txtEmail" aria-labelledby="lblEmail" required placeholder="Enter your email here" minlength="5" maxlength="254">
<span class="error_show">Email is not valid!.</span>
<label for="txtMessage" id="lblMessage">Message</label>
<textarea name="txtMessage" id="txtMessage" aria-labelledby="txtMessage" required placeholder="Enter your message here"></textarea>
<span class="error_show">Message is not valid!</span>
<input type="submit" name="submit" id="submit" value="Send Message">
</form>
</div>
</section>
</div>
<!-- Javascript -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
// Code for Google Map
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var myLatLng = new google.maps.LatLng(51.51463,-0.106533);
var mapOptions = {
center: myLatLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Ardevora'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {
// Form Validation Code
$('#txtName').on('input', function() {
var input=$(this);
var is_name=input.val();
if (is_name) {
input.removeClass("invalid").addClass("valid");
input.next().hide();
} else {
input.removeClass("valid").addClass("invalid");
input.next().show();
}
});
$('#txtEmail').on('input', function() {
var input=$(this);
var regex = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,6}$/i;
var is_email=regex.test(input.val());
if (is_email) {
input.removeClass("invalid").addClass("valid");
input.next().hide();
} else {
input.removeClass("valid").addClass("invalid");
input.next().show();
}
});
$('#txtMessage').keyup(function(event) {
var input=$(this);
var message=$(this).val();
if (message) {
input.removeClass("invalid").addClass("valid");
input.next().hide();
} else {
input.removeClass("valid").addClass("invalid");
input.next().show();
}
});
$("#submit").click(function(event) {
var form_data=$("#frmContact").serializeArray();
var error_free=true;
for (var input in form_data){
var element=$("#"+form_data[input]['name']);
var valid=element.hasClass("valid");
var error_element=element.next();
if (!valid) {
error_element.show();
error_free=false;
} else {
error_element.hide();
}
}
if (!error_free){
event.preventDefault();
}
});
});
</script>
<!-- Cookie Script -->
<script type="text/javascript">
(function(){
var msg = "We use cookies to enhance your web browsing experience. By continuing to browse the site you agree to our policy on cookie usage.";
var closeBtnMsg = "Ok I comply";
var privacyBtnMsg = "Privacy Policy";
var privacyLink = "http://www.google.com";
//check cookies
if(document.cookie){
var cookieString = document.cookie;
var cookieList = cookieString.split(";");
// if cookie named OKCookie is found, return
for(x = 0; x < cookieList.length; x++){
if (cookieList[x].indexOf("OKCookie") != -1){return};
}
}
var docRoot = document.body;
var okC = document.createElement("div");
okC.setAttribute("id", "okCookie");
var okCp = document.createElement("p");
var okcText = document.createTextNode(msg);
//close button
var okCclose = document.createElement("a");
var okcCloseText = document.createTextNode(closeBtnMsg);
okCclose.setAttribute("href", "#");
okCclose.setAttribute("id", "okClose");
okCclose.appendChild(okcCloseText);
okCclose.addEventListener("click", closeCookie, false);
//privacy button
var okCprivacy = document.createElement("a");
var okcPrivacyText = document.createTextNode(privacyBtnMsg);
okCprivacy.setAttribute("href", privacyLink);
okCprivacy.setAttribute("id", "okCprivacy");
okCprivacy.appendChild(okcPrivacyText);
//add to DOM
okCp.appendChild(okcText);
okC.appendChild(okCp);
okC.appendChild(okCclose);
okC.appendChild(okCprivacy);
docRoot.appendChild(okC);
okC.classList.add("okcBeginAnimate");
function closeCookie(){
var cookieExpire = new Date();
cookieExpire.setFullYear(cookieExpire.getFullYear() +2);
document.cookie="OKCookie=1; expires=" + cookieExpire.toGMTString() + ";";
docRoot.removeChild(okC);
}
})();
</script>
<!-- Footer -->
<footer role="contentinfo">
<!-- Left Footer -->
<ul class="floatleft">
<li>HOME</li>
<li>SERVICES</li>
<li>OUR TEAM</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
<!-- Right Footer -->
<ul class="floatright">
<p>Copyright 2014</p>
</ul>
</footer>
</body>
</html>
What is your declaration of page? Likely to be a bug in the non-completion of the <img /> tag. <img src="img/banner.png" width="169" height="54" alt="Logo" /> Tag <a> should have a title="Title a" consistent with alt="Alt img" image
The tag <a class="anchor" id="header-anchor"> has no closing tag. This causes the elements after it to be taken as its content, which in turn leads to violation of element nesting rules. The simplest fix is to add the closing tag immediately after the start tag: <a class="anchor" id="header-anchor"></a> Such an element is not good style, though. You can probably work with just id attributes and class attributes assigned to elements with real content. Fixing the problem causes some errors later in the document to be reported, but they are relatively easy to analyze (especially with the help of the explanations).
Truncated html code in QWebFrame after update
I was using QT 5.3.1 32 bit but i decided to update my QT to 5.3.2 and 64 BIT
I have trouble with Parsing HTML code.
My code which was working on 32 bit and 5.3.1
std::string html = std::move(output.buffer); // html from curl - all ok
QWebPage * tmp_webpage = new QWebPage();
tmp_webpage->mainFrame()->setHtml(QString::fromStdString(html));
std::fstream test_stream;
test_stream.open("example14.html", std::ios::out | std::ios::in);
test_stream << tmp_webpage->mainFrame()->toHtml().toStdString(); // html is cut in about 50%
test_stream.close();
QWebFrame * tmp_frame = tmp_webpage->mainFrame();
QWebElement mainTable_site = tmp_frame->findFirstElement(QString::fromStdString(mainTable_selector)); // not found because qt cut my correct html
This code was working , but now my HTML code which is put to QWebFrame has truncated.
In this code - "test_stream" take expected html code
QByteArray html = std::move(output.buffer);
test_stream.write(html);
Html code is cut after </script>.
QWebFrame appended (at the end - after </script>) </div></div></body></html> (of course original code is other )
After </script>, in original html code i have <table id="production_table" > not </div></div></body></html>
Question:
How to set that setHtml() won't truncate my html code?
(i'm using qt to parse some html files, i really dont want take new class (like tidyhtml) and again write code - all was okey but on previous version)
Original HTML code here:
<!DOCTYPE HTML>
<html>
<head>
<title>O rety rety atakują ci z Bety ! (412|412) - Plemiona - Świat 80</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-itunes-app" content="app-id=435365767, app-argument=x-sfp:///visit/tribal-wars">
<link rel="apple-touch-icon-precomposed" href="/apple-icon-iphone-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-icon-ipad-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-icon-iphone4-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-icon-retina-precomposed.png" />
<link rel="stylesheet" type="text/css" href="/merged/mobile.css?1412598051" />
<link rel="stylesheet" type="text/css" href="/css/game/overview_base.css?1412598051" />
<script type="text/javascript" src="/merged/mobile.js?1412598051"></script>
<script type="text/javascript" src="/js/game/upgrade_building.js?1408412983"></script>
<script type="text/javascript">
//<![CDATA[
var image_base = "http://cdn.tribalwars.net/graphic/";
var mobile = true;
var mobiledevice = false;
var game_data = {"player":{"name":"as2d99","ally":"4317","sitter":"0","sleep_start":"0","sitter_type":"normal","sleep_end":"0","sleep_last":"0","interstitial":"0","email_valid":"1","villages":"2","incomings":"0","supports":0,"knight_location":null,"knight_unit":null,"rank":2263,"points":"13019","date_started":"1391362221","is_guest":"0","id":"698410832","quest_progress":"0","premium":false,"account_manager":false,"farm_manager":false,"points_formatted":"13<span class=\"grey\">.<\/span>019","rank_formatted":"2<span class=\"grey\">.<\/span>263","pp":"0","new_ally_application":"0","new_ally_invite":"0","new_buddy_request":"0","new_forum_post":"127","new_igm":"0","new_items":"0","new_report":"0","fire_pixel":"0","new_quest":"1"},"village":{"id":96311,"name":"O rety rety atakuj\u0105 ci z Bety !","wood_prod":0.86666667626364,"stone_prod":0.86666667626364,"iron_prod":0.86666667626364,"storage_max":"400000","pop_max":"24960","wood_float":"400000","stone_float":"400000","iron_float":"400000","wood":400000,"stone":400000,"iron":400000,"pop":"23354","x":"412","y":"412","trader_away":"0","bonus_id":"8","bonus":{"wood":1.3,"stone":1.3,"iron":1.3},"buildings":{"village":"96311","main":"20","farm":"30","storage":"30","place":"1","barracks":"25","church":"1","church_f":"0","smith":"20","wood":"30","stone":"30","iron":"30","market":"20","stable":"20","wall":"20","garage":"15","hide":"10","snob":"1","statue":"1","watchtower":"0"},"player_id":"698410832","res":[400000,0.86666667626364,400000,0.86666667626364,400000,0.86666667626364,"400000","23354","24960"],"coord":"412|412"},"nav":{"parent":2},"link_base":"\/game.php?village=96311&screen=","link_base_pure":"\/game.php?village=96311&screen=","csrf":"d199","world":"pl80","market":"pl","RTL":false,"version":"22314 8.27.1","majorVersion":"8.27.1","screen":"overview_villages","mode":null,"device":"desktop"};
var csrf_token = 'd199';
var server_utc_diff = 7200;
var VillageContext = (!VillageContext) ? { } : VillageContext;
VillageContext.claim_enabled = true;
//]]>
</script>
</head>
<body id="ds_body" class="mds">
<div id="mNotifyContainer">
<div id="notify_incomings" class="mNotify" style="display: none">
<span class="mNotifyNumber">
0
</span>
</div>
<div id="notify_supports" class="mNotify" style="display: none">
<span class="mNotifyNumber"><a class="mNotifyNumber" href="""></a></span>
</div>
<div id="notify_mail" class="mNotify" style="display: none">
</div>
<div id="notify_report" class="mNotify" style="display: none">
</div>
<div id="notify_forum" class="mNotify" >
</div>
<div class="mNotify" style="display: none">
</div>
</div>
<div id="loading" ><img src="http://dspl.innogamescdn.com/8.27.1/22314/graphic/m/ajax-loader.gif?df38d" title="" alt="" class="" /><br />Wczytywanie...</div>
<span id="storage" style="display: none">400000</span>
<div id="mobileHeader">
<div id="mobileTouch">
<div id="mobileMenu" class="mobileMenu">
<div id="mobileMenuScroll" class="mobileMenuScrollContent">
<span class="arrow">«</span>
<a href="/game.php?village=96311&screen=overview">O rety rety atakują ci z Bety !
<span class="bonus_icon bonus_icon_8" title="30% większa produkcja surowców (wszystkie surowce)"></span> <b class="nowrap">(412|412) K76</b></a>
- Mapa
- Przeglądy
- Raporty
- Wiadomości
- <span id="tribe_forum_indicator" class="icon header new_post" title="Nowy komentarz w forum"></span>Plemię
- Ranking
- Więcej
<span class="arrow">»</span>
</div>
</div>
<div id="mobileMenuSmall">
<span class="mheader icon wood"></span> <span id="wood" title="3120" class="warn" data-amount="400000"></span>
<span class="mheader icon stone"></span> <span id="stone" title="3120" class="warn" data-amount="400000"></span>
<span class="mheader icon iron"></span> <span id="iron" title="3120" class="warn" data-amount="400000"></span>
<span class="mheader icon pop"></span> <span id="pop_current_label">23354</span>/<span id="pop_max_label">24960</span>
</div>
</div>
<div class="mobileDivider"></div>
<div id="mobileMore">
Profil
Inwentarz
Ustawienia
Premium
Przyjaciele
Notatki
Flagi
Rycerz
Menedżer Konta
Asystent Farmera
Pomoc
Forum
Wylogowanie
</div>
</div>
<div id="mobileNav">
<div><span class="mobileNav" id="mobileNavRight"></span></div>
<div><span class="mobileNav" id="mobileNavLeft"></span></div>
</div>
<div class="mobileNavContent" id="mobileNavContentLeft"></div>
<div class="mobileNavContent" id="mobileNavContentRight"></div>
<div id="mobileContent">
<div class="menu" style="display:none; padding:3px;" id="group_popup"></div>
<div class="error_box" style="display:none;">
</div>
<div id="content_value" style="margin: 0 auto">
<script type="text/javascript">
$(function(){
VillageGroups.initOverviews();
});
</script>
<table id="production_table" class="vis small" cellspacing="0">
<tr style="margin-top:3px;">
<th style="border-top:1px solid;">
<span class="quickedit-vn" data-id="96311">
<span class="quickedit-content">
<a href="/game.php?village=96311&screen=overview">
<span class="quickedit-label" data-text="O rety rety atakują ci z Bety !">
O rety rety atakują ci z Bety ! (412|412) K76 </span>
<span class="bonus_icon bonus_icon_8" title="30% większa produkcja surowców (wszystkie surowce)"></span> </a>
<a class="rename-icon" href="#" title="Zmień nazwę"></a>
</span>
</span>
</th>
<th style="border-top:1px solid;text-align:right;">10<span class="grey">.</span>029</th>
</tr>
<tr class="nowrap">
<td colspan="2" class="nopad">
<a class="button icon show_more">Dalsze informacje</a>
<div class="more_info">
<table width="100%">
<tr><td>Surowce<br /><table><tr><td><span><span class="warn wood">400<span class="grey">.</span>000</span> <span class="warn stone">400<span class="grey">.</span>000</span> <span class="warn iron">400<span class="grey">.</span>000</span> </span></td></tr></table><hr /></td></tr>
<tr><td class="nopad">
<table><tr>
<td style="border-right:1px dotted;">Spichlerz<br /><table><tr><td><span><img src="http://dspl.innogamescdn.com/8.27.1/22314/graphic/res.png?0fdfc" alt="" title="Pojemność spichlerza" /> 400000</span></td></tr></table></td>
<td style="padding-left:5px">Zagroda<br /><table><tr><td><span><span class="icon header population"> </span> 23354/24960</span></td></tr></table></td>
</tr></table>
<hr /></td></tr>
<tr><td><span>Kupcy</span><br /><table><tr><td>110</td></tr></table><hr /></td></tr>
</table>
</div>
</td>
</tr>
<tr style="margin-top:3px;">
<th style="border-top:1px solid;">
<span class="quickedit-vn" data-id="94464">
<span class="quickedit-content">
<a href="/game.php?village=94464&screen=overview">
<span class="quickedit-label" data-text="wioska barbarzyńska">
wioska barbarzyńska (412|412) K75 </span>
</a>
<a class="rename-icon" href="#" title="Zmień nazwę"></a>
</span>
</span>
</th>
<th style="border-top:1px solid;text-align:right;">2<span class="grey">.</span>990</th>
</tr>
<tr class="nowrap">
<td colspan="2" class="nopad">
<a class="button icon show_more">Dalsze informacje</a>
<div class="more_info">
<table width="100%">
<tr><td>Surowce<br /><table><tr><td><span><span class="warn wood">115<span class="grey">.</span>798</span> <span class="warn stone">115<span class="grey">.</span>798</span> <span class="warn iron">115<span class="grey">.</span>798</span> </span></td></tr></table><hr /></td></tr>
<tr><td class="nopad">
<table><tr>
<td style="border-right:1px dotted;">Spichlerz<br /><table><tr><td><span><img src="http://dspl.innogamescdn.com/8.27.1/22314/graphic/res.png?0fdfc" alt="" title="Pojemność spichlerza" /> 115798</span></td></tr></table></td>
<td style="padding-left:5px">Zagroda<br /><table><tr><td><span><span class="icon header population"> </span> 1918/2598</span></td></tr></table></td>
</tr></table>
<hr /></td></tr>
<tr><td><span>Kupcy</span><br /><table><tr><td>154</td></tr></table><hr /></td></tr>
</table>
</div>
</td>
</tr>
</table>
<script>
$(function(){
$('.quickedit-vn').QuickEdit( { url: TribalWars.buildURL('POST', 'main', { ajaxaction: 'change_name', village: '__ID__' } ) } );
});
</script>
</div>
</div>
<div style="clear: both">
<p style="float: left; margin-bottom: 0">
Wersja przeglądarkowa
</p>
<p style="float: right; margin-bottom: 0">
<span id="serverTime">21:37:58</span> <span id="serverDate">14/10/2014</span>
</p>
</div>
<div id="mNotifySpacer"> </div>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-35100433-1']);
_gaq.push(['_trackPageview']);
_gaq.push(['_gat._anonymizeIp']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();
</script>
<script>
$(document).ready(function() {
TribalWars.initTab('9df45365fb');
Timing.init(1413315478.0743);
Connection.connect(8080, 'b3267d405e8f');
UI.Notification.enabled = true;
});
</script>
<div id="side-notification-container"></div>
</body>
</html>
populating angular div with children's children
Folks- I have a data structure of nested parent-child structure. The first level (parents) drives angular to create a row of buttons. Selecting one of these buttons populates a list with the second level (children). Now I also need that selection to drive a third level (grandchildren). That third div needs to have all the grandchildren of the children.
As I'm relatively new to angular, I'm afraid I'm looking at it too procedurally.
Code follows:
<html ng-app="KPI_Scorecard">
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<!--script src="js/controllers.js"></script-->
<script>
var $j = jQuery.noConflict();
var KPI_Scorecard = angular.module('KPI_Scorecard', []);
var listL2;
var myChildren;
var myChildrenChildren = []
KPI_Scorecard.controller('KPIListCtrl', function ($scope) {
$scope.showL2Content = function(whatChildren) {
$scope.myChildren = whatChildren;
$scope.myChildrenChildren;
for (x=0;x<$scope.myChildren.length;x++) {
myChildrenChildren = [];
for (y=0;y<$scope.myChildren[x].children.length;y++) {
myChildrenChildren.push($scope.myChildren[x].children[y]);
}
//console.log(myChildrenChildren);
};
console.log(myChildrenChildren.length);
};
$scope.showL3Content = function(whatChildren) {
//console.log(whatChildren);
};
$scope.myList = [{"id":"Jack","employeeLevel":"1","managerName":"John","l1Mgr":"none","l2Mgr":"none","goals":[{"goalName":"Margin","goalWeight":"0.5","goalColor":"11.7"},{"goalName":"Expense","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Chuck","employeeLevel":"2","managerName":"Jack","l1Mgr":"Jack","l2Mgr":"none","goals":[{"goalName":"Expense","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"David","employeeLevel":"3","managerName":"Chuck","l1Mgr":"Jack","l2Mgr":"Chuck","goals":[{"goalName":"budget","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[]},{"id":"Scott","employeeLevel":"3","managerName":"Chuck","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Investment","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Jill","employeeLevel":"4","managerName":"Scott","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Data","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}]},{"id":"Rick","employeeLevel":"4","managerName":"Scott","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"technology","goalWeight":"1","goalColor":"NULL"},{"goalName":"Data","goalWeight":"0.5","goalColor":"NULL"}],"children":[]}]}]},{"id":"Js","employeeLevel":"2","managerName":"Jack","l1Mgr":"Jack","l2Mgr":"none","goals":[{"goalName":"Cross","goalWeight":"0.2","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Alison","employeeLevel":"3","managerName":"Js","l1Mgr":"Jack","l2Mgr":"Js","goals":[{"goalName":"Research","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[]},{"id":"Peter","employeeLevel":"3","managerName":"Js","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Invest","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.33","goalColor":"NULL"}],"children":[]}]}]},{"id":"Jim","employeeLevel":"1","managerName":"John","l1Mgr":"none","l2Mgr":"none","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[{"id":"Anne","employeeLevel":"2","managerName":"Jim","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[{"id":"Marisa","employeeLevel":"3","managerName":"Anne","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Spending","goalWeight":"1","goalColor":"NULL"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[]},{"id":"Linda","employeeLevel":"3","managerName":"Anne","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[]}]},{"id":"Gene","employeeLevel":"2","managerName":"Jim","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Total","goalWeight":"0.33","goalColor":"92.96"}],"children":[{"id":"Kathleen","employeeLevel":"3","managerName":"Gene","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"% Clients","goalWeight":"1","goalColor":"NULL"},{"goalName":"Employee","goalWeight":"1","goalColor":"90"}],"children":[]},{"id":"Chris","employeeLevel":"3","managerName":"Gene","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"processes","goalWeight":"1","goalColor":"NULL"},{"goalName":"Planning","goalWeight":"1","goalColor":"NULL"}],"children":[]}]}]}];
})
</script>
</head>
<body ng-controller="KPIListCtrl">
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>SCORECARDS</h1>
HOME
</div>
<div data-role="content" style="height:400px">
<ul data-role="listview" id="list-L2" data-divider-theme="b" data-inset="true" style="width: 20%; display: inline-block;" ng-click="$event.preventDefault()">L2 Scorecards
<li ng-repeat="aName in myChildren">
{{aName.id}}
</li>
</ul>
<ul data-role="listview" id="list-L3" data-divider-theme="b" data-inset="true" style="width: 20%; display: inline-block;" ng-click="$event.preventDefault()">L3 Scorecards
<li ng-repeat="aName2 in myChildrenChildren">
{{aName2}}
</li>
</ul>
</div>
<div data-role="footer" id="list-L1" ng-click="$event.preventDefault()">
</form> <span ng-repeat="aName in myList" style="float:left">
{{user.name}}<br>
<button ng-click="showL2Content(aName.children)">{{aName.id}}</button>
</span></div>
</div>
</body>
</html>
This article talks about using recursion in directives: http://sporto.github.io/blog/2013/06/24/nested-recursive-directives-in-angular/ which sounds like it will solve your problem.
this works, but I'm feeling like I should either preprocess the JSON differently, or there might be a more 'angular' way of doing this.
<html ng-app="KPI_Scorecard">
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<!--script src="https://ribbit.fmr.com/resources/statics/379584/angular.min.js"></script-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<!--script src="js/controllers.js"></script-->
<script>
var $j = jQuery.noConflict();
var KPI_Scorecard = angular.module('KPI_Scorecard', []);
var listL2;
var myChildren;
var myL3s = []
KPI_Scorecard.controller('KPIListCtrl', function ($scope) {
$scope.showL2Content = function (whatChildren) {
var myL3s = []
$scope.myChildren = whatChildren;
for (x = 0; x < whatChildren.length; x++) {
for (y = 0; y < whatChildren[x].children.length; y++) {
myL3s.push(whatChildren[x].children[y]);
}
};
$scope.myChildrenChildren= myL3s;
console.log(myL3s);
};
//console.log(myChildrenChildren);
$scope.showL3Content = function (whatChildren) {
//console.log(whatChildren);
};
$scope.myList = [{"id":"Jack","employeeLevel":"1","managerName":"John","l1Mgr":"none","l2Mgr":"none","goals":[{"goalName":"Margin","goalWeight":"0.5","goalColor":"11.7"},{"goalName":"Expense","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Chuck","employeeLevel":"2","managerName":"Jack","l1Mgr":"Jack","l2Mgr":"none","goals":[{"goalName":"Expense","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"David","employeeLevel":"3","managerName":"Chuck","l1Mgr":"Jack","l2Mgr":"Chuck","goals":[{"goalName":"budget","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[]},{"id":"Scott","employeeLevel":"3","managerName":"Chuck","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Investment","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Jill","employeeLevel":"4","managerName":"Scott","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Data","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}]},{"id":"Rick","employeeLevel":"4","managerName":"Scott","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"technology","goalWeight":"1","goalColor":"NULL"},{"goalName":"Data","goalWeight":"0.5","goalColor":"NULL"}],"children":[]}]}]},{"id":"Js","employeeLevel":"2","managerName":"Jack","l1Mgr":"Jack","l2Mgr":"none","goals":[{"goalName":"Cross","goalWeight":"0.2","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Alison","employeeLevel":"3","managerName":"Js","l1Mgr":"Jack","l2Mgr":"Js","goals":[{"goalName":"Research","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[]},{"id":"Peter","employeeLevel":"3","managerName":"Js","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Invest","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.33","goalColor":"NULL"}],"children":[]}]}]},{"id":"Jim","employeeLevel":"1","managerName":"John","l1Mgr":"none","l2Mgr":"none","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[{"id":"Anne","employeeLevel":"2","managerName":"Jim","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[{"id":"Marisa","employeeLevel":"3","managerName":"Anne","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Spending","goalWeight":"1","goalColor":"NULL"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[]},{"id":"Linda","employeeLevel":"3","managerName":"Anne","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[]}]},{"id":"Gene","employeeLevel":"2","managerName":"Jim","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Total","goalWeight":"0.33","goalColor":"92.96"}],"children":[{"id":"Kathleen","employeeLevel":"3","managerName":"Gene","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"% Clients","goalWeight":"1","goalColor":"NULL"},{"goalName":"Employee","goalWeight":"1","goalColor":"90"}],"children":[]},{"id":"Chris","employeeLevel":"3","managerName":"Gene","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"processes","goalWeight":"1","goalColor":"NULL"},{"goalName":"Planning","goalWeight":"1","goalColor":"NULL"}],"children":[]}]}]}];
})
</script>
</head>
<body ng-controller="KPIListCtrl">
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>SCORECARDS</h1>
HOME
</div>
<div data-role="content" style="height:400px">
<ul data-role="listview" id="list-L2" data-divider-theme="b" data-inset="true" style="width: 20%; display: inline-block;" ng-click="$event.preventDefault()">L2 Scorecards
<li ng-repeat="aName in myChildren">
{{aName.id}}
</li>
</ul>
<ul data-role="listview" id="list-L3" data-divider-theme="b" data-inset="true" style="width: 20%; display: inline-block;" ng-click="$event.preventDefault()">L3 Scorecards
<li ng-repeat="aName2 in myChildrenChildren">
{{aName2.id}}
</li>
</ul>
</div>
<div data-role="footer" id="list-L1" ng-click="$event.preventDefault()">
</form> <span ng-repeat="aName in myList" style="float:left">
{{user.name}}<br>
<button ng-click="showL2Content(aName.children)">{{aName.id}}</button>
</span></div>
</div>
</body>
</html>
Css not working in the second <div> tag in html
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/