I am trying to show a grid in an HTML page. The grid has been made using angular. It worked fine when run in isolated environment. But when I merged it with my original angular project, it's layout distorted.
Following is my code :
index.html
<html>
<head>
<title> SiteMan</title>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "tree.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.min.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.min.css" type="text/css">
<link rel= "stylesheet" href="stylesheet.css">
</head>
<body ng-app="myApp">
<div>
<div id = "header">
<h1>Siteman RANN 0.1</h1>
</div>
<div id ="nav">
<button> Add Attribute </button>
<button> Add User </button>
<button> Add Doccument </button>
</div>
<div id = "aside" style="padding:5px">
<button class="link" ng-click="attr=1 ; docs=0 ; user=0">All Attributes</button></br>
<button class="link" ng-click="user=1 ; attr=0 ; docs=0">All Users</button></br>
<button class="link" ng-click="docs=1 ; attr=0 ; user=0">All Document Types</button></br>
</div>
<div id = "section" ng-controller="mainCtrl">
</div>
<div id = "article" ng-controller="gridCtrl">
<p><strong>Grid with native pagination controls</strong></p>
<div ui-grid="gridOptions" ui-grid-pagination class="grid" ui-grid-auto-resize>
</div>
</div>
<div id = "footer">
Copyright © Siteman RANN
</div>
</div>
</body>
</html>
tree.js
var app = angular.module("myApp", ['ngTouch', 'ui.grid', 'ui.grid.pagination']);
app.controller('gridCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('users.json').success (function(data){
$scope.myData = data;
});
$scope.gridOptions = {
data: 'myData',
paginationPageSizes: [05, 10, 15],
paginationPageSize: 10,
columnDefs: [
{ field : 'name', displayName: 'Name' },
{ field : 'type', displayName: 'Type' },
{ field : 'displayName', displayName: 'DisplayName'}
]
};
}]);
stylesheet.css
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
border: 1px solid black;
}
#nav {
line-height:30px;
background-color:#eeeeee;
color:black;
text-align:center;
height:30px;
padding:5px;
border: 1px solid black;
}
#aside{
line-height:20px;
background-color:#eeeeee;
height:500px;
width:20%;
float:left;
padding:5px;
border: 2px solid black;
overflow: scroll;
}
#section {
float:left;
height:150px;
width:77%;
padding:10px;
border: 2px solid black;
overflow: scroll;
}
a {
text-decoration: none;
}
#article {
float:left;
height:330px;
width:77%;
padding:10px;
border: 2px solid black;
overflow: scroll;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
border: 1px solid black;
}
button.link{
background: none;
border: none;
}
.grid {
width: 800px;
}
I could not find the reason of distorted grid. Help..!!
You padding is not working the way you think it is.
Just add box-sizing: border-box to your code.
* {
box-sizing: border-box;
}
Further explanation on box-sizing:
Box Sizing | CSS tricks
* {box-sizing: border-box}
Related
I am trying to add a onclick or click event that will allow someone to input a city and retrieve said city's weather information. I had added a event listener to the api function however it does not seem to work. Please help?
$.getJSON("https://api.openweathermap.org/data/2.5/forecast?q="+City+"&appid=dc171ae0b3b507207c6605cbab0a5f98",
function(data){
console.log(data);
var icon ="https://openweathermap.org/img/w/" + data.list[0].weather[0].icon +".png";
var temp=Math.floor(data.list[0].main.temp);
var weather=data.list[0].weather[0].main;
var city=data.city.name;
var date= data.list[0].dt_txt;
var humidity=data.list[0].main.humidity;
var wind=data.list[0].wind.speed;
$(".icon").attr("src",icon);
$(".weather").append(weather);
$(".temp").append(temp);
$(".city").append(city);
$(".date").append(date);
$(".humidity").append(humidity);
$(".wind").append(wind);
});
/*Html & body theme*/
*{
margin:0;
padding:0;
box-sizing: border-box;
}
html{
font-family:"lato",Arial,sans-serif;
}
body {
width: 100%;
height: 100vh;
color:black;
background: linear-gradient(-45deg, rgba(8,19,114,1) 6%, rgba(0,212,255,1) 42%, rgba(231,246,246,1) 82%);
}
/*container properties*/
.grid-container {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition:0.3s;
}
.grid-container:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
#box {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition:0.3s;
border-radius:5px;
}
#box{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
border-radius: 5px;
}
.grid-item-1{
height: 150px;
width:1880px;
position:fixed;
left:10px;
top:20px;
font-size:100px;
text-align:center;
}
.grid-item-2{
height: 600px;
width:500px;
position:fixed;
left:10px;
top:350px;
}
.grid-item-3{
height: 300px;
width:1370px;
position:fixed;
left:520px;
top:180px;
}
.grid-item-4{
height:450px;
width:1370px;
position:fixed;
left:520px;
top:500px;
}
.grid-item-5{
height: 150px;
width:500px;
position:fixed;
left:10px;
top:180px;
font-size: 30px;
}
/*Search Bar Properties*/
form.searchInput input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
form.searchInput button {
float: left;
width: 20%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.searchInput button:hover {
background: #0b7dda;
}
form.searchInput::after {
content: "";
clear: both;
display: table;
}
form.searchInput {
top:30px;
bottom:40px;
position:relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="Stylesheet" href="WeatherDashboardStylesheet.css" type=text/CSS>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<title>WeatherDashboard</title>
</head>
<body>
<div class ="grid-container">
<div id="box" class="grid-item-1">
WeatherDashboard ⛅
</div>
<div id="box" class="grid-item-2">
Item 2
</div>
<div id="box" class="grid-item-3">
Item 3
</div>
<div id="box" class="grid-item-4">
<div id="display" class="display-box">
<p class="city"></p>
<img class="icon">
<p class="date"></p>
<p class="weather"></p>
<p class="temp"></p>
<p class="humidity"></p>
<p class="wind"></p>
</div>
</div>
<div id="box" class="grid-item-5">
Search for a City:
<form class="searchInput" style="margin:auto;max-width:300px">
<input id=input class="input1" type="text" placeholder="Search..." name="search" value="">
<button onclick="myfunction()" id="button" class="button1" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<script rel="Script" src="WeatherDashboardScript.js" type=text/javascript></script>
<script src="https://api.openweathermap.org/data/2.5/forecast?q=chicago&appid=dc171ae0b3b507207c6605cbab0a5f98"></script>
</body>
</html>
Hello, I am trying to add a onclick or click event that will allow someone to input a city and retrieve said city's weather information. I had added a event listener to the api function however it does not seem to work. Please help?
You've got a few problems with your html and your js.
First with your js. In your file, all the code is in 'the main' and is being executed as soon as the file loads. You dont want that, you want to create a function so you can use it to link it with the 'onclick' event. You that simply by wrapping your code in a function like this:
function myfunction() {
$.getJSON("https://api.openweathermap.org/data/2.5/forecast?q="+City+"&appid=dc171ae0b3b507207c6605cbab0a5f98",
function(data){
console.log(data);
var icon ="https://openweathermap.org/img/w/" + data.list[0].weather[0].icon +".png";
var temp=Math.floor(data.list[0].main.temp);
var weather=data.list[0].weather[0].main;
var city=data.city.name;
var date= data.list[0].dt_txt;
var humidity=data.list[0].main.humidity;
var wind=data.list[0].wind.speed;
$(".icon").attr("src",icon);
$(".weather").append(weather);
$(".temp").append(temp);
$(".city").append(city);
$(".date").append(date);
$(".humidity").append(humidity);
$(".wind").append(wind);
});
}
After that, I see you've got a variable called City inside your request which has no value. Your code has to know what is that and be able to retrieve its value. For that we call the 'document' object which contains the input and take its value. Like this:
var City = document.getElementById('input').value;
console.log(City) // Print it for good meassure
With that inside your function, every time you click the button, the value is going to be updated and do the request.
Now, in your html you need to change your button's type property. If its of type submit, the form is submited and the page reloaded (The whole form is unnecesary really but I'll leave it in as to not change your code too much). In this case you want your button to be of type 'button' so it only acts as a button when pressed. Like this:
...
<form class="searchInput" style="margin:auto;max-width:300px" >
<input id="input" class="input1" type="text" placeholder="Search..." name="search">
<button onclick="myfunction()" id="button" class="button1" type="button"><i class="fa fa-search"></i></button>
</form>
...
With all that your code should work, retrieve your json and display the information you want on screen.
I hope all of this helps!
here's a simple representation of a problem I have. When you click on the button, all black divs should change to black. But the big one styled with css doesn't. Any ideas? thanks a lot.
var v;
function link() {
v = document.querySelectorAll('[style*="background:black;"]');
v.forEach(function(value) {
value.style.backgroundColor = "red";
});
}
.box1 {
background-color: black;
height: 200px;
width: 200px;
border: 2px solid green;
font-size: 25px;
color: white;
}
<html>
<head>
<link rel="stylesheet" href="filter.css" />
</head>
<body>
<div style="background:black; height:100px; width:100px;" id="div1"></div>
<div style="background:blue; height:100px; width:100px;"></div>
<div style="background:black; height:100px; width:100px;"></div>
<div class="box1"> css styled box</div>
<button onclick="link()" style="height:20px; width:50px;">Click </button>
</body>
</html>
Try this
var v;
function link(){
v=document.querySelectorAll('[style*="background:black;"]');
v.forEach(function(value){
value.style.backgroundColor = "red";
});
}
.box1{
height:200px;
width:200px;
border:2px solid green;
font-size:25px;
color:white;
}
<html>
<head>
<link rel="stylesheet" href="filter.css" />
</head>
<body>
<div style="background:black; height:100px; width:100px;" id="div1"></div>
<div style="background:blue; height:100px; width:100px;"></div>
<div style="background:black; height:100px; width:100px;"></div>
<div class="box1" style="background:black;"> css styled box</div>
<button onclick="link()" style="height:20px; width:50px;">Click </button>
</body>
</html>
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I am building a todo app. When I add a todo and then click on the todo item below, its text should be crossed (line-through) but its not happening.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="style.css" type="text/css" rel="stylesheet">
<title>Todo</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>Todo</h1>
<div class="add">
<div class="text">
<input class="data" placeholder="Enter data">
</input>
</div>
<div class="submit">
<div class="submit-text">
Add
</div>
</div>
</div>
</div>
</div>
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="script.js" ></script>
</body>
</html>
CSS:
body{
margin:0;
padding:0;
}
.container{
width:600px;
margin:0 auto;
color:#000;
}
.header{
background:#dddddd;
height:200px;
}
.header h1{
color:#FFF;
font-size:50px;
text-align: center;
margin-top:0px;
}
.add{
height:50px;
background:#FFF;
border-left:1px solid #dddddd;
}
.text,.submit{
display:inline-block;
float:left;
}
.text{
width:70%;
height:100%;
}
.submit{
width:30%;
background:green;
height:100%;
font-size: 30px;
}
.data{
font-size: 30px;
/* margin-top: 10px; */
/* padding: 10px 0; */
padding-left: 10px;
width:100%;
border: none;
padding-top: 8px;
padding-bottom: 8px;
}
.submit-text{
/* margin-top: 10px; */
padding: 10px 0;
text-align: center;
color:#FFF;
}
.todorow{
width:100%;
height:50px;
font-size: 30px;
padding-top:10px;
background:#000000;
color:#FFF;
}
.todoitem{
width:95%;
float:left;
display:inline-block;
}
.todoremove{
width:5%;
float:left;
display:inline-block;
}
.strike{
text-decoration: line-through;
}
JS:
console.log("loads");
$(document).ready(function(){
$(".submit").click(function(){
// if (document.getElementsByClassName("data")[0].innerHTML >0)
//{
var value = "<div class='todorow'><div class='todoitem'>"+$('.data').val()+"</div><div class='todoremove'>X</div></div>";
$(".container").append(value);
//}
});
$(".todoitem").on("click", "#__internal", function(){
$(".todoitem").addClass("strike");
alert("done");
console.log("done");
});
console.log("loads");
});
Fiddle
Your fiddle was not working because $ was not defined, but I've fixed it and managed to find the error. You subscribing to .todoitem selector, when there are no todo items. Years ago we used .live() as a workaround, but now we use even simpler syntax.
$(document).ready(function(){
$(".submit").click(function(){
// if (document.getElementsByClassName("data")[0].innerHTML >0)
//{
var value = "<div class='todorow'><div class='todoitem'>"+$('.data').val()+"</div><div class='todoremove'>X</div></div>";
$(".container").append(value);
//}
});
$(document).on("click", ".todoitem", function(){
$(this).addClass("strike");
alert("done");
console.log("done");
});
console.log("loads");
});
So basically you add handler to document with delegated event. You can read more using this link http://api.jquery.com/on/
I am having issues coding a chat box program for a school project. I am having 3 problems with the program. First, my chat message does not post properly in my chat box. Secondly, I want to be able to click exit and have it close to window but am not completely sure how to do it. Lastly, I would like the chat to echo the message or to have ahard coded response at the least. I'm researching how to do that I'm not quite sure how to do this. I have a style sheet and html. Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src=http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js ></script>
<link rel="stylesheet" type="text/css" href="jQuery.css">
//my issues seem to be in my Javascript between here************************************
<script type="text/javascript">
$(document).ready(function(){
$('#submitmsg').click(function(){
var message = $('#usermsg').val()
var old = $('#chatbox').html()
$('#chatbox').html(old + '<p>' + message + '</p>');
});
});
</script>
<script >
function close_window(url){
var newWindow = window.open('', '_self', ''); //open the current window
window.close(url);
};
</script>
//and here*****************************************************************************
</head>
<body>
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome <b></b></p>
//Possible issue here*******************************************************************
<p class="logout"><a id="exit" href="#" onclick="window.close();">Exit Chat</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox">
<p>Here's our chat data</p>
</div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
</body>
</html>
Here is my css:
body {
font:12px arial;
color: #222;
text-align:center;
padding:35px; }
form, p, span {
margin:0;
padding:0; }
input {
font:12px arial; }
a {
color:#0000FF;
text-decoration:none; }
a:hover {
text-decoration:underline; }
#wrapper, #loginform {
margin:0 auto;
padding-bottom:25px;
background:#EBF4FB;
width:75%;
border:1px solid #ACD8F0; }
#loginform {
padding-top:18px; }
#loginform p {
margin: 5px; }
#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:25px;
padding:10px;
background:#fff;
height:270px;
width:430px;
border:1px solid #ACD8F0;
overflow:auto; }
#chatbox p {
padding:1em;
margin:1em;
background:#E6E6E6;
border:1px solid #BDBDBD;
-moz-border-radius:4px;
}
#usermsg {
width:395px;
border:1px solid #ACD8F0; }
#submit {
width: 60px; }
.welcome {
float:left; }
.logout {
float:right; }
.msgln {
margin:0 0 2px 0; }
Some of the css is unnecessary I'm pretty sure but when I tried taking some out it caused issues. Any help is greatly appreciated.
try copying the following - i put the styling into the head, moved the javascript to the end, and swapped the input for a button. This is ties to the onclick and appends the new comment into the chat window. It works, but could be done better, also I have not addressed the issue of closing the window, but this does post the new comment into the chat region.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<style>
body {
font:12px arial;
color: #222;
text-align:center;
padding:35px; }
form, p, span {
margin:0;
padding:0; }
input {
font:12px arial; }
a {
color:#0000FF;
text-decoration:none; }
a:hover {
text-decoration:underline; }
#wrapper, #loginform {
margin:0 auto;
padding-bottom:25px;
background:#EBF4FB;
width:75%;
border:1px solid #ACD8F0; }
#loginform {
padding-top:18px; }
#loginform p {
margin: 5px; }
#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:25px;
padding:10px;
background:#fff;
height:270px;
width:430px;
border:1px solid #ACD8F0;
overflow:auto; }
#chatbox p {
padding:1em;
margin:1em;
background:#E6E6E6;
border:1px solid #BDBDBD;
-moz-border-radius:4px;
}
#usermsg {
width:395px;
border:1px solid #ACD8F0; }
#submit {
width: 60px; }
.welcome {
float:left; }
.logout {
float:right; }
.msgln {
margin:0 0 2px 0; }
</style>
</head>
<body>
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome</p>
<p class="logout"><a id="exit" href="#" onclick="window.close();">Exit Chat</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox">
<p>Here's our chat data</p>
</div>
<form name="message">
<input name="usermsg" type="text" id="usermsg" size="63" />
<button type="button" id="submitmsg" value="send">Send</button>
</form>
</div>
<script>
$(document).ready(function(){
$('#submitmsg').click(function(){
var message = $('#usermsg').val();
$('#chatbox').append('<p>' + message + '</p>');
$('#usermsg').val('');
});
});
function close_window(url){
var newWindow = window.open('', '_self', ''); //open the current window
window.close(url);
};
</script>
</body>
</html>
one problem is that you are using a form that then posts to the same page - reloading it.
I copied your code into a testpage (called chatTest.html) and got the following url after hitting the send button:
chatTest.html?usermsg=test+message&submitmsg=Send
your message does get posted into the chat section but is then removed when the page reloads. and because you are not specifying a method - it is treating it as a get form and posting the message as a querystring appended to the url.
if you are planning on saving the comments to a database, then you should change the action of the form to a different php page, process the results and return the saved content into the chat section- perhaps using Ajax so that you don;t have to reload the page on every chat submission.
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>Login</li>
<li>Join us</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>
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({
});
});