Cursor control is a CSS property.
You can change the link hover cursor by adding a style to the head.
Insert this CSS into a placeholder and name it <HEAD>
<style type="text/css"><!--
a:hover {cursor:help}
--></style>
Printable View
Cursor control is a CSS property.
You can change the link hover cursor by adding a style to the head.
Insert this CSS into a placeholder and name it <HEAD>
<style type="text/css"><!--
a:hover {cursor:help}
--></style>
Thanks for the info, Steve. I was even able to change the curse shape to a crosshair ... :eek:
I thought perhaps by placing the code into the placeholder of the Dragging PopUp Object that the cursor change would activate only when the PopUp layer appeared.
My object was to have the cursor change when it was over the invisible Dragging PopUp Object, making it more apparent to the user that the PopUp could be moved.
I came up with the following as workaround; however. If you move the cursor over the triangle, a tooltip appears. The cursor can change to a hand if you hit the sweetspot. It kind of works.
Replace the code in the drag area placeholder with following:
This is the code from the tweak except for the red text added.Quote:
<div onmousedown="my_dragsetup(this);my_dragmd(event)" style="width:100%; height:100%; left:0px; top:0px; background:black; position:absolute;cursor:hand;filter: progid: DXImageTransform.Microsoft.Alpha(opacity=1); -moz-opacity: 0.01; -khtml-opacity: 0.01; opacity: 0.01;"></div>
<script type="text/javascript">//<!--
var my_dragoldmm=0;var my_dragoldmu;var my_dragx;var my_dragy;var my_draglayer;function my_dragparentmm(){};
function my_dragsetup(o)
{
if(!my_dragoldmm){
my_draglayer=o.parentNode.parentNode;
my_draglayer.onmousemove=my_dragparentmm;
my_draglayer=my_draglayer.parentNode;};
};
function my_dragmu()
{
document.onmousemove=my_dragoldmm;
document.onmouseup=my_dragoldmu;
my_dragoldmm=0;
};
function my_dragmm(ev)
{
if(!ev)var e=window.event;else var e=ev;var x=e.pageX;var y=e.pageY;if(!(x||y)){x=e.clientX+document.documen tElement.scrollLeft;y=e.clientY+document.documentE lement.scrollTop;};x-=xr_dx;
my_draglayer.style.left=(x+parseInt(my_draglayer.s tyle.left)-my_dragx)+"px";
my_draglayer.style.top=(y+parseInt(my_draglayer.st yle.top)-my_dragy)+"px";
my_dragx=x;
my_dragy=y;
return(false);
};
function my_dragmd(ev)
{
if(!my_dragoldmm){
if(!ev)var e=window.event;else var e=ev;var x=e.pageX;var y=e.pageY;if(!(x||y)){x=e.clientX+document.documen tElement.scrollLeft;y=e.clientY+document.documentE lement.scrollTop;};x-=xr_dx;
my_dragx=x; my_dragy=y;
my_dragoldmm=document.onmousemove;
my_dragoldmu=document.onmouseup;
if(my_draglayer.style.left=='')my_draglayer.style. left="0px";
if(my_draglayer.style.top=='')my_draglayer.style.t op="0px";
document.onmouseup=my_dragmu;
document.onmousemove=my_dragmm;
return(false);};
};//-->
</script>
I cut and pasted into the PlaceHolder and got the following error:
1. Open your document with dragable popup.
2. Select the drag object (the tweak).
3. Open web properties dialog on the placeholder tab.
4. You'll see the code similar to the one in my previous post.
5. On the third line you'll see this fragment: "style="width:100%;".
6. Insert "cursor:hand;" right before the word "width", so that result will look like this: style="cursor:hand;width:100%;
7. Click Apply button.
Alternatively, you may give me your design and I'll edit it for you.
Works!
Thank you, SIR.
<div onmousedown="my_dragsetup(this);my_dragmd(event)" style="cursor:hand;width:100%; height:100%; left:0px; top:0px; background:black; position:absolute; filter:progid:DXImageTransform.Microsoft.Alpha(opa city=1); -moz-opacity: 0.01; -khtml-opacity: 0.01; opacity: 0.01;"></div>
<script type="text/javascript">//<!--
var my_dragoldmm=0;var my_dragoldmu;var my_dragx;var my_dragy;var my_draglayer;function my_dragparentmm(){};
function my_dragsetup(o)
{
if(!my_dragoldmm){
my_draglayer=o.parentNode.parentNode;
my_draglayer.onmousemove=my_dragparentmm;
my_draglayer=my_draglayer.parentNode;};
};
function my_dragmu()
{
document.onmousemove=my_dragoldmm;
document.onmouseup=my_dragoldmu;
my_dragoldmm=0;
};
function my_dragmm(ev)
{
if(!ev)var e=window.event;else var e=ev;var x=e.pageX;var y=e.pageY;if(!(x||y)){x=e.clientX+document.documen tElement.scrollLeft;y=e.clientY+document.documentE lement.scrollTop;};x-=xr_dx;
my_draglayer.style.left=(x+parseInt(my_draglayer.s tyle.left)-my_dragx)+"px";
my_draglayer.style.top=(y+parseInt(my_draglayer.st yle.top)-my_dragy)+"px";
my_dragx=x;
my_dragy=y;
return(false);
};
function my_dragmd(ev)
{
if(!my_dragoldmm){
if(!ev)var e=window.event;else var e=ev;var x=e.pageX;var y=e.pageY;if(!(x||y)){x=e.clientX+document.documen tElement.scrollLeft;y=e.clientY+document.documentE lement.scrollTop;};x-=xr_dx;
my_dragx=x; my_dragy=y;
my_dragoldmm=document.onmousemove;
my_dragoldmu=document.onmouseup;
if(my_draglayer.style.left=='')my_draglayer.style. left="0px";
if(my_draglayer.style.top=='')my_draglayer.style.t op="0px";
document.onmouseup=my_dragmu;
document.onmousemove=my_dragmm;
return(false);};
};//-->
</script>
===================================
[QUESTIONS:]
Are there other 'words' that can be used for the cursor shape other than "hand" and "crosshair"?
===================================
The browser error-messages that state line numbers of the code are hard to follow since the placeholder doesn't show the corrresponding line numbers. If the placeholder text is copied and then pasted into an editor such as NotePadPlus, would its line numbers necessarily correspond to those reported by your browser error-message?
Options are: [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ]
No. Can't even tell if the error occurred in the placeholders code or somewhere else (for example in the roe.js).Quote:
If the placeholder text is copied and then pasted into an editor such as NotePadPlus, would its line numbers necessarily correspond to those reported by your browser error-message?
All good info to know. Thanks.
Can I ask how to implement the draggable layer? I placed the tweak onto a new page and hit the export button but I didn't see the "Drag Area" layer appear! So then I created a new layer and copied the "Drag Area" tweak placeholder javascript into it but still nothing.
You need a pop-up layer. If you have one, you can place a dragging tweak onto it and when it pops up you'll be able to drag it.