Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Using Mootools and jQuery on the same page?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #26463
    kelpie
    Member

    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;
    }

    #65614
    Rob MacKay
    Participant

    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.