Allowing simplified browsing of websites with a predictable URL structure

Question

The code below has been a pet project of mine for some time. It allows simplified browsing of websites that have a predictable URL structure, namely TGP websites.

It has been greatly modified from it's original version to be effective on Android, and there is probably alot of room to improve on it. I'm not asking anyone to do my work for me, though.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-Equiv="Cache-Control" Content="no-cache">
<meta http-Equiv="Pragma" Content="no-cache">
<meta http-Equiv="Expires" Content="0">
<script type="text/javascript">

window.onload = function() {
   if(location.href.lastIndexOf('?')>0)(splitURL(location.href.substring(location.href.lastIndexOf('?')+1)))
   BROWSEbar.style.display='none'; 
     EDITbar.style.display='block';
};

window.onscroll = function() {
  document.getElementById('fixdiv').style.top =
     (window.pageYOffset) + 'px';
};

function splitURL(newURL)
{
EDITbar.fullURL.value=newURL;
EDITbar.splitURL.click();
EDITbar.goURL.click();
}

function combine(a,b,c,d,e,f,g){return a+b+c+d+e+f+g;}
function highlight(field) {field.focus();field.select();}

function minusone(a)
{
    b = a.length;
    a = Number(a);
    a = ((a > 1) ? a - 1 : a);
    a = String(a);
    while(a.length < b) 
    {
        a = "0" + a;
    }
    return a;
}

function plusone(a)
{
    b = a.length;
    a = Number(a);
    a++;
    a = String(a);
    while(a.length < b) 
    {
        a = "0" + a;
    }
    return a;
}

function gotoURL(sURL)
{
    var iTail=Math.round(Math.random()*100000);
    if (sURL.search('http://')<0){sURL="http://"+sURL;}
    sURL=sURL+'?r+'+iTail;
    top.frames['mframe'].location.href=sURL;
}

function URLsplit() 
{
    var newURL = EDITbar.fullURL.value.replace('http://','');
    var testI=null;
    var i=0;
    var j=1;
    EDITbar.clearURL.click();
    while (i<newURL.length)
    {
        switch(j)
        {
            case 1:
                EDITbar.url2.value = EDITbar.url2.value + newURL.charAt(i);
                if(testI == false){j++;}
                break;
            case 2:
                EDITbar.url3.value = EDITbar.url3.value + newURL.charAt(i);
                if(testI == true){j++;}
                break;
            case 3:
                EDITbar.url4.value = EDITbar.url4.value + newURL.charAt(i);
                if(testI == false){j++;}
                break;
            case 4:
                EDITbar.url5.value = EDITbar.url5.value + newURL.charAt(i);
                if(testI == true){j++;}
                break;
            case 5:
                EDITbar.url6.value = EDITbar.url6.value + newURL.charAt(i);
                if(newURL.charAt(i+1) == "."){j++;}
                break;
            case 6:
                EDITbar.url7.value = EDITbar.url7.value + newURL.charAt(i);
                break;
        }
        i++;
        testI = isNaN(newURL.charAt(i+1));
    }
    BROWSEbar.url3.value=EDITbar.url3.value;
  BROWSEbar.url5.value=EDITbar.url5.value;
}
</script>

<title>
   Filter-Kilter Browser
</title>

<style type="text/css">

#fixdiv {filter: alpha(opacity=86); -moz-opacity: .86; background-color:#EEE;}


html, body { margin: 0; padding: 0; height: 100%; overflow:hidden;}
    p, h1 {top-margin: 0; padding: 0;}
    .button 
    {
          color: #900;
      border: 1px solid #900;
      font-size: 24px;
      font-weight: bold;
    }
    .browse 
    {
          color: #862;
      border: 2px solid #806020;
      font-size: 240%;
      font-weight: 900;
    }
        iframe 
    {
          position: absolute;
          top: 0; left: 0; width: 100%; height: 100%;
          border: none;
        }
    table,th,td
    {
      border-collapse : collapse;
      padding:0;
    }
    th
    {
      background-color:green;
      color:white;
    }

input.groovybutton
{
   font-size:46px;
   font-family:Comic Sans MS,sans-serif;
   font-weight:bold;
   color:#ffffff;
   width:990px;
   height120px;
   background-color:#800;
   border-style:solid;
   border-color:#000000;
}
input.smallbtn
{
   font-size:24px;
   font-family:Comic Sans MS,sans-serif;
   font-weight:bold;
   color:#ffffff;
   width:100px;
   height60px;
   background-color:#800;
   border-style:solid;
   border-color:#000000;
}
input.medbtn
{
   font-size:36px;
   font-family:Comic Sans MS,sans-serif;
   font-weight:bold;
   color:#fff;
   width:100px;
   height80px;
   background-color:#f60;
   border-style:solid;
   border-color:#000000;
}
input.medtxt
{
   font-size:50px;
   font-family:Comic Sans MS,sans-serif;
   font-weight:bold;
   color:#000000;
   width:100px;
   background-color:#FFF0D0;
   border-style:solid;
   border-color:#000000;
}
input.bigtxt
{
   font-size:38px;
   font-weight:bold;
   color:#800;
   height60px;
   background-color:#ffffff;
   border-style:solid;
   border-color:#800;
}

</style>


</head>

<body>

<iframe id="mframe" name="mframe" src="MAIN.html" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>

<div id="fixdiv" style="background-color: transparent; position: absolute; z-index: 1; visibility: show; left: 10%;">
<center>
<form name=EDITbar method=get action="javascript:gotoURL(EDITbar.fullURL.value);" onsubmit="EDITbar.fullURL.value=combine(url1.value,url2.value,url3.value,url4.value,url5.value,url6.value,url7.value);">
<input class='smallbtn' name=clearURL type=reset value="CLEAR">
<input class='bigtxt' name=fullURL type=text size=40>
<input class='smallbtn' name=splitURL type=submit value="SPLIT" onclick="javaScript:URLsplit();">
<br>
<input class='button' name=url1 type=text size=4 value="http://" onkeyup="url1.value=('http://');">
<input class='button' name=url2 type=text size=20 value="">
<input class='button' name=url3 type=text size=4 value="">
<input class='button' name=url4 type=text size=12 value="">
<input class='button' name=url5 type=text size=4 value="">
<input class='button' name=url6 type=text size=9 value="">
<input class='button' name=url7 type=text size=4 value="">
<br>
<input class='groovybutton' name=cancelURL type=submit value="BROWSE" onclick="BROWSEbar.url3.value=url3.value; BROWSEbar.url5.value=url5.value; EDITbar.style.display='none'; BROWSEbar.style.display='block';">

</form>

<form name=BROWSEbar method=get action="javascript:gotoURL(EDITbar.fullURL.value);" onsubmit="EDITbar.fullURL.value=combine(EDITbar.url1.value,EDITbar.url2.value,EDITbar.url3.value,EDITbar.url4.value,EDITbar.url5.value,EDITbar.url6.value,EDITbar.url7.value);">
<input class='medbtn' name=minus1 type=submit value="-" onClick="url3.value=minusone(url3.value);EDITbar.url3.value=url3.value;">
<input class='medtxt' name=url3 type=text size=42 value="">
<input class='medbtn' name=add1 type=submit value="+" onClick="url3.value=plusone(url3.value);EDITbar.url3.value=url3.value;">
<input class='medbtn' name=editURL type=button value="EDIT" onmouseover="BROWSEbar.style.display='none'; EDITbar.style.display='block';">
<input class='medbtn' name=minus2 type=submit value="-" onClick="url5.value=minusone(url5.value);EDITbar.url5.value=url5.value;">
<input class='medtxt' name=url5 type=text size=6 value="">
<input class='medbtn' name=add2 type=submit value="+" onClick="url5.value=plusone(url5.value);EDITbar.url5.value=url5.value;">
</form>

</center>
</div>

</body>

</html>

Can you provide a not-NSFW url where I can pont this thing to test it? I made a thing for it. — Dagg, Commented Feb 11, 2012 at 0:33
Suprisingly, yes: cygwin.com/ml/cygwin/2004-05/msg00250.html — JoeD, Commented Feb 11, 2012 at 0:38
The date directory and the page are both usable to test it out. By default it will split it at the first two numeric instances (year-month), I paln on implementing skipping instances eventually. — JoeD, Commented Feb 11, 2012 at 0:42
Hmm, I got it to work from a file:// url, but not a jsfiddle. It seems to have some weird bugs in chrome. I'll review it later if I have time :) — Dagg, Commented Feb 11, 2012 at 0:56

tereško · Accepted Answer · 2012-02-11 01:59:42Z

I will ignore the android specific parts. And i will fix/ignore the missing semicolons & unnecessary brackets

Ok .. here it goes.

it's 2012, please use HTML5 doctype.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

english is not the only language on planet, you should be using UTF-8 for ages already
```
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
```
if possible, avoid meeing with style object. Each time you modify it, browser executed reflow stage
```
BROWSEbar.style.display='none'; 
EDITbar.style.display='block';
```

this is just madness

function minusone(a) {
   b = a.length;
   a = Number(a);
   a = ((a > 1) ? a - 1 : a);
   a = String(a);
   while (a.length < b) {
      a = "0" + a;
   }
   return a;
}

function plusone(a) {
   b = a.length;
   a = Number(a);
   a++;
   a = String(a);
   while (a.length < b) {
      a = "0" + a;
   }
   return a;
}

you should learn how to use arrays in javascript

switch (j) {
   case 1:
      EDITbar.url2.value = EDITbar.url2.value + newURL.charAt(i);
      if (testI == false){
         j++;
      }
      break;
   case 2:
      EDITbar.url3.value = EDITbar.url3.value + newURL.charAt(i);
      if(testI == true){
         j++;
      }
      break;
   case 3:
      EDITbar.url4.value = EDITbar.url4.value + newURL.charAt(i);
      if(testI == false){
        j++;
      }
      break;
   case 4:
      EDITbar.url5.value = EDITbar.url5.value + newURL.charAt(i);
      if(testI == true){
         j++;
      }
      break;
   case 5:
      EDITbar.url6.value = EDITbar.url6.value + newURL.charAt(i);
      if(newURL.charAt(i+1) == "."){
         j++;
      }
      break;
   case 6:
      EDITbar.url7.value = EDITbar.url7.value + newURL.charAt(i);
      break;
  }

firefox and IE are not the only browsers

  #fixdiv {
    filter: alpha(opacity=86); 
    -moz-opacity: .86; 
    background-color:#EEE;
  }

this is just nasty

  font-family:Comic Sans MS,sans-serif;

you should not be using iframes just to create layout. Go and learn what XHR is.

 <iframe id="mframe" name="mframe" src="MAIN.html" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>

please , stop using inline css

 <div id="fixdiv" style="background-color: transparent; position: absolute; z-index: 1; visibility: show; left: 10%;">

this tag is considered outdate , you have css for it
```
 <center>
```

do not attach javascrit events in HTML tags

 <form name=EDITbar method=get action="javascript:gotoURL(EDITbar.fullURL.value);" onsubmit="EDITbar.fullURL.value=combine(url1.value,url2.value,url3.value,url4.value,url5.value,url6.value,url7.value);">
 <input class='smallbtn' name=splitURL type=submit value="SPLIT" onclick="javaScript:URLsplit();">
 <input class='button' name=url1 type=text size=4 value="http://" onkeyup="url1.value=('http://');">
 <input class='groovybutton' name=cancelURL type=submit value="BROWSE" onclick="BROWSEbar.url3.value=url3.value; BROWSEbar.url5.value=url5.value; EDITbar.style.display='none'; BROWSEbar.style.display='block';">

line breaks are not for layout
```
 <br>
```

Essentially , it looks like your HTML/JS/CSS skills are at least 10 yours out of date.

You are right in your assumption that my skills are out of date, thank you for the apt analysis. My original implementation made use of old style framesets, the iframes was a pretty big step up for me. Is XHR android compatible? My switch to iframes was mainly due to layout errors with scroll bars. The addition and subtraction functions were written in such a way to account for and return leading zeroes. I am sure there is a cleaner way to do it but I can't squeeze blood from a turnip, so to speak. If i remember correctly it was the strongly defined variables that were giving me trouble. — JoeD, Commented Mar 29, 2012 at 0:11
All, and I mean ALL CCS was added in a recent revision, there are still some vesiges of usless html here and there. Thanks for pointing some of it out. Thanks again for the look over, any examples that you know of that fit my code for a variable array? It was my intention to use a dynamic array originally but I never got it to work and took the easy way out. — JoeD, Commented Mar 29, 2012 at 0:11
@user1203156 Yes, it is possible to use XHR on android devices. It is available even on all the new non-smart phones. As for plusone/minusone functions, it depends on what you exactly are trying to do, but it would be much easier accomplished with closure .. and not in such an ugly way. As for that large switch statement: i have no idea what you are doing there, but it could be rewritten in ~8 lines. — tereško, Commented Mar 29, 2012 at 0:35
The plus/minus function adjusts the number while retaining leading zeroes. The issue I was having was when converting "001" to an integer it would drop the zeroes and only return a "1", making the url invalid. — JoeD, Commented Mar 29, 2012 at 0:53
The switch statement loads the URL into the "array" one character at a time, when it detects a number it moves to the next variable in the array and continues until it detects a non-number, then it moves to the next variable and repeats until the URL has been fully loaded. If the URL were delimited into parenthesis it would look like: (fakeurl.com/gallery)(001)(/picture)(001)(.jpg) This example shows how the url would split into 5 variables... seperating the numbers so that they may be manipulated. I am sure there is a cleaner way. — JoeD, Commented Mar 29, 2012 at 1:01

Stack Exchange Network

Allowing simplified browsing of websites with a predictable URL structure

1 Answer 1

Your Answer

Not the answer you're looking for? Browse other questions tagged
javascript
html
android
or ask your own question.

Hot Network Questions

Allowing simplified browsing of websites with a predictable URL structure

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascripthtmlandroid or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
javascript
html
android
or ask your own question.