Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Browser Specific JavaScript Conflict

    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">
    &nbsp;&nbsp;
    </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>

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,251
    Thanks
    12
    Thanked 340 Times in 336 Posts
    Quote Originally Posted by Dilrukshan View Post
    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?
    this is caused by the non standard event call you make. Firefox and the other standards compliant browsers implement it using the name of the function like
    PHP Code:
    element.onclick callback
    because this makes sure the Event object is passed as sole parameter to the function.
    PHP Code:
    function callback (evt)
    {
        
    // evt holds all the information of the Event
        // which IE provides via window.event
        
    alert(evt.type); // for instance

    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #3
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I would like to know how to do this in javascript.

  • #4
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,251
    Thanks
    12
    Thanked 340 Times in 336 Posts
    how to do what?
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •