I tried.
I actually copied the draggable demo code to my page. You know the one with
three boxes? Same result. The last box was the only one that worked.
Thank you.
On Mon, Nov 10, 2008 at 12:46 PM, Alex Mcauley <
[EMAIL PROTECTED]> wrote:
> I am not sure anchors are draggable because they are not strictly an
> element ... what i would try is changing one of them to a div element and
> putting inside it or setting explicit width and height then try to
> drag it ... i've never tried dragging anchors before so i am not sure but it
> is my theory
>
> ----- Original Message -----
> *From:* Damion M Broadaway <[EMAIL PROTECTED]>
> *To:* prototype-scriptaculous@googlegroups.com
> *Sent:* Monday, November 10, 2008 6:32 PM
> *Subject:* [Proto-Scripty] Re: Scriptaculous Draggables on anchor tags
> only setting last declared as draggable.
>
> Right now it doesn't work in anything. I am developing in FF 3.
> ************************************************* JAVASCRIPT
> (action.js) ************************************************
> window.onload=function(){
> polaroid_1();
> polaroid_2();
> polaroid_3();
> polaroid_4();
> }
> function polaroid_1(){
> new Draggable('polaroid_1', { revert: true });
> }
> function polaroid_2(){
> new Draggable('polaroid_2', { revert: true });
> }
> function polaroid_3(){
> new Draggable('polaroid_3', { revert: true });
> }
> function polaroid_4(){
> new Draggable('polaroid_4', { revert: true });
> }
> ************************************************* JAVASCRIPT
> ************************************************
>
> ************************************************* HTML (index.html)
> ************************************************
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
> www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml";>
> <head>
> <meta http-equiv="Content-Type" content="text/html;
> charset=iso-8859-1" />
>
> <title>WEBSITE</title>
> <meta name="keywords" content="">
> <meta name="description" content="">
> <meta name="robots" content="">
> <meta name="pagerank" content="1">
> <meta name="MSSmartTagsPreventParsing" content="TRUE">
> <meta name="rating" content="general">
> <meta name="distribution" content="global">
> <meta name="revisit-after" content="2 days">
> <meta name="author" content="">
> <meta name="copyright" content=".">
>
> <script src="js/prototype.js" type="text/javascript"></script>
> <script src="js/scriptaculous.js" type="text/javascript"></script>
> <script type="text/javascript" src="http://jquery.com/src/latest/";></
> script>
> <script type="text/javascript" src="js/greybox.js"></script>
> <script type="text/javascript" src="js/actions.js"></script>
> <link href="style/tlu.css" rel="stylesheet" type="text/css"
> media="screen" />
> <link href="style/greybox.css" rel="stylesheet" type="text/css"
> media="all" />
>
> </head>
>
> <body>
> <!-- CONTAINS ALL OTHER ELEMENTS. SET TO WIDTH/HEIGHT OF BG IMAGE --
> >
> <div id="container">
> <!-- TLU LOGO -->
> <img id="tlu_logo" src="imgs/logo.png" alt="WEBSITE :. Logo" />
> <!-- NAVIGATION WRAPPER -->
> <div id="nav">
> <!-- NAVIGATION ELEMENTS -->
> <a id="nav_academics" href="" title="WEBSITE :. Academics"></a>
> <a id="nav_athletics" href="" title="WEBSITE :. Athletics"></a>
> <a id="nav_student_life" href="" title="WEBSITE :. Student
> Life"></a>
> <a id="nav_fa" href="" title="WEBSITE :. Financial Aid"></a>
> <a id="nav_visit" href="" title="WEBSITE :. Schedule a Visit"></
> a>
> <a id="nav_contact" href="" title="WEBSITE :. Contact Us"></a>
> </div>
> <!-- POLAROIDS -->
> <a id="polaroid_1" href="#" title="WEBSITE :. Drag Me!"></a>
> <a id="polaroid_2" href="#" title="WEBSITE :. Drag Me!"></a>
> <a id="polaroid_3" href="#" title="WEBSITE :. Drag Me!"></a>
> <a id="polaroid_4" href="#" title="WEBSITE :. Drag Me!"></a>
> </div>
> </body>
> </html>
> ************************************************* HTML
> ************************************************
>
> ************************************************* CSS (tlu.css)
> ************************************************
> /*
> Texas Lutheran Univserity
> Landing Page
> Developed by:
> Zoom Intercollegiate Marketing (Damion)
> Date Began: 11.07.2008
> [EMAIL PROTECTED]
> */
> * {
> margin: 0;
> padding:0;
> }
> /************************* BG AND CONTAINER
> ***************************/
> body{
> background-image:url('../imgs/bg.jpg');
> background-repeat: no-repeat;
> background-position: top center;
> background-color: #f9d913;
> }
> div#container{
> width: 1066px;
> height: 778px;
> margin: 0 auto;
> border: 1px solid #000;
> }
> /************************* LOGO ***************************/
> img#tlu_logo{
> margin-left: 26px;
> float:left;
> }
> /************************* NAVIGATION ***************************/
> div#nav{
> width: 305px;
> height: 608px;
> margin-left: 761px;
> position:absolute;
> background-image:url('../imgs/nav_bg.png');
> background-repeat: no-repeat;
> z-index: 100;
> }
> /* NAVIGATION: ACADEMICS */
> div#nav a#nav_academics{
> display:block;
> width: 190px;
> height: 34px;
> margin-top:110px;
> margin-left:90px;
> background-image:url('../imgs/nav_academics_off.gif');
> background-repeat: no-repeat;
> }
> div#nav a#nav_academics:hover{
> background-image:url('../imgs/nav_academics_on.gif');
> }
> /* NAVIGATION: ATHLETICS */
> div#nav a#nav_athletics{
> display:block;
> width: 166px;
> height: 31px;
> margin-top:22px;
> margin-left:110px;
> background-image:url('../imgs/nav_athletics_off.gif');
> background-repeat: no-repeat;
> }
> div#nav a#nav_athletics:hover{
> background-image:url('../imgs/nav_athletics_on.gif');
> }
> /* NAVIGATION: STUDENT LIFE */
> div#nav a#nav_student_life{
> display:block;
> width: 127px;
> height: 61px;
> margin-top:22px;
> margin-left:130px;
> background-image:url('../imgs/nav_student_life_off.gif');
> background-repeat: no-repeat;
> }
> div#nav a#nav_student_life:hover{
> background-image:url('../imgs/nav_student_life_on.gif');
> }
> /* NAVIGATION: FINANCIAL AID */
> div#nav a#nav_fa{
> display:block;
> width: 156px;
> height: 66px;
> margin-top:21px;
> margin-left:110px;
> background-image:url('../imgs/nav_fa_off.gif');
> background-repeat: no-repeat;
> }
> div#nav a#nav_fa:hover{
> background-image:url('../imgs/nav_fa_on.gif');
> }
> /* NAVIGATION: VISIT */
> div#nav a#nav_visit{
> display:block;
> width: 174px;
> height: 75px;
> margin-top:21px;
> margin-left:70px;
> background-image:url('../imgs/nav_visit_off.gif');
> background-repeat: no-repeat;
> }
> div#nav a#nav_visit:hover{
> background-image:url('../imgs/nav_visit_on.gif');
> }
> /* NAVIGATION: CONTACT */
> div#nav a#nav_contact{
> display:block;
> width: 156px;
> height: 25px;
> margin-top:19px;
> margin-left:115px;
> background-image:url('../imgs/nav_contact_off.gif');
> background-repeat: no-repeat;
> }
> div#nav a#nav_contact:hover{
> background-image:url('../imgs/nav_contact_on.gif');
> }
> /********************************************** POLAROIDS
> ******************/
> /* POLAROID 1 */
> a#polaroid_1{
> position:absolute;
> display:block;
> width: 314px;
> height: 341px;
> background-image:url('../imgs/polaroid_girl_off.png');
> margin: 255px 0 0 30px;
> text-decoration:none;
> z-index: 1;
> border: 1px solid #000;
> }
> a#polaroid_1:hover{
> background-image:url('../imgs/polaroid_girl_on.png');
> }
> /* POLAROID 2*/
> a#polaroid_2{
> position:absolute;
> display:block;
> width: 305px;
> height: 335px;
> background-image:url('../imgs/polaroid_building_off.png');
> margin: 5px 0 0 500px;
> text-decoration:none;
> z-index: 2;
> border: 1px solid #000;
> }
> a#polaroid_2:hover{
> background-image:url('../imgs/polaroid_building_on.png');
> }
> /* POLAROID 3*/
> a#polaroid_3{
> position:absolute;
> display:block;
> width: 254px;
> height: 300px;
> background-image:url('../imgs/polaroid_prof_off.png');
> margin: 400px 0 0 340px;
> text-decoration:none;
> z-index: 3;
> border: 1px solid #000;
> }
> a#polaroid_3:hover{
> background-image:url('../imgs/polaroid_prof_on.png');
> }
> /* POLAROID 4*/
> a#polaroid_4{
> position:absolute;
> display:block;
> width: 253px;
> height: 298px;
> background-image:url('../imgs/polaroid_sports_off.png');
> margin: 463px 0 0 627px;
> text-decoration:none;
> z-index: 4;
> border: 1px solid #000;
> }
> a#polaroid_4:hover{
> background-image:url('../imgs/polaroid_sports_on.png');
> }
> ************************************************* CSS
> ************************************************
>
> On Mon, Nov 10, 2008 at 12:31 PM, Alex Mcauley <
> [EMAIL PROTECTED]> wrote:
>
>> can you pastebin your code or put it in the reply and tell us what
>> browsers it works / not works in, then we can make an assesment to where the
>> problem lies
>>
>> Thanks
>> Alex
>>
>> ----- Original Message -----
>> *From:* Damion M Broadaway <[EMAIL PROTECTED]>
>> *To:* prototype-scriptaculous@googlegroups.com
>> *Sent:* Monday, November 10, 2008 5:25 PM
>> *Subject:* [Proto-Scripty] Re: Scriptaculous Draggables on anchor tags
>> only setting last declared as draggable.
>>
>> They are not images. They are anchor tags that have an image as the CSS
>> background-image property. I used anchors instead of divs so I could easily
>> to a hover on the anchor.
>> But, yes each anchor has it's own ID:
>> polaroid_1,polaroid_2,polaroid_3,polaroid_4.
>>
>> Thanks.
>>
>> On Mon, Nov 10, 2008 at 11:19 AM, Alex Mcauley <
>> [EMAIL PROTECTED]> wrote:
>>
>>>
>>> do the images all have distinct IDs ?
>>> ----- Original Message -----
>>> From: "Damion B" <[EMAIL PROTECTED]>
>>> To: "Prototype & script.aculo.us" <
>>> prototype-scriptaculous@googlegroups.com>
>>> Sent: Monday, November 10, 2008 4:25 PM
>>> Subject: [Proto-Scripty] Scriptaculous Draggables on anchor tags only
>>> setting last declared as draggable.
>>>
>>>
>>> >
>>> > Good morning:
>>> >
>>> > I have four anchor tags set to display block and positioned
>>> > absolutely. For context, it is four polaroids that are supposed to be
>>> > able to be moved around the screen.
>>> >
>>> > I can set them individually to be a Draggable, but when I try to set
>>> > them all to Draggable I am only able to drag the last anchor declared
>>> > (new draggable()).
>>> >
>>> > I have the Scriptaculous actions in a .js filed called actions.js. I
>>> > have also included the js on the page (like the demo) with the same
>>> > results. See section below.
>>> >
>>> > The result is, like I mentioned, that only polaroid_4 is draggable.
>>> > As I rearrange the four functions, the last one (and the anchor that
>>> > it represents) is the only draggable item. Furthermore, it is
>>> > draggable from anywhere on the page. I don't even have to click on
>>> > it.
>>> >
>>> > What am I doing wrong with this. I can't seem to find much on the
>>> > subject.
>>> >
>>> > Feel free contact me regarding this if you need more clarification.
>>> >
>>> > Thank you.
>>> >
>>> > ************************************************* JAVASCRIPT
>>> > (action.js) ************************************************
>>> > window.onload=function(){
>>> > polaroid_1();
>>> > polaroid_2();
>>> > polaroid_3();
>>> > polaroid_4();
>>> > }
>>> > function polaroid_1(){
>>> > new Draggable('polaroid_1', { revert: true });
>>> > }
>>> > function polaroid_2(){
>>> > new Draggable('polaroid_2', { revert: true });
>>> > }
>>> > function polaroid_3(){
>>> > new Draggable('polaroid_3', { revert: true });
>>> > }
>>> > function polaroid_4(){
>>> > new Draggable('polaroid_4', { revert: true });
>>> > }
>>> > ************************************************* JAVASCRIPT
>>> > ************************************************
>>> >
>>> > ************************************************* HTML (index.html)
>>> > ************************************************
>>> > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
>>> > www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>>> > <html xmlns="http://www.w3.org/1999/xhtml";>
>>> > <head>
>>> > <meta http-equiv="Content-Type" content="text/html;
>>> > charset=iso-8859-1" />
>>> >
>>> > <title>WEBSITE</title>
>>> > <meta name="keywords" content="">
>>> > <meta name="description" content="">
>>> > <meta name="robots" content="">
>>> > <meta name="pagerank" content="1">
>>> > <meta name="MSSmartTagsPreventParsing" content="TRUE">
>>> > <meta name="rating" content="general">
>>> > <meta name="distribution" content="global">
>>> > <meta name="revisit-after" content="2 days">
>>> > <meta name="author" content="">
>>> > <meta name="copyright" content=".">
>>> >
>>> > <script src="js/prototype.js" type="text/javascript"></script>
>>> > <script src="js/scriptaculous.js" type="text/javascript"></script>
>>> > <script type="text/javascript" src="http://jquery.com/src/latest/";></
>>> > script>
>>> > <script type="text/javascript" src="js/greybox.js"></script>
>>> > <script type="text/javascript" src="js/actions.js"></script>
>>> > <link href="style/tlu.css" rel="stylesheet" type="text/css"
>>> > media="screen" />
>>> > <link href="style/greybox.css" rel="stylesheet" type="text/css"
>>> > media="all" />
>>> >
>>> > </head>
>>> >
>>> > <body>
>>> > <!-- CONTAINS ALL OTHER ELEMENTS. SET TO WIDTH/HEIGHT OF BG IMAGE --
>>> >>
>>> > <div id="container">
>>> > <!-- TLU LOGO -->
>>> > <img id="tlu_logo" src="imgs/logo.png" alt="WEBSITE :. Logo" />
>>> > <!-- NAVIGATION WRAPPER -->
>>> > <div id="nav">
>>> > <!-- NAVIGATION ELEMENTS -->
>>> > <a id="nav_academics" href="" title="WEBSITE :. Academics"></a>
>>> > <a id="nav_athletics" href="" title="WEBSITE :. Athletics"></a>
>>> > <a id="nav_student_life" href="" title="WEBSITE :. Student
>>> > Life"></a>
>>> > <a id="nav_fa" href="" title="WEBSITE :. Financial Aid"></a>
>>> > <a id="nav_visit" href="" title="WEBSITE :. Schedule a Visit"></
>>> > a>
>>> > <a id="nav_contact" href="" title="WEBSITE :. Contact Us"></a>
>>> > </div>
>>> > <!-- POLAROIDS -->
>>> > <a id="polaroid_1" href="#" title="WEBSITE :. Drag Me!"></a>
>>> > <a id="polaroid_2" href="#" title="WEBSITE :. Drag Me!"></a>
>>> > <a id="polaroid_3" href="#" title="WEBSITE :. Drag Me!"></a>
>>> > <a id="polaroid_4" href="#" title="WEBSITE :. Drag Me!"></a>
>>> > </div>
>>> > </body>
>>> > </html>
>>> > ************************************************* HTML
>>> > ************************************************
>>> >
>>> > ************************************************* CSS (tlu.css)
>>> > ************************************************
>>> > /*
>>> > Texas Lutheran Univserity
>>> > Landing Page
>>> > Developed by:
>>> > Zoom Intercollegiate Marketing (Damion)
>>> > Date Began: 11.07.2008
>>> > [EMAIL PROTECTED]
>>> > */
>>> > * {
>>> > margin: 0;
>>> > padding:0;
>>> > }
>>> > /************************* BG AND CONTAINER
>>> > ***************************/
>>> > body{
>>> > background-image:url('../imgs/bg.jpg');
>>> > background-repeat: no-repeat;
>>> > background-position: top center;
>>> > background-color: #f9d913;
>>> > }
>>> > div#container{
>>> > width: 1066px;
>>> > height: 778px;
>>> > margin: 0 auto;
>>> > border: 1px solid #000;
>>> > }
>>> > /************************* LOGO ***************************/
>>> > img#tlu_logo{
>>> > margin-left: 26px;
>>> > float:left;
>>> > }
>>> > /************************* NAVIGATION ***************************/
>>> > div#nav{
>>> > width: 305px;
>>> > height: 608px;
>>> > margin-left: 761px;
>>> > position:absolute;
>>> > background-image:url('../imgs/nav_bg.png');
>>> > background-repeat: no-repeat;
>>> > z-index: 100;
>>> > }
>>> > /* NAVIGATION: ACADEMICS */
>>> > div#nav a#nav_academics{
>>> > display:block;
>>> > width: 190px;
>>> > height: 34px;
>>> > margin-top:110px;
>>> > margin-left:90px;
>>> > background-image:url('../imgs/nav_academics_off.gif');
>>> > background-repeat: no-repeat;
>>> > }
>>> > div#nav a#nav_academics:hover{
>>> > background-image:url('../imgs/nav_academics_on.gif');
>>> > }
>>> > /* NAVIGATION: ATHLETICS */
>>> > div#nav a#nav_athletics{
>>> > display:block;
>>> > width: 166px;
>>> > height: 31px;
>>> > margin-top:22px;
>>> > margin-left:110px;
>>> > background-image:url('../imgs/nav_athletics_off.gif');
>>> > background-repeat: no-repeat;
>>> > }
>>> > div#nav a#nav_athletics:hover{
>>> > background-image:url('../imgs/nav_athletics_on.gif');
>>> > }
>>> > /* NAVIGATION: STUDENT LIFE */
>>> > div#nav a#nav_student_life{
>>> > display:block;
>>> > width: 127px;
>>> > height: 61px;
>>> > margin-top:22px;
>>> > margin-left:130px;
>>> > background-image:url('../imgs/nav_student_life_off.gif');
>>> > background-repeat: no-repeat;
>>> > }
>>> > div#nav a#nav_student_life:hover{
>>> > background-image:url('../imgs/nav_student_life_on.gif');
>>> > }
>>> > /* NAVIGATION: FINANCIAL AID */
>>> > div#nav a#nav_fa{
>>> > display:block;
>>> > width: 156px;
>>> > height: 66px;
>>> > margin-top:21px;
>>> > margin-left:110px;
>>> > background-image:url('../imgs/nav_fa_off.gif');
>>> > background-repeat: no-repeat;
>>> > }
>>> > div#nav a#nav_fa:hover{
>>> > background-image:url('../imgs/nav_fa_on.gif');
>>> > }
>>> > /* NAVIGATION: VISIT */
>>> > div#nav a#nav_visit{
>>> > display:block;
>>> > width: 174px;
>>> > height: 75px;
>>> > margin-top:21px;
>>> > margin-left:70px;
>>> > background-image:url('../imgs/nav_visit_off.gif');
>>> > background-repeat: no-repeat;
>>> > }
>>> > div#nav a#nav_visit:hover{
>>> > background-image:url('../imgs/nav_visit_on.gif');
>>> > }
>>> > /* NAVIGATION: CONTACT */
>>> > div#nav a#nav_contact{
>>> > display:block;
>>> > width: 156px;
>>> > height: 25px;
>>> > margin-top:19px;
>>> > margin-left:115px;
>>> > background-image:url('../imgs/nav_contact_off.gif');
>>> > background-repeat: no-repeat;
>>> > }
>>> > div#nav a#nav_contact:hover{
>>> > background-image:url('../imgs/nav_contact_on.gif');
>>> > }
>>> > /********************************************** POLAROIDS
>>> > ******************/
>>> > /* POLAROID 1 */
>>> > a#polaroid_1{
>>> > position:absolute;
>>> > display:block;
>>> > width: 314px;
>>> > height: 341px;
>>> > background-image:url('../imgs/polaroid_girl_off.png');
>>> > margin: 255px 0 0 30px;
>>> > text-decoration:none;
>>> > z-index: 1;
>>> > border: 1px solid #000;
>>> > }
>>> > a#polaroid_1:hover{
>>> > background-image:url('../imgs/polaroid_girl_on.png');
>>> > }
>>> > /* POLAROID 2*/
>>> > a#polaroid_2{
>>> > position:absolute;
>>> > display:block;
>>> > width: 305px;
>>> > height: 335px;
>>> > background-image:url('../imgs/polaroid_building_off.png');
>>> > margin: 5px 0 0 500px;
>>> > text-decoration:none;
>>> > z-index: 2;
>>> > border: 1px solid #000;
>>> > }
>>> > a#polaroid_2:hover{
>>> > background-image:url('../imgs/polaroid_building_on.png');
>>> > }
>>> > /* POLAROID 3*/
>>> > a#polaroid_3{
>>> > position:absolute;
>>> > display:block;
>>> > width: 254px;
>>> > height: 300px;
>>> > background-image:url('../imgs/polaroid_prof_off.png');
>>> > margin: 400px 0 0 340px;
>>> > text-decoration:none;
>>> > z-index: 3;
>>> > border: 1px solid #000;
>>> > }
>>> > a#polaroid_3:hover{
>>> > background-image:url('../imgs/polaroid_prof_on.png');
>>> > }
>>> > /* POLAROID 4*/
>>> > a#polaroid_4{
>>> > position:absolute;
>>> > display:block;
>>> > width: 253px;
>>> > height: 298px;
>>> > background-image:url('../imgs/polaroid_sports_off.png');
>>> > margin: 463px 0 0 627px;
>>> > text-decoration:none;
>>> > z-index: 4;
>>> > border: 1px solid #000;
>>> > }
>>> > a#polaroid_4:hover{
>>> > background-image:url('../imgs/polaroid_sports_on.png');
>>> > }
>>> > ************************************************* CSS
>>> > ************************************************
>>> >
>>> > >
>>> >
>>>
>>>
>>>
>>>
>>
>>
>> --
>> Sincerely,
>>
>> Damion M Broadaway
>> 816.316.0770
>> exit29.com
>> http://www.linkedin.com/in/damionbroadaway
>>
>>
>
>
> --
> Sincerely,
>
> Damion M Broadaway
> 816.316.0770
> exit29.com
> http://www.linkedin.com/in/damionbroadaway
> >
>
--
Sincerely,
Damion M Broadaway
816.316.0770
exit29.com
http://www.linkedin.com/in/damionbroadaway
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
