Duplicating body tag angular - parallax.js

I am trying to fix problem (4hours) with weird duplicate body tag,
but i dont have any idea how to fix it. Is there anyone who had same problem in past?
<html lang="cs" ng-app="app" class="desktop landskape ng-scope">
<head>...</head>
<body style="overflow:hidden;"></body>
<body class="loaded">...</body>
</html>
App specification
AngularJS (v1.3.15)
jQuery (v2.1.3)
device.js (0.1.61)

Related

BeautifulSoup - check if document is empty (shows nothing in browser)

I am scraping a website and occasionally a page gets thrown up that appears completely empty in the browser. I would like to write an exception for this, but I cannot find a way to check with BeautifulSoup if this is true. I know this seems like an easy problem, but I am a beginner.
The structure of the offending HTML page is as follows:
<!DOCTYPE doctype html>
<html lang="en">
<head>
...
</head>
<body class="something" data-theme="something">
<csn-mobi>
</csn-mobi>
<div id="bitracking" style="display:none">
</div>
<script>
...
</script>
<script>
...
</script>
</body>
</html>
In other words, the <body> has a whole bunch of <script> tags and when I do something like:
BrowserText = soup.body.text
then the problem is that all the script inside the <script> tags gets included as well.
But I want to check if there is anything outside the <script> tags (but within the <body> tag), and if there is nothing, raise an exception.
Any ideas on how to do this?

Template engine for express 4 supporting Layouts

I'm looking for alternatives to Jade templates in express 4.x because I really don't like Jade's syntax. I'm tending towards EJS, because it's basically just HTML on steroids.
However, one really nice feature of Jade templates is the ability to use layouts. I've found https://www.npmjs.org/package/express-ejs-layouts, but it seems to be made for express 3 and its build is failing :/.
I also found https://www.npmjs.org/package/ejs-mate which is made for express 4.x but it only seems to support a single content block (body).
I would like to have something like this:
layout.something:
<html>
<head>
<% block styles %>
<% block scripts %>
</head>
<body>
<% block body %>
</body>
</html>
index.html:
uses layout "layout.somehing"
scripts:
<script src="my_custom_script.js"></script>
styles:
<link rel="stylesheet ...></link>
body:
<h1>This is my body!</h1>
So that this yields:
<html>
<head>
<link rel="stylesheet ...></link>
<script src="my_custom_script.js"></script>
</head>
<body>
<h1>This is my body!</h1>
</body>
</html>
Does anyone know an engine that is capable of that besides Jade?
You can try express-handlebars, it supports layout and partial views.

Jade not correctly rendering elements with ng-view directive

I'm writing a basic Node app and simply want to render the index page with Jade, and then let Angular do the rest on the front-end.
This is the Jade (slightly shortened to illustrate the problem):
doctype html
html
include ../includes/head
body(ng-app="TestApp" ng-controller="TestAppController")
div(ng-view)
include ../includes/foot
Which compiles to the following HTML:
<html>
<head>
<meta charset="utf-8">
<title>Example App</title>
<link rel="stylesheet" href="/dist/css/app.css">
</head>
<body ng-app="ExampleApp" ng-controller="ExampleAppController" class="ng-scope">
<!-- ngView: -->
<footer class="page-footer">
<ul class="page-footer-links">
<li>Some Twitter User</li>
</ul>
</footer>
<script src="/dist/js/app.min.js"></script>
</body>
</html>
Notice how div(ng-view) is now an HTML comment within the rendered HTML, rather than a DIV with the directive:
<!-- ngView: -->
Changing div(ng-view) within the Jade to any of the following produced the same result for me:
ng-view
<div ng-view></div>
| <div ng-view></div>
Any ideas as to why this is happening?
This was actually nothing to do with Jade. As stated in a comment by #NikosParaskevopoulos, the <!-- ngView: --> HTML comment is a placeholder created by Angular upon seeing a <div ng-view> and having no route to display in it.
Redefining my Angular routes solved the problem.

Unable to get position() in JQuery $.each loop

I am trying to make an editable box (kind of a richTextBox) using html5 (contenteditable="true") and jquery. I need to find out position of each element inside the editable div so that I can insert a page break like microsoft word does.
Here is the page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Context Menu Plugin Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#divEdit").keyup(function(){
$.each($("#divEdit").find("*"), function(i,item){
alert(item.position());
});
});
});
</script>
</head>
<body>
<h1>jQuery Context Menu Plugin and KendoUI Demo</h1>
<div style="width:740px;height:440px" contenteditable="true" id = "divEdit">
<p>
<img src="http://www.kendoui.com/Image/kendo-logo.png" alt="Editor for ASP.NET MVC logo" style="display:block;margin-left:auto;margin-right:auto;" />
</p>
<p>
Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows
accessibility standards and provides API for content manipulation.
</p>
<p id="para">Features include:</p>
<ul>
<li>Text formatting & alignment</li>
<li>Bulleted and numbered lists</li>
<li>Hyperlink and image dialogs</li>
<li>Cross-browser support</li>
<li>Identical HTML output across browsers</li>
<li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>
</ul>
<p>
Read more details or send us your
feedback!
</p>
</div>
</body>
The problem is that alert(item.position()) is not fetching anything. The error that comes in firefox developer toolbar is 'item.position is not a function'.
My guess is that it has to do something with the type of each element in $("#divEdit").find("*") as all the elements are different.
Any help would be appreciated.
Thanks
You need to get the jQuery object out of item, as position() is a jQuery method, hence the complain about position() is not a function
$(item).position() // instead of item.position()
Or even more concise:
$.each($("#divEdit").find("*"), function(i,item){
alert(item.position());
}
change to
$('#divEdit').find('*').each(function() {
alert($(this).position());
})
Change this line
alert(item.position());
to
alert($(item).position());

Cant find appropriate doctype, only seems to work in quirks mode

For some reason my web page seems to work fine without a doctype, but doesnt if I specify any in full.
I have gone through various different templates without any success, i.e. code validators then dont like my code and/or it doesnt work.
The only thing "I get away with" is the top line below, but even then I cant specify any details, i.e. its just the beginning of the usual doctype declaration.
The page is the result of Drop down Stackoverflow question.
Also (and the reason why I want to specify type since this may be causing the problems) the page only fully works in IE. It only loads the first drop down in Chrome and doesnt load any in firefox.
I appreciate that above isnt overly clear, but the code is very short, so am hoping if pointed in the right direction I can complete it myself and/or describe other issues better.
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>User Interface</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="dropdown.js"></script>
<html>
<body onload="show_results('','Type1')">
<form name="MainForm">
League:
<span id="FirstList"><b>First List.</b></span>
Team: <span id="SecondList"><b>Loading second list, please wait.</b></span>
<input type="button" value="Button1" onclick="show_results(form.select_second.value,'Type3');" />
<input type="button" value="Button2" onclick="show_results(form.select_first.value,'Type4');" />
Output: <span id="OutputTable"><b>Output table space holder.</b></span>
</form>
</body>
</html>
Managed to solve it myself, even with strict type
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
was perfectly fine after tidying up everything.

Resources