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
> ************************************************
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
