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
To: [email protected]
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
To: [email protected]
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"
<[email protected]>
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
--~--~---------~--~----~------------~-------~--~----~
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 [email protected]
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
-~----------~----~----~----~------~----~------~--~---
