How to make expoerted bookmarks look nice

[Quantumstate]

If any of you have ever exported bookmarks to html in firefox you will know that they aren't in the most readable form. This is annoying if you want to give then to a friend. I thought it would be nice if you could expand each folder rather than having one big nasty list. Also I added some indents to make it more readable as well.

Here is the script I wrote. You can just paste it right at the bottom of the html page and it will work.


<style type="text/css">
H3{
margin:0px;
padding:0;
font-size:100%;
}

span{
margin-left:30px;
}

span.boxedlink{
width:12px;
text-decoration:none;
border: 1px solid #000000;
margin-bottom:-16px;
}
</style>
<script type="text/javascript">
function addstuff(){
ar = document.getElementsByTagName('dl');
for(i=1;i<ar.length;i++) {
temp = ar[i].innerHTML;
ar[i].innerHTML = '<span onClick="hidebyid(\'h' + i +'\')" id="hh' + i + '" class="boxedlink" style="display:none;">-</span>';
ar[i].innerHTML += '<span onClick="showbyid(\'h' + i +'\')" id="sh' + i + '" class="boxedlink">+</span>';
ar[i].innerHTML += '<span style="display:none;" id="h' + i + '">' + temp + "</span>";
}
}

function hidebyid(id){
node = document.getElementById(id);
node.style.display = 'none';
node = document.getElementById('h'+id)
node.style.display = 'none';
node = document.getElementById('s'+id)
node.style.display = 'block';
}

function showbyid(id){
node = document.getElementById(id);
node.style.display = 'block';
node = document.getElementById('h'+id)
node.style.display = 'block';
node = document.getElementById('s'+id)
node.style.display = 'none';
}

addstuff();</script>

It works in firefox 3, IE8 and IE7 compatibility mode, I haven't tested in other browsers.

The way it works is to loop through every DL tag in the page. Two spans with the + and - in them are placed at the start of the DL tag then another span is placed so that it contains the content of the DL tag. I used innerHTML and getElementsByTagName for this. The + span and the one containing the content start off hidden. Each element is given a unique id.

The + and - spans have onClick events which show or hide the right spans. The show and hide functions are given the id which was written in when the DL tags were looped through and uses getElementById and then modifies the style to display block or none. Other than that there is just a bit of css to make it look pretty.

[Jozeh]

sounds good, sorry where are we supposed to input this code?

[Quantumstate]

If you export your bookmarks as html from firefox then you should open the html file and paste the code at the end of the document.