I am working on a glossary and have made a bulky file with terms in columns behind which are hidden texts (with display:none), in plain css/html.
Each entry looks like this in code: <div class=w tabindex=0>Achidrupa<div class=tt>Here follows hidden explanation.</div></div>
Instead of :hover I use :focus so the explanation is kept opened up in a sort of popup window, without use of Java or JS.
As there are entries with slightly different spelling I like to refer to the main entry, but not with the rather clumsy ‘‘See entry blah blah blah’’.
So, I like to make internal links, as we are used to with # and name or id in the linked-to element. But whatever I try, I cannot get another entry opened from the opened window with the link. Can I get some help with that? Very grateful for any solution.
I believe I did not make this issue clear enough from the start. I have the following code, including tabindex=0 and with .w:focus .tt{display: inline-block ; cursor:pointer; } in css.
<div class=w tabindex=0 name="alpha">1ste Entry Alpha <div class=tt>
Follows text as explanation on alpha which becomes visible after a click on Entry Alpha, otherwise it stays hidden with css display:none. [Probably about or 100 words here.]</div></div>
<div class=w tabindex=0 name="beta"> 2nd Entry on beta <div class=tt>
Follows text as explanation on beta which <a href=#alpha>link to entry alpha </a> after a click. [Probably about or 100 words here.]</div></div>
What I need is the possibility to open window 1st Entry Alpha when I click in opened window Entry on beta and click on ‘link to entry alpha’.
I am sorry but the delivered javascript code and snippet didn’t work. It would not open any focused element. By the way, the glossary works great in this way, except for the internal linking.
Here is a solution using javascript: get the hash, find element with corresponding name and focus it. The whole thing is wrapped in onload otherwise the browser wont focus the element.
window.onload = function () {
var hash = window.location.hash.substr(1);
if (hash) {
var target = document.getElementsByName(hash)[0].focus()
}
}
.w {
display: block;
color: black;
text-decoration: none;
}
.w > div {
display: none;
}
.w:focus {
outline: none;
}
.w:focus > div {
display: block;
}
<a name="q1" href="#q1" class="w">
Question ?
<div>mopm adsma pomfdsapoi mfadsp fasdm pasofdm pasdofi mdfs apfd smapfdso amfp ad</div>
</div>
<a name="q2" href="#q2" class="w">
Question ?
<div>mopm adsma pomfdsapoi mfadsp fasdm pasofdm pasdofi mdfs apfd smapfdso amfp ad</div>
</div>
<a name="q3" href="#q3" class="w">
Question ?
<div>mopm adsma pomfdsapoi mfadsp fasdm pasofdm pasdofi mdfs apfd smapfdso amfp ad</div>
</div>
First allow me preface, I know very little about html, CSS, etc. Most of what I can do is by following other examples. I am doing a header menu, and each link is an anchor within the page. (the div are hidden until clicked) However I became stuck on this problem. I have link within page as follows:
<div class="header">
Block 1
Block 2
</div>
This will give me url "localhost/test1.html#B1". However, one of the div blocks contains this:
<div id="B1">
<a href="#slide-one">
<a href="#slide-two">
</div>
So I already figured out I can't do "localhost/test1.html#B1#slide-one".
I don't know if its possible to even do this anchor link to page that is already opened as anchor. No option to use any jquery, flash, java, etc. I can only use HTML/CSS. I am going to assume this is not possible, but I thought one last attempt to try this and ask here.
EDIT:
Updated sample code provide better explanation:
<style type="text/css">
div#Menu {
height:90px;
left:0;
position:fixed;
top:-5px;
width:100%;
text-align:center;
}
div#B1 {
position:absolute;
left:-1000px;
margin-top:0;
}
div#B1:target {
top:100px;
left:375px;
}
div#B2 {
position:absolute;
left:-1000px;
margin-top:0;
}
div#B2:target {
top:100px;
left:375px;
}
</style>
</head>
<body>
<!--Header Menu-->
<div id="Menu" class="header">
Block 1
Block 2
</div>
<div id="B1" class="blocks">
<div id="Slider1" class="Slide">
<ul>
<li id="slide-one"><img src="slide-one.png"/></li>
<li id="slide-two"><img src="slide-two.png"/></li>
</ul>
Slide 1
Slide 2
</div>
</div>
<div id="B2">
<div id="Slider1" class="Slide">
<ul>
<li id="slide-three"><img src="slide-three.png"/></li>
<li id="slide-four"><img src="slide-four.png"/></li>
</ul>
Slide 3
Slide 4
</div>
</div>
What I have are CSS image sliders with thumbnail navigation that are anchors within each section. On the menu I go to block #1 which opens which contains one image slider gallery. My page url changes to "test1.html#B1" The image slider has anchor for each image.
On a separate normal page the slider alone would give page url for each image something like "test1.html#slide-one".
But this is nested, and the image slider is child to "B1" block. I need to have the block #B1 opened, and AFTER that has opened on page I have the image slider gallery. That has its own anchors for each image, but I need "B1" to remain.
From how your question is expressed we can think of two different needs:
Since you said you're wanting to do localhost/test1.html#B1#slide-one it could mean that you consider #slide-one exists not only in the "context" of #B1 but also elsewhere (say in #B2 for instance): but if this happens it means that #B1 and #B2 are not in the same HTML page! So it cannot be what you're wanting.
At the opposite, the whole rest of your text indicates that all the parts you want to reach are in the same page. So it's the case I'will explain below.
When in the same HTML page, it can't be several ids with the same value: an id is unique, by design.
The consequence is: to target a given id you have no need of several intermediate points, even if the user really used these intermediate points like in your example.
In summary, the code you showed in your question is perfectly enough!
Last point: if an id is always unique, at the opposite you can have an unlimited number of occurrences where you target it. In other words, the same (unique) destination can be pointed to from several <a>.
I have bunch of links and I need to change the texts color to red after user clicks them
I have something like:
<li class="test" ng-repeat="item in items">
<a href="" ng-click="clickMe()" class="test-li">
{{item.name}}
</a>
</li>
Currently the style is like
.test-li {
color: black;
}
I want my texts to turn red after user clicks them.
So I do:
.test-li:visited {
color:red;
}
It works when I click the item, but the color changes back to black after I click another item. I feel like this can be archive simply in CSS without setting ng-class. Can anyone help me about it? Thanks a lot!
You don't have any destination url given in your links, so there really isn't a way for the browser to know which links have been visited. I think if you were to add a simple #test, #test1, #test2, etc to your href attribute in your links, you would find that your CSS does work as intended.
Since your link doesn't actually go anywhere, you'd be better off adding a 'visited' class to your <a> element when clicked, via JS.
jQuery exmample:
$('li a').click(function(){
$(this).addClass('visited');
// or you could use $(this).toggleClass('visited'); depending on what you want to achieve.
});
Is there any way to have multiple distinct HTML pages contained within a single HTML file? For example, suppose I have a website with two pages:
Page 1 : click here for page 2
and
Page 2 : click here for page 1
Can I create a single HTML file that embeds simple static HTML for both pages but only displays one at a time? My actual pages are of course more complicated with images, tables and javascript to expand table rows. I would prefer to avoid too much script code. Thanks!
Well, you could, but you probably just want to have two sets of content in the same page, and switch between them. Example:
<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<div id="Page1">
Content of page 1
Show page 2
</div>
<div id="Page2" style="display:none">
Content of page 2
Show page 1
</div>
</body>
</html>
(Simplified HTML code, should of course have doctype, etc.)
I used the following trick for the same problem. The good thing is it doesn't require any javascript.
CSS:
.body {
margin: 0em;
}
.page {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: -100vw;
overflow-y: auto;
z-index: 0;
background-color: hsl(0,0%,100%);
}
.page:target {
left: 0vw;
z-index: 1;
}
HTML:
<ul>
<li>Click here for page 1</li>
<li>Click here for page 2</li>
</ul>
<div class="page" id="one">
Content of page 1 goes here.
<ul>
<li>Back</li>
<li>Page 2</li>
</ul>
</div>
<div class="page" id="two">
Content of page 2 goes here.
<ul style="margin-bottom: 100vh;">
<li>Back</li>
<li>Page 1</li>
</ul>
</div>
See a JSFiddle.
Added advantage: as your url changes along, you can use it to link to specific pages. This is something the method won't let you do.
Hope this helps!
have all the pages in distinct div areas
<div style="" id="page1">
First Page Contents
</div>
<div style="display:none" id="page2">
Second Page Contents
</div>
then use a js script to workout what you are viewing (like within an hashtag style) to navigate. Either that, or ajax to get the response from a specific file (like /pages/page1.html)
var $prehashval = "";
function loop()
{
if (location.hash.slice(1)!=$prehashval)
hashChanged();
$prehashval = location.hash.slice(1);
setTimeout("loop()", 100);
}
function hashChanged()
{
var $output;
switch (location.hash.slice(1))
{
case "page1":
document.getElementById('page1').style.display = "";
document.getElementById('page2').style.display = "none";
break;
case "page2":
document.getElementById('page1').style.display = "none";
document.getElementById('page2').style.display = "";
break;
default:
$output = location.hash.slice(1);
}
}
loop();
Have you considered iframes or segregating your content and using a simple show/hide?
Edit If you want to use an iframe, you can have the contents of page1 and page2 in one html file. Then you can decide what to show or hide by reading the location.search property of the iframe. So your code can be like this :
For Page 1 : iframe.src = "mypage.html?show=1"
For Page 2 : iframe.src = "mypage.html?show=2"
Now, when your iframe loads, you can use the location.search.split("=")[1], to get the value of the page number and show the contents accordingly. This is just to show that iframes can also be used but the usage is more complex than the normal show/hide using div structures.
JQuery Mobile has multipage feature. But I am not sure about Desktop Web Applications.
This is kind of overriding the thing of one page, but... You could use iframes in HTML.
<html>
<body>
<iframe src="page1.html" border="0"></iframe>
</body>
</html>
And page1.html would be your base page. Your still making multiple pages, but your browser just doesn't move. So lets say thats your index.html. You have tabs, you click page 2, your url wont change, but the page will. All in iframes. The only thing different, is that you can view the frame source as well.
Screen Rec
You could use Colker, which is built for this, but you'll have to remove the search box, and search feature code, because searching isn't compatible with the type of content you intend to use.
Page contents are stored in a java-script array, and the "page" (eg: ?page=pagename) URL parameter determines which page content to serve.
Twine is an open-source tool for telling interactive, nonlinear stories.
It generates a single html with multiples pages.
Maybe it is not the right tool for you but it could be useful for someone else looking for something similar.
By hiding and showing one another, you can achieve this without embedding it. While Guffa's answer worked quite well, I couldn't figure out how to add more than 2 pages, and while Binz Nakama's answer fixes that, it doesn't quite let you only show Page 1 and toggle between them.
Here's the codepen I made, and here's an example I made from one of my existing websites.
HTML:
<div class="part1">
Page 1 content goes here.
<button onclick="hidePart1()">Go to Page 2</button>
<button onclick="showPart3()">Go to Page 3</button>
</div>
<div class="part2">
Page 2 content goes here.
<button onclick="hidePart2()">Go to Page 1</button>
<button onclick="showPart3()">Go to Page 3</button>
</div>
<div class="part3">
Page 3 content goes here.
<button onclick="hidePart2()">Go to Page 1</button>
<button onclick="hidePart1()">Go to Page 2</button>
</div>
CSS:
.hide {
display: none !important;
}
.show {
display: block !important;
}
.part1 {
display: block;
}
.part2 {
display: none;
}
.part3 {
display: none;
}
JS:
function hidePart1() {
document.querySelector(".part1").classList.remove("show");
document.querySelector(".part1").classList.add("hide");
document.querySelector(".part3").classList.remove("show");
document.querySelector(".part3").classList.add("hide");
document.querySelector(".part2").classList.add("show");
}
function hidePart2() {
document.querySelector(".part2").classList.remove("show");
document.querySelector(".part2").classList.add("hide");
document.querySelector(".part3").classList.remove("show");
document.querySelector(".part3").classList.add("hide");
document.querySelector(".part1").classList.add("show");
}
function showPart3() {
document.querySelector(".part1").classList.remove("hide");
document.querySelector(".part1").classList.remove("show");
document.querySelector(".part1").classList.add("hide");
document.querySelector(".part2").classList.remove("hide");
document.querySelector(".part2").classList.remove("show");
document.querySelector(".part2").classList.add("hide");
document.querySelector(".part3").classList.remove("hide");
document.querySelector(".part3").classList.add("show");
}
While the code above is probably not quite optimized (especially the JS), it definitely works well for me. I am still quite new to JavaScript, and not very good at it.
Edit: Added part 3 to the code.
Edit: Added example.
It is, in theory, possible using data: scheme URIs and frames, but that is rather a long way from practical.
You can fake it by hiding some content with JS and then revealing it when something is clicked (in the style of tabtastic).
Solution 1
One solution for this, not requiring any JavaScript, is simply to create a single page in which the multiple pages are simply regular content that is separated by a lot of white space. They can be wrapped into div containers, and an inline style sheet can endow them with the margin:
<style>
.subpage { margin-bottom: 2048px; }
</style>
... main page ...
<div class="subpage">
<!-- first one is empty on purpose: just a place holder for margin;
alternative is to use this for the main part of the page also! -->
</div>
<div class="subpage">
</div>
<div class="subpage">
</div>
You get the picture. Each "page" is just a section followed by a whopping amount of vertical space so that the next one doesn't show.
I'm using this trick to add "disambiguation navigation links" into a large document (more than 430 pages long in its letter-sized PDF form), which I would greatly prefer to keep as a single .html file. I emphasize that this is not a web site, but a document.
When the user clicks on a key word hyperlink in the document for which there are multiple possible topics associated with word, the user is taken a small navigation menu presenting several topic choices. This menu appears at top of what looks like a blank browser window, and so effectively looks like a page.
The only clue that the menu isn't a separate page is the state of the browser's vertical scroll bar, which is largely irrelevant in this navigation use case. If the user notices that, and starts scrolling around, the whole ruse is revealed, at which point the user will smile and appreciate not having been required to unpack a .zip file full of little pages and go hunting for the index.html.
Solution 2
It's actually possible to embed a HTML page within HTML. It can be done using the somewhat obscure data: URL in the href attribute. As a simple test, try sticking this somewhere in a HTML page:
blah
In Firefox, I get a "blah" hyperlink, which navigates to a page showing the FOO heading. (Note that I don't have a fully formed HTML page here, just a HTML snippet; it's just a hello-world example).
The downside of this technique is that the entire target page is in the URL, which is stuffed into the browser's address input box.
If it is large, it could run into some issues, perhaps browser-specific; I don't have much experience with it.
Another disadvantage is that the entire HTML has to be properly escaped so that it can appear as the argument of the href attribute. Obviously, it cannot contain a plain double quote character anywhere.
A third disadvantage is that each such link has to replicates the data: material, since it isn't semantically a link at all, but a copy and paste embedding. It's not an attractive solution if the page-to-be-embeddded is large, and there are to be numerous links to it.
going along with #binz-nakama, here's an update on his jsfiddle with a very small amount of javascript. also incoporates this very good article on css navigation
update on the jsfiddle
Array.from(document.querySelectorAll("a"))
.map(x => x.addEventListener("click",
function(e){
Array.from(document.querySelectorAll("a"))
.map(x => x.classList.remove("active"));
e.target.classList.add("active");
}
));
Let's say you have multiple pages, with id #page1 #page2 and #page3. #page1 is the ID of your start page. The first thing you want to do is to redirect to your start page each time the webpage is loading. You do this with javascript:
document.location.hash = "#page1";
Then the next thing you want to do is place some links in your document to the different pages, like for example:
Click here to get to page 2.
Then, lastly, you'd want to make sure that only the active page, or target-page is visible, and all other pages stay hidden. You do this with the following declarations in the <style> element:
<style>
#page1 {display:none}
#page1:target {display:block}
#page2 {display:none}
#page2:target {display:block}
#page3 {display:none}
#page3:target {display:block}
</style>
An example that actually uses two separate HTML files. The example is based on this tutorial from Tutorial Republic.
app.js
$(document).ready(function(){
$("#screen").load("page1.html")
$(document).on("click", '#page1_button', function(event) {
$("#screen").load("page2.html")
});
$(document).on("click", '#page2_button', function(event) {
$("#screen").load("page1.html")
});
});
Index.html
<!DOCTYPE html>
<html lang="eng">
<head></head>
<body>
<div id="screen"></div>
<!-- Import JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Import main JS -->
<script src="app.js"></script>
</body>
</html>
page1.html
<div>Welcome to page one</div>
<button id="page1_button" type="button">Go to page 2</button>
page2.html
<div>Welcome to page two</div>
<button id="page2_button" type="button">Go to page 1</button>
Important: Page one and page two should only have the body content, i.e., without <body> and <HTML> tags.
In case the container should span over the whole page (taken from this StackOverflow answer):
stycle.css
#screen
{
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
}
<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
Show page 1
Show page 2
<div id="Page1">
Content of page 1
</div>
<div id="Page2" style="display:none">
Content of page 2
</div>
</body>
</html>
I have a div that is encased in an html <a> tag, so clicking anywhere on that box will lead the user to a new location.
I would like to add one button inside that box that leads somewhere else (a more specific location than the encasing div's link.
At the moment, adding that second <a> tag inside my div closes the original <a>, which makes sense as I guess these tags cannot be nested. How can I accomplish this 'nested' link problem?
Update
I need to build a rel attribute because it toggles an expanding section in the outer div.
My current code:
<a class="toggle" rel="toggle[<%= "#{user.id}" -%>]">
<div>
<a>...</a>
</div>
</a>
<div class="expand_me" id=<%= "{user.id}" -%>>
...
</div>
I've been trying to get the javascript you have suggested to work, but it doesn't. How should I get this specific case to work? I apologize for not including this information at the outset - I didn't know there would be a real difference between getting the solution to work with an href instead of the needed rel.
you could instead add an onClick handler to the div, and could place the link safely inside the div.
<html>
<head>
<script>
function clicked(){
window.location.href="link2";
}
</script>
<style>
body{
width:50%;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<div width="100px" height="100px" style="background-color:red" onclick="javascript:clicked()">
test
</div>
</html>
Not only <A> elements cannot be nested, but (I believe) that the content must be inline, so DIV should not be used for links. I'd use, onclick in the outside DIV, for example:
<div id="myparentdiv" onclick="alert('go somewhere')">
hi bla bla blah
<br> hi <br>
<a onclick="document.getElementById('myparentdiv').onclick=undefined;return true;"
href="http://stackoverflow.com/">go to st</a>
</div>
Obviously, you should replace the alert call with your redirection.
The inside onclick is to avoid the event propagation.
This problem can be solved with jQuery like so:
<div class="linked">
Text
<div class="linked">
Text2
</div>
</div>
<script type="text/javascript">
$("a").each(function(){
var aTag = this;
$(aTag).ancestor('.linked').click(function(){
window.location.href = $(aTag).attr('href');
});
});
</script>
This gives you the best of all worlds: semantic HTML, and the auto propagation of a tag behavior up to the nearest 'linked' ancestor. It also conveniently allows for nesting.
I agree with what the other users suggested. A tag can only be inline elements and therefore cannot wrap any other elements. Solution is to use the onclick event to handle the case where the user will click on the div tag. Inside the div tag then you can put other a tags which can point somewhere else.
This method however has a flaw, that is search engines will not be able to crawl the link wherever the onclick event is pointing. One way to fix this is to have another explicit link on the page which will point to the same link as the onclick. Here is the example:
<div onclick="document.location.href = 'link1.html'">
<p>Content would go here...</p>
Click here or anywhere near me to go location 1
Click here to go to location 2
</div>
NOTE: The first a tag does not have to be inside the div tag.
This will allow users to click either inside the div or on the first a tag to go to link1.html, and the other a tag will go to link2.html. This will also allow search crawlers to index both links.
I would also recommend applying some CSS to the div tag, and wrapping the onclick javascript code into a function to make the code more manageable but that's not necessary.
Hope this helps.
If browser compatibility isn't of utmost importance, then you should have a look at this pure CSS solution. By using an AP anchor and the z-index property, you can have an anchor that's as big as the outer div that is layered on top of all the other contents.
In it's simplest form, it could look something like:
<div id="about_us">
<h3>About Us</h3>
<p>This website is the culmination of several months of intensive research
and collaboration. </p>
<p>We painstakingly gathered data and are presenting it to the world here. </p>
Read More
</div>
CSS:
#about_us {
position: relative;
}
#about_us a {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 100;
text-indent: -9999px;
}
This will give you anchor with the same size as the parent div, and is above all of the contents, as well as hide the link text so that it won't appear at the top left corner of the div.
For a more complex example, see: http://jsfiddle.net/545xy/2/