So I have a 2 divs structure as so:
<div class="div-front"></div>
<div class="div-behind1" title="#actualHeight1%" style="height:#actualHeight1%"></div>
<div class="div-behind2" title="#actualHeight2%" style="height:#actualHeight2%"></div>
Essentially, I have a div (.div-front) absolutely positioned with a higher z-index so that it stacks properly in front of two other divs (.div-behind1 & 2). This is just how it needs to be structured, so I cannot change how this part is laid out.
.div-behind1 and 2 are basically bar charts that stack on each other, reperesenting different values, and the height increases in percentage to represent the data being loaded in. It also has a title that displays the percentage on hover. However, since these are behind .div-front, the title doesn't show upon hover.
I am unsure of my options to get these titles to display. Any help would be appreciated.
Thanks.
I only way I can think with CSS only is to create 2 empty divs, and make the z-index higher than div-front and add the title to them.
<div class="div-front"></div>
<div class="div-above1" title="#actualHeight1%"></div>
<div class="div-above2" title="# actualHeight2%"></div>
<div class="div-behind1" title="#actualHeight1%" style="height:#actualHeight1%"></div>
<div class="div-behind2" title="#actualHeight2%" style="height:#actualHeight2%"></div>
And the CSS is like.
.div-above1 {
height: /*tall enough to cover the chart*/
width: /*same as the div-behind1 */
z-index: /*higher than div-front*/
}
Do the similar thing for the other one.
I think you gotta use javascript functions and css together to realize it.
Add moveOn function and MoveOut functions to cover Div, in the moveOn function, get title1 and title2. Create new variables in cover div and set float positions to show the titles.
Below is part of the code, I did not finish them all.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(e) {
var title1 = document.getElementById("div-behind1");
var title2 = document.getElementById("div-behind2");
//add code to locate where you want to show the titles.
//probably you need to create a new element like <span></span> with float and transpant preoperties in the cover div for showing titles. Set appropriate relative positions of two <span></span> is needed.
}
function clear(e) {
//clear the titles.
//simply empty the <span>
}
</script>
</head>
<body>
<div onmousemove="myFunction(event)" onmouseout="clear()" class="div-front">abc <span id="s1"> </span></div>
<div id="div-behind1" title="#actualHeight1%" style="height:#actualHeight1%">e</div>
<div id="div-behind2" title="#actualHeight2%" style="height:#actualHeight2%">t</div>
</body>
</html>
I'm using Dreamweaver to derive the pixel co-ordinates for image maps. One is already done but the other is proving impossible, perhaps because what I intend isn't permissible. My 'impossible' image that I'd like to set hotspots for is one of the list entries inside an unordered list, and whenever I try to select the img element in code view to marquee the map, it won't work and selects the ul element instead.
I only ever use this software for image-mapping and its code validation feature, but its a pain and I'd just as soon do without it if there's a method for defining/calculating pixel co-ordinates for a circular image map.
Any advice, or is DW behaving itself and what I'm trying isn't permitted in HTML?
Updated: To be more specific, it's not just a list but a div-bounded list that acts as a gallery with its input from clickable thumbnail image anchors, as per the code below (just one list item for clarity). What I'd like to do is make 'stuff-medium.jpg' a clickable image that maps to the next image in the gallery (via a href "#two"), providing navigation bars for my gallery also...
<div id="gallery">
<ul id="gallery-interior">
<li id="one"><img src="../images/stuff_medium.jpg"></li>
</ul>
</div>
<div>
<img src="../images/stuff_thumb.jpg">
</div>
Update II -- this code works; I did it by hand, but I'm blown if I can figure out how to do it in DW:
<li id="one"><img src="../images/stuff_medium.jpg" border=0 usemap="#gallerymap">
<map name="gallerymap"><area shape="circ" coords="399,157,30" href="#two" target="_top"></li>
Place a warning in your code that only shows up if javascript is turned off. Use js to add a class to the body. if js is turned off, the class won't be added and the message will be displayed, if js is on, the class will be added to body and the msg will not be displayed
html:
<aside id="js-warning">This site requires JavaScript to work properly. Please turn it on for more awesomeness!
</aside>
js:
<script>
$(document).ready(function(jswarning) {
$('body').addClass('js');
});
</script>
css:
#js-warning {
display:block;
}
.js #js-warning {
display: none;
}
I'm very confused about how linking to an element within a page works. I'm learning the starter template for Twitter Bootstrap, and it contains the following code in the navbar:
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
I understand that within the list elements are anchor tags to #about and #contact, but where is the content defined for this? In the example site, the .starter-template div stays the same whenever I click the navbar buttons. What do I have to do to change the div whenever a navbar button is clicked? I tried doing this, but it just made a giant link as you would expect:
<a name="about">
<div class="container">
<div class="starter-template">
<h1>About.</h1>
<p class="lead">#about</p>
</div>
</div>
</a>
Thank you for any help!
~Carpetfizz
The links are placeholders. If you want to keep them the same, such as #about, you'd want to define an element in your page with that ID. For example, make a longer page, and include the following tag:
<h1 id="about">Here's the About Content</h1>
Clicking the link will jump to that spot in the page.
Wikipedia uses this approach to jump to sections in an article. For example, inspect the <span> tag containing the "See Also" text here:
http://en.wikipedia.org/wiki/Twitter_Bootstrap#See_also
However, since they are placeholders in the Bootstrap template, the idea is that you'll put in your own links as you see fit. For example, if you wanted to add a link to Yahoo, you'd enter your own HREF, like so:
Yahoo
Or target any other link in your site.
They're just placeholders. And if you want those targets to exist, you have to create the pages at the URLs they point to.
Such hash links can behave a little differently if you're developing a Single-page Application (SPA), but I think I've covered the simpler answer to what's confusing you. I.e., hash links attempt to jump to an ID within the page, but an element with that ID needs to exist for anything noticeable to occur.
This behavior is built into HTML; it's not something unique to using Bootstrap.
I have a menu with links in the following form, in which I am trying to highlight the current menu item. I can't seem to get it working. Please advice as to what I am doing wrong
HTML
<body id="home">
<div id="topMenu">
<div class="nav-home" id="topMenuBlock"><p>Home</p></div>
<div id="nav-about"><p>About</p></div>
<div id="nav-rates"><p>Rates</p></div>
<div id="nav-faq"><p>FAQ</p></div>
<div id="nav-contact"><p>Contact</p></div>
<div id="nav-careers"><p>Careers</p></div>
</div>
<div id="rightTopMenu"></div>
</div>...other stuff</body>
Then for the CSS I have the following:
#home a.nav-home{ border-bottom:2px solid white; }
Do the links HAVE to be in a List, or can I leave them in div's, and if so, how can I make this work?
Thanks.
You've a little bit of a mess here.
Do the links HAVE to be in a List, or can I leave them in div's?
They don't have to be, but they probably should be. There's not good reason to use the strange markup you have chosen, you should definitely consider switching to a list and <li> tags.
Problem with duplicate ids
You have <body id="home"> and <a href="" id="home">
You also have several instances of id="topMenuBlock" (I see you fixed this in your edit.)
You cannot have more than one element with the same id. id attributes must be unique, always. Use class names instead, if anything.
You are using this selector: #home a.nav-home {} but it doesn't match anything. There is no <a class="nav-home">. You can use something like:
#home {} because that's the id of the <a> element you want
.nav-home a {} - Selects the <a> inside an element with class="nav-home"
Perhaps you have the concept of ids and classes mixed up. Ids are supposed to uniquely identify HTML elements, whereas classes can be used as many times as you like. Right now you have 6 elements with the id #topMenuBlock. You should make a .topMenuBlock class instead. I would also make a #nav-home id instead of a class since there should only be one such element on each page.
Secondly, there is no need for the <p> tags you have within your <a> tags. In fact, it's against HTML standards to do so since anchors are inline elements and paragraphs are block-level elements.
Lastly, your CSS selector that sets the border is incorrect because the .nav-home div is not contained within an <a> element. Use this CSS instead (assuming you change nav-home to be an id rather than a class):
#nav-home{ border-bottom:2px solid white; }
Fix these issues and then see what happens. If you're new to HTML and CSS, I would recommend going through some tutorials, such as the ones found at http://www.w3schools.com/.
Your class identifier should be in the <a /> tag
You have
<div class="nav-home" id="topMenuBlock"><p>Home</p></div>
but you want
<div class="something" id="topMenuBlock"><a class = "nav-home" href="" id="home"><p>Home</p></a></div>
Modify your CSS class accordingly.
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>