Jquery marquee is not working with bootstrap frame work

StackOverflow https://stackoverflow.com/questions/21110703

Question

I'm using bootstrap frame work to make my web site. and I need to make a auto scrolling (marquee) area in my site. I followed this guide to do that.

URL: http://www.givainc.com/labs/marquee_jquery_plugin.cfm

but this is not working as I expect. no errors are showing on fire bug console.

header.php:

<!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>
        <meta name="viewport" content="width=device-width", initial-scale=1.0">
            <link href = "css/bootstrap.min.css" rel =  "stylesheet"/>
            <link href = "css/styles.css" rel = "stylesheet"/>


<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src = "js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery.marquee.js"></script>
                           <script type="text/javascript">
$(document).ready(function (){
  $("#marquee").marquee();
});
</script>

    </head>
    <body>

index.php: (im including the header.php file in index.php )

<?php require_once('heder.php'); ?>


                <ul id="marquee" class="marquee">
                    <li>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a nulla. 
                        Lorem ipsum dolor sit amet, consectetuer.</li>
                    <li>
                        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
                        inceptos hymenaeos. Fusce tincidunt adipiscing,massa. Class aptent taciti 
                        sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
                        Fusce tincidunt adipiscing,massa.
                    </li>
                </ul>


            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <div style="background-image:url('images/tab1.png'); background-repeat: no-repeat; padding: 10px; height: 60px; margin: 0 auto;">
                    <div style="font-size:24px;margin-left: 10px; font-weight: normal; font-family: sans-serif; color: #fff;">
                        Our Expertise
                    </div>
                </div>
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

CSS Style: (in my style sheet i have a class call marquee like this)

ul.marquee {
display: block;
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
position: relative;
overflow: hidden;
width: 500px;
height: 22px;
background-color: #f2f2ff;
border: 1px solid #08084d;
}

can any one help me on this?

Thank you.

Was it helpful?

Solution

you have to include remaining css

ul.marquee li {
    /* required styles */
    position: absolute;
    top: -999em;
    left: 0;
    display: block;
    white-space: nowrap; /* keep all text on a single line */

    /* optional styles for appearance */
    font: 14px Arial, Helvetica, sans-serif;
    padding: 3px 5px;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top