I am developing using jQuery mobile and it has a multipage template as below.
I feel that writing html content inside the same html is bloated.
As such, i would like to separate the content in different html and include standalone html page. It should be mobile browser proven. What is the best practice on this and how it could be done?
Note: I do not expect server side scripting (eg: PHP) to solve this problem. It should be done solely on client side without any templating engine. Something like angularJS ng-include.
Sample of what i expect
<div data-role="page" id="foo1">
<html-include src="foo1.html"></html-include>
</div>
Mobile html multipage
<div data-role="page" id="foo1">
<!-- Content 1 here -->
</div>
<div data-role="page" id="foo2">
<!-- Content 2 here -->
</div>
<div data-role="page" id="foo3">
<!-- Content 3 here -->
</div>
<div data-role="page" id="foo1" data-url="foo1.html">
</div>
And use javascript like so:
$('[data-url]').each(function (k,elem){
$(elem).load(elem.data('url'));
});
This will find all elements that have data-url as attribute, and load that page in AJAX, takes the html received and put in it the corresponding html element.
Related
I need to embed a marketo form onto a github page, essentially host it there, then iframe it into another piece of software I'm using. The iframing in afterwards is striaght forward as the software does that. But I cant work out how to actually embed it on github.
Go to the Marketo form
Grab the form embed code
Grab the munchkin tracking code too. Not 100% essential but needed if you want web page tracking on the Github page the form will live on.
Drop code in a Div section.
From my code example you could replace 132 (with your actual form ID)
And replace 111-AAA-111 wit your Munchkin ID.
Example
<div data-role="page" id="page_1">
<div data-role="header">
<h1>Test form. Embedded</h1>
</div>
<div data-role="main" class="ui-content">
<script src="//app-abj.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_123"></form>
<script>MktoForms2.loadForm("//app-abj.marketo.com", "111-AAA-111", 123);</script>
</div>
<div data-role="footer">
<h1>Footer: text</h1>
</div>
</div>
Basically I need a way to inherit one HTML template(file) from another. The way I see it: parent.html:
<h1><!-- header --></h1>
<div class="container">
<!-- container -->
</div>
child.html:
<!-- extends: ./parent.html -->
<!-- <header> -->
Child Page
<!-- </header> -->
<!-- <content> -->
<span>Content</span>
<!-- </content> -->
Total duplicate of master page feature available in ASP .NET MVC or layouts of RoR.
Can anyone point me to a library that does something similar? (I going to use it as a loader for webpack, so if there is already a loader for this it would be perfect).
I recommend Nunjucks from Mozilla. You can use it via NPM or browser, also it is compiled.
https://mozilla.github.io/nunjucks/templating.html#template-inheritance
I have been working on large angularJs application which have multiple modules. Problem is that now I have to include static website in that application and that website have whole different layout than my application.
I did some R&D and found some answers which were mostly dependent on angular.bootstrap
https://docs.angularjs.org/api/ng/function/angular.bootstrap
but my application's ng-view is declared in html tag not in body and further my layout is like mentioned below.
<div ui-view="header">
</div>
<div class="clearfix">
</div>
<!-- BEGIN CONTAINER -->
<div class="page-container">
<!-- BEGIN SIDEBAR -->
<div class="page-sidebar-wrapper" ui-view="sidebar">
</div>
<!-- END SIDEBAR -->
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
<div class="page-content" ui-view="content">
</div>
</div>
<!-- END CONTENT -->
</div>
but website structure is totally different from this structure so can anyone please suggest how tackle this situation
should I use two ng-views in my index.html if yes than how can I use two ng-views while declare in html tag.
Thanks
What you're describing is like nested views? which the default router does not support so if you want to use of nested views for that you have to use third-party module.
I am looking at using Angular JS to mamange my HTML builds more effectively and am trying my hand at templating some of my HTML. However, it doesn't seem to work? I have;
<div class="container">
<div ng-include='"templates/menu.html"'></div>
<div class="row">
<div class="col-xs-12">
<h1>Hello, baby!</h1>
<p>This is the first ever Angular JS I have ever done.</p>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="_includes/scripts/bootstrap.min.js"></script>
<script src="_includes/scripts/angular.js"></script>
Then I created a folder called, templates, where I have placed a HTML file, called menu, containing a navigation ul saving his obviously as menu.html. When I view index.html in my browser the menu is not rendered. Any help welcome. Thanks
Updated answer (summary of discussion below).
Working example in: http://jsfiddle.net/uo04c05h/
Angular should be started by ng-app directive
<div ng-app class="container">
Path to files is relative to the file where angular is initiated
Ok - first of all I know this isn't ideal - however we have inherited a problem and some badly thought out SSI html.
So some background: We have implemented a responsive site which has to include some SSI code from the client for global top nav and footer - so far so good. However the SSI needs to change from DESKTOP to MOBILE as the site is resized/loaded on a mobile device. We do all this client side at the moment. We have a trigger at break points to alter the dom to do all the responsive stuff.
A similar example is here http://www.conrandesigngroup.com. (Resize the browser to see what happens.)
Normally we would load the SSI into holding pages and AJAX the code in to the appropriate place using some kind of selector.
The problem: The SSI is not fully formed HTML, it looks something like this:
<!-- desktop ssi -->
</head>
<body>
Whole bunch of desktop html...
<div class="content">
Then the SSI we have for the mobile site is:
<!-- mobile ssi -->
<script>some script...</script>
</head>
<body>
Whole bunch of mobile html...
<div class="content">
So you will notice there is a closing</head> and an opening <body> and at the end there is an opening <div>. So there is no way we can select this and replace using the DOM. We were thinking of using comments either side of the code and using a javascript regex to replace the code. Im not sure if this would actually update the browser.
So in desktop mode the whole page will look like this:
<html>
<title>my page</title>
<head>
...all the head stuff
<!-- START of ssi -->
<!-- desktop ssi -->
</head>
<body>
Whole bunch of desktop html...
<div class="content">
<!-- END of SSI -->
...all the page HTML
</div>
</body>
</html>
So thats fine - the HTML is all put together serverside and we can open and close the tags correctly. The problem is how would we change the HTML INSIDE the comments using client side code <!- START of ssi -->...<!-- END of SSI -->
In the end its not really a SSI question - rather a way to change a bit of HTML which is not wrapped up nicely in an element.
Anyone come across this issue before or have any suggestions?
The common denominator is this:
The body element contains the content
Both the mobile and desktop content start with the first child of the body
The code to empty the first element would be the same for both versions:
document.getElementsByTagName("body")[0].firstChild.innerHTML = "";
Wrap the code in a pre element to make it easy to modify.
References
W3C DOM4