Grow your CSS skills. Land your dream job.

Using Mootools and jQuery on the same page?

  • # October 16, 2009 at 12:15 pm

    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
    # October 17, 2009 at 8:10 am

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".