Hello All,
I'm working on a image slider, which will slide left to right and vice versa on mouser over event. the images are dynamically loaded from the database using ASP script. I use mootools.svn.js for the sliding implementation. and Ajax to pass the
id of the image to another page as a query string. this is implemented in a
Code:
onclick="getValue('<%= id %>')"
event.
This works fine in IE8, but when I test in Firefox 3.6 and Chrome the
onclick event doesn't work. when I
comment the mootools.svn.js, the
onclick event get fired. what causes this. is their any solution?
now my development has come to a grinding halt because of this. Please help
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient"%>
<%@ Import Namespace="System.Configuration" %>
<%@ Import Namespace="System.Collections" %>
<%@ Import Namespace="System.Web" %>
<%@ Import Namespace="System.Web.Security" %>
<%@ Import Namespace="System.Web.UI" %>
<%@ Import Namespace="System.Web.UI.WebControls" %>
<%@ Import Namespace="System.Web.UI.WebControls.WebParts" %>
<%@ Import Namespace="System.Web.UI.HtmlControls" %>
<%@ Import Namespace="System.Text" %>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="slider.aspx.cs" Inherits="slider" %>
<!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 runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
//GETS THE IMAGE ID FROM
function getValue(val)
{
alert(val);
showHint(val);
//document.form1.newval1.value=val;
}
var xmlhttp=null; //xmlhttp variable
//Ajax
function make_httpRequest(){
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not support XMLHTTP!");
return;
}
}
//Bind the query string as a URL
function request_url(url){
url=url+"&sid="+Math.random();
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
}
//BIND THE IMAGE ID TO THE QUERY STRING VARIABLE TO THE url variable
function showHint(val)
{
make_httpRequest();
var url = "Test.aspx?prodid="+ val;
request_url(url);
}
</script>
<style type="text/css">
<!--
.slider_con {
height: 125px;
width: 889px;
}
.slider_content {
height: 125px;
width: 889px;
float: left;
overflow: hidden;
position:relative;
}
.image_con {
float: left;
height: 125px;
width: 23px;
}
#maiin_container{
width: 889px;
height: 125px;
overflow: auto;
overflow-x:hidden;
overflow-y:hidden;
float:left;
}
.main-content {
width: 889%;
height: 125px;
}
.section{
margin:0 0 0 0;
float:left;
}
-->
</style>
<style type="text/css">
<!--
a {
font-family: sans-serif;
font-size: 15px;
color: #666767;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #666767;
}
a:hover {
text-decoration: none;
color: #666767;
}
a:active {
text-decoration: none;
color: #666767;
}
.style1 {
color: #A0A0A0
}
-->
</style>
</head>
<script type="text/javascript" src="mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var scroll2 = new Scroller('maiin_container', {area: 100, velocity: .12});
// container
$('maiin_container').addEvent('mouseover', scroll2.start.bind(scroll2));
$('maiin_container').addEvent('mouseout', scroll2.stop.bind(scroll2));
});
</script>
<body>
<form id="form1" runat="server">
<div class="slider_con">
<div class="image_con section">
</div>
<div id="maiin_container">
<div class="main-content" id="Div1">
<%
string connectionString = @"Data Source=174.37.88.148;Initial Catalog=lalith_db;uid=lalitha_jew;pwd=lalitha1234";
string query = "SELECT prod_id, prod_itemcode, prod_title, prod_thumbnailimage FROM dbo.products WHERE cat_id="+22+"and prod_topfive = 'yes' UNION SELECT prod_id, prod_itemcode, prod_title, prod_thumbnailimage FROM dbo.products WHERE cat_id="+22+"and prod_topfive = 'no'";
SqlConnection conn = new SqlConnection(connectionString);
try
{
conn.Open();
}
catch(Exception ex)
{
conn.Close();
}
SqlDataReader reader;
using (reader = new SqlCommand(query, conn).ExecuteReader())
{
if (reader.HasRows)
{
while (reader.Read())
{
int id = reader.GetInt32(reader.GetOrdinal("prod_id"));
string prod_itemcode = reader.GetString(reader.GetOrdinal("prod_itemcode"));
string prod_title = reader.GetString(reader.GetOrdinal("prod_title"));
string prod_thumbnailimage = reader.GetString(reader.GetOrdinal("prod_thumbnailimage"));
int i = prod_thumbnailimage.IndexOf('b');
string url = prod_thumbnailimage.Substring(i);
%>
<div class="section">
<a href="#" id='<%= id %>' onclick='getValue(<%= id %>)'><img id="img" src='<%= url %>' alt='<%= prod_title %>' /></a>
</div>
<% }
}
} %>
</div>
</div>
</div>
</form>
</body>
</html>
Before you post, read our: 
Browser Specific JavaScript Conflict
