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