How to center the text on marquee height

[satimis]

1) Script Title: Cross Browser marquee

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/cmarquee.htm

3) Describe problem:

Hi folks,

After increasing the marquee height from;

//Specify the marquee's height
var marqueeheight="25px"

to;

//Specify the marquee's height
var marqueeheight="40px"

how to center the text, not staying close to the top of the marquee? TIA


B.R.
satimis

[jscheuer1]

Find this line in the script:

write('<div id="iemarquee" style="position:absolute;left:0px;top:0px"></div>')

Change the highlighted value to whatever you like, ex:

write('<div id="iemarquee" style="position:absolute;left:0px;top:15px"></div>')

[satimis]

Find this line in the script:

write('<div id="iemarquee" style="position:absolute;left:0px;top:0px"></div>')

Change the highlighted value to whatever you like, ex:

write('<div id="iemarquee" style="position:absolute;left:0px;top:15px"></div>')

Hi John,


Thanks for your advice which works for me.

However I have to test the figure (number) to be added before finding the line displayed in the center of the marquee height. Is there a code which allows the line finding its center height automatically after increasing the marquee height? Thanks


B.R.
satimis

[jscheuer1]

Well, the apparent height of a line of text isn't its actual height or the actual height of its container. Thiis is because all text has letters like g that extend below the line, while at the same time there are no letters which extend to the exact top of the line. The amount of space involved is usually slight, so if you aren't looking for perfection, you could do this:

function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
cross_marquee.innerHTML=marqueecontent
cross_marquee.style.top=parseInt(marqueeheight)/2-cross_marquee.offsetHeight/2+'px';
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.left=parseInt(marqueewidth)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualwidth=ns_marquee.document.width
}
lefttime=setInterval("scrollmarquee()",20)
}

If you do need it dead on, use the first method (using trial and error to manually set the top property) from this thread. Or you could try this out, which seemed good in limited testing:

function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
cross_marquee.innerHTML=marqueecontent
cross_marquee.style.border='.0625ex solid red';
cross_marquee.style.top=parseInt(marqueeheight)/2-cross_marquee.offsetHeight/2+'px';
cross_marquee.style.border='none';
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.left=parseInt(marqueewidth)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualwidth=ns_marquee.document.width
}
lefttime=setInterval("scrollmarquee()",20)
}

[satimis]

Well, the apparent height of a line of text isn't its actual height or the actual height of its container. Thiis is because all text has letters like g that extend below the line, while at the same time there are no letters which extend to the exact top of the line. The amount of space involved is usually slight, so if you aren't looking for perfection, you could do this:

function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
cross_marquee.innerHTML=marqueecontent
cross_marquee.style.top=parseInt(marqueeheight)/2-cross_marquee.offsetHeight/2+'px';
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.left=parseInt(marqueewidth)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualwidth=ns_marquee.document.width
}
lefttime=setInterval("scrollmarquee()",20)
}

If you do need it dead on, use the first method (using trial and error to manually set the top property) from this thread. Or you could try this out, which seemed good in limited testing:

function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
cross_marquee.innerHTML=marqueecontent
cross_marquee.style.border='.0625ex solid red';
cross_marquee.style.top=parseInt(marqueeheight)/2-cross_marquee.offsetHeight/2+'px';
cross_marquee.style.border='none';
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.left=parseInt(marqueewidth)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualwidth=ns_marquee.document.width
}
lefttime=setInterval("scrollmarquee()",20)
}

Hi John,


Both codes on your suggestion work here. I think it'll be difficult to justify the difference with eyes.

On your 2nd suggestion what is;

cross_marquee.style.border='.0625ex solid red';

and

cross_marquee.style.border='none';

Do they work in pairs? But there is no red border on the marguee tap. If I need a colored border what code shall I add and where to add? OR just drop the line

cross_marquee.style.border='none';

???


What is

+"px"

on your code?


TIA


B.R.
satimis

[jscheuer1]

If your eye can't see it, don't even worry about it. An ex is the height of a font, or half the height of the font I think. It works out to be about that in any case. By drawing a border around the element that is basically one sixteenth that, it compensates for the differences I mentioned earlier. Then I measure the distance to place the line from the top, and then I remove the border. This has nothing to do with a border around the marquee. If you wanted a border around the inner portion of the marquee (just that scrolling line of text), you could style it in your style section using the #iemarquee selector (requires a basic knowledge of css style), and change the script code to:

cross_marquee.style.border='.0625ex solid red';
cross_marquee.style.top=parseInt(marqueeheight)/2-cross_marquee.offsetHeight/2+'px';
cross_marquee.style.border='';

A px is a pixel, and it, or another unit of measure is required when setting distances of any kind via style in a valid document.

If all of this is over your head, as long as you are happy with what you have, I have no problem with that.

[satimis]

If your eye can't see it, don't even worry about it. An ex is the height of a font, or half the height of the font I think. It works out to be about that in any case. By drawing a border around the element that is basically one sixteenth that, it compensates for the differences I mentioned earlier. Then I measure the distance to place the line from the top, and then I remove the border. This has nothing to do with a border around the marquee. If you wanted a border around the inner portion of the marquee (just that scrolling line of text), you could style it in your style section using the #iemarquee selector (requires a basic knowledge of css style), and change the script code to:

cross_marquee.style.border='.0625ex solid red';
cross_marquee.style.top=parseInt(marqueeheight)/2-cross_marquee.offsetHeight/2+'px';
cross_marquee.style.border='';

A px is a pixel, and it, or another unit of measure is required when setting distances of any kind via style in a valid document.

If all of this is over your head, as long as you are happy with what you have, I have no problem with that.

Noted with thanks


B.R.
satimis