Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: jQuery
hi I want to implement marquee tag in my web from using jquery. in my web from i have text box ,button and div for display the marquee.my requirement is i want to display the textbox text to marquee as sliding after click on button this is my code
 

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
 
<!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>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
    .container { width: 300px;color:Green; font-family:Verdana; font-size:20px;  }
    .ticker { white-space: nowrap; }
 
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            
            $("#btn_click").click(function () {
                var textboxvalue = $("#txtbx_data").val();
                var dis = $("#div_scroll").find(".ticker").text(textboxvalue);
                $('.ticker').each(function () {
 
                var marq = $('<marquee></marquee>').attr({
                    'behavior': 'slide',
                    'scrollamount': 08,
                    'direction': 'left',
                    'width': '100%'
                })
                        $(this).wrap(marq);
                    
                })
            })
        });          
 

    </script>
 
</head>
<body>
<div class="container" id="div_scroll">
 
<div class="ticker"></div>
 
</div>
    <input type="text"  id="txtbx_data" />
 
<input type="button" value="Click" id="btn_click" />
 

</body>
</html>
 

 
in above code for every texbox text one marquee is created and space of marquee is reducing
Posted 11-Oct-12 4:17am
Edited 11-Oct-12 4:19am
v2

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Hi Babu, check this code.
<script type="text/javascript">
        $(document).ready(function () {
            var movingDiv = $("#div_scroll").find(".ticker");
            $("#btn_click").click(function () {
                var textboxvalue = $("#txtbx_data").val();
                movingDiv.text(textboxvalue).animate({ marginLeft: '550' }, 5000, function () { $(this).animate({ marginLeft: '5' }, 5000) });
 
            }) 
        });          
    </script>
  Permalink  
v3
Comments
Babu Voleti at 12-Oct-12 4:13am
   
in the above the division is moving first right then come left I want only sliding from right please i tried it it working perfect on two side how to get only from one side

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 6,725
1 OriginalGriff 6,696
2 CPallini 5,315
3 George Jonsson 3,589
4 Gihan Liyanage 2,650


Advertise | Privacy | Mobile
Web02 | 2.8.140921.1 | Last Updated 11 Oct 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100