Revolving text / Text jumps [Archive]

Click to See Complete Forum and Search --> : Revolving text / Text jumps

witch wyzwurd

07-06-2007, 11:15 PM

Hey Forum Members:

I have revolving text on two pages in my website. The revolving text is formed from JavaScript. The text revolves fine, but text jumps up and down. I test my pages using IE, Firefox, and Opera browsers.

Two pages to look at:
www.globallablog.com/ex_1.html
www.globallablog.com/ex_2.html

First, in Firefox or Opera, if you view the "ex_1" page, that's how it should function.

Second, open "ex_1" in IE and you'll notice that when the first 'frame' of the revolving text shows it is about 12 pixels lower than where it should be; the second 'frame' of the revolving text jumps up to where it should be, and when the first 'frame' comes around again it doesn't jump back down, but maintains the correct level. Why? How can this be corrected?

Third, open "ex_2".

The frames of the revolving text area in "ex_2" use different font sizes (coded in css: 12px and 19px). The difference in text size causes the paragraph below the revolving text area to reposition itself (jumps up and down). In IE and Firefox, the degree of jumpiness is about the same, but in Opera it's exagerrated. How do I fix that?...

...I've attempted to even out the revolving text window by trying
different font-sizes and using line-height (css), but to no avail.

...I've attempted using positioning (css), but the browsers act
different in how they interpret it.

The left-side menu is a div with float:left (css). The paragraph above revolving text is a div with float:right (css) (.fs below). Revolving text area is a nestled div (.nd below). Paragraph below revolving text is of the div controlling the paragraph above revolving text area.

CSS for relevant parts of page
.fs
{
margin:0% 2% 0% 0%; padding:5% 0% 0% 0%;
width:73.5%;
float:right;
overflow:hidden;
}

.nd
{margin:0% 0% 0% -7%; color:#ffcc99}

CSS FOR REVOLVING TEXT:
blockquote
{display:none}

blockquote pre
{font-family:"Times New Roman"; font-size:19px; font-style:italic}

blockquote cite
{font-family:"Courier New", monospace; font-size:12px; font-style:normal}

#quote0 {display:block}

Javascript for Revolving Text:
//<![CDATA[
window.onload = setup;
function setup()
{ if (! document.getElementsByTagName) return false;
var elms = document.getElementsByTagName("blockquote");
if (! elms.length) return false;
rotate(elms, 0); }

function rotate(elms, iElm)
{ var currElm = elms[iElm];
var timer = setInterval( swap,3000);

function swap()
{ currElm.style.display = "none";
currElm = elms[++iElm % elms.length];
currElm.style.display = "block"; }
}
//]]>

ray326

07-07-2007, 09:43 AM

I don't see anything about line-height in there. Could it be IE's different ideas about that?

witch wyzwurd

07-07-2007, 01:43 PM

I left the line-height part out since I figured my word would be taken as is. Below, I have included css for line-height and how I create space above revolving text and below it. My idea was to try and even out the revolving text area by figuring out the number of pixels that it takes up vertically.
By adjusting .fn, .fp, .tb, I thought I could pin a size down that when the revolving text is 12px and when it is 19px could share. As you see when you watch "ex_2", the 19px sized text causes the paragraph below it to jump up about a half-of-a-pixel. I want to use 12px and 19px for sure.

.fn
{font-size:49px}

.fp
{font-size:49px}

.tb
{line-height:21px}

WebJoel

07-07-2007, 04:27 PM

This works:

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>Global Lab Log: Home</title>

<meta name="keywords" content="letters, numbers, alphabets, alphanumerical, codes, ciphers, puzzles, riddles, anagrams, word stacks, story codes, hackers, secret to life, answer to life, god, creation, destiny, fate, psychics, mystery, time, time travel, wisdom, magic, magical spells, spells, true spells, real spells, global, lablog, lab, log, mivshek, david mivshek, dave mivshek, global lab log" />
<meta name="description" content="An expanding inventory of alphanumerical solutions to hacked riddles embedded within Human language that unfurl the future and resurrect the past. The goal is to understand the fundamentals and creation of the riddles and their solutions so a new destiny can be designed." />
<meta name="copyright" content="© 2006, David Mivshek" />

<link rel="stylesheet" type="text/css" href="http://www.globallablog.com/main.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

<script language="javascript" src="http://www.globallablog.com/revolve_quote.js"></script>

<base href="http://www.globallablog.com/">

</head>

<body class="ho">

<div class="ti">
www. GlobalLabLog .com
</div>

<div class="ru">
<hr class="li" />
</div>

<div class="me">
<pre>

<span class="sm">Requisites</span>
<a href="firs.html"><span id="blinking">Newcomers</span></a>

<span class="sm">Recognition</span>
<span class="dg">Home</span>
<a href="news.html">News</a>
<a href="pref.html">My Story</a>

<span class="sm">Research</span>
<a href="stack_main.html">Word Stacks</a>

<a href="elem_main.html">Elements Tale</a>
<a href="aac_main.html">A.A.C.</a>

<span class="sm">Relations</span>
<a href="link.html">Links</a>
<a href="emai.html">Email Me</a>
<a href="prod.html">Products</a>
</pre>
</div>

<div class="fs" style="position:relative; width:auto; height:330px;">

<p>
Discover preset secret codes hidden within words and numbers that reveal the
mechanics of destiny, provide moral instruction, and detail the process of creation.
</p>
<div class="nd">
<blockquote id="quote0">
<pre>

(Sir Isaac) Newton… was certain the Bible,
indeed the whole universe,
was a "cryptogram set by the Almighty,"
and wanted to "read the riddle of the Godhead,
the riddle of past and future events
divinely fore-ordained."

<cite> Michael Drosnin, The Bible Code</cite>

</pre>
</blockquote>
<blockquote>
<pre>

Imagine a huge library with every book
about every person, place, thing, and event in the world.
A place that has recorded everything that has happened
since the beginning of time and movement.
This is what we call "The Matrix".

<cite> Jane Dourif, President of Psi Tech</cite>

</pre>
</blockquote>
<blockquote>
<pre>
…(T)hese coincidences are happening
more and more frequently and that, when they do,
they strike us as beyond what would be expected
by pure chance.
They feel destined,
as though our lives had been guided
by some unexplained force.

<cite> James Redfield, Celestine Prophecy</cite>

</pre>
</blockquote>
<blockquote>
<pre>

And He created His universe
with sepher (text),
with sephar (number),
and with sippur (story).

<cite> Sepher Yetzirah (Book of Formation)</cite>

</pre>
</blockquote>
<blockquote>
<pre>

Life, a riddle it seams
an answer, a truth in time.
What would you do if you had the chance
to listen to its rhyme?

<cite> David Mivshek, Living Well</cite>

</pre>
</blockquote>
</div>

<div style="position:absolute; bottom:1px;">
<pre>
What are <a href="index_stack.html">Word Stacks</a>?
What is <a href="index_elem.html">Elements Tale</a>?
What is the <a href="index_aac.html">Anagrammatical Account of Creation (A.A.C.)</a>?
</pre>
</div>

</div>

</body>
</html>
Doesn't explain why it wasn't working, but it fixes the problem. "relative" position the parent container, "absolute" position the child (out-of-document flow), -no more conflict.

witch wyzwurd

07-07-2007, 05:07 PM

P.s.: Concerning WebJoel: I have already changed my css script, so I attempted to revert back to what I had scripted out and apply your request, but the text still jumps in Op. I didn't check F/F. If you obtained a different result in F/F or Op please let me know so I can try to refigure my css as it was then.

I still need help...

I've uploaded an updated version of "ex_1" and "ex_2". They use the same links:
www.globallablog.com/ex_1.html
www.globallablog.com/ex_2.html

In IE the text above and below the revolving text no longer jumps. I did this by applying a height (css) to the div for the revolving text area (.nd). But, of couse, Firefox and Opera could not just play along! F/F and Op seem to not interpret height (css) for the div (.nd). Is there a work around?

Also, I had to apply a -7% to the right margin (css) of the div controlling the text area (.nd) or else the revolving text would not be left-aligned. I can't figure out why. It is a nested div (.nd within .fq), and this is the only reason I can imagine. Is that it? The problem is if screen res. is increased to 1024x768, then revolving text disappears to the left. Can this be fixed?

The green background is to show what the revolving text area includes.

CSS:
.fq
{
margin:4% 2% 0% 0%;
height:100%;
width:73.5%;
float:right;
overflow:hidden;
}

.nd
{background-color:green; margin:0% 0% 0% -7%; height:52.5%; color:#ffcc99}

WebJoel

07-07-2007, 06:27 PM

Yes okay then... hmm. -I got it working great for IE, -that where the links 'jumped around'. -Doesn't this look as if it's a font-size rendering problem(?)

Can you try zero-ing the font-size, then re-stating the font-size, like:

body {font-size:0; font-size:14px;}

I have seen this also to make the font-size:100%; font-size:desired-size;, but not sure if making it "100%" is as leveling as making it "zero" first..

The point is that different browsers have different default font sizes. If a default font-size is not stated, browser-brand "A" might assume 14px while browser-brand "B" might assume 14.5px or something weird... and it all sums up differently browser to browser.

Notably, IE seems to always be a pixel or two 'taller' and/or 'fatter' on the font characters.

Calling "zero" first and then re-stating to desired 'default' size can sometimes cure this. Your script looks as if the text is of different height. I'd also investigate the line-height which I would always state to be "line-height:1.0em;" which makes it 'right' for whatever font-size you are using.

Also, I get angst whenever I see a page using margins in percent.. (and in particular, IE using negative-margin...)

margin:4% 2% 0% 0%;

My screen-width is probably different from yours, thus assuring that we are seeing something different.
width:foo% I can easily live with... 73% of my monitor width is parity with 73% of your screen width, even if the actual viewing widths are numismatically different.

p.s., -I didn't test my fix in Fx, -this was a simple, reliable 'quick fix' with high probability of working x-browser.

witch wyzwurd

07-08-2007, 02:14 PM

Yah, WebJoel, I'm pretty much going crazy from pinning it down in one browser and then having problems in one or two of the others.

I did mention above that the reason the text jumps in "ex_2" is because of different font sizes: 12px and 19px. I was told to adjust the height of this div (.nd) to correct the problem, which worked only in IE. But then came the problem of the left margin with the nestled div (.nd). If I don't adjust the margin with a negative value, then the left-margin of the nestled div is pushed to the right 7%. I don't know why and I know no other way to correct this... any ideas?

I've given up on trying to adjust line-height and such because it doesn't seem to attain desired results. If I can figure out how to get the nestled div to maintain a height in F/F and Op, as I've done in IE, then all I'll have to figure out is the margin issue.

WebJoel

07-08-2007, 07:10 PM

I didn't mean to say or suggest that negative margins are wrong... they can be quite useful. I think you can even use negative margins to 'center' a container or element and not even have a !doctype (IE in "quirks mode"). I just don't like negative margins. :rolleyes:

Anyway, -it is more difficult for me to learn other people's code layout and 'patch it' than to just take their content and re-populate a template that I know will/should work. You have alot of "classes" like ".fq" and ".nd" which work... but are meaningless to me because I do not know what "fq" or "nd" stands for. :confused: That is all part of semantics I suppose.

If you want, I can re-visit this tomorrow and maybe figure something out. I am quite sure that the code will come back a lot shorter but then, -you will have to figure out what I did... :D

witch wyzwurd

07-09-2007, 10:23 PM

In above post, .nd and .fq are defined for you.

I figured out why the margin had to have a neg value. <Blockquote>'s white space. Haven't used blockquote much, so it didn't occur to me at first. So I've decided to get rid of the blockquotes and cites and work with pre and span. Now I'm left with trying to figure out how to pinpoint the pre tag in my javascript so it's called in the Javascript line:

The pre tag is a gandchild of the body tag. Any suggestions?

var elms = document.getElementsByTagName("(?)");