proper spacing between html code

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I have some spacing issues in my html. Should I use css or html to solve the problem? When using a non breaking space, the letters do not line up properly. Here is the code I am using. The are of concern is towards the bottom of the code you will see letters of the alphabet. When you view the code, you will see that the letters are stuck together. I want to put some space between them so they look proper when viewing my web page.




<style type="text/css">

#topbar{
position:absolute;
border: 0px solid black;
padding: 2px;
background-color: red
width: 20px;
visibility: hidden;
z-index: 100;
}

</style>

<script type="text/javascript">

/***********************************************
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 90 //set x offset of bar in pixels
var startY = 20 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>

<div id="topbar">
<a href="" onClick="(); return false"><h5>Back to top</h5></a>

<a href="#a">A</a><a href="#b">B</a><br/>
<a href="#c">C</a><a href="#d">D</a><br/>
<a href="#e">E</a><a href="#f">F</a><br/>
<a href="#g">G</a><a href="#h">H</a><br/>
<a href="#i">I</a><a href="#j">J</a><br/>
<a href="#k">K</a><a href="#l">L</a><br/>
<a href="#m">M</a><a href="#n">N</a><br/>
<a href="#o">O</a><a href="#p">P</a><br/>
<a href="#q">Q</a><a href="#r">R</a><br/>
<a href="#s">S</a><a href="#t">T</a><br/>
<a href="#u">U</a><a href="#v">V</a><br/>
<a href="#w">W</a><a href="#x">X</a><br/>
<a href="#y">Y</a><a href="#z">Z</a><br/>
<br/><br/><br/>
<a href="http://www.mcran.com" target="_self"><b>HOME</b></a><br/>
<a href="http://www.mcran.com/bio-test-page.php" target="_self"><b>BIO</b></a><br/>
<a href="http://www.mcran.com/interviews.php" target="_self"><b>INTERVIEWS</b></a><br/>
<a href="http://www.mcran.com/playlistsshowtable.php" target="_self"><b>PLAYLISTS</b></a><br/>
<a href="http://www.mcran.com/2010-2006showstable.php" target="_self"><b>RADIO SHOWS</b></a><br/>
<a href="http://www.mcran.com/favorite-sites.php" target="_self"><b>RESOURCES</b></a><br/>
<a href="http://www.mcran.com/contact.php" target="_self"><b>CONTACT ME</b></a><br/>
<a href="http://www.mcran.com/ihtsb.php" target="_self"><b>IHTSB</b></a><br/>
<a href="http://www.mcran.com/thebennettarchives.php" target="_self"><b>BENNETT ARCHIVES</b></a><br/>
</div>

Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
  • Trying to solve a spacing problem and am very hopeful I will find the correct answer!

Posted 7 years ago

  • 1
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi Randy

It looks like you will be able to use HTML/CSS to make the spacing for the alphabet, using margin or padding elements.

I am forwarding your question to our HTML team who may have some ideas on how to do this. Someone will respond to you within 48 hours.

Thank you
Nazlie
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hello Randy,

You could try adding this code to your webpages: (without the <!--- and --->)

<!---
<style type="text/css">
div.topbar a:link {
padding-bottom:3px;
}
</style>
--->

This will give a padding of 3 pixels to the bottom of the letters - I hope! If you wanted more padding to the right or left, or even top - you just need to add the following lines:
padding-top;
padding-left;
padding-right;

Hope this helps,

Andi
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Randy,

Do you want those line breaks also? Do you want it to be like this:



I pasted the code you have into my test site and that's what it showed. From the looks of the code, it looks like that's supposed to be a bar across the top of the page? Am I correct?

I was looking at the CSS, and I see an error in it, which is causing it to not display a bar at the top. I fixed your code so it would look like a bar, and I made the page links float to the right. Let me know if this is what you wanted:



Also, I see how you are using JavaScript to make it stay at the top, but there's actually an easier CSS way. Right now when you go down the bar isn't there right away and you have to wait for it to come down, and when you go back up, it stays in one place then it slides back up. If you want to see for your self go here: http://tester3.yolasite.com/code-test... Scroll down and then scroll back up and you'll see. Would you like it to just be steady and stay at the top of the page but it will still be there when you scroll down. Would you like that?

Nathan
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Nathan for your eagle eyes and assistance on this.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hi Nathan!

I like the horizontal bar coming down or up as I scroll the page. I looked at the example on your test site and am interested in trying this out. I would imagine I could change the color from red to whatever I like, even transparent?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
You're welcome, Sanja :)
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Wow! Nathan! So many options. I thought I had to go with the floating menu I currently use so that people visiting that page could navigate easily but you are showing me alternative possibilities and I really appreciate and love this!! I find your last option very intriguing as long as it is easy and makes sense from an end users (visitor to my page) point of view. I am really excited now to try these options out tomorrow after I do my radio show.

This is why this forum is #1 for me.

I am currently going through the HTML and CSS tutorials on the W3C web site. This stuff is so powerful!!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Randy,

No problem :)

So would you like me to make the code do it an easier way without JavaScript keep it at the top?

I can do that right now if you like.

Also, you can change the bar color to any color you want. If you want it a different color I can change that also. You can pretty much do anything with this bar! ;)

Kind regards,
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hey Randy,

Do you want it like this: http://tester3.yolasite.com/code-test...

Or like this: http://tester3.yolasite.com/code-test...

(scroll down the page to see the difference between the two)

The first one is the CSS way so it stays there, and the last option is the JavaScript way.

Regarding the color of the bar, if you change it to transparent, then there wont be anything there and it will just look like text at the top and will be hard to read / wont look right.

I'll post the code here for whichever one you want.

Sincerely,
Nathan
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks a million for doing this, Nathan!!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
You're welcome! Which one would you like? (First Option or Second Option)
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
The second option where the menu moves. I assume I can modify the code to suit my needs?

Thanks!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Actually, can I have the code for both options so that I can try them out and see which one I like?

Thanks!!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Randy,

Sure! Here are the codes.

Code for Option 1:



<style type="text/css">

#topbar {

position:fixed;

border: 0;

padding: 2px;

background-color: red; /*Color of bar - if transparent (left blank) it will only display text and may not look right*/

color:white;

top:0;

left:0;

width: 100%;

z-index: 100;

margin:0;

padding-right:0;

padding-left:0;

}

#topbar a {
/*Link color in top bar*/
color:white;
}

</style>

<script type="text/javascript">

/***********************************************

* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)

* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)

* This notice must stay intact for legal use.

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session

var startX = 0 //set x offset of bar in pixels

var startY = 0 //set y offset of bar in pixels

var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}

function get_cookie(Name) {

var search = Name + "="

var returnvalue = "";

if (document.cookie.length > 0) {

offset = document.cookie.indexOf(search)

if (offset != -1) {

offset += search.length

end = document.cookie.indexOf(";", offset);

if (end == -1) end = document.cookie.length;

returnvalue=unescape(document.cookie.substring(offset, end))

}

}

return returnvalue;

}

function closebar(){

if (persistclose)

document.cookie="remainclosed=1"

document.getElementById("topbar").style.visibility="hidden"

}

function staticbar(){

barheight=document.getElementById("topbar").offsetHeight

var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;

var d = document;

/* function ml(id){

var el=d.getElementById(id);

if (!persistclose || persistclose && get_cookie("remainclosed")=="")

el.style.visibility="visible"

if(d.layers)el.style=el;

el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};

el.x = startX;

if (verticalpos=="fromtop")

el.y = startY;

else{

el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;

el.y -= startY;

}

return el;*/

}

/* window.stayTopLeft=function(){

if (verticalpos=="fromtop"){

var pY = ns ? pageYOffset : iecompattest().scrollTop;

ftlObj.y += (pY + startY - ftlObj.y)/8;

}
else{

var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;

ftlObj.y += (pY - startY - ftlObj.y)/8;

}

ftlObj.sP(ftlObj.x, ftlObj.y);

setTimeout("stayTopLeft()", 10);

}

ftlObj = ml("topbar");

stayTopLeft();

}*/

if (window.addEventListener)

window.addEventListener("load", staticbar, false)

else if (window.attachEvent)

window.attachEvent("onload", staticbar)

else if (document.getElementById)

window.onload=staticbar

</script>

<div id="topbar">

<span style="float:left;padding-left:7px;">

<a href="#top" onclick="return false;">Back to top</a>&nbsp;|&nbsp;

<a href="#a">A</a>&nbsp;&nbsp;<a href="#b">B</a>&nbsp;&nbsp;<a href="#c">C</a>&nbsp;&nbsp;<a href="#d">D</a>&nbsp;&nbsp;<a href="#e">E</a>&nbsp;&nbsp;<a href="#f">F</a>&nbsp;&nbsp;<a href="#g">G</a>&nbsp;&nbsp;<a href="#h">H</a>&nbsp;&nbsp;<a href="#i">I</a>&nbsp;&nbsp;<a href="#j">J</a>&nbsp;&nbsp;<a href="#k">K</a>&nbsp;&nbsp;<a href="#l">L</a>&nbsp;&nbsp;<a href="#m">M</a>&nbsp;&nbsp;<a href="#n">N</a>&nbsp;&nbsp;<a href="#o">O</a>&nbsp;&nbsp;<a href="#p">P</a>&nbsp;&nbsp;<a href="#q">Q</a>&nbsp;&nbsp;<a href="#r">R</a>&nbsp;&nbsp;<a href="#s">S</a>&nbsp;&nbsp;<a href="#t">T</a>&nbsp;&nbsp;<a href="#u">U</a>&nbsp;&nbsp;<a href="#v">V</a>&nbsp;&nbsp;<a href="#w">W</a>&nbsp;&nbsp;<a href="#x">X</a>&nbsp;&nbsp;<a href="#y">Y</a>&nbsp;&nbsp;<a href="#z">Z</a>&nbsp;&nbsp;

</span>

<span style="float:right;padding-right:7px;">

<a href="http://www.mcran.com" target="_self"><b>HOME</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/bio-test-page.php" target="_self"><b>BIO</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/interviews.php" target="_self"><b>INTERVIEWS</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/playlistsshowtable.php" target="_self"><b>PLAYLISTS</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/2010-2006showstable.php" target="_self"><b>RADIO SHOWS</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/favorite-sites.php" target="_self"><b>RESOURCES</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/contact.php" target="_self"><b>CONTACT ME</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/ihtsb.php" target="_self"><b>IHTSB</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/thebennettarchives.php" target="_self"><b>BENNETT ARCHIVES</b></a>&nbsp;&nbsp;
</span>
</div>



And, here's the code for Option 2:



<style type="text/css">

#topbar {

position:absolute;

border: 0;

padding: 2px;

background-color: red;

color:white;

width: 100%;

visibility: hidden;

z-index: 100;

margin:0;

padding-right:0;

padding-left:0;

}

#topbar a {
/*Link color in top bar*/
color:white;
}

</style>

<script type="text/javascript">

/***********************************************

* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)

* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)

* This notice must stay intact for legal use.

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session

var startX = 00 //set x offset of bar in pixels

var startY = 00 //set y offset of bar in pixels

var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}

function get_cookie(Name) {

var search = Name + "="

var returnvalue = "";

if (document.cookie.length > 0) {

offset = document.cookie.indexOf(search)

if (offset != -1) {

offset += search.length

end = document.cookie.indexOf(";", offset);

if (end == -1) end = document.cookie.length;

returnvalue=unescape(document.cookie.substring(offset, end))

}

}

return returnvalue;

}

function closebar(){

if (persistclose)

document.cookie="remainclosed=1"

document.getElementById("topbar").style.visibility="hidden"

}

function staticbar(){

barheight=document.getElementById("topbar").offsetHeight

var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;

var d = document;

function ml(id){

var el=d.getElementById(id);

if (!persistclose || persistclose && get_cookie("remainclosed")=="")

el.style.visibility="visible"

if(d.layers)el.style=el;

el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};

el.x = startX;

if (verticalpos=="fromtop")

el.y = startY;

else{

el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;

el.y -= startY;

}

return el;

}

window.stayTopLeft=function(){

if (verticalpos=="fromtop"){

var pY = ns ? pageYOffset : iecompattest().scrollTop;

ftlObj.y += (pY + startY - ftlObj.y)/8;

}

else{

var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;

ftlObj.y += (pY - startY - ftlObj.y)/8;

}

ftlObj.sP(ftlObj.x, ftlObj.y);

setTimeout("stayTopLeft()", 10);

}

ftlObj = ml("topbar");

stayTopLeft();

}

if (window.addEventListener)

window.addEventListener("load", staticbar, false)

else if (window.attachEvent)

window.attachEvent("onload", staticbar)

else if (document.getElementById)

window.onload=staticbar

</script>

<div id="topbar">

<span style="float:left;padding-left:7px;">

<a href="#top" onclick="return false;">Back to top</a>&nbsp;|&nbsp;

<a href="#a">A</a>&nbsp;&nbsp;<a href="#b">B</a>&nbsp;&nbsp;<a href="#c">C</a>&nbsp;&nbsp;<a href="#d">D</a>&nbsp;&nbsp;<a href="#e">E</a>&nbsp;&nbsp;<a href="#f">F</a>&nbsp;&nbsp;<a href="#g">G</a>&nbsp;&nbsp;<a href="#h">H</a>&nbsp;&nbsp;<a href="#i">I</a>&nbsp;&nbsp;<a href="#j">J</a>&nbsp;&nbsp;<a href="#k">K</a>&nbsp;&nbsp;<a href="#l">L</a>&nbsp;&nbsp;<a href="#m">M</a>&nbsp;&nbsp;<a href="#n">N</a>&nbsp;&nbsp;<a href="#o">O</a>&nbsp;&nbsp;<a href="#p">P</a>&nbsp;&nbsp;<a href="#q">Q</a>&nbsp;&nbsp;<a href="#r">R</a>&nbsp;&nbsp;<a href="#s">S</a>&nbsp;&nbsp;<a href="#t">T</a>&nbsp;&nbsp;<a href="#u">U</a>&nbsp;&nbsp;<a href="#v">V</a>&nbsp;&nbsp;<a href="#w">W</a>&nbsp;&nbsp;<a href="#x">X</a>&nbsp;&nbsp;<a href="#y">Y</a>&nbsp;&nbsp;<a href="#z">Z</a>&nbsp;&nbsp;

</span>

<span style="float:right;padding-right:7px;">

<a href="http://www.mcran.com" target="_self"><b>HOME</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/bio-test-page.php" target="_self"><b>BIO</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/interviews.php" target="_self"><b>INTERVIEWS</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/playlistsshowtable.php" target="_self"><b>PLAYLISTS</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/2010-2006showstable.php" target="_self"><b>RADIO SHOWS</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/favorite-sites.php" target="_self"><b>RESOURCES</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/contact.php" target="_self"><b>CONTACT ME</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/ihtsb.php" target="_self"><b>IHTSB</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/thebennettarchives.php" target="_self"><b>BENNETT ARCHIVES</b></a>&nbsp;&nbsp;
</span>
</div>



Hope this helps.

Nathan
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hi Nathan!!

Thanks! I tried option 2 and it works well except that the Back to Top doesn't seem to work.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I'm really liking option 1 because the menu stays in one place and doesn't seem to be as distracting as option 2. When I had the floating menu running along the left side, that was one of my concerns in that the menu was always moving around. In using option 1, it's stationary and easier on the eyes if you know what I mean.

Which option did you prefer?

btw, back to top didn't work with option 1 either.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
So, this is what the code looks like and does. Way cool and very functional. Thanks Nathan!!

The only thing that doesn't work is the Back to Top button. What could be causing this?

Here are the pages to check out:

The Bennett Archives page and the In Transition Archives page on my web site.

www.mcran.com
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I like this code so much (thanks to Nathan) I decided to use it site wide instead of the nav bar that comes with the theme I am using.

What I would like are suggestions for the look of the new menu. Right now I am using a brown color that matches the background of my site.

Maybe I should use another color?

Maybe I should put top and or bottom borders on the menu?

Please let me know what you think because I am always looking for feedback when I make my site changes.. Thanks!!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Randy,

I'm glad you like it! I think that the color of the bar goes with your site fairly good.

I think if you add a top border it might not look right, but if you add a border to the bottom, that might look good.

Also, I have a suggestion for all of your <a> tags on the page (not on the top bar, on the page for each section) that you use for the letter sections.

Instead of using this:

<a id="a">A</a>

Etc.

I suggest you use the following for each letter so you'll be able to see the letter when you click on one of the letter links at the top:

<div id="a" style="padding-top:30px;text-decoration:none;">A</div>

<div id="b" style="padding-top:30px;text-decoration:none;">B</div>

Etc.

You would have to change this for each letter, but it would be better. This will make it to when you click on a letter in the top, it will still go down to the letter, but you'll be able to see the letter, and the bar wont be covering it up. Also, this will make it to where when you hover over a letter, it wont underline (it will still underline on the top bar of course, this is just for the letters on the page.)

Here's my example:

http://tester3.yolasite.com/code-test...

If you look at how it looks when you click on a letter in the top bar on the other example page (http://tester3.yolasite.com/code-test...) and you click on a letter in the top bar on the example above, you'll see the difference.

That's just a suggestion, though.

Sincerely,
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Randy,

Your welcome! :)

And, the reason that the Back to Top doesn't work is because the Back to top code isn't in there.

Would you like the "Back to top" link to disappear when you are at the very top of the page and then re-appear when you scroll down, or would you like it to always display?

Here are the examples.

Back to top disappears when at very top of page: http://tester3.yolasite.com/code-test...

Back to top doesn't disappear when at very top of page: http://tester3.yolasite.com/code-test...

Kind regards,
Nathan
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hi Nathan!

I like the disappearing Back to Top. Very slick. What is the code for that?

By the way, do you know if there is a way for me to put all of my menu code into the Edit Custom CSS. What I basically want to be able to do is when I make a change to my nav bar, I can do it once and it will change all of my nav bars in my site instead of having to copy/paste the changed code on every page in my site. I'm just wondering if there is a way to do this?
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi Randy,

What you can do is add the code to the Site Tracking Code box in the Site Properties Window.

You can then add any CSS to the CSS Editor.

Hope this helps,

Andi
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Andi but is the Site Tracking Code box only for headers and footers? I'm a bit lost here.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
If you add the code Nathan gave you to the header section then it will work perfectly.

Andi
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Andi!!

I am going to try that on a test site first. So do I add all the code that Nathan sent me to the header section or do I have to trim out the CSS stuff and put that into the Edit Custom CSS part?
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
You can do either! It doesn't really matter.

Andi
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Bingo!

Thanks Andi!!!

Works great! I tried it on my test site and now I can make global changes to my nav bar once and every page will change accordingly so now I don't have to paste the code on every page!!

One other thing although this is not that major is that I would like the site code area to have the ability to expand so that I can see all the code properly. I could always copy/paste the code into a text editor or something similar, make the changes and paste back.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
I agree that the text area's should be bigger! I always past into Dreamweaver and edit there - because I get the code highlighting which makes it easier.

You could paste into a HTML Widget on another page and edit there if you like the code highlighting facility.

Andi
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
good tip and simple too!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I just noticed something that may force me to keep the code on each page unless there is some kind of workaround.

When you go to my In Transition archives or bennett archives pages you will notice that the nav bar displays to the left the alphabet so that you can navigate easily throughout the page. Only these two pages have this. So if I put this code in the Site manager header section, it will appear on every page with the alphabet part and not only on the two pages mentioned above.

If there is no way to work around this, I guess I can still keep the css part in the custom CSS section.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi Randy,

What you could do is to have your custom navigation on the top 'row', maybe in a darker color background, and then add a second row to the correct archive pages - which has a lighter shade background. Something like:

Add this to the CSS Editor:
#apDiv1 {
position:absolute;
left:0px;
top:0px;
width:100%;
height:25px;
padding-top: 5px;
z-index:1;
background: #803C17;
}

#apDiv1 a:link {
color: #FFFFFF;
text-decoration:none;
padding-left:10px;
padding-right:10px;
padding-top: 5px;
padding-bottom:5px;
height:30px;
}

#apDiv1 a:hover {
color:#000;
border-radius:5px;
background:BF9C8A;
}

#apDiv2 {
position:absolute;
left:0px;
top:30px;
width:100%;
height:25px;
z-index:2;
background:BF9C8A;
padding-top:5px;
}

#apDiv2 a:link {
color: #000;
text-decoration:none;
padding-left:3px;
padding-right:3px;
padding-top: 5px;
padding-bottom:5px;
height:30px;
}

#apDiv2 a:hover {
color:#FFFFFF;
border-radius:5px;
background:803C17;
}

And then add this to the Site Tracking: (Without the <!--- and --->)
<!---
<div id="apDiv1">
<a href="index.php">Home</a>
<a href="#">Bio</a>
<a href="#">Contact</a>
<a href="#">IHTSB</a>
<a href="#">Interviews</a>
<a href="#">Playlists</a>
<a href="#">Radio Shows</a>
<a href="#">Resources</a></div>
--->

And then add this to the Archive Pages: (Without the <!--- and --->)
<!---
<div id="apDiv2">
<font>Search the Archive:</font>
<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>
<a href="#">D</a>
<a href="#">E</a>
<a href="#">F</a>
<a href="#">G</a>
<a href="#">H</a>
<a href="#">I</a>
<a href="#">J</a>
<a href="#">K</a>
<a href="#">L</a>
<a href="#">M</a>
<a href="#">N</a>
<a href="#">O</a>
<a href="#">P</a>
<a href="#">Q</a>
<a href="#">R</a>
<a href="#">S</a>
<a href="#">T</a>
<a href="#">U</a>
<a href="#">V</a>
<a href="#">W</a>
<a href="#">X</a>
<a href="#">Y</a>
<a href="#">Z</a>
</div>
--->

You'll need to change the links accordingly.

Hope this is what you want,

Andi
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
You could then add:

float:centre; or
float:right;

to the #apDiv1 and #ApDiv2 CSS Classes to make the menu's either centred or right aligned.

Andi
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Oh and you'll need to change

position:absolute;

to:

position:fixed;

to make it stay at the top of the page.

Andi
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Andi!

I will give this a try and see what it looks like.

Take care,

Randy
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Randy,

For the pages with the alphabet on it, you will just need to add some code separately, but you'll need to change some of the IDs for it to work and add some extra CSS.

First, put this code into the tracking code of your site: (this one has the back to top part)


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script>
$(document).ready(function(){

// hide #back-top first
$("#back-top").hide();
$("#top-divider").hide();

// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').show();
$("#top-divider").show();
} else {
$('#back-top').hide();
$("#top-divider").hide();
}
});

// scroll body to 0px on click
$('#back-top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
</script>

<div id="topbar">

<span style="float:left;padding-left:7px;">

<a href="#" id="back-top" onclick="return false;">BACK TO TOP</a>

</span>

<span style="float:right;padding-right:7px;">

<a href="http://www.mcran.com" target="_self"><b>HOME</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/bio-test-page.php" target="_self"><b>BIO</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/interviews.php" target="_self"><b>INTERVIEWS</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/playlistsshowtable.php" target="_self"><b>PLAYLISTS</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/2010-2006showstable.php" target="_self"><b>RADIO SHOWS</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/favorite-sites.php" target="_self"><b>RESOURCES</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/contact.php" target="_self"><b>CONTACT ME</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/ihtsb.php" target="_self"><b>IHTSB</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/thebennettarchives.php" target="_self"><b>BENNETT ARCHIVES</b></a>&nbsp;&nbsp;
</span>
</div>



Then, put this on your 2 pages that needs the alphabet:


<script type="text/javascript">
$(document).ready(function(){

// hide #back-top first
$("#back-top").hide();
$("#top-divider").hide();

// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top2').show();
$("#top-divider2").show();
} else {
$('#back-top2').hide();
$("#top-divider2").hide();
}
});

// scroll body to 0px on click
$('#back-top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
</script>
<style type="text/css">
#topbar { display:none; }
#topbar2 {
position:fixed;

border: 0;

padding: 13px;

background-color: #8E7F57; /*Color of bar - if transparent (left blank) it will only display text and may not look right*/

color:white;

top:0;

font-size:120%;

left:0;

width: 100%;

z-index: 100;

margin:0;

padding-right:0;

padding-left:0;
}

#topbar2 a {
/*Link color in top bar*/
color:white;
}
#topbar2 a:hover {
color:white;
text-decoration:underline;
}

<div id="topbar2">

<span style="float:left;padding-left:7px;">

<span style="width:30px;"><a href="#" id="back-top2" onclick="return false;">BACK TO TOP</a><span id="top-divider2">&nbsp;|&nbsp;</span></span>

<a href="#a">A</a>&nbsp;&nbsp;<a href="#b">B</a>&nbsp;&nbsp;<a href="#c">C</a>&nbsp;&nbsp;<a href="#d">D</a>&nbsp;&nbsp;<a href="#e">E</a>&nbsp;&nbsp;<a href="#f">F</a>&nbsp;&nbsp;<a href="#g">G</a>&nbsp;&nbsp;<a href="#h">H</a>&nbsp;&nbsp;<a href="#i">I</a>&nbsp;&nbsp;<a href="#j">J</a>&nbsp;&nbsp;<a href="#k">K</a>&nbsp;&nbsp;<a href="#l">L</a>&nbsp;&nbsp;<a href="#m">M</a>&nbsp;&nbsp;<a href="#n">N</a>&nbsp;&nbsp;<a href="#o">O</a>&nbsp;&nbsp;<a href="#p">P</a>&nbsp;&nbsp;<a href="#q">Q</a>&nbsp;&nbsp;<a href="#r">R</a>&nbsp;&nbsp;<a href="#s">S</a>&nbsp;&nbsp;<a href="#t">T</a>&nbsp;&nbsp;<a href="#u">U</a>&nbsp;&nbsp;<a href="#v">V</a>&nbsp;&nbsp;<a href="#w">W</a>&nbsp;&nbsp;<a href="#x">X</a>&nbsp;&nbsp;<a href="#y">Y</a>&nbsp;&nbsp;<a href="#z">Z</a>&nbsp;&nbsp;

</span>

<span style="float:right;padding-right:7px;">

<a href="http://www.mcran.com" target="_self"><b>HOME</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/bio-test-page.php" target="_self"><b>BIO</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/interviews.php" target="_self"><b>INTERVIEWS</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/playlistsshowtable.php" target="_self"><b>PLAYLISTS</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/2010-2006showstable.php" target="_self"><b>RADIO SHOWS</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/favorite-sites.php" target="_self"><b>RESOURCES</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/contact.php" target="_self"><b>CONTACT ME</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/ihtsb.php" target="_self"><b>IHTSB</b></a>&nbsp;&nbsp;

<a href="http://www.mcran.com/thebennettarchives.php" target="_self"><b>BENNETT ARCHIVES</b></a>&nbsp;&nbsp;
</span>
</div>



Now, those 2 pages will have the alphabet and the rest will only have the bar without the alphabet.

I hope this helps.

Please let me know if this works.

Kind regards,
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I just noticed you don't even need that first really long <script>! I took it out and it still works fine. So just replace the current tracking code with the first code and then put the second code on those 2 pages that need the bar with the alphabet. I think that should work.

Kind regards,
Nathan
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Nathan!!

I will try that out and post back.

Is there a way I can make a copy of my site for test purposes?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Randy,

Unfortunately, there isn't a way to copy a site. You could try it out on a test site though.

Sincerely,
Nathan
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hi Nathan,

I just tried it on my site and it didn't work out too well. I lost for some reason the text widget that contained all my code for my snippets. It wasn't that big of a deal because I just created another text widget and re posted the code.

I'm starting to wonder if I should just go back to pasting the modified menu code on every page, instead of going with the Site tracking code option.

Heck, I was even thinking of going back to the original menu that comes with the theme I am using and using special code for the two pages that need the alphabetization.

What do you think? This might be simpler for me. If I go this way, I have a couple of questions. For instance,

Would I be able to keep some CSS code in the Edit custom CSS area that would allow me to modify the menu that comes with the template I am using?

Maybe I should rethink or explore another way of implementing the nav bar that may be simpler?

I'm just brainstorming so please bear with me.

Thanks so much for your ongoing help and understanding!!!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Randy,

I think the bar looks good on all of your site.

I just thought of a much easier way than what I posted above. You wont even need to have the CSS in the custom CSS, you could just have it all in the tracking code.

Just follow these steps.

1. Remove all of the code regarding the top bar in the tracking code, in the custom CSS, and on the pages with the alphabet on it.

2. Then, paste this into the tracking code box:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script>
$(document).ready(function(){

// hide #back-top first
$("#back-top").hide();
$("#top-divider").hide();

// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').show();
$('#top-divider').show();
} else {
$('#back-top').hide();
$('#top-divider').hide();
}
});

// scroll body to 0px on click
$('#back-top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
</script>

<div id="topbar">

<span style="float:left;padding-left:7px;">

<span style="width:30px;"><a href="#" id="back-top" onclick="return false;">BACK TO TOP</a></span>

<span id="letters" style="display:none;"><span id="top-divider">&nbsp;|&nbsp;</span><a href="#a">A</a>&nbsp;&nbsp;<a href="#b">B</a>&nbsp;&nbsp;<a href="#c">C</a>&nbsp;&nbsp;<a href="#d">D</a>&nbsp;&nbsp;<a href="#e">E</a>&nbsp;&nbsp;<a href="#f">F</a>&nbsp;&nbsp;<a href="#g">G</a>&nbsp;&nbsp;<a href="#h">H</a>&nbsp;&nbsp;<a href="#i">I</a>&nbsp;&nbsp;<a href="#j">J</a>&nbsp;&nbsp;<a href="#k">K</a>&nbsp;&nbsp;<a href="#l">L</a>&nbsp;&nbsp;<a href="#m">M</a>&nbsp;&nbsp;<a href="#n">N</a>&nbsp;&nbsp;<a href="#o">O</a>&nbsp;&nbsp;<a href="#p">P</a>&nbsp;&nbsp;<a href="#q">Q</a>&nbsp;&nbsp;<a href="#r">R</a>&nbsp;&nbsp;<a href="#s">S</a>&nbsp;&nbsp;<a href="#t">T</a>&nbsp;&nbsp;<a href="#u">U</a>&nbsp;&nbsp;<a href="#v">V</a>&nbsp;&nbsp;<a href="#w">W</a>&nbsp;&nbsp;<a href="#x">X</a>&nbsp;&nbsp;<a href="#y">Y</a>&nbsp;&nbsp;<a href="#z">Z</a>&nbsp;</span>

</span>

<span style="float:right;padding-right:7px;">

<a href="http://www.mcran.com" target="_self"><b>HOME</b></a>&nbsp;|&nbsp;

<a href="http://www.mcran.com/bio-test-page.php" target="_self"><b>BIO</b></a>&nbsp;|&nbsp;

<a href="http://www.mcran.com/interviews.php" target="_self"><b>INTERVIEWS</b></a>&nbsp;|&nbsp;

<a href="http://www.mcran.com/playlistsshowtable.php" target="_self"><b>PLAYLISTS</b></a>&nbsp;|&nbsp;

<a href="http://www.mcran.com/2010-2006showstable.php" target="_self"><b>RADIO SHOWS</b></a>&nbsp;|&nbsp;

<a href="http://www.mcran.com/favorite-sites.php" target="_self"><b>RESOURCES</b></a>&nbsp;|&nbsp;

<a href="http://www.mcran.com/contact.php" target="_self"><b>CONTACT ME</b></a>&nbsp;|&nbsp;

<a href="http://www.mcran.com/ihtsb.php" target="_self"><b>IHTSB</b></a>&nbsp;|&nbsp;

<a href="http://www.mcran.com/thebennettarchives.php" target="_self"><b>BENNETT ARCHIVES</b></a>&nbsp;|&nbsp;
</span>
</div>



3. Now, in your Custom CSS, paste in this: (make sure the old CSS isn't there)


#topbar {

position:fixed;

border: 0;

padding: 13px;

background-color: #8E7F57; /*Color of bar - if transparent (left blank) it will only display text and may not look right*/

color:white;

top:0;

font-size:120%;

left:0;

width: 100%;

z-index: 100;

margin:0;

padding-right:0;

padding-left:0;

}

#topbar a {
/*Link color in top bar*/
color:white;
}
#topbar a:hover {
color:white;
text-decoration:underline;
}



4. Now, on the pages you need the letters shown, all you have to do is paste this very short code in an HTML widget:


<script type="text/javascript">
$(document).ready(function() {
$('#letters').show();
});
</script>



That's it! Any page that you put that short code on, the letters will show.

I tested it on my site, and it works. Hopefully it works on yours too.

I hope this helps!

Nathan
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hi Nathan!

How do you figure out all this stuff?? Amazing.

Check out my site now. I followed your instructions above. Now if I want to change the look all I have to do is modify the CSS stuff.

How come when I go to my home page, the font size looks a bit different in the menu?

And also when I click on Contact, the menu moves a bit. Just wondering. Should I change my contact page? I am using Jotform.com for this page. Maybe I can use another service or something else?

I love the new back to top functionality! Thanks!!

www.mcran.com
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hey Randy,

Thanks.

The reason why the bar moves on the Contact Page is because there is no scroll bar on the Contact Page so it moves over. Ont he Contact Page, drag ann HTML widget and paste this in it:

<style type="text/css">
html, body {
overflow:scroll
}
</style>

I see that the font size is different on your homepage. To fix this and make the font size the same through out the whole site, add this piece of CSS into your custom CSS in the { brackets } for #topbar


font-size: 14px !important;



If that is too big, make it 13px

And I'm glad you like the new back to top functionality! It has an animation so it doesn't just jump to the top, because when it jumps to the top without an animation, some users might think they went to another page.

Hope this helps.

Nathan