Using Mootools and jQuery on the same page?

[kelpie]

I am trying to construct a page that has both Mootools and JQuery on the same page. Although I don’t even know if it is possible to do this as I am a complete novice where javascript is concerned. Is there anyone out there who might be able to advise or even suggest a solution as the MooStack component doesn’t seem to work as it should.

I’d be most grateful for any help or suggestions as to how to get it to work.

Thanks in advance,

Ian.

My test page is:
http://www.graphicalchemy.co.uk/test/badarroch.html

My Javascript folder is:
http://www.graphicalchemy.co.uk/test/js

and my CSS is this:

Code:

* {
margin: 0;
padding: 0;
}

body {
font-family: Georgia, “Times New Roman”, Times, serif;
color: #000000;
background-color: #ffffff;
background-image: url(../images/badarroch.jpg);
background-repeat: no-repeat;
background-position: center top;
}

a {
color:#A44613;
text-decoration:none;
font-weight: bold;
font-size: 14px;
}

a:hover {
color:#782006;
text-decoration:none;
outline: none;
font-size: 14px;
}

focus {
outline: 0;
-moz-outline-style:none;
}

image {
padding: 0;
outline:none;
border: none;
}

a img, a:active, a img.preview {
border: none;
text-decoration: none;
padding: 0;
outline:none;
}

ol, ul {
list-style: none;
padding: 0;
margin: 0;
}

li {
list-style: none;
}

p {
font-size: 12px;
line-height: 135%;
color: #333333;
}

.introparagraph {
line-height: 135%;
font-size: 14px;
color: #A44613;
}

.introparagraph a {
line-height: 135%;
font-size: 14px;
color: #4F7B64;
text-decoration: none;
font-weight: bold;
}

.introparagraph a:hover {
line-height: 135%;
font-size: 14px;
color: #782006;
text-decoration: none;
font-weight: bold;
}

.imagedropcap {
width: 95px;
height: 80px;
float: left;
display: block;
text-indent: -999em;
margin: 0px 4px 0px 0px;
background-image: url(../images/badarrochwdropcap.png);
background-repeat: no-repeat;
}

.pquote {
float: right;
width: 140px;
color: #A44613;
font-size: 18px;
font-style: italic;
background-image: url(../images/badarrochquotestop.png);
background-repeat: no-repeat;
background-position: 10px top;
margin: 10px 0px 0px 0px;
padding-top: 40px;
line-height: 125%;
clear: right;
padding-left: 10px;
padding-bottom: 20px;
}

.bullet {
font-weight: bold;
color:#782006;
}

h1 {
font-size: 24px;
font-weight:bold;
}

h2 {
font-size: 22px
font-weight:bold;;
}

h3 {
font-size: 20px
font-weight:bold;;
}

h4 {
font-size: 18px;
font-weight:bold;
}

h5 {
font-size: 16px;
font-weight:bold;
}

h6 {
font-size: 14px;
font-weight:bold;
}

#pagewrapper {
height: 1320px;
width: 900px;
margin-right: auto;
margin-left: auto;
position: relative;
outline: none;
border: none;
}

#topstriprightcontainer {
height: 65px;
width: 900px;
position: absolute;
left: 0px;
top: 0px;
outline: none;
border: none;
margin: 0;
}

/* topicons begin */

#homeicon{
height: 39px;
width: 39px;
overflow: hidden;
display: block;
background-image: url(../images/badhomeicon.jpg);
background-repeat: no-repeat;
background-position: center top;
position: absolute;
left: 779px;
top: 26px;
}

#homeicon:hover{
background-position: center bottom;
}

#mailicon{
height: 39px;
width: 39px;
overflow: hidden;
display: block;
background-image: url(../images/badmailicon.jpg);
background-repeat: no-repeat;
background-position: center top;
position: absolute;
left: 845px;
top: 26px;
}

#mailicon:hover{
background-position: center bottom;
}

/* topicons end */

/* myslides header begins */
#myslides {
width: 900px;
height: 255px;
padding: 0;
position:absolute;
left:0px;
top: 65px;
outline: none;
border: none;
margin: 0;
}

#myslides img {
width: 900px;
height: 255px;
top: 0;
left: 0;
outline: none;
border: none;
margin: 0;

}

/* navigation begins */

#nav, #nav ul{
margin:0;
list-style-type:none;
list-style-position:outside;
position:absolute;
line-height: 30px;
width: 620px;
top: 322px;
left: 1px;
z-index: 999;
padding: 0;
}

#nav a{
display:block;
padding:0px 20px;
color:#fff;
text-decoration:none;
background-image: url(../images/badarrochmenubg1.png);
background-repeat: repeat-x;
background-position: left top;
height: 30px;
margin-right: 1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}

#nav a:hover{
color:#A44613;
background-image: url(../images/badarrochmenubg1over.png);
background-repeat: repeat-x;
background-position: left top;
}

#nav li{
float:left;
position:relative;
}

#nav ul {
position:absolute;
display:none;
width:200px;
top:30px;
left: 0px;
}

#nav li ul a{
width:200px;
height:30px;
float:left;
}

#nav ul ul{
top:auto;
}

#nav li ul ul {
left:200px;
margin:0;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}

/* navigation ends */

#emaillink {
height: 24px;
width: 242px;
position: absolute;
left: 620px;
top: 322px;
padding-left: 38px;
padding-top: 6px;
}

#leftcolumn {
height: 769px;
width: 270px;
position: absolute;
left: 0px;
top: 388px;
padding-left: 20px;
padding-right: 10px;
}

#middlecolumn {
height: 250px;
width: 270px;
position: absolute;
left: 300px;
top: 828px;
padding-left: 15px;
padding-right: 15px;
}

/* moostack begins */
#stack {
cursor: pointer;
width: 460px;
height: 337px;
position: absolute;
top: 388px;
left: 370px;
z-index: 1999;
}

.stack {
height: 337px;
width: 460px;
}
/* moostack ends */

#rightcolumn {
height: 250px;
width: 270px;
position: absolute;
left: 600px;
top: 828px;
padding-right: 20px;
padding-left: 10px;
}
#footerlinks {
height: 20px;
width: 703px;
position: absolute;
left: 0px;
top: 1188px;
padding-left: 197px;
}

#footeraddress {
height: 60px;
width: 237px;
position: absolute;
left: 199px;
top: 1208px;
padding-left: 0px;
}

#footercontacts {
height: 60px;
width: 200px;
position: absolute;
left: 436px;
top: 1208px;
padding-left: 0px;
}

#footerinfo {
height: 60px;
width: 215px;
position: absolute;
left: 636px;
top: 1208px;
padding-left: 0px;
}

.footertext {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 130%;
color:#333333;
}

.footertextsmall {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
line-height: 135%;
color:#333333;
}

.footertextlight {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 130%;
color:#666666;
}

.footertextlight a {
font-size: 11px;
line-height: 130%;
color:#A44613;
text-decoration: none;
font-weight: bold;
}

.footertextlight a:hover {
font-size: 11px;
line-height: 130%;
color:#782006;
text-decoration: none;
font-weight: bold;
}

.footertextitalic {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 130%;
color:#333333;
font-style:italic;
}

.footertextbold {
font-size: 11px;
line-height: 130%;
font-weight: bold;
color:#A44613;
}

.footertext a {
font-size: 11px;
line-height: 130%;
color:#A44613;
text-decoration: none;
font-weight: bold;
}

.footertext a:hover {
font-size: 11px;
line-height: 130%;
color:#782006;
text-decoration: none;
font-weight: bold;
}

#subfooter {
height: 10px;
width: 870px;
position: absolute;
text-align: right;
padding-right: 30px;
top: 1263px;
left: 0px;
padding-top: 20px;
}

.subfootertext {
font-size: 9px;
line-height: 120%;
color:#A44613;
font-family: Arial, Helvetica, sans-serif;
}

.subfootertextbold {
font-size: 9px;
line-height: 120%;
font-weight: bold;
color:#666666;
}

.subfootertext a {
font-size: 9px;
line-height: 120%;
font-weight: bold;
color:#666666;
text-decoration: underline;
}

.subfootertext a:hover {
font-size: 9px;
line-height: 120%;
font-weight: bold;
color:#782006;
text-decoration: underline;
}

[Rob MacKay]

firstly – is it really necessary to use both?

If you do use both I would make sure you do the jQuery long hand so as to not cause confusion between scripts. If you are using plugins, you will probably have to edit the plugin code, because no one codes in longhand really lol

This might help:

http://davidwalsh.name/jquery-mootools

[Author]

Posts