0

hi guys i have tried to put stock market ticker i got but when i used the marquee its working then i also used simple scroll and put in php usercake usermanagement system but its not working is anything wrong with my code...

thanks in advance..

the code i used

<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">

<style type='text/css'>
    .infowrapper {
        width: 100%;
        overflow: hidden;
    }

    #stockinfo {
        width: 800%;
        font-size: 10px;
    }

    .stockWrapper {
        display: block;
        padding-top: 5px;
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 100;
        float: left;
        margin-left: 20px;
        font-size: 12px;
    }

    .stockSymbol {
        font-weight: 100;
    }

    .stockPrice {
        font-weight: 100;
        color: red;
    }

    .stockChange {
        font-weight: 100;
        color: green;
    }

    .stockTime {
        font-weight: 600;
        color: grey;
        font-size: smaller;
        display: hidden;
    }

    h2 {
        font-size: 10px;
    }

    p {
        margin-bottom: 10px;
    }

    .symbol {
        float: left;
        margin-right: 3px;
    }

    .symbol .name {
        display: block
    }

    .symbol.up {
        background: #70DB70
    }

    .symbol.up .change {
        color: green
    }

    .symbol.down {
        background: #f7cdc2
    }

    .symbol.down .change {
        color: red
    }
</style>



<script type='text/javascript'>
    //<![CDATA[
</script>
<script type="text/javascript">
    (function($) {
        $(function() {
            $("#scroller").simplyScroll();
        });
    })(jQuery);
</script>
<script type="text/javascript" src="js/company.js"></script>
<script type="text/javascript" src="js/jquery.simplyscroll.js"></script>
<link rel="stylesheet" href="js/jquery.simplyscroll.css" media="all" type="text/css">

<ul id="scroller" style="background-color:#CCC; height:30px;">
    <li style="height:30px;">
        <div id="stockinfo">
        </div>
    </li>
</ul>
mukhesh attaluri
  • 11
  • 6

2 Answers2

0

The simple answer is not to use it if you want to have valid documents that render consistently and don’t annoy the heck out of the reader.

http://www.sitepoint.com/web-foundations/marquee-html-element/

There have been efforts in the past to make this part of the CSS 3 standard, but even they have been dropped.

This Note replaces a draft specification for CSS features relating to a “marquee” effect. The specification is no longer being developed.

http://www.w3.org/TR/css3-marquee/

This specification has been discontinued. The CSS Working Group did not find enough implementations and at this point no further work is planned.

Community
  • 1
  • 1
connexo
  • 53,704
  • 14
  • 91
  • 128
0

Not sure that you still need an answer on this, but it might help others.

Whatever we can say about marquees, there are plenty of people still using them so it's worth giving a usable answer.

The tag should be forgotten; it is not supported globally since it was proprietary and never became a standard (like Connexo wrote), but you can use css to make your text move in any direction you want.

Here is what I use in the CSS file

/************************************************************************/
/* Marquee with text moving from right to left                          */
/************************************************************************/
/* Make it a MarqueeTxt */
.MarqueeTxt {
    width: 900px; /* What I call the see-through window below */
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    font-size:2.5em;

    color:#CD3245;
    text-shadow: #000 1px 1px 0;
    box-sizing: border-box;

    /* This is to make the text move across the see-through window */
    /* in 20 seconds (=> scrolling speed) */
    animation: MarqueeTxt 20s linear infinite;
    -webkit-animation: MarqueeTxt 20s linear infinite;

    /* This is for Safari that tends to render jerky marquees */
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);

}

/* This is to stop scrolling when hovering over the text */
.MarqueeTxt:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused
}

/* Make it move */
/* If omitted, IE will not scroll the text  */
@keyframes MarqueeTxt {
    0% { text-indent: 26em }
    100% { text-indent: -55em }

}

/* Make it move */
/* If omitted, Chrome (possibly FF) will not scroll the text  */
@-webkit-keyframes MarqueeTxt {
    0% { text-indent: 26em }
    100% { text-indent: -55em }

}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

In PHP or HTML, you typically use it in <p> tag like this <p class="MarqueeTxt">The text you want to display</p>.

You will have to play with the width: 900px;, text-indent: 26em and text-indent: -55em if you want to make sure that your text scrolls flows correctly from right to left and reappears after just a few seconds, once it has fully scrolled.

I've tested this on IE, Safari, Chrome, and FF.

I hope this will help

Alex Tanner
  • 21
  • 4