I've had a little experience with basic HTML in the past, but I'm still fairly new to .JS and .CSS (sorry).
EDIT: I have also tried to search this site to make sure this question about floating layers getting caught on other items on the page (when they are technically supposed to float over them) has not been asked before; but I haven't found anything yet.
I'm currently trying to create a HTML movie catalogue for an Android Tablet (Galaxy Tab 3) with expanding tables and my first floating layer, with many thanks to the advice from other users on this forum (refer my previous question) together with numerous other tutorials I'm reading online.
Thanks for all the advice I've been given so far; I've somewhat cleaned up my previous draft versions, I seem to be on the right track now (I hope!), and my test files have all worked on Android (I'm getting closer, thank god!)
MY GOAL:
Now because I will be using frames further down the track, I'm trying to attempt a "floating layer" which grants the user to "jump" to certain parts of the long list with #href id tags, and without having to scroll through 1000+ rows on a 10" tablet.
I've had a look at 'Floating Layer' tutorials, namely this one (of which has been written by Henrik Petersen and is excellent):
http://www.echoecho.com/toolfloatinglayer.htm
But when I apply the EXACT same script to MY list.html, the floating layer gets stuck to the bottom of my expanding table and doesn't move. I cannot see why (beyond my level of experience). I can't see anything wrong with the table code itself.
I've run a console check on my page using Mozilla Firefox and I unfortunately don't understand the errors that is reading out to me. It says "Error in parsing value for "left" and "top"." but doesn't tell me where these errors are occurring for me to fix them.
Can somebody please help? I am so close to getting my final goal!
Here is my index.HTML file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo Expandable list</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection">
<SCRIPT LANGUAGE="JavaScript">
<!--
floatX=10;
floatY=10;
layerwidth=100;
layerheight=130;
halign="right";
valign="bottom";
delayspeed=3;
// This script is copyright (c) Henrik Petersen, NetKontoret
// Feel free to use this script on your own pages as long as you do not change it.
// It is illegal to distribute the script as part of a tutorial / script archive.
// Updated version available at: http://www.echoecho.com/toolfloatinglayer.htm
// This comment and the 4 lines above may not be removed from the code.
NS6=false;
IE4=(document.all);
if (!IE4) {NS6=(document.getElementById);}
NS4=(document.layers);
function adjust() {
if ((NS4) || (NS6)) {
if (lastX==-1 || delayspeed==0)
{
lastX=window.pageXOffset + floatX;
lastY=window.pageYOffset + floatY;
}
else
{
var dx=Math.abs(window.pageXOffset+floatX-lastX);
var dy=Math.abs(window.pageYOffset+floatY-lastY);
var d=Math.sqrt(dx*dx+dy*dy);
var c=Math.round(d/10);
if (window.pageXOffset+floatX>lastX) {lastX=lastX+delayspeed+c;}
if (window.pageXOffset+floatX<lastX) {lastX=lastX-delayspeed-c;}
if (window.pageYOffset+floatY>lastY) {lastY=lastY+delayspeed+c;}
if (window.pageYOffset+floatY<lastY) {lastY=lastY-delayspeed-c;}
}
if (NS4){
document.layers['floatlayer'].pageX = lastX;
document.layers['floatlayer'].pageY = lastY;
}
if (NS6){
document.getElementById('floatlayer').style.left=lastX;
document.getElementById('floatlayer').style.top=lastY;
}
}
else if (IE4){
if (lastX==-1 || delayspeed==0)
{
lastX=document.body.scrollLeft + floatX;
lastY=document.body.scrollTop + floatY;
}
else
{
var dx=Math.abs(document.body.scrollLeft+floatX-lastX);
var dy=Math.abs(document.body.scrollTop+floatY-lastY);
var d=Math.sqrt(dx*dx+dy*dy);
var c=Math.round(d/10);
if (document.body.scrollLeft+floatX>lastX) {lastX=lastX+delayspeed+c;}
if (document.body.scrollLeft+floatX<lastX) {lastX=lastX-delayspeed-c;}
if (document.body.scrollTop+floatY>lastY) {lastY=lastY+delayspeed+c;}
if (document.body.scrollTop+floatY<lastY) {lastY=lastY-delayspeed-c;}
}
document.all['floatlayer'].style.posLeft = lastX;
document.all['floatlayer'].style.posTop = lastY;
}
setTimeout('adjust()',50);
}
function define()
{
if ((NS4) || (NS6))
{
if (halign=="left") {floatX=ifloatX};
if (halign=="right") {floatX=window.innerWidth-ifloatX-layerwidth-20};
if (halign=="center") {floatX=Math.round((window.innerWidth-20)/2)-Math.round(layerwidth/2)};
if (valign=="top") {floatY=ifloatY};
if (valign=="bottom") {floatY=window.innerHeight-ifloatY-layerheight};
if (valign=="center") {floatY=Math.round((window.innerHeight-20)/2)-Math.round(layerheight/2)};
}
if (IE4)
{
if (halign=="left") {floatX=ifloatX};
if (halign=="right") {floatX=document.body.offsetWidth-ifloatX-layerwidth-20}
if (halign=="center") {floatX=Math.round((document.body.offsetWidth-20)/2)-Math.round(layerwidth/2)}
if (valign=="top") {floatY=ifloatY};
if (valign=="bottom") {floatY=document.body.offsetHeight-ifloatY-layerheight}
if (valign=="center") {floatY=Math.round((document.body.offsetHeight-20)/2)-Math.round(layerheight/2)}
}
}
//-->
</script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js">
</script>
<script type="text/javascript" src="js/scripts.js">
</script>
<style type="text/css">
.myTable { background-color:#000000;border-collapse:collapse; }
.myTable th { background-color:#000000;color:white; }
.myTable tr { background:#000000 url(img/back.png) repeat-x scroll top left; }
.myTable td, .myTable th { padding:0.5px;border:1px solid #666666; }
</style>
<style>
/* unvisited link */
a:link {
color: #FFFFFF;
}
/* visited link */
a:visited {
color: #FFFFFF;
}
/* mouse over link */
a:hover {
color: #FF0000;
}
/* selected link */
a:active {
color: #0000FF;
}
</style>
</head>
<body style="background-color:black">
<font face="Arial">
<center>
<table class="myTable">
<tr style="color: #FFFFFF;"><td>+</td><td><p><a href="" target="_blank">Name</a></p></td><td><p>Year</p></td><td><p>Genre</p></td><td><p>Subs?</p></td><td><p>Length</p></td><td><p><a href="" target="_blank">Trailer</a></p></td><td><p>Rating</p></td><td><p>Location</p></td><td><p>Res</p></td></tr>
<tr style="color: #FFFFFF;"><td colspan="10" padding:0px;><p>Blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
</td></tr>
<tr style="color: #FFFFFF;"><td>+</td><td><p><a href="" target="_blank">Name</a></p></td><td><p>Year</p></td><td><p>Genre</p></td><td><p>Subs?</p></td><td><p>Length</p></td><td><p><a href="" target="_blank">Trailer</a></p></td><td><p>Rating</p></td><td><p>Location</p></td><td><p>Res</p></td></tr>
<tr style="color: #FFFFFF;"><td colspan="10"><p>Blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
</td></tr>
<tr style="color: #FFFFFF;"><td>+</td><td><p><a href="" target="_blank">Name</a></p></td><td><p>Year</p></td><td><p>Genre</p></td><td><p>Subs?</p></td><td><p>Length</p></td><td><p><a href="" target="_blank">Trailer</a></p></td><td><p>Rating</p></td><td><p>Location</p></td><td><p>Res</p></td></tr>
<tr style="color: #FFFFFF;"><td colspan="10"><p>Blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
</td></tr>
<tr style="color: #FFFFFF;"><td>+</td><td><p><a href="" target="_blank">Name</a></p></td><td><p>Year</p></td><td><p>Genre</p></td><td><p>Subs?</p></td><td><p>Length</p></td><td><p><a href="" target="_blank">Trailer</a></p></td><td><p>Rating</p></td><td><p>Location</p></td><td><p>Res</p></td></tr>
<tr style="color: #FFFFFF;"><td colspan="10"><p>Blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
</td></tr>
<tr style="color: #FFFFFF;"><td>+</td><td><p><a href="" target="_blank">Name</a></p></td><td><p>Year</p></td><td><p>Genre</p></td><td><p>Subs?</p></td><td><p>Length</p></td><td><p><a href="" target="_blank">Trailer</a></p></td><td><p>Rating</p></td><td><p>Location</p></td><td><p>Res</p></td></tr>
<tr style="color: #FFFFFF;"><td colspan="10"><p>Blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
</td></tr>
<tr style="color: #FFFFFF;"><td>+</td><td><p><a href="" target="_blank">Name</a></p></td><td><p>Year</p></td><td><p>Genre</p></td><td><p>Subs?</p></td><td><p>Length</p></td><td><p><a href="" target="_blank">Trailer</a></p></td><td><p>Rating</p></td><td><p>Location</p></td><td><p>Res</p></td></tr>
<tr style="color: #FFFFFF;"><td colspan="10"><p>Blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
</td></tr>
</table>
</center>
</font>
<script>
if (NS4) {document.write('<LAYER NAME="floatlayer" LEFT="'+floatX+'" TOP="'+floatY+'">');}
if ((IE4) || (NS6)) {document.write('<div id="floatlayer" style="position:absolute; left:'+floatX+'; top:'+floatY+';">');}
</script>
<center>
<font color="white">
<A HREF="javascript:history.go(0)">RELOAD</A> - <a href="#action">ACTION</a> - <a href="#adventure">ADVENTURE</a> - <a href="#animated">ANIMATED</a> - <a href="#biography">BIOGRAPHY</a> - <a href="#comedy">COMEDY</a> - <a href="#crime">CRIME</a> - <a href="#documentary">DOCUMENTARY</a> - <a href="#drama">DRAMA</a> - <a href="#fantasy">FANTASY</a> - <a href="#foreign">FOREIGN</a>
<BR><a href="#historical">HISTORICAL</a> - <a href="#horror">HORROR</a> - <a href="#martial_arts">MARTIAL ARTS</a> - <a href="#musical">MUSICAL</a> - <a href="#romance">ROMANCE</a> - <a href="#sci_fi">SCI FI</a> - <a href="#stand_up">STAND UP COMEDY</a> - <a href="#superhero">SUPERHERO</a> - <a href="#thriller">THRILLER</a> - <a href="#war">WAR</a> - <a href="#western">WESTERN</a>
</font>
</center>
<script>
if (NS4)
{
document.write('</LAYER>');
}
if ((IE4) || (NS6))
{
document.write('</DIV>');
}
ifloatX=floatX;
ifloatY=floatY;
define();
window.onresize=define;
lastX=-1;
lastY=-1;
adjust();
</script>
</body>
</html>
Here is my style.CSS file:
table{ width: 98%; }
tr {border: 1px solid #666666;}
.scroll-wrapper{
border: 1px solid black;
width: 200px;
overflow-x: scroll;
/*making the scroll have momentum on mobile devices
http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements
*/
-webkit-overflow-scrolling: touch;
}
/*hiding the scrollbar*/
.scroll-wrapper::-webkit-scrollbar {
display: none;
}
a:link {
text-decoration: none;
}
#header a:hover {
text-decoration: none;
}
img {
float: left;
margin: 0 20px 20px 0;
}
p {
text-align: justify;
text-indent: 0em;
}
And here is my scripts.JS file:
$(function() {
$("td[colspan=10]").find("p").hide();
$("table").click(function(event) {
event.stopPropagation();
var $target = $(event.target);
if ( $target.closest("td").attr("colspan") > 1 ) {
$target.slideUp();
$target.closest("tr").prev().find("td:first").html("+");
} else {
$target.closest("tr").next().find("p").slideToggle();
if ($target.closest("tr").find("td:first").html() == "+")
$target.closest("tr").find("td:first").html("-");
else
$target.closest("tr").find("td:first").html("+");
}
});
});
Apologies if it's still a little messy, I'm trying to learn as much as I can from this and improve, and I've been trying for a week now. I don't take any classes on this, so it's all self-taught and backwards-engineered from people that know a LOT more than I do.
A little info on me: I'm actually an architectural draftsman by trade, I draft plans for construction using AutoCAD; so ANY computer programming for me is unknown. I do think that HTML is beautiful, however.
This time I've omitted all photographs to avoid confusion. I'm just trying to get the code to work before I start populating all the rows with useful information relevant to me.
Many thanks in advance, and kudos to whomever can read my mess and spot the flaw!
