PDA

View Full Version : Prevent line feed in div element



Atom
05-15-2012, 10:13 AM
My home page has a scroll which is placed in a div element to provide a border and background color for the scroll. The scrolling text is loaded from a text file. It's just a message I can create on my desktop which will get automatically uploaded to the server. The div containing the scroll will get bigger depending on the length of the line of text, so I'm just trying to figure out how to suppress the line feed in this one div element.
Here is the page: http://www.siftradingsystems.com/index.html

Here is the php code which fetches the text file:


<?php
$myFile = "clientFTP/marquee.txt";
$fh = fopen($myFile, 'r');
$marquee_text = fgets($fh);
fclose($fh);
?>
<div id="marquee" ><?=$marquee_text?></div>

ApacheTech
05-15-2012, 07:13 PM
My home page has a scroll which is placed in a div element to provide a border and background color for the scroll. The scrolling text is loaded from a text file. It's just a message I can create on my desktop which will get automatically uploaded to the server. The div containing the scroll will get bigger depending on the length of the line of text, so I'm just trying to figure out how to suppress the line feed in this one div element.
Here is the page: http://www.siftradingsystems.com/index.html

Here is the php code which fetches the text file:


<?php
$myFile = "clientFTP/marquee.txt";
$fh = fopen($myFile, 'r');
$marquee_text = fgets($fh);
fclose($fh);
?>
<div id="marquee" ><?=$marquee_text?></div>

Remove the css style: height: 44px; from the #marquee div.

Tried it with Firebug and it's solved the double line issue.

ApacheTech
05-15-2012, 07:17 PM
Firebug might be very useful for you. It's second to none for debugging of sites and quickly identifying snagging problems.

https://addons.mozilla.org/en-US/firefox/addon/firebug/

jscheuer1
05-15-2012, 07:50 PM
Your script is removing the id from that div and wrapping it in two others, and/or there are div tags in the imported text file.

In any case, it (the javascript generated markup) doesn't look like what you have in your post, though the raw source code of the page does. What you're calling a line break seems to come from the script generated height (42px in Opera) of one of the created divs.

This div (highlighted) appears to survive the javascript unscathed:


<div style="line-height: normal; background-color: #F2F5A9; margin-right: 100px; padding-top: 2px; padding-bottom: 2px; border-style: solid; font-weight: bold; font-size: large">
<div id="marquee" >Chart data generation and uploading has been updated for all flash charts. No changes to underlying strategies. (05.14.2012)</div>
</div>

However, the generated source (in Opera again) looks like so (same surviving div highlighted):


<div style="line-height: normal; background-color: #F2F5A9; margin-right: 100px; padding-top: 2px; padding-bottom: 2px; border-style: solid; font-weight: bold; font-size: large">
<div style="display: block-inline; width: 569px; height: 42px; overflow: hidden;">
<div style="float: left; white-space: nowrap; padding-top: 0px; padding-right: 569px; padding-bottom: 0px; padding-left: 569px">Chart data generation and uploading has been updated for all flash charts. No changes to underlying strategies. (05.14.2012)</div>
</div>
</div>

What I did was add a height property of 25px to the surviving div, that seems to fix things (addition red):


<div style="line-height: normal; height: 25px; background-color: #F2F5A9; margin-right: 100px; padding-top: 2px; padding-bottom: 2px; border-style: solid; font-weight: bold; font-size: large">
<div id="marquee" >Chart data generation and uploading has been updated for all flash charts. No changes to underlying strategies. (05.14.2012)</div>
</div>

Atom
05-16-2012, 12:52 AM
Your script is removing the id from that div and wrapping it at least two others, and/or there are div tags in the imported text file.

In any case, it (the javascript generated markup) doesn't look like what you have in your post, though the raw source code of the page does. What you're calling a line break seems to come from the script generated height (42px in Opera at least) of one of the created divs.

This div (highlighted) appears to survive the javascript unscathed:


<div style="line-height: normal; background-color: #F2F5A9; margin-right: 100px; padding-top: 2px; padding-bottom: 2px; border-style: solid; font-weight: bold; font-size: large">
<div id="marquee" >Chart data generation and uploading has been updated for all flash charts. No changes to underlying strategies. (05.14.2012)</div>
</div>

However, the generated source (in Opera again) looks like so (same surviving div highlighted):


<div style="line-height: normal; background-color: #F2F5A9; margin-right: 100px; padding-top: 2px; padding-bottom: 2px; border-style: solid; font-weight: bold; font-size: large">
<div style="display: block-inline; width: 569px; height: 42px; overflow: hidden;">
<div style="float: left; white-space: nowrap; padding-top: 0px; padding-right: 569px; padding-bottom: 0px; padding-left: 569px">Chart data generation and uploading has been updated for all flash charts. No changes to underlying strategies. (05.14.2012)</div>
</div>
</div>

And it looks like there's an extra closing /div tag (red). But that doesn't seem to hurt anything.

What I did was add a height property of 25px to the surviving div, that seems to fix things (addition red):


<div style="line-height: normal; height: 25px; background-color: #F2F5A9; margin-right: 100px; padding-top: 2px; padding-bottom: 2px; border-style: solid; font-weight: bold; font-size: large">
<div id="marquee" >Chart data generation and uploading has been updated for all flash charts. No changes to underlying strategies. (05.14.2012)</div>
</div>

That seems to work quite nicely. Thanks a lot.

The fake marquee js is something recommended to me to allow me to put a text file into a marquee and have it look decent, which it does. I have no idea how it does it though.