subject:"\[svg\-developers\] Magic\: SVG drag of Element using jquery svg is most simple"

Re: [svg-developers] Magic: SVG drag of Element using jquery svg is most simple

2008-10-08 Thread Jake Beard

Cool. You might want to take a look at how dojox.gfx does it, for example,
here:

http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/gfx/demos/circles.html

Important code:

function makeCircleGrid(itemCount){
var minR = 10, maxR = surface_size.width / 3;
for(var j = 0; j < itemCount; ++j){
var r = getRandSkewed(minR, maxR),
cx = getRand(r, surface_size.width  - r),
cy = getRand(r, surface_size.height - r),
shape = surface.createCircle({cx: cx, cy: cy, r: r})
.setFill(randColor(true))
.setStroke({color: randColor(true), width: 
getRand(0, 3)})
;
*new dojox.gfx.Moveable(shape);*
}
}


So you basically just instantiate a new shape, and use it to instantiate a
new Moveable. Pretty clean design, I think,

Jake

On Wed, Oct 8, 2008 at 8:56 AM, narendra sisodiya <
[EMAIL PROTECTED]> wrote:

> On Wed, Oct 8, 2008 at 4:48 PM, ddailey <[EMAIL PROTECTED]> wrote:
>
> >   Take a look at
> > http://srufaculty.sru.edu/david.dailey/svg/makeDragDrop.svg
> >
> > It doesn't use any external .js, but has relatively simple code and seems
> > to
> > work pretty much everywhere.
> >
> > David
> >
> > - Original Message -
> > From: "narendra sisodiya" <[EMAIL PROTECTED]
> 
> > >
> > To: >
> > Cc: "Keith Wood" <[EMAIL PROTECTED] 40virginbroadband.com.au>
> > >
> > Sent: Wednesday, October 08, 2008 1:46 AM
> > Subject: [svg-developers] Magic: SVG drag of Element using jquery svg is
> > most simple
> >
> > Here is a small code segment which give me highest programmability in
> svg,
> > This need jquery and its svg plugin , It will work in firefox
> > Please comment on it,, how can i make it better, and cross browser.
> > ---
> > you need these files
> > jquery.js , jquery.svg.js , jquery.svg.css
> > 
> > most surprisable thing about the code, --
> > I am calling external function directly and I am using jquery object
> > $('#mycircle') where id belong to svg element,
> > This small code give me very surprise ,, and it is working,,
> > --
> > 
> > 
> > 
> > 
> > 
> > @import "svg/jquery.svg.css";
> > .canvas1
> > {
> > position: relative;
> > height: 400px;
> > width: 600px;
> > background: #cc;
> > border: #ff;
> > }
> >
> > 
> >
> > 
> >
> > var start_drag = null ;
> > var offsetx =null ;
> > var offsety =null ;
> >
> > $(document).ready(function() {
> >
> > $('#svgintro').svg({onLoad: drawIntro});
> >
> > });
> >
> > function now_drag(evt){
> > if (start_drag==1){
> > $('#mycircle').attr('cx').baseVal.value = evt.layerX - offsetx;
> > $('#mycircle').attr('cy').baseVal.value = evt.layerY - offsety;
> > }
> > }
> >
> > function start_dragging(evt){
> > start_drag = 1;
> > offsetx = evt.layerX - $('#mycircle').attr('cx').baseVal.value ;
> > offsety = evt.layerY - $('#mycircle').attr('cy').baseVal.value ;
> >
> > }
> > function stop_dragging(evt){
> > start_drag = 0;
> >
> > }
> >
> > function drawIntro() {
> > var svg = $('#svgintro').svg('get');
> > svg.describe("Example script01 - invoke an ECMAScript function from an
> > onclick event");
> > svg.circle(300, 150, 50, {
> > onmousedown:"start_dragging(evt)",
> > onmouseup:"stop_dragging(evt)",
> > onmousemove:"now_drag(evt)",
> > id:"mycircle",
> > fill:"red"});
> > svg.text(300, 280, "Drag It",
> > {'font-family':"Verdana",
> > 'font-size':20,
> > 'text-anchor':"middle"
> > });
> > }
> > 
> > 
> > 
> > this line of text is useless like my friends
> > 
> > 
> > 
> >
> > --
> > ,???[ Narendra Sisodiya ]??f
> > http://narendra.techfandu.org
> > http://www.lug-iitd.org
> > "[ +91-93790-75930 ]??.
> >
> > [Non-text portions of this message have been removed]
> >
> > 
>

Re: [svg-developers] Magic: SVG drag of Element using jquery svg is most simple

2008-10-08 Thread narendra sisodiya

On Wed, Oct 8, 2008 at 4:48 PM, ddailey <[EMAIL PROTECTED]> wrote:

>   Take a look at
> http://srufaculty.sru.edu/david.dailey/svg/makeDragDrop.svg
>
> It doesn't use any external .js, but has relatively simple code and seems
> to
> work pretty much everywhere.
>
> David
>
> - Original Message -
> From: "narendra sisodiya" <[EMAIL PROTECTED]
> >
> To: >
> Cc: "Keith Wood" <[EMAIL PROTECTED]
> >
> Sent: Wednesday, October 08, 2008 1:46 AM
> Subject: [svg-developers] Magic: SVG drag of Element using jquery svg is
> most simple
>
> Here is a small code segment which give me highest programmability in svg,
> This need jquery and its svg plugin , It will work in firefox
> Please comment on it,, how can i make it better, and cross browser.
> ---
> you need these files
> jquery.js , jquery.svg.js , jquery.svg.css
> 
> most surprisable thing about the code, --
> I am calling external function directly and I am using jquery object
> $('#mycircle') where id belong to svg element,
> This small code give me very surprise ,, and it is working,,
> --
> 
> 
> 
> 
> 
> @import "svg/jquery.svg.css";
> .canvas1
> {
> position: relative;
> height: 400px;
> width: 600px;
> background: #cc;
> border: #ff;
> }
>
> 
>
> 
>
> var start_drag = null ;
> var offsetx =null ;
> var offsety =null ;
>
> $(document).ready(function() {
>
> $('#svgintro').svg({onLoad: drawIntro});
>
> });
>
> function now_drag(evt){
> if (start_drag==1){
> $('#mycircle').attr('cx').baseVal.value = evt.layerX - offsetx;
> $('#mycircle').attr('cy').baseVal.value = evt.layerY - offsety;
> }
> }
>
> function start_dragging(evt){
> start_drag = 1;
> offsetx = evt.layerX - $('#mycircle').attr('cx').baseVal.value ;
> offsety = evt.layerY - $('#mycircle').attr('cy').baseVal.value ;
>
> }
> function stop_dragging(evt){
> start_drag = 0;
>
> }
>
> function drawIntro() {
> var svg = $('#svgintro').svg('get');
> svg.describe("Example script01 - invoke an ECMAScript function from an
> onclick event");
> svg.circle(300, 150, 50, {
> onmousedown:"start_dragging(evt)",
> onmouseup:"stop_dragging(evt)",
> onmousemove:"now_drag(evt)",
> id:"mycircle",
> fill:"red"});
> svg.text(300, 280, "Drag It",
> {'font-family':"Verdana",
> 'font-size':20,
> 'text-anchor':"middle"
> });
> }
> 
> 
> 
> this line of text is useless like my friends
> 
> 
> 
>
> --
> ,???[ Narendra Sisodiya ]??f
> http://narendra.techfandu.org
> http://www.lug-iitd.org
> "[ +91-93790-75930 ]??.
>
> [Non-text portions of this message have been removed]
>
> 
>
> -
> To unsubscribe send a message to:
> [EMAIL PROTECTED]
> -or-
> visit http://groups.yahoo.com/group/svg-developers and click "edit my
> membership"
> Yahoo! Groups Links
>
>  
>


Yes, I have already seen this demo code,,
I wanted to use power of jQuery and it is visible by code itself,
second this , i like do not want things in svg files, having all functions
in javascript file of html doc is very useful to do task , because my
application will be LAMP based final rendered image i have to show in a div
container.
-- 
[ Narendra Sisodiya ]
 http://narendra.techfandu.org
 http://www.lug-iitd.org
[ +91-93790-75930 ]


[Non-text portions of this message have been removed]




-
To unsubscribe send a message to: [EMAIL PROTECTED]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my 
membership"
Yahoo! Groups Links

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

<*> Your email settings:
Individual Email | Traditional

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

<*> To change settings via email:
mailto:[EMAIL PROTECTED] 
mailto:[EMAIL PROTECTED]

<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]

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

Re: [svg-developers] Magic: SVG drag of Element using jquery svg is most simple

2008-10-08 Thread ddailey

Take a look at http://srufaculty.sru.edu/david.dailey/svg/makeDragDrop.svg

It doesn't use any external .js, but has relatively simple code and seems to 
work pretty much everywhere.

David
- Original Message - 
From: "narendra sisodiya" <[EMAIL PROTECTED]>
To: 
Cc: "Keith Wood" <[EMAIL PROTECTED]>
Sent: Wednesday, October 08, 2008 1:46 AM
Subject: [svg-developers] Magic: SVG drag of Element using jquery svg is 
most simple


Here is a small code segment which give me highest programmability in svg,
This need jquery and its svg plugin , It will work in firefox
Please comment on it,, how can i make it better, and cross browser.
---
you need these files
jquery.js , jquery.svg.js , jquery.svg.css

most surprisable thing about the code, --
I am calling external function directly and I am using jquery object
$('#mycircle') where id belong to svg element,
This small code give me very surprise ,, and it is working,,
---





@import "svg/jquery.svg.css";
.canvas1
{
position: relative;
height: 400px;
width: 600px;
background: #cc;
border: #ff;
}





var start_drag = null ;
var offsetx  =null ;
var offsety  =null ;

$(document).ready(function() {

$('#svgintro').svg({onLoad: drawIntro});

});

function now_drag(evt){
   if (start_drag==1){
$('#mycircle').attr('cx').baseVal.value = evt.layerX - offsetx;
$('#mycircle').attr('cy').baseVal.value = evt.layerY - offsety;
   }
}

function start_dragging(evt){
start_drag = 1;
offsetx = evt.layerX - $('#mycircle').attr('cx').baseVal.value  ;
offsety = evt.layerY - $('#mycircle').attr('cy').baseVal.value  ;

}
function stop_dragging(evt){
start_drag = 0;

}


function drawIntro() {
var svg = $('#svgintro').svg('get');
svg.describe("Example script01 - invoke an ECMAScript function from an
onclick event");
svg.circle(300, 150, 50, {
onmousedown:"start_dragging(evt)",
onmouseup:"stop_dragging(evt)",
onmousemove:"now_drag(evt)",
  id:"mycircle",
fill:"red"});
svg.text(300, 280, "Drag It",
{'font-family':"Verdana",
'font-size':20,
'text-anchor':"middle"
});
}



this line of text is useless like my friends





-- 
,???[ Narendra Sisodiya ]??f
 http://narendra.techfandu.org
 http://www.lug-iitd.org
"[ +91-93790-75930 ]??.


[Non-text portions of this message have been removed]




-
To unsubscribe send a message to: [EMAIL PROTECTED]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my 
membership"
Yahoo! Groups Links








-
To unsubscribe send a message to: [EMAIL PROTECTED]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my 
membership"
Yahoo! Groups Links

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

<*> Your email settings:
Individual Email | Traditional

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

<*> To change settings via email:
mailto:[EMAIL PROTECTED] 
mailto:[EMAIL PROTECTED]

<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]

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

[svg-developers] Magic: SVG drag of Element using jquery svg is most simple

2008-10-07 Thread narendra sisodiya

Here is a small code segment which give me highest programmability in svg,
This need jquery and its svg plugin , It will work in firefox
Please comment on it,, how can i make it better, and cross browser.
---
you need these files
jquery.js , jquery.svg.js , jquery.svg.css

most surprisable thing about the code, --
I am calling external function directly and I am using jquery object
$('#mycircle') where id belong to svg element,
This small code give me very surprise ,, and it is working,,
---





@import "svg/jquery.svg.css";
.canvas1
{
position: relative;
height: 400px;
width: 600px;
background: #cc;
border: #ff;
}





var start_drag = null ;
var offsetx  =null ;
var offsety  =null ;

$(document).ready(function() {

$('#svgintro').svg({onLoad: drawIntro});

});

function now_drag(evt){
   if (start_drag==1){
$('#mycircle').attr('cx').baseVal.value = evt.layerX - offsetx;
$('#mycircle').attr('cy').baseVal.value = evt.layerY - offsety;
   }
}

function start_dragging(evt){
start_drag = 1;
offsetx = evt.layerX - $('#mycircle').attr('cx').baseVal.value  ;
offsety = evt.layerY - $('#mycircle').attr('cy').baseVal.value  ;

}
function stop_dragging(evt){
start_drag = 0;

}


function drawIntro() {
var svg = $('#svgintro').svg('get');
svg.describe("Example script01 - invoke an ECMAScript function from an
onclick event");
svg.circle(300, 150, 50, {
onmousedown:"start_dragging(evt)",
onmouseup:"stop_dragging(evt)",
onmousemove:"now_drag(evt)",
  id:"mycircle",
fill:"red"});
svg.text(300, 280, "Drag It",
{'font-family':"Verdana",
'font-size':20,
'text-anchor':"middle"
});
}



this line of text is useless like my friends





-- 
[ Narendra Sisodiya ]
 http://narendra.techfandu.org
 http://www.lug-iitd.org
[ +91-93790-75930 ]


[Non-text portions of this message have been removed]




-
To unsubscribe send a message to: [EMAIL PROTECTED]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my 
membership"
Yahoo! Groups Links

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

<*> Your email settings:
Individual Email | Traditional

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

<*> To change settings via email:
mailto:[EMAIL PROTECTED] 
mailto:[EMAIL PROTECTED]

<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]

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

Re: [svg-developers] Magic: SVG drag of Element using jquery svg is most simple

Re: [svg-developers] Magic: SVG drag of Element using jquery svg is most simple

Re: [svg-developers] Magic: SVG drag of Element using jquery svg is most simple

[svg-developers] Magic: SVG drag of Element using jquery svg is most simple

4 matches

Site Navigation

Mail list logo

Footer information