Thursday, September 17, 2015

Text running jquery or Jquery marquee


In html language you used to use marquee to create text running on you web page it is very simple and easy to use and modify. but now i would like to show other you instant of this code by using jquery scripting language. it is very powerful and smooth.
you can use it in WordPress and blogger. by follow my step. just copy code and pass it into you code file.






Code:
1.Link jquery file store in Google drive
<script src="https://googledrive.com/host/0B_IbO3cULuN8RFlYLVl5eG96Nnc" type="text/javascript"></script><!-- jquery-1.3.2.min.js -->
  <script src="https://googledrive.com/host/0B_IbO3cULuN8YTVKVUpVa1lLN28" type="text/javascript"></script><!-- jquery.pause.js -->         
  <script src="https://googledrive.com/host/0B_IbO3cULuN8Nkk0NnV2NEdYcXc" type="text/javascript"></script><!-- jquery.marquee.js -->

2.CSS:
<style type="text/css">
.marquee-with-options{
float: right;
    margin-top: 5px;
    width: 800px;
    border: solid thin red;
    float:left;
    overflow:hidden;
}
</style>
3.Javascript & Jquery
<script type="text/javascript">
        document.documentElement.className = 'js';
    </script>
   <script>
            $(function(){
                var $mwo = $('.marquee-with-options');
                $('.marquee').marquee();
                $('.marquee-with-options').marquee({
                    //speed in milliseconds of the marquee
                    speed:9000,
                    //gap in pixels between the tickers
                    gap: 300,
                    //gap in pixels between the tickers
                    delayBeforeStart: 200,
                    //'left' or 'right'
                    direction: 'left',
                    //true or false - should the marquee be duplicated to show an effect of continues flow
                    duplicated: false,
                //on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
                    pauseOnHover: true
                });
            });
        </script>
4.HTML
<div class='marquee-with-options'>
   Monday | Wednesday | Wednesday | Wednesday | Wednesday
 </div>

1 comment: