Loading ...
Sorry, an error occurred while loading the content.

Drag iframes

Expand Messages
  • clw226
    I have two iframes on my page and they are enclosed in divs. In order to capture mouse events over iframes, I overlay them with divs when users start to drag
    Message 1 of 4 , Oct 12, 2007
    • 0 Attachment
      I have two iframes on my page and they are enclosed in divs. In order
      to capture mouse events over iframes, I overlay them with divs when
      users start to drag and hide the divs when users drop them.

      The problem is that when I drag one iframe over another, the dragged
      one always get selected (sometimes the whole document get selected and
      highlighted). However, after I click on the white space outside the
      iframe, the dragged iframe is still highlighted.

      Is there a workaround? Is there a better way to drag and drop iframes?

      -cw
    • dav.glass@yahoo.com
      cw -- Do you have an example that I can see? What browser are you having the issue with? Have you tried using a DDProxy instead of moving the entire iFrame?
      Message 2 of 4 , Oct 12, 2007
      • 0 Attachment
        cw --

        Do you have an example that I can see?
        What browser are you having the issue with?
        Have you tried using a DDProxy instead of moving the entire iFrame?

        Dav
         
        Dav Glass
        dav.glass@...
        blog.davglass.com
         
         
        + Windows: n. - The most successful computer virus, ever. +
        + A computer without a Microsoft operating system is like a dog
        without bricks tied to its head +
        + A Microsoft Certified Systems Engineer is to computing what a
        McDonalds Certified Food Specialist is to fine cuisine +


        ----- Original Message ----
        From: clw226 <clw226@...>
        To: ydn-javascript@yahoogroups.com
        Sent: Friday, October 12, 2007 1:46:16 PM
        Subject: [ydn-javascript] Drag iframes

        I have two iframes on my page and they are enclosed in divs. In order
        to capture mouse events over iframes, I overlay them with divs when
        users start to drag and hide the divs when users drop them.

        The problem is that when I drag one iframe over another, the dragged
        one always get selected (sometimes the whole document get selected and
        highlighted) . However, after I click on the white space outside the
        iframe, the dragged iframe is still highlighted.

        Is there a workaround? Is there a better way to drag and drop iframes?

        -cw


      • clw226
        Dav, Sorry about the late reply. Finally, I got a chance to take a look at this issue again. It turned out that the div I was using to cover my iframe moved to
        Message 3 of 4 , Nov 23, 2007
        • 0 Attachment
          Dav,
          Sorry about the late reply. Finally, I got a chance to take a look
          at this issue again. It turned out that the div I was using to cover
          my iframe moved to slow. I calculated the position of my iframe
          during onDrag and repositioned my div. After I changed the div to
          have absolute position and I didn't see this issue any more...

          However, during my testing, I found something interesting about
          the way ie handle opacity filter. Hopefully, someone can shed some
          light on it. Here's my test (ie 6):

          <html>
          <head>
          <style>
          .draggable {
          position:absolute;
          top:0;
          left:0;
          width:100%;
          height: 200px;
          background-color:green;
          filter: alpha(opacity=67);
          }

          .iframeCover {
          position:absolute;
          top:0;
          left:0;
          width: 100%;
          height: 100%;
          background-color:blue;
          filter: alpha(opacity=20);
          }
          </style>
          </head>


          <body>

          <div class="draggable">
          <iframe src="http://google.com"></iframe>
          <div class="iframeCover"></div>
          </div>

          </body>


          </html>

          When I turned on opacity in draggable and iframeCover, somehow,
          iframe disappeared. I don't see the problem with firefox.

          -cw

          --- In ydn-javascript@yahoogroups.com, dav.glass@... wrote:
          >
          > cw --
          >
          > Do you have an example that I can see?
          > What browser are you having the issue with?
          > Have you tried using a DDProxy instead of moving the entire iFrame?
          >
          > Dav
          >
          > Dav Glass
          > dav.glass@...
          > blog.davglass.com
          >
          > + Windows: n. - The most successful computer virus, ever. +
          > + A computer without a Microsoft operating system is like a dog
          > without bricks tied to its head +
          > + A Microsoft Certified Systems Engineer is to computing what a
          > McDonalds Certified Food Specialist is to fine cuisine +
          >
          > ----- Original Message ----
          > From: clw226 <clw226@...>
          > To: ydn-javascript@yahoogroups.com
          > Sent: Friday, October 12, 2007 1:46:16 PM
          > Subject: [ydn-javascript] Drag iframes
          >
          >
          >
          >
          >
          >
          >
          >
          >
          >
          >
          >
          >
          >
          > I have two iframes on my page and they are enclosed in
          divs. In order
          >
          > to capture mouse events over iframes, I overlay them with divs
          when
          >
          > users start to drag and hide the divs when users drop them.
          >
          >
          >
          > The problem is that when I drag one iframe over another, the
          dragged
          >
          > one always get selected (sometimes the whole document get selected
          and
          >
          > highlighted) . However, after I click on the white space outside
          the
          >
          > iframe, the dragged iframe is still highlighted.
          >
          >
          >
          > Is there a workaround? Is there a better way to drag and drop
          iframes?
          >
          >
          >
          > -cw
          >
          >
          >
          >
          >
          >
          >
          >
          >
          >
          >
          >
          >
          >
          > <!--
          >
          > #ygrp-mkp{
          > border:1px solid #d8d8d8;font-family:Arial;margin:14px
          0px;padding:0px 14px;}
          > #ygrp-mkp hr{
          > border:1px solid #d8d8d8;}
          > #ygrp-mkp #hd{
          > color:#628c2a;font-size:85%;font-weight:bold;line-
          height:122%;margin:10px 0px;}
          > #ygrp-mkp #ads{
          > margin-bottom:10px;}
          > #ygrp-mkp .ad{
          > padding:0 0;}
          > #ygrp-mkp .ad a{
          > color:#0000ff;text-decoration:none;}
          > -->
          >
          >
          >
          > <!--
          >
          > #ygrp-sponsor #ygrp-lc{
          > font-family:Arial;}
          > #ygrp-sponsor #ygrp-lc #hd{
          > margin:10px 0px;font-weight:bold;font-size:78%;line-height:122%;}
          > #ygrp-sponsor #ygrp-lc .ad{
          > margin-bottom:10px;padding:0 0;}
          > -->
          >
          >
          >
          > <!--
          >
          > #ygrp-mlmsg {font-size:13px;font-family:arial, helvetica, clean,
          sans-serif;}
          > #ygrp-mlmsg table {font-size:inherit;font:100%;}
          > #ygrp-mlmsg select, input, textarea {font:99% arial, helvetica,
          clean, sans-serif;}
          > #ygrp-mlmsg pre, code {font:115% monospace;}
          > #ygrp-mlmsg * {line-height:1.22em;}
          > #ygrp-text{
          > font-family:Georgia;
          > }
          > #ygrp-text p{
          > margin:0 0 1em 0;}
          > #ygrp-tpmsgs{
          > font-family:Arial;
          > clear:both;}
          > #ygrp-vitnav{
          > padding-top:10px;font-family:Verdana;font-size:77%;margin:0;}
          > #ygrp-vitnav a{
          > padding:0 1px;}
          > #ygrp-actbar{
          > clear:both;margin:25px 0;white-space:nowrap;color:#666;text-
          align:right;}
          > #ygrp-actbar .left{
          > float:left;white-space:nowrap;}
          > .bld{font-weight:bold;}
          > #ygrp-grft{
          > font-family:Verdana;font-size:77%;padding:15px 0;}
          > #ygrp-ft{
          > font-family:verdana;font-size:77%;border-top:1px solid #666;
          > padding:5px 0;
          > }
          > #ygrp-mlmsg #logo{
          > padding-bottom:10px;}
          >
          > #ygrp-vital{
          > background-color:#e0ecee;margin-bottom:20px;padding:2px 0 8px 8px;}
          > #ygrp-vital #vithd{
          > font-size:77%;font-family:Verdana;font-weight:bold;color:#333;text-
          transform:uppercase;}
          > #ygrp-vital ul{
          > padding:0;margin:2px 0;}
          > #ygrp-vital ul li{
          > list-style-type:none;clear:both;border:1px solid #e0ecee;
          > }
          > #ygrp-vital ul li .ct{
          > font-weight:bold;color:#ff7900;float:right;width:2em;text-
          align:right;padding-right:.5em;}
          > #ygrp-vital ul li .cat{
          > font-weight:bold;}
          > #ygrp-vital a{
          > text-decoration:none;}
          >
          > #ygrp-vital a:hover{
          > text-decoration:underline;}
          >
          > #ygrp-sponsor #hd{
          > color:#999;font-size:77%;}
          > #ygrp-sponsor #ov{
          > padding:6px 13px;background-color:#e0ecee;margin-bottom:20px;}
          > #ygrp-sponsor #ov ul{
          > padding:0 0 0 8px;margin:0;}
          > #ygrp-sponsor #ov li{
          > list-style-type:square;padding:6px 0;font-size:77%;}
          > #ygrp-sponsor #ov li a{
          > text-decoration:none;font-size:130%;}
          > #ygrp-sponsor #nc{
          > background-color:#eee;margin-bottom:20px;padding:0 8px;}
          > #ygrp-sponsor .ad{
          > padding:8px 0;}
          > #ygrp-sponsor .ad #hd1{
          > font-family:Arial;font-weight:bold;color:#628c2a;font-
          size:100%;line-height:122%;}
          > #ygrp-sponsor .ad a{
          > text-decoration:none;}
          > #ygrp-sponsor .ad a:hover{
          > text-decoration:underline;}
          > #ygrp-sponsor .ad p{
          > margin:0;}
          > o{font-size:0;}
          > .MsoNormal{
          > margin:0 0 0 0;}
          > #ygrp-text tt{
          > font-size:120%;}
          > blockquote{margin:0 0 0 4px;}
          > .replbq{margin:4;}
          > -->
          >
        • dav.glass@yahoo.com
          cw -- I might be wrong, but I think that IE s filters behave differently when depending on the render mode.. Try adding a doc type to the page, the iframe will
          Message 4 of 4 , Nov 26, 2007
          • 0 Attachment
            cw --

            I might be wrong, but I think that IE's filters behave differently when depending on the render mode..

            Try adding a doc type to the page, the iframe will show up then..

            Dav
             
            Dav Glass
            dav.glass@...
            blog.davglass.com
             
             
            + Windows: n. - The most successful computer virus, ever. +
            + A computer without a Microsoft operating system is like a dog
            without bricks tied to its head +
            + A Microsoft Certified Systems Engineer is to computing what a
            McDonalds Certified Food Specialist is to fine cuisine +


            ----- Original Message ----
            From: clw226 <clw226@...>
            To: ydn-javascript@yahoogroups.com
            Sent: Friday, November 23, 2007 2:06:22 PM
            Subject: [ydn-javascript] Re: Drag iframes

            Dav,
              Sorry about the late reply. Finally, I got a chance to take a look
            at this issue again. It turned out that the div I was using to cover
            my iframe moved to slow. I calculated the position of my iframe
            during onDrag and repositioned my div. After I changed the div to
            have absolute position and I didn't see this issue any more...

              However, during my testing, I found something interesting about
            the way ie handle opacity filter. Hopefully, someone can shed some
            light on it. Here's my test (ie 6):

            <html>
            <head>
            <style>
            .draggable {
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height: 200px;
            background-color:green;
            filter:  alpha(opacity=67);
            }

            .iframeCover {
            position:absolute;
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            background-color:blue;
            filter:  alpha(opacity=20);
            }
            </style>
            </head>


            <body>

            <div class="draggable">
              <iframe src="http://google.com"></iframe>
              <div class="iframeCover"></div>
            </div>

            </body>


            </html>

            When I turned on opacity in draggable and iframeCover, somehow,
            iframe disappeared. I don't see the problem with firefox.

            -cw

            --- In ydn-javascript@yahoogroups.com, dav.glass@... wrote:
            >
            > cw --
            >
            > Do you have an example that I can see?
            > What browser are you having the issue with?
            > Have you tried using a DDProxy instead of moving the entire iFrame?
            >
            > Dav

            > Dav Glass
            > dav.glass@...
            > blog.davglass.com

            > + Windows: n. - The most successful computer virus, ever. +
            > + A computer without a Microsoft operating system is like a dog
            >    without bricks tied to its head +
            > + A Microsoft Certified Systems Engineer is to computing what a
            >    McDonalds Certified Food Specialist is to fine cuisine  +
            >
            > ----- Original Message ----
            > From: clw226 <clw226@...>
            > To: ydn-javascript@yahoogroups.com
            > Sent: Friday, October 12, 2007 1:46:16 PM
            > Subject: [ydn-javascript] Drag iframes
            >
            >
            >
            >
            >
            >
            >
            >
            >
            >

            >
            >
            >   
            >            I have two iframes on my page and they are enclosed in
            divs. In order
            >
            > to capture mouse events over iframes, I overlay them with divs
            when
            >
            > users start to drag and hide the divs when users drop them.
            >
            >
            >
            > The problem is that when I drag one iframe over another, the
            dragged
            >
            > one always get selected (sometimes the whole document get selected
            and
            >
            > highlighted) . However, after I click on the white space outside
            the
            >
            > iframe, the dragged iframe is still highlighted.
            >
            >
            >
            > Is there a workaround? Is there a better way to drag and drop
            iframes?
            >
            >
            >
            > -cw
            >
            >
            >
            >
            >
            >   

            >
            >   
            >   
            >
            >
            >
            >
            > <!--
            >
            > #ygrp-mkp{
            > border:1px solid #d8d8d8;font-family:Arial;margin:14px
            0px;padding:0px 14px;}
            > #ygrp-mkp hr{
            > border:1px solid #d8d8d8;}
            > #ygrp-mkp #hd{
            > color:#628c2a;font-size:85%;font-weight:bold;line-
            height:122%;margin:10px 0px;}
            > #ygrp-mkp #ads{
            > margin-bottom:10px;}
            > #ygrp-mkp .ad{
            > padding:0 0;}
            > #ygrp-mkp .ad a{
            > color:#0000ff;text-decoration:none;}
            > -->
            >
            >
            >
            > <!--
            >
            > #ygrp-sponsor #ygrp-lc{
            > font-family:Arial;}
            > #ygrp-sponsor #ygrp-lc #hd{
            > margin:10px 0px;font-weight:bold;font-size:78%;line-height:122%;}
            > #ygrp-sponsor #ygrp-lc .ad{
            > margin-bottom:10px;padding:0 0;}
            > -->
            >
            >
            >
            > <!--
            >
            > #ygrp-mlmsg {font-size:13px;font-family:arial, helvetica, clean,
            sans-serif;}
            > #ygrp-mlmsg table {font-size:inherit;font:100%;}
            > #ygrp-mlmsg select, input, textarea {font:99% arial, helvetica,
            clean, sans-serif;}
            > #ygrp-mlmsg pre, code {font:115% monospace;}
            > #ygrp-mlmsg * {line-height:1.22em;}
            > #ygrp-text{
            > font-family:Georgia;
            > }
            > #ygrp-text p{
            > margin:0 0 1em 0;}
            > #ygrp-tpmsgs{
            > font-family:Arial;
            > clear:both;}
            > #ygrp-vitnav{
            > padding-top:10px;font-family:Verdana;font-size:77%;margin:0;}
            > #ygrp-vitnav a{
            > padding:0 1px;}
            > #ygrp-actbar{
            > clear:both;margin:25px 0;white-space:nowrap;color:#666;text-
            align:right;}
            > #ygrp-actbar .left{
            > float:left;white-space:nowrap;}
            > .bld{font-weight:bold;}
            > #ygrp-grft{
            > font-family:Verdana;font-size:77%;padding:15px 0;}
            > #ygrp-ft{
            > font-family:verdana;font-size:77%;border-top:1px solid #666;
            > padding:5px 0;
            > }
            > #ygrp-mlmsg #logo{
            > padding-bottom:10px;}
            >
            > #ygrp-vital{
            > background-color:#e0ecee;margin-bottom:20px;padding:2px 0 8px 8px;}
            > #ygrp-vital #vithd{
            > font-size:77%;font-family:Verdana;font-weight:bold;color:#333;text-
            transform:uppercase;}
            > #ygrp-vital ul{
            > padding:0;margin:2px 0;}
            > #ygrp-vital ul li{
            > list-style-type:none;clear:both;border:1px solid #e0ecee;
            > }
            > #ygrp-vital ul li .ct{
            > font-weight:bold;color:#ff7900;float:right;width:2em;text-
            align:right;padding-right:.5em;}
            > #ygrp-vital ul li .cat{
            > font-weight:bold;}
            > #ygrp-vital a{
            > text-decoration:none;}
            >
            > #ygrp-vital a:hover{
            > text-decoration:underline;}
            >
            > #ygrp-sponsor #hd{
            > color:#999;font-size:77%;}
            > #ygrp-sponsor #ov{
            > padding:6px 13px;background-color:#e0ecee;margin-bottom:20px;}
            > #ygrp-sponsor #ov ul{
            > padding:0 0 0 8px;margin:0;}
            > #ygrp-sponsor #ov li{
            > list-style-type:square;padding:6px 0;font-size:77%;}
            > #ygrp-sponsor #ov li a{
            > text-decoration:none;font-size:130%;}
            > #ygrp-sponsor #nc{
            > background-color:#eee;margin-bottom:20px;padding:0 8px;}
            > #ygrp-sponsor .ad{
            > padding:8px 0;}
            > #ygrp-sponsor .ad #hd1{
            > font-family:Arial;font-weight:bold;color:#628c2a;font-
            size:100%;line-height:122%;}
            > #ygrp-sponsor .ad a{
            > text-decoration:none;}
            > #ygrp-sponsor .ad a:hover{
            > text-decoration:underline;}
            > #ygrp-sponsor .ad p{
            > margin:0;}
            > o{font-size:0;}
            > .MsoNormal{
            > margin:0 0 0 0;}
            > #ygrp-text tt{
            > font-size:120%;}
            > blockquote{margin:0 0 0 4px;}
            > .replbq{margin:4;}
            > -->
            >





            Yahoo! Groups Links

            <*> To visit your group on the web, go to:
                http://groups.yahoo.com/group/ydn-javascript/

            <*> Your email settings:
                Individual Email | Traditional

            <*> To change settings online go to:
                http://groups.yahoo.com/group/ydn-javascript/join
                (Yahoo! ID required)

            <*> To change settings via email:
                mailto:ydn-javascript-digest@yahoogroups.com
                mailto:ydn-javascript-fullfeatured@yahoogroups.com

            <*> To unsubscribe from this group, send an email to:
                ydn-javascript-unsubscribe@yahoogroups.com

            <*> Your use of Yahoo! Groups is subject to:
                http://docs.yahoo.com/info/terms/


          Your message has been successfully submitted and would be delivered to recipients shortly.