[Rails-spinoffs] Prevent IE background image reloading onscriptaculous drag

[Andrzej Rumpfelt]

Hi,
strange.. I tested it in IE and with the first example it was reloading images constantly while dragging.. like it had to reload on every position of this div.
Then I changed the code to your fix and now, while dragging, it's ok but when I stop moving the div, then it reloads images.. but why ?

is there a way to avoid this reloading ? I had this problem before in one of my app but couldn't solve it for IE

greeitngs,
Andrzej Rumpfelt

  ----- Original Message ----- 
  From: Leon Chevalier 
  To: rails-spinoffs at lists.rubyonrails.org 
  Sent: Thursday, April 27, 2006 12:12 PM
  Subject: [Rails-spinoffs] Prevent IE background image reloading onscriptaculous drag


  Hi all,

  Just a quick FYI to anyone who may have this problem, as I was writing a
  question and then solved it myself. The prob:

  I have a draggable div that uses a dropshadow as follows:

  <script src="http://demo.script.aculo.us/scripts/prototype.js"
  type="text/javascript"></script>
  <script src="http://demo.script.aculo.us/scripts/effects.js"
  type="text/javascript"></script>
  <script src="http://demo.script.aculo.us/scripts/dragdrop.js"
  type="text/javascript"></script>
  <script src="http://demo.script.aculo.us/scripts/controls.js"
  type="text/javascript"></script>
  <style type="text/css">
  <!--
  #innerDiv {
  cursor:move;
  }

  .dropShadow {
  padding-right:2px;
  background:url(http://www.abomb.co.uk/images/bgr_drop_right_trans.gif)
  no-repeat right top;
  }

  .dropShadowBottom {
  width:100%;
  height:2px;
  background:url(http://www.abomb.co.uk/images/bgr_drop_bottom_trans.gif)
  no-repeat left bottom;
  margin-bottom:-2px;
  position:relative;
  }
  -->
  </style>

  <div id="dragMe" class="dropShadow" style="position: absolute; width: 165px;
  left: 28px; top: 28px; z-index: 100;">
  <div id="innerDiv"> 
  Hello drag me about
  </div>
  <div class="dropShadowBottom"></div>
  </div>
  <script type="text/javascript">new Draggable('dragMe')</script>

  Everything is great in Firefox, but in IE the background image re-loads on
  drag. Even if you set "Check for newer version of stored pages" to "Never"
  the mouse pointer constantly shows re-loading. 

  The workaround is to make sure that the element which is draggable doesn't
  have the background image - set the background image to a child div instead:

  <div id="dragMe" style="position: absolute; width: 165px; left: 28px; top:
  28px; z-index: 100;">
   <div class="dropShadow">
  <div id="innerDiv"> 
  Hello drag me about
  </div>
  <div class="dropShadowBottom"></div>
   </div>
  </div>

  Hope this helps someone.

  Leon

  _______________________________________________
  Rails-spinoffs mailing list
  Rails-spinoffs at lists.rubyonrails.org
  http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://wrath.rubyonrails.org/pipermail/rails-spinoffs/attachments/20060427/f230d6f3/attachment-0001.html