jquery colorbox isn't working with mootools v1.1

StackOverflow https://stackoverflow.com/questions/22639251

  •  21-06-2023
  •  | 
  •  

Question

I wanna use colorbox for 'join us menu' but it isn't working.

and I also tried fancybox, and got a same result..

actually colorbox performed well until I add mootools v1.1 to my jsp code.

I dont know what is mootools v1.1. I just copy some source that from

some awesome website for

using scroll view effect(I dont know exactly what this effect's name) on my page

scroll view effect is working well. you can see that when you clicked 'append1,2,3'

sorry for my poor english skill.

here is my code

 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Spring Builder : append your heart </title>
<link rel="stylesheet" href="colorbox.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="colorbox.js"></script>
<script type="text/javascript" src="mootools.v1.1.js"></script>



<script type="text/javascript">

$(function(){
    $('.joinus').colorbox({

    });

});

</script>


<style type="text/css">

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Times New Roman', serif;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    border: 0;
}

#main_header{

    width:1280px;
    padding-left: 10px;
    line-height:60px;
    background: #59DA50;
    color:#FFFFFF;

}
#main_bar{
    overflow: hidden;
    background: #EAEAEA;

}
#main_bar>ul.main_bar_left{
    overflow: hidden;
    float: left;
}
#main_bar>ul.main_bar_right{
    overflow: hidden;
    float: right;
}
#main_bar>ul.main_bar_left>li{
    float:left;

}
#main_bar>ul.main_bar_right>li{
    float:left;

}
#main_bar a{
    display: block;
    padding: 5px 20px;
    border-right: 1px solid #BDBDBD;
}
#main_bar a:HOVER{

    background: #CEF279;
}

#main_bar input{

    margin:5px;
    width: 80px;

}

#main_footer{
    width:1280px;
    margin:0 auto;
    margin-bottom: 10px;

    background: #353535;
    color: #FFFFFF;

    text-align: center;
    padding: 10px;
}


#main_content {
margin:0px;
overflow:hidden; 
/*height:387px; 
width:99,9%;*/
border:none;
position:relative;
}

#main_content_bg {
width:5000px;
height:600px;
background-image:url(http://placehold.it/5000x600);
background-position:top left;
background-repeat:no-repeat;
background-color:#E6E6E4;
position:relative;
}

.section_content {
width:990px;
height:380px;
position:absolute;
}

#section1 {
left:0px; 
top:0px;
}

#section2 {
left:1570px; 
top:0px;
}

#section3 {
left:2880px; 
top:0px;
}


</style>

</head>
<body>

<header id="main_header">
    <h1>Spring Builder</h1>
</header>

<nav id="main_bar">
    <ul class="main_bar_left">
        <li><a id="append1" href="#">append1</a></li>
        <li><a id="append2" href="#">append2</a></li>
        <li><a id="append3" href="#">append3</a></li>
    </ul>

    <ul class="main_bar_right">
        <li><input type="text" value="id" id="id" name="id"/></li>
        <li><input type="password" id="pw" name="pw"/></li>
        <li><a href="#">Login</a></li>
        <li><a href="SbMember.jsp" class="joinus">Join us</a></li>
    </ul>

</nav>

<div id="main_content">
    <div id="main_content_bg">
        <div id="section1" class="section_content">
        <h1>section1</h1></div>
        <div id="section2" class="section_content">
        <h1>section2</h1></div>
        <div id="section3" class="section_content">
        <h1>section3</h1></div>
    </div>
</div>  
<footer id="main_footer">

</footer>
<script src="scrollstyle.js" type="text/javascript"></script>

</body>
</html>
Was it helpful?

Solution

It's probably happen a conflict between Mootools and jQuery because both libraries are using $ sign, try to convert $ to jQuery for your jQuery code:

jQuery(function(){
    jQuery('.joinus').colorbox({

    });
});

or wrap your code inside:

jQuery(function($) {
    $('.joinus').colorbox({

    });
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top