Marquee tag is not working in google chrome to stop on mouseover [Resolved]

Posted by Poojawadekar under ASP.NET on 3/3/2016 | Points: 10 | Views : 1316 | Status : [Member] | Replies : 3
I have write below code to stop marquee on mouseover. It's working f9 in firefox but not working in google chrome.
Here is code.

<marquee id="marqueeHeader" behavior="alternate" direction="left" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);" loop="true" width="100%" bgcolor="transparent" runat="server">
<asp:label id="lblHeaderAnnoucement" runat="server" cssClass="marqueeText" Text ="Hi" />
</marquee>




Responses

Posted by: A2H on: 3/3/2016 [Member] [MVP] Silver | Points: 50

Up
0
Down

Resolved
However you should consider using other options as marguee is depreciated. One option is to use Jquery Marquee plugins. You can use the liscroll Jquery plug in to create a Marquee control in your page.
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html
Complete Code:
<html>

<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link href="http://cdn.imnjb.me/libs/liscroll/1.0/li-scroller.css"
rel="stylesheet" type="text/css" />
<script src="http://cdn.imnjb.me/libs/liscroll/1.0/jquery.li-scroller.1.0.js"></script>
<script>
$(function () {
//Call the below function to create a Marquee
$("ul#marquee").liScroll();
});
</script>
<style>
.tickercontainer
{
height: 40px !important;
}
</style>
</head>
<body>
<form runat="server" id="form1">
<ul id="marquee">
<li>
Text to scroll
</li>
</ul>
</form>
</body>
</html>


Sample Demo : http://jsbin.com/cojefoximi/edit?html,output

Thanks,
A2H
My Blog

Poojawadekar, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Professionaluser on: 3/3/2016 [Member] [MVP] Bronze | Points: 25
Posted by: A2H on: 3/3/2016 [Member] [MVP] Silver | Points: 25

Up
0
Down
Use start and stop function to stop scrolling on mouse over like below

<marquee id="marqueeHeader" behavior="alternate" direction="left" onmouseover="this.stop()" onmouseout="this.start()" loop="true" width="100%" bgcolor="transparent" runat="server">
<asp:label id="lblHeaderAnnoucement" runat="server" cssClass="marqueeText" Text ="Hi" />
</marquee>


Thanks,
A2H
My Blog

Poojawadekar, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response