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