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


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

Reply via email to