Draggable layers problem (IE only)

rdlebreton

Hi, Folks!

I've been trying to develop my own version of these draggable
layers and I have been limiting myself to IE6...for now. I have
looked at some other examples to get ideas of creating an alternative
to pop-up windows in a web page. The code I have works (sort of).
The problem is that I can move these layers around when I move the
mouse slowly, however, if I move it fast the web browser looses track
of the motion and leaves the layer behind. If anyone has some ideas
or suggestions it would be much appreciated.

TIA

Here's my code:
=============== ========TEST2.H TM============= ===============

<HTML>

<HEAD>
</HEAD>

<script language="JavaS cript" src="DivLayer.j s"></script>
<script language="JavaS cript" src="DateTime.j s"></script>


<div id="Test1" style="position :absolute;width :250px;left:50; top:50;visibili ty:hidden">

<table border=0 width=250 bgcolor=Navy cellspacing=0
cellpadding=5>
<tr>
<td width=100%>
<table border=0 width=100% cellspacing=0 cellpadding=0
height=36>
<tr>

<td id="titleBar" style="cursor:m ove"
width="100%"
onMouseDown="di vTest1.MouseDow n();"
onMouseMove="di vTest1.MouseMov e();"
onMouseUp="divT est1.MouseUp(); "
onMouseOut="div Test1.MouseOut( );">
<font face=Arial color=#FFFFFF>< B><I>Test
1</I></B></font>
</td>

<td id="closeX" style="cursor:h and" valign="top"
onClick="divTes t1.ChangeState( 'hidden');">
<font color=#ffffff size=2 face=arial>
<B>X</B>
</font>
</td>
</tr>
<tr>

<td id="contents" width="100%" bgcolor="#FFFFF F"
style="padding: 4px" colspan="2">

This is where your content goes.<br>
It can be any html code or text.<br>
<input type="checkbox" name="myBox"
value="blah">Bl ah<BR>

</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

<div id="Test2" style="position :absolute;width :400;left:100;t op:100;visibili ty:hidden">


<div id="titleBar"
style="cursor:m ove;padding:1;p osition:absolut e;height:15;wid th:385;left:0;t op:0;background-color:Navy"
onMouseDown="di vTest2.MouseDow n();"
onMouseMove="di vTest2.MouseMov e();"
onMouseUp="divT est2.MouseUp(); "
onMouseOut="div Test2.MouseOut( );">
<font color=#ffffff size=1 face=arial>
<B><I>Test 2</I></B>
</font>
</div>


<div id="closeX"
style="cursor:h and;padding:1;p osition:absolut e;height:15;wid th:15;left:385; top:0;backgroun d-color:Navy"
onClick="divTes t2.ChangeState( 'hidden');">
<font color=#ffffff size=1 face=arial >
<CENTER><B>X</B></CENTER>
</font>
</div>


<div id="contents"
style="position :absolute;width :400;left:0;top :15;padding:2;b ackground-color:White;bor der-width:0
1 1 1;border-color:black;bor der-style:solid">

<select name="lst_Conta ctList" size="1">
<option>DEFAULT </option>
<option>NOBOD Y</option>
<option>SOMEBOD Y</option>
<option>EVERYBO DY</option>
<option>ANYBODY </option>
</select>
<BR>
Blah! Blah!<BR>

</div>
</div>

<div id="Test3" style="position :absolute;width :400;left:150;t op:125;visibili ty:hidden">


<div id="titleBar"
style="cursor:m ove;padding:1;p osition:absolut e;height:18;wid th:382;left:0;t op:0;background-color:Navy"
onMouseDown="di vTest3.MouseDow n();"
onMouseMove="di vTest3.MouseMov e();"
onMouseUp="divT est3.MouseUp(); "
onMouseOut="div Test3.MouseOut( );">
<font color=#ffffff size=2 face=arial>
<B><I>Test 3</I></B>
</font>
</div>


<div id="closeX"
style="cursor:h and;padding:1;p osition:absolut e;height:18;wid th:18;left:382; top:0;backgroun d-color:Navy"
onClick="divTes t3.ChangeState( 'hidden');">
<font color=#ffffff size=2 face=arial style="font-weight:bold"

<center>X</center>
</font>
</div>


<div id="contents"
style="position :absolute;width :400;left:0;top :18;padding:2;b ackground-color:White;bor der-width:0
1 1 1;border-color:black;bor der-style:solid">

Main Entry: <b>byte</b> <BR>
Function: <i>noun</i> <BR>
A group of eight binary digits processed as a unit by a
computer and used especially to
represent an alphanumeric character.<br>

</div>
</div>

<div id="Test4" style="position :absolute;width :400;left:200;t op:150;visibili ty:hidden">


<div id="titleBar"
style="cursor:m ove;padding:1;p osition:absolut e;height:20;wid th:380;left:0;t op:0;background-color:Navy"
onMouseDown="di vTest4.MouseDow n();"
onMouseMove="di vTest4.MouseMov e();"
onMouseUp="divT est4.MouseUp(); "
onMouseOut="div Test4.MouseOut( );">
<font color=#ffffff size=3 face=arial>
<B><I>Test 4</I></B>
</font>
</div>


<div id="closeX"
style="cursor:h and;padding:1;p osition:absolut e;height:20;wid th:20;left:380; top:0;backgroun d-color:Navy"
onClick="divTes t4.ChangeState( 'hidden');">
<font color=#ffffff size=3 face=arial style="font-weight:bold" <center>X</center>
</font>
</div>


<div id="contents"
style="position :absolute;width :400;left:0;top :20;padding:2;b ackground-color:White;bor der-width:0
1 1 1;border-color:black;bor der-style:solid">

Main Entry: <b>byte me</b><BR>
Function: <i>intransiti ve verb</i> <BR>
An expression used by peaved computers (i.e. the host) where
the current line of queries by other
computers (i.e. the client) leads to annoying the host
computer (e.g. network server).<br>

</div>
</div>

<div id="DateTime" style="position :absolute;width :450;left:200;t op:200;visibili ty:hidden">


<div id="titleBar"
style="cursor:m ove;padding:1;p osition:absolut e;height:18;wid th:432;left:0;t op:0;background-color:Navy"
onMouseDown="di vDateTime.Mouse Down();"
onMouseMove="di vDateTime.Mouse Move();"
onMouseUp="divD ateTime.MouseUp ();"
onMouseOut="div DateTime.MouseO ut();">
<font color=#ffffff size=2 face=arial>
<B><I>Pick Time & Date</I></B>
</font>
</div>


<div id="closeX"
style="cursor:h and;padding:1;p osition:absolut e;height:18;wid th:18;left:432; top:0;backgroun d-color:Navy"
onClick="divDat eTime.ChangeSta te('hidden');">
<font color=#ffffff size=2 face=arial style="font-weight:bold" <center>X</center>
</font>
</div>


<div id="contents"
style="position :absolute;width :450;left:0;top :18;padding:2;b ackground-color:White;bor der-width:0
1 1 1;border-color:black;bor der-style:solid">

<center>
<form name='frm_DateT imeSelect'>
<table border='0'>
<tr>
<td width='50%'>
<p align='center'>
<select name='lst_Month ' size='1'></select>
<select name='lst_Date' size='1'></select>
/
<select name='lst_Year' size='1'></select>
</p>
</td>
<td width='25%'>
<p align='center'>
<select name='lst_Hour' size='1'></select>
:
<select name='lst_Minut e' size='1'></select>
</p>
</td>
<td width='25%'>
<p align='center'>
<input type='radio' checked name='chk_AMPM'
value='AM'>AM
<input type='radio' name='chk_AMPM' value='PM'>PM
</p>
</td>
</tr>
<tr>
<td colspan='3'>
<p align='center'>
<input type='button' name='btn_OK' value=' OK
' onClick="divDat eTime.ChangeSta te('hidden');sa veDateTime('frm _DateTimeSelect ');">
</p>
</td>
</tr>
</table>
</form>
</center>

</div>
</div>

<div id="Date" style="position :absolute;width :350;left:150;t op:225;visibili ty:hidden">


<div id="titleBar"
style="cursor:m ove;padding:1;p osition:absolut e;height:18;wid th:332;left:0;t op:0;background-color:Navy"
onMouseDown="di vDate.MouseDown ();"
onMouseMove="di vDate.MouseMove ();"
onMouseUp="divD ate.MouseUp();"
onMouseOut="div Date.MouseOut() ;">
<font color=#ffffff size=2 face=arial>
<B><I>Pick Date</I></B>
</font>
</div>


<div id="closeX"
style="cursor:h and;padding:1;p osition:absolut e;height:18;wid th:18;left:332; top:0;backgroun d-color:Navy"
onClick="divDat e.ChangeState(' hidden');">
<font color=#ffffff size=2 face=arial style="font-weight:bold"

<center>X</center>
</font>
</div>


<div id="contents"
style="position :absolute;width :350;left:0;top :18;padding:2;b ackground-color:White;bor der-width:0
1 1 1;border-color:black;bor der-style:solid">

<center>
<form name='frm_DateS elect'>
<table border='0'>
<tr>
<td width='50%'>
<p align='center'>
<select name='lst_Month ' size='1'></select>
<select name='lst_Date' size='1'></select>
/
<select name='lst_Year' size='1'></select>
</p>
</td>
</tr>
<tr>
<td colspan='3'>
<p align='center'>
<input type='button' name='btn_OK' value=' OK
' onClick="divDat e.ChangeState(' hidden');saveDa te('frm_DateSel ect');">
</p>
</td>
</tr>
</table>
</form>
</center>

</div>
</div>



<script language="JavaS cript">

</script>

<BODY>
<a href="javascrip t:divTest1.Chan geState('visibl e');">Show Test 1
Window</a><BR>
<a href="javascrip t:divTest1.Chan geState('hidden ');">Hide Test 1
Window</a><BR>
<BR>
<a href="javascrip t:divTest2.Chan geState('visibl e');">Show Test 2
Window</a><BR>
<a href="javascrip t:divTest2.Chan geState('hidden ');">Hide Test 2
Window</a><BR>
<BR>
<a href="javascrip t:divTest3.Chan geState('visibl e');">Show Test 3
Window</a><BR>
<a href="javascrip t:divTest3.Chan geState('hidden ');">Hide Test 3
Window</a><BR>
<BR>
<a href="javascrip t:divTest4.Chan geState('visibl e');">Show Test 4
Window</a><BR>
<a href="javascrip t:divTest4.Chan geState('hidden ');">Hide Test 4
Window</a><BR>

<form name="frm_Test" >
<p><a href="javascrip t:divDateTime.C hangeState('vis ible');populate DateTimeLists(' frm_DateTimeSel ect');setDateOu tput('frm_Test. txt_Test1');">E nter
Time & Date: </a>
  <input type="text" name="txt_Test1 " size=30></p><BR>
<p><a href="javascrip t:divDate.Chang eState('visible ');populateDate Lists('frm_Date Select');setDat eOutput('frm_Te st.txt_Test2'); ">Enter
Date: </a>
  <input type="text" name="txt_Test2 " size=30></p><BR>
</form>

<BR>
<BR>
<BR>
<BR>
<BR>
<a href="javascrip t:ArrayElements ()">HTML Elements</a><BR>
<BR>
<iframe name="ifrm_test "></iframe>
</BODY>

</HTML>
=============== =======DIVLAYER .JS============ ==============



=============== =======DATETIME .JS============ ==============

Jul 23 '05 #1

Subscribe Reply

2551

Yann-Erwan Perio

rdlebreton wrote:

The problem is that I can move these layers around when I move the
mouse slowly, however, if I move it fast the web browser looses track
of the motion and leaves the layer behind.
Well, I suppose that if you mouse your pointer too fast, the browser
cannot keep up with positioning the DIV fast enough, so the mouse moves
out of the div... mouseout event -> no more mousemove event:-)

What is usually done is to track the mouse position globally
(document.onmou semove sets global variables indicating the mouse
position), and use this position to drag the element, following the pattern:
- *startDrag*: on document mousedown, you determine if one of the target
in the event flow is to be dragged; if so, you initialize the drag
(pointer, timer) and start the next phase;
- *doDrag*: at regular intervals (using setInterval, or chaining
setTimeout calls), you get the global mouse position and you re-position
your layer accordingly;
- *stopDrag*: on document mouseup, you check whether there was an object
being dragged; if so, you clear the timer (using clearInterval) and
finalize the drag.
Here's my code:

It's far too big! Next time please present a trimmed version,
demonstrating clearly the issue.

Jul 23 '05 #2

A. Nonymous

Thanks for the suggestion, however...

How is it possible to switch the object in document.onmous eup, onmousedown,
onmouse move?

I tried using that method before and it worked great but only for one
DivLayer. I want to have it set up so that multiple DivLayers are on the
screen and can be moved.

Thanks.

A. Nonymous
(Yeah, yeah. I'm using a different identity.)

"Yann-Erwan Perio" <y-*******@em-lyon.com> wrote in message
news:40******** *************** @news.free.fr.. .

rdlebreton wrote:
The problem is that I can move these layers around when I move the
mouse slowly, however, if I move it fast the web browser looses track
of the motion and leaves the layer behind.
Well, I suppose that if you mouse your pointer too fast, the browser
cannot keep up with positioning the DIV fast enough, so the mouse moves
out of the div... mouseout event -> no more mousemove event:-)

What is usually done is to track the mouse position globally
(document.onmou semove sets global variables indicating the mouse
position), and use this position to drag the element, following the

pattern: - *startDrag*: on document mousedown, you determine if one of the target
in the event flow is to be dragged; if so, you initialize the drag
(pointer, timer) and start the next phase;
- *doDrag*: at regular intervals (using setInterval, or chaining
setTimeout calls), you get the global mouse position and you re-position
your layer accordingly;
- *stopDrag*: on document mouseup, you check whether there was an object
being dragged; if so, you clear the timer (using clearInterval) and
finalize the drag.
Here's my code:

It's far too big! Next time please present a trimmed version,
demonstrating clearly the issue.

Jul 23 '05 #3

Yann-Erwan Perio

A. Nonymous wrote:

[about dragging elements]

I tried using that method before and it worked great but only for one
DivLayer. I want to have it set up so that multiple DivLayers are on the
screen and can be moved.

Well, since you're aware of the technique, then it's a conception
problem, but without knowing the specifics of your application, it's
hard to provide you with sound advice.

Here's a simple example (slightly tested only) illustating how to move
several elements at the same time, using (1) a callback function and (2)
a nested structure. However, if your application really requires by
essence to have many objects moved at the same time, then it might be
better to use an intermediate custom-object which would hold the
collection of movable objects, with some possible kind of dynamic
reflection on the HTML.
<style type="text/css">
div{position:ab solute;width:10 0px;height:100p x}
div div{left:50px;t op:50px;}
div#drgdv0{top: 10px;left:10px; background:#f00 }
div#drgdv1{top: 150px;left:150p x;background:#0 f0}
div#drgdv2{top: 300px;left:300p x;background:#0 0f}
</style>

<script type="text/javascript">
var makeDraggable = (function() {
var allDrgObj=[];
var Mouse={x:0, y:0};
var drgObj=null;

function _e(obj, evt, func){
if(obj[evt]) {
obj[evt]=(function(oldf ){
return function(){
func.apply(this , arguments);
return oldf.apply(this , arguments);
}
})(obj[evt]);
} else { obj[evt]=func; }
}

_e(document, "onmousedow n",
function(evt) {
var el;
evt=evt||window .event;
for(var el=evt.target|| evt.srcElement; el;el=el.parent Node){
if(el.nodeType= =1){
for(var ii=0; ii<allDrgObj.le ngth; ii++){
if(el==allDrgOb j[ii].element) {
drgObj=allDrgOb j[ii]
startDrag();
return;
}}}}
}
);

_e(document, "onmouseup" ,
function(evt) { stopDrag(); }
);

_e(document, "onmousemov e",
function(evt) {
evt=evt||window .event;
Mouse.x=evt.cli entX||evt.pageX ||0;
Mouse.y=evt.cli entY||evt.pageY ||0;
}
);

function startDrag(){
setTimeout(
(function(){
var oldx=Mouse.x, oldy=Mouse.y;
return function(){
if(drgObj){
//asumption here: don't nest your draggable divs
//into absolutely positioned elements,
//or more code is required
var el=drgObj.eleme nt,
x=parseInt(el.s tyle.left,10)|| el.offsetLeft|| 0,
y=parseInt(el.s tyle.top,10)||e l.offsetTop||0,
offX=Mouse.x-oldx,
offY=Mouse.y-oldy;

el.style.left=( x+offX)+"px";
el.style.top=(y +offY)+"px";
oldx=Mouse.x;
oldy=Mouse.y;

if(typeof drgObj.callback =="function")
drgObj.callback .call(el,{offse tX:offX,offsetY :offY});

setTimeout(argu ments.callee, 40);
}
}
})(),
40
);
}

function stopDrag(){ drgObj=null; }

return function (el, cbk){
var d=document;
if(el &&
el.nodeType &&
typeof el.parentNode!= "undefined" &&
typeof Function.protot ype!="undefined " &&
typeof Function.protot ype.apply!="und efined") {
allDrgObj.push( {element:el,cal lback:cbk});
}
}
})();
</script>

<div id="drgdv0"><di v style="backgrou nd:#0ff;"></div></div>
<div id="drgdv1"><di v style="backgrou nd:#f0f;"></div></div>
<div id="drgdv2"><di v style="backgrou nd:#ff0;"></div></div>

<script type="text/javascript">
window.onload=f unction(evt){
if(document.get ElementById){
makeDraggable(d ocument.getElem entById("drgdv0 "), mngr);
makeDraggable(d ocument.getElem entById("drgdv1 "), mngr);
makeDraggable(d ocument.getElem entById("drgdv2 "), mngr);
}
}

function mngr(pos){
for(var div, ii=0; ii<3; ii++){
div=document.ge tElementById("d rgdv"+ii);
if(this.id!=div .id){
div.style.left=
((parseInt(div. style.left,10)| |
div.offsetLeft| |0)+ii*pos.offs etX)+"px";
div.style.top=
((parseInt(div. style.top,10)||
div.offsetTop|| 0)+ii*pos.offse tY)+"px";
}
}
}
</script>
Regards,
Yep.

Jul 23 '05 #4

Richard Cornford

rdlebreton wrote:

I've been trying to develop my own version of these draggable
layers and I have been limiting myself to IE6...for now.
IE is probably one of the worst browsers to do primary development on.
It is so error tolerant, and supports so many non-standard methods that
what works on IE often will not work on browsers that are actually
equally dynamic and capable (at least in the area of DHTML). Working
with IE may tend to give the script author the impression that it is a
lot of work to create cross-browser scripts, while developing on a
browser that implements W3C DOM standard methods, but is intolerant of
errors, will usually result in code that also works on IE, along with
all other browsers that implement those methods.
I have
looked at some other examples to get ideas of creating an alternative
to pop-up windows in a web page. The code I have works (sort of).
The problem is that I can move these layers around when I move the
mouse slowly, however, if I move it fast the web browser looses track
of the motion and leaves the layer behind.
Yep has already pointed out why that happens. It is rarely possible to
animate a DIV sufficiently quickly or accurately to genuinely follow
mouse movements over that DIV. Instead following mouse movements at the
document level is more practical, but mouse movements events at that
level are to quick to allow any animation to directly follow from those
events, so the actual animation has to be done by a method that uses
setTimeout or setInterval.
If anyone has some ideas
or suggestions it would be much appreciated.
Well, suggestions must include more considered z-index handling. And
positioning DIVs that contain form controls suffers from the problem
that some controls cannot be covered by a DIV on some browsers, which
suggests that DIVs such controls might some measure to hide those
controls when their DIV is covered with another, so some sort of
detection of overlapping DIVs.

<snip> <script language="JavaS cript" src="DivLayer.j s"></script>
Valid Html 4 requires opening script tags to include a type attribute,
which, once provided, renders the deprecated language attribute
redundant.
<script language="JavaS cript" src="DateTime.j s"></script>
The Date script does not appear to have any baring on the problem.

<snip> <td id="titleBar" style="cursor:m ove" <snip> <div id="titleBar" <snip> <div id="titleBar" <snip>

ID attributes are supposed to be unique within a document.

Recently I have been investigating using DIVs as an alternative for
tasks that are often attempted with new windows (because of the
irresolvable pop-up blocking problem) so I thought I would have a look
at your script, and have a go at re-implementing it to do what you
wanted. The results are to big to post so I have made them available
on-line at:-

<URL: http://www.litotes.demon.co.uk/examp...iWindow_1.html

(Note: don't expect this file to be available for more than a week or
two.)

- it could still stand some more work, and more general testing (I have
only tired it with windows versions of Opera, Mozilla and IE so far) but
might be worth a look.

Richard.

Jul 23 '05 #5

A. Nonymous

1st reaction:

I like what you've done with the code. You've practically done
everything I was trying to do.

2nd reaction:

Wow! That's a lot of code and a lot more about JavaScript that I don't
understand. It is going to take me a while to wrap my brain around that.

This was really for an Intranet site. Everyone here uses IE but
learning the in's and out's of NN and Opera I'm sure is a good thing. I
kept looking and looking at different examples of draggable layers and could
not wrap my brain around them because they were so complex. I kept thinking
there has GOT to be an easier way to do this (e.g. avoiding
document.onMous eMove, etc). Obviously, I was wrong.
"Richard Cornford" <Ri*****@litote s.demon.co.uk> wrote in message
news:c5******** ***********@new s.demon.co.uk.. .

<big snip>

<URL: http://www.litotes.demon.co.uk/examp...iWindow_1.html

(Note: don't expect this file to be available for more than a week or
two.)

- it could still stand some more work, and more general testing (I have
only tired it with windows versions of Opera, Mozilla and IE so far) but
might be worth a look.

Richard.

Jul 23 '05 #6

A. Nonymous

Just as a foot note:

I have added onSelectStart = "return false;" to the titleBar in my example
and that seems to clean up some of the strange behaviour. However, using
the document.onmous emove, up, down, etc. would be the best way to go because
the animation / moving is cleaner...I just can't wrap my brain around that
code right now.

:P

Jul 23 '05 #7

Yann-Erwan Perio

A. Nonymous wrote:

I just can't wrap my brain around that
code right now.

Javascript can be coded in different flavors, and Richard's using at
perfection a particular coding style which is very powerful, but
(unfortunately) not well known - closures-based style. As such, it can
be quite obscure when you encounter it the first time.

An excellent introduction has been written recently by Mr Cornford on
this subject; though quite technical, it is well-structured and
detailed. If I may suggest, give it a chance; you'll probably find some
useful analytical axis which could help you into understanding the
script he's provided.

<URL:http://www.jibbering.c om/faq/faq_notes/closures.html>
Regards,
Yep.

Jul 23 '05 #8

Jim Ley

On Mon, 12 Apr 2004 23:00:19 +0100, "Richard Cornford"
<Ri*****@litote s.demon.co.uk> wrote:

<URL: http://www.litotes.demon.co.uk/examp...iWindow_1.html

(Note: don't expect this file to be available for more than a week or
two.)

Feel free to use http://jibbering.com/2004/04/etc. (as you have a log
in anyway) if you want to maintain things longer, I'm also willing to
create a js.jibbering.co m or similar for maintaining resources.

I feel it's important that things mentioned have legs!

Jim.
--
comp.lang.javas cript FAQ - http://jibbering.com/faq/

Jul 23 '05 #9

Similar topics

6834

document.layers & Mozilla

by: David List | last post by:

I'm having a problem using different properties of the document object in the example javascripts in my textbook with browsers that identify themselves as using the Mozilla engine. One example of these problems is using document.layers. I have Google'd for examples of how to use the document object specifically with Mozilla, but I cannot find anything that explains why my problems occur. Could anyone here see through the included example...

Javascript

2573

Draggable Divs

by: Carl Gilbert | last post by:

Hi I am trying to allow a user of a web site to move an image around the page using draggable Divs. I have tried using some script from http://www.mattkruse.com/. In particular: http://www.mattkruse.com/javascript/dragiframe/ which caters for draggable IFrames. I think I can use the same code for Divs but I have no success as yet.

Javascript

4371

Internet Explorer, createElement and draggable boxes

by: louissan | last post by:

Hi all, I have a slight problem with IE, when everything works with firefox. The goal is to _create_ boxes using the createElement method. And then making it draggable with the mouse. The code example below is still very temporary, but I could not get IE to drag the created box, when firefox does it without problem. Any hints? :)

Javascript

2602

document.all vs. document.layers

by: yawnmoth | last post by:

As I understand it, document.layers only works in Netscape 4+ (ie. it doesn't work in any version of Internet Explorer), while document.all only works in Internet Explorer 4+ (ie. it doesn't work in any version of Netscape). Is that correct? Also, what about document.getElementById? When did Internet Explorer start supporting that and when did Netscape start supporting that? I ask because I'm wondering how necessary doing something...

Javascript

1584

Avoid clicking a draggable hyperlink after onEndDrag

by: Jason | last post by:

I have a hyperlink that is draggable (using Prototype's "new Draggable()" construct). I want to be able to drag the link without actually 'clicking' the link once i end the drag. Is there a way to disable this event? - Jason

Javascript

2373

Help! How many layers in my app?

by: Burt | last post by:

There's an architect at my 200 person company that advocates having many layers in all my C# apps. He wants web services, use case handlers, facade layers, data gateways, etc. When I ask why all this complexity is necessary, he gives me what if scenarios: "What if you ever want to access the business logic with another front end?", for example. These are typical "intranet apps"...one or more screens selecting and updating rows in a...

C# / C Sharp

3255

draggable inside fixed pos. div problem

by: tehweb | last post by:

Background: I have a fixed position div on the bottom om my page. I have then added a dialog-div into this fixed position one. When I bring up the dialog, everything works if the the scrollTop is 0. I can drag it around with no problem. Problem: If the page has scrolled, lets say 100px down (y-axis) and I try to drag the dialog around, a strange effect appair in non-ie browsers. The dialog is instantly moved 100px UP while dragging. as...

Javascript

2266

Draggable DIV to scroll window

by: Sebarry | last post by:

Hi, I have been assigned the daunting task of applying coordinate movements of a draggable div with a small box to the scrolling of the current window. Basically the small box represents the viewable content of the website and the draggable div represents the cursor. As the draggable div is moved around the confines of the small box the current window should scroll to a proportional position. Thus if the user drags the div to the top left...

Javascript

1697

Scriptaculous Draggable Fires Off OnClick Event

by: vunet | last post by:

Hello, I hope this is a right place to ask about Scriptaculous library. I started using draggable and droppables effects for the first time and my draggable is simply initialized as new Draggable(imageObject,{revert:true}); However, my imageObject also has an onClick event which is fired in Firefox every time I drag the image. It surprisingly does not happen in IE6. Can anyone recommend a fix or suggest a workaround for this?

Javascript

8382

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

8717

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

8498

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8600

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

6162

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

4300

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2726

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

1930

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

1600

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General