Results 1 to 5 of 5

Thread: Prevent line feed in div element

  1. #1
    Join Date
    May 2011
    Posts
    49
    Thanks
    17
    Thanked 1 Time in 1 Post

    Default Prevent line feed in div element

    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:

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

  2. #2
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

    Quote Originally Posted by Atom View Post
    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:

    Code:
    <?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.

  3. #3
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

    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/

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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):

    Code:
    <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):

    Code:
    <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>
    Last edited by jscheuer1; 05-16-2012 at 03:29 AM. Reason: English Usage - later, discovered there was no extra /div tag
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    ApacheTech (05-15-2012)

  6. #5
    Join Date
    May 2011
    Posts
    49
    Thanks
    17
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by jscheuer1 View Post
    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:

    Code:
    <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):

    Code:
    <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):

    Code:
    <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.

  7. The Following User Says Thank You to Atom For This Useful Post:


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •