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