De-Blur News Updater Please

[Snobound]

Using the News Updater Script
http://www.dynamicdrive.com/dynamicindex2/scroller1.htm

and would like to shut-off the offset in the text as it first prints up. Have tried fooling with it to comment out different lines, obviously, I don't know what I'm doing.

Please, anyone?

Thanks.

[jscheuer1]

You need to supply a background color for the whatsnew id. In the style section, add the part shown in red, give it a foreground color too (use any colors you like, as long as they allow the text to be readable):

<style>
<!--
#whatsnew {background-color:white;color:black;}
#whatsnew a{color:730073;text-decoration:none}
#whatsnew, #temp {font-weight:bold; font-family:Arial}
#whatsnew a:hover{color:red}
-->
</style>

[Snobound]

Thanks John, it worked like a charm.

I also tried to put a static "NEWS:" in front of the rotating lines of text, but no way could I get it on the same line. The rotating text always wrapped down to the next line.

I checked the HTML and I couldn't find any code to cause it?

It must be something fairly easy... yes?

Thanks.

[jscheuer1]

That's a little more complicated. You need to find this bit in the code:

document.write('<span id="whatsnew" style="width:100%;height=10;filter:revealTrans(duration=2,transition=19)">'+tickers[0]+'</span>')

See where I've highlighted it. With a width of 100%, there is no more room for anything else on that line. Change it like:

document.write('<span id="whatsnew" style="width:400px;height=10;filter:revealTrans(duration=2,transition=19)">'+tickers[0]+'</span>')

Just make sure it is still wide enough to fit whatever messages (tickers) you are using. Now, you can put a span tag just before the first opening script tag in the body section and put your intro text in there:

<span style="font-family:arial;font-weight:bold;color:green;background-color:white;">Hi There, Here's the News:</span>
<script language="javascript1.2">
<!--

/*
News Updater Script- 
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/ . . .

You can use whatever style you want for the span, I used one that works well with the demo's style for the tickers and a white background.

[Snobound]

Thank you. Works perfect.

[Snobound]

I'm back...

Am using the de-blur technique on another page, but here, I have a graphic in the background and so don't want a big long white space to telepath how big this news updated field is. I need to be able to see right through it, but de-blurred.

<style>
<!--
#whatsnew {background-color:white;color:black;}
#whatsnew a{color:730073;text-decoration:none}
#whatsnew, #temp {font-weight:bold; font-family:Arial}
#whatsnew a:hover{color:red}
-->
</style>

Is this possible?

Thanks,

Sno-y

[jscheuer1]

This is not actually possible. The default background color for all elements is either inherit, transparent or white. White is the body, all others may be transparent but, some may be inherit which is almost the same. For span, the container for the ticker, it is transparent. So it will do no good to specify:

#whatsnew {background-color:transparent;color:black;}

as that was the default situation that caused the blurring in the first place.

However, we can play around with more than background color, accessing the entire background property of the element to the extent allowed in current css style rules. How we do this to achieve the exact effect you want depends upon how you have your page's background image set, more specifically upon how it renders and the layout of the ticker in relation to the rest of the page, especially the body. As an example, using this style with the default script and markup of the demo, a default body (other than the background) and the ticker as the first thing on the page, the effect is seamless:

<style type="text/css">

body {
background:url('1st.jpg') black;
color:white;
}

#whatsnew {
background:url('1st.jpg') -10px -10px black;
color:white;
}

#whatsnew a {
color:white;
text-decoration:none;
}

#whatsnew, #temp {
font-weight:bold;
font-family:arial, sans-serif;
}

#whatsnew a:hover {
color:red;
}

</style>

You'll notice I've expanded the way the style notation is written. This is the way I normally write style blocks. Makes it easier to see what's happening. The rules in black are the same as the demo's (with one change to the font-family declaration to make it backward and forward compatible, and the link color), just spaced out for easier reading. The red part is what you want to know. I've set the background image for the ticker to the same image as I've set the body's. The -10px -10px adjusts the the horizontal and vertical (x and y) positions (respectively) of the background image for the ticker so that it lines up with that of the background image of the page. If you are using other background image values for your body's background image, some or all of these may need to be applied to the ticker's background image as well to get it to line up. If you are using other than the default margins and padding for the body, these will need to be compensated for in the ticker's background x and/or y. If the ticker isn't the first thing on the left or from the top, its background x and/or y may need to be adjusted to compensate for that as well.

However, if the ticker can appear at various x and y coordinates on the page depending upon resolution and window size, percentage values for its background x and y may work, or not, depending on what it is that makes this condition exist in the first place. As we go down this particular path it is possible to get to a situation where there is no reliable way of insuring that the two backgrounds line up in all situations or, possibly at all.

If your background image is small and repeats and blends well with itself, precise alignment will not be necessary.