IE Problem

dc_jt · February 7, 2008

Hi

Does anyone know why the script below wont work in IE? The images dont drag at all.

<?php
session_start();
?><!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>
<link href="../assets/css/main.css" rel="stylesheet" type="text/css" />
<link href="../assets/css/menu.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="../assets/js/RollOver.js" type="text/javascript"></script>
<script language="JavaScript" src="../assets/js/menu.js" type="text/javascript"></script>

<script type="text/javascript" src="/assets/js/prototype.js"></script>
<script type="text/javascript" src="/assets/js/scriptaculous.js"></script>
<script type="text/javascript" src="/assets/js/image.js"></script>

</head>
<style type="text/css">

#cookie_box {
	margin: 15px;
	width:210px;
	height:293px;

}

#cookie_box.hoverclass {
	background: #FOO;
}

</style>
<body><div id="wrapper">
<?php include($_SERVER['DOCUMENT_ROOT']."/_includes/pagetop.inc.php")?>  
<div id="page-content">
    	<div id="header">
    	<div id="basket-wrap">
        <?php include($_SERVER['DOCUMENT_ROOT']."/_includes/basket.inc.php")?>
        </div>
        <?php include($_SERVER['DOCUMENT_ROOT']."/_includes/toplinks.inc.php")?>      
	<?php include($_SERVER['DOCUMENT_ROOT']."/_includes/header.inc.php")?></div>
        <div id="left-col">
        	<?php include($_SERVER['DOCUMENT_ROOT']."/order-online/sidenav.inc.php")?>
    </div>
        <div id="right-col">
          <img src="../assets/images/titles/treatboxes.gif" alt="" width="165" height="29" border="0" class="pagetitle" />
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tortor. Etiam non mauris. Fusce a libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</p>
        <div id="shop-wrap">
       	  <div id="treatboxes-tabs-wrap"><a href="recommended-treatboxes.php"><img src="../assets/images/shop/tab-recomendedbox-inactive.gif" border="0" alt="Recommended Treatboxes" /></a><a href="build-your-own.php"><img src="../assets/images/shop/tab-buildyourown-active.gif" border="0" alt="Build Your Own Treatbox" /></a></div>
            <div id="treatbox-ordering-wrap">
            	<div id="treatbox-ordering">
                	<div id="order-box-top"><a href="#"><img src="../assets/images/shop/help-button.gif" alt="Help" class="help-button" border="0" /></a><p>Choose your box size below and then drag and drop cookies into your Treatbox.  </p></div>
                    <div id="order-box-one">
                    <ul>
                    	<li class="box-size-active"><a href="#"><img src="../assets/images/shop/box-size-13.gif" border="0" alt="13" /></a></li>
                        <li class="box-size-inactive"><a href="#"><img src="../assets/images/shop/box-size-18.gif" border="0" alt="18" /></a></li>
                        </ul>
                        <h1>Choose your Treatbox size</h1>
                    </div>
                    <div id="items"></div>
                    
                    <div id="order-box-two">
                    	<div class="drop-treatbox-wrap">
                        	<ul id="treatbox-tabs">
                            	<li class="active-tab"><a href="#">Cookie View</a></li>
                                <li class="inactive-tab"><a href="#">List View</a></li>
                                </ul>
                                <div id="cookie_box">
                                </div> <!-- cookie_box -->
                                <div class="treatbox-drop-area">
                                <!--<img src="../assets/images/cookies2.gif" />-->
                                </div>
                                 
                                <script type="text/javascript">
                               
	//<![CDATA[
	Droppables.add("cookie_box",{accept:'items', hoverclass:'hoverclass',onDrop:function(element)
	{new Ajax.Updater('cookie-start-tray', '/scripts/cookies.scr.php',{asynchronous:true,evalScripts:true,method:'post',parameters:'id=' + encodeURIComponent(element.id)}),get_image_by_id('cookie_box', element.id)}
	} )
	//]]>
</script>

                                <div class="remaining-cookies-box">Remaining spaces in your Treatbox:  00</div>
                            </div><!--treatbox-wrap-->
                    <h1>Choose your Cookies</h1>
                    <div id="cookie-start-tray" class="cookie-start-tray">
                    <img id="1" class="items"  src="../assets/images/cookie.gif" />
                    <script type="text/javascript">
				//<![CDATA[
				new Draggable("1", {revert:'true'})
				//]]>
				</script>
                    <img id="2" class="items"  src="../assets/images/cookie.gif" />
                    <script type="text/javascript">
				//<![CDATA[
				new Draggable("2", {revert:'true'})
				//]]>
				</script>
                    <img id="3" class="items"  src="../assets/images/cookie.gif" />
                    <script type="text/javascript">
				//<![CDATA[
				new Draggable("3", {revert:'true'})
				//]]>
				</script>
                    </div>                    
                    <div class="cookie-delete-box"> </div>
                    </div><!--orderboxtwo-->
                    <div id="order-box-three"><a href="#"><img src="../assets/images/shop/add-to-basket-button.gif" alt="Add to your basket" border="0" class="basket-button" /></a><h1>Complete your Order</h1><p>If you are happy with your choices click ‘Add to basket’</p></div>
              </div>
          </div><!--treatbox-ordering-wrap-->
        </div><!--shopwrap-->
    </div><!--rightcol-->
  </div>
    <?php include($_SERVER['DOCUMENT_ROOT']."/_includes/footer.inc.php")?>
</div><!--wrapper-->
</body>
</html>

Thanks

haku · February 7, 2008

Hard to say - the huge majority of your javascript is linked through external files that we can't see.

I.E. isn't actually javascript, its jscript. It has a whole lot of overlap with javascript, but unfortunately that overlap isn't 100%, which makes it a pain in the ass to program for. If you have microsoft office, I suggest installing the script debugger that comes packaged with office (you will have to pop the CD in, choose 'add components' (or something like that), then dig through the choices and find the script debugger. You then have to enable it in your preferences, but once you do the bugger stops when it hits something it doesn't like in the script. It doesn't tell you how to fix it, but at least you know where the problem is.

dc_jt · February 7, 2008

Thanks for your reply.

Here is the image.js file, the other two should be fine:

function get_image_by_id(subject, item_id)
{
var oSub 	= $(subject);
var oItem	= $(item_id);

var sImage = oItem.src;

oSub.innerHTML += "<img src=" + sImage + " id=" + item_id + " />";
}

Thanks

Sign In

IE Problem

Recommended Posts

dc_jt

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

dc_jt

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information