Suppose I have two html files footer.html and main.html. The footer contains a reference to the top of a page as follows:
<!-- footer.html -->
<!doctype html>
<html lang="en">
<head></head>
<body>
<footer>
<small>To top</small>
</footer>
</body>
</html>
The main.html file embeds the footer by using the <object> tag (see note 1) as shown below. There can be several files similar to main.html. Because of this <a href="page#header"> may not be used.
<!-- main.html -->
<!doctype html>
<html lang="en">
<head></head>
<body>
<div id="header">...</div>
<div id="content"> Long content ... </div>
<object id="footer" type="text/html" data="footer.html"></object>
</body>
</html>
Question: Is it possible to refer to the anchor from the footer to main without using javascript, php etc?
Note 1: The <object> tag can be used to embed another html, although without a relation:
You can also use the <object> tag to embed another webpage into your HTML document.
from http://www.w3schools.com/tags/tag_object.asp
The same can be done using <iframe> or <embed> instead of <object>, but the issue remains.
Is it possible to refer to the anchor from the footer to main without using javascript, php etc?
No, it isn't.
If you use a relative URL, then it will be relative to the document that the link appears in (i.e. the footer).
If you use an absolute URL, then you have to specify which document you want to link to the top of (and since multiple documents will embed the footer, you can't do that).
You've ruled out generating the URL programatically with JavaScript.
Thanks to all for the comments and answers. Indeed, this approach seems not to work due to a missing relation between html files. In other words, footer.html cannot refer to the inside of main.html. Instead, I modified the structure, so that the main includes the footer directly and the content is embedded by using an <iframe> as follows:
<!-- main.html -->
<!doctype html>
<html lang="en">
<head></head>
<body>
<div id="header">...</div>
<iframe id="content" name="contentframe" src="content.html"></iframe>
<footer id="footer">
<small>To top</small>
</footer>
</body>
</html>
This solves the issue and works without JS, PHP or the like independently of the page loaded into the <iframe>. That is, it simply jumps to top keeping the contents of the loaded page. Eventually, there is one main and multiple long content pages which are loaded into this main. Tested with FF and IE.
Related
I would like to stlye my .net core website. Currently there is a file called site.css with all the css for the website. However since i have multiple views i would like to be able to pick and choose what css is applied to what view. I want all my views to have the same navbar as my homepage or index view. Any suggestions?
However since i have multiple views i would like to be able to pick and choose what css is applied to what view.
You can add a Render Section control to your layout.
In your _layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
#await RenderSectionAsync("css", required: false) <-- Add this
</head>
<body>
#RenderBody()
</body>
</html>
And in your view file, you can specify which css it depends on:
#section css{
<link rel="stylesheet" href="some-css.css" />
}
I want all my views to have the same navbar as my homepage or index view. Any suggestions?
Simply put the navbar in your layout view file is fine.
Apply all your css changes to shared/_layout.cshtml page.
Document Reference
I need to get the element which is inside the iframe by hovering over the element for example if the button is available inside the iframe means i need to get the button element.
I have used query selector (:hover) to get the hovered element but I am able to get the elements upto iframe only from the top document. I cannot able to get the element inside the iframe.
Has any one come across this?
It is restricted by CORS (so generally you can not observe widgets included from 3rd-party sites this way), but otherwise doable in recent browsers, you just have to work with the contentWindow of the iframe, and perhaps use elementFromPoint().
Example frame.html:
<div>Test1</div>
<div>Test2</div>
<div>Test3</div>
<div>Test4</div>
<div>Test5</div>
And containing test.html:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script>
function startup(){
frame.contentWindow.document.addEventListener("click",function(event){
frame.contentWindow.document
.elementFromPoint(event.clientX,event.clientY).innerHTML+="!";
});
}
</script>
</head>
<body onload="startup()">
<iframe id="frame" width="300" height="200" src="frame.html"></iframe>
</body>
</html>
Click on the elements of the iframe and their content will get appended with exclamation marks.
How do I make a link-text? I want to show how I tried do it. BeforeAfterResult
In HTML, links are defined with the tag:
link text
Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>Visit google</p>
</body>
</html>
with javascript see here How do I create a link using javascript?
I'm about to generate a pdf report (roughly 20 slides long) in java using Spring MVC, Thymeleaf and Flying-saucer. I would like to be able to structure the code according to the different slides so that I can easily add and remove slides and not have all code for all slides in one chunk. In the end, after Spring MVC and Thymeleaf are done, I guess I will have a lot of XHTML and CSS ready to be sent to Flying-saucer for PDF generation.
I haven't worked that much with Spring MVC but my feeling is that you first do the controller stuff, e.g. get data, work with the data and then put necessary data on the Model so Thymeleaf can continue and render the view based on a template and the data on the Model.
How can I divide the code parts in java and Thymeleaf in a good modular way? Anyone have a good design to be inspired by or can point me somewhere on the web where I can find good information about this?
In your case I suggest to fragment Thymeleaf templates into three parts - master, slide and content templates. You can fill report content dynamically from Spring MVC controller or build it in static way just in Thymeleaf.
I providing skeleton templates structure as I think it's the best (all templates supposed to be on root template path). If you want to add slide you just create new template with content and insert new line to master template. If you want to remove slide you just delete appropriate line.
Master template - index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<th:block th:include="slide :: slide" th:with="content=${'content1'}"></th:block>
<th:block th:include="slide :: slide" th:with="content=${'content2'}"></th:block>
<th:block th:remove="tag" th:include="slide :: slide" th:with="content=${'content3'}"></th:block>
</body>
</html>
Slide template - slide.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body th:fragment="slide">
<div class="slide">
<div th:replace="${content} :: content"></div>
</div>
</body>
</html>
Content template 1 - content1.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<ul th:fragment="content">
<li>Content 1</li>
</ul>
</body>
</html>
Content template 2 - content2.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<span th:fragment="content">Content 2</span>
</body>
</html>
Content template 3 - content3.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<p th:fragment="content">
Content 3
</p>
</body>
</html>
I have some trouble with my trac installation (version 11.4). What should I do to change i.e. some colors in the default theme? I've found various tips in the net, but nothing worked yet as most tips were for the 10.x version.
Are there any options in trac.ini or should I add a special xyz.css somewhere in my environment?
Please help me, I don't like the default black & white design ;)
Instructions for how to do this for version 0.11 can be found at the Trac site, here's an example from that page that adds custom CSS as well as a header and a footer.
Say you want to add a link to a custom
stylesheet, and then your own header
and footer. Create a file
/path/to/env/templates/site.html or
/path/to/inherit/option/templates_dir/site.html,
with contents like this:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:py="http://genshi.edgewall.org/"
py:strip="">
<!--! Add site-specific style sheet -->
<head py:match="head" py:attrs="select('#*')">
${select('*')}
<link rel="stylesheet" type="text/css"
href="${href.chrome('site/style.css')}" />
</head>
<body py:match="body" py:attrs="select('#*')">
<!--! Add site-specific header -->
<div id="siteheader">
<!--! Place your header content here... -->
</div>
${select('*|text()')}
<!--! Add site-specific footer -->
<div id="sitefooter">
<!--! Place your footer content here... -->
</div>
</body>
</html>
Another option is to install a Trac Theme.