Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts

    PSN Store Style Moving Text?

    If anyone has a PS3 and goes on the PSN Store (PlayStation Network Store) you will get what i'm on about but does anyone know how I can use Javascript to make it when a user hovers over some text it will marquee but start from the position it was?

    Example:
    A string like this wouldn't need to have a scroller when someone hovers over it: Hello but a string like this would: Hello i'm bob and how are you doing today?. as it would be to long to stay on one line in the div.

    So what i'm looking for is some sort of marquee that doesn't start off screen but calls the current texts position and then starts from there and then reverse itself to go from right-to-left to left-to-right when it's at the end of the text and when the user's mouse moves off the text it will just go back to its normal state.

    All text's which are to big for the div will have three dots added to the end and once mouse over they will go and the full text will start to scroll.

    If anyone can help me this would be a massive help.

    Thank You
    DJCMBear
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #2
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Anyone Please Help?
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,595
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    It's not easy to get the natural width of some text. That is, to find out by how much the text would overflow the <div>. The rest of what you ask is easy.

    Hmmm....

    I wonder if we could have an invisible <div> that contains the same text but is *not* constrained by size. So then we could find its width and apply that as the text width for the constrained div.

    Alternative idea: If we used a fixed-width font (i.e., Courier) in a fixed size, we could calculate the width of the text. (*Could* do that for proportional fonts, but you'd need the width of each character and then have to add up all the widths.)

    Would you be happy with Courier??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,595
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    By the by, most cell phones have this same behavior when fixed width fields on them are used. Here's the "darn" part: Cell phones will *tell* you the width of the text, even when using proportional fonts. You have to wonder why browsers can't/won't.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    i dont mind what the text looks like i was just wanting to no how i could go abount doing this.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,595
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    Okay...this isn't perfect.

    And if you use a different font size you'll have to work out the number of pixels width per character yourself. But it seems to function.

    Code:
    <!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>
    <style type="text/css">
    div.textScroll {
        position: relative;
        font-family: courier, fixed-width;
        font-size: 12px;
        height: 20 px;
        padding: 3px;
        border: solid brown 1px;
        color: brown;
        background-color: wheat;
        overflow: hidden;
        white-space: nowrap;
    }
    </style>
    <script type="text/javascript">
    // empirically, the space needed for x characters is x*8 - 2 pixels
    // why the -2 I have no idea.
    
    var divtext = [];
    var curScroll = null;
    var scroller = null;
    var startat = 0;
    var TICK = 200;
    
    function setUpScrolling( )
    {
        var divs = document.getElementsByTagName("div");
        for ( var d = 0; d < divs.length; ++d )
        {
            var div = divs[d];
            if ( div.className == "textScroll" )
            {
                var txt = div.innerHTML;
                var spc = parseInt(div.style.width);
                var maxc = Math.floor( (spc + 2) / 8 );
                if ( txt.length > maxc )
                {
                    divtext[ div.id ] = txt;
                    div.innerHTML = txt.substring(0,maxc-3) + "...";
                    div.onmouseover = function() { startScroll(this); }
                    div.onmouseout  = stopScroll;
                }
            }
        }
    }
    function startScroll(div)
    {
        div.innerHTML = divtext[div.id];
        curScroll = div;
        startat = 0;
        scroller = setTimeout( sLeft, TICK );
    }
    function stopScroll()
    {
        if ( scroller != null ) clearTimeout(scroller);
        scroller = null;
        div = curScroll;
        curScroll = null;
        if ( div == null ) return; // ??? how???
        var txt = divtext[div.id];
        var spc = parseInt(div.style.width);
        var maxc = Math.floor( (spc + 2) / 8 );
        div.innerHTML = txt.substring(0,maxc-3) + "...";
    }
    function sLeft( )
    {
        div = curScroll;
        if ( div == null ) return; // ??? how???
        var spc = parseInt(div.style.width);
        var maxc = Math.floor( (spc + 2) / 8 );
        ++startat;
        var txt = divtext[div.id].substring(startat);
        if ( txt.length < maxc )
        {
            sRight( );
            return;
        }
        div.innerHTML = txt;
        setTimeout( sLeft, TICK );
    }
    function sRight( )
    {
        div = curScroll;
        if ( div == null ) return; // ??? how???
        var spc = parseInt(div.style.width);
        var maxc = Math.floor( (spc + 2) / 8 );
        --startat;
        if ( startat < 0 )
        {
            sLeft( );
            return;
        }
        var txt = divtext[div.id].substring(startat);
        div.innerHTML = txt;
        setTimeout( sRight, TICK );
    }
    </script>
    </head>
    <body onload="setUpScrolling()">
    <div id="scroll1" class="textScroll" style="width: 126px;" >
    Now is the time to come to the aid of the party.
    </div>
    <br/><br/>
    And then another one:
    <div id="scroll2" class="textScroll" style="width: 382px;" >
    Once upon a midnight dreary, while I pondered weak and weary, came a knocking at my chamber door.
    </div>
    
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    You are amazing thank you, just a few questions, is there any way I could make the function slide from one character to the other smothly as right now it jumps from one to the other by letter? I was thinking jQuery's animation slide could help me out with this but I don't know where abouts to put it and the socond question is when changing the font do I have to change the * 8 to like *7 etc or do I have to change the - 2 to something else as i'm not sure which one to change to make font arial to work.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,595
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    As I told you, if you use a proportional font (which virtually all fonts are...Courier and only one or two others are not), then EACH CHARACTER has a different width. And so you would need (a) a table of widths, by character and (b) a loop that calculates the total width by adding up the individual character widths.

    It's *TONS* more complicated. At least 3 or 4 times more work.

    The "jump" that you see is because when the string is cut off to start such that it now starts with a space, HTML tosses out the space. I can think of a handful of fixes for that.

    I did say there are surely better answers, but I don't have time to explore all of them.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    thanks for your help just one last question how do i personaly find the width of each letter as i can make a mysql table to store them in. as i am good at alot of codes and can do the loop you said about i just dont no where to start with finding the width on the letter.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,595
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    Here's another possibility:
    Code:
    <!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>
    <style type="text/css">
    div.textScroll {
        position: relative;
        height: 20 px;
        padding: 3px;
        border: solid brown 1px;
        color: brown;
        background-color: wheat;
        overflow: hidden;
    }
    span.textHolder {
        position: relative;
        left: 0px; top: 0px;
        font-family: arial, helvetica, sans-serif;
        font-size: 12px;
        white-space: nowrap;
    }
    </style>
    <script type="text/javascript">
    var curScroll = null;
    var scroller = null;
    var startat = 0;
    var TICK = 20;
    
    function setUpScrolling( )
    {
        var divs = document.getElementsByTagName("div");
        for ( var d = 0; d < divs.length; ++d )
        {
            var div = divs[d];
            if ( div.className == "textScroll" )
            {
                var span = div.getElementsByTagName("span")[0];
                var dw   = parseInt(div.style.width);
                var spw  = span.offsetWidth;
                if ( spw > dw )
                {
                    div.onmouseover = function() { startScroll(this); }
                    div.onmouseout  = stopScroll;
                }
            }
        }
    }
    function startScroll(div)
    {
        curScroll = div;
        startat = 0;
        scroller = setTimeout( sLeft, TICK );
    }
    function stopScroll()
    {
        if ( scroller != null ) clearTimeout(scroller);
        scroller = null;
        div = curScroll;
        curScroll = null;
        if ( div == null ) return; // ??? how???
        var span = div.getElementsByTagName("span")[0];
        span.style.left = "0px";
    }
    function sLeft( )
    {
        div = curScroll;
        if ( div == null ) return; // ??? how???
        ++startat;
        var dw   = parseInt(div.style.width);
        var span = div.getElementsByTagName("span")[0];
        var spw  = span.offsetWidth;
        if ( dw + startat > spw )
        {
            sRight();
            return;
        }
        span.style.left = (-startat) + "px";
        scroller = setTimeout( sLeft, TICK );
        
    }
    function sRight( )
    {
        div = curScroll;
        if ( div == null ) return; // ??? how???
        --startat;
        if ( startat < 0 )
        {
            sLeft( );
            return;
        }
        var span = div.getElementsByTagName("span")[0];
        span.style.left = (-startat) + "px";
        scroller = setTimeout( sRight, TICK );
        
    }
    </script>
    </head>
    <body onload="setUpScrolling()">
    <div class="textScroll" style="width: 150px;">
    <span class="textHolder">
    Now is the time to come to the aid of the party.
    </span>
    </div>
    <br/><br/>
    And then another one:
    <div class="textScroll" style="width: 320px; left: 200px;">
    <span class="textHolder">
    Once upon a midnight dreary, while I pondered weak and weary, came a knocking at my chamber door.
    </span>
    </div>
    <br/><br/>
    And finally:
    <div class="textScroll" style="width: 100px;">
    <span class="textHolder">
    Short stuff.
    </span>
    </div>
    </body>
    </html>
    This allows the use of any font, any widths. The only thing it doesn't do is put in the "..." at the end. I think I know a sneaky way to do that, if it's truly important, though it could well still cut a character off in the middle.

    Oh, wth. Let's try that, too. Back in a bit.

    As for the character widths: I haven't the foggiest notion how to find individual character widths. Hmmm...well, maybe I do. You could use JS to get them, by starting from a base string within a <span> and then tacking on each character, in succession, to see by how much the width grew.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    thanks i will try that new code out abit later as its 5 past 2 in the morning here lol
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,595
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    ** I DID IT! **
    Code:
    <!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>
    <style type="text/css">
    div.textScroll {
        position: relative;
        height: 20 px;
        padding: 3px;
        border: solid brown 1px;
        color: brown;
        background-color: wheat;
        overflow: hidden;
    }
    span.textHolder {
        position: relative;
        left: 0px; top: 0px;
        font-family: arial, helvetica, sans-serif;
        font-size: 12px;
        white-space: nowrap;
    }
    </style>
    <script type="text/javascript">
    var curScroll = null;
    var fullText = [];
    var shortText = [];
    var scroller = null;
    var startat = 0;
    var TICK = 20;
    var MINSIZE = 10;
    
    function setUpScrolling( )
    {
        var divs = document.getElementsByTagName("div");
        for ( var d = 0; d < divs.length; ++d )
        {
            var div = divs[d];
            if ( div.className == "textScroll" )
            {
                var span = div.getElementsByTagName("span")[0];
                var dw   = parseInt(div.style.width);
                var spw  = span.offsetWidth;
                if ( spw > dw )
                {
                    var txt = fullText[div.id] = span.innerHTML;
                    for ( var n = txt.length-1; n > MINSIZE; --n )
                    {
                        span.innerHTML = txt.substring(0,n) + "...";
                        var w = span.offsetWidth;
                        if ( w < dw )
                        {
                            shortText[div.id] = span.innerHTML;
                            break;
                        }
                    }
                    div.onmouseover = function() { startScroll(this); }
                    div.onmouseout  = stopScroll;
                }
            }
        }
    }
    function startScroll(div)
    {
        curScroll = div;
        startat = 0;
        var span = div.getElementsByTagName("span")[0];
        span.innerHTML = fullText[div.id];
        scroller = setTimeout( sLeft, TICK );
    }
    function stopScroll()
    {
        if ( scroller != null ) clearTimeout(scroller);
        scroller = null;
        div = curScroll;
        curScroll = null;
        if ( div == null ) return; // ??? how???
        var span = div.getElementsByTagName("span")[0];
        span.style.left = "0px";
        span.innerHTML = shortText[div.id];
    }
    function sLeft( )
    {
        div = curScroll;
        if ( div == null ) return; // ??? how???
        ++startat;
        var dw   = parseInt(div.style.width);
        var span = div.getElementsByTagName("span")[0];
        var spw  = span.offsetWidth;
        if ( dw + startat > spw )
        {
            sRight();
            return;
        }
        span.style.left = (-startat) + "px";
        scroller = setTimeout( sLeft, TICK );
        
    }
    function sRight( )
    {
        div = curScroll;
        if ( div == null ) return; // ??? how???
        --startat;
        if ( startat < 0 )
        {
            sLeft( );
            return;
        }
        var span = div.getElementsByTagName("span")[0];
        span.style.left = (-startat) + "px";
        scroller = setTimeout( sRight, TICK );
        
    }
    </script>
    </head>
    <body onload="setUpScrolling()">
    <div id="scroll1" class="textScroll" style="width: 150px;">
    <span class="textHolder">
    Now is the time to come to the aid of the party.
    </span>
    </div>
    <br/><br/>
    And then another one:
    <div id="scroll2" class="textScroll" style="width: 440px; left: 200px; height: 28px; color: red;">
    <span class="textHolder" style="font-family: Times New Roman; font-size: 18px; font-weight: bold;">
    Once upon a midnight dreary, while I pondered weak and weary, came a knocking at my chamber door.
    </span>
    </div>
    <br/><br/>
    And finally:
    <div id="unimportant" class="textScroll" style="width: 100px;">
    <span class="textHolder">
    Short stuff.
    </span>
    </div>
    </body>
    </html>
    I was starting to do something much more complex when I had one of those "DOH" moments. Voila.

    How's that?
    Last edited by Old Pedant; 06-16-2010 at 02:30 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    852
    Thanks
    173
    Thanked 94 Times in 94 Posts
    Hi Old Pedant

    I've been following this thread with interest

    I wasn't too keen on the reverse txt flow on original version --- ie flow back right to left --- was actually (and I tried myslef with no luck) going to ask how to just make it go back and restart ....

    but yr latest version is just awesome:-) works really smoothe

    superb
    this is one i'll be keeping:-) (plus yr credit of course)
    hahahhaa

    low tech

  • #14
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    omg thank you so much this has helped me so much =). Works like a dream.

    Why does it work when I have the width on the div iteslf but when I put it in the css it doessn't seem to want to scroll?
    Last edited by DJCMBear; 06-16-2010 at 03:14 AM.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,595
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    Quote Originally Posted by DJCMBear View Post
    Why does it work when I have the width on the div iteslf but when I put it in the css it doessn't seem to want to scroll?
    A "feature" of how CSS works. A dumbass feature in my opinion, but...

    xxx.style.width is not defined if the width is given only in the <style> section. But it works fine if you do it in the <div style="...">.

    Not my choice. Sorry.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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