Is this possible? Basically, I have HTML file A, which I want to include in HTML files B, C, D, and E. All of them will be displayed within my iOS app. No internet involved -- everything will be on the device.
actually its possible
here is how its done
tell me if i am wrong
first file test.html has following contents
<html><body><object type="text/html" data="test2.html">
<p>if object inclusion faile this takes over</p>
</object></body></html>
and test2.html has this code
<div>blah</div>
Try open it in firefox and it should display blah
if its IE then use this code in your test.html
<html><body>
<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="test2.html">
<p>if object inclusion faile this takes over</p>
</object>
</body></html>
hope this helps
you can also have simple IE detection check like this
<!--[if IE]>
<html><body>
<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="test2.html">
<p>if object inclusion faile this takes over</p>
</object>
</body></html>
<![endif]-->
<!--[if !IE]>
<!-- place your other code here -->
<![endif]-->
There is no standard or magic way, but you would have to do it yourself with some native code. It shouldn't be too hard.
For example, imagine some files like this:
index.html
<div id="content">
<% include1.html %>
</div>
include1.html
<h1>Hello World!</h1>
You could write native code to load the index.html file, and search for these special tags, and replace those tags with the content in the named html file that is also on the device. You can then pass the HTML as a string to a webview to load and display.
Related
I am doing my first steps in vapor 4 using leaf as view renderer. In my data i am pasting image urls but when I run the page the browser does not show them. The browser always shows the value of the "alt" tag.
So I tried to build a static leaf page which only shows an image from the internet but this is also not displaying the image. I can not figure out why. Do I have to set somewhere that the running test Webserver should render images? I am using macOS Big Sur 11.0.1
Here is my leaf code (it's simple html code but does not display the image)
<!DOCTYPE html>
<html>
<head>
<title>Image Test</title>
</head>
<body>
<a href="https://www.w3schools.com/tags/img_girl.jpg">
<img scr="https://www.w3schools.com/tags/img_girl.jpg" alt="test image" width="500" height="600">
</a>
</body>
</html>
As Nick said it was a speeling mistake .
I wrote „scr“, but it must be „src“
Correct:
<img src="https://www.w3schools.com/tags/img_girl.jpg" alt="test image" width="500" height="600">
I have an issue getting content inside the projectpages. (I literally tried to figure this out for 4 days now, searching the web - i will give my right arm for solving this)
So I have a simple index.html page with 7 projects (7 thumb images representing each portfolio project). When i click on one of the images i would like to get to the page showing its content - i get to the new page /#/WORK1/ but i can't figure out where/how to insert my content in this new url?
You can see the problem at my site here:
awesth.dk
Here is the code i am using for the 7 projects. WORK1, WORK2 etc.
<div id="projectPages">
<div class="project page-project" data-url="/WORK1/" >
<!-- Will be fetched on-demand -->
</div>
...
(So I don't know how I get it to be "fetched on-demand")
And here is the 7 clickable thumbs:
<div id="projectThumbs" >
<div class="wrapper">
<a class="project "href="/WORK1/" >
<div>
<div class="project-image"><div class="intrinsic"><div class="content-fill"><img data-src="/img/upcoming.png" data-image="/img/upcoming.png" data-image-dimensions="2500x1401" data-image-focal-point="0.5,0.5" alt="work" data-load="false"/><noscript><img src="/img/upcoming.png"></noscript></div></div><div class="project-item-count">0</div></div>
<div class="project-title">Titel1</div>
</div>
</a>
...
Pleaaase help
You need to use write some JavaScript code using JQuery.
There are methods you need:
click() – to add click event handler.
data() – to get value from data attribute.
load() – to load contents from some URL to some element.
UPD
There is an example of using these methods. Does it fit your case?
https://jsfiddle.net/up495fzs/
UPD2
You need to update your HTML code on the server.
Pay attention to data-project-id="1" and id="project-id-1". And update numbers respectively.
In data-url set your relative path. If you want to load WORK1.html file, you should write: data-url='/WORK1.html' (without / at the end).
UPD3
The connection between blocks are made by data-project-id="1" and id="project-id-1" attributes.
I change the way to get url. I leave it in <a href="..."> and removed from <div class="project page-project">.
https://jsfiddle.net/up495fzs/6/
But for now I realised that I don't understand why you need many <div class="project page-project"> elements. Why not to use just one?
https://jsfiddle.net/up495fzs/5/
UPD4
And you need to know about CORS (Cross-origin resource sharing) – https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
You could load contents just from your web site. It'll fail if you will try to load page from external web site.
UPD4
You could use history.pushState(null, null, link.href); to update the URL of the page.
http://diveintohtml5.info/history.html
Updated JSFiddle:
https://jsfiddle.net/up495fzs/8/
You won't see URL changes at JSFiddle because it runs in a frame.
Try it on your page.
UPD5
Add link to JQuery library to the <head> of your page but before my script.
Add my script wrapped with $(function() { /* JS code */ }); to execute it properly.
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
...
<script>
$(function() {
/* JS code from JSFiddle */
});
</script>
I am using the default code. Why don't my buttons show up? Do I need to have the images locally? need absolute path?
<!-- AddThis Follow BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="myclient"></a>
<a class="addthis_button_twitter_follow" addthis:userid="myclient"></a>
<a class="addthis_button_pinterest_follow" addthis:userid="myclient"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-510e973014b90fdf"></script>
<!-- AddThis Follow END -->
You don't need the images to be stored locally.
You don't need an absolute path
Have you checked if the js is loading properly? You can do that in chrome (developer tools) or firefox (firebug) and check if it is able to get the script loading with no errors.
I created xcode universal project, I am trying to load HTML5 page in UIWebView the
problem is i cant see any control to play movie, and i am getting blank screen on the video
place, in ipad and iphone simulator,
my .html file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Change this if you want to allow scaling -->
<meta name="viewport"
content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type"
content="text/html; charset=utf-8">
<title>Web App Demo</title>
</head>
<body>
<h1>Video Test</h1>
<p>This is a video test.</p>
<video width="320" height="240" controls= "controls">
<source src="video.ogv" type="video/ogg" />
<source src="video.mp4" type="video/mp4"/>
browser not supports the video
</video>
</br> <br/>
<h1>This is Audio </h1>
<b>Testing Audio </b>
<audio controls="controls">
<source src="audio.ogg" type="audio/ogg" />
<source src="audio.mp3" type="audio/mpeg"/>
browser not supporting audio
</audio>
</body>
</html>
Any help why its not playing in simulator.
Thanks in advance.
I have seen this before when there are url issues -- like capitalization... The simulator is more relaxed than the device... Check the exact file names...
Sounds like it might be a pathing issue. You are using relative pathnames for the video, so they need to be in the place the HTML expects them to be in order to find them. You'll need to either use absolute pathnames to the files in your bundle OR make sure that the base href is defined to point to the appropriate folder holding those images, either explicitly in the HTML or by specifying the correct baseref in the loadHTMLString:baseURL: call.
One way to quickly test whether this is a problem would be to put a .png next to the video files and reference it in the HTML, too. If the .png doesn't show up, it's not a video problem so much as a problem finding assets.
i read that the mp4 file should be placed before the ogv file for the iPad to play it.
I am playing an m4v file in my uiwebview, but the translucent 'play' button does not appear in my simulator. It does work on the device itself, though....
<video id="VideoDiv" preload src="http://www.movietime.com/movie.m4v" controls width="480px" height="270" poster="poster.png"></video>
I'm learning Perl and using Dancer as a web framework.
I've got two views (tt files) which should share the same navigation.
So, it would be great to start learning how to manage templates for navigation and footers.
I've read the documentation for the Template Toolkit and I've done the following:
I've changed the config.yml file to:
#template: "simple"
template: "template_toolkit"
engines:
template_toolkit:
start_tag: '[%'
end_tag: '%]'
I've defined the templates in the .pm file:
package proyecto;
use Dancer ':syntax';
our $VERSION = '0.1';
get '/' => sub {
template 'index';
};
get '/menu' => sub {
template 'menu';
};
true;
There is a link in the index template directing the visitor to the menu template:
<li class="active">< a href="/menu">Menu <span class="sr-only"></span></a></li>
I would like to reuse the navigation code from index.tt into menu.tt, so I've wrapped the navigation code in index.tt with the following:
[% BLOCK navigation %]
#my nav code
[% END %]
To finally include that code in the menu.tt file, I've written the following (where the navigation code should be):
[% navigation = 'index.tt' %]
[% INCLUDE navigation %]
The files index.tt and menu.tt are located in the folder views. But it seems it's not that easy! =( Any suggestion on how to reuse code from one file to another which is located in the same directory?
This is what layouts are for. The idea is that content common to all pages (e.g. header, footer, navbar) goes in the layout and content specific to each page goes in templates called views. Views are called "partials" in other frameworks because they only contain the content for part of the page.
If you use the dancer command line utility to set up your application, the default layout is views/layouts/main.tt and looks something like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=<% settings.charset %>" />
<title>Foo</title>
<link rel="stylesheet" href="<% request.uri_base %>/css/style.css" />
</head>
<body>
<% content %>
<div id="footer">
Powered by Dancer <% dancer_version %>
</div>
</body>
</html>
The <% content %> section is replaced with the specified view when you call template 'view';. (In your case, you'll need to change <% and %> to [% and %] since you're using the Template Toolkit-style delimiters.)
For example, if views/index.tt is:
<h1>Hello, World!</h1>
calling template 'index'; in a route renders the following:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Foo</title>
<link rel="stylesheet" href="http://www.example.com/css/style.css" />
</head>
<body>
<h1>Hello, World!</h1>
<div id="footer">
Powered by Dancer 1.3202
</div>
</body>
</html>
Note that there's already a footer section; you just have to add elements for a header and navbar.
If this is new development, you should really be using Dancer2 instead of Dancer (fortunately, layouts and views are the same in both).
The [% INCLUDE %] directive's argument can be interpreted in one of two ways.
The name of another template file
The name of a block that is defined in the current template file (or in another template file which has included the current template file).
All of which means that your current plan won't work. menu.tt won't see any block defined inside index.tt.
There are a couple of better solutions though.
Firstly, consider moving the navigation code into a third, separate, template file. You can then INCLUDE this template into both index.tt and menu.tt.
Secondly, you can use Dancer's "layout" feature. This is a template that is wrapped around your view templates. Typically the layout template contains the navigation and all standard page furniture (like headers and footers). It also contains a [% content %] directive. When a view is rendered, the rendered version is dropped into the layout template in the location of the [% content %] directive. See the Layouts section in Dancer::Tutorial for more information.
p.s. I see you're using Dancer. I'd highly recommend switching to Dancer2.